Load new videos when selected, protect video element when it does not exist,…

Load new videos when selected, protect video element when it does not exist, watch previewFile for changes, reload video element, support for mp3 audio files

src/components/Preview.vue

@@ -96,18 +96,24 @@ export default {
       await this.createClip(payload)
     },
     togglePause() {
-      this.is_paused = this.$refs.video.paused
+      if (this.$refs.video) {
+        this.is_paused = this.$refs.video.paused
+      }
     },
     togglePlayback() {
-      if (this.$refs.video.paused) {
-        this.$refs.video.play()
-      } else {
-        this.$refs.video.pause()
+      if (this.$refs.video) {
+        if (this.$refs.video.paused) {
+          this.$refs.video.play()
+        } else {
+          this.$refs.video.pause()
+        }
       }
     },
     videoTimeUpdate() {
-      let playback_percent = (this.$refs.video.currentTime / this.$refs.video.duration)
-      this.position = playback_percent
+      if (this.$refs.video) {
+        let playback_percent = (this.$refs.video.currentTime / this.$refs.video.duration)
+        this.position = playback_percent
+      }
     },
     startDrag(e, marker) {
       if (e) {
@@ -123,7 +129,9 @@ export default {
       if (!this.dragging_marker) {
         let percent_x = this.getCursorPosition(e)
         this.position  = percent_x
-        this.$refs.video.currentTime = this.position * this.$refs.video.duration
+        if (this.$refs.video) {
+          this.$refs.video.currentTime = this.position * this.$refs.video.duration
+        }
         return false
       }
     },
@@ -137,14 +145,20 @@ export default {
     drag(e) {
       if (this.dragging_marker == 'start') {
         this.markers.start = Math.min(this.getCursorPosition(e), this.markers.end)
-        this.$refs.video.currentTime = this.markers.start * this.$refs.video.duration
+        if (this.$refs.video) {
+          this.$refs.video.currentTime = this.markers.start * this.$refs.video.duration
+        }
       } else if (this.dragging_marker == 'end') {
         this.markers.end = Math.max(this.getCursorPosition(e, 12), this.markers.start)
-        this.$refs.video.currentTime = this.markers.end * this.$refs.video.duration
+        if (this.$refs.video) {
+          this.$refs.video.currentTime = this.markers.end * this.$refs.video.duration
+        }
       } else if (this.dragging_marker == 'playhead') {
         let percent_x = this.getCursorPosition(e)
         this.$refs.playhead.style.left = `${percent_x * 100}%`
-        this.$refs.video.currentTime = percent_x * this.$refs.video.duration
+        if (this.$refs.video) {
+          this.$refs.video.currentTime = percent_x * this.$refs.video.duration
+        }
       }
     },
     getMarkerWidth() {
@@ -193,12 +207,25 @@ export default {
       return (this.previewFile && this.previewFile.json.vcodec  == "QImage")
     },
     previewFormat() {
-      if (this.previewFile) {
+      if (this.previewFile && this.previewFile.json.acodec == "mp3") {
+        return 'audio/mpeg'
+      } else {
         return `video/${this.previewFile.media.split('.').pop()}`
       }
-      return ''
     }
   },
+  watch: {
+    previewFile() {
+      if (this.$refs.video) {
+        this.is_paused = true
+        this.$refs.video.pause()
+        this.$refs.video.load()
+      }
+      this.position = 0.0
+      this.markers.start = 0.0
+      this.markers.end = 1.0
+    },
+  },
   updated() {
     this.marker_width_percent = this.getMarkerWidth()
   }