Media Bar in Android TV

[Jamie Chapman]

@niels,

Would it be possible to incorporate @M0RPH3US Media Bar into the Android TV app? 

He has put a lot of effort into making this an incredible addition to the Jellyfin Home page (starting with some previous work from others that he gave a huge shout-out to), for web clients, JMP, Android mobile app, and even a report that it looks great in the WebOS client as well.

I can attest that it is solid, though it is a WIP that he is continuing to refine to get object placement just right across screen resolutions. At the moment, with all of the recent changes, it looks fantastic and really spices up the home page in a way that makes the entire Jellyfin experience feel just right.

The forum notes on the project are here, with a lot of movement in the past few days of @M0RPH3US making some needed adjustments so that it displays well in all of the standard clients noted above:  Jellyfin Media Bar

And the GitHub page is here:  MakD/Jellyfin-Media-Bar: A Jellyfin Featured Content Bar to show off your media collection

Some screenshots showing off the media bar in various environments:

@M0RPH3US, yes, I tweaked my button container to bring them closer together, now that you made this possible with the adjustments from yesterday. I am using 13em, which seems to look great in all clients, as opposed to the 16em the css is defaulting to, which felt a little too far apart IMO. 

Chrome (4K screen):

   

Edge (4K Screen):

   

JMP (4K Screen)

   

Android Mobile Landscape (I cheated here, since my Pixel 9 landscape does not do the full layout justice. Screenshot taken from sideloaded Jellyfin 2.6.2 apk on Android TV 14 virtual machine at 1080p):

   

Android Mobile Portrait:

   

[niels]

Our official clients (Android TV app included) have a "no third-party integrations" policy. Which means, we will ONLY support the official Jellyfin server and no-more. The "mod" you mentioned (we call is "web client hacks") is something we do not support, we do not endorse web client modifications at all and we'll definitely not take those over in other clients.

If this feature became part of Jellyfin itself (e.g. API added to the server, making it work with the existing home section code etc.) it will become a candidate for the ATV app. Unfortunately the way the home page works needs a bigger overhaul so it won't be an easy change and will need proper discussion in our meta discussion repository on GitHub.

[Jamie Chapman]

Sounds good, thanks for the quick reply and details. Understood. In short, it's complicated, and no shortcuts. I'll put in a feature enhancement request, after I figure out where the best place to do this is.

I'm also looking to get involved. Heading over to the main site and doing some reading so I don't waste anyone's valuable time on questions that have already been answered on the site.

Thanks again.

[Rubén Navarro López]

That is definitely the feature I'm looking for on Android TV, but I have a question about what you mentioned.

Why is the Android TV version different from webOS?

If I'm not mistaken, the media bar should be visible on webOS.

[niels]

The Android TV app is not a web wrapper client.

[Ted Hinklater]

"mods"

[Haioken]

The Android TV app is not a web wrapper client.

Ok, so with the understanding then that the WebOS client is a web wrapper client, I have the WebOS version installed on my father's TV and it works flawlessly with a remote.
Selection of elements follows a reasonably natural flow.

However if I install the Android version (not Android TV) - which is also a web wrapper client, the remote control is basically unusable.
The navigation buttons seem to be operating as a mouse cursor, with no visibility.

Would it be possible to modify the official android client to allow the remote to function like it does on WebOS when sideloaded to a TV?

I understand that the UI in the android client is designed for touch capability, but if remote navigation has previously successfully been built for WebOS, I would expect that it can't be that difficult to implement on the android app side, after all they're both web wrappers - thus little more than a directed embedded browser?

[niels]

We have a native Android TV app and therefore there is no plans to make then mobile app work on televisions.

[Haioken]

So while I can see where you're coming from - With the ATV app, until you scroll down from the top onto something that has a backgrop, the problem is that the interface is objectively ugly as heck (And if we're honest, so is the vanilla web experience).

There are some very talented people developing themes and plugins to beautify the interface, modernize it and turn JF into something that easily visually beats the UI of your major alternatives (Emby, Plex, etc); I don't quite understand why you're so very intent to discard it and focus on something that essentially means maintaining multiple UI code bases.

However, to avoid harping on this further, I'll see what I can do myself instead.

I had a brief play (~60 mins) with Android Studio and GeckoView, was able to get something visually workable but broke remote integration - something about GeckoView mangles the inputs, maybe I'll throw some more weight behind that and see if I can get the remote to behave.
Like, I can record scancodes and see what I expect to see, but the moment I invoke a GeckoSession, the up arrow becomes an enter button, whereas the normal enter button and the remaining DPAD fall silent.

I'm not an app developer, I'm a Sysadmin - so if anybody has some experience, I'd love to hear from you with some advice.

Current thoughts:

1. I'm using GeckoView instead of WebView because it is entirely packaged within the app, meaning it does not fall victim to the "what version of webview does this device support?" issue.
   
2. Geckoview mangles the input when it gains focus, so maybe....
   
3. Add a transparent overlay in front of GeckoView with a frameset
   
4. Steal focus with the transparent overlay
   
5. Maybe Grab inputs from the overlay?
   
6. Rewrite inputs with string names
   
7. Because GeckoView has no equivalent to WebView evaluateJavascript, I'll need to write a dodgy firefox extension to pull that info from the android side somehow
   
8. Retrieve the scan codes translated into strings, lookup in array and fire the appropriate keydown / keyup events in JS (something like dispatchEvent)
   

I'm particularly concerned about 6, 7.

[Efficient_Good_5784]

Ok, so with the understanding then that the WebOS client is a web wrapper client, I have the WebOS version installed on my father's TV and it works flawlessly with a remote.
Selection of elements follows a reasonably natural flow.

However if I install the Android version (not Android TV) - which is also a web wrapper client, the remote control is basically unusable.
The navigation buttons seem to be operating as a mouse cursor, with no visibility.

Would it be possible to modify the official android client to allow the remote to function like it does on WebOS when sideloaded to a TV?

I understand that the UI in the android client is designed for touch capability, but if remote navigation has previously successfully been built for WebOS, I would expect that it can't be that difficult to implement on the android app side, after all they're both web wrappers - thus little more than a directed embedded browser?

There are many apps/clients that share Jellyfin-Web:

1. From a browser
2. Jellyfin Media Player
3. Android phone app
4. iOS phone app
5. LG's WebOS
6. Samsung's TV app

The only client that has gotten attention to a proper UI is the Android TV app. Usually the Jellyfin-Web UI is used as a temporary solution until someone in the future can help develop a proper GUI for the client.

Each of those apps that share the webUI usually have differences built into them depending on how they're supposed to be used (on their respective platforms).
Just because they share the same webUI doesn't mean that they are exactly the same in that regard.

Being honest, I think the Android & iOS phone apps could get a more suitable phone UI because the webUI was really built to be used with a mouse instead of a touchscreen. The devs don't have time to work on a GUI as they have other areas of interest they have wanted to tackle for Jellyfin.

The webUI in some of the clients (like from a browser or JMP) allows you to change the display mode in its client settings (not the centralized dashboard).
You can choose a TV mode that may interest you. Just connect a laptop or mini PC to your TV and enjoy the TV mode option with Jellyfin there.
You can even change to the experimental web redesign that's in the works and that will eventually replace the current webUI in a future release.