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;