// src/components/VideoPlayer/PlayerControls.tsx "use client"; import type { ReactNode } from "react"; import { Icon } from "../Icon/Icon"; import type { IconName } from "../Icon/Icon"; import styles from "./VideoPlayer.module.css"; export type PlayerButtonProps = { icon: IconName; label: string; active?: boolean; onClick?: () => void; }; /** 40px on-video icon button; hover/active are currentColor state layers. */ export function PlayerButton({ icon, label, active = false, onClick }: PlayerButtonProps) { return ( ); } export type PlayerControlsProps = { playing: boolean; onPlayPause?: () => void; onNext?: () => void; /** The progress row: compose PlayerProgressBar + times. */ children?: ReactNode; /** Right cluster additions (a subtitle toggle, cast…) render before settings. */ trailing?: ReactNode; onVolume?: () => void; onSettings?: () => void; onFullscreen?: () => void; }; /** * The bottom control bar on an upward legibility gradient (the old CR * layout): play cluster left, settings + fullscreen right — subtitles * live in the settings menu, not the bar. */ export function PlayerControls({ playing, onPlayPause, onNext, children, trailing, onVolume, onSettings, onFullscreen, }: PlayerControlsProps) { return (

{trailing}

{children}

); } export type AdControlsProps = { label: string; playing: boolean; onPlayPause?: () => void; onVolume?: () => void; onFullscreen?: () => void; }; /** The reduced strip during ad playback. */ export function AdControls({ label, playing, onPlayPause, onVolume, onFullscreen }: AdControlsProps) { return (

{label}

); }