Jellyfin Media Bar

[M0RPH3US]

First things first. Excellent plug-in! It really spices up the home screen. Much appreciated.

I first tried installing the two core elements (File Transformation & Media Bar) from the repository - https://www.iamparadox.dev/jellyfin/plug...ifest.json

I did a clean restart (running docker on wsl2) and....nothing. So, I tried the cleanup (remove repository, shut down Jellyfin, delete plug-ins) then reinstall, but no dice. Went through the regular procedures for installing from repository multiple times, with no luck. Even waited overnight as some people seemed to have success with simply waiting for something to clear out on the backend (cache files?), but no luck there either.

I decided to go the manual route since I like to figure stuff out, and others seemed to have success with this. I had never dug into a docker container before, but with modern IDEs (VS Code in this instance) it was easy. I found the jellyfin-web dir, created the avatars dir, added the js and css files (not full screen at first) and ta-da! The media bar was active and working well.

I then took it a step further, since the full screen media bar seemed like it would be even slicker. And it is.......except.

The Play and Info buttons are bleeding into the My Media section and are unclickable. I tried pouring through the css, but it's pretty massive, and I have a feeling the issue may also have to do with formatting from another file. Dunno. Jellyfin is a pretty large codebase, with certain things seemingly all over the place as the devs work toward cleaning everything up from the Emby days. I also don't have a lot of experience with it yet, though I am learning bits and pieces as I go.

Any hints or tips on where to find and adjust what is needed to bring this fully to life in full screen? Screenshot of my full screen experience below.



Quick edit:

I kept digging and found the *-container elements in the css. Tweaking these (button, genre, plot, dots, info, etc) to fit the scale of my screens did the trick to get everything lined up just right. Working between non-full screen and full screen in the client (web browser, jmp, etc, not the slideshowpure.css settings) took some tweaking, as things jump around a bit between a maximized window and a full screen window, but it worked out well. Not sure how to dynamically account for all of these variables in the code. Could be tricky.

If you did the manual route, can you try the updated fullscreen css, and test it both on mobile + web and report back? Will be helpful for me