add back button and small ui fixes
This commit is contained in:
26
script.js
26
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;
|
||||
|
||||
144
styles.css
144
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 {}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user