feat: support playback ended event

src/components/external/DevicePlayer/index.vue

@@ -15,6 +15,7 @@
         @waiting="onVideoWaiting"
         @playing="onVideoPlaying"
         @error="onVideoError"
+        @ended="onVideoEnded"
       />
       <div class="o-video__mask">
         <div
@@ -41,7 +42,7 @@
         />
         <div
           v-else
-          class="l-flex__none c-sibling-item o-quality-menu has-active u-pointer"
+          class="l-flex__none c-sibling-item o-quality-menu u-pointer"
           @click.stop="toggleQualityMenu"
         >
           <div
@@ -52,12 +53,13 @@
               v-for="item in qualities"
               :key="item.value"
               class="o-quality-menu__item u-pointer"
+              :class="{ active: quality.value === item.value }"
               @click="changeQuality(item)"
             >
               {{ item.label }}
             </div>
           </div>
-          {{ quality.label }}
+          <span class="has-active">{{ quality.label }}</span>
         </div>
         <i
           class="c-sibling-item el-icon-full-screen has-active u-pointer"
@@ -148,6 +150,13 @@ export default {
     this.hideQualityMenu()
   },
   methods: {
+    onVideoEnded () {
+      console.log('Device onVideoEnded')
+      this.destroyPlayer()
+      this.recordConfig = null
+      this.$playerInfo = null
+      this.createPlayer()
+    },
     getRecordConfig () {
       this.loadingQuality = true
       getRecordConfig(this.device.id, { custom: true }).finally(() => {
@@ -237,13 +246,13 @@ export default {
         this.getAuthCode()
         return
       }
-      const { timestamp, expire, token } = this.$playerInfo
+      const { vhost = '__defaultVhost__', token, timestamp, expire } = this.$playerInfo
       if (Number(timestamp) + Number(expire) * 1000 <= Date.now()) {
         this.getAuthCode()
         return
       }
       this.destroyPlayer()
-      this.playUrl(`${GATEWAY}/live/${this.recordConfig.stream}.flv?authorization=${token}&timestamp=${timestamp}&expire=${expire}`)
+      this.playUrl(`${GATEWAY}/live/${this.recordConfig.stream}.flv?vhost=${vhost}&authorization=${token}&timestamp=${timestamp}&expire=${expire}`)
     }
   }
 }
@@ -273,6 +282,10 @@ export default {
     padding: 4px 0;
     color: #fff;
 
+    &.active {
+      color: $success;
+    }
+
     &:hover {
       color: $primary;
     }

src/components/external/camera/CameraDetail/index.vue

@@ -18,6 +18,7 @@
       @waiting="onVideoWaiting"
       @playing="onVideoPlaying"
       @error="onVideoError"
+      @ended="onVideoEnded"
     />
     <div class="c-camera-detail__footer has-padding">
       <div class="l-flex--row c-sibling-item--v c-video-controls">
@@ -199,6 +200,13 @@ export default {
     }
   },
   methods: {
+    onVideoEnded () {
+      console.log('Camera Detail onVideoEnded')
+      this.videoSettings = null
+      this.infoData = null
+      this.getAvailableParam()
+      this.onRefresh()
+    },
     close () {
       this.destroyPlayer()
       this.$emit('close')

src/components/external/camera/CameraPlayer/index.vue

@@ -15,6 +15,7 @@
         @waiting="onVideoWaiting"
         @playing="onVideoPlaying"
         @error="onVideoError"
+        @ended="onVideoEnded"
       />
       <div class="o-video__mask">
         <div
@@ -77,6 +78,11 @@ export default {
     this.online && this.createPlayer()
   },
   methods: {
+    onVideoEnded () {
+      console.log('Camera onVideoEnded')
+      this.destroyPlayer()
+      this.createPlayer()
+    },
     createPlayer () {
       this.playUrl(`${GATEWAY_CAMERA}/${this.camera.identifier}?authorization=${this.token}`)
     }

src/components/external/player.js

@@ -209,6 +209,9 @@ export default {
     onVideoError (e) {
       console.log('onVideoError', e)
       this.destroyPlayer()
+    },
+    onVideoEnded () {
+      console.log('onVideoEnd')
     }
   }
 }

src/views/device/record/index.vue

@@ -10,7 +10,6 @@
       class="l-flex__auto l-flex--col"
     >
       <div class="l-flex__none l-flex--row has-bottom-padding">
-        <div class="l-flex__auto c-sibling-item" />
         <div class="l-flex__none c-sibling-item">
           <svg-icon
             class="c-sibling-item o-menu-icon u-pointer"
@@ -31,6 +30,21 @@
             @click="onChange(9)"
           />
         </div>
+        <div class="l-flex__auto c-sibling-item" />
+        <div class="l-flex__none l-flex--row c-sibling-item">
+          <search-input
+            v-model.trim="options.params.name"
+            class="c-sibling-item"
+            placeholder="设备名称"
+            @search="getDevices"
+          />
+          <button
+            class="c-sibling-item o-button"
+            @click="getDevices"
+          >
+            搜索
+          </button>
+        </div>
       </div>
       <div
         class="l-flex__self c-record-grid u-overflow-y--auto"
@@ -66,7 +80,7 @@ export default {
   name: 'DeviceRecord',
   data () {
     return {
-      options: createListOptions({ activate: 2, pageSize: 4 })
+      options: createListOptions({ activate: 2, pageSize: 4, name: '' })
     }
   },
   computed: {