Support for devices with arrow-based (D-pad) navigation / TV Remote / Android TV

[GrabbenD]

Description

If you fire up Jellyseerr through a Native WebView or a Webbrowser (since PWAs are not supported), in a Android TV device (like NVIDIA Shield), you'll quickly realize it's impossible to use it with a (arrow based) remote:

• After launching the app, if you use the down arrow to scroll, it opens the search thus a OSD keyboard pops up.
• It's hard to tell what is selected (due to lack of highlights with most elements).
• Only category titles are selected when scrolling with a remote (and not movies/shows).
• It's very difficult to click on the hamburger menu & profile icon (since it's constantly opening search).

For context, most streaming devices don't have a cursor based remote (like TVs do) which means you have to scroll with arrow keys on the remote.

Desired Behavior

I like the idea of keeping Jellyseerr as a web app since this way it can be integrated into other apps (as a Native WebView). Perhaps this issue could be resolved by HTML tabIndex and CSS element selection highlight?

Additional Context

From hours of researching this topic, majority of users recommend to use Plex Discovery instead of Jellyfin + Jellyseerr (since you need a desktop or mobile phone to use Jellyseerr which isn't as intuitive as launching one app on your streaming device).

Support for arrow based navigation would most likely aid in resolving this fragmentation of the userbase.

Code of Conduct

• I agree to follow Jellyseerr's Code of Conduct

[JonathanLTurner03]

I haven't dived into the code, however due to this being a web based app, could this functionality be able to be accomplished via user agents? Or would a better alternative be to create wrapper apps for it, such as it seems some jellyfin clients have? (ie. SwiftFinn Jellyfin on Android)

I'm definitely interested on this implementation and may look further into it. Please update me if you have found a potentially good solution to this.

[fallenbagel]

Or would a better alternative be to create wrapper apps for it, such as it seems some jellyfin clients have? (ie. SwiftFinn)

Swiftfin is not a web wrapper. It's native. Written in swift.

[GrabbenD]

The most maintainable approach is web wrapper to avoid fragmentation of the code (..despite it not being as performant as a native app).

@JonathanLTurner03 Here's how I'd go about doing it in Android TV:

• Jellyseerr Web needs D-Pad spatial navigation support:
  • Demonstrates the most straightforward way in my opinion
    gauntface/dpad-navigation
• Jellyseerr App the web wrapper (WebView) can be created with either:
  • Vanilla approach
    https://developer.android.com/develop/ui/views/layout/webapps/webview
  • React Native cross platform toolkit
    https://github.com/react-native-tvos/react-native-tvos
    https://docs.expo.dev/guides/building-for-tv/
    (Note: React Native TVOS was single threaded last time I checked. Edit: There's been a lot of performance updates since then like Bridgeless Mode and from my understanding react-native-webview uses native components which weren't bottlenecked by Javascript layer in the first place).
• Android needs SystemWebView dependency, e.g one of:
  • Official https://play.google.com/store/apps/details?id=com.google.android.webview
  • Comite (possibly in the future) Build a Cromite SystemWebView uazo/cromite#159
  • Thorium (performance oriented) https://github.com/Alex313031/Thorium-Android/releases

Other considerations

• Performance
  • Despite using NVIDIA Shield Pro, the performance is quite bad when viewing Jellyseerr. Ability to automatically disable animations for specific User Agents would be required for best experience (considering a lot of people use even slower Android TV devices like CCwGTV)
• (Extra) Talkback support
  • https://developer.android.com/training/tv/accessibility/talkback-support
  • https://developer.android.com/training/tv/accessibility/non-native-app#why_the_dpad_key_events_are_being_consumed