refactor: device record status management

src/components/external/DevicePlayer/index.vue

@@ -88,6 +88,7 @@ export default {
   },
   data () {
     return {
+      needPause: !this.autoplay,
       poster: videoPoster,
       loading: false,
       refreshShow: false,
@@ -149,9 +150,11 @@ export default {
     changeQuality (quality) {
       if (this.quality !== quality) {
         this.quality = quality
-        if (this.$playerInfo && this.$player) {
-          this.destroyPlayer()
+        this.destroyPlayer()
+        if (this.$playerInfo) {
           this.createPlayer(this.$playerInfo)
+        } else {
+          this.getAuthCode()
         }
       }
     },
@@ -162,7 +165,7 @@ export default {
       this.paused = false
       if (this.loading) {
         this.loading = false
-        if (!this.autoplay) {
+        if (this.needPause) {
           this.$player.pause()
         }
       }
@@ -172,17 +175,13 @@ export default {
         return
       }
       if (this.refreshShow) {
-        if (this.$player) {
-          this.destroyPlayer()
-        }
         this.getAuthCode()
+      } else if (this.paused) {
+        this.needPause = true
+        this.$player.play()
       } else {
-        if (this.paused) {
-          this.$player.play()
-        } else {
-          this.$player.pause()
-        }
-        this.paused = !this.paused
+        this.needPause = false
+        this.$player.pause()
       }
     },
     getAuthCode () {
@@ -203,7 +202,12 @@ export default {
         }
       )
     },
-    createPlayer ({ timestamp, token, expire }) {
+    createPlayer ({ timestamp, expire, token }) {
+      if (Number(timestamp) + Number(expire) * 1000 <= Date.now()) {
+        this.getAuthCode()
+        return
+      }
+      this.loading = true
       if (flvjs.isSupported()) {
         const quality = this.quality ? `_${this.quality}` : ''
         const player = flvjs.createPlayer({