diff --git a/script.js b/script.js index a646e8e..b86c51c 100644 --- a/script.js +++ b/script.js @@ -1,11 +1,11 @@ let title = 'Spotlight'; // Title of the slideshow let listFileName = 'list.txt'; // Name of the file containing the list of movie IDs -let token = '34fb44ae6a23404895f243d3f089c1fc'; // Your Jellyfin API key +let token = 'YOURAPIKEYHERE'; // Your Jellyfin API key let moviesSeriesBoth = 3; // 1 for movies, 2 for series, 3 for both let shuffleInterval = 15000; // Time in milliseconds before the next slide is shown, unless trailer is playing let useTrailers = true; // Set to false to disable trailers let setRandomMovie = true; // Set to false to disable random movie selection from the list -let doNotShowOnOtherPages = false; // Set to true to show the slideshow on all pages eg. favorites, requests, etc. +let showOnOtherPages = false; // Set to true to show the slideshow on all pages eg. favorites tab, requests tab, etc. let showTitle = false; // Set to false to hide the title let plotMaxLength = 550; // Maximum number of characters in the plot @@ -119,6 +119,7 @@ const createSlideElement = (movie, hasVideo = false) => { skipButton.appendChild(skipIcon); skipIcon.onclick = (e) => { e.stopPropagation(); fetchRandomMovie(); }; + backIcon.onclick = (e) => { e.stopPropagation(); previousMovie(); }; slide.appendChild(backButton); slide.appendChild(skipButton); @@ -238,6 +239,17 @@ const createSlideElement = (movie, hasVideo = false) => { container.appendChild(slide); }; +// Fetch the previous movie in the list +function previousMovie() { + if (isChangingSlide) return; + isChangingSlide = true; + + // Reset index or set to the end of the list if we are at the first element + currentMovieIndex = (currentMovieIndex - 2 + movieList.length) % movieList.length; + + fetchNextMovie(); +} + function addSwipeListeners(slide) { let startX, startY, distX, distY; const threshold = 50; @@ -442,7 +454,7 @@ const checkNavigation = () => { } // Check if parent is available and if the iframe is in an embedded environment - if (!doNotShowOnOtherPages && window.parent && window.parent !== window) { + if (!showOnOtherPages && window.parent && window.parent !== window) { const homeTab = window.parent.document.getElementById('homeTab'); const isHomeTabActive = homeTab && homeTab.classList.contains('is-active'); @@ -450,21 +462,21 @@ const checkNavigation = () => { if (isHomeTabActive && !isHomePageActive) { console.log("HomeTab is active, reactivating slideshow"); isHomePageActive = true; - cleanup(); window.parent.document.querySelector('.featurediframe').style.display = 'block'; + cleanup(); fetchRandomMovie(); } else if (!isHomeTabActive && isHomePageActive) { console.log("Leaving HomeTab, cleaning up slideshow"); isHomePageActive = false; - cleanup(); window.parent.document.querySelector('.featurediframe').style.display = 'none'; + cleanup(); } } else { - console.error("Spotlight iframe is not in an embedded environment, has a different domain or doNotShowOnOtherPages is set to true"); + console.error("Spotlight iframe is not in an embedded environment, has a different domain or showOnOtherPages is set to true"); } }; -setInterval(checkNavigation, 100); +setInterval(checkNavigation, 60); document.addEventListener('DOMContentLoaded', () => { if (window.innerWidth < 1001) useTrailers = false; diff --git a/styles.css b/styles.css index a170b7b..0953b98 100644 --- a/styles.css +++ b/styles.css @@ -79,29 +79,61 @@ body { text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); } +.details-button { + display: none; +} + +/* MARK: modified +css for back and skip button + */ +.back-button, .skip-button { position: absolute; - right: 0.25em; color: #D3D3D3; cursor: pointer; z-index: 10; font-family: "Titillium Web", sans-serif; text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); + font-style: normal; + font-weight: 400; + letter-spacing: normal; + line-height: 1; + text-transform: none; + white-space: nowrap; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + -moz-osx-font-smoothing: grayscale; + -webkit-font-feature-settings: "liga"; + font-feature-settings: "liga"; + border-radius: 50%; + box-sizing: border-box; + opacity: 0.5; + transition: opacity 0.3s ease, background 0.3s ease; + font-size: 1.62em; + width: 1.7em; + height: 1.7em; + display: flex; + align-items: center; + justify-content: center; +} + +.back-button:hover, +.skip-button:hover { + background: #ffffff70; + opacity: 1; +} + +.skip-button { + right: 0.5em; + top: 50%; + transform: translateY(-50%); } .back-button { - position: absolute; - right: 2em; - color: #D3D3D3; - cursor: pointer; - z-index: 10; - font-family: "Titillium Web", sans-serif; - text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); - display: none; -} - -.details-button { - display: none; + left: 0.5em; + top: 50%; + transform: translateY(-50%); + /* display: none; */ /* Optional, if activated later */ } .material-icons { @@ -418,13 +450,6 @@ body { opacity: 0.98; } - .skip-button { - opacity: 1 !important; - font-size: 0.9em; - top: 1.1em; - color: #fff; - } - .genres { bottom: 4em; left: unset !important; @@ -542,12 +567,12 @@ body { @media (max-width:1000px) and (orientation:portrait) { .back-button { - right: 58vw; + left: 0em; } .skip-button { right: 0em; - top: 50% !important; + /*top: 50% !important;*/ } .genres { @@ -577,12 +602,12 @@ body { } .back-button { - right: 70vw; + left: 0em; } .skip-button { right: 0em; - top: 50% !important; + /*top: 50% !important;*/ } .genres { @@ -639,68 +664,6 @@ body { font-size: 1em; } -.back-button { - font-size: 1.67em; - top: 0.5em; - opacity: 0.5; - transition: opacity 0.3s ease, background 0.3s ease; - padding-left: 0.1em; - padding-right: 0.1em; - padding-top: 0.1em; - border-radius: 50%; - box-sizing: border-box; - font-style: normal; - font-weight: 400; - letter-spacing: normal; - line-height: 1; - text-transform: none; - word-wrap: normal; - direction: inherit; - white-space: nowrap; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - -webkit-font-feature-settings: "liga"; - font-feature-settings: "liga"; -} - -.back-button:hover { - background: #ffffff70; - opacity: 1; -} - -.skip-button { - font-size: 1.62em; - top: 50vh; - transform: translateY(-50%); - opacity: 0.5; - transition: opacity 0.3s ease, background 0.3s ease; - padding-left: 0.3em; - padding-right: 0.3em; - padding-top: 0.3em; - padding-bottom: 0.22em; - border-radius: 50%; - box-sizing: border-box; - font-style: normal; - font-weight: 400; - letter-spacing: normal; - line-height: 1; - text-transform: none; - word-wrap: normal; - direction: inherit; - white-space: nowrap; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - -webkit-font-feature-settings: "liga"; - font-feature-settings: "liga"; -} - -.skip-button:hover { - background: #ffffff70; - opacity: 1; -} - .text-container::before { content: ''; z-index: 5; @@ -916,11 +879,15 @@ body { /* .backdrop {} .age-rating {} - */ + + .back-button { + top: 38vh; + } + .skip-button { top: 38vh; } - /* + .video-container {} .text-container::before {} @@ -938,6 +905,7 @@ body { .slide { font-size: 200%; } + /* .age-rating {}