SpotlightTrailer

Featured Content Bar

Thanks to SethBacon & BobHasNoSoul & MakD for their talents

Download [spotlight.html]
Go to your jellyfin-web folder and create a folder named ui and drop spotlight.html in that folder
In your Jellyfin Dashboard, under API Keys create an API key for Spotlight, copy the key, and insert it into line 90 of spotlight.html
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 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;}

3.9 KiB Raw Blame History