add back button and small ui fixes

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;

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;
+    left: 0.5em;
-    right: 2em;
+    top: 50%;
-    color: #D3D3D3;
+    transform: translateY(-50%);
-    cursor: pointer;
+    /* display: none; */ /* Optional, if activated later */
-    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;
 }
 
 .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 {}