Update fast-search-card.js

Author: fastender

dist/fast-search-card.js

@@ -8147,11 +8147,33 @@ class FastSearchCard extends HTMLElement {
                         videoElement.src = newVideoUrl;
                         videoElement.load();
 
+                        // Fade-in nach erfolgreichem Laden
+                        videoElement.addEventListener('canplay', () => {
+                            videoElement.animate([
+                                { opacity: 0, transform: 'scale(0.95)' },
+                                { opacity: 1, transform: 'scale(1)' }
+                            ], {
+                                duration: 600,
+                                easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+                                fill: 'forwards'
+                            });
+                        }, { once: true });
+                        
                         videoElement.onended = function() {
                             this.pause();
                             this.currentTime = this.duration - 0.1;
                         };
                     };
+                } else if (videoElement.style.opacity === '0' || !videoElement.style.opacity) {
+                    // Erstes Laden - direkte Fade-in Animation
+                    videoElement.animate([
+                        { opacity: 0, transform: 'scale(0.95)' },
+                        { opacity: 1, transform: 'scale(1)' }
+                    ], {
+                        duration: 600,
+                        easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+                        fill: 'forwards'
+                    });
                 }
             }
 
@@ -14794,8 +14816,7 @@ class FastSearchCard extends HTMLElement {
         const videoId = `video-${item.id.replace(/\./g, '-')}`;
 
         return `
-            <video class="icon-video" id="${videoId}" autoplay muted playsinline 
-                   oncanplay="this.parentElement.parentElement.parentElement.fastSearchCard.animateVideoIn(this)">
+            <video class="icon-video" id="${videoId}" autoplay muted playsinline>
                 <source src="${videoUrl}" type="video/mp4">
                 <source src="${videoUrl.replace('.mp4', '.webm')}" type="video/webm">
             </video>