Video Player

Mirrors the audio player. Pass src for autonomous mode, or feed playing/progress/currentTime/duration + callbacks for controlled mode.

• live — liveCount shows e.g. "2.4k watching" in the corner.
• rec — recording toggles the REC pulse, tag renders top-right metadata (e.g. "4K · 60FPS").
• editorial — pair title + subtitle over a gradient mask.
• portrait — pass sideActions ({ id, icon, onClick?, label? }[]) for vertical react / comment / share buttons.
• accent — speeds drives the speed switcher; each entry can have a rate (multiplier applied to playbackRate). Use defaultSpeedId or activeSpeedId + onSpeedChange.

Clicking the corner expander uses document.requestFullscreen on the carousel root — you don't need to wire anything. Works on desktop browsers; iOS Safari falls back to native video chrome.

Every Diamond component shares the same prop conventions, so once you learn one you can predict the others.

• variant — discriminated union of every visual option. Categories shown above are docs-only metadata; the prop is a flat string union.
• accent — any CSS color string. Overrides --diamond-accent just for that instance via inline style. Cascades into hover, ring, and selection states.
• asChild (when present) — renders the underlying primitive via @radix-ui/react-slot, letting you compose with <Link>, motion.button, etc.
• className — merged with internal Tailwind classes via cn(). Use it to override layout, spacing, or colors.
• Native HTML attributes (onClick, aria-*, data-*, ref, etc.) flow through to the root element without any whitelist.
• Diamond is the skin: zero domain state, zero fetch, zero providers. You wire data and reactions in your app code; the components just render and emit events.