From a3449ec834c89edd5d1c0cac4973b15a4e7cf20a Mon Sep 17 00:00:00 2001 From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com> Date: Fri, 26 Sep 2025 01:07:22 +0200 Subject: [PATCH] .. --- README.md | 164 +++++++++++++++++++++++++++++++++++------------------- 1 file changed, 106 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 60a920d..748d636 100644 --- a/README.md +++ b/README.md @@ -1,43 +1,116 @@ # SpotlightTrailer - Featured Content Bar Thanks to [SethBacon](https://forum.jellyfin.org/u-sethbacon) & [BobHasNoSoul](https://github.com/BobHasNoSoul) & [MakD](https://github.com/MakD) & [tedhinklater](https://github.com/tedhinklater) for their talents and work -# Main Differences in this fork -- activate random selection of movie from txt list +## Main Differences in this fork +- automatically skip outros/endcards and intros on trailers using SponsorBlock API - show the featured bar only at the main page, hide it in favorites/requests tab -- back button added -- set txt list name +- set txt list name for eg. switch between diffrent seasonal versions - small ui style fixes +- html, css and javascript in seperate files +- no hard coded api key needed -### Currently working on -- show a title above the spotlight banner, e.g. 'Popular at Jellyfin' -- if local trailer available, play it instead of youtube trailer - - -Testet on Jellyfin 10.10.0 +Testet on Jellyfin 10.10.6 +## Table of Contents +- [SpotlightTrailer - Featured Content Bar](#spotlighttrailer---featured-content-bar) + - [Main Differences in this fork](#main-differences-in-this-fork) + - [Table of Contents](#table-of-contents) + - [Configuration Parameters](#configuration-parameters) + - [Installation](#installation) + - [Uninstall](#uninstall) + - [How to feature specific content in the bar](#how-to-feature-specific-content-in-the-bar) +- [Desktop View](#desktop-view) +- [Mobile View (Landscape / Portrait)](#mobile-view-landscape--portrait) --- -![overview](/images/demo1.gif) + +![overview](https://github.com/user-attachments/assets/cb6c5a44-9121-4fbf-820c-e888efcf20aa) + +## Configuration Parameters + +The following configuration parameters are used to customize the behavior and appearance of the slideshow. You can adjust them at the beginning of `script.js`: + +- **`title`**: + The title of the slideshow. Set this to a descriptive name for your slideshow. `To be done - Should be shown above featured bar slide` + +- **`listFileName`**: + The name of the file containing the list of movie or series IDs. Ensure this file exists in the correct location. + +- **`moviesSeriesBoth`**: + Specifies the type of content to display: + - `1` for movies only, + - `2` for series only, + - `3` for both. + + Default is `3` + +- **`shuffleInterval`**: + Time interval (in milliseconds) between slides, unless a trailer is playing. Adjust for desired slide transition speed. + +- **`useTrailers`**: + Enable (`true`) or disable (`false`) the display of trailers in the slideshow. + +- **`setRandomMovie`**: + Enable (`true`) or disable (`false`) random selection of movies or series from the list. Default is `true` + +- **`showOnOtherPages`**: + Set to `true` to show the slideshow on additional pages, such as "Favorites" or "Requests." Default is `false`. + +- **`disableTrailerControls`**: + Set to `true` to hide trailer controls; `false` enables user control over the trailer. Default is `true` + +- **`setMutedHover`**: + Set to `false` to disable unmuting the video on hover + Default mute setting for trailers on hover over entire slideshow element: + Default is `true` + +- **`umuteOnHover`**: + Unmute video when hovered over (`true`) or keep muted (`false`). + Default is `true` + +- **`unmutedVolume`**: + Volume level (0–100) when unmuted. + Default is `20` + +- **`useSponsorBlock`**: + Enable (`true`) or disable (`false`) the use of SponsorBlock data for skipping segments (outros, intros) in trailers. + Default is `true` + +- **`skipIntro`**: + Enable (`true`) or disable (`false`) to skip the intro segment of the trailer. + Default is `true` + +- **`plotMaxLength`**: + Maximum number of characters for plot descriptions. Adjust as needed. + +- **`trailerMaxLength`**: + Maximum duration (in milliseconds) of trailers. Set to `0` to disable trailer length limitation. Could be used instead of SponsorBlock, but SponsorBlock is recommended + +- **`isMuted`**: + Default mute state of videos (`true` for muted, `false` for unmuted). + +By adjusting these parameters, you can fine-tune the slideshow's behavior and appearance to suit your needs. -## How to install +## Installation > [!TIP] > Take a look at [CodeDevMLH/Jellyfin-Mods-Automated-Script](https://github.com/CodeDevMLH/Jellyfin-Mods-Automated-Script) 1. Download [spotlight.html](/spotlight.html), [script.js](/script.js) and [styles.css](/styles.css) -2. Go to your ```jellyfin-web``` folder and create a folder named ```ui``` and drop ```spotlight.html, script.js and styles.css``` in that folder +2. Modify `script.js` like [explained above](#configuration-parameters) if necessary. -3. In your Jellyfin Dashboard, under ```API Keys``` create an API key for Spotlight, copy the key, and insert it as the value for the ```token``` variable in ```script.js```. You can also set the corresponding values for list name, random selection, show it only on main page, plot length, etc. +3. Go to your ```jellyfin-web``` folder and create a folder named ```ui``` and drop ```spotlight.html, script.js and styles.css``` in that folder -4. ```Important: Use Notepad++ for this``` In the jellyfin-web folder, open the file ```home-html.RANDOMSTRINGHERE.chunk.js``` +4. ```Important: Use Notepad++ for this```\ + In the jellyfin-web folder, open the file ```home-html.RANDOMSTRINGHERE.chunk.js``` 5. Ctrl+F and search for ```data-backdroptype="movie,series,book">``` 6. Paste this after the > ```js - + ``` 7. Save the file. @@ -45,48 +118,23 @@ Testet on Jellyfin 10.10.0 9. That's it. -![clips](/images/all_clips.gif) -# Web View (Movie and series) -![mobile](/images/desktop.png) +## Uninstall + +Simply delete Step 7's snippet added to ```home-html.chunk.js``` then refresh your browser's cache. You can, but not have to delete the ui folder. + +## 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 and no `list.txt` is available or if it is empty `below` line 1. + +To preselect content, place a [list.txt](/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). + +`IMPORTANT` If you use List.txt to preselect content and a User has an Age Rating limit on their account (U, PG etc) make sure you add content for them to see too, or it will just be blank (content above their Age Limit is hidden to them) + +![list](https://github.com/user-attachments/assets/5f8f7924-7a9b-49c1-aefa-198cefce0f60) + +# Desktop View +![fcb](https://github.com/user-attachments/assets/eb0c9ce0-b96e-4a7e-bf71-ba9a637c25a3) # Mobile View (Landscape / Portrait) -![mobile](/images/mobile.png) - -# 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](link) 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 - -No changes here from my side... - -![fullscreen](/images/fullscreen.gif) - -Same as above except use [this version of spotlight.html](/fullscreen/spotlight.html) - -insert this into home-html.RANDOMSTRINGHERE.chunk.js after ```data-backdroptype="movie,series,book">``` - -```js - -``` - -and add this CSS to the very ```end``` of your Custom CSS - -```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;} -``` +![mobile](https://i.imgur.com/OrOzpBK.png)