52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T5497,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; // The surface is one pill: collapsed it is an icon button, expanded it is a // wider button that holds the track. Pill radii nest cleanly, so the trigger // fills the surface's content box instead of carrying its own box model. // // The glyph, rail, and handle keep the YouTube player's volume control sizing; // the box around them is tighter and the track is longer. The rim alone no // longer clears the glyph, so the track carries a small leading inset to hold // YouTube's 8px gap. The tail is wider than the lead only because our surface // ends in a rounded cap that a player bar does not have. const SURFACE_HEIGHT = 36; const SURFACE_BORDER = 1; const TRIGGER_SIZE = SURFACE_HEIGHT - SURFACE_BORDER * 2; const ICON_SIZE = 24; const DEFAULT_TRACK_WIDTH = 72; const RAIL_HEIGHT = 3; const THUMB_SIZE = 12; const TRACK_INSET = 4; const TRACK_END_INSET = 12; const PAGE_STEP_MULTIPLIER = 10; // Leaving the surface should not snap it shut: a grace period forgives a // pointer that clips the rounded cap on its way to the thumb. 300ms is the // hover-intent convention (Radix's close delay) and keeps the whole exit — // grace plus the 200ms collapse — inside half a second, so a control this // frequently used never reads as stuck open. const DEFAULT_COLLAPSE_DELAY = 300; type ExpandableSliderContextValue = { value: number; min: number; max: number; step: number; /** Position of the value in [0, 1]. */ ratio: number; disabled: boolean; expanded: boolean; dragging: boolean; label: string; valueText?: string; trackWidth: number; /** Attached by the rail; every measurement is taken from it. */ railRef: React.RefObject; commitValue: (next: number) => void; /** Reads the rail's box and writing direction; one layout read per call. */ measureRail: () => RailGeometry | undefined; valueFromPointer: ( clientX: number, geometry?: RailGeometry, ) => number | undefined; stepBy: (steps: number) => void; setDragging: (dragging: boolean) => void; }; type RailGeometry = { left: number; width: number; rtl: boolean; }; const ExpandableSliderContext = React.createContext(null); function useExpandableSliderContext(component: string) { const context = React.useContext(ExpandableSliderContext); if (!context) { throw new Error(`${component} must be rendered inside .`); } return context; } export type ExpandableSliderProps = Omit< React.ComponentProps<"div">, "defaultValue" | "onChange" > & { /** Controlled value. */ value?: number; /** Initial value for uncontrolled usage. */ defaultValue?: number; /** Called after the slider requests a value change. */ onValueChange?: (value: number) => void; min?: number; max?: number; step?: number; /** Accessible name applied to the track. */ label: string; /** Spoken value, e.g. `(value) => `${value}%``. */ formatValueText?: (value: number) => string; /** Controlled desktop expansion; mobile viewports stay visually expanded. */ expanded?: boolean; /** * Called when hover, focus, or a drag changes the expansion the slider * would show on its own. When `expanded` is controlled, this is the request * to act on; the prop itself is not echoed back. */ onExpandedChange?: (expanded: boolean) => void; /** Grace period in ms before collapsing once the pointer leaves; 0 collapses immediately. */ collapseDelay?: number; /** Expanded track width in pixels. */ trackWidth?: number; disabled?: boolean; }; /** * Owns the value, the expansion state, and the pill surface. Compose the * revealed content from `ExpandableSliderTrigger` and `ExpandableSliderTrack`; * the track grows toward whichever side it is written on. Below the `sm` * breakpoint, the surface stays expanded so touch users can reach the slider * without a hover-only reveal step. */ export function ExpandableSlider({ value, defaultValue = 0, onValueChange, min = 0, max = 100, step = 1, label, formatValueText, expanded, onExpandedChange, collapseDelay = DEFAULT_COLLAPSE_DELAY, trackWidth = DEFAULT_TRACK_WIDTH, disabled = false, className, style, children, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }: ExpandableSliderProps) { const [internalValue, setInternalValue] = React.useState(() => clampToStep(defaultValue, min, max, step), ); const [hovered, setHovered] = React.useState(false); const [focused, setFocused] = React.useState(false); const [dragging, setDragging] = React.useState(false); const railRef = React.useRef(null); // The countdown is stored as the moment the pointer left rather than as a // running timer, so a `collapseDelay` change re-arms it against the time // already elapsed instead of waiting out the old value. const [collapsePendingSince, setCollapsePendingSince] = React.useState< number | null >(null); React.useEffect(() => { if (collapsePendingSince === null) return; const remaining = Math.max( 0, collapseDelay - (Date.now() - collapsePendingSince), ); const timeout = setTimeout(() => { setCollapsePendingSince(null); setHovered(false); }, remaining); return () => clearTimeout(timeout); }, [collapseDelay, collapsePendingSince]); const controlled = value !== undefined; const currentValue = clampToStep( controlled ? value : internalValue, min, max, step, ); // What the interaction alone asks for. Uncontrolled, this is the state; // controlled, it is what gets reported so the parent can follow hover, // focus, and drags instead of only hearing its own prop echoed back. const requestedExpanded = disabled ? false : hovered || focused || dragging; const isExpanded = expanded ?? requestedExpanded; const previousRequestedRef = React.useRef(requestedExpanded); React.useEffect(() => { if (previousRequestedRef.current === requestedExpanded) return; previousRequestedRef.current = requestedExpanded; onExpandedChange?.(requestedExpanded); }, [onExpandedChange, requestedExpanded]); const commitValue = React.useCallback( (next: number) => { if (!controlled) { setInternalValue(next); } if (next !== currentValue) { onValueChange?.(next); } }, [controlled, currentValue, onValueChange], ); const measureRail = React.useCallback((): RailGeometry | undefined => { const rail = railRef.current; if (!rail) return undefined; const rect = rail.getBoundingClientRect(); return { left: rect.left, width: rect.width, rtl: isRtl(rail) }; }, []); // A drag passes the geometry it measured at pointerdown, so a move costs no // layout read; without one, the rail is measured on the spot. const valueFromPointer = React.useCallback( (clientX: number, geometry?: RailGeometry) => { const rail = geometry ?? measureRail(); if (!rail) return undefined; const usable = rail.width - THUMB_SIZE; if (usable <= 0) return undefined; const rawRatio = clamp( (clientX - rail.left - THUMB_SIZE / 2) / usable, 0, 1, ); // Pointer coordinates are always physical; in an RTL context the track // runs right-to-left, so the ratio has to be mirrored to stay on the // same side of the rail as the fill. const ratio = rail.rtl ? 1 - rawRatio : rawRatio; return clampToStep(min + ratio * (max - min), min, max, step); }, [max, measureRail, min, step], ); const stepBy = React.useCallback( (steps: number) => { commitValue(clampToStep(currentValue + steps * step, min, max, step)); }, [commitValue, currentValue, max, min, step], ); const context = React.useMemo( () => ({ value: currentValue, min, max, step, ratio: max > min ? (currentValue - min) / (max - min) : 0, disabled, expanded: isExpanded, dragging, label, valueText: formatValueText?.(currentValue), trackWidth, railRef, commitValue, measureRail, valueFromPointer, stepBy, setDragging, }), [ commitValue, currentValue, disabled, dragging, formatValueText, isExpanded, label, max, measureRail, min, step, stepBy, trackWidth, valueFromPointer, ], ); return (

{ onPointerEnter?.(event); setCollapsePendingSince(null); setHovered(true); }} onPointerLeave={(event) => { onPointerLeave?.(event); if (collapseDelay <= 0) { setCollapsePendingSince(null); setHovered(false); return; } setCollapsePendingSince(Date.now()); }} onFocus={(event) => { onFocus?.(event); setFocused(true); }} onBlur={(event) => { onBlur?.(event); if (!event.currentTarget.contains(event.relatedTarget)) { setFocused(false); } }} {...props} > {children}

); } export type ExpandableSliderTriggerProps = React.ComponentProps<"button">; /** The always-visible control. Pass any icon as `children`. */ export function ExpandableSliderTrigger({ className, style, disabled, type = "button", ...props }: ExpandableSliderTriggerProps) { const context = useExpandableSliderContext("ExpandableSliderTrigger"); const isDisabled = disabled ?? context.disabled; return (