Featured Content Bar on Home Screen

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-20

ahh ok, if you don't want the fullscreen one, switch back to a different spotlight.html. That CSS at the end is creating the space, to be used only by the fullscreen version.

For the list.txt, is it in the UI folder with spotlight.html? Your list formatting looks good so, I think you're right about the permissions. Make sure jellyfin can read it. If you get it working I can update the linux guide. Thanks in advance for the info Smiling-face

RE: Featured Content Bar on Home Screen - Drake97 - 2024-11-21

(2024-11-20, 03:47 PM)Ted Hinklater Wrote: ahh ok, if you don't want the fullscreen one, switch back to a different spotlight.html. That CSS at the end is creating the space, to be used only by the fullscreen version.

For the list.txt, is it in the UI folder with spotlight.html? Your list formatting looks good so, I think you're right about the permissions. Make sure jellyfin can read it. If you get it working I can update the linux guide. Thanks in advance for the info

Hello again,
The problem with the List.txt file turned out to be that in your github page you had established that the document should be called List.txt but within spotlight.html you are calling the file list.txt instead of List.txt

[Image: 1cKlsVP.png]

and when I renamed the file to lowercase, it immediately started to recommend the movies and series that I left Grinning-face

and the other thing, is that I keep the display problem, even using the normal spotlight.html file, it gives me that unused blank space between the bar and my media.

[Image: 3mTMAeM.png]

Thinking that maybe it was an incompatibility with the theme I had, I put finimalism as well without any css and still the problem, plus it seems to crop the photos and the text/logo of the movies (word Sonríe cutted in half)

[Image: 0yRt92H.png]

the weirdest thing is that in the mobile version it works flawlessly, without any problem.

could it be maybe that I am doing all the tests on my monitor which is 2k instead of 1080p ? if so I apologize as I don't have a lower resolution monitor to test on

if you want we can communicate by discord or some other way, for me to be working as a kind of QA or something like that, only if you think so

greetings

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

(2024-11-21, 04:20 AM)Drake97 Wrote: when I renamed the file to lowercase, it immediately started to recommend the movies and series that I left

Nice work! I've updated it to fix that, thanks!

(2024-11-21, 04:20 AM)Drake97 Wrote: and the other thing, is that I keep the display problem, even using the normal spotlight.html file, it gives me that unused blank space between the bar and my media.

Thinking that maybe it was an incompatibility with the theme I had, I put finimalism as well without any css and still the problem, plus it seems to crop the photos and the text/logo of the movies (word Sonríe cutted in half)

the weirdest thing is that in the mobile version it works flawlessly, without any problem.

could it be maybe that I am doing all the tests on my monitor which is 2k instead of 1080p ? if so I apologize as I don't have a lower resolution monitor to test on

if you want we can communicate by discord or some other way, for me to be working as a kind of QA or something like that, only if you think so

greetings

Can you check you've definitely not added css to this area (Settings > Display)
[Image: r1LoTjk.png]

and check this is your 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: 2000px) {.featurediframe {height: 18em; 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><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> '}}]);

RE: Featured Content Bar on Home Screen - Drake97 - 2024-11-21

(2024-11-21, 05:09 AM)Ted Hinklater Wrote:
(2024-11-21, 04:20 AM)Drake97 Wrote: when I renamed the file to lowercase, it immediately started to recommend the movies and series that I left

Nice work! I've updated it to fix that, thanks!

(2024-11-21, 04:20 AM)Drake97 Wrote: and the other thing, is that I keep the display problem, even using the normal spotlight.html file, it gives me that unused blank space between the bar and my media.

Thinking that maybe it was an incompatibility with the theme I had, I put finimalism as well without any css and still the problem, plus it seems to crop the photos and the text/logo of the movies (word Sonríe cutted in half)

the weirdest thing is that in the mobile version it works flawlessly, without any problem.

could it be maybe that I am doing all the tests on my monitor which is 2k instead of 1080p ? if so I apologize as I don't have a lower resolution monitor to test on

if you want we can communicate by discord or some other way, for me to be working as a kind of QA or something like that, only if you think so

greetings

Can you check you've definitely not added css to this area (Settings > Display)

and check this is your 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: 2000px) {.featurediframe {height: 18em; 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><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> '}}]);

my man!!,

for some reason my chunk.js had much less information than the one you gave me and after making a backup of mine, replace it with yours, it works perfectly, I no longer have that lost space and the bar works 10 of 10, thank you very much Grinning-face

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

eyyyyyyyyyyyyy

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

(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

Hi,
after editing the relevant files to the letter as per the instructions on Github and checking the above instructions for linux, still no dice.
On Chrome the frame does not even appear:

[Image: Capture-d-cran-du-2024-11-23-11-33-31.png]

[Image: Capture-d-cran-du-2024-11-23-11-33-31.png]

On Firefox I get this :

[Image: Capture-d-cran-du-2024-11-23-11-32-54.png]

I am stumped and need some help.
TIA

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

I think, in the instructions where it said path/to/spotlight.html, you put the internet address, it should be the local address of where it had downloaded (I'll make the guide more specific if this is what happened)

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

Ok basically on the github page, it just said "Download [spotlight.html]" and I think a lot of people will just right-click the link and Save As... rather than going to the file page and downloading. So they end up downloading the github page instead of spotlight.html. Is that maybe what happened? I've edited the guide now

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

(2024-11-24, 05:09 PM)Ted Hinklater Wrote: Ok basically on the github page, it just said "Download [spotlight.html]" and I think a lot of people will just right-click the link and Save As... rather than going to the file page and downloading. So they end up downloading the github page instead of spotlight.html. Is that maybe what happened? I've edited the guide now

That was it! Two things though, the whole interface is noticeably less responsive with the beautiful theming (my oudated rig?) and I don't see the placeholder for trailers in the frame. Anything I can do about that?
Thx so much for taking the time.

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

(2024-11-25, 08:09 AM)nanouk76 Wrote:
(2024-11-24, 05:09 PM)Ted Hinklater Wrote: Ok basically on the github page, it just said "Download [spotlight.html]" and I think a lot of people will just right-click the link and Save As... rather than going to the file page and downloading. So they end up downloading the github page instead of spotlight.html. Is that maybe what happened? I've edited the guide now

That was it! Two things though, the whole interface is noticeably less responsive with the beautiful theming (my aging rig?) and I don't see the placeholder for the trailer in the frame. Anything I can do about that?

Thx so much for taking the time.