优化播放器基础组件按钮样式

web/src/views/common/h265web.vue

@@ -1,13 +1,13 @@
 <template>
-  <div id="h265Player" ref="container" style="background-color: #000000; position: relative; display: flex; align-items: center; justify-content: center;" @dblclick="fullscreenSwich">
+  <div id="h265Player" ref="container" style="background-color: #000000; position: relative; display: flex; align-items: center; justify-content: center;" @dblclick="fullscreenSwich" @mouseenter="showBar = true" @mouseleave="showBar = false">
     <div id="glplayer" ref="playerBox" style="width: 100%; height: 100%; margin: 0 auto;">
       <div v-if="playerLoading" class="play-loading">
         <i class="el-icon-loading" />
-        视频加载中
+        <span style="margin-left: 5px">视频加载中</span>
       </div>
     </div>
 
-    <div v-if="showButton" id="buttonsBox" class="buttons-box">
+    <div v-if="showButton" id="buttonsBox" class="buttons-box" :style="{ opacity: showBar ? 1 : 0, pointerEvents: showBar ? 'auto' : 'none' }">
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play h265web-btn" @click="unPause" />
         <i v-if="playing" class="iconfont icon-pause h265web-btn" @click="pause" />
@@ -60,7 +60,8 @@ export default {
       playerHeight: 0,
       inited: false,
       playerLoading: false,
-      mediaInfo: null
+      mediaInfo: null,
+      showBar: true
     }
   },
   watch: {
@@ -267,6 +268,7 @@ export default {
   height: 56px;
   background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
   position: absolute;
+  transition: opacity 0.3s ease;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

web/src/views/common/jessibuca.vue

@@ -3,8 +3,9 @@
     ref="container"
     style="width:100%; height: 100%; background-color: #000000;margin:0 auto;position: relative;"
     @dblclick="fullscreenSwich"
+    @mouseenter="showBar = true" @mouseleave="showBar = false"
   >
-    <div id="buttonsBox" class="buttons-box" v-if="showButton === undefined || showButton">
+    <div id="buttonsBox" class="buttons-box" v-if="showButton === undefined || showButton" :style="{ opacity: showBar ? 1 : 0, pointerEvents: showBar ? 'auto' : 'none' }">
       <div class="buttons-box-left">
         <i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick" />
         <i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause" />
@@ -51,7 +52,8 @@ export default {
       rotate: 0,
       vod: true, // 点播
       forceNoOffscreen: false,
-      localVideoUrl: this.videoUrl
+      localVideoUrl: this.videoUrl,
+      showBar: true
     }
   },
   created() {
@@ -289,6 +291,7 @@ export default {
   height: 28px;
   background-color: rgba(43, 51, 63, 0.7);
   position: absolute;
+  transition: opacity 0.3s ease;
   display: flex;
   left: 0;
   bottom: 0;

web/src/views/common/playerTabs.vue

@@ -120,7 +120,7 @@ export default {
 }
 .player-video-area {
   width: 100%;
-  height: 100%;
+  height:calc(100% - 36px);;
   background: #000;
 }
 </style>

web/src/views/common/ptzControls.vue

@@ -15,7 +15,7 @@
       </div>
       <div class="ptz-func-col">
         <div class="ptz-func-group" :class="{ row: btnLayout === 'row' }">
-          <div class="ptz-func-row">
+          <div class="ptz-func-row" v-if="homePosition">
             <div class="ptz-func-row">
               <div class="ptz-func-btn" title="看守位" @click.prevent="$emit('ptz-guard')">
                 <i class="el-icon-s-home" /><span>看守位</span>
@@ -70,7 +70,8 @@
 export default {
   name: 'PtzControls',
   props: {
-    btnLayout: { type: String, default: 'column' }
+    btnLayout: { type: String, default: 'column' },
+    homePosition: { type: Boolean, default: false }
   },
   data() {
     return {

web/src/views/device/common/playerPtzPanel.vue

@@ -12,7 +12,6 @@
         :show-precise="false"
         @ptz-move="onPtzMove"
         @ptz-stop="onPtzStop"
-        @ptz-guard="onPtzGuard"
         @focus-move="onFocusMove"
         @focus-stop="onFocusStop"
         @iris-move="onIrisMove"
@@ -72,13 +71,6 @@ export default {
         zoomSpeed: 0
       })
     },
-    onPtzGuard() {
-      this.$store.dispatch('device/homePosition', {
-        deviceId: this.deviceId,
-        channelId: this.channelDeviceId,
-        enabled: true
-      })
-    },
     onFocusMove(e) {
       const speedVal = this.ptzSpeed(e.speed)
       this.$store.dispatch('frontEnd/focus', [this.deviceId, this.channelDeviceId, e.command, speedVal])

web/src/views/dialog/devicePlayer.vue

@@ -25,7 +25,6 @@
               btn-layout="row"
               @ptz-move="onPtzMove"
               @ptz-stop="onPtzStop"
-              @ptz-guard="onPtzGuard"
               @focus-move="onFocusMove"
               @focus-stop="onFocusStop"
               @iris-move="onIrisMove"
@@ -193,13 +192,6 @@ export default {
         zoomSpeed: 0
       })
     },
-    onPtzGuard() {
-      this.$store.dispatch('device/homePosition', {
-        deviceId: this.deviceId,
-        channelId: this.channelId,
-        enabled: true
-      })
-    },
     onFocusMove(e) {
       const speedVal = this.ptzSpeed(e.speed)
       this.$store.dispatch('frontEnd/focus', [this.deviceId, this.channelId, e.command, speedVal])