Emby Homepage "Spotlight Widget" Proof of Concept

[Velgrynd 0]

Does anyone have a video where you can see everything from the beginning?

[rbjtech 5282]

Well done @sh0rty- it looks great - sadly I don't use the web clients, so not usable for me but another step forward using great design and aesthetics to showcase Emby capabilities.

I remain disappointed that 'Smart Views' didn't make it into the last Beta (as indicated..) and this would have hopefully also created a framework to display the results of the Smart Views in various ways - incl singular 'spotlights' such as this.   The key issue is it needs to be done at a core/system layer with full API support - and of course, be compatible with all the 'universal' clients out there.

Lets hope the Smart Views is a priority for the next Beta...  @Luke

 

Edited October 6, 2025 by rbjtech

[sh0rty 714]

1 hour ago, Velgrynd said:

Does anyone have a video where you can see everything from the beginning?

 

 

 

Edited October 6, 2025 by sh0rty

[Velgrynd 0]

I meant the entire process to be able to implement it in Emby, not how it looks when it's ready.  xd

 

[sh0rty 714]

5 hours ago, Velgrynd said:

I meant the entire process to be able to implement it in Emby, not how it looks when it's ready.  xd

 

I think the instructions in first post aren't too complicated.

Edited October 7, 2025 by sh0rty

[sh0rty 714]

Few changes:

• cleaned up the instructions a bit (now also complete inside the Spotlight.js)
• added a slight shadow fitting the Emby design
• tagline is now hidden on small displays
• Zooming in the whole banner looked kind of weird so I decided to just zoom in the logo a bit + an optional hover frame to let people know the banner is clickable.
• Modified ReziseHandler and Transform function for the background generation -> old function generated wrong subpixels on the sides sometimes

 

Instructions on how to set the different variables are are at the beginning of Spotlight.js, but just in case:

 1. Download Spotlight.js
 2. Change the following values to your needs
     a) limit variable (line 27) is for the amount of items from 50 latest the plugin shows in Spotlight in random order -> default = 10 items
     b) autoplayInterval variable (line 28) sets the amount of time how long an item is presented by Spotlight -> default = 8000ms (8s)
     c) backgroundColor variable (line 29) is for the gradient/vignette color at the inside edges of the spotlight and can be any value, e.g.: 
        HEX: "#0000000" -> Emby Themes: Dark = #1e1e1e; Black = #000000; Light = #ffffff; Finimalism = #090214; for other gradient themes like AppleTV or Blue Radiance take e.g. Windows Color Picker (WIN+SHIFT+C) and choose a color on the screen that makes you happy
     d) highlightColor variable (line 30) is for the border around the spotlight on hover and can be any valid value, e.g.: 
        HEX: "#0000000"
        rgb: "rgb(20 170 223)"
        rgba: "rgba(20 170 223, 0.2)"
        No border: "none"
        Emby accent color: "hsl(var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness))"
        Finimalism: "var(--theme-primary-color)"
  3. Paste this file inside /system/dashboard-ui/
  4. Add <script src="Spotlight.js"></script> before </body> tag at the end of /system/dashboard-ui/index.html
  5. Clear Cache and hard reload Emby Web

 

 

 

 

Spotlight.js

Edited October 7, 2025 by sh0rty

[sh0rty 714]

@GrimReaperIs it somehow possible to get write access to first post so I can put new version in there?

Edited October 7, 2025 by sh0rty

[GrimReaper 4739]

Need to pass that with higher-ups, gimme some time. 

[Suliamu 36]

Very big thanks for this awesome solution. 
With this one can replace the abandoned Top List Plugin! 

How about a github-repository for it? 
 

Edited October 8, 2025 by Suliamu

[Velgrynd 0]

The steps are the same for a Synology Nas?

 

[sh0rty 714]

1 hour ago, Velgrynd said:

The steps are the same for a Synology Nas?

 

As long as you find the folder where index.html is, yes.

[sh0rty 714]

6 hours ago, Suliamu said:

Very big thanks for this awesome solution. 
With this one can replace the abandoned Top List Plugin! 

How about a github-repository for it? 
 

Here we go https://github.com/v1rusnl/EmbySpotlight

10 hours ago, GrimReaper said:

Need to pass that with higher-ups, gimme some time. 

Could you just add the Repo to the first post instead of the text above the video + deleting the Spotlight.js?

 

Edited October 8, 2025 by sh0rty

[GrimReaper 4739]

3 hours ago, sh0rty said:

Could you just add the Repo to the first post instead of the text above the video + deleting the Spotlight.js?

Done. 

[sh0rty 714]

New version online, now with a Play Button.

[rbjtech 5282]

6 hours ago, sh0rty said:

New version online, now with a Play Button.

Oh how I wish this was available on the non web clients ..

This appears to have everything I want on a 'landing page' - it spotlights a new Movie - it looks interesting - I hit play.    Bingo.. a perfect user experience ..

Edited October 8, 2025 by rbjtech

[sh0rty 714]

1 minute ago, rbjtech said:

Oh how I wish this was available on the non web clients ..

This appears to have everything I want on a 'landing page' - it spotlights a new Movie - it looks interesting - I hit play.    Bingo.. a perfect user experience ..

