From fd0d1a9fcc9d154c2fbf6a9659cef88a2386482f Mon Sep 17 00:00:00 2001
From: gaby kourie <g.kourie96@gmail.com>
Date: Thu, 1 Feb 2024 20:58:12 +0100
Subject: [PATCH] Fix issue with flashing thumbnail when sprite is not found

---
 .../Views/Videos/VideoController.php          |  6 +---
 .../js/videos/components/thumbnailPreview.vue | 33 ++++++++++---------
 resources/assets/js/videos/main.js            |  4 +--
 .../sass/videos/components/_thumbnail.scss    |  2 ++
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/app/Http/Controllers/Views/Videos/VideoController.php b/app/Http/Controllers/Views/Videos/VideoController.php
index bfca29e4e..7bcbc516a 100644
--- 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
index 121dbc59c..3dc2a52b5 100644
--- 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
index d415ad484..fee4837c8 100644
--- 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);
\ No newline at end of file
+biigle.$mount('video-container', VideoContainer);
\ No newline at end of file
diff --git a/resources/assets/sass/videos/components/_thumbnail.scss b/resources/assets/sass/videos/components/_thumbnail.scss
index efbc6ef8c..22d485b7d 100644
--- 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;
 }