diff --git a/README.md b/README.md index cd9079c..d6b820f 100644 --- a/README.md +++ b/README.md @@ -15,17 +15,17 @@ Thanks to [SethBacon](https://forum.jellyfin.org/u-sethbacon) & [BobHasNoSoul](h Testet on Jellyfin 10.10.0 -![clips](/images/all_clips.gif) +--- ![overview](/images/demo1.gif) ## How to install -1. Download [spotlight.html] +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 -3. 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 length, etc. +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. 4. ```Important: Use Notepad++ for this``` In the jellyfin-web folder, open the file ```home-html.RANDOMSTRINGHERE.chunk.js``` @@ -42,10 +42,13 @@ Testet on Jellyfin 10.10.0 9. That's it. -![feat17](https://github.com/user-attachments/assets/af916d90-ec7c-4af0-b6e8-0f6f94ef1f07) +![clips](/images/all_clips.gif) + +# Web View (Movie and series) +![mobile](/images/desktop.png) # Mobile View (Landscape / Portrait) -![mobile](https://i.imgur.com/Y0wEa81.png) +![mobile](/images/mobile.png) # How to feature specific content in the bar @@ -61,7 +64,7 @@ Simply delete Step 5's snippet added to ```home-html.chunk.js``` then refresh yo No changes here from my side... -![feat8](https://github.com/user-attachments/assets/d6855e23-8c08-4a8b-b05d-6ba9c9895672) +![fullscreen](/images/fullscreen.gif) Same as above except use [this version of spotlight.html](https://github.com/tedhinklater/Jellyfin-Featured-Content-Bar/blob/main/fullscreen/spotlight.html) diff --git a/fullscreen/Library Cards/4k movies.png b/fullscreen/Library Cards/4k movies.png new file mode 100644 index 0000000..ee2eaa9 Binary files /dev/null and b/fullscreen/Library Cards/4k movies.png differ diff --git a/fullscreen/Library Cards/4k shows.png b/fullscreen/Library Cards/4k shows.png new file mode 100644 index 0000000..7565fc0 Binary files /dev/null and b/fullscreen/Library Cards/4k shows.png differ diff --git a/fullscreen/Library Cards/Anime.png b/fullscreen/Library Cards/Anime.png new file mode 100644 index 0000000..59f0b23 Binary files /dev/null and b/fullscreen/Library Cards/Anime.png differ diff --git a/fullscreen/Library Cards/Books.png b/fullscreen/Library Cards/Books.png new file mode 100644 index 0000000..6d2fd72 Binary files /dev/null and b/fullscreen/Library Cards/Books.png differ diff --git a/fullscreen/Library Cards/Collections.png b/fullscreen/Library Cards/Collections.png new file mode 100644 index 0000000..fb73a5a Binary files /dev/null and b/fullscreen/Library Cards/Collections.png differ diff --git a/fullscreen/Library Cards/Documentaries.png b/fullscreen/Library Cards/Documentaries.png new file mode 100644 index 0000000..f477292 Binary files /dev/null and b/fullscreen/Library Cards/Documentaries.png differ diff --git a/fullscreen/Library Cards/Favourites.png b/fullscreen/Library Cards/Favourites.png new file mode 100644 index 0000000..d76ea7b Binary files /dev/null and b/fullscreen/Library Cards/Favourites.png differ diff --git a/fullscreen/Library Cards/Folders.png b/fullscreen/Library Cards/Folders.png new file mode 100644 index 0000000..f1457f6 Binary files /dev/null and b/fullscreen/Library Cards/Folders.png differ diff --git a/fullscreen/Library Cards/Live TV.png b/fullscreen/Library Cards/Live TV.png new file mode 100644 index 0000000..286437b Binary files /dev/null and b/fullscreen/Library Cards/Live TV.png differ diff --git a/fullscreen/Library Cards/Movies.png b/fullscreen/Library Cards/Movies.png new file mode 100644 index 0000000..ed890ea Binary files /dev/null and b/fullscreen/Library Cards/Movies.png differ diff --git a/fullscreen/Library Cards/Music Videos.png b/fullscreen/Library Cards/Music Videos.png new file mode 100644 index 0000000..37c6ba9 Binary files /dev/null and b/fullscreen/Library Cards/Music Videos.png differ diff --git a/fullscreen/Library Cards/Music.png b/fullscreen/Library Cards/Music.png new file mode 100644 index 0000000..a771c1b Binary files /dev/null and b/fullscreen/Library Cards/Music.png differ diff --git a/fullscreen/Library Cards/Photos.png b/fullscreen/Library Cards/Photos.png new file mode 100644 index 0000000..d0d4421 Binary files /dev/null and b/fullscreen/Library Cards/Photos.png differ diff --git a/fullscreen/Library Cards/Series.png b/fullscreen/Library Cards/Series.png new file mode 100644 index 0000000..cc54cea Binary files /dev/null and b/fullscreen/Library Cards/Series.png differ diff --git a/fullscreen/Library Cards/TV Shows.png b/fullscreen/Library Cards/TV Shows.png new file mode 100644 index 0000000..fe95f10 Binary files /dev/null and b/fullscreen/Library Cards/TV Shows.png differ diff --git a/fullscreen/Library Cards/card b/fullscreen/Library Cards/card new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/fullscreen/Library Cards/card @@ -0,0 +1 @@ + diff --git a/fullscreen/fullscreenspotlight.css b/fullscreen/fullscreenspotlight.css new file mode 100644 index 0000000..81e919c --- /dev/null +++ b/fullscreen/fullscreenspotlight.css @@ -0,0 +1,9 @@ +.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;} diff --git a/fullscreen/home-html snippet b/fullscreen/home-html snippet new file mode 100644 index 0000000..2a30e42 --- /dev/null +++ b/fullscreen/home-html snippet @@ -0,0 +1 @@ + diff --git a/fullscreen/spotlight.html b/fullscreen/spotlight.html new file mode 100644 index 0000000..0ca0efa --- /dev/null +++ b/fullscreen/spotlight.html @@ -0,0 +1,476 @@ + + + + + Jellyfin Spotlight v2.3.2 + + + + + +
+ + + + + diff --git a/images/Screenshot_20241114_175848_Jellyfin.png b/images/Screenshot_20241114_175848_Jellyfin.png new file mode 100644 index 0000000..bcecae4 Binary files /dev/null and b/images/Screenshot_20241114_175848_Jellyfin.png differ diff --git a/images/Screenshot_20241114_175951_Jellyfin.png b/images/Screenshot_20241114_175951_Jellyfin.png new file mode 100644 index 0000000..0cc3ea2 Binary files /dev/null and b/images/Screenshot_20241114_175951_Jellyfin.png differ diff --git a/images/desktop.png b/images/desktop.png new file mode 100644 index 0000000..94a189d Binary files /dev/null and b/images/desktop.png differ diff --git a/images/fullscreen.gif b/images/fullscreen.gif new file mode 100644 index 0000000..9b02041 Binary files /dev/null and b/images/fullscreen.gif differ diff --git a/images/mobile.png b/images/mobile.png new file mode 100644 index 0000000..f96f3db Binary files /dev/null and b/images/mobile.png differ