Featured Content Bar on Home Screen

[Ted Hinklater]

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

[Drake97]

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



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

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

[Ted Hinklater]

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!

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

[Drake97]

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!

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

[Ted Hinklater]

eyyyyyyyyyyyyy

[nanouk76]

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:



On Firefox I get this :



I am stumped and need some help.
TIA

[Ted Hinklater]

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)

[Ted Hinklater]

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

[nanouk76]

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.

[nanouk76]

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.