Featured Content Bar on Home Screen

[Ted Hinklater]

For trailers, do you have a List.txt in the UI folder? It just needs the line

Spotlight Muteoff

[nanouk76]

For trailers, do you have a List.txt in the UI folder? It just needs the line

Spotlight Muteoff

Ooops... I had missed that. Works a treat now. Kudos for your amazing work. Should natively be implemented in Jellyfin, with an option to show/hide it.
On a side note, I had to disable the Show backdrop option in Display settings. Was slowing down the page too much.
Again, muchos thx for this.

[herbs14]

hi Ted Hinklater,

thank you very much for this! exactly what i am looking for. Works on mobile devices and my computer browser flawlessly. 
however it does not appear on my 32" and 55" android TV. do you think i need to clear the cache on those as well ? or is it a viewport thing on your css ? 

again thank you for this works perfectly on my computer and phone

the instruction for this one is only for windows, is there an instruction using Ubuntu?

1) Create the ui Directory

Code:

sudo mkdir -p /usr/share/jellyfin/web/ui

2) Copy your chosen spotlight.html file (making sure you inserted your API key) to the new "ui" folder

Code:

sudo cp /path/to/spotlight.html /usr/share/jellyfin/web/ui/

3) Add the relevant script to home-html.chunk.js

Code:

sudo nano /usr/share/jellyfin/web/home-html.chunk.js

4) Ensure the ui folder & spotlight.html are readable by Jellyfin

Code:

sudo chown -R jellyfin:jellyfin /usr/share/jellyfin/web/ui
sudo chmod -R 755 /usr/share/jellyfin/web/ui

5) Restart Jellyfin

Code:

sudo systemctl restart jellyfin

6) Clear Browser Cache

Make sure to clear your browser cache to load the updated home-html.chunk.js & spotlight.html

[Ted Hinklater]

Hey Herbs, unfortunately no one's had any luck getting it to come up on the Jellyfin for TV app yet; it only shows on apps that are a wrapper for jellyfin-web like Jellyfin Media Player, web browsers, Jellyfin mobile app

New update out now with new features & fixes

[herbs14]

Hey Herbs, unfortunately no one's had any luck getting it to come up on the Jellyfin for TV app yet; it only shows on apps that are a wrapper for jellyfin-web like Jellyfin Media Player, web browsers, Jellyfin mobile app

New update out now with new features & fixes

hi thanks for responding and thank you for this. if you dont mind, may i know what's new with the latest update ? 

thank you

[Ted Hinklater]

The newer one only appears on the Home tab (not on the Favourites tab), will only play audio when hovered (no more background noise bug), no more back-to-back slide repeats, the preselected List is shuffled and there's also a trailerMaxLength variable near the apikey line if you want to limit the length of trailers

[Rubén Navarro López]

Hi!

I copied the code as the instructions says on github but Jellyfin's home remains black, I deleted cache and everything but remains black, only the login screen works.

Maybe i'm pasting it wrong?

this is the final code:


"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[8372],{5939:function(a,e,t){t.r(e),e.default='<div id="indexPage" style="outline:0" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie,series,book"><style>
.featurediframe {width: 95vw; height: 23.5em; display: block; border: 0px solid #000; margin: 0 auto; margin-bottom: 0em; margin-top: 1em;}
@media (min-width: 2601px) {.featurediframe {height: 50em;} }
@media (min-width: 2000px) and (max-width: 2600px) {.featurediframe {height: 20em; font-size: 175%;} .layout-desktop #homeTab .sections.homeSectionsContainer {margin-top: -3em !important;} }
@media (max-width: 1000px) and (orientation: portrait) {.featurediframe {height: 46vh;} }
@media (max-width: 1000px) and (orientation: landscape) {.featurediframe {height: 98vh;} }
@media (max-width: 400px) and (orientation: portrait) {.featurediframe {height: 52vh;} }
@media (max-height: 400px) and (orientation: landscape) {.featurediframe {height: 100vh;} }
@media screen and (aspect-ratio: 4/3) {.featurediframe {height: 27em;} }
@media screen and (aspect-ratio: 3/4) {.featurediframe {height: 27em;} }
@media screen and (aspect-ratio: 16/10) and (max-height: 1200px) {.featurediframe {height: 34em;} }
@media screen and (aspect-ratio: 10/16) and (max-height: 1280px) {.featurediframe {height: 25em;} }
</style>
<div class="tabContent pageTabContent" id="homeTab" data-index="0"><iframe class="featurediframe" src="/web/ui/spotlight.html"></iframe> <div class="tabContent pageTabContent" id="homeTab" data-index="0"> <div class="sections"></div> </div> <div class="tabContent pageTabContent" id="favoritesTab" data-index="1"> <div class="sections"></div> </div> </div> '}}]);document.addEventListener("DOMContentLoaded", () => {
const homeTab = document.getElementById("homeTab");
const spotlightIframe = homeTab.querySelector(".featurediframe");

const observer = new MutationObserver(() => {
const isHomeTabActive = homeTab.classList.contains("is-active");
spotlightIframe.style.display = isHomeTabActive ? "block" : "none";
});
observer.observe(homeTab, { attributes: true, attributeFilter: ["class"] });
});

[Ted Hinklater]

Hi!

I copied the code as the instructions says on github but Jellyfin's home remains black, I deleted cache and everything but remains black, only the login screen works.

Maybe i'm pasting it wrong?

this is the final code:


"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[8372],{5939:function(a,e,t){t.r(e),e.default='<div id="indexPage" style="outline:0" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie,series,book"><style>
        .featurediframe {width: 95vw; height: 23.5em; display: block; border: 0px solid #000; margin: 0 auto; margin-bottom: 0em; margin-top: 1em;}
        @media (min-width: 2601px) {.featurediframe {height: 50em;} }
        @media (min-width: 2000px) and (max-width: 2600px) {.featurediframe {height: 20em; font-size: 175%;} .layout-desktop #homeTab .sections.homeSectionsContainer {margin-top: -3em !important;} }
        @media (max-width: 1000px) and (orientation: portrait) {.featurediframe {height: 46vh;} }
        @media (max-width: 1000px) and (orientation: landscape) {.featurediframe {height: 98vh;} }
        @media (max-width: 400px) and (orientation: portrait) {.featurediframe {height: 52vh;} }
        @media (max-height: 400px) and (orientation: landscape) {.featurediframe {height: 100vh;} }
        @media screen and (aspect-ratio: 4/3) {.featurediframe {height: 27em;} }
        @media screen and (aspect-ratio: 3/4) {.featurediframe {height: 27em;} }
        @media screen and (aspect-ratio: 16/10) and (max-height: 1200px) {.featurediframe {height: 34em;} }
        @media screen and (aspect-ratio: 10/16) and (max-height: 1280px) {.featurediframe {height: 25em;} }
      </style>
      <div class="tabContent pageTabContent" id="homeTab" data-index="0"><iframe class="featurediframe" src="/web/ui/spotlight.html"></iframe> <div class="tabContent pageTabContent" id="homeTab" data-index="0"> <div class="sections"></div> </div> <div class="tabContent pageTabContent" id="favoritesTab" data-index="1"> <div class="sections"></div> </div> </div> '}}]);document.addEventListener("DOMContentLoaded", () => {
  const homeTab = document.getElementById("homeTab");
  const spotlightIframe = homeTab.querySelector(".featurediframe");

  const observer = new MutationObserver(() => {
  const isHomeTabActive = homeTab.classList.contains("is-active");
    spotlightIframe.style.display = isHomeTabActive ? "block" : "none";
  });
  observer.observe(homeTab, { attributes: true, attributeFilter: ["class"] });
});

Which server version are you on btw? I have a home-html.chunks.js backup if you need a fresh one, though it is for v10.10.3 (I haven't checked if previous versions are different)

You seem to be missing a bit on line 14, can you replace all code in home-html.chunk.js with this

Code:

"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[8372], {
  5939: function(a, e, t) {
    t.r(e),
    e.default = `
    <div id="indexPage" style="outline:0" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs" data-backdroptype="movie,series,book">
      <style>
        .featurediframe {width: 95vw; height: 23.5em; display: block; border: 0px solid #000; margin: 0 auto; margin-bottom: 0em; margin-top: 1em;}
        @media (min-width: 2601px) {.featurediframe {height: 50em;} }
        @media (min-width: 2000px) and (max-width: 2600px) {.featurediframe {height: 20em; font-size: 175%;} .layout-desktop #homeTab .sections.homeSectionsContainer {margin-top: -3em !important;} }
        @media (max-width: 1000px) and (orientation: portrait) {.featurediframe {height: 46vh;} }
        @media (max-width: 1000px) and (orientation: landscape) {.featurediframe {height: 98vh;} }
        @media (max-width: 400px) and (orientation: portrait) {.featurediframe {height: 52vh;} }
        @media (max-height: 400px) and (orientation: landscape) {.featurediframe {height: 100vh;} }
        @media screen and (aspect-ratio: 4/3) {.featurediframe {height: 27em;} }
        @media screen and (aspect-ratio: 3/4) {.featurediframe {height: 27em;} }
        @media screen and (aspect-ratio: 16/10) and (max-height: 1200px) {.featurediframe {height: 34em;} }
        @media screen and (aspect-ratio: 10/16) and (max-height: 1280px) {.featurediframe {height: 25em;} }
      </style>
      <div class="tabContent pageTabContent" id="homeTab" data-index="0"><iframe class="featurediframe" src="/web/ui/spotlight.html"></iframe><div class="sections"></div></div><div class="tabContent pageTabContent" id="favoritesTab" data-index="1"> <div class="sections"></div></div></div>`;}}]);
document.addEventListener("DOMContentLoaded", () => {
  const homeTab = document.getElementById("homeTab");
  const spotlightIframe = homeTab.querySelector(".featurediframe");

  const observer = new MutationObserver(() => {
  const isHomeTabActive = homeTab.classList.contains("is-active");
    spotlightIframe.style.display = isHomeTabActive ? "block" : "none";
  });
  observer.observe(homeTab, { attributes: true, attributeFilter: ["class"] });
});

and obviously empty the cache one more time

[Rubén Navarro López]

I'm on the latest, I will try that, thank you!!

[nanouk76]

Hi @Ted Hinklater, I finally jumped the gun and upgraded Jellyfin from 10.10.1 to 10.10.3 which erased your hack. So I edited the home-html.chunk.js as per your updated instructions. But the frame did not appear in the page. So I decided to search for this string ";}}]);" in the unmodified file but got this from nano:



So I guess something is not quite right...

Will try replacing the whole contents of home-html.chunk.js according to your previous post and report back.