Featured Content Bar on Home Screen

[nanouk76]

Reporting back: after restarting Jellyfin and emptying the cache, the frame is still not showing. Any ideas? Thanks for looking into it.

[Ted Hinklater]

Ok i'll reinstall Jellyfin and check everything

[nanouk76]

Hmm, the plot thickens... The modification works in Chrome and in Opera... but not in Firefox. But it used to. Weird.

[Ted Hinklater]

Hmm, the plot thickens... The modification works in Chrome and in Opera... but not in Firefox. But it used to. Weird.

ohh you're right I made a typo. I guess Chrome & Opera still have the old (correct) home-html cached and are using that.

Here's the fixed home-html.chunk.js

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"] });
});

Sorry for that & thanks for letting me know

[nanouk76]

Thanks for your quick response, it's really much appreciated and no need to be sorry, mistakes and typos are part of human nature, right?
Now, I was not totally convinced that the cache had really been purged so I closed and restarted Firefox and, lo and behold, now the frame is functional again. I-am-stumped! Seems so  illogical at face value but I guess there is a reason for everything... Well, I am not one to peruse logs so I am happy as it is. Thanks a bunch again. My bad if I made you waste precious real life moments.

[hretas]

Hi,

First of all, many thanks for the great modification. I would love to get the fullscrean version to work, but I can't do it. When I follow the necessary steps according to the instructions, it shows me a larger iframe, but then 2 to 4 banners in normal format instead of one large one.

What am I doing wrong?

I have changed the spotlight.html to the fullscreen version and added the code in the home-html.***.chunk.js.
The List.txt works perfectly with the normal banner.

Thanks for the effort!