diff --git a/script copy.js b/script copy.js
index b5e5d5c..ae17da5 100644
--- a/script copy.js
+++ b/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();
}
diff --git a/spotlight.html b/spotlight.html
index 7d34947..6e602fc 100644
--- a/spotlight.html
+++ b/spotlight.html
@@ -2,7 +2,7 @@
- Jellyfin Spotlight v2.3.2 Fork v1.1
+ Jellyfin Spotlight v2.5.0 Fork v1.2
diff --git a/styles copy.css b/styles copy.css
index 1425809..664b229 100644
--- a/styles copy.css
+++ b/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);