Jellyfin Media Bar

[Kilo11]

I see the plugin's had several updates over the past few days, now up to 2.0.5.0 which is awesome as it appears to be stable and working normally now on my test server. At this time it only displays on browsers and not the Jellyfin Client on PC or the smart TV's I have (LG and Sony) is there a possibility this will be able to work for those at some point in the future?

Thanks again!

[Rubén Navarro López]

it works perfect on the jellyfin PC client, you just have to reinstall or wait until cache is clean

[Rubén Navarro López]

Do we expect this to be working on TV anytime soon? or something like this

[M0RPH3US]

Do we expect this to be working on TV anytime soon? or something like this

Android TV is native and this won't have any effect. Only the TV apps based on the web wrappers should have this reflected on the TV. Though I don't have a environment to test, if you have, test and report back.

[M0RPH3US]

Update :

Added Fullscreen Mode. Head to the GitHub Repository to learn more.

[Rubén Navarro López]

I do not have either ;(, but I really hope the android TV app would be like you say someday.

Also, about the last update, looks dope, but how can I test it with the media bar and file transformation plugin? thanks!

[Jamie Chapman]

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.

[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

[Jamie Chapman]

for sure, i'll try it out tonight and report back!

[Jamie Chapman]

So, I am an excited geek. Period. Which means I did not provide myself with patience and wanted to see the new full screen that you put together.

In a word, it is stellar! Works well in chrome, edge, and JMP. Both maximized and full screen windows. Thank you!!!

One quick note that I was unable to resolve while tuning the full screen css yesterday. Definitely not a big deal, but I figured I would bring it up since we're dialoging, and you are clearly invested in making this an awesome add-on, which we all appreciate!

In JMP specifically, however the software handles the web wrapper, the Play and Info buttons will not gap. I tried everything I could find in the button container elements (lower than 7xx pixels and higher than 7xx pixels) and those darn things stay glued together in JMP.

I can move them up and down, left and right, but it's as if they are bonded with the product named Black Mamba High Tack (https://mpi-matco.com/product/black-mamb...high-tack/) when viewing in JMP.

The same thing does not apply to the browsers (chrome and edge were tested). When I tweak the button gap (2em default in the larger resolution container and something like 15px in the smaller) they separate further and further. I can literally have them appearing on left and right sides of the screen. I can stack them; I can do whatever I like with them. But in JMP, no dice on any of it for separation gap (all other vertical and horizontal movement works, with the caveat that the two buttons function as one, like an amazing team that will never be pulled apart, no matter how hard anyone tries.)

Here is an example. I'm pretty sure any JMP will show you this effect: