Jellyfin Media Bar

[Kilo11]

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.

I've got access to two, one using WebOS and the other is Android TV, I believe the WebOS version is native like Android TV and not a web wrapper.

If anyone who works on those native apps is reading this; having similar functionality would be awesome as when you have a lot of media, indecisionitis is a b!tch lol.

[Rubén Navarro López]

Hey! 

Everything working when you install it manually.

Had to do it because the plugin was slowing me all my apps somehow...

[Jamie Chapman]

Sorry, I did the local browser (web) stuff earlier. 

The mobile looks pretty good in portrait mode both in a browser and on the Android Jellyfin client (straight Android Jellyfin, not Android TV, which is a different software package that does not display the media bar, as previously mentioned by the devs.)

Landscape looks like it needs some love. It gets all blended together with the My Media section.

Screenshots below of portrait and landscape.

[M0RPH3US]

Sorry, I did the local browser (web) stuff earlier. 

The mobile looks pretty good in portrait mode both in a browser and on the Android Jellyfin client (straight Android Jellyfin, not Android TV, which is a different software package that does not display the media bar, as previously mentioned by the devs.)

Landscape looks like it needs some love. It gets all blended together with the My Media section.

Screenshots below of portrait and landscape.

Thanks for testing it out. Mobile landscape is in my todo. 👍

[M0RPH3US]

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.

For now, can you edit your slideshow.css, and make the suggested changes and report back?

Remove the 

Code:

gap: 2em;

and add 

Code:

    justify-content: space-between;
    width: 14em; /* Adjust as needed */

. 

Please note, you will be making this changes in this block

Code:

@media only screen and (min-width: 767px) {
----
}

So the final button container should look like 

Code:

  .button-container {
    position: absolute;
    top: calc(50% + 180px); /* Same as the previous button positions */
    left: 7.5em;
    display: flex;
    z-index: 5; /* Ensures it's above other elements */
    justify-content: space-between;
    width: 14em; /* Adjust as needed */
  }

[M0RPH3US]

Update Alert : Added Custom Loader, and touch gestures compatibility. Now the slideshow loads more seamlessly, as if it's built in the app.

Request to test and report back

The steps to update stay the same. Just get your js, and required CSS from the git repo, replace the existing js and CSS files, and hard reload (CTRL+SHIFT+R).

[Jamie Chapman]

I updated to the latest full screen css and js. Wish I had saved a copy of the one from yesterday, but like an idiot, I chose to overwrite. No big deal. As long as my wife can still open Jellyfin (Tizen Samsung TV and Google Streamer devices in other rooms) I can play around with the web stuff all day. I'll probably spin up a second docker instance just so I can play around with tweaking and tuning.

I would report back on the adjustments noted for button gap in JMP, but the new updates cause my JMP to give me the Jellyfin Spinning Wheel of Death (it's a new thing, never seen this before).

The Jellyfin logo appears with a spinning wheel beneath but never goes past this (I let it spin for 10 minutes just to be sure). I cleared the cache (both JMP folders in the appdata\local folder, fully cleared), added the server back, but never get to the login screen. Just the spinning wheel.

The same does not happen in the browsers. In chrome and edge the spinning wheel (loader) shows up for about 2 seconds then launches into Jellyfin home page and the media bar appears and looks good.

I am also seeing that when clicking the Info button on the media bar, it goes to the spinning wheel and spins forever, just like the JMP initial loading issue. This occurs on both tested browsers (edge & chrome) as well as in the Android client. The Android client gets to the home screen, just like the browsers, but the Info button click leads to an endless spinning wheel.

Were there any updates needed for the index.html, main.jellyfin.bundle.js and home-html.xxxxxx.chunk.js files with these latest adjustments? I only updated the slideshowpure js and css.

[Jamie Chapman]

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

One option you can try is to just sideload the main Android app, instead of using the native Android TV app from the Play Store. 

The pure Android app works well, and the media bar looks great in it. I'm considering doing this myself on my Google TV, as the media bar is really slick (and the Android TV app has a minor bug that causes it to hang on exit to the launcher). 

My current hold-up is just getting the media bar to a stable spot, which I know morpheus is working on. Once it's there, I'm definitely going to give it a go (then I'm going to leave things alone on my prod system, as my wife doesn't tolerate malfunctions well...........)

I'll continue helping iamparadox and morpheus with testing from the dev environment. This media bar is SO cool.

[M0RPH3US]

I updated to the latest full screen css and js. Wish I had saved a copy of the one from yesterday, but like an idiot, I chose to overwrite. No big deal. As long as my wife can still open Jellyfin (Tizen Samsung TV and Google Streamer devices in other rooms) I can play around with the web stuff all day. I'll probably spin up a second docker instance just so I can play around with tweaking and tuning.

I would report back on the adjustments noted for button gap in JMP, but the new updates cause my JMP to give me the Jellyfin Spinning Wheel of Death (it's a new thing, never seen this before).

The Jellyfin logo appears with a spinning wheel beneath but never goes past this (I let it spin for 10 minutes just to be sure). I cleared the cache (both JMP folders in the appdata\local folder, fully cleared), added the server back, but never get to the login screen. Just the spinning wheel.

The same does not happen in the browsers. In chrome and edge the spinning wheel (loader) shows up for about 2 seconds then launches into Jellyfin home page and the media bar appears and looks good.

I am also seeing that when clicking the Info button on the media bar, it goes to the spinning wheel and spins forever, just like the JMP initial loading issue. This occurs on both tested browsers (edge & chrome) as well as in the Android client. The Android client gets to the home screen, just like the browsers, but the Info button click leads to an endless spinning wheel.

Were there any updates needed for the index.html, main.jellyfin.bundle.js and home-html.xxxxxx.chunk.js files with these latest adjustments? I only updated the slideshowpure js and css.

@Jamie Chapman Thanks for testing. Apologies on the oversight on my part. Pushed a quick fix. Also make sure to clear your JMP cache before you try opening. Rest sorted on web and mobile. Nothing has changed apart from the slideshowpure.js

[Jamie Chapman]

@Jamie Chapman Thanks for testing. Apologies on the oversight on my part. Pushed a quick fix. Also make sure to clear your JMP cache before you try opening. Rest sorted on web and mobile. Nothing has changed apart from the slideshowpure.js

That did the trick. Everything is good to go, in both JMP and the info button in all clients. 

I also see that the buttons in JMP are now well spaced with a good gap, so I'll hold off on the tweaks you mentioned earlier, unless you would like me to try it anyway. 

I like the Info/Play button flip-flop. Good call, IMO. 

I'm going to sideload the Android app on my Google TV, as this media bar is tops. 

I also tested swiping in the Android app. The missing arrows are a plus in that environment, and swiping works well!!!

I have also deployed a replica dev environment so I can help with testing. 

Thanks for all of the effort. It's coming along nicely.