Jellyfin Forum
Featured Content Bar on Home Screen - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Development (https://forum.jellyfin.org/f-development)
+--- Forum: Feature Requests (https://forum.jellyfin.org/f-feature-requests)
+--- Thread: Featured Content Bar on Home Screen (/t-featured-content-bar-on-home-screen)

Pages: 1 2 3 4


RE: Featured Content Bar on Home Screen - Ted Hinklater - 2024-11-25

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

Spotlight Muteoff


RE: Featured Content Bar on Home Screen - nanouk76 - 2024-11-25

(2024-11-25, 11:52 AM)Ted Hinklater Wrote: 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.


RE: Featured Content Bar on Home Screen - herbs14 - 2024-11-27

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

(2024-11-18, 07:24 PM)Ted Hinklater Wrote:
(2024-11-18, 03:07 PM)herbs14 Wrote: 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



RE: Featured Content Bar on Home Screen - Ted Hinklater - 2024-11-28

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

[Image: AqPxzYf.gif]


RE: Featured Content Bar on Home Screen - herbs14 - 2024-12-04

(2024-11-28, 03:36 AM)Ted Hinklater Wrote: 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

[Image: AqPxzYf.gif]

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


RE: Featured Content Bar on Home Screen - Ted Hinklater - 2024-12-04

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


RE: Featured Content Bar on Home Screen - Rubén Navarro López - 2024-12-04

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


RE: Featured Content Bar on Home Screen - Ted Hinklater - 2024-12-04

(2024-12-04, 12:29 PM)Rubén Navarro López Wrote: 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


RE: Featured Content Bar on Home Screen - Rubén Navarro López - 2024-12-04

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


RE: Featured Content Bar on Home Screen - nanouk76 - 2024-12-04

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:

[Image: Capture-d-cran-du-2024-12-04-17-50-46.png]

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.