• Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below
  • Forum
  • Website
  • GitHub
  • Status
  • Translation
  • Features
  • Team
  • Rules
  • Help
  • Feeds
User Links
  • Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below

    Useful Links Forum Website GitHub Status Translation Features Team Rules Help Feeds
    Jellyfin Forum Development Feature Requests Featured Content Bar on Home Screen

    Pages (4): « Previous 1 2 3 4 Next »

     
    • 0 Vote(s) - 0 Average

    Featured Content Bar on Home Screen

    Ted Hinklater
    Offline

    Member

    Posts: 151
    Threads: 8
    Joined: 2023 Nov
    Reputation: 22
    Country:United Kingdom
    #21
    2024-11-25, 11:52 AM
    For trailers, do you have a List.txt in the UI folder? It just needs the line

    Spotlight Muteoff
    nanouk76
    Offline

    Junior Member

    Posts: 36
    Threads: 5
    Joined: 2023 Jun
    Reputation: 0
    Country:France
    #22
    2024-11-25, 12:18 PM (This post was last modified: 2024-11-25, 01:50 PM by nanouk76. Edited 1 time in total.)
    (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.
    Jellyfin 10.10.6
    Ubuntu Server 22.04.4 LTS
    Gigabyte Technology Co., Ltd. GA-MA78LMT-US2H
    AMD® Phenom™ ii x6 1090t processor × 6
    20 GB Ram
    Nvidia P400
    1
    herbs14
    Offline

    Junior Member

    Posts: 9
    Threads: 3
    Joined: 2024 Aug
    Reputation: 0
    Country:Philippines
    #23
    2024-11-27, 11:18 PM
    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
    Ted Hinklater
    Offline

    Member

    Posts: 151
    Threads: 8
    Joined: 2023 Nov
    Reputation: 22
    Country:United Kingdom
    #24
    2024-11-28, 03:36 AM (This post was last modified: 2024-11-29, 04:05 AM by Ted Hinklater. Edited 3 times in total.)
    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]
    herbs14
    Offline

    Junior Member

    Posts: 9
    Threads: 3
    Joined: 2024 Aug
    Reputation: 0
    Country:Philippines
    #25
    2024-12-04, 02:21 AM
    (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
    Ted Hinklater
    Offline

    Member

    Posts: 151
    Threads: 8
    Joined: 2023 Nov
    Reputation: 22
    Country:United Kingdom
    #26
    2024-12-04, 08:30 AM
    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
    Offline

    Member

    Posts: 152
    Threads: 27
    Joined: 2023 Jun
    Reputation: 1
    Country:Spain
    #27
    2024-12-04, 12:29 PM
    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
    Offline

    Member

    Posts: 151
    Threads: 8
    Joined: 2023 Nov
    Reputation: 22
    Country:United Kingdom
    #28
    2024-12-04, 02:08 PM (This post was last modified: 2024-12-04, 02:10 PM by Ted Hinklater. Edited 2 times in total.)
    (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
    Rubén Navarro López
    Offline

    Member

    Posts: 152
    Threads: 27
    Joined: 2023 Jun
    Reputation: 1
    Country:Spain
    #29
    2024-12-04, 04:27 PM
    I'm on the latest, I will try that, thank you!!
    nanouk76
    Offline

    Junior Member

    Posts: 36
    Threads: 5
    Joined: 2023 Jun
    Reputation: 0
    Country:France
    #30
    2024-12-04, 05:01 PM (This post was last modified: 2024-12-04, 05:13 PM by nanouk76. Edited 1 time in total.)
    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.
    Jellyfin 10.10.6
    Ubuntu Server 22.04.4 LTS
    Gigabyte Technology Co., Ltd. GA-MA78LMT-US2H
    AMD® Phenom™ ii x6 1090t processor × 6
    20 GB Ram
    Nvidia P400
    Pages (4): « Previous 1 2 3 4 Next »

    « Next Oldest | Next Newest »

    Users browsing this thread: 1 Guest(s)


    • View a Printable Version
    • Subscribe to this thread
    Forum Jump:

    Home · Team · Help · Contact
    © Designed by D&D - Powered by MyBB
    L


    Jellyfin

    The Free Software Media System

    Linear Mode
    Threaded Mode