diff --git a/script.js b/script.js index 9cd6933..7f1b20e 100644 --- a/script.js +++ b/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 - -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; - } - }); -} +let isMuted = startTrailerMuted; userInteracted = false; // 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; + } + }); + } + } });