This project only purpose was to show the devs that it's not forbidden that an awesome project "under the hood" like Emby can also look stunning. In visual terms default Emby is by far not in pole anymore (if it was at all at one point). CSS is cool, but who the hell uses the WebClient for watching content? It would be awesome when the CSS work from people like@fillidillwith his CSS theme would also be beneficial for all of the clients. But this will likely never happen.  

[arrbee99 1814]

So agree with the above. On rare occasions I completely remove all css just to see what standard Emby looks like in Firefox and nah, that css is back pretty damn quick.

Much as I'd love css or equivalent to apply to everything, I do wonder if quite a bit could be achieved with a few more options, such as being able to

- enable (or not a border)

- ability to pick colours properly, any colour you like (set your own selection colour, highlight colour, border colour (if any)

- choose square or round corners

It would never be enough I suppose. Personally I can't believe more of my brilliant touches haven't made it much further afield, but what can you do 

[Suliamu 36]

10 hours ago, sh0rty said:

CSS is cool, but who the hell uses the WebClient for watching content?

I actually prefer the webclient and in my family also run my own "media sticks" in kiosk mode with a browser. 
Also tinkering around with Plasma Bigscreen. I really don't like the proprietary solutions that are packed with advertising everywhere.  
And in my opinion it is actually the culprit of such a project to support so many clients for so many different platforms.   
This takes really long and testing this must be really annoying. 
The Jellyfin guys do the same and it is a problem there too. 
Imo it would be wiser to just and only do the webclient, since the one universality on basically every device is a browser of some sort. 
But that's just me 

[Lyfesaver 133]

This is awesome Too bad I am literally making an announcement video to my friends and family telling them to stop using web browsers unless necessary. Apps never need transcoding and it seems web browsers consistently do (for some of my media).

It is very cool tho. So cool that even tho I cant use it I wanted to say well done and kudos!!!

[jvc99 1]

That’s absolutely amazing!  Hopefully this gets implemented officially in future Emby updates across all clients — it would make the home screen so much better. Great work!

Edited October 9, 2025 by jvc99

[rbjtech 5282]

My understanding is 'Smart Views' (the next priority according to a recent post from  @Luke) should be allowing us to display the results of smartlists on the home screen - but whether that includes enhancements to 'how' those objects lists are displayed remains to be seen.     

The ideas of 'Spotlights' is not new, it's been around for years to be honest and various 'hacks' have been attempted - but without a way to display them as spotlights, their effectiveness is limited.    Heck, I've been running my own implementation for years (that works in all clients) simply by using playlists to add to a spotlight library (and a watchList as well) - works fine - but I want the contents of that spotlight library shown as the top 3rd of a page banner - like the CSS in the thread - not hidden in the 'Latest' section.      If we have the flexability to add these new display types per library or Smart View and location for that row - then this enhancement will be extremly well received.

Edited October 9, 2025 by rbjtech

[sh0rty 714]

New version online with an optional spotlight-items.txt file, if the user wants to currate the items of the spotlight by himself.
txt-File uses the item ID. Default behaviour as fallback when file is not present or empty.

DL in Github Repo.

[GrimReaper 4739]

This is just getting better and better. Kudos, @sh0rty. 

[sh0rty 714]

21 hours ago, rbjtech said:

My understanding is 'Smart Views' (the next priority according to a recent post from  @Luke) should be allowing us to display the results of smartlists on the home screen - but whether that includes enhancements to 'how' those objects lists are displayed remains to be seen.     

The ideas of 'Spotlights' is not new, it's been around for years to be honest and various 'hacks' have been attempted - but without a way to display them as spotlights, their effectiveness is limited.    Heck, I've been running my own implementation for years (that works in all clients) simply by using playlists to add to a spotlight library (and a watchList as well) - works fine - but I want the contents of that spotlight library shown as the top 3rd of a page banner - like the CSS in the thread - not hidden in the 'Latest' section.      If we have the flexability to add these new display types per library or Smart View and location for that row - then this enhancement will be extremly well received.

 

It should be no problem to use the smart views in Spotlight since you can set up a parent ID for the build query of the Container.

This would be the Spotlight for your IMDB Top 250 (Script line 473 ff.)

    function buildQuery() {
        const q = {
	    ParentId: "YOUR_IMDBTop250COLLECTION_ID",
            IncludeItemTypes: "Movie",
            Recursive: true,
            Limit: 250,
            SortBy: "CommunityRating,CriticRating,Random",
            SortOrder: "Descending",
            EnableImageTypes: "Primary,Backdrop,Thumb,Logo,Banner",
            EnableUserData: false,
            EnableTotalRecordCount: false,
            Fields: "PrimaryImageAspectRatio,BackdropImageTags,ImageTags,ParentLogoImageTag,ParentLogoItemId,CriticRating,CommunityRating,OfficialRating,PremiereDate,ProductionYear,Genres,RunTimeTicks,Taglines"
        };
        return q;
    }

So if the smart view has an ID, it can be shown by the Spotlight container. Unfortunately just in the WebClient. I hope devs consider something like this proof of concept as a baked in solution in the future. 

Edited October 10, 2025 by sh0rty

[sh0rty 714]

5 hours ago, GrimReaper said:

This is just getting better and better. Kudos, @sh0rty. 

v0.0.4 online on Github
- See plot overview when clicking the logoart
- decreased the item pool to choose from to 100