Emby Homepage "Spotlight Widget" Proof of Concept

[KobayashiM 27]

After some fiddling I got it configured the way I wanted and added some feathering of the edges. I downloaded the latest version but gonna take a break before copying all of my edits over lol.

I had a couple of thoughts while doing this...

1. Is there a variable to turn on/off individual ratings without commenting out code? I'd like to reduce the number to try to reduce the initial load time as well as simplify visually.
2. It would be neat if spotlight-items could be edited via GUI. Maybe even via Emby's custom css editor if that's possible.
3. This one is more for people like me who prefer the banner style but it would be nice if it could optionally use the actual banner image instead of the backdrop

[sh0rty 738]

46 minutes ago, KobayashiM said:

After some fiddling I got it configured the way I wanted and added some feathering of the edges. I downloaded the latest version but gonna take a break before copying all of my edits over lol.

I had a couple of thoughts while doing this...

1. Is there a variable to turn on/off individual ratings without commenting out code? I'd like to reduce the number to try to reduce the initial load time as well as simplify visually.
2. It would be neat if spotlight-items could be edited via GUI. Maybe even via Emby's custom css editor if that's possible.
3. This one is more for people like me who prefer the banner style but it would be nice if it could optionally use the actual banner image instead of the backdrop

 

1. Currently not. But I updated the Readme on GH to load the script with defer attribute which impoved the page loading a lot on my side. Don't know why I did not do that from the beginning   Also If you do not enable a CORS proxy, the script does not fetch websites and relies solely on API requests. After Ratings are fetched, they are stored for 1 week  locally.

   <script src="Spotlight.js" defer></script>

2. Not possible just via CSS, for changing settings via UI a plugin would be needed, but the js file would need to be copied to web folder manually anyways since it seems all plugin solutions on Github to inject code into Emby seem not to work (anymore, at least on my side).
3. Line 2843, change type "Backdrop" to "Banner". But then you would need set the  .spotlight .banner-logo in the embedded CSS to display: none. And you need to adjust the whole container classes heights. But I'm sure you are able to do that since you're already brave enough to mess around with the code. 

Edited February 13 by sh0rty

[KobayashiM 27]

3 minutes ago, sh0rty said:

1. Currently not. But I updated the Readme on GH to load the script with defer attribute which impoved the page loading a lot on my side. Don't know why I did not do that from the beginning  

   <script src="Spotlight.js" defer></script>

2. Not possible just via CSS, for changing settings via UI a plugin would be needed, but the js file would need to be copied to web folder manually anyways since it seems all plugin solutions on Github to inject code into Emby seem not to work (anymore, at least on my side).
3. Line 2843, change type "Backdrop" to "Banner". But then you would need set the  .spotlight .banner-logo in the embedded CSS to display: none. And you need to adjust the whole container classes heights.

Thanks! Yea I assumed a plugin would most likely be needed to accomplish that.

I might try the banner swap but will have to make sure all of my media have hi res banners. Appreciate the help!

[sh0rty 738]

4 hours ago, KobayashiM said:

Thanks! Yea I assumed a plugin would most likely be needed to accomplish that.

I might try the banner swap but will have to make sure all of my media have hi res banners. Appreciate the help!

New version on GH supports enabling or disabling every Rating provider. 

[sh0rty 738]

Codebase is redruced drastically now due to combining all SPARQL queries, a change to preloading logic + lazy loading makes the Container load faster again, even with all Ratings enabled.

Edited February 14 by sh0rty

[Luke 42456]

Something to look at: 

 

[sh0rty 738]

Fixed a trailer error caused by the code reduction in latest verion on GH .

[emLmSx 6]

@sh0rty

You're great, I'm very happy, but I have a question.

Where can I fix it?

 

[sh0rty 738]

13 hours ago, emLmSx said:

@sh0rty

You're great, I'm very happy, but I have a question.

Where can I fix it?

 

 

Add margin-bottom: -3em to the spotlight-container in line 1279.

[BIGDREY 3]

On 10/5/2025 at 8:57 AM, sh0rty said:

