Fovty · Fovty · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025 · Nov 5, 2025
diff --git a/Directory.Build.props b/Directory.Build.props
@@ -1,7 +1,7 @@
 <Project>
     <PropertyGroup>
-        <Version>0.2.1.0</Version>
-        <AssemblyVersion>0.2.1.0</AssemblyVersion>
-        <FileVersion>0.2.1.0</FileVersion>
+        <Version>0.2.1.1</Version>
+        <AssemblyVersion>0.2.1.1</AssemblyVersion>
+        <FileVersion>0.2.1.1</FileVersion>
     </PropertyGroup>
 </Project>
diff --git a/Fovty.Plugin.HoverTrailer/Api/HoverTrailerController.cs b/Fovty.Plugin.HoverTrailer/Api/HoverTrailerController.cs
@@ -1,10 +1,10 @@
 using System;
 using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
 using System.Linq;
 using System.Net.Mime;
 using System.Threading.Tasks;
 using MediaBrowser.Common.Api;
 using MediaBrowser.Controller.Configuration;
 using MediaBrowser.Controller.Entities;
 using MediaBrowser.Controller.Entities.Movies;
@@ -220,7 +220,7 @@
                trailerInfo = new TrailerInfo
                {
                    Id = movieId, // Use movie ID since remote trailers don't have their own ID
                    Name = remoteTrailer.Name ?? $"{movie.Name} - Trailer",
                    Path = remoteTrailer.Url,
                    RunTimeTicks = null, // Remote trailers typically don't have runtime info
                    HasSubtitles = false, // Remote trailers typically don't have subtitle info
@@ -435,7 +435,7 @@
     let currentCardElement;
     let isPlaying = false;
     let resizeHandler;
-    let attachedCards = new Set(); // Track cards that already have listeners
+    let attachedCards = new WeakSet(); // Track actual card elements that already have listeners
     let mutationDebounce = null;
 
     function log(message, ...args) {{
@@ -499,15 +499,15 @@
             /youtube\.com\/embed\/([^&\?]+)/,
             /youtube\.com\/v\/([^&\?]+)/
         ];
-        
+
         for (const pattern of patterns) {{
             const match = url.match(pattern);
             if (match && match[1]) {{
                 log('Extracted YouTube video ID:', match[1]);
                 return match[1];
             }}
         }}
-        
+
         log('Failed to extract video ID from URL:', url);
         return null;
     }}
@@ -529,7 +529,7 @@
             // Apply the same logic as local videos
             const youtubeAspectRatio = 16 / 9;  // YouTube standard aspect ratio
             const cardAspectRatio = cardRect.width / cardRect.height;
-            
+
             if (youtubeAspectRatio > cardAspectRatio) {{
                 // Video is wider than card, fit to width
                 containerWidth = cardRect.width;
@@ -539,11 +539,11 @@
                 containerHeight = cardRect.height;
                 containerWidth = Math.round(cardRect.height * youtubeAspectRatio);
             }}
-            
+
             // Apply percentage scaling
             containerWidth = Math.round(containerWidth * (PREVIEW_SIZE_PERCENTAGE / 100));
             containerHeight = Math.round(containerHeight * (PREVIEW_SIZE_PERCENTAGE / 100));
