Refactored clip length (for small labels). Added image and video error message…

Refactored clip length (for small labels). Added image and video error message (for unsupported formats). Fixed bug switching between clip and file of the same original file object.

src/components/Files.vue

@@ -93,7 +93,11 @@ export default {
       await this.deleteFile(file.id)
     },
     toggleSelection(fileObject) {
-      if (fileObject != this.preview.file) {
+      if (this.preview.clip) {
+        // De-select clip
+        this.setPreviewClip(null)
+      }
+      if (!this.preview.file || (this.preview.file && fileObject.id != this.preview.file.id)) {
         this.setPreviewFile(fileObject)
       } else {
         this.setPreviewFile(null)
@@ -115,7 +119,7 @@ export default {
       }
     },
     ...mapActions(['loadFiles', 'createFile', 'deleteFile']),
-    ...mapMutations((['setPreviewFile', 'setFiles']))
+    ...mapMutations((['setPreviewFile', 'setPreviewClip', 'setFiles']))
   },
   computed: {
     searchedFiles() {
@@ -138,7 +142,7 @@ export default {
 
 <style scoped>
   .scrolling-container {
-    height: 150px;
+    height: 135px;
     overflow: scroll;
   }
   .upload-btn {

src/components/Preview.vue

@@ -18,15 +18,15 @@
     <!-- Preview Video/Image -->
     <div class="col-sm-12">
       <video ref="video" v-if="!isImage && hasPreviewFile" v-show="media_loaded" @loadeddata="videoLoaded" @timeupdate="videoTimeUpdate" @pause="togglePause" @play="togglePause" loop preload="" poster="" class="video-responsive">
-        <source :type="previewFormat" :src="preview.file.media">
+        <source :type="previewFormat" :src="preview.file.media" @error="mediaError">
       </video>
-      <img v-if="isImage && hasPreviewFile" v-show="media_loaded" :src="preview.file.media" @load="imageLoaded" class="img-fluid img-thumbnail" />
+      <img v-if="isImage && hasPreviewFile" v-show="media_loaded" :src="preview.file.media" @load="imageLoaded" @error="mediaError" class="img-fluid img-thumbnail" />
     </div>
 
   </div>
 
   <!-- Timeline Container -->
-  <div v-if="hasPreviewFile" class="d-flex flex-column d-sm-flex flex-sm-row">
+  <div v-if="hasPreviewFile && media_loaded" class="d-flex flex-column d-sm-flex flex-sm-row">
     <!-- Play/Pause button -->
     <div class="col-sm-1 d-flex flex-column p-1">
       <button title="Play/Pause Preview" type="button" class="btn btn-secondary timeline-btn" @click="togglePlayback">
@@ -75,6 +75,14 @@
       <p class="lead">Upload or select a video to begin!</p>
     </div>
   </div>
+
+  <!-- Media error message -->
+  <div v-if="media_error && hasPreviewFile" class="mb-5 text-center" style="margin-top: 7em;">
+    <div class="col-lg-6 mx-auto">
+      <p class="lead">Sorry, this media-type is unsupported in the HTML video player!</p>
+    </div>
+  </div>
+
 </template>
 
 <script>
@@ -92,7 +100,9 @@ export default {
       marker_width_percent: 0.0,
       clipSizeClass: "",
       show_spinner: false,
-      media_loaded: false
+      media_loaded: false,
+      media_error: false,
+      loaded_file_id: null
     }
   },
   methods: {
@@ -153,15 +163,32 @@ export default {
       }
     },
     videoLoaded() {
+      this.loaded_file_id = this.preview.file.id
       this.show_spinner = false
       this.media_loaded = true
+      this.media_error = false
+      this.checkClipSize()
       if (this.$refs.video && this.preview.clip) {
         this.$refs.video.currentTime = this.preview.clip.start
       }
     },
     imageLoaded() {
+      this.loaded_file_id = this.preview.file.id
       this.show_spinner = false
       this.media_loaded = true
+      this.media_error = false
+      this.checkClipSize()
+    },
+    mediaError() {
+      this.show_spinner = false
+      this.media_error = true
+    },
+    checkClipSize() {
+      if (this.$refs.clip && this.$refs.clip.clientWidth < 80) {
+        this.clipSizeClass = "clip-too-small"
+      } else {
+        this.clipSizeClass = ""
+      }
     },
     startDrag(e, marker) {
       if (e) {
@@ -195,12 +222,7 @@ export default {
       }
     },
     drag(e) {
-      if (this.$refs.clip.clientWidth < 80) {
-        this.clipSizeClass = "clip-too-small"
-      } else {
-        this.clipSizeClass = ""
-      }
-
+      this.checkClipSize()
       if (this.dragging_marker == 'start') {
         this.setPreview({start: Math.min(this.getCursorPosition(e), this.preview.end),
                                 end: this.preview.end})
@@ -278,7 +300,8 @@ export default {
   },
   watch: {
     'preview.file': function() {
-      if (this.preview.file) {
+      this.media_error = false
+      if (this.preview.file && this.preview.file.id != this.loaded_file_id) {
         this.show_spinner = true
         this.media_loaded = false
       }