Emby Homepage "Spotlight Widget" Proof of Concept

[sh0rty 714]

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

 

 

Edited October 8, 2025 by GrimReaper
Version bump

[Neminem 1514]

Dumb question, I know, but will this only work on web client ?

[Happy2Play 9780]

32 minutes ago, Neminem said:

Dumb question, I know, but will this only work on web client ?

Correct as it is no different than css as you only have access to the web client code.

Edited October 5, 2025 by Happy2Play

[Neminem 1514]

Yes It was a question to clarify limits

[sh0rty 714]

Reuploaded since I recognized a small visual bug.

Edited October 5, 2025 by sh0rty

[GrimReaper 4738]

Minor suggestion: move Runtime after Ratings. 

[InaudibleDirge 7]

loving this. thank you

[arrbee99 1814]

Excellent. Thank you. I even managed to follow the instructions successfully first time.

[GrimReaper 4738]

This is looking just beautiful. 

Btw, testing on 4.8.11.0, no adverse effects observed for now. 

Well done.

[sh0rty 714]

1 hour ago, GrimReaper said:

Minor suggestion: move Runtime after Ratings. 

Done. Replaced the CSS in my last post.
 

Edited October 5, 2025 by sh0rty

[GrimReaper 4738]

3 hours ago, sh0rty said:

Done

After Ratings.

I've already done it, but for those that won't bother editing. 

Great stuff. 

[sh0rty 714]

4 minutes ago, GrimReaper said:

After Ratings.

I've already done it, but for those that won't bother editing. 

Great stuff. 

OK now I got it  Changed correctly now.

[GrimReaper 4738]

I'm still impressed how gorgeous this looks every time I'm back on Home Screen and Spotlight pops-up, I'm not yet used to it. But I adore it. 

Awesome work, @sh0rty. 

 

[arrbee99 1814]

Dun't suppose anyone would know how to add a border maybe (so it matches the smaller ones) -

 

[GrimReaper 4738]

3 hours ago, arrbee99 said:

Dun't suppose anyone would know how to add a border maybe (so it matches the smaller ones) -

 

div.spotlight-container {
     border: 1px solid #FFFFFF;
     border-radius: 0.6em;
}

Adjust radius value as desired. 

Edit: Btw, you should really download later version, looks much better. 

Edited October 5, 2025 by GrimReaper
Append

[arrbee99 1814]

Thank you. Does that actually go in ordiinary css or in this js file somewhere.

 Will try the later version, but I do like my background in the foreground, so to speak.

[GrimReaper 4738]

3 hours ago, arrbee99 said:

Does that actually go in ordiinary css or in this js file somewhere.

CSS. But if you like, you can also edit js file and insert border and border-radius under spotlight-container, line 108 in latest version. 

Edited October 6, 2025 by GrimReaper

[sh0rty 714]

4 hours ago, GrimReaper said:

CSS. But if you like, you can also edit js file and insert border and border-radius under spotlight-container, line 108 in latest version. 

Grim could you put the content from post #6 into the first post except of the fat written disclaimer and delete the old version from this post? I guess the later version+instructions is the version people like more anyways.

Edited October 6, 2025 by sh0rty

[sh0rty 714]

4 hours ago, arrbee99 said:

Thank you. Does that actually go in ordiinary css or in this js file somewhere.

 Will try the later version, but I do like my background in the foreground, so to speak.

The CSS for the Spotlight container is embedded in the JS file. But you can address it with regular CSS code from outside like you are used to.

Edited October 6, 2025 by sh0rty

[arrbee99 1814]

2 minutes ago, sh0rty said:

The CSS for the Spotlight container is embedded in the JS file. But you can address it with regular CSS code from outside like you are used to.

At the moment, have it all in the js file, so all in one location ((theoretically).

[arrbee99 1814]

Still like the first -

but am sure you don't want to have to look after two versions.

[GrimReaper 4738]

3 hours ago, sh0rty said:

Grim could you put the content from post #6 into the first post except of the fat written disclaimer and delete the old version from this post? I guess the later version+instructions is the version people like more anyways.

Sure. Done. 

[GrimReaper 4738]

@sh0rtydo you have buymeacoffee link? 

[sh0rty 714]

45 minutes ago, GrimReaper said:

@sh0rtydo you have buymeacoffee link? 

No, I also don't need one  

Community appreciation is enough for me.

[GrimReaper 4738]

Guess I'll buy you that beer once you come to vacation down here one of the upcoming summers.