CodeDevMLH/SpotlightTrailer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix hover error

Browse Source
This commit is contained in:
MLH
2024-12-29 04:06:46 +01:00
parent d80c8c01ee
commit e6384c096b
1 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
script.js
View File

@@ -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;
}
});
}
}
});