Media Player

1/** @jsxImportSource hono/jsx */
2import type { Child } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Media Player — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// A styled native <video controls> / <audio controls>. The browser ships a
8// complete, accessible playback UI — play/pause, scrubber, volume, captions
9// toggle, fullscreen, Picture-in-Picture — so we render the real platform
10// element and only frame it (rounded card, aspect-ratio, poster). No custom
11// controls, no JavaScript: the platform already does playback, and we never
12// emulate a feature the browser ships (see AGENTS.md rule 4).
13//
14// Multiple <source> children let the browser pick the first format it can
15// decode (webm → mp4 fallback, etc.); <track kind="captions"> overlays
16// WebVTT subtitles/captions the native UI can toggle.
17//
18// Built on:
19//   - <video> — embeds a media player with native controls (play, seek,
20//     volume, fullscreen, PiP). `controls`, `poster`, `preload`, `loop`,
21//     `muted`, `playsinline`, `crossorigin`, `width`/`height`.
22//       repos/mdn/files/en-us/web/html/reference/elements/video/index.md
23//   - <audio> — same playback API without a visual frame; the native
24//     control bar is the whole UI.
25//       repos/mdn/files/en-us/web/html/reference/elements/audio/index.md
26//   - <source> — one media resource per format; the browser uses the first
27//     it can play. `src` + `type` (MIME, optionally with codecs).
28//       repos/mdn/files/en-us/web/html/reference/elements/source/index.md
29//   - <track> — timed WebVTT text track (captions/subtitles/descriptions/
30//     chapters). `kind`, `src`, `srclang`, `label`, `default`.
31//       repos/mdn/files/en-us/web/html/reference/elements/track/index.md
32//
33// CSS framing reuses the aspect-ratio approach (native `aspect-ratio`, no
34// padding hack):
35//   repos/mdn/files/en-us/web/css/reference/properties/aspect-ratio/index.md
36//
37// Accessibility:
38//   - Native controls are keyboard-operable and labelled by the user agent.
39//   - Provide a <track kind="captions"> for spoken content (WCAG 1.2.2).
40//   - When no caption track exists, pass `ariaLabel` so AT announces what
41//     the player plays. The text inside the element is the no-support
42//     fallback shown to browsers that can't render <video>/<audio>.
43 
44export type MediaSource = {
45  // URL of the media resource.
46  src: string
47  // MIME type, optionally with a codecs parameter, e.g. 'video/webm',
48// … truncated