diff --git a/script.js b/script.js index 48914cb..7ca3f0d 100644 --- a/script.js +++ b/script.js @@ -5,7 +5,7 @@ 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 = false; // Set to false to hide the title TBD +let showTitle = false; // Set to true to place the slideshow title above the banner let disableTrailerControls = false; // Set to false to enable trailer controls let setMutedHover = true; // Set to false to disable unmuting the video on hover let unmutedVolume = 20; // Set the volume level when the video is unmuted @@ -176,6 +176,7 @@ const createSlideElement = (movie, hasVideo = false) => { cleanup(); isMuted = startTrailerMuted; const container = document.getElementById('slides-container'); + const slideWrapper = createElem('div', 'slide-wrapper'); const slide = createElem('div', 'slide'); if (movie && (!previousMovies.length || previousMovies[previousMovies.length - 1].Id !== movie.Id)) { @@ -186,7 +187,13 @@ const createSlideElement = (movie, hasVideo = false) => { previousMovies.shift(); } ['backdrop', 'logo'].forEach(type => slide.appendChild(createElem('img', type, null, `/Items/${movie.Id}/Images/${type.charAt(0).toUpperCase() + type.slice(1)}${type === 'backdrop' ? '/0' : ''}`, type))); - slide.appendChild(createElem('div', 'heading', title)); + + if (showTitle && title) { + const heading = createElem('div', 'heading', title); + heading.style.display = 'flex'; + slideWrapper.classList.add('has-heading'); + slideWrapper.appendChild(heading); + } const textContainer = createElem('div', 'text-container'); const premiereYear = movie.PremiereDate ? new Date(movie.PremiereDate).getFullYear() : unknownYearTerms[languageIndex]; @@ -457,8 +464,10 @@ const createSlideElement = (movie, hasVideo = false) => { } + slideWrapper.appendChild(slide); + container.innerHTML = ''; - container.appendChild(slide); + container.appendChild(slideWrapper); }; function addSwipeListeners(slide) { @@ -595,12 +604,27 @@ const readCustomList = () => const lines = text.split('\n').filter(Boolean); const firstLine = lines.shift().trim(); - const [parsedTitle, muteSetting] = firstLine.split(/\s+/); + const tokens = firstLine.split(/\s+/).filter(Boolean); - title = parsedTitle || title; + let muteSetting = null; + if (tokens.length > 0) { + const lastToken = tokens[tokens.length - 1].toLowerCase(); + if (lastToken === 'muteon' || lastToken === 'muteoff') { + muteSetting = lastToken; + tokens.pop(); + } + } - // Check for mute - isMuted = muteSetting === "MuteOn"; + const parsedTitle = tokens.join(' ').trim(); + if (parsedTitle) { + title = parsedTitle; + } + + if (muteSetting) { + startTrailerMuted = muteSetting === 'muteon'; + } + + isMuted = startTrailerMuted; // Remaining lines are media IDs const mediaList = lines.map(line => line.trim().substring(0, 32)); diff --git a/styles.css b/styles.css index 66ac1e8..31788ea 100644 --- a/styles.css +++ b/styles.css @@ -1,11 +1,31 @@ @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap'); +:root { + --slide-heading-gap: 2.6em; + --slide-heading-accent: #38bdf8; + --slide-heading-accent-strong: #a855f7; + --slide-heading-bg: rgba(15, 23, 42, 0.45); + --slide-heading-border: rgba(148, 163, 184, 0.38); + --slide-heading-text: #f8fafc; +} + body { margin: 0; padding: 0; overflow: hidden; } +.slide-wrapper { + position: relative; + width: 100vw; + max-width: 100%; + margin: 0 auto; +} + +.slide-wrapper.has-heading { + padding-top: var(--slide-heading-gap); +} + .slide { position: relative; width: 100vw; @@ -14,6 +34,10 @@ body { border-radius: 2em; } +.slide-wrapper.has-heading .slide { + height: calc(22em - var(--slide-heading-gap)); +} + .slide:focus { outline: 2px solid #fff; } @@ -47,36 +71,58 @@ body { transition: transform 0.3s ease, max-height 0.3s ease, max-width 0.3s ease, left 0.5s ease; } +.heading { + position: absolute; + top: calc((var(--slide-heading-gap) - 2em) / 2); + left: 0em; + min-height: 2em; + padding: 0.25em 1.8em; + width: max-content; + font-family: "Titillium Web", sans-serif; + color: var(--slide-heading-text); + font-size: 1.3em; + font-weight: 620; + letter-spacing: 0.04em; + display: inline-flex; + align-items: center; + justify-content: flex-start; + gap: 0.5em; + z-index: 8; + background: linear-gradient(135deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.45) 100%); + border-radius: 0.75em; + border: 1px solid var(--slide-heading-border); + box-shadow: 0 16px 32px -18px rgba(15, 23, 42, 0.8), 0 0 32px -26px rgba(56, 189, 248, 0.6); + backdrop-filter: blur(18px) saturate(165%); + -webkit-backdrop-filter: blur(18px) saturate(165%); + text-shadow: 0 2px 10px rgba(15, 23, 42, 0.65); + box-sizing: border-box; + isolation: isolate; + overflow: hidden; +} + .heading::before { content: ''; position: absolute; - top: 2.27em; - left: 0; - width: 100%; - height: 100vh; - background: linear-gradient(0deg, rgb(0% 0% 0%) 0%, rgb(0% 0% 0% / 0.9990234375) 6.25%, rgba(0, 0, 0, 0.99) 12.5%, rgba(0, 0, 0, 0.97) 18.75%, rgba(0, 0, 0, 0.94) 25%, rgba(0, 0, 0, 0.88) 31.25%, rgba(0, 0, 0, 0.79) 37.5%, rgba(0, 0, 0, 0.67) 43.75%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.33) 56.25%, rgba(0, 0, 0, 0.21) 62.5%, rgba(0, 0, 0, 0.12) 68.75%, rgba(0, 0, 0, 0.06) 75%, rgba(0, 0, 0, 0.03) 81.25%, rgba(0, 0, 0, 0.01) 87.5%, rgba(0, 0, 0, 0) 93.75%, rgba(0, 0, 0, 0) 100%); - z-index: 7; - opacity: 0; + inset: -35% -20% 45% -35%; + background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.75), transparent 60%); + opacity: 0.65; + filter: blur(22px); + z-index: -1; + pointer-events: none; } -.heading { +.heading::after { + content: ''; position: absolute; - top: 0; - left: 0; - width: 100%; - height: 2.3em; - background-color: transparent; - font-family: "Titillium Web", sans-serif; - color: #D3D3D3; - font-size: 22px; - display: none; - align-items: center; - justify-content: flex-start; - z-index: 2; - padding: 10px; - padding-left: 0px; - box-sizing: border-box; - text-shadow: 1px 1px 4px rgba(0, 0, 0, 1); + left: 1.6em; + bottom: -0.45em; + width: 3.8em; + height: 0.26em; + border-radius: 999px; + background: linear-gradient(90deg, var(--slide-heading-accent) 0%, var(--slide-heading-accent-strong) 100%); + box-shadow: 0 8px 18px rgba(56, 189, 248, 0.55); + opacity: 0.95; + pointer-events: none; } .back-button, @@ -333,6 +379,34 @@ body { } @media (max-width: 1000px) { + :root { + --slide-heading-gap: 2.2em; + } + + .heading { + left: 0em; + font-size: 1.05em; + padding: 0.3em 1.1em; + border-radius: 0.65em; + gap: 0.4em; + box-shadow: 0 12px 22px -18px rgba(15, 23, 42, 0.72), 0 0 0 1px rgba(148, 163, 184, 0.18); + backdrop-filter: blur(14px) saturate(150%); + -webkit-backdrop-filter: blur(14px) saturate(150%); + } + + .heading::before { + inset: -42% -26% 48% -38%; + filter: blur(16px); + opacity: 0.55; + } + + .heading::after { + left: 1em; + bottom: -0.32em; + width: 2.6em; + height: 0.22em; + } + .age-rating { position: absolute; top: 1em; @@ -447,11 +521,7 @@ body { } .heading { - z-index: 0; - } - - .heading::before { - display: none; + z-index: 9; } .video-container { @@ -551,8 +621,8 @@ body { } @media (max-width:1000px) and (orientation:landscape) { - .slide { - height: 22em; + .slide-wrapper.has-heading .slide { + height: calc(22em - var(--slide-heading-gap)); } .community-rating {