"use client"; 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 { Direction as DirectionPrimitive, Slider as SliderPrimitive, Slot as SlotPrimitive, } from "radix-ui"; import * as React from "react"; import * as ReactDOM from "react-dom"; import { useComposedRefs } from "@/lib/compose-refs"; import { cn } from "@/lib/utils"; import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref"; import { Badge } from "@/registry/bases/radix/ui/badge"; import { Button } from "@/registry/bases/radix/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "@/registry/bases/radix/ui/dropdown-menu"; import { Tooltip, TooltipContent, TooltipTrigger, } from "@/registry/bases/radix/ui/tooltip"; 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 { 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 = DirectionPrimitive.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 ? SlotPrimitive.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, ...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) => { props.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, props.onClick], ); const VideoPrimitive = asChild ? SlotPrimitive.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 ? SlotPrimitive.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 ? SlotPrimitive.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 ? SlotPrimitive.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 ? SlotPrimitive.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 ? SlotPrimitive.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 ? SlotPrimitive.Slot : "div"; return ( ); } function MediaPlayerPlay(props: React.ComponentProps) { const { children, className, disabled, ...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) => { props.onClick?.(event); if (event.defaultPrevented) return; dispatch({ type: mediaPaused ? MediaActionTypes.MEDIA_PLAY_REQUEST : MediaActionTypes.MEDIA_PAUSE_REQUEST, }); }, [dispatch, props.onClick, mediaPaused], ); return ( ); } interface MediaPlayerSeekBackwardProps extends React.ComponentProps { seconds?: number; } function MediaPlayerSeekBackward(props: MediaPlayerSeekBackwardProps) { const { seconds = SEEK_STEP_SHORT, children, className, disabled, ...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) => { props.onClick?.(event); if (event.defaultPrevented) return; dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: Math.max(0, mediaCurrentTime - seconds), }); }, [dispatch, props.onClick, mediaCurrentTime, seconds], ); return ( ); } interface MediaPlayerSeekForwardProps extends React.ComponentProps { seconds?: number; } function MediaPlayerSeekForward(props: MediaPlayerSeekForwardProps) { const { seconds = SEEK_STEP_LONG, children, className, disabled, ...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) => { props.onClick?.(event); if (event.defaultPrevented) return; dispatch({ type: MediaActionTypes.MEDIA_SEEK_REQUEST, detail: Math.min( seekableEnd ?? Number.POSITIVE_INFINITY, mediaCurrentTime + seconds, ), }); }, [dispatch, props.onClick, mediaCurrentTime, seekableEnd, seconds], ); return ( ); } interface SeekState { isHovering: boolean; pendingSeekTime: number | null; hasInitialPosition: boolean; } interface MediaPlayerSeekProps extends React.ComponentProps { 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 { 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 ? SlotPrimitive.Slot : "div"; if (variant === "remaining" || variant === "duration") { return ( {times[variant]} ); } return ( {times.current} {times.duration} ); } interface MediaPlayerPlaybackSpeedProps extends Omit, "dir">, Pick, "sideOffset">, React.ComponentProps, React.ComponentProps { 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, ...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) => { props.onClick?.(event); if (event.defaultPrevented) return; const mediaElement = context.mediaRef.current; if (mediaElement) { const newLoopState = !mediaElement.loop; mediaElement.loop = newLoopState; setIsLooping(newLoopState); } }, [context.mediaRef, props.onClick], ); return ( ); } interface MediaPlayerFullscreenProps extends React.ComponentProps {} function MediaPlayerFullscreen(props: MediaPlayerFullscreenProps) { const { children, className, disabled, ...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) => { props.onClick?.(event); if (event.defaultPrevented) return; dispatch({ type: isFullscreen ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST, }); }, [dispatch, props.onClick, isFullscreen], ); return ( ); } interface MediaPlayerPiPProps extends Omit, "children"> { children?: | React.ReactNode | ((isPictureInPicture: boolean) => React.ReactNode); onPipError?: (error: unknown, state: "enter" | "exit") => void; } function MediaPlayerPiP(props: MediaPlayerPiPProps) { const { children, className, onPipError, disabled, ...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) => { props.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, props.onClick, isPictureInPicture, onPipError, context.mediaRef], ); return ( ); } function MediaPlayerCaptions(props: React.ComponentProps) { const { children, className, disabled, ...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) => { props.onClick?.(event); if (event.defaultPrevented) return; dispatch({ type: MediaActionTypes.MEDIA_TOGGLE_SUBTITLES_REQUEST, }); }, [dispatch, props.onClick], ); return ( ); } function MediaPlayerDownload(props: React.ComponentProps) { const { children, className, disabled, ...downloadProps } = props; const context = useMediaPlayerContext("MediaPlayerDownload"); const isDisabled = disabled || context.disabled; const onDownload = React.useCallback( (event: React.MouseEvent) => { props.onClick?.(event); if (event.defaultPrevented) return; const mediaElement = context.mediaRef.current; if (!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, props.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, MediaPlayerAudio, MediaPlayerCaptions, MediaPlayerControls, MediaPlayerControlsOverlay, MediaPlayerDownload, MediaPlayerError, MediaPlayerFullscreen, MediaPlayerLoading, MediaPlayerLoop, MediaPlayerPiP, MediaPlayerPlay, MediaPlayerPlaybackSpeed, MediaPlayerPortal, type MediaPlayerProps, MediaPlayerSeek, MediaPlayerSeekBackward, MediaPlayerSeekForward, MediaPlayerSettings, MediaPlayerTime, MediaPlayerTooltip, MediaPlayerVideo, MediaPlayerVolume, MediaPlayerVolumeIndicator, useMediaSelector as useMediaPlayer, useStore as useMediaPlayerStore, };

Media Player

Instalação

Dependências

Registry dependencies