50:I[707087,["/_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"],"RegistryDependencies"] 51: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"] 52:T16c38,'use client' import { useDirection } from '@radix-ui/react-direction' import * as SliderPrimitive from '@radix-ui/react-slider' import { Slot } from '@radix-ui/react-slot' import { AlertTriangleIcon, CaptionsOffIcon, CheckIcon, DownloadIcon, FastForwardIcon, Loader2Icon, Maximize2Icon, Minimize2Icon, PauseIcon, PictureInPicture2Icon, PictureInPictureIcon, PlayIcon, RefreshCcwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, SettingsIcon, SubtitlesIcon, Volume1Icon, Volume2Icon, VolumeXIcon, } from 'lucide-react' import { MediaActionTypes, MediaProvider, timeUtils, useMediaDispatch, useMediaFullscreenRef, useMediaRef, useMediaSelector, } from 'media-chrome/react/media-store' import * as React from 'react' import * as ReactDOM from 'react-dom' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu' import { Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip' import { useComposedRefs } from '@/registry/lib/compose-refs' import { cn } from '@/lib/utils' import { useLazyRef } from '@/hooks/use-lazy-ref' const ROOT_NAME = 'MediaPlayer' const SEEK_NAME = 'MediaPlayerSeek' const SETTINGS_NAME = 'MediaPlayerSettings' const VOLUME_NAME = 'MediaPlayerVolume' const PLAYBACK_SPEED_NAME = 'MediaPlayerPlaybackSpeed' const FLOATING_MENU_SIDE_OFFSET = 10 const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] const SEEK_STEP_SHORT = 5 const SEEK_STEP_LONG = 10 const SEEK_COLLISION_PADDING = 10 const SEEK_TOOLTIP_WIDTH_FALLBACK = 240 const SEEK_HOVER_PERCENT = '--seek-hover-percent' const SEEK_TOOLTIP_X = '--seek-tooltip-x' const SEEK_TOOLTIP_Y = '--seek-tooltip-y' const SPRITE_CONTAINER_WIDTH = 224 const SPRITE_CONTAINER_HEIGHT = 128 interface DivProps extends React.ComponentProps<'div'> { asChild?: boolean } type RootElement = React.ComponentRef type Direction = 'ltr' | 'rtl' interface StoreState { controlsVisible: boolean dragging: boolean menuOpen: boolean volumeIndicatorVisible: boolean } interface Store { subscribe: (cb: () => void) => () => void getState: () => StoreState setState: (key: keyof StoreState, value: StoreState[keyof StoreState]) => void notify: () => void } const StoreContext = React.createContext(null) function useStoreContext(consumerName: string) { const context = React.useContext(StoreContext) if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``) } return context } function useStore(selector: (state: StoreState) => T): T { const store = useStoreContext('useStore') const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector] ) return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot) } interface MediaPlayerContextValue { mediaId: string labelId: string descriptionId: string dir: Direction rootRef: React.RefObject mediaRef: React.RefObject portalContainer: Element | DocumentFragment | null tooltipDelayDuration: number tooltipSideOffset: number disabled: boolean isVideo: boolean withoutTooltip: boolean } const MediaPlayerContext = React.createContext( null ) function useMediaPlayerContext(consumerName: string) { const context = React.useContext(MediaPlayerContext) if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``) } return context } interface MediaPlayerProps extends Omit< DivProps, 'onTimeUpdate' | 'onVolumeChange' > { onPlay?: () => void onPause?: () => void onEnded?: () => void onTimeUpdate?: (time: number) => void onVolumeChange?: (volume: number) => void onMuted?: (muted: boolean) => void onMediaError?: (error: MediaError | null) => void onPipError?: (error: unknown, state: 'enter' | 'exit') => void onFullscreenChange?: (fullscreen: boolean) => void dir?: Direction label?: string tooltipDelayDuration?: number tooltipSideOffset?: number autoHide?: boolean disabled?: boolean withoutTooltip?: boolean } function MediaPlayer(props: MediaPlayerProps) { const listenersRef = useLazyRef(() => new Set<() => void>()) const stateRef = useLazyRef(() => ({ controlsVisible: true, dragging: false, menuOpen: false, volumeIndicatorVisible: false, })) const store: Store = React.useMemo(() => { return { subscribe: (cb) => { listenersRef.current.add(cb) return () => listenersRef.current.delete(cb) }, getState: () => stateRef.current, setState: (key, value) => { if (Object.is(stateRef.current[key], value)) return stateRef.current[key] = value store.notify() }, notify: () => { for (const cb of listenersRef.current) { cb() } }, } }, [listenersRef, stateRef]) return ( ) } function MediaPlayerImpl(props: MediaPlayerProps) { const { onPlay, onPause, onEnded, onTimeUpdate, onFullscreenChange, onVolumeChange, onMuted, onMediaError, onPipError, dir: dirProp, label, tooltipDelayDuration = 600, tooltipSideOffset = FLOATING_MENU_SIDE_OFFSET, asChild, autoHide = false, disabled = false, withoutTooltip = false, children, className, ref, ...rootImplProps } = props const mediaId = React.useId() const labelId = React.useId() const descriptionId = React.useId() const rootRef = React.useRef(null) const fullscreenRef = useMediaFullscreenRef() const composedRef = useComposedRefs(ref, rootRef, fullscreenRef) const dir = useDirection(dirProp) const dispatch = useMediaDispatch() const mediaRef = React.useRef( null ) const store = useStoreContext(ROOT_NAME) const controlsVisible = useStore((state) => state.controlsVisible) const dragging = useStore((state) => state.dragging) const menuOpen = useStore((state) => state.menuOpen) const hideControlsTimeoutRef = React.useRef(null) const lastMouseMoveRef = React.useRef(Date.now()) const volumeIndicatorTimeoutRef = React.useRef(null) const mediaPaused = useMediaSelector((state) => state.mediaPaused ?? true) const isFullscreen = useMediaSelector( (state) => state.mediaIsFullscreen ?? false ) const [mounted, setMounted] = React.useState(false) React.useLayoutEffect(() => { setMounted(true) }, []) const portalContainer = mounted ? isFullscreen ? rootRef.current : globalThis.document.body : null const isVideo = (typeof HTMLVideoElement !== 'undefined' && mediaRef.current instanceof HTMLVideoElement) || mediaRef.current?.tagName?.toLowerCase() === 'mux-player' const onControlsShow = React.useCallback(() => { store.setState('controlsVisible', true) lastMouseMoveRef.current = Date.now() if (hideControlsTimeoutRef.current) { clearTimeout(hideControlsTimeoutRef.current) } if (autoHide && !mediaPaused && !menuOpen && !dragging) { hideControlsTimeoutRef.current = setTimeout(() => { store.setState('controlsVisible', false) }, 3000) } }, [store.setState, autoHide, mediaPaused, menuOpen, dragging]) const onVolumeIndicatorTrigger = React.useCallback(() => { if (menuOpen) return store.setState('volumeIndicatorVisible', true) if (volumeIndicatorTimeoutRef.current) { clearTimeout(volumeIndicatorTimeoutRef.current) } volumeIndicatorTimeoutRef.current = setTimeout(() => { store.setState('volumeIndicatorVisible', false) }, 2000) if (autoHide) { onControlsShow() } }, [store.setState, menuOpen, autoHide, onControlsShow]) const onMouseLeave = React.useCallback( (event: React.MouseEvent) => { rootImplProps.onMouseLeave?.(event) if (event.defaultPrevented) return if (autoHide && !mediaPaused && !menuOpen && !dragging) { store.setState('controlsVisible', false) } }, [ store.setState, rootImplProps.onMouseLeave, autoHide, mediaPaused, menuOpen, dragging, ] ) const onMouseMove = React.useCallback( (event: React.MouseEvent) => { rootImplProps.onMouseMove?.(event) if (event.defaultPrevented) return if (autoHide) { onControlsShow() } }, [autoHide, rootImplProps.onMouseMove, onControlsShow] ) React.useEffect(() => { if (mediaPaused || menuOpen || dragging) { store.setState('controlsVisible', true) if (hideControlsTimeoutRef.current) { clearTimeout(hideControlsTimeoutRef.current) } return } if (autoHide) { onControlsShow() } }, [ store.setState, onControlsShow, autoHide, menuOpen, mediaPaused, dragging, ]) const onKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (disabled) return rootImplProps.onKeyDown?.(event) if (event.defaultPrevented) return const mediaElement = mediaRef.current if (!mediaElement) return const isMediaFocused = document.activeElement === mediaElement const isPlayerFocused = document.activeElement?.closest('[data-slot="media-player"]') !== null if (!isMediaFocused && !isPlayerFocused) return if (autoHide) onControlsShow() switch (event.key.toLowerCase()) { case ' ': case 'k': event.preventDefault() dispatch({ type: mediaElement.paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST, }) break case 'f': event.preventDefault() dispatch({ type: document.fullscreenElement ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST, }) break case 'm': { event.preventDefault() if (isVideo) { onVolumeIndicatorTrigger() } dispatch({ type: mediaElement.muted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST, }) break } case 'arrowright': event.preventDefault() if ( isVideo || (mediaElement instanceof HTMLAudioElement && event.shiftKey) ) { dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: Math.min( mediaElement.duration, mediaElement.currentTime + SEEK_STEP_SHORT ), }) } break case 'arrowleft': event.preventDefault() if ( isVideo || (mediaElement instanceof HTMLAudioElement && event.shiftKey) ) { dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: Math.max(0, mediaElement.currentTime - SEEK_STEP_SHORT), }) } break case 'arrowup': event.preventDefault() if (isVideo) { onVolumeIndicatorTrigger() dispatch({ type: MediaActionTypes.MEDIA_VOLUME_REQUEST, detail: Math.min(1, mediaElement.volume + 0.1), }) } break case 'arrowdown': event.preventDefault() if (isVideo) { onVolumeIndicatorTrigger() dispatch({ type: MediaActionTypes.MEDIA_VOLUME_REQUEST, detail: Math.max(0, mediaElement.volume - 0.1), }) } break case '<': { event.preventDefault() const currentRate = mediaElement.playbackRate const currentIndex = SPEEDS.indexOf(currentRate) const newIndex = Math.max(0, currentIndex - 1) const newRate = SPEEDS[newIndex] ?? 1 dispatch({ type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST, detail: newRate, }) break } case '>': { event.preventDefault() const currentRate = mediaElement.playbackRate const currentIndex = SPEEDS.indexOf(currentRate) const newIndex = Math.min(SPEEDS.length - 1, currentIndex + 1) const newRate = SPEEDS[newIndex] ?? 1 dispatch({ type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST, detail: newRate, }) break } case 'c': event.preventDefault() if (isVideo && mediaElement.textTracks.length > 0) { dispatch({ type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST, }) } break case 'd': { const hasDownload = mediaElement.querySelector( '[data-slot="media-player-download"]' ) if (!hasDownload) break event.preventDefault() if (mediaElement.currentSrc) { const link = document.createElement('a') link.href = mediaElement.currentSrc link.download = '' document.body.appendChild(link) link.click() document.body.removeChild(link) } break } case 'p': { event.preventDefault() if (isVideo && 'requestPictureInPicture' in mediaElement) { const isPip = document.pictureInPictureElement === mediaElement dispatch({ type: isPip ? MediaActionTypes.MEDIA_EXIT_PIP_REQUEST : MediaActionTypes.MEDIA_ENTER_PIP_REQUEST, }) if (isPip) { document.exitPictureInPicture().catch((error) => { onPipError?.(error, 'exit') }) } else { mediaElement.requestPictureInPicture().catch((error) => { onPipError?.(error, 'enter') }) } } break } case 'r': { event.preventDefault() mediaElement.loop = !mediaElement.loop break } case 'j': { event.preventDefault() dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: Math.max(0, mediaElement.currentTime - SEEK_STEP_LONG), }) break } case 'l': { event.preventDefault() dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: Math.min( mediaElement.duration, mediaElement.currentTime + SEEK_STEP_LONG ), }) break } case '0': case '1': case '2': case '3': case '4': case '5': case '6': case '7': case '8': case '9': { event.preventDefault() const percent = Number.parseInt(event.key, 10) / 10 const seekTime = mediaElement.duration * percent dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: seekTime, }) break } case 'home': { event.preventDefault() dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: 0, }) break } case 'end': { event.preventDefault() dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: mediaElement.duration, }) break } } }, [ dispatch, rootImplProps.onKeyDown, onVolumeIndicatorTrigger, onPipError, disabled, isVideo, onControlsShow, autoHide, ] ) const onKeyUp = React.useCallback( (event: React.KeyboardEvent) => { rootImplProps.onKeyUp?.(event) const key = event.key.toLowerCase() if (key === 'arrowup' || key === 'arrowdown' || key === 'm') { onVolumeIndicatorTrigger() } }, [rootImplProps.onKeyUp, onVolumeIndicatorTrigger] ) React.useEffect(() => { const mediaElement = mediaRef.current if (!mediaElement) return if (onPlay) mediaElement.addEventListener('play', onPlay) if (onPause) mediaElement.addEventListener('pause', onPause) if (onEnded) mediaElement.addEventListener('ended', onEnded) if (onTimeUpdate) mediaElement.addEventListener('timeupdate', () => onTimeUpdate?.(mediaElement.currentTime) ) if (onVolumeChange) mediaElement.addEventListener('volumechange', () => { onVolumeChange?.(mediaElement.volume) onMuted?.(mediaElement.muted) }) if (onMediaError) mediaElement.addEventListener('error', () => onMediaError?.(mediaElement.error) ) if (onFullscreenChange) { document.addEventListener('fullscreenchange', () => onFullscreenChange?.(!!document.fullscreenElement) ) } return () => { if (onPlay) mediaElement.removeEventListener('play', onPlay) if (onPause) mediaElement.removeEventListener('pause', onPause) if (onEnded) mediaElement.removeEventListener('ended', onEnded) if (onTimeUpdate) mediaElement.removeEventListener('timeupdate', () => onTimeUpdate?.(mediaElement.currentTime) ) if (onVolumeChange) mediaElement.removeEventListener('volumechange', () => { onVolumeChange?.(mediaElement.volume) onMuted?.(mediaElement.muted) }) if (onMediaError) mediaElement.removeEventListener('error', () => onMediaError?.(mediaElement.error) ) if (onFullscreenChange) { document.removeEventListener('fullscreenchange', () => onFullscreenChange?.(!!document.fullscreenElement) ) } if (volumeIndicatorTimeoutRef.current) { clearTimeout(volumeIndicatorTimeoutRef.current) } if (hideControlsTimeoutRef.current) { clearTimeout(hideControlsTimeoutRef.current) } } }, [ onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onMuted, onMediaError, onFullscreenChange, ]) const contextValue = React.useMemo( () => ({ mediaId, labelId, descriptionId, dir, rootRef, mediaRef, portalContainer, tooltipDelayDuration, tooltipSideOffset, disabled, isVideo, withoutTooltip, }), [ mediaId, labelId, descriptionId, dir, portalContainer, tooltipDelayDuration, tooltipSideOffset, disabled, isVideo, withoutTooltip, ] ) const RootPrimitive = asChild ? Slot : 'div' return ( {label ?? 'Media player'} {isVideo ? 'Video player with custom controls for playback, volume, seeking, and more. Use space bar to play/pause, arrow keys (←/→) to seek, and arrow keys (↑/↓) to adjust volume.' : 'Audio player with custom controls for playback, volume, seeking, and more. Use space bar to play/pause, Shift + arrow keys (←/→) to seek, and arrow keys (↑/↓) to adjust volume.'} {children} ) } interface MediaPlayerVideoProps extends React.ComponentProps<'video'> { asChild?: boolean } function MediaPlayerVideo(props: MediaPlayerVideoProps) { const { asChild, ref, onClick, ...videoProps } = props const context = useMediaPlayerContext('MediaPlayerVideo') const dispatch = useMediaDispatch() const mediaRefCallback = useMediaRef() const composedRef = useComposedRefs(ref, context.mediaRef, mediaRefCallback) const onPlayToggle = React.useCallback( (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented) return const mediaElement = event.currentTarget if (!mediaElement) return dispatch({ type: mediaElement.paused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST, }) }, [dispatch, onClick] ) const VideoPrimitive = asChild ? Slot : 'video' return ( ) } interface MediaPlayerAudioProps extends React.ComponentProps<'audio'> { asChild?: boolean } function MediaPlayerAudio(props: MediaPlayerAudioProps) { const { asChild, ref, ...audioProps } = props const context = useMediaPlayerContext('MediaPlayerAudio') const mediaRefCallback = useMediaRef() const composedRef = useComposedRefs(ref, context.mediaRef, mediaRefCallback) const AudioPrimitive = asChild ? Slot : 'audio' return ( ) } function MediaPlayerControls(props: DivProps) { const { asChild, className, ...controlsProps } = props const context = useMediaPlayerContext('MediaPlayerControls') const isFullscreen = useMediaSelector( (state) => state.mediaIsFullscreen ?? false ) const controlsVisible = useStore((state) => state.controlsVisible) const ControlsPrimitive = asChild ? Slot : 'div' return ( ) } interface MediaPlayerLoadingProps extends DivProps { delayMs?: number } function MediaPlayerLoading(props: MediaPlayerLoadingProps) { const { delayMs = 500, asChild, className, children, ...loadingProps } = props const isLoading = useMediaSelector((state) => state.mediaLoading ?? false) const isPaused = useMediaSelector((state) => state.mediaPaused ?? true) const hasPlayed = useMediaSelector((state) => state.mediaHasPlayed ?? false) const shouldShowLoading = isLoading && !isPaused const shouldUseDelay = hasPlayed && shouldShowLoading const loadingDelayMs = shouldUseDelay ? delayMs : 0 const [shouldRender, setShouldRender] = React.useState(false) const timeoutRef = React.useRef(null) React.useEffect(() => { if (timeoutRef.current) { clearTimeout(timeoutRef.current) timeoutRef.current = null } if (shouldShowLoading) { if (loadingDelayMs > 0) { timeoutRef.current = setTimeout(() => { setShouldRender(true) timeoutRef.current = null }, loadingDelayMs) } else { setShouldRender(true) } } else { setShouldRender(false) } return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current) timeoutRef.current = null } } }, [shouldShowLoading, loadingDelayMs]) if (!shouldRender) return null const LoadingPrimitive = asChild ? Slot : 'div' return ( {children ?? ( )} ) } interface MediaPlayerErrorProps extends DivProps { error?: MediaError | null label?: string description?: string onRetry?: () => void onReload?: () => void asChild?: boolean } function MediaPlayerError(props: MediaPlayerErrorProps) { const { error: errorProp, label, description, onRetry: onRetryProp, onReload: onReloadProp, asChild, className, children, ...errorProps } = props const context = useMediaPlayerContext('MediaPlayerError') const isFullscreen = useMediaSelector( (state) => state.mediaIsFullscreen ?? false ) const mediaError = useMediaSelector((state) => state.mediaError) const error = errorProp ?? mediaError const labelId = React.useId() const descriptionId = React.useId() const [actionState, setActionState] = React.useState<{ retryPending: boolean reloadPending: boolean }>({ retryPending: false, reloadPending: false, }) const onRetry = React.useCallback(() => { setActionState((prev) => ({ ...prev, retryPending: true })) requestAnimationFrame(() => { const mediaElement = context.mediaRef.current if (!mediaElement) { setActionState((prev) => ({ ...prev, retryPending: false })) return } if (onRetryProp) { onRetryProp() } else { const currentSrc = mediaElement.currentSrc ?? mediaElement.src if (currentSrc) { mediaElement.load() } } setActionState((prev) => ({ ...prev, retryPending: false })) }) }, [context.mediaRef, onRetryProp]) const onReload = React.useCallback(() => { setActionState((prev) => ({ ...prev, reloadPending: true })) requestAnimationFrame(() => { if (onReloadProp) { onReloadProp() } else { window.location.reload() } }) }, [onReloadProp]) const errorLabel = React.useMemo(() => { if (label) return label if (!error) return 'Playback Error' const labelMap: Record = { [MediaError.MEDIA_ERR_ABORTED]: 'Playback Interrupted', [MediaError.MEDIA_ERR_NETWORK]: 'Connection Problem', [MediaError.MEDIA_ERR_DECODE]: 'Media Error', [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: 'Unsupported Format', } return labelMap[error.code] ?? 'Playback Error' }, [label, error]) const errorDescription = React.useMemo(() => { if (description) return description if (!error) return 'An unknown error occurred' const descriptionMap: Record = { [MediaError.MEDIA_ERR_ABORTED]: 'Media playback was aborted', [MediaError.MEDIA_ERR_NETWORK]: 'A network error occurred while loading the media', [MediaError.MEDIA_ERR_DECODE]: 'An error occurred while decoding the media', [MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED]: 'The media format is not supported', } return descriptionMap[error.code] ?? 'An unknown error occurred' }, [description, error]) if (!error) return null const ErrorPrimitive = asChild ? Slot : 'div' return ( {children ?? (

{errorLabel}

{errorDescription}

)} ) } function MediaPlayerVolumeIndicator(props: DivProps) { const { asChild, className, ...indicatorProps } = props const mediaVolume = useMediaSelector((state) => state.mediaVolume ?? 1) const mediaMuted = useMediaSelector((state) => state.mediaMuted ?? false) const mediaVolumeLevel = useMediaSelector( (state) => state.mediaVolumeLevel ?? 'high' ) const volumeIndicatorVisible = useStore( (state) => state.volumeIndicatorVisible ) if (!volumeIndicatorVisible) return null const effectiveVolume = mediaMuted ? 0 : mediaVolume const volumePercentage = Math.round(effectiveVolume * 100) const barCount = 10 const activeBarCount = Math.ceil(effectiveVolume * barCount) const VolumeIndicatorPrimitive = asChild ? Slot : 'div' return (

{mediaVolumeLevel === 'off' || mediaMuted ? ( ) : mediaVolumeLevel === 'high' ? ( ) : ( )} {mediaMuted ? 'Muted' : `${volumePercentage}%`}

{Array.from({ length: barCount }, (_, index) => (

))}

) } function MediaPlayerControlsOverlay(props: DivProps) { const { asChild, className, ...overlayProps } = props const isFullscreen = useMediaSelector( (state) => state.mediaIsFullscreen ?? false ) const controlsVisible = useStore((state) => state.controlsVisible) const OverlayPrimitive = asChild ? Slot : 'div' return ( ) } function MediaPlayerPlay(props: React.ComponentProps) { const { children, className, disabled, onClick, ...playButtonProps } = props const context = useMediaPlayerContext('MediaPlayerPlay') const dispatch = useMediaDispatch() const mediaPaused = useMediaSelector((state) => state.mediaPaused ?? true) const isDisabled = disabled || context.disabled const onPlayToggle = React.useCallback( (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented) return dispatch({ type: mediaPaused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST, }) }, [dispatch, onClick, mediaPaused] ) return ( ) } interface MediaPlayerSeekBackwardProps extends React.ComponentProps< typeof Button > { seconds?: number } function MediaPlayerSeekBackward(props: MediaPlayerSeekBackwardProps) { const { seconds = SEEK_STEP_SHORT, children, className, disabled, onClick, ...seekBackwardProps } = props const context = useMediaPlayerContext('MediaPlayerSeekBackward') const dispatch = useMediaDispatch() const mediaCurrentTime = useMediaSelector( (state) => state.mediaCurrentTime ?? 0 ) const isDisabled = disabled || context.disabled const onSeekBackward = React.useCallback( (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented) return dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: Math.max(0, mediaCurrentTime - seconds), }) }, [dispatch, onClick, mediaCurrentTime, seconds] ) return ( ) } interface MediaPlayerSeekForwardProps extends React.ComponentProps< typeof Button > { seconds?: number } function MediaPlayerSeekForward(props: MediaPlayerSeekForwardProps) { const { seconds = SEEK_STEP_LONG, children, className, disabled, onClick, ...seekForwardProps } = props const context = useMediaPlayerContext('MediaPlayerSeekForward') const dispatch = useMediaDispatch() const mediaCurrentTime = useMediaSelector( (state) => state.mediaCurrentTime ?? 0 ) const [, seekableEnd] = useMediaSelector( (state) => state.mediaSeekable ?? [0, 0] ) const isDisabled = disabled || context.disabled const onSeekForward = React.useCallback( (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented) return dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: Math.min( seekableEnd ?? Number.POSITIVE_INFINITY, mediaCurrentTime + seconds ), }) }, [dispatch, onClick, mediaCurrentTime, seekableEnd, seconds] ) return ( ) } interface SeekState { isHovering: boolean pendingSeekTime: number | null hasInitialPosition: boolean } interface MediaPlayerSeekProps extends React.ComponentProps< typeof SliderPrimitive.Root > { withTime?: boolean withoutChapter?: boolean withoutTooltip?: boolean tooltipThumbnailSrc?: string | ((time: number) => string) tooltipTimeVariant?: 'current' | 'progress' tooltipSideOffset?: number tooltipCollisionBoundary?: Element | Element[] tooltipCollisionPadding?: | number | Partial> } function MediaPlayerSeek(props: MediaPlayerSeekProps) { const { withTime = false, withoutChapter = false, withoutTooltip = false, tooltipTimeVariant = 'current', tooltipThumbnailSrc, tooltipSideOffset, tooltipCollisionPadding = SEEK_COLLISION_PADDING, tooltipCollisionBoundary, className, disabled, ...seekProps } = props const context = useMediaPlayerContext(SEEK_NAME) const store = useStoreContext(SEEK_NAME) const dispatch = useMediaDispatch() const mediaCurrentTime = useMediaSelector( (state) => state.mediaCurrentTime ?? 0 ) const [seekableStart = 0, seekableEnd = 0] = useMediaSelector( (state) => state.mediaSeekable ?? [0, 0] ) const mediaBuffered = useMediaSelector((state) => state.mediaBuffered ?? []) const mediaEnded = useMediaSelector((state) => state.mediaEnded ?? false) const chapterCues = useMediaSelector((state) => state.mediaChaptersCues ?? []) const mediaPreviewTime = useMediaSelector((state) => state.mediaPreviewTime) const mediaPreviewImage = useMediaSelector((state) => state.mediaPreviewImage) const mediaPreviewCoords = useMediaSelector( (state) => state.mediaPreviewCoords ) const seekRef = React.useRef(null) const tooltipRef = React.useRef(null) const justCommittedRef = React.useRef(false) const hoverTimeRef = React.useRef(0) const tooltipXRef = React.useRef(0) const tooltipYRef = React.useRef(0) const seekRectRef = React.useRef(null) const collisionDataRef = React.useRef<{ padding: { top: number; right: number; bottom: number; left: number } boundaries: Element[] } | null>(null) const [seekState, setSeekState] = React.useState({ isHovering: false, pendingSeekTime: null, hasInitialPosition: false, }) const rafIdRef = React.useRef(null) const seekThrottleRef = React.useRef(null) const hoverTimeoutRef = React.useRef(null) const lastPointerXRef = React.useRef(0) const lastPointerYRef = React.useRef(0) const previewDebounceRef = React.useRef(null) const pointerEnterTimeRef = React.useRef(0) const horizontalMovementRef = React.useRef(0) const verticalMovementRef = React.useRef(0) const lastSeekCommitTimeRef = React.useRef(0) const timeCache = React.useRef>(new Map()) const displayValue = seekState.pendingSeekTime ?? mediaCurrentTime const isDisabled = disabled || context.disabled const tooltipDisabled = withoutTooltip || context.withoutTooltip || store.getState().menuOpen const currentTooltipSideOffset = tooltipSideOffset ?? context.tooltipSideOffset const getCachedTime = React.useCallback((time: number, duration: number) => { const roundedTime = Math.floor(time) const key = roundedTime + duration * 10000 if (timeCache.current.has(key)) { return timeCache.current.get(key) as string } const formatted = timeUtils.formatTime(time, duration) timeCache.current.set(key, formatted) if (timeCache.current.size > 100) { timeCache.current.clear() } return formatted }, []) const currentTime = getCachedTime(displayValue, seekableEnd) const duration = getCachedTime(seekableEnd, seekableEnd) const remainingTime = getCachedTime(seekableEnd - displayValue, seekableEnd) const onCollisionDataUpdate = React.useCallback(() => { if (collisionDataRef.current) return collisionDataRef.current const padding = typeof tooltipCollisionPadding === 'number' ? { top: tooltipCollisionPadding, right: tooltipCollisionPadding, bottom: tooltipCollisionPadding, left: tooltipCollisionPadding, } : { top: 0, right: 0, bottom: 0, left: 0, ...tooltipCollisionPadding } const boundaries = tooltipCollisionBoundary ? Array.isArray(tooltipCollisionBoundary) ? tooltipCollisionBoundary : [tooltipCollisionBoundary] : ([context.rootRef.current].filter(Boolean) as Element[]) collisionDataRef.current = { padding, boundaries } return collisionDataRef.current }, [tooltipCollisionPadding, tooltipCollisionBoundary, context.rootRef]) const getCurrentChapterCue = React.useCallback( (time: number) => { if (withoutChapter || chapterCues.length === 0) return null return chapterCues.find((c) => time >= c.startTime && time < c.endTime) }, [chapterCues, withoutChapter] ) const getThumbnail = React.useCallback( (time: number) => { if (tooltipDisabled) return null if (tooltipThumbnailSrc) { const src = typeof tooltipThumbnailSrc === 'function' ? tooltipThumbnailSrc(time) : tooltipThumbnailSrc return { src, coords: null } } if ( mediaPreviewTime !== undefined && Math.abs(time - mediaPreviewTime) < 0.1 && mediaPreviewImage ) { return { src: mediaPreviewImage, coords: mediaPreviewCoords ?? null, } } return null }, [ tooltipThumbnailSrc, mediaPreviewTime, mediaPreviewImage, mediaPreviewCoords, tooltipDisabled, ] ) const onPreviewUpdate = React.useCallback( (time: number) => { if (tooltipDisabled) return if (previewDebounceRef.current) { cancelAnimationFrame(previewDebounceRef.current) } previewDebounceRef.current = requestAnimationFrame(() => { dispatch({ type: MediaActionTypes.MEDIA_PREVIEW_REQUEST, detail: time, }) previewDebounceRef.current = null }) }, [dispatch, tooltipDisabled] ) const onTooltipPositionUpdate = React.useCallback( (clientX: number) => { if (!seekRef.current) return const tooltipWidth = tooltipRef.current?.offsetWidth ?? SEEK_TOOLTIP_WIDTH_FALLBACK let x = clientX const y = seekRectRef.current?.top ?? 0 const collisionData = onCollisionDataUpdate() const halfTooltipWidth = tooltipWidth / 2 let minLeft = 0 let maxRight = window.innerWidth for (const boundary of collisionData.boundaries) { const boundaryRect = boundary.getBoundingClientRect() minLeft = Math.max( minLeft, boundaryRect.left + collisionData.padding.left ) maxRight = Math.min( maxRight, boundaryRect.right - collisionData.padding.right ) } if (x - halfTooltipWidth < minLeft) { x = minLeft + halfTooltipWidth } else if (x + halfTooltipWidth > maxRight) { x = maxRight - halfTooltipWidth } const viewportPadding = SEEK_COLLISION_PADDING if (x - halfTooltipWidth < viewportPadding) { x = viewportPadding + halfTooltipWidth } else if (x + halfTooltipWidth > window.innerWidth - viewportPadding) { x = window.innerWidth - viewportPadding - halfTooltipWidth } tooltipXRef.current = x tooltipYRef.current = y if (tooltipRef.current) { tooltipRef.current.style.setProperty(SEEK_TOOLTIP_X, `${x}px`) tooltipRef.current.style.setProperty(SEEK_TOOLTIP_Y, `${y}px`) } if (!seekState.hasInitialPosition) { setSeekState((prev) => ({ ...prev, hasInitialPosition: true })) } }, [onCollisionDataUpdate, seekState.hasInitialPosition] ) const onHoverProgressUpdate = React.useCallback(() => { if (!seekRef.current || seekableEnd <= 0) return const hoverPercent = Math.min( 100, (hoverTimeRef.current / seekableEnd) * 100 ) seekRef.current.style.setProperty( SEEK_HOVER_PERCENT, `${hoverPercent.toFixed(4)}%` ) }, [seekableEnd]) React.useEffect(() => { if (seekState.pendingSeekTime !== null) { const diff = Math.abs(mediaCurrentTime - seekState.pendingSeekTime) if (diff < 0.5) { setSeekState((prev) => ({ ...prev, pendingSeekTime: null })) } } }, [mediaCurrentTime, seekState.pendingSeekTime]) React.useEffect(() => { if (!seekState.isHovering || tooltipDisabled) return function onScroll() { setSeekState((prev) => ({ ...prev, isHovering: false, hasInitialPosition: false, })) dispatch({ type: MediaActionTypes.MEDIA_PREVIEW_REQUEST, detail: undefined, }) } document.addEventListener('scroll', onScroll, { passive: true }) return () => { document.removeEventListener('scroll', onScroll) } }, [dispatch, seekState.isHovering, tooltipDisabled]) const bufferedProgress = React.useMemo(() => { if (mediaBuffered.length === 0 || seekableEnd <= 0) return 0 if (mediaEnded) return 1 const containingRange = mediaBuffered.find( ([start, end]) => start <= mediaCurrentTime && mediaCurrentTime <= end ) if (containingRange) { return Math.min(1, containingRange[1] / seekableEnd) } return Math.min(1, seekableStart / seekableEnd) }, [mediaBuffered, mediaCurrentTime, seekableEnd, mediaEnded, seekableStart]) const onPointerEnter = React.useCallback(() => { if (seekRef.current) { seekRectRef.current = seekRef.current.getBoundingClientRect() } collisionDataRef.current = null pointerEnterTimeRef.current = Date.now() horizontalMovementRef.current = 0 verticalMovementRef.current = 0 if (seekableEnd > 0) { if (hoverTimeoutRef.current) { clearTimeout(hoverTimeoutRef.current) } if (!tooltipDisabled) { if (lastPointerXRef.current && seekRectRef.current) { const clientX = Math.max( seekRectRef.current.left, Math.min(lastPointerXRef.current, seekRectRef.current.right) ) onTooltipPositionUpdate(clientX) } } } }, [seekableEnd, onTooltipPositionUpdate, tooltipDisabled]) const onPointerLeave = React.useCallback(() => { if (hoverTimeoutRef.current) { clearTimeout(hoverTimeoutRef.current) hoverTimeoutRef.current = null } if (rafIdRef.current) { cancelAnimationFrame(rafIdRef.current) rafIdRef.current = null } if (previewDebounceRef.current) { cancelAnimationFrame(previewDebounceRef.current) previewDebounceRef.current = null } setSeekState((prev) => ({ ...prev, isHovering: false, hasInitialPosition: false, })) justCommittedRef.current = false seekRectRef.current = null collisionDataRef.current = null pointerEnterTimeRef.current = 0 horizontalMovementRef.current = 0 verticalMovementRef.current = 0 lastPointerXRef.current = 0 lastPointerYRef.current = 0 lastSeekCommitTimeRef.current = 0 if (!tooltipDisabled) { dispatch({ type: MediaActionTypes.MEDIA_PREVIEW_REQUEST, detail: undefined, }) } }, [dispatch, tooltipDisabled]) const onPointerMove = React.useCallback( (event: React.PointerEvent) => { if (seekableEnd <= 0) return if (!seekRectRef.current && seekRef.current) { seekRectRef.current = seekRef.current.getBoundingClientRect() } if (!seekRectRef.current) return const currentX = event.clientX const currentY = event.clientY if (lastPointerXRef.current !== 0 && lastPointerYRef.current !== 0) { const deltaX = Math.abs(currentX - lastPointerXRef.current) const deltaY = Math.abs(currentY - lastPointerYRef.current) horizontalMovementRef.current += deltaX verticalMovementRef.current += deltaY } lastPointerXRef.current = currentX lastPointerYRef.current = currentY if (rafIdRef.current) { cancelAnimationFrame(rafIdRef.current) } rafIdRef.current = requestAnimationFrame(() => { const wasJustCommitted = justCommittedRef.current if (wasJustCommitted) { justCommittedRef.current = false } const seekRect = seekRectRef.current if (!seekRect) { rafIdRef.current = null return } const clientX = lastPointerXRef.current const offsetXOnSeekBar = Math.max( 0, Math.min(clientX - seekRect.left, seekRect.width) ) const relativeX = offsetXOnSeekBar / seekRect.width const calculatedHoverTime = relativeX * seekableEnd hoverTimeRef.current = calculatedHoverTime onHoverProgressUpdate() const wasHovering = seekState.isHovering const isCurrentlyHovering = clientX >= seekRect.left && clientX <= seekRect.right const timeHovering = Date.now() - pointerEnterTimeRef.current const totalMovement = horizontalMovementRef.current + verticalMovementRef.current const horizontalRatio = totalMovement > 0 ? horizontalMovementRef.current / totalMovement : 0 const timeSinceSeekCommit = Date.now() - lastSeekCommitTimeRef.current const isInSeekCooldown = timeSinceSeekCommit < 300 const shouldShowTooltip = !wasJustCommitted && !isInSeekCooldown && (timeHovering > 150 || horizontalRatio > 0.6 || (totalMovement < 10 && timeHovering > 50)) if ( !wasHovering && isCurrentlyHovering && shouldShowTooltip && !tooltipDisabled ) { setSeekState((prev) => ({ ...prev, isHovering: true })) } if (!tooltipDisabled) { onPreviewUpdate(calculatedHoverTime) if (isCurrentlyHovering && (wasHovering || shouldShowTooltip)) { onTooltipPositionUpdate(clientX) } } rafIdRef.current = null }) }, [ onPreviewUpdate, onTooltipPositionUpdate, onHoverProgressUpdate, seekableEnd, seekState.isHovering, tooltipDisabled, ] ) const onSeek = React.useCallback( (value: number[]) => { const time = value[0] ?? 0 setSeekState((prev) => ({ ...prev, pendingSeekTime: time })) if (!store.getState().dragging) { store.setState('dragging', true) } if (seekThrottleRef.current) { cancelAnimationFrame(seekThrottleRef.current) } seekThrottleRef.current = requestAnimationFrame(() => { dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: time, }) seekThrottleRef.current = null }) }, [dispatch, store.getState, store.setState] ) const onSeekCommit = React.useCallback( (value: number[]) => { const time = value[0] ?? 0 if (seekThrottleRef.current) { cancelAnimationFrame(seekThrottleRef.current) seekThrottleRef.current = null } if (hoverTimeoutRef.current) { clearTimeout(hoverTimeoutRef.current) hoverTimeoutRef.current = null } if (rafIdRef.current) { cancelAnimationFrame(rafIdRef.current) rafIdRef.current = null } if (previewDebounceRef.current) { cancelAnimationFrame(previewDebounceRef.current) previewDebounceRef.current = null } setSeekState((prev) => ({ ...prev, pendingSeekTime: time, isHovering: false, hasInitialPosition: false, })) justCommittedRef.current = true collisionDataRef.current = null lastSeekCommitTimeRef.current = Date.now() // Reset movement tracking after seek commit pointerEnterTimeRef.current = Date.now() horizontalMovementRef.current = 0 verticalMovementRef.current = 0 if (store.getState().dragging) { store.setState('dragging', false) } dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: time, }) dispatch({ type: MediaActionTypes.MEDIA_PREVIEW_REQUEST, detail: undefined, }) }, [dispatch, store.getState, store.setState] ) React.useEffect(() => { return () => { if (seekThrottleRef.current) { cancelAnimationFrame(seekThrottleRef.current) } if (hoverTimeoutRef.current) { clearTimeout(hoverTimeoutRef.current) } if (rafIdRef.current) { cancelAnimationFrame(rafIdRef.current) } if (previewDebounceRef.current) { cancelAnimationFrame(previewDebounceRef.current) } } }, []) const currentChapterCue = getCurrentChapterCue(hoverTimeRef.current) const thumbnail = getThumbnail(hoverTimeRef.current) const hoverTime = getCachedTime(hoverTimeRef.current, seekableEnd) const chapterSeparators = React.useMemo(() => { if (withoutChapter || chapterCues.length <= 1 || seekableEnd <= 0) { return null } return chapterCues.slice(1).map((chapterCue, index) => { const position = (chapterCue.startTime / seekableEnd) * 100 return (

) }) }, [chapterCues, seekableEnd, withoutChapter]) const spriteStyle = React.useMemo(() => { if (!thumbnail?.coords || !thumbnail?.src) { return {} } const coordX = thumbnail.coords[0] const coordY = thumbnail.coords[1] const spriteWidth = Number.parseFloat(thumbnail.coords[2] ?? '0') const spriteHeight = Number.parseFloat(thumbnail.coords[3] ?? '0') const scaleX = spriteWidth > 0 ? SPRITE_CONTAINER_WIDTH / spriteWidth : 1 const scaleY = spriteHeight > 0 ? SPRITE_CONTAINER_HEIGHT / spriteHeight : 1 const scale = Math.min(scaleX, scaleY) return { width: `${spriteWidth}px`, height: `${spriteHeight}px`, backgroundImage: `url(${thumbnail.src})`, backgroundPosition: `-${coordX}px -${coordY}px`, backgroundRepeat: 'no-repeat', transform: `scale(${scale})`, transformOrigin: 'top left', } }, [thumbnail?.coords, thumbnail?.src]) const SeekSlider = (

{seekState.isHovering && seekableEnd > 0 && (

)} {chapterSeparators} {!withoutTooltip && !context.withoutTooltip && seekState.isHovering && seekableEnd > 0 && (

{thumbnail?.src && (

{thumbnail.coords ? (

) : ( // biome-ignore lint/performance/noImgElement: dynamic thumbnail URLs from media don't work well with Next.js Image optimization

)}

)} {currentChapterCue && (

{currentChapterCue.text}

)}

{tooltipTimeVariant === 'progress' ? `${hoverTime} / ${duration}` : hoverTime}

)}

) if (withTime) { return (

{currentTime} {SeekSlider} {remainingTime}

) } return SeekSlider } interface MediaPlayerVolumeProps extends React.ComponentProps< typeof SliderPrimitive.Root > { asChild?: boolean expandable?: boolean } function MediaPlayerVolume(props: MediaPlayerVolumeProps) { const { expandable = false, className, disabled, ...volumeProps } = props const context = useMediaPlayerContext(VOLUME_NAME) const store = useStoreContext(VOLUME_NAME) const dispatch = useMediaDispatch() const mediaVolume = useMediaSelector((state) => state.mediaVolume ?? 1) const mediaMuted = useMediaSelector((state) => state.mediaMuted ?? false) const mediaVolumeLevel = useMediaSelector( (state) => state.mediaVolumeLevel ?? 'high' ) const sliderId = React.useId() const volumeTriggerId = React.useId() const isDisabled = disabled || context.disabled const onMute = React.useCallback(() => { dispatch({ type: mediaMuted ? MediaActionTypes.MEDIA_UNMUTE_REQUEST : MediaActionTypes.MEDIA_MUTE_REQUEST, }) }, [dispatch, mediaMuted]) const onVolumeChange = React.useCallback( (value: number[]) => { const volume = value[0] ?? 0 if (!store.getState().dragging) { store.setState('dragging', true) } dispatch({ type: MediaActionTypes.MEDIA_VOLUME_REQUEST, detail: volume, }) }, [dispatch, store.getState, store.setState] ) const onVolumeCommit = React.useCallback( (value: number[]) => { const volume = value[0] ?? 0 if (store.getState().dragging) { store.setState('dragging', false) } dispatch({ type: MediaActionTypes.MEDIA_VOLUME_REQUEST, detail: volume, }) }, [dispatch, store] ) const effectiveVolume = mediaMuted ? 0 : mediaVolume return (

) } interface MediaPlayerTimeProps extends React.ComponentProps<'div'> { variant?: 'progress' | 'remaining' | 'duration' asChild?: boolean } function MediaPlayerTime(props: MediaPlayerTimeProps) { const { variant = 'progress', asChild, className, ...timeProps } = props const context = useMediaPlayerContext('MediaPlayerTime') const mediaCurrentTime = useMediaSelector( (state) => state.mediaCurrentTime ?? 0 ) const [, seekableEnd = 0] = useMediaSelector( (state) => state.mediaSeekable ?? [0, 0] ) const times = React.useMemo(() => { if (variant === 'remaining') { return { remaining: timeUtils.formatTime( seekableEnd - mediaCurrentTime, seekableEnd ), } } if (variant === 'duration') { return { duration: timeUtils.formatTime(seekableEnd, seekableEnd), } } return { current: timeUtils.formatTime(mediaCurrentTime, seekableEnd), duration: timeUtils.formatTime(seekableEnd, seekableEnd), } }, [variant, mediaCurrentTime, seekableEnd]) const TimePrimitive = asChild ? Slot : 'div' if (variant === 'remaining' || variant === 'duration') { return ( {times[variant]} ) } return ( {times.current} {times.duration} ) } interface MediaPlayerPlaybackSpeedProps extends React.ComponentProps, React.ComponentProps, Omit, 'dir'>, Pick, 'sideOffset'> { speeds?: number[] } function MediaPlayerPlaybackSpeed(props: MediaPlayerPlaybackSpeedProps) { const { open, defaultOpen, onOpenChange: onOpenChangeProp, sideOffset = FLOATING_MENU_SIDE_OFFSET, speeds = SPEEDS, modal = false, className, disabled, ...playbackSpeedProps } = props const context = useMediaPlayerContext(PLAYBACK_SPEED_NAME) const store = useStoreContext(PLAYBACK_SPEED_NAME) const dispatch = useMediaDispatch() const mediaPlaybackRate = useMediaSelector( (state) => state.mediaPlaybackRate ?? 1 ) const isDisabled = disabled || context.disabled const onPlaybackRateChange = React.useCallback( (rate: number) => { dispatch({ type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST, detail: rate, }) }, [dispatch] ) const onOpenChange = React.useCallback( (open: boolean) => { store.setState('menuOpen', open) onOpenChangeProp?.(open) }, [store.setState, onOpenChangeProp] ) return ( ']}> {speeds.map((speed) => ( onPlaybackRateChange(speed)} > {speed}x{mediaPlaybackRate === speed && } ))} ) } interface MediaPlayerLoopProps extends React.ComponentProps {} function MediaPlayerLoop(props: MediaPlayerLoopProps) { const { children, className, disabled, onClick, ...loopProps } = props const context = useMediaPlayerContext('MediaPlayerLoop') const isDisabled = disabled || context.disabled const [isLooping, setIsLooping] = React.useState(() => { const mediaElement = context.mediaRef.current return mediaElement?.loop ?? false }) React.useEffect(() => { const mediaElement = context.mediaRef.current if (!mediaElement) return setIsLooping(mediaElement.loop) const checkLoop = () => setIsLooping(mediaElement.loop) const observer = new MutationObserver(checkLoop) observer.observe(mediaElement, { attributes: true, attributeFilter: ['loop'], }) return () => observer.disconnect() }, [context.mediaRef]) const onLoopToggle = React.useCallback( (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented) return const mediaElement = context.mediaRef.current if (mediaElement) { const newLoopState = !mediaElement.loop mediaElement.loop = newLoopState setIsLooping(newLoopState) } }, [context.mediaRef, onClick] ) return ( ) } interface MediaPlayerFullscreenProps extends React.ComponentProps< typeof Button > {} function MediaPlayerFullscreen(props: MediaPlayerFullscreenProps) { const { children, className, disabled, onClick, ...fullscreenProps } = props const context = useMediaPlayerContext('MediaPlayerFullscreen') const dispatch = useMediaDispatch() const isFullscreen = useMediaSelector( (state) => state.mediaIsFullscreen ?? false ) const isDisabled = disabled || context.disabled const onFullscreen = React.useCallback( (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented) return dispatch({ type: isFullscreen ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST, }) }, [dispatch, onClick, isFullscreen] ) return ( ) } interface MediaPlayerPiPProps extends Omit< React.ComponentProps, 'children' > { children?: | React.ReactNode | ((isPictureInPicture: boolean) => React.ReactNode) onPipError?: (error: unknown, state: 'enter' | 'exit') => void } function MediaPlayerPiP(props: MediaPlayerPiPProps) { const { children, className, onPipError, disabled, onClick, ...pipButtonProps } = props const context = useMediaPlayerContext('MediaPlayerPiP') const dispatch = useMediaDispatch() const isPictureInPicture = useMediaSelector( (state) => state.mediaIsPip ?? false ) const isDisabled = disabled || context.disabled const onPictureInPicture = React.useCallback( (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented) return dispatch({ type: isPictureInPicture ? MediaActionTypes.MEDIA_EXIT_PIP_REQUEST : MediaActionTypes.MEDIA_ENTER_PIP_REQUEST, }) const mediaElement = context.mediaRef.current if (mediaElement instanceof HTMLVideoElement) { if (isPictureInPicture) { document.exitPictureInPicture().catch((error) => { onPipError?.(error, 'exit') }) } else { mediaElement.requestPictureInPicture().catch((error) => { onPipError?.(error, 'enter') }) } } }, [dispatch, onClick, isPictureInPicture, onPipError, context.mediaRef] ) return ( ) } function MediaPlayerCaptions(props: React.ComponentProps) { const { children, className, disabled, onClick, ...captionsProps } = props const context = useMediaPlayerContext('MediaPlayerCaptions') const dispatch = useMediaDispatch() const isSubtitlesActive = useMediaSelector( (state) => (state.mediaSubtitlesShowing ?? []).length > 0 ) const isDisabled = disabled || context.disabled const onCaptionsToggle = React.useCallback( (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented) return dispatch({ type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST, }) }, [dispatch, onClick] ) return ( ) } function MediaPlayerDownload(props: React.ComponentProps) { const { children, className, disabled, onClick, ...downloadProps } = props const context = useMediaPlayerContext('MediaPlayerDownload') const isDisabled = disabled || context.disabled const onDownload = React.useCallback( (event: React.MouseEvent) => { onClick?.(event) if (event.defaultPrevented) return const mediaElement = context.mediaRef.current if (!mediaElement || !mediaElement.currentSrc) return const link = document.createElement('a') link.href = mediaElement.currentSrc link.download = '' document.body.appendChild(link) link.click() document.body.removeChild(link) }, [context.mediaRef, onClick] ) return ( ) } interface MediaPlayerSettingsProps extends MediaPlayerPlaybackSpeedProps {} function MediaPlayerSettings(props: MediaPlayerSettingsProps) { const { open, defaultOpen, onOpenChange: onOpenChangeProp, sideOffset = FLOATING_MENU_SIDE_OFFSET, speeds = SPEEDS, modal = false, className, disabled, ...settingsProps } = props const context = useMediaPlayerContext(SETTINGS_NAME) const store = useStoreContext(SETTINGS_NAME) const dispatch = useMediaDispatch() const mediaPlaybackRate = useMediaSelector( (state) => state.mediaPlaybackRate ?? 1 ) const mediaSubtitlesList = useMediaSelector( (state) => state.mediaSubtitlesList ?? [] ) const mediaSubtitlesShowing = useMediaSelector( (state) => state.mediaSubtitlesShowing ?? [] ) const mediaRenditionList = useMediaSelector( (state) => state.mediaRenditionList ?? [] ) const selectedRenditionId = useMediaSelector( (state) => state.mediaRenditionSelected ) const isDisabled = disabled || context.disabled const isSubtitlesActive = mediaSubtitlesShowing.length > 0 const onPlaybackRateChange = React.useCallback( (rate: number) => { dispatch({ type: MediaActionTypes.MEDIA_PLAYBACK_RATE_REQUEST, detail: rate, }) }, [dispatch] ) const onRenditionChange = React.useCallback( (renditionId: string) => { dispatch({ type: MediaActionTypes.MEDIA_RENDITION_REQUEST, detail: renditionId === 'auto' ? undefined : renditionId, }) }, [dispatch] ) const onSubtitlesToggle = React.useCallback(() => { dispatch({ type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST, detail: false, }) }, [dispatch]) const onShowSubtitleTrack = React.useCallback( (subtitleTrack: (typeof mediaSubtitlesList)[number]) => { dispatch({ type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST, detail: false, }) dispatch({ type: MediaActionTypes.MEDIA_SHOW_SUBTITLES_REQUEST, detail: subtitleTrack, }) }, [dispatch] ) const selectedSubtitleLabel = React.useMemo(() => { if (!isSubtitlesActive) return 'Off' if (mediaSubtitlesShowing.length > 0) { return mediaSubtitlesShowing[0]?.label ?? 'On' } return 'Off' }, [isSubtitlesActive, mediaSubtitlesShowing]) const selectedRenditionLabel = React.useMemo(() => { if (!selectedRenditionId) return 'Auto' const currentRendition = mediaRenditionList?.find( (rendition) => rendition.id === selectedRenditionId ) if (!currentRendition) return 'Auto' if (currentRendition.height) return `${currentRendition.height}p` if (currentRendition.width) return `${currentRendition.width}p` return currentRendition.id ?? 'Auto' }, [selectedRenditionId, mediaRenditionList]) const onOpenChange = React.useCallback( (open: boolean) => { store.setState('menuOpen', open) onOpenChangeProp?.(open) }, [store.setState, onOpenChangeProp] ) return ( Settings Speed {mediaPlaybackRate}x {speeds.map((speed) => ( onPlaybackRateChange(speed)} > {speed}x{mediaPlaybackRate === speed && } ))} {context.isVideo && mediaRenditionList.length > 0 && ( Quality {selectedRenditionLabel} onRenditionChange('auto')} > Auto {!selectedRenditionId && } {mediaRenditionList .slice() .sort((a, b) => { const aHeight = a.height ?? 0 const bHeight = b.height ?? 0 return bHeight - aHeight }) .map((rendition) => { const label = rendition.height ? `${rendition.height}p` : rendition.width ? `${rendition.width}p` : (rendition.id ?? 'Unknown') const selected = rendition.id === selectedRenditionId return ( onRenditionChange(rendition.id ?? '')} > {label} {selected && } ) })} )} Captions {selectedSubtitleLabel} Off {!isSubtitlesActive && } {mediaSubtitlesList.map((subtitleTrack) => { const isSelected = mediaSubtitlesShowing.some( (showingSubtitle) => showingSubtitle.label === subtitleTrack.label ) return ( onShowSubtitleTrack(subtitleTrack)} > {subtitleTrack.label} {isSelected && } ) })} {mediaSubtitlesList.length === 0 && ( No captions available )} ) } interface MediaPlayerPortalProps { container?: Element | DocumentFragment | null children?: React.ReactNode } function MediaPlayerPortal(props: MediaPlayerPortalProps) { const { container: containerProp, children } = props const context = useMediaPlayerContext('MediaPlayerPortal') const container = containerProp ?? context.portalContainer if (!container) return null return ReactDOM.createPortal(children, container) } interface MediaPlayerTooltipProps extends React.ComponentProps, Pick, 'sideOffset'> { tooltip?: string shortcut?: string | string[] } function MediaPlayerTooltip(props: MediaPlayerTooltipProps) { const { tooltip, shortcut, delayDuration, sideOffset, children, ...tooltipProps } = props const context = useMediaPlayerContext('MediaPlayerTooltip') const tooltipDelayDuration = delayDuration ?? context.tooltipDelayDuration const tooltipSideOffset = sideOffset ?? context.tooltipSideOffset if ((!tooltip && !shortcut) || context.withoutTooltip) return <>{children} return ( {children}

{tooltip}

{Array.isArray(shortcut) ? (

{shortcut.map((shortcutKey) => ( {shortcutKey} ))}

) : ( shortcut && ( {shortcut} ) )} ) } export { MediaPlayer, MediaPlayerVideo, MediaPlayerAudio, MediaPlayerControls, MediaPlayerControlsOverlay, MediaPlayerLoading, MediaPlayerError, MediaPlayerVolumeIndicator, MediaPlayerPlay, MediaPlayerSeekBackward, MediaPlayerSeekForward, MediaPlayerSeek, MediaPlayerVolume, MediaPlayerTime, MediaPlayerPlaybackSpeed, MediaPlayerLoop, MediaPlayerFullscreen, MediaPlayerPiP, MediaPlayerCaptions, MediaPlayerDownload, MediaPlayerSettings, MediaPlayerPortal, MediaPlayerTooltip, // useMediaSelector as useMediaPlayer, useStore as useMediaPlayerStore, // type MediaPlayerProps, } 53:T736,import * as React from "react"; type PossibleRef = React.Ref | undefined; /** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */ function setRef(ref: PossibleRef, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { ref.current = value; } } /** * A utility to compose multiple refs together * Accepts callback refs and RefObject(s) */ function composeRefs(...refs: PossibleRef[]): React.RefCallback { return (node) => { let hasCleanup = false; const cleanups = refs.map((ref) => { const cleanup = setRef(ref, node); if (!hasCleanup && typeof cleanup === "function") { hasCleanup = true; } return cleanup; }); // React <19 will log an error to the console if a callback ref returns a // value. We don't use ref cleanups internally so this will only happen if a // user's ref callback returns a value, which we only expect if they are // using the cleanup functionality added in React 19. if (hasCleanup) { return () => { for (let i = 0; i < cleanups.length; i++) { const cleanup = cleanups[i]; if (typeof cleanup === "function") { cleanup(); } else { setRef(refs[i], null); } } }; } }; } /** * A custom hook that composes multiple refs * Accepts callback refs and RefObject(s) */ function useComposedRefs(...refs: PossibleRef[]): React.RefCallback { // biome-ignore lint/correctness/useExhaustiveDependencies: we want to memoize by all values // eslint-disable-next-line react-hooks/use-memo return React.useCallback(composeRefs(...refs), refs); } export { composeRefs, useComposedRefs }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","media-chrome",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/media-chrome","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"media-chrome"}]]}]}],["$","li","@radix-ui/react-direction",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-direction","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-direction"}]]}]}],["$","li","@radix-ui/react-slider",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slider","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slider"}]]}]}],["$","li","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@radix-ui/react-slot"}]]}]}]]}],["$","$L50",null,{"namespace":"@joyco","registryDependencies":["@joyco/badge","@joyco/button","@joyco/dropdown-menu","@joyco/tooltip","@joyco/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/media-player.tsx","content":"$52","type":"registry:ui"},{"path":"registry/lib/compose-refs.ts","content":"$53","type":"registry:lib"},{"path":"hooks/use-lazy-ref.ts","content":"import * as React from \"react\";\n\nfunction useLazyRef(fn: () => T) {\n const ref = React.useRef(null);\n\n if (ref.current === null) {\n ref.current = fn();\n }\n\n return ref as React.RefObject;\n}\n\nexport { useLazyRef };\n","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]