add new commits in my way

script copy.js

@@ -6,7 +6,10 @@ let shuffleInterval = 15000; // Time in milliseconds before the next slide is sh
 let useTrailers = true; // Set to false to disable trailers
 let setRandomMovie = true; // Set to false to disable random movie selection from the list
 let showOnOtherPages = false; // Set to true to show the slideshow on all pages eg. favorites tab, requests tab, etc.
-let showTitle = true; // Set to false to hide the title
+//let showTitle = false; // Set to false to hide the title
+let umuteOnHover = true; // Set to false to disable unmuting the video on hover
+let isMuted = true; // Set to false to start with sound
+let useSponsorBlock = true; // Set to true to use SponsorBlock data to skip intro/outro segments of trailers
 let plotMaxLength = 550; // Maximum number of characters in the plot
 let trailerMaxLength = 0; // Default value 0; length measured in ms
 
@@ -16,47 +19,37 @@ let movieList = [], currentMovieIndex = 0;
 let previousMovies = [];
 let forwardMovies = [];
 
-// Ensure that the video player is muted initially and can be unmuted on hover
-const initPlayer = () => {
-    player = new YT.Player(videoElement, {
-        height: '100%',
-        width: '100%',
-        videoId,
-        playerVars: {
-            mute: isMuted ? 1 : 0,
-        },
-        events: {
-            'onReady': (event) => {
-                event.target.playVideo();
-                event.target.setVolume(isMuted ? 0 : 100);
-            },
-            'onStateChange': (event) => {
-                if (event.data === YT.PlayerState.ENDED) {
-                    setTimeout(fetchRandomMovie, 100);
-                }
-            },
-            'onError': () => {
-                console.error(`Error with YouTube video`);
-                cleanup();
-            }
-        }
-    });
+// Get SponsorBlock-Data for the outro segment of the trailer
+//function fetchSponsorBlockOutro(videoId) {
+const fetchSponsorBlockOutro = (videoId) => {
+    return fetch(`https://sponsor.ajay.app/api/skipSegments?videoID=${videoId}&category=outro`)
+        .then(response => response.json())
+        .then(segments => { segments.length > 0 ? segments[0].segment : null; })
+        .catch(error => {
+            console.error('Error fetching SponsorBlock data:', error);
+            return null;
+        });
 };
 
-const slidesContainer = document.getElementById('slides-container');
-slidesContainer.addEventListener('mouseenter', () => {
-    if (player) {
-        player.unMute();
-        isMuted = false;
-    }
-});
 
-slidesContainer.addEventListener('mouseleave', () => {
-    if (player) {
-        player.mute();
-        isMuted = true;
-    }
-});
+// Monitor the video player for the outro segment
+function monitorOutro(player, outroSegment) {
+    const interval = setInterval(() => {
+        if (!outroSegment || !player) {
+            clearInterval(interval);
+            return;
+        }
+
+        const currentTime = player.getCurrentTime();
+        if (currentTime >= outroSegment[0] && currentTime < outroSegment[1]) {
+            clearInterval(interval);
+            player.stopVideo(); // stop video
+            setTimeout(fetchRandomMovie, 100); // fetch next movie
+        }
+    }, 500); // check every 500ms
+}
+
+
 const createElem = (tag, className, textContent, src, alt) => {
     const elem = document.createElement(tag);
     if (className) elem.className = className;
@@ -255,7 +248,6 @@ const createSlideElement = (movie, hasVideo = false) => {
             videoId,
             playerVars: {
                 mute: 0,  // Change to start the video muted MARK: set muted, not officaly refreneced by youtube API, but working...
-                // autoplay: 1,    // Autoplay the video, maybe not necessary here
                 controls: 0,    // Hide the controls
                 disablekb: 1,   // Disable keyboard controls
                 fs: 1,         // Enavle fullscreen
@@ -265,6 +257,18 @@ const createSlideElement = (movie, hasVideo = false) => {
             },
             events: {
                 'onReady': event => {
+                    if (useSponsorBlock) {
+                        fetchSponsorBlockOutro(videoId).then(outroSegment => {
+                            if (outroSegment) {
+                                console.log(`SponsorBlock outro segment: Start - ${outroSegment[0]}s, End - ${outroSegment[1]}s`);
+                                monitorOutro(player, outroSegment);
+                            } else {
+                                console.log('No outro segment found/provided');
+                            }
+                        }).catch(error => {
+                            console.error('Error fetching SponsorBlock outro segment:', error);
+                        });
+                    }
                     if (trailerMaxLength > 0) {
                         clearTimeout(slideChangeTimeout);
                         slideChangeTimeout = setTimeout(() => {
@@ -291,7 +295,6 @@ const createSlideElement = (movie, hasVideo = false) => {
                             backdrop.style.width = 'calc(100% - 23vw)';
                             backdrop.style.left = '0vw';
                         }
-                        // MARK: mod css
                         const plot = document.querySelector('.plot');
                         if (plot) {
                             plot.style.left = '33vw';
@@ -303,17 +306,6 @@ const createSlideElement = (movie, hasVideo = false) => {
                             genres.style.left = 'calc(50% - 17vw)';
                         }
 
-                        /*
-                        const plot = document.querySelector('.plot');
-                        if (plot) plot.style.width = 'calc(100% - 36.4vw)';
-
-                        const loremIpsum = document.querySelector('.lorem-ipsum');
-                        if (loremIpsum) loremIpsum.style.paddingRight = '32.4vw';
-
-                        const logo = document.querySelector('.logo');
-                        if (logo) logo.style.left = 'calc(50% - 14.2vw)';
-                        */
-
                         const loremIpsum = document.querySelector('.lorem-ipsum');
                         if (loremIpsum) loremIpsum.style.left = 'calc(50% - 17vw)';
 
@@ -351,7 +343,22 @@ const createSlideElement = (movie, hasVideo = false) => {
                 }
             }
         });
+
+        videoContainer.addEventListener('mouseenter', () => {
+            if (player && umuteOnHover) {
+                player.unMute();
+                isMuted = false;
+            }
+        });
+
+        videoContainer.addEventListener('mouseleave', () => {
+            if (player && umuteOnHover) {
+                player.mute();
+                isMuted = true;
+            }
+        });
     } else {
+        console.log(`Trailer disabled for '${movie.Name}'`);
         startSlideChangeTimer();
     }
 

spotlight.html

@@ -2,7 +2,7 @@
 <html>
 <head>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
-    <title>Jellyfin Spotlight v2.3.2 Fork v1.1</title>
+    <title>Jellyfin Spotlight v2.5.0 Fork v1.2</title>
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 	<link rel="stylesheet" href="styles.css">

styles copy.css

@@ -135,7 +135,7 @@ body {
 .lorem-ipsum {
     position: absolute;
     bottom: 20.1em;
-    Right: 2.5em;
+    right: 2.5em;
     font-family: "Titillium Web", sans-serif;
     font-size: 1em;
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);