fix hover error

script.js

@@ -9,13 +9,13 @@ let showOnOtherPages = false; // Set to true to show the slideshow on all pages
 //let showTitle = false; // Set to false to hide the title TBD
 let disableTrailerControls = false; // Set to false to enable trailer controls
 let setMutedHover = true; // Set to false to disable unmuting the video on hover
-let umuteOnHover = true; // Set to false to disable unmuting the video on hover
 let unmutedVolume = 20; // Set the volume level when the video is unmuted
 let useSponsorBlock = true; // Set to true to use SponsorBlock data to skip intro/outro segments of trailers
 let skipIntro = true; // Set to true to skip the intro segment of the trailer
 let plotMaxLength = 550; // Maximum number of characters in the plot
 let trailerMaxLength = 0; // Default value 0; length measured in ms, set to 0 to disable, could be used instead of SponsorBlock
-let isMuted = true; // Default value true; set to false to start the video unmuted
+let startTrailerMuted = true; // Default value true; set to false to start the video unmuted
+
 
 
 // variables
@@ -25,23 +25,7 @@ let movieList = [], currentMovieIndex = 0;
 let previousMovies = [];
 let forwardMovies = [];
 let monitorOutroInterval = null; // Global interval variable to monitor the outro segment of the trailer
-
+let isMuted = startTrailerMuted; userInteracted = false;
-if (setMutedHover) {
-    const hoverContainer = document.getElementById('slides-container');
-    hoverContainer.addEventListener('mouseenter', () => {
-        if (player) {
-            player.setVolume(unmutedVolume);
-            isMuted = false;
-        }
-    });
-
-    hoverContainer.addEventListener('mouseleave', () => {
-        if (player) {
-            player.setVolume(0);
-            isMuted = true;
-        }
-    });
-}
 
 // Get SponsorBlock-Data for the outro/intro segment of the trailer
 const fetchSponsorBlockData = async (videoId) => {
@@ -128,6 +112,7 @@ const cleanup = () => {
 
 const createSlideElement = (movie, hasVideo = false) => {
     cleanup();
+    isMuted = startTrailerMuted;
     const container = document.getElementById('slides-container');
     const slide = createElem('div', 'slide');
 
@@ -296,7 +281,7 @@ const createSlideElement = (movie, hasVideo = false) => {
             width: '100%',
             videoId,
             playerVars: {
-                mute: isMuted ? 1 : 0,  // CHeck if the video should start muted
+                mute: isMuted ? 1 : 0, // Mute the video
                 controls: disableTrailerControls ? 0 : 1,    // Hide the controls
                 disablekb: 1,   // Disable keyboard controls
                 iv_load_policy: 3, // Disable annotations
@@ -338,12 +323,13 @@ const createSlideElement = (movie, hasVideo = false) => {
                         }, trailerMaxLength);
                     }
                     if (isMuted) {
-                        player.setVolume(0);  // Mute the video if the setting is MuteOn
+                        player.mute(); // Mute the video if the setting is MuteOn
                     } else {
-                        player.setVolume(unmutedVolume); // Set the volume, value between 0 and 100
+                        player.unMute();
                     }
 
                     player.playVideo();
+                    player.setVolume(unmutedVolume); // Set the volume, value between 0 and 100
                     console.log(`Playing trailer for '${movie.Name}'`);
                 },
                 'onStateChange': () => {
@@ -372,12 +358,6 @@ const createSlideElement = (movie, hasVideo = false) => {
                         if (logo) logo.style.left = 'calc(50% - 17vw)';
 
                         videoContainer.style.width = '34.4vw';
-                        /*} else if (player.getPlayerState() === YT.PlayerState.CUED) {
-                            console.log('Video cued - attempting restart');
-                            player.playVideo();
-                        } else if (player.getPlayerState() === -1) {
-                            console.log('Video unstarted - attempting restart');
-                            player.playVideo();*/
                     } else if (player.getPlayerState() === YT.PlayerState.ENDED) {
                         clearMonitorOutroInterval();
                         setTimeout(fetchRandomMovie, 20);
@@ -675,7 +655,6 @@ const checkNavigation = () => {
                 console.log("HomeTab is active, reactivating slideshow");
                 isHomePageActive = true;
                 window.parent.document.querySelector('.featurediframe').style.display = 'block';
-                //cleanup();
                 fetchRandomMovie();
             } else if (!isHomeTabActive && isHomePageActive) {
                 console.log("Leaving HomeTab, cleaning up slideshow");
@@ -710,6 +689,41 @@ document.addEventListener('DOMContentLoaded', () => {
             if (list) { movieList = list; currentMovieIndex = 0; }
             fetchRandomMovie();
         });
+
+        if (setMutedHover) {
+            const parentBody = window.parent.document.body;
+            const hoverContainer = document.getElementById('slides-container');
+
+            // prevent error: Unmuting failed and the element was paused instead because the user didn't interact with the document before.
+            const onUserInteraction = () => {
+                userInteracted = true;
+                console.log('User interacted with the page');
+                parentBody.removeEventListener('click', onUserInteraction);
+                parentBody.removeEventListener('keydown', onUserInteraction);
+                hoverContainer.removeEventListener('click', onUserInteraction);
+                hoverContainer.removeEventListener('keydown', onUserInteraction);
+            };
+
+            parentBody.addEventListener('click', onUserInteraction);
+            parentBody.addEventListener('keydown', onUserInteraction);
+            hoverContainer.addEventListener('click', onUserInteraction);
+            hoverContainer.addEventListener('keydown', onUserInteraction);
+
+            hoverContainer.addEventListener('mouseenter', () => {
+                if (userInteracted && player && typeof player.unMute === 'function') {
+                    player.unMute();
+                    isMuted = false;
+                }
+            });
+
+            hoverContainer.addEventListener('mouseleave', () => {
+                if (userInteracted && player && typeof player.mute === 'function') {
+                    player.mute();
+                    isMuted = true;
+                }
+            });
+        }
+
     }
 });