shadcn.io is not affiliated with official shadcn/ui
Auto-Hide Overlay Media Player Navbar Block for Solid
A video player's top overlay for a film streaming site: title, a Captions toggle, Quality and Speed menus and Fullscreen on a scrim over a greyscale frame, fading after idle but never while focus is inside or a menu is open.
Installation
Overview
A navbar for a streaming site's player in Solid with Ark UI. The block is a framed picture of about 120 pixels, a still drawn in tints of the theme (hills, a sun, a play triangle and a scrub line, so it holds its contrast in light and dark with no dark scope) with a bar over its top edge on a scrim that fades from the page's background. The bar holds the Screenfall wordmark and the title, a Captions toggle that draws a caption line in the picture, a Quality menu (Auto, 1080p, 720p), a Speed menu (0.75x to 1.5x) and Fullscreen, which really asks the browser to fill the screen with the player. Once you have moved over the player, pressed a key or focused it, the bar fades after three seconds without a move or a key; it comes back on movement, a key or focus, and it never hides while focus is inside it or a menu is open, nor under reduced motion. Nothing plays: the picture is a drawing, and every choice is state, announced by a hidden status. It's built from Toggle, Dropdown Menu, Button and Guides. For video players that keep their controls in an overlay.
FAQ
When does the bar hide, and when doesn't it?
It starts visible, so a keyboard user and the gallery see it. After your first move, key press or focus inside the player it fades out three seconds after the last of them (IDLE_MS). It never fades while focus is on one of its controls (the timer checks document.activeElement when it ends) or while a menu is open, and under reduced motion it never fades at all. Moving the pointer, pressing a key or focusing the player brings it back at once.
Can a hidden bar still be reached with a keyboard?
Yes: the fade is opacity only, so the controls stay in the tab order, and focusing one is itself a wake-up that shows the bar before you read it. Focus leaving the player starts the three seconds again.
How do the Quality and Speed menus work?
Each is a menu of one radio group; choosing an item changes the label in the bar ("1080p"), the text drawn in the picture, and a hidden status says it ("Quality 1080p"). Enter or Space opens a menu, the arrow keys move, Enter chooses and Escape closes it, returning focus to the button.
What does Fullscreen do?
It calls the browser's Fullscreen API on the player and back out again; the button is pressed while the player fills the screen and is disabled where the browser has no Fullscreen API (some phones). Because the bar is part of the player, it stays on top of the picture in full screen.
Why is the picture greyscale and not a video?
So the block stays accessible in every theme: the scrim fades from the page's own background, so the title and icons keep their contrast whatever the picture behind them is. Replace Picture with your video element and keep the scrim; if your footage can be bright or dark, keep the scrim stronger than here.