feat(camera): playback optimization

src/components/dialog/PreviewDialog/index.vue

@@ -21,12 +21,14 @@
         :src="assetUrl"
         autoplay
         controls
+        controlslist="nodownload noremoteplayback"
       />
       <audio
         v-if="isAudio"
         :src="assetUrl"
         autoplay
         controls
+        controlslist="nodownload noremoteplayback"
       />
       <video
         v-if="isStreamingMedia"

src/scss/bem/_layout.scss

@@ -70,6 +70,10 @@
   &.large {
     grid-template-columns: repeat(3, minmax(160px, 1fr));
   }
+
+  &.xl {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 .l-grid--info {

src/views/device/detail/components/Anolg/components/BoxStatus.vue

@@ -33,7 +33,8 @@ export default {
     onTrigger (topic) {
       publish(`${this.device.productId}/${this.device.id}/${topic}`, JSON.stringify({
         messageId: `${this.device.id}_${Math.random().toString(16).slice(2)}`,
-        timestamp: `${Date.now()}`
+        timestamp: `${Date.now()}`,
+        apkVersion: '-1'
       }), true).then(() => {
         this.$message({
           type: 'success',

src/views/device/detail/components/DeviceExternal/components/Record/components/components/PlayAxis.vue → src/views/device/detail/components/DeviceExternal/components/Record/components/PlayAxisDialog/components/PlayAxis.vue

@@ -7,7 +7,7 @@
       <template v-if="online">
         <video
           ref="video"
-          class="o-video__player o-simple-video"
+          class="o-video__player o-simple-video u-relative"
           :poster="poster"
           autoplay
           muted
@@ -234,11 +234,14 @@ export default {
       clearTimeout(this.$timer)
       this.$timer = setTimeout(this.createPlayer, delay + Math.random() * delay | 0)
     },
-    onWebsocket (url) {
-      const ws = new WebSocket(url)
-      ws.onclose = () => {
-        console.log('websocket 断开！')
-      }
+    onVideoError (e) {
+      console.log('播放异常', e)
+      this.onVideoReset()
+      this.onVideoDestroyByError('播放异常')
+      this.$message({
+        type: 'warning',
+        message: '当前无数据'
+      })
     }
   }
 }

src/views/device/detail/components/DeviceExternal/components/Record/components/PlayaxisDialog.vue → src/views/device/detail/components/DeviceExternal/components/Record/components/PlayAxisDialog/index.vue

@@ -21,13 +21,14 @@
     </template>
   </el-dialog>
 </template>
+
 <script>
 import { getAssetUrl } from '@/api/asset'
 import dialogMixin from '@/mixins/dialog'
-import PlayAxis from './components/PlayAxis'
+import PlayAxis from './components/PlayAxis.vue'
 
 export default {
-  name: 'PlayaxisDialog',
+  name: 'PlayAxisDialog',
   components: {
     PlayAxis
   },
@@ -64,7 +65,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 .o-close {
   position: absolute;
   top: 0;

src/views/device/detail/components/DeviceExternal/components/Record/components/index.vue → src/views/device/detail/components/DeviceExternal/components/Record/components/RecordPlayer.vue

@@ -1,33 +1,26 @@
 <template>
-  <div
-    class="o-video controls"
-    :class="{mask: paused || loading}"
-  >
+  <div class="o-video controls">
     <video
       ref="video"
-      class="o-video__player o-simple-video"
-      muted
+      class="o-video__player"
       :src="assetUrl"
+      muted
+      controls
+      controlslist="nodownload noremoteplayback"
     />
-    <div
-      class="o-video__mask"
-    >
-      <div
-        class="l-flex--row center o-video__btn u-pointer"
-        @click.stop="onPlayOrPause"
-      >
-        <i :class="statusIconClass" />
+    <template v-if="camera.status !== 1">
+      <div class="o-video__mask">
+        <div
+          class="l-flex--row center o-video__btn u-pointer"
+          @click.stop="onPlayOrPause"
+        >
+          <i :class="statusIconClass" />
+        </div>
       </div>
-    </div>
-    <div
-      class="l-flex--row c-footer"
-    >
+    </template>
+    <div class="l-flex--row c-top">
       <div class="l-flex__auto c-sibling-item u-ellipsis">{{ camera.startTime }}</div>
       <slot />
-      <i
-        class="c-sibling-item el-icon-full-screen has-active"
-        @click="onFullScreen"
-      />
       <i
         class="c-sibling-item el-icon-delete has-active"
         @click="onDeleteRecord"
@@ -61,11 +54,11 @@ export default {
     statusIconClass () {
       switch (true) {
         case this.camera.status === 0:
-          return 'el-icon-loading'
-        case this.loading:
-          return 'el-icon-loading'
+          return 'el-icon-download'
         case this.isdownload:
           return 'el-icon-download has-active'
+        case this.loading:
+          return 'el-icon-loading'
         case this.paused:
           return 'el-icon-video-play has-active'
         default:
@@ -79,26 +72,14 @@ export default {
   watch: {
     camera (newValue, oldValue) {
       this.paused = newValue.id === oldValue.id ? this.paused : true
+      this.isdownload = (this.camera.status !== 1 && this.camera.status !== 0)
     }
   },
   created () {
-    this.isdownload = !this.camera.url
     if (this.camera.status === 0) {
       this.loading = true
     }
   },
-  mounted () {
-    this.$refs.video.addEventListener('ended', () => {
-      this.paused = true
-    })
-    this.$refs.video.addEventListener('waiting', () => {
-      this.loading = true
-    })
-    this.$refs.video.addEventListener('playing', () => {
-      this.loading = false
-      this.paused = false
-    })
-  },
   methods: {
     onDeleteRecord () {
       deleteRecord(this.camera.id).then(() => {
@@ -106,18 +87,8 @@ export default {
       })
     },
     onPlayOrPause () {
-      switch (true) {
-        case this.isdownload:
-          this.$emit('onResumeDownloadRecord', this.camera.id)
-          break
-        case this.paused:
-          this.paused = false
-          this.$refs.video.play()
-          break
-        default:
-          this.paused = true
-          this.$refs.video.pause()
-          break
+      if (this.isdownload) {
+        this.$emit('onResumeDownloadRecord', this.camera.id)
       }
     },
     onFullScreen () {
@@ -160,12 +131,34 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.c-camera__checkbox{
+.c-camera__checkbox {
   position: absolute;
   top: 10px;
   left: 10px;
 }
-.mask .o-video__mask{
+
+.c-top {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  padding: 16px 16px 16px;
+  color: #fff;
+}
+
+.o-video__mask {
   display: inline-block;
 }
+
+.o-video__btn {
+  font-size: 30px;
+}
+
+.o-video__player {
+  object-fit: contain;
+
+  &::-webkit-media-controls-volume-control-container {
+    display: none !important;
+  }
+}
 </style>

src/views/device/detail/components/DeviceExternal/components/Record/index.vue

@@ -27,10 +27,12 @@
             <div
               class="c-camera__bound"
               :style="{color: index === active ? '#fff':'#4293FE'}"
-            ><div
-              class="c-camera__dian"
-              :style="{backgroundColor: index === active ? '#fff':'#4293FE'}"
-            />{{ camera.bound ? '已使用' : '未使用' }}</div>
+            >
+              <div
+                class="c-camera__dian"
+                :style="{backgroundColor: index === active ? '#fff':'#4293FE'}"
+              />{{ camera.bound ? '已使用' : '未使用' }}
+            </div>
             <!-- <div :style="{color: index === 2 ? '#E51414':'#8E929C'}">已下载{{ camera.totalCount }}个录像</div> -->
           </div>
           <div
@@ -44,7 +46,7 @@
       <grid-table
         ref="table"
         :schema="recordSchema"
-        size="large"
+        size="xl"
       >
         <grid-table-item v-slot="item">
           <record-player
@@ -67,8 +69,8 @@
         </div>
       </template>
     </table-dialog>
-    <PlayaxisDialog
-      ref="PlayaxisDialog"
+    <play-axis-dialog
+      ref="playAxisDialog"
       :camera="cameraObj"
       :identifier="identifier"
     />
@@ -85,13 +87,13 @@ import {
   stopDownloadRecord,
   resumeDownloadRecord
 } from '@/api/external'
-import PlayaxisDialog from './components/PlayaxisDialog'
-import RecordPlayer from './components/index'
+import RecordPlayer from './components/RecordPlayer.vue'
+import PlayAxisDialog from './components/PlayAxisDialog'
 
 export default {
   components: {
     RecordPlayer,
-    PlayaxisDialog
+    PlayAxisDialog
   },
   props: {
     cameras: {
@@ -163,7 +165,7 @@ export default {
   methods: {
     onPlayBack () {
       if (this.cameras[this.active].onlineStatus === 1) {
-        this.$refs.PlayaxisDialog.show()
+        this.$refs.playAxisDialog.show()
       } else {
         this.$message({
           type: 'warning',
@@ -179,7 +181,7 @@ export default {
     },
     onPlayRecords ({ identifier }) {
       this.identifier = identifier
-      this.$refs.PlayaxisDialog.show()
+      this.$refs.playAxisDialog.show()
     },
     isDisableDate (date) {
       return date > Date.now()
@@ -254,20 +256,20 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.c-camera{
-  border-top: 1px solid #EDF0F6;
+.c-camera {
+  border-top: 1px solid #edf0f6;
   padding: 15px 0;
-  &__left{
+  &__left {
     width: 224px;
-    border-right: 1px solid #EDF0F6;
+    border-right: 1px solid #edf0f6;
   }
-  &__padding{
+  &__padding {
     padding: 16px;
   }
-  &__input{
+  &__input {
     width: 100%;
   }
-  &__tip{
+  &__tip {
     width: 32px;
     height: 16px;
     text-align: center;
@@ -275,11 +277,11 @@ export default {
     color: #fff;
     margin-left: 10px;
   }
-  &__bound{
-    color: #4293FE;
+  &__bound {
+    color: #4293fe;
     margin: 5px 0;
   }
-  &__dian{
+  &__dian {
     width: 4px;
     height: 4px;
     border-radius: 4px;
@@ -288,27 +290,27 @@ export default {
     top: -2px;
     margin-right: 7px;
   }
-  &__item{
+  &__item {
     padding: 16px;
     cursor: pointer;
-    border-bottom: 1px solid #EDF0F6;
+    border-bottom: 1px solid #edf0f6;
     font-size: 12px;
-    img{
+    img {
       width: 23px;
       height: 22px;
       margin-right: 10px;
     }
   }
-  &__name{
+  &__name {
     font-size: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  &__active{
-    background-color: #1C5CB0;
+  &__active {
+    background-color: #1c5cb0;
     color: #fff;
   }
-  &__right{
+  &__right {
     padding-left: 17px;
     position: relative;
   }
@@ -323,10 +325,10 @@ export default {
 }
 </style>
 <style>
-.c-camera .el-checkbox__input.is-checked+.el-checkbox__label{
+.c-camera .el-checkbox__input.is-checked + .el-checkbox__label {
   color: #1c5cb0;
 }
-.c-camera .el-checkbox__input.is-checked .el-checkbox__inner{
+.c-camera .el-checkbox__input.is-checked .el-checkbox__inner {
   background-color: #1c5cb0;
   border-color: #1c5cb0;
 }