First and foremost:
1. This is heavily vibe-coded with the help of Claude Sonnet 4.5 and just a proof of concept (though it's fully functional on my side)!
2. Tested with stable Server 4.9.1.80 on a 1080p-Screen
3. Pretty sure that the code is not the best and shpuld be reviewed by anyone with good js-Skills.
4. This Banner just works on the Web Client.

I hope one of the experienced devs here can make more out of it, e.g. a Plugin. Perhaps something like that can be incorporated as a menu option by Emby itself in the future.

What the Spotlight does:
On every Homepage load the Spotlight takes 10 items (Movies/TV Shows) from 50 latest Releases in the library and displays them as a slideshow. Banner is clickable to get to the item detail screen. Ratings are also included.

Download from:

https://github.com/v1rusnl/EmbySpotlight

 

 

 

Thank you so much for the work on this.  It is next level amazing and brought me fully to EMBY....

[sh0rty 738]

Small overhaul on Github.
-> auto stop Trailer when scrolling on Homepage
-> button to disable Autoplay from inside the widget (option to disable it globally in JS code still present for Admin).

More in changelog.

Edited April 9 by sh0rty

[Phyrate 0]

Thank you very much for this!. I had to tweak it like crazy to make it look nice for me, but that's the fun in it. It's playing a video that's why it looks a bit blurry, I guess it was YouTube doing its things.

 

[niploz159 0]

20 hours ago, Phyrate said:

Thank you very much for this!. I had to tweak it like crazy to make it look nice for me, but that's the fun in it. It's playing a video that's why it looks a bit blurry, I guess it was YouTube doing its things.

 

Hello,

Would you like to share your edits ?

[Phyrate 0]

Sure, this is the css section of the spotlight file. You will have to review it or compare it to the original if you want something specific from it, because the heavy lifting was done by Gemini following my instructions, or you could just replace the hole CSS constant if you want it exactly like mine. But you have to consider this is adjusted to fit a 1600x900 screen resolution, you can play with those values depending on your screen resolution.

One of the key visual changes was all the edits made to all sides of the .spotlight .banner-gradient selectors to make the spotlight section effects transparent instead of using a color gradient.

https://raw.githubusercontent.com/RickStrife/mandiflix/refs/heads/main/Spotlight.js

I asked Gemini for a summary of the changes we made, so it's easier to locate the areas that affect resolution.
 

### CSS MODIFICATIONS: ORIGINAL VS. 1600x900 OPTIMIZED ###

1. SELECTOR: .spotlight .banner-slider-wrapper (The Mask Upgrade)
   - ORIGINAL: No masking; relied on 50% width/height background gradients.
   - MODIFIED: Added '-webkit-mask-image' with 'mask-composite: intersect'.
   - REASON: Replaces "shadow overlays" with true transparency. Instead of covering 
     the image with black, the image edges are physically "erased" (4% sides, 5% top/bottom), 
     allowing the artwork to blend flawlessly into the UI background.

2. SELECTOR: .spotlight-container, .spotlight .banner-slider-wrapper
   - ORIGINAL: 'min-height: calc(100vh - 10rem)'.
   - MODIFIED: 'min-height: 420px !important' and 'height: 420px !important'.
   - REASON: Replaces the giant full-screen height with a fixed cinematic 420px bar, 
     preventing the spotlight from pushing your library rows off-screen at 900p.

3. SELECTORS: .spotlight .banner-overview, .spotlight .banner-overview-text
   - ORIGINAL: '@media(max-width:1600px) { visibility: hidden }'.
   - MODIFIED: '@media(max-height:950px) { visibility: visible !important }'.
   - REASON: The original code hid the plot on 1600px wide screens. The new code 
     forces it to stay visible while capping text at 4 lines via '-webkit-line-clamp' 
     to ensure it fits the new container height.

4. SELECTOR: .spotlight .banner-logo
   - ORIGINAL: 'max-height: 25vh' and 'top: 15vh'.
   - MODIFIED: 'max-height: 140px !important' and 'top: 8vh'.
   - REASON: Switches from variable viewport units to fixed pixels. This keeps the 
     logo size consistent and tucked into the top-left safely at 900p height.

5. SELECTOR: .spotlight .banner-info (Metadata & Genres)
   - ORIGINAL: 'bottom: 1.5rem' with no scaling.
   - MODIFIED: 'bottom: 1rem' with 'transform: scale(0.85)'.
   - REASON: Shrinks the genre/rating block by 15% and anchors it to 'left bottom' 
     to ensure it doesn't feel oversized on a 1600x900 display.

6. SELECTOR: .spotlight-container (The Library Gap Fix)
   - ORIGINAL: 'margin: 0'.
   - MODIFIED: Added 'margin-bottom: -8em'.
   - REASON: This is the specific change that made the library gap look good; the 
     negative margin pulls the library sections up to meet the spotlight perfectly.

 

[niploz159 0]

13 hours ago, Phyrate said:

Sure, this is the css section of the spotlight file. You will have to review it or compare it to the original if you want something specific from it, because the heavy lifting was done by Gemini following my instructions, or you could just replace the hole CSS constant if you want it exactly like mine. But you have to consider this is adjusted to fit a 1600x900 screen resolution, you can play with those values depending on your screen resolution.

One of the key visual changes was all the edits made to all sides of the .spotlight .banner-gradient selectors to make the spotlight section effects transparent instead of using a color gradient.

https://raw.githubusercontent.com/RickStrife/mandiflix/refs/heads/main/Spotlight.js

I asked Gemini for a summary of the changes we made, so it's easier to locate the areas that affect resolution.
 

### CSS MODIFICATIONS: ORIGINAL VS. 1600x900 OPTIMIZED ###

1. SELECTOR: .spotlight .banner-slider-wrapper (The Mask Upgrade)
   - ORIGINAL: No masking; relied on 50% width/height background gradients.
   - MODIFIED: Added '-webkit-mask-image' with 'mask-composite: intersect'.
   - REASON: Replaces "shadow overlays" with true transparency. Instead of covering 
     the image with black, the image edges are physically "erased" (4% sides, 5% top/bottom), 
     allowing the artwork to blend flawlessly into the UI background.

2. SELECTOR: .spotlight-container, .spotlight .banner-slider-wrapper
   - ORIGINAL: 'min-height: calc(100vh - 10rem)'.
   - MODIFIED: 'min-height: 420px !important' and 'height: 420px !important'.
   - REASON: Replaces the giant full-screen height with a fixed cinematic 420px bar, 
     preventing the spotlight from pushing your library rows off-screen at 900p.

3. SELECTORS: .spotlight .banner-overview, .spotlight .banner-overview-text
   - ORIGINAL: '@media(max-width:1600px) { visibility: hidden }'.
   - MODIFIED: '@media(max-height:950px) { visibility: visible !important }'.
   - REASON: The original code hid the plot on 1600px wide screens. The new code 
     forces it to stay visible while capping text at 4 lines via '-webkit-line-clamp' 
     to ensure it fits the new container height.

4. SELECTOR: .spotlight .banner-logo
   - ORIGINAL: 'max-height: 25vh' and 'top: 15vh'.
   - MODIFIED: 'max-height: 140px !important' and 'top: 8vh'.
   - REASON: Switches from variable viewport units to fixed pixels. This keeps the 
     logo size consistent and tucked into the top-left safely at 900p height.

5. SELECTOR: .spotlight .banner-info (Metadata & Genres)
   - ORIGINAL: 'bottom: 1.5rem' with no scaling.
   - MODIFIED: 'bottom: 1rem' with 'transform: scale(0.85)'.
   - REASON: Shrinks the genre/rating block by 15% and anchors it to 'left bottom' 
     to ensure it doesn't feel oversized on a 1600x900 display.

6. SELECTOR: .spotlight-container (The Library Gap Fix)
   - ORIGINAL: 'margin: 0'.
   - MODIFIED: Added 'margin-bottom: -8em'.
   - REASON: This is the specific change that made the library gap look good; the 
     negative margin pulls the library sections up to meet the spotlight perfectly.

 

Thank you!

sorry for miss understand, should I take the js code and replace it ? 

I guess I didnt understood how to use your code,

thank you for your help!

[Phyrate 0]

2 hours ago, niploz159 said:

Thank you!

sorry for miss understand, should I take the js code and replace it ? 

I guess I didnt understood how to use your code,

thank you for your help!

Sorry I made it a bit confusing, you shouldn't just replace your whole code with that JS code link because it points to only the CSS part of the entire code. You'll have to find this line in your JS file and replace the CSS code from there only:

If you look at the original Spotlight.js this is located in line 1307 and ends in line 1411

const css = `

I changed the name of my file so it's less confusing

https://raw.githubusercontent.com/RickStrife/mandiflix/refs/heads/main/Spotlight_CSS.js

Edited May 5 by Phyrate

[niploz159 0]

4 hours ago, Phyrate said:

Sorry I made it a bit confusing, you shouldn't just replace your whole code with that JS code link because it points to only the CSS part of the entire code. You'll have to find this line in your JS file and replace the CSS code from there only:

If you look at the original Spotlight.js this is located in line 1307 and ends in line 1411

const css = `

I changed the name of my file so it's less confusing

https://raw.githubusercontent.com/RickStrife/mandiflix/refs/heads/main/Spotlight_CSS.js

and about the html ? should replace something ?

[Phyrate 0]

5 hours ago, niploz159 said:

and about the html ? should replace something ?

Do you mean editing the index.html inside your emby installation directory (in the dashboard-ui directory), as instructed by the author to make the script work? If that's your question you still need to follow the author's instructions for the spotlight section to work. If that's not your question, and you just want to make it look like my screenshot you just need to edit the Spotlight.js file you downloaded from the author's GitHub page, find the CSS constant section and replace the code with CSS section I shared, no further HTML or other edits.

[niploz159 0]

8 hours ago, Phyrate said:

Do you mean editing the index.html inside your emby installation directory (in the dashboard-ui directory), as instructed by the author to make the script work? If that's your question you still need to follow the author's instructions for the spotlight section to work. If that's not your question, and you just want to make it look like my screenshot you just need to edit the Spotlight.js file you downloaded from the author's GitHub page, find the CSS constant section and replace the code with CSS section I shared, no further HTML or other edits.

Ok  thats work perfect thank you! but one thing, if im change it to RTL language (Right to left) I cannot see anything, do you know maybe how can fix it ? i attached screenshot 

[niploz159 0]

Ok fixed it by gpt, RTL working perfect thank you for sharing!

[nasobuko 2]

Thank you for this work! My Emby is digivolving into Embyflix.