Fix issue with flashing thumbnail when sprite is not found

biigle · Feb 1, 2024 · fd0d1a9 · fd0d1a9
1 parent 1b6c587
commit fd0d1a9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 23 deletions.
diff --git a/app/Http/Controllers/Views/Videos/VideoController.php b/app/Http/Controllers/Views/Videos/VideoController.php
@@ -74,11 +74,7 @@ public function show(Request $request, $id)
 
         $fileIds = $volume->orderedFiles()->pluck('uuid', 'id');
 
-        if ($volume->isImageVolume()) {
-            $thumbUriTemplate = thumbnail_url(':uuid');
-        } else {
-            $thumbUriTemplate = thumbnail_url(':uuid', config('videos.thumbnail_storage_disk'));
-        }
+        $thumbUriTemplate = thumbnail_url(':uuid', config('videos.thumbnail_storage_disk'));
 
         $spritesThumbnailsPerSprite = config('videos.sprites_thumbnails_per_sprite');
         $spritesThumbnailInterval = config('videos.sprites_thumbnail_interval');

diff --git a/resources/assets/js/videos/components/thumbnailPreview.vue b/resources/assets/js/videos/components/thumbnailPreview.vue
@@ -2,8 +2,10 @@
     <div 
         class="thumbnail-preview" 
         ref="thumbnailPreview" 
+        :style="thumbnailStyle"
         :width="thumbnailWidth" 
-        :height="thumbnailHeight">
+        :height="thumbnailHeight"
+        v-show="!spriteNotFound">
 
         <canvas 
             class="thumbnail-canvas" 
@@ -45,8 +47,10 @@ export default {
             sprite: new Image(),
             spriteIdx: 0,
             thumbProgressBarSpace: 150,
+            sideButtonsWidth: 52,
             spritesFolderPath: null,
-            spriteNotFound: false,
+            // start with true to hide flashing black thumbnail
+            spriteNotFound: true,
             // default values but will be overwritten in created()
             thumbnailWidth: 240,
             thumbnailHeight: 138,
@@ -55,6 +59,16 @@ export default {
             estimatedThumbnails: 0,
         };
     },
+    computed: {
+        thumbnailStyle() {
+            let left = Math.min(
+                this.clientMouseX - this.thumbnailWidth / 2,
+                window.innerWidth - this.thumbnailWidth - this.sideButtonsWidth
+            );
+            let top = this.scrollstripTop - this.thumbProgressBarSpace;
+            return `transform: translate(${left}px, ${top}px);`
+        }
+    },
     methods: {
         updateSprite() {
             this.spriteIdx = Math.floor(this.hoverTime / (this.thumbnailInterval * this.thumbnailsPerSprite));
@@ -77,12 +91,6 @@ export default {
             let context = this.thumbnailCanvas.getContext('2d');
             context.clearRect(0, 0, this.thumbnailCanvas.width, this.thumbnailCanvas.height);
             context.drawImage(this.sprite, sourceX, sourceY, this.thumbnailWidth, this.thumbnailHeight, 0, 0, this.thumbnailCanvas.width, this.thumbnailCanvas.height);
-
-            // position the thumbnail preview based on the mouse position
-            let sideButtonsWidth = 52;
-            let left = Math.min(this.clientMouseX - this.thumbnailCanvas.width / 2, window.innerWidth - this.thumbnailCanvas.width - sideButtonsWidth);
-            this.thumbnailPreview.style.left = left + 'px';
-            this.thumbnailPreview.style.top = (this.scrollstripTop - this.thumbProgressBarSpace) + 'px';
         },
         updateThumbnailInterval() {
             let maxThumbnails = biigle.$require('videos.spritesMaxThumbnails');
@@ -125,16 +133,11 @@ export default {
         this.thumbnailCanvas = this.$refs.thumbnailCanvas;
         this.updateSprite();
         this.sprite.onload = () => {
+            this.spriteNotFound = false;
             this.viewThumbnailPreview();
         }
-        // can't hide the error 404 message on the browser console
-        // trying to use a http request to ask if the file exists and wrap it with try/catch 
-        // does prevent the GET 404(Not Found) error 
-        // but we get a HEAD 404(Not Found) error instead (maybe server side?)
         this.sprite.onerror = () => {
-            if (this.thumbnailPreview.style.display !== 'none') {
-                this.thumbnailPreview.style.display = 'none';
-            }
+            this.spriteNotFound = true;
         }
     }
 };

diff --git a/resources/assets/js/videos/main.js b/resources/assets/js/videos/main.js
@@ -2,8 +2,6 @@ import './filters/videoTime';
 import Navbar from './navbar';
 import SearchResults from './searchResults';
 import VideoContainer from './videoContainer';
-import ThumbnailPreview from './components/thumbnailPreview';
 biigle.$mount('search-results', SearchResults);
 biigle.$mount('video-annotations-navbar', Navbar);
-biigle.$mount('video-container', VideoContainer);
-biigle.$mount('thumbnail-preview', ThumbnailPreview);
+biigle.$mount('video-container', VideoContainer);
diff --git a/resources/assets/sass/videos/components/_thumbnail.scss b/resources/assets/sass/videos/components/_thumbnail.scss
@@ -1,5 +1,7 @@
 .thumbnail-preview {
     position: fixed;
+    top: 0;
+    left: 0;
     z-index: 1;
 }