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 718]

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 718]

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 718]

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 42083]

Something to look at: 

 

[sh0rty 718]

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 718]

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 1]

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