-            
+
             log(`YouTube FitContent dimensions: ${{containerWidth}}x${{containerHeight}} (${{PREVIEW_SIZE_PERCENTAGE}}% of calculated fit)`);
         }} else {{
             // Manual mode uses configured width/height
@@ -619,7 +619,7 @@
             setTimeout(() => {{
                 try {{
                     const volumePercent = ENABLE_PREVIEW_AUDIO ? PREVIEW_VOLUME : 0;
-                    
+
                     // Set playback quality using IFrame API (2025 method)
                     if (REMOTE_VIDEO_QUALITY !== 'adaptive') {{
                         iframe.contentWindow.postMessage(JSON.stringify({{
@@ -629,7 +629,7 @@
                         }}), '*');
                         log('YouTube quality set to: ' + REMOTE_VIDEO_QUALITY);
                     }}
-                    
+
                     if (volumePercent === 0) {{
                         // Keep muted if volume is 0 or audio is disabled
                         log('YouTube iframe kept muted (volume=0 or audio disabled)');
@@ -722,7 +722,7 @@
         video.muted = !ENABLE_PREVIEW_AUDIO;
         video.loop = true;
         video.preload = 'metadata';
-        
+
         // Set volume based on configuration (0-100 range converted to 0.0-1.0)
         if (ENABLE_PREVIEW_AUDIO) {{
             video.volume = PREVIEW_VOLUME / 100.0;
@@ -770,14 +770,14 @@
                     // For remote YouTube trailers, convert to embed URL
                     const youtubeUrl = trailerInfo.Path;
                     log('Original YouTube URL:', youtubeUrl);
-                    
+
                     // Extract video ID from YouTube URL
                     const videoId = extractYouTubeVideoId(youtubeUrl);
                     if (videoId) {{
                         // Use youtube-nocookie.com to avoid Error 153 and privacy issues
                         // Enable JS API for volume control and quality setting
                         // ALWAYS start muted to prevent loud initial audio, then unmute via API
-                        
+
                         videoSource = `https://www.youtube-nocookie.com/embed/${{videoId}}?` +
                             `autoplay=1` +
                             `&mute=1` +                  // Always start muted to prevent loud audio spike
@@ -951,7 +951,7 @@
                 videoToStop.src = '';
                 videoToStop.load();
             }}
-            
+
             if (iframeToStop) {{
                 log('Stopping iframe (YouTube)');
                 iframeToStop.src = 'about:blank';
@@ -977,21 +977,26 @@
                     previewToRemove.parentNode.removeChild(previewToRemove);
                 }}
             }}, 300);
+
         }}
     }}
 
     function attachHoverListeners() {{
         const movieCards = document.querySelectorAll('[data-type=""Movie""], .card[data-itemtype=""Movie""]');
-
         let newCardsCount = 0;
+
         movieCards.forEach(card => {{
+            // Skip if this card element already has listeners attached
+            if (attachedCards.has(card)) return;
+
             const movieId = card.getAttribute('data-id') || card.getAttribute('data-itemid');
-            if (!movieId) return;
-
-            // Skip if this card already has listeners attached
-            if (attachedCards.has(movieId)) return;
+            if (!movieId) {{
+                log('Warning: Found movie card without ID');
+                return;
+            }}
 
-            attachedCards.add(movieId);
+            // Mark this card element as having listeners
+            attachedCards.add(card);
             newCardsCount++;
 
             card.addEventListener('mouseenter', (e) => {{
@@ -1016,7 +1021,7 @@
         }});
 
         if (newCardsCount > 0) {{
-            log('Attached hover listeners to', newCardsCount, 'new movie cards');
+            console.log(`[HoverTrailer] Attached hover listeners to ${{newCardsCount}} new movie cards`);
         }}
     }}
 
@@ -1028,12 +1033,37 @@
     }}
 
     // Re-attach listeners when navigation occurs (debounced)
-    const observer = new MutationObserver(() => {{
-        // Debounce to prevent excessive re-attachment
-        clearTimeout(mutationDebounce);
-        mutationDebounce = setTimeout(() => {{
-            attachHoverListeners();
-        }}, 500); // Wait 500ms after last DOM change
+    const observer = new MutationObserver((mutations) => {{
+        // Check if any mutations added movie cards
+        let hasMovieCardChanges = false;
+        for (const mutation of mutations) {{
+            if (mutation.addedNodes.length > 0) {{
+                for (const node of mutation.addedNodes) {{
+                    if (node.nodeType === 1) {{ // Element node
+                        // Check if it's a movie card or contains movie cards
+                        if (node.matches && (node.matches('[data-type=""Movie""]') || node.matches('.card[data-itemtype=""Movie""]'))) {{
+                            hasMovieCardChanges = true;
+                            break;
+                        }}
+                        if (node.querySelector && node.querySelector('[data-type=""Movie""], .card[data-itemtype=""Movie""]')) {{
+                            hasMovieCardChanges = true;
+                            break;
+                        }}
+                    }}
+                }}
+            }}
+            if (hasMovieCardChanges) break;
+        }}
+
+        // Only process if movie cards were added
+        if (hasMovieCardChanges) {{
+            // Debounce to prevent excessive re-attachment
+            clearTimeout(mutationDebounce);
+            mutationDebounce = setTimeout(() => {{
+                log('DOM mutation detected, re-attaching listeners...');
+                attachHoverListeners();
+            }}, 500);
+        }}
     }});
 
     observer.observe(document.body, {{

diff --git a/README.md b/README.md
@@ -67,26 +67,6 @@ https://raw.githubusercontent.com/Fovty/HoverTrailer/master/manifest.json
 Access plugin settings through:
 **Jellyfin Admin Dashboard** → **Plugins** → **HoverTrailer** → **Settings**
 
-### Hover Preview Customization
-
-| Setting | Description | Default | Range |
-|---------|-------------|---------|-------|
-| **Horizontal Offset** | X-axis position adjustment | 0px | -2000 to +2000px |
-| **Vertical Offset** | Y-axis position adjustment | 0px | -2000 to +2000px |
-| **Sizing Mode** | How to size the preview | Fit to Video Content | Fixed/Fit to Content |
-| **Width** | Manual width (Fixed mode) | 400px | 100-2000px |
-| **Height** | Manual height (Fixed mode) | 225px | 100-2000px |
-| **Content Scale** | Percentage scaling (Fit mode) | 200% | 50-1500% |
-| **Preview Opacity** | Transparency level | 1.0 | 0.1-1.0 |
-| **Border Radius** | Corner rounding | 10px | 0-50px |
-
-### Audio & Debug Settings
-
-| Setting | Description | Default |
-|---------|-------------|---------|
-| **Enable Preview Audio** | Play audio with trailers | ✅ Enabled |
-| **Enable Debug Mode** | Detailed console logging | ✅ Enabled |
-
 ## Troubleshooting
 
 ### Trailers Not Playing
@@ -152,18 +132,6 @@ volumes:
   - /path/to/jellyfin/config/index.html:/jellyfin/jellyfin-web/index.html
 ```
 
-**How It Works:**
-HoverTrailer uses reflection-based integration to detect File Transformation at runtime. If the plugin is available, HoverTrailer registers a transformation handler that injects the script tag into index.html as it's served to browsers. If File Transformation isn't available, HoverTrailer falls back to direct file modification (which may require permissions as described in Options 2-3).
-
-### Performance Issues
-1. **Adjust sizing settings**:
-   - Lower "Content Scale" percentage
-   - Use "Fixed" sizing mode for consistent performance
-
-2. **Network considerations**:
-   - Remote trailers require internet connectivity
-   - Local trailers provide better performance
-
 ## Development
 
 ### Building from Source
@@ -176,16 +144,6 @@ cd hovertrailer
 dotnet build --configuration Release --property:TreatWarningsAsErrors=false
 ```
 
-### Project Structure
-```
-Fovty.Plugin.HoverTrailer/
-├── Api/                    # API controllers
-├── Configuration/          # Plugin configuration
-├── Exceptions/            # Custom exceptions
-├── Helpers/               # Utility classes
-└── Models/                # Data models
-```
-
 ## Contributing
 
 1. Fork the repository