SpotlightTrailer - Featured Content Bar

Thanks to SethBacon & BobHasNoSoul & MakD & tedhinklater for their talents and work

Main Diffrences in this fork

activate random selection of movie from txt list
show the featured bar only at the main page, hide it in favorites/requests tab
back button added
set txt list name
small ui style fixes

Currently working on

show a title above the spotlight banner, e.g. 'Popular at Jellyfin'
if local trailer avaible, play it instead of youtube trailer

How to install

Download [spotlight.html]
Go to your jellyfin-web folder and create a folder named ui and drop spotlight.html, script.js and styles.css in that folder
In your Jellyfin Dashboard, under API Keys create an API key for Spotlight, copy the key, and insert it as the value for token in script.js. You can also set the corresponding values for list name, random selection, show it only on main page, show title, plot lenght, etc.
Important: Use Notepad++ for this In the jellyfin-web folder, open the file home-html.RANDOMSTRINGHERE.chunk.js
Ctrl+F and search for data-backdroptype="movie,series,book">
Paste this after the >

<style> .featurediframe {width: 95vw; height: 24em; display: block; border: 0; margin: -1em auto 0;} @media (min-width: 2100px) {.featurediframe {height: 33em;}} @media (max-width: 1599px) {.featurediframe {margin-top: 1.2em;}} @media (max-width: 800px) {.featurediframe {margin-top: 0.8em;}} </style> <iframe class="featurediframe" src="/web/ui/spotlight.html"></iframe>

Save the file.
Empty your browser's cached web content (Ctrl+F5 or empty it from your browser's Cookies and Site Data settings section)
That's it.

Mobile View (Landscape / Portrait)

How to feature specific content in the bar

By default, the bar will feature content at random as long as it is available to the current user.

To preselect content, place a list.txt in the ui folder and paste the ID of each piece of content to be featured (IDs can be found in the address bar).

Uninstallation

Simply delete Step 5's snippet added to home-html.chunk.js then refresh your browser's cache.

Fullscreen Version

Same as above except use this version of spotlight.html

insert this into home-html.RANDOMSTRINGHERE.chunk.js after data-backdroptype="movie,series,book">

<style>.featurediframe { width: 100vw; height: 100vh; display: block; border: 0px solid #000; margin: 0 auto; margin-bottom: 40px} @media (max-width:1000px) and (orientation:portrait) {.featurediframe {height: 46vh; width: 95vw;}} @media (max-width:1000px) and (orientation:landscape) {.featurediframe {height: 98vh; width: 95vw;}} @media (min-width: 2000px) { .featurediframe {height:102vh;}}</style><iframe class="featurediframe" src="/web/ui/spotlight.html"></iframe>

and add this CSS to the very end of your Custom CSS

.layout-desktop .page.homePage.libraryPage.allLibraryPage.backdropPage.pageWithAbsoluteTabs.withTabs.mainAnimatedPage { margin-top:-4.5em;}
.layout-desktop .overflowBackdropCard, .overflowSmallBackdropCard {  width: 12.7vw !important;  padding-right: 1.85em;}
.layout-desktop .skinHeader-withBackground {background-color: transparent; backdrop-filter: blur(0px);}
.layout-desktop #homeTab .section0 .sectionTitle.sectionTitle-cards.padded-left {  display: none !important;}
.layout-desktop #homeTab .verticalSection.section1.emby-scroller-container {  position: relative;  top: -27em;  left: 73em; width: 44vw; margin-bottom: -17em;}
.layout-desktop #homeTab .verticalSection.section2.emby-scroller-container::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vw; background: black; z-index: -1;}
[dir="ltr"] #homeTab .verticalSection.section0.emby-scroller-container .emby-scrollbuttons {right: -5em; top: -2em;}
.layout-desktop #homeTab .verticalSection.section0 .cardText-first {display: none !important;}
.layout-desktop #homeTab .sections.homeSectionsContainer { margin-top: 2em;}

4.5 KiB Raw Blame History