Control OSD - An Accessible Cross-Platform TV Mode

[SethBacon]

Control OSD

https://github.com/JSethCreates/jellyfin...ontrolOSD/


(Simple OSD with added media logo)

---

Purpose
While the visual & OSD adjustments will be divisive, the main point of this script is to demonstrate how to extend accessibility for users on webview clients (eg. Windows, Linux, Android Phones, tablets & tvboxes, Firesticks, any browsers etc.) to use Adaptive Controllers (Eg. Xbox Adaptive Controller: https://www.xbox.com/en-US/accessories/c...e-joystick) rather than touch input. 
The side benefit is that this works with common USB remote controls as well, allowing a consistent experience between all devices from PC to TV.

---

Features
This unified script adjusts navigation accessibility & simplifies Jellyfin’s On-Screen Display (OSD) in any client which uses JFweb by: 

1. Providing universal adaptive controller/keyboard/remote navigation by overriding Jellyfin’s (imo broken) ‘TV-mode’, ensuring smooth-ish dynamically updating focus handling on any client which uses a webview wrapper. 

2. Injecting styles and JavaScript adjustments beyond Jellyfin’s custom CSS system, removing redundant UI clutter, and reshaping the NowPlaying (Video) OSD into two modes: 
  - Simple OSD: minimal, pause + timeline only 
  - Extended OSD: extended with plot, artwork, and extras 

The simple OSD pares it down to just a pause button and timeline, this helps users who face neuro or motor challenges with complex UIs, keeping controls clear and easy to manage. 
This also allows users to enjoy CSS themes and plugins with remote control navigation, so the experience does not have to be different from PC to an AndroidTV Box or Firestick for example.

---

(Full remote control navigation on JF for Android on an RK3566 box)


Installation
1. Download controlOSD.html to a UI folder you create: \Server\jellyfin-web\UI\ 

2. Go back to your \Server\jellyfin-web\ directory and search for index.html 

3. Open that file with Notepad and, right after you see: 

Code:

splashLogo{background-image:url(assets/img/banner-light.png)}}</style>

 
place this line: 

Code:

<iframe src="/web/UI/controlOSD.html" style="display:none;"></iframe>

 

4. Save the index.html file, restart the server, hard reload your Jellyfin page (Ctrl+Shift+R twice to clear browser cache), and you should be able to navigate with the arrow keys and enter / back keys on your keyboard/remote.

You can now use the standard interface with custom css in a web browser, or the standard JF for android (rather than for AndroidTV) on your TV box (may need to be sideloaded on a firestick) with your usb remote control or keyboard.   

---

Usage
Most Adaptive Controllers (or USB remotes) send inputs as keyboard keystrokes. 
This script intercepts those keypresses and uses them to navigate the Jellyfin UI (similar to link tab hopping) and attempts to initialize focus on the play/pause, startnext, home buttons on pages where they are most appropriate. 

- Arrow Keys: Navigation through cards and links 
- Enter: Select Item, Play/Pause Toggle 
- Arrow Up (in NowPlaying/video mode): Toggle extended OSD information and controls 


(Extended OSD with Clearart, Plot, and additional metadata)

---

TODO
- Currently the script was made for & works best with the GNAT Theme (https://github.com/JSethCreates/jellyfin...-sethstyle). Better, more universal highlighting for other themes coming soon. 
- Add swipe up to toggle extended OSD in case of a touch-only client. 
- Fix extras blocking input after OSD fades if untoggled.