Fix hover to preview once and for all

resources/js/preview.js

@@ -1,56 +1,52 @@
-const sleep = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
+function initGalleryPreviews() {
-var old_timestamp = document.getElementById('ts_reference').value;
+    const previews = document.querySelectorAll('.preview-gallery');
 
-function initPreviews() {
+    previews.forEach((img) => {
-    var thumbs = document.querySelectorAll('div[data-thumbs]');
+        // Prevent double initialization
-    thumbs.forEach(function (thumb) {
+        if (img.dataset.previewInitialized) return;
-        var thumbsJSON = JSON.parse(thumb.dataset.thumbs);
-        var originalImage = thumb.children[0].children[1].src;
-        var interval;
-        var i = 1;
 
-        function clear() {
+        img.dataset.previewInitialized = 'true';
-            thumb.children[0].children[1].src = originalImage;
-            i = 1;
-            clearTimeout(interval);
-        }
 
-        function toggle() {
+        let images = [];
-            if (i == 0) {
+
-                clear();
+        try {
+            images = JSON.parse(img.dataset.gallery);
+        } catch (e) {
+            console.error('Invalid gallery JSON', e);
             return;
         }
 
-            thumb.children[0].children[1].src = thumbsJSON[i];
+        if (images.length <= 1) return;
-            i = (i + 1) % thumbsJSON.length;
-        }
 
-        function interval() {
+        const original = img.src;
-            // Start Preview
-            interval = setInterval(toggle, 700);
-        }
 
-        thumb.addEventListener('mouseenter', interval);
+        let index = 0;
-        thumb.addEventListener('mouseleave', clear);
+        let interval = null;
+
+        const startPreview = () => {
+            console.log("startPreview");
+            interval = setInterval(() => {
+                index = (index + 1) % images.length;
+                img.src = images[index];
+            }, 700);
+        };
+
+        const stopPreview = () => {
+            console.log("stopPreview");
+            clearInterval(interval);
+            interval = null;
+
+            index = 0;
+            img.src = original;
+        };
+
+        img.addEventListener('mouseenter', startPreview);
+        img.addEventListener('mouseleave', stopPreview);
     });
 }
 
-async function init() {
+// Initial page load
-    for (let i = 0; i < 9; i++) {
+document.addEventListener('DOMContentLoaded', initGalleryPreviews);
-        var new_timestamp = document.getElementById('ts_reference').value;
-        if (new_timestamp != old_timestamp) {
-            console.log('== Changed ==');
-            initPreviews();
-            break;
-        }
-        console.log('== Didnt Change ==');
-        await sleep(1000);
-    }
-}
 
-window.addEventListener('contentChanged', event => {
+// Livewire v3 navigation/update
-    console.log('== Received contentChanged Event ==');
+document.addEventListener('contentChanged', initGalleryPreviews);
-    init();
-});
-
-initPreviews();

resources/views/components/episode-cover.blade.php

@@ -38,12 +38,19 @@
                     class="aspect-[11/16] w-full object-cover object-center transform-gpu transition-transform duration-500 group-hover:scale-[1.02]"
                 >
             @elseif ($view === 'thumbnail')
+                @php
+                    $galleryImages = $episode->gallery
+                        ->pluck('thumbnail_url')
+                        ->filter()
+                        ->values();
+                @endphp
                 <img
-                    src="{{ $episode->gallery->first()?->thumbnail_url }}"
+                    src="{{ $galleryImages->first() }}"
                     alt="{{ $episode->title }} - {{ $episode->episode }}"
                     loading="lazy"
                     width="1000"
-                    class="w-full object-cover object-center transform-gpu transition-transform duration-500 group-hover:scale-[1.02]"
+                    data-gallery='@json($galleryImages)'
+                    class="preview-gallery aspect-video w-full object-cover object-center transform-gpu transition-transform duration-500 group-hover:scale-[1.02]"
                 >
             @endif
 

resources/views/layouts/footer.blade.php

@@ -94,3 +94,6 @@
 
 <!-- Modals -->
 @include('modals.language-selector')
+
+<!-- Thumbnail hover -->
+@vite(['resources/js/preview.js'])

resources/views/livewire/live-search.blade.php

@@ -24,5 +24,4 @@
         </div>
         {{ $episodes->appends(['tags' => $selectedtags])->links('pagination::tailwind') }}
     </div>
-    @vite(['resources/js/preview.js'])
 </div>

resources/views/livewire/user-likes.blade.php

@@ -24,5 +24,4 @@
         </div>
         {{ $episodes->appends(['tags' => $selectedtags])->links('pagination::tailwind') }}
     </div>
-    @vite(['resources/js/preview.js'])
 </div