@bazza-ui/react 0.1.0-canary.4 → 0.1.0-canary.6

package/dist/video-player/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/Users/kianbazza/repos/bazzalabs/ui/packages/react/dist/video-player/index.cjs","../../src/video-player/contexts/video-player-context.ts","../../src/video-player/hooks/use-video-player.ts","../../src/video-player/index.parts.ts","../../src/video-player/components/buffered-indicator/buffered-indicator.tsx","../../src/video-player/hooks/use-transition-status.ts"],"names":["VideoPlayerContext","useVideoPlayerContext","component","context","useVideoPlayer","index_parts_exports","__export","BufferedIndicator","Captions","CaptionsButton","CaptionsDataAttributes","CaptionsMenu","CaptionsMenuItem","Controls","ControlsDataAttributes","FullscreenButton","MuteButton","Overlay","OverlayDataAttributes","PictureInPictureButton","PlayButton","PlaybackRateButton","PlaybackRateMenu","PlaybackRateMenuItem","Portal","Poster","QualityMenu","QualityMenuItem","VideoPlayerRoot","RootDataAttributes","SeekSlider","SeekSliderBuffered","SeekSliderControl","SeekSliderCssVars","SeekSliderDataAttributes","SeekSliderHover","SeekSliderPreviewThumb","SeekSliderPreviewThumbDataAttributes","SeekSliderPreviewTooltip","SeekSliderPreviewTooltipPopup","SeekSliderPreviewTooltipPortal","SeekSliderPreviewTooltipPositioner","SeekSliderProgress","SeekSliderThumb","SeekSliderTrack","Thumbnail","ThumbnailDataAttributes","TimeDisplay","TimeDisplayDataAttributes","Track","Video","VolumeSlider","VolumeSliderControl","VolumeSliderCssVars","VolumeSliderDataAttributes","VolumeSliderRange","VolumeSliderThumb","VolumeSliderTrack","useTransitionStatus","props","forwardedRef","render","divProps","bufferedEnd","i","bufferedPercentage","state","style"],"mappings":"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","file":"/Users/kianbazza/repos/bazzalabs/ui/packages/react/dist/video-player/index.cjs","sourcesContent":[null,"'use client'\n\nimport * as React from 'react'\nimport type { VideoPlayerContextValue } from '../types.js'\n\nexport const VideoPlayerContext =\n  React.createContext<VideoPlayerContextValue | null>(null)\n\nexport function useVideoPlayerContext(\n  component: string,\n): VideoPlayerContextValue {\n  const context = React.useContext(VideoPlayerContext)\n  if (!context) {\n    throw new Error(\n      `<VideoPlayer.${component}> must be used within <VideoPlayer.Root>`,\n    )\n  }\n  return context\n}\n","'use client'\n\nimport { useVideoPlayerContext } from '../contexts/video-player-context.js'\nimport type { VideoPlayerContextValue } from '../types.js'\n\n/**\n * Hook to access the VideoPlayer context from custom components.\n *\n * @example\n * ```tsx\n * function CustomControl() {\n *   const { playing, toggle, currentTime, duration } = useVideoPlayer()\n *\n *   return (\n *     <div>\n *       {playing ? 'Playing' : 'Paused'} - {currentTime}s / {duration}s\n *       <button onClick={toggle}>Toggle</button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useVideoPlayer(): VideoPlayerContextValue {\n  return useVideoPlayerContext('useVideoPlayer')\n}\n","// ============================================================================\n// VideoPlayer Composable Parts\n// ============================================================================\n//\n// Import like: import * as VideoPlayer from './video-player/index.parts.js'\n//\n// Usage:\n// <VideoPlayer.Root>\n//   <VideoPlayer.Video src=\"...\" />\n//   <VideoPlayer.Controls>\n//     <VideoPlayer.PlayButton />\n//     <VideoPlayer.SeekSlider />\n//     <VideoPlayer.TimeDisplay />\n//   </VideoPlayer.Controls>\n// </VideoPlayer.Root>\n//\n\nexport { BufferedIndicator } from './components/buffered-indicator/buffered-indicator.js'\nexport { CaptionsDataAttributes } from './components/captions/captions.data-attributes.js'\nexport { Captions } from './components/captions/captions.js'\n// Captions\nexport { CaptionsButton } from './components/captions-button/captions-button.js'\nexport {\n  CaptionsMenu,\n  CaptionsMenuItem,\n} from './components/captions-menu/captions-menu.js'\nexport { ControlsDataAttributes } from './components/controls/controls.data-attributes.js'\nexport { Controls } from './components/controls/controls.js'\n// Display Controls\nexport { FullscreenButton } from './components/fullscreen-button/fullscreen-button.js'\nexport { MuteButton } from './components/mute-button/mute-button.js'\nexport { OverlayDataAttributes } from './components/overlay/overlay.data-attributes.js'\nexport { Overlay } from './components/overlay/overlay.js'\nexport { PictureInPictureButton } from './components/picture-in-picture-button/picture-in-picture-button.js'\n// Playback Controls\nexport { PlayButton } from './components/play-button/play-button.js'\n// Playback Rate\nexport { PlaybackRateButton } from './components/playback-rate-button/playback-rate-button.js'\nexport {\n  PlaybackRateMenu,\n  PlaybackRateMenuItem,\n} from './components/playback-rate-menu/playback-rate-menu.js'\n// Layout\nexport { Portal } from './components/portal/portal.js'\nexport { Poster } from './components/poster/poster.js'\n// Quality\nexport {\n  QualityMenu,\n  QualityMenuItem,\n} from './components/quality-menu/quality-menu.js'\n// Data Attributes & CSS Variables\nexport { RootDataAttributes } from './components/root/root.data-attributes.js'\n// Core\nexport { VideoPlayerRoot as Root } from './components/root/root.js'\nexport { SeekSliderCssVars } from './components/seek-slider/seek-slider.css-vars.js'\nexport { SeekSliderDataAttributes } from './components/seek-slider/seek-slider.data-attributes.js'\nexport {\n  SeekSlider,\n  SeekSliderBuffered,\n  SeekSliderControl,\n  SeekSliderHover,\n  SeekSliderPreviewThumb,\n  SeekSliderPreviewTooltip,\n  SeekSliderPreviewTooltipPopup,\n  SeekSliderPreviewTooltipPortal,\n  SeekSliderPreviewTooltipPositioner,\n  SeekSliderProgress,\n  SeekSliderThumb,\n  SeekSliderTrack,\n} from './components/seek-slider/seek-slider.js'\nexport { SeekSliderPreviewThumbDataAttributes } from './components/seek-slider/seek-slider-preview-thumb.data-attributes.js'\nexport { ThumbnailDataAttributes } from './components/thumbnail/thumbnail.data-attributes.js'\nexport { Thumbnail } from './components/thumbnail/thumbnail.js'\nexport { TimeDisplayDataAttributes } from './components/time-display/time-display.data-attributes.js'\nexport { TimeDisplay } from './components/time-display/time-display.js'\nexport { Track } from './components/track/track.js'\nexport { Video } from './components/video/video.js'\nexport { VolumeSliderCssVars } from './components/volume-slider/volume-slider.css-vars.js'\nexport { VolumeSliderDataAttributes } from './components/volume-slider/volume-slider.data-attributes.js'\n// Audio Controls\nexport {\n  VolumeSlider,\n  VolumeSliderControl,\n  VolumeSliderRange,\n  VolumeSliderThumb,\n  VolumeSliderTrack,\n} from './components/volume-slider/volume-slider.js'\nexport {\n  type TransitionStatus,\n  type UseTransitionStatusOptions,\n  type UseTransitionStatusReturn,\n  useTransitionStatus,\n} from './hooks/use-transition-status.js'\n// Hooks\nexport { useVideoPlayer } from './hooks/use-video-player.js'\n// Types\nexport type {\n  PlaybackIntent,\n  PlaybackStatus,\n  RenderProp,\n  TrackInfo,\n  VideoPlayerActions,\n  VideoPlayerContextValue,\n  VideoPlayerRootProps,\n  VideoPlayerState,\n  VideoQuality,\n  VideoTextTrack,\n} from './types.js'\n","'use client'\n\nimport * as React from 'react'\nimport { useVideoPlayerContext } from '../../contexts/video-player-context.js'\nimport type { RenderProp } from '../../types.js'\n\n// ============================================================================\n// BufferedIndicator Props\n// ============================================================================\n\nexport interface BufferedIndicatorProps\n  extends React.ComponentPropsWithRef<'div'> {\n  render?: RenderProp<BufferedIndicatorRenderProps, BufferedIndicatorState>\n}\n\nexport interface BufferedIndicatorRenderProps {\n  ref: React.Ref<HTMLElement>\n  style: React.CSSProperties\n  'aria-hidden': true\n}\n\nexport interface BufferedIndicatorState {\n  buffered: TimeRanges | null\n  duration: number\n  bufferedPercentage: number\n  bufferedEnd: number\n}\n\n// ============================================================================\n// BufferedIndicator Component\n// ============================================================================\n\nexport const BufferedIndicator = React.forwardRef<\n  HTMLDivElement,\n  BufferedIndicatorProps\n>(function BufferedIndicator(props, forwardedRef) {\n  const { render, ...divProps } = props\n  const context = useVideoPlayerContext('BufferedIndicator')\n\n  // Calculate buffered end position (for progress bar display)\n  const bufferedEnd = React.useMemo(() => {\n    if (!context.buffered || context.buffered.length === 0) return 0\n\n    // Find the buffer range that contains current playback position\n    for (let i = 0; i < context.buffered.length; i++) {\n      if (\n        context.buffered.start(i) <= context.currentTime &&\n        context.currentTime <= context.buffered.end(i)\n      ) {\n        return context.buffered.end(i)\n      }\n    }\n\n    // Fallback to end of first range\n    return context.buffered.end(0)\n  }, [context.buffered, context.currentTime])\n\n  const bufferedPercentage =\n    context.duration > 0 ? (bufferedEnd / context.duration) * 100 : 0\n\n  const state: BufferedIndicatorState = {\n    buffered: context.buffered,\n    duration: context.duration,\n    bufferedPercentage,\n    bufferedEnd,\n  }\n\n  // CSS custom properties for styling\n  const style = {\n    '--buffered-percentage': `${bufferedPercentage}%`,\n    '--buffered-end': bufferedEnd,\n    ...divProps.style,\n  } as React.CSSProperties\n\n  const renderProps: BufferedIndicatorRenderProps = {\n    ref: forwardedRef,\n    style,\n    'aria-hidden': true,\n  }\n\n  if (render) {\n    return render(renderProps, state)\n  }\n\n  return (\n    <div ref={forwardedRef} aria-hidden=\"true\" {...divProps} style={style} />\n  )\n})\n\n// ============================================================================\n// Namespace\n// ============================================================================\n\nexport namespace BufferedIndicator {\n  export type Props = BufferedIndicatorProps\n  export type State = BufferedIndicatorState\n}\n","'use client'\n\nimport * as React from 'react'\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type TransitionStatus = 'starting' | 'ending' | undefined\n\nexport interface UseTransitionStatusOptions {\n  /**\n   * Whether the element should be visible/open.\n   */\n  open: boolean\n  /**\n   * Keep the element always mounted in the DOM, even when closed.\n   * Only needed for JavaScript animation libraries (e.g., Framer Motion).\n   * CSS transitions and animations work automatically without this.\n   * @default false\n   */\n  keepMounted?: boolean\n}\n\nexport interface UseTransitionStatusReturn {\n  /**\n   * Whether the element should be rendered in the DOM.\n   * Stays true during exit animations.\n   */\n  mounted: boolean\n  /**\n   * Current transition status:\n   * - 'starting': First frame of enter animation\n   * - 'ending': Exit animation in progress\n   * - undefined: Idle state\n   */\n  transitionStatus: TransitionStatus\n  /**\n   * Ref to attach to the animated element.\n   * Used to detect when CSS animations/transitions complete.\n   */\n  elementRef: React.RefObject<HTMLElement | null>\n}\n\n// ============================================================================\n// Utility: Wait for Animations\n// ============================================================================\n\n/**\n * Returns a promise that resolves when all CSS animations and transitions\n * on the element and its descendants have completed.\n */\nfunction waitForAnimations(element: HTMLElement): Promise<void> {\n  // Collect animations from the element and all descendants\n  const animations = [\n    ...element.getAnimations(),\n    ...Array.from(element.querySelectorAll('*')).flatMap((el) =>\n      (el as HTMLElement).getAnimations(),\n    ),\n  ]\n\n  if (animations.length === 0) {\n    return Promise.resolve()\n  }\n  return Promise.all(animations.map((a) => a.finished))\n    .then(() => {})\n    .catch(() => {\n      // Animation was cancelled (e.g., element removed or animation interrupted)\n    })\n}\n\n// ============================================================================\n// Hook: useTransitionStatus\n// ============================================================================\n\nexport function useTransitionStatus(\n  options: UseTransitionStatusOptions,\n): UseTransitionStatusReturn {\n  const { open, keepMounted = false } = options\n\n  const [mounted, setMounted] = React.useState(open || keepMounted)\n  const [transitionStatus, setTransitionStatus] =\n    React.useState<TransitionStatus>(open ? 'starting' : undefined)\n\n  const elementRef = React.useRef<HTMLElement | null>(null)\n\n  // Track if we're currently waiting for animations\n  const waitingForAnimationsRef = React.useRef(false)\n\n  // Handle open → true (enter)\n  React.useEffect(() => {\n    if (open) {\n      // Cancel any pending exit\n      waitingForAnimationsRef.current = false\n\n      setMounted(true)\n      setTransitionStatus('starting')\n\n      // Clear starting style after first paint (double RAF for reliability)\n      const raf = requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          setTransitionStatus(undefined)\n        })\n      })\n\n      return () => cancelAnimationFrame(raf)\n    }\n  }, [open])\n\n  // Handle open → false (exit)\n  React.useEffect(() => {\n    if (!open && mounted && !waitingForAnimationsRef.current) {\n      setTransitionStatus('ending')\n\n      const element = elementRef.current\n\n      if (!element) {\n        // No element ref, unmount immediately\n        setTransitionStatus(undefined)\n        if (!keepMounted) {\n          setMounted(false)\n        }\n        return\n      }\n\n      waitingForAnimationsRef.current = true\n\n      // Wait a frame for the browser to process style changes and start animations\n      const raf = requestAnimationFrame(() => {\n        // Double RAF for reliability (like enter animation)\n        requestAnimationFrame(() => {\n          waitForAnimations(element).then(() => {\n            // Check if we're still supposed to be unmounting\n            // (user might have re-opened during animation)\n            if (!waitingForAnimationsRef.current) return\n\n            waitingForAnimationsRef.current = false\n            setTransitionStatus(undefined)\n\n            if (!keepMounted) {\n              setMounted(false)\n            }\n          })\n        })\n      })\n\n      return () => {\n        cancelAnimationFrame(raf)\n      }\n    }\n  }, [open, mounted, keepMounted])\n\n  // Handle keepMounted change\n  React.useEffect(() => {\n    if (keepMounted && !mounted && !open) {\n      setMounted(true)\n    }\n  }, [keepMounted, mounted, open])\n\n  return {\n    mounted: mounted || keepMounted,\n    transitionStatus,\n    elementRef,\n  }\n}\n"]}
+{"version":3,"sources":["/home/runner/work/ui/ui/packages/react/dist/video-player/index.cjs","../../src/video-player/contexts/video-player-context.ts","../../src/video-player/hooks/use-video-player.ts","../../src/video-player/index.parts.ts","../../src/video-player/components/buffered-indicator/buffered-indicator.tsx","../../src/video-player/components/controls/controls.data-attributes.ts"],"names":["VideoPlayerContext","useVideoPlayerContext","component","context","useVideoPlayer","index_parts_exports","__export","BufferedIndicator","Captions","CaptionsButton","CaptionsDataAttributes","CaptionsMenu","CaptionsMenuItem","Controls","ControlsDataAttributes","FullscreenButton","MuteButton","Overlay","OverlayDataAttributes","PictureInPictureButton","PlayButton","PlaybackRateButton","PlaybackRateMenu","PlaybackRateMenuItem","Portal","Poster","QualityMenu","QualityMenuItem","VideoPlayerRoot","RootDataAttributes","SeekSlider","SeekSliderBuffered","SeekSliderControl","SeekSliderCssVars","SeekSliderDataAttributes","SeekSliderHover","SeekSliderPreviewThumb","SeekSliderPreviewThumbDataAttributes","SeekSliderPreviewTooltip","SeekSliderPreviewTooltipPopup","SeekSliderPreviewTooltipPortal","SeekSliderPreviewTooltipPositioner","SeekSliderProgress","SeekSliderThumb","SeekSliderTrack","Thumbnail","ThumbnailDataAttributes","TimeDisplay","TimeDisplayDataAttributes","Track","Video","VolumeSlider","VolumeSliderControl","VolumeSliderCssVars","VolumeSliderDataAttributes","VolumeSliderRange","VolumeSliderThumb","VolumeSliderTrack","useTransitionStatus","props","forwardedRef","render","divProps","bufferedEnd","bufferedPercentage","state","style"],"mappings":"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","file":"/home/runner/work/ui/ui/packages/react/dist/video-player/index.cjs","sourcesContent":[null,"'use client'\n\nimport * as React from 'react'\nimport type { VideoPlayerContextValue } from '../types.js'\n\nexport const VideoPlayerContext =\n  React.createContext<VideoPlayerContextValue | null>(null)\n\nexport function useVideoPlayerContext(\n  component: string,\n): VideoPlayerContextValue {\n  const context = React.useContext(VideoPlayerContext)\n  if (!context) {\n    throw new Error(\n      `<VideoPlayer.${component}> must be used within <VideoPlayer.Root>`,\n    )\n  }\n  return context\n}\n","'use client'\n\nimport { useVideoPlayerContext } from '../contexts/video-player-context.js'\nimport type { VideoPlayerContextValue } from '../types.js'\n\n/**\n * Hook to access the VideoPlayer context from custom components.\n *\n * @example\n * ```tsx\n * function CustomControl() {\n *   const { playing, toggle, currentTime, duration } = useVideoPlayer()\n *\n *   return (\n *     <div>\n *       {playing ? 'Playing' : 'Paused'} - {currentTime}s / {duration}s\n *       <button onClick={toggle}>Toggle</button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useVideoPlayer(): VideoPlayerContextValue {\n  return useVideoPlayerContext('useVideoPlayer')\n}\n","// ============================================================================\n// VideoPlayer Composable Parts\n// ============================================================================\n//\n// Import like: import * as VideoPlayer from './video-player/index.parts.js'\n//\n// Usage:\n// <VideoPlayer.Root>\n//   <VideoPlayer.Video src=\"...\" />\n//   <VideoPlayer.Controls>\n//     <VideoPlayer.PlayButton />\n//     <VideoPlayer.SeekSlider />\n//     <VideoPlayer.TimeDisplay />\n//   </VideoPlayer.Controls>\n// </VideoPlayer.Root>\n//\n\nexport { BufferedIndicator } from './components/buffered-indicator/buffered-indicator.js'\nexport { CaptionsDataAttributes } from './components/captions/captions.data-attributes.js'\nexport { Captions } from './components/captions/captions.js'\n// Captions\nexport { CaptionsButton } from './components/captions-button/captions-button.js'\nexport {\n  CaptionsMenu,\n  CaptionsMenuItem,\n} from './components/captions-menu/captions-menu.js'\nexport { ControlsDataAttributes } from './components/controls/controls.data-attributes.js'\nexport { Controls } from './components/controls/controls.js'\n// Display Controls\nexport { FullscreenButton } from './components/fullscreen-button/fullscreen-button.js'\nexport { MuteButton } from './components/mute-button/mute-button.js'\nexport { OverlayDataAttributes } from './components/overlay/overlay.data-attributes.js'\nexport { Overlay } from './components/overlay/overlay.js'\nexport { PictureInPictureButton } from './components/picture-in-picture-button/picture-in-picture-button.js'\n// Playback Controls\nexport { PlayButton } from './components/play-button/play-button.js'\n// Playback Rate\nexport { PlaybackRateButton } from './components/playback-rate-button/playback-rate-button.js'\nexport {\n  PlaybackRateMenu,\n  PlaybackRateMenuItem,\n} from './components/playback-rate-menu/playback-rate-menu.js'\n// Layout\nexport { Portal } from './components/portal/portal.js'\nexport { Poster } from './components/poster/poster.js'\n// Quality\nexport {\n  QualityMenu,\n  QualityMenuItem,\n} from './components/quality-menu/quality-menu.js'\n// Data Attributes & CSS Variables\nexport { RootDataAttributes } from './components/root/root.data-attributes.js'\n// Core\nexport { VideoPlayerRoot as Root } from './components/root/root.js'\nexport { SeekSliderCssVars } from './components/seek-slider/seek-slider.css-vars.js'\nexport { SeekSliderDataAttributes } from './components/seek-slider/seek-slider.data-attributes.js'\nexport {\n  SeekSlider,\n  SeekSliderBuffered,\n  SeekSliderControl,\n  SeekSliderHover,\n  SeekSliderPreviewThumb,\n  SeekSliderPreviewTooltip,\n  SeekSliderPreviewTooltipPopup,\n  SeekSliderPreviewTooltipPortal,\n  SeekSliderPreviewTooltipPositioner,\n  SeekSliderProgress,\n  SeekSliderThumb,\n  SeekSliderTrack,\n} from './components/seek-slider/seek-slider.js'\nexport { SeekSliderPreviewThumbDataAttributes } from './components/seek-slider/seek-slider-preview-thumb.data-attributes.js'\nexport { ThumbnailDataAttributes } from './components/thumbnail/thumbnail.data-attributes.js'\nexport { Thumbnail } from './components/thumbnail/thumbnail.js'\nexport { TimeDisplayDataAttributes } from './components/time-display/time-display.data-attributes.js'\nexport { TimeDisplay } from './components/time-display/time-display.js'\nexport { Track } from './components/track/track.js'\nexport { Video } from './components/video/video.js'\nexport { VolumeSliderCssVars } from './components/volume-slider/volume-slider.css-vars.js'\nexport { VolumeSliderDataAttributes } from './components/volume-slider/volume-slider.data-attributes.js'\n// Audio Controls\nexport {\n  VolumeSlider,\n  VolumeSliderControl,\n  VolumeSliderRange,\n  VolumeSliderThumb,\n  VolumeSliderTrack,\n} from './components/volume-slider/volume-slider.js'\nexport {\n  type TransitionStatus,\n  type UseTransitionStatusOptions,\n  type UseTransitionStatusReturn,\n  useTransitionStatus,\n} from './hooks/use-transition-status.js'\n// Hooks\nexport { useVideoPlayer } from './hooks/use-video-player.js'\n// Types\nexport type {\n  PlaybackIntent,\n  PlaybackStatus,\n  RenderProp,\n  TrackInfo,\n  VideoPlayerActions,\n  VideoPlayerContextValue,\n  VideoPlayerRootProps,\n  VideoPlayerState,\n  VideoQuality,\n  VideoTextTrack,\n} from './types.js'\n","'use client'\n\nimport * as React from 'react'\nimport { useVideoPlayerContext } from '../../contexts/video-player-context.js'\nimport type { RenderProp } from '../../types.js'\n\n// ============================================================================\n// BufferedIndicator Props\n// ============================================================================\n\nexport interface BufferedIndicatorProps\n  extends React.ComponentPropsWithRef<'div'> {\n  render?: RenderProp<BufferedIndicatorRenderProps, BufferedIndicatorState>\n}\n\nexport interface BufferedIndicatorRenderProps {\n  ref: React.Ref<HTMLElement>\n  style: React.CSSProperties\n  'aria-hidden': true\n}\n\nexport interface BufferedIndicatorState {\n  buffered: TimeRanges | null\n  duration: number\n  bufferedPercentage: number\n  bufferedEnd: number\n}\n\n// ============================================================================\n// BufferedIndicator Component\n// ============================================================================\n\nexport const BufferedIndicator = React.forwardRef<\n  HTMLDivElement,\n  BufferedIndicatorProps\n>(function BufferedIndicator(props, forwardedRef) {\n  const { render, ...divProps } = props\n  const context = useVideoPlayerContext('BufferedIndicator')\n\n  // Calculate buffered end position (for progress bar display)\n  const bufferedEnd = React.useMemo(() => {\n    if (!context.buffered || context.buffered.length === 0) return 0\n\n    // Find the buffer range that contains current playback position\n    for (let i = 0; i < context.buffered.length; i++) {\n      if (\n        context.buffered.start(i) <= context.currentTime &&\n        context.currentTime <= context.buffered.end(i)\n      ) {\n        return context.buffered.end(i)\n      }\n    }\n\n    // Fallback to end of first range\n    return context.buffered.end(0)\n  }, [context.buffered, context.currentTime])\n\n  const bufferedPercentage =\n    context.duration > 0 ? (bufferedEnd / context.duration) * 100 : 0\n\n  const state: BufferedIndicatorState = {\n    buffered: context.buffered,\n    duration: context.duration,\n    bufferedPercentage,\n    bufferedEnd,\n  }\n\n  // CSS custom properties for styling\n  const style = {\n    '--buffered-percentage': `${bufferedPercentage}%`,\n    '--buffered-end': bufferedEnd,\n    ...divProps.style,\n  } as React.CSSProperties\n\n  const renderProps: BufferedIndicatorRenderProps = {\n    ref: forwardedRef,\n    style,\n    'aria-hidden': true,\n  }\n\n  if (render) {\n    return render(renderProps, state)\n  }\n\n  return (\n    <div ref={forwardedRef} aria-hidden=\"true\" {...divProps} style={style} />\n  )\n})\n\n// ============================================================================\n// Namespace\n// ============================================================================\n\nexport namespace BufferedIndicator {\n  export type Props = BufferedIndicatorProps\n  export type State = BufferedIndicatorState\n}\n","export enum ControlsDataAttributes {\n  /** Applied when the controls are visible. */\n  open = 'data-open',\n  /** Applied when the controls are hidden. */\n  closed = 'data-closed',\n  /** Applied when the player is idle (no user interaction). */\n  idle = 'data-idle',\n  /** Applied when the video is playing. */\n  playing = 'data-playing',\n  /** Applied when the video is paused. */\n  paused = 'data-paused',\n  /** Applied when the video has ended. */\n  ended = 'data-ended',\n  /** Applied on the first frame when entering. Use for CSS enter animations. */\n  startingStyle = 'data-starting-style',\n  /** Applied during exit animation. Use for CSS exit animations. */\n  endingStyle = 'data-ending-style',\n}\n"]}

package/dist/video-player/index.d.cts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { W as WithPreventableBaseHandlers } from '../types-DT4FOOa2.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _base_ui_react_slider from '@base-ui/react/slider';
 import { Slider } from '@base-ui/react/slider';
@@ -134,6 +135,7 @@ interface VideoPlayerInternalHandlers {
     onSeeked: () => void;
     onVolumeChange: () => void;
     onLoadedMetadata: () => void;
+    onVideoMount: () => void;
     onRootMouseLeave: () => void;
 }
 interface VideoPlayerContextValue extends VideoPlayerState, VideoPlayerActions {
@@ -149,7 +151,7 @@ interface VideoPlayerExternalActions {
     setVolume: (volume: number) => void;
     toggleFullscreen: () => Promise<void>;
 }
-type DivPropsWithoutConflicts = Omit<React.ComponentPropsWithRef<'div'>, 'onVolumeChange' | 'onEnded' | 'onWaiting' | 'onSeeking' | 'onSeeked'>;
+type DivPropsWithoutConflicts = Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'div'>>, 'onVolumeChange' | 'onEnded' | 'onWaiting' | 'onSeeking' | 'onSeeked'>;
 interface VideoPlayerRootProps extends DivPropsWithoutConflicts {
     /**
      * Ref to expose programmatic control actions.
@@ -165,6 +167,11 @@ interface VideoPlayerRootProps extends DivPropsWithoutConflicts {
      */
     keyboardShortcuts?: 'focused' | 'global' | 'none';
     defaultPlaying?: boolean;
+    /**
+     * Attempts to start playback automatically when the video element mounts.
+     * @default false
+     */
+    autoPlay?: boolean;
     defaultVolume?: number;
     defaultMuted?: boolean;
     defaultPlaybackRate?: number;
@@ -354,12 +361,12 @@ declare enum CaptionsButtonDataAttributes {
     available = "data-available"
 }
 
-interface CaptionsButtonProps extends React.ComponentPropsWithRef<'button'> {
+interface CaptionsButtonProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     render?: RenderProp<CaptionsButtonRenderProps, CaptionsButtonState>;
 }
 interface CaptionsButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     'aria-pressed': boolean;
     disabled: boolean;
@@ -396,7 +403,7 @@ interface CaptionsMenuState {
     registeredTracks: TrackInfo[];
     activeTextTrack: TextTrack | null;
 }
-interface CaptionsMenuItemProps extends React.ComponentPropsWithRef<'button'> {
+interface CaptionsMenuItemProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     track: TextTrack | null;
 }
 declare const CaptionsMenuItem: React.ForwardRefExoticComponent<Omit<CaptionsMenuItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -476,13 +483,13 @@ declare enum FullscreenButtonDataAttributes {
     supported = "data-supported"
 }
 
-interface FullscreenButtonProps extends Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface FullscreenButtonProps extends Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>>, 'children'> {
     render?: RenderProp<FullscreenButtonRenderProps, FullscreenButtonState>;
     children?: React.ReactNode;
 }
 interface FullscreenButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     'aria-pressed': boolean;
     disabled: boolean;
@@ -514,12 +521,12 @@ declare enum MuteButtonDataAttributes {
     volumeHigh = "data-volume-high"
 }
 
-interface MuteButtonProps extends React.ComponentPropsWithRef<'button'> {
+interface MuteButtonProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     render?: RenderProp<MuteButtonRenderProps, MuteButtonState>;
 }
 interface MuteButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     'aria-pressed': boolean;
     [MuteButtonDataAttributes.muted]?: boolean;
@@ -564,7 +571,7 @@ declare enum OverlayDataAttributes {
     endingStyle = "data-ending-style"
 }
 
-interface OverlayProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+interface OverlayProps extends Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'div'>>, 'children'> {
     /**
      * Delay before hiding after player becomes idle (ms).
      * Defaults to Root's idleTimeout. Set to 0 to disable auto-hide.
@@ -620,12 +627,12 @@ declare enum PictureInPictureButtonDataAttributes {
     supported = "data-supported"
 }
 
-interface PictureInPictureButtonProps extends React.ComponentPropsWithRef<'button'> {
+interface PictureInPictureButtonProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     render?: RenderProp<PictureInPictureButtonRenderProps, PictureInPictureButtonState>;
 }
 interface PictureInPictureButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     'aria-pressed': boolean;
     disabled: boolean;
@@ -654,13 +661,13 @@ declare enum PlayButtonDataAttributes {
     waiting = "data-waiting"
 }
 
-interface PlayButtonProps extends Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface PlayButtonProps extends Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>>, 'children'> {
     render?: RenderProp<PlayButtonRenderProps, PlayButtonState>;
     children?: React.ReactNode;
 }
 interface PlayButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     [PlayButtonDataAttributes.playing]?: boolean;
     [PlayButtonDataAttributes.paused]?: boolean;
@@ -686,7 +693,7 @@ declare enum PlaybackRateButtonDataAttributes {
     rate = "data-rate"
 }
 
-interface PlaybackRateButtonProps extends React.ComponentPropsWithRef<'button'> {
+interface PlaybackRateButtonProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     /**
      * Available playback rates to cycle through.
      * @default [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
@@ -696,7 +703,7 @@ interface PlaybackRateButtonProps extends React.ComponentPropsWithRef<'button'>
 }
 interface PlaybackRateButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     [PlaybackRateButtonDataAttributes.rate]: number;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -734,7 +741,7 @@ interface PlaybackRateMenuState {
     playbackRate: number;
     rates: readonly number[];
 }
-interface PlaybackRateMenuItemProps extends React.ComponentPropsWithRef<'button'> {
+interface PlaybackRateMenuItemProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     rate: number;
 }
 declare const PlaybackRateMenuItem: React.ForwardRefExoticComponent<Omit<PlaybackRateMenuItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -818,7 +825,7 @@ interface QualityMenuState {
     qualities: VideoQuality[];
     activeQuality: VideoQuality | null;
 }
-interface QualityMenuItemProps extends React.ComponentPropsWithRef<'button'> {
+interface QualityMenuItemProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     quality: VideoQuality;
 }
 declare const QualityMenuItem: React.ForwardRefExoticComponent<Omit<QualityMenuItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -1194,7 +1201,7 @@ declare namespace Track {
     type Props = TrackProps;
 }
 
-interface VideoProps extends Omit<React.ComponentPropsWithRef<'video'>, 'onTimeUpdate' | 'onDurationChange' | 'onProgress' | 'onPlay' | 'onPause' | 'onEnded' | 'onWaiting' | 'onCanPlay' | 'onSeeking' | 'onSeeked' | 'onVolumeChange' | 'onLoadedMetadata'> {
+interface VideoProps extends Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'video'>>, 'onTimeUpdate' | 'onDurationChange' | 'onProgress' | 'onPlay' | 'onPause' | 'onEnded' | 'onWaiting' | 'onCanPlay' | 'onSeeking' | 'onSeeked' | 'onVolumeChange' | 'onLoadedMetadata'> {
     /**
      * Toggle play/pause when clicking on the video.
      * @default true

package/dist/video-player/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { W as WithPreventableBaseHandlers } from '../types-DT4FOOa2.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _base_ui_react_slider from '@base-ui/react/slider';
 import { Slider } from '@base-ui/react/slider';
@@ -134,6 +135,7 @@ interface VideoPlayerInternalHandlers {
     onSeeked: () => void;
     onVolumeChange: () => void;
     onLoadedMetadata: () => void;
+    onVideoMount: () => void;
     onRootMouseLeave: () => void;
 }
 interface VideoPlayerContextValue extends VideoPlayerState, VideoPlayerActions {
@@ -149,7 +151,7 @@ interface VideoPlayerExternalActions {
     setVolume: (volume: number) => void;
     toggleFullscreen: () => Promise<void>;
 }
-type DivPropsWithoutConflicts = Omit<React.ComponentPropsWithRef<'div'>, 'onVolumeChange' | 'onEnded' | 'onWaiting' | 'onSeeking' | 'onSeeked'>;
+type DivPropsWithoutConflicts = Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'div'>>, 'onVolumeChange' | 'onEnded' | 'onWaiting' | 'onSeeking' | 'onSeeked'>;
 interface VideoPlayerRootProps extends DivPropsWithoutConflicts {
     /**
      * Ref to expose programmatic control actions.
@@ -165,6 +167,11 @@ interface VideoPlayerRootProps extends DivPropsWithoutConflicts {
      */
     keyboardShortcuts?: 'focused' | 'global' | 'none';
     defaultPlaying?: boolean;
+    /**
+     * Attempts to start playback automatically when the video element mounts.
+     * @default false
+     */
+    autoPlay?: boolean;
     defaultVolume?: number;
     defaultMuted?: boolean;
     defaultPlaybackRate?: number;
@@ -354,12 +361,12 @@ declare enum CaptionsButtonDataAttributes {
     available = "data-available"
 }
 
-interface CaptionsButtonProps extends React.ComponentPropsWithRef<'button'> {
+interface CaptionsButtonProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     render?: RenderProp<CaptionsButtonRenderProps, CaptionsButtonState>;
 }
 interface CaptionsButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     'aria-pressed': boolean;
     disabled: boolean;
@@ -396,7 +403,7 @@ interface CaptionsMenuState {
     registeredTracks: TrackInfo[];
     activeTextTrack: TextTrack | null;
 }
-interface CaptionsMenuItemProps extends React.ComponentPropsWithRef<'button'> {
+interface CaptionsMenuItemProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     track: TextTrack | null;
 }
 declare const CaptionsMenuItem: React.ForwardRefExoticComponent<Omit<CaptionsMenuItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -476,13 +483,13 @@ declare enum FullscreenButtonDataAttributes {
     supported = "data-supported"
 }
 
-interface FullscreenButtonProps extends Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface FullscreenButtonProps extends Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>>, 'children'> {
     render?: RenderProp<FullscreenButtonRenderProps, FullscreenButtonState>;
     children?: React.ReactNode;
 }
 interface FullscreenButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     'aria-pressed': boolean;
     disabled: boolean;
@@ -514,12 +521,12 @@ declare enum MuteButtonDataAttributes {
     volumeHigh = "data-volume-high"
 }
 
-interface MuteButtonProps extends React.ComponentPropsWithRef<'button'> {
+interface MuteButtonProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     render?: RenderProp<MuteButtonRenderProps, MuteButtonState>;
 }
 interface MuteButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     'aria-pressed': boolean;
     [MuteButtonDataAttributes.muted]?: boolean;
@@ -564,7 +571,7 @@ declare enum OverlayDataAttributes {
     endingStyle = "data-ending-style"
 }
 
-interface OverlayProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+interface OverlayProps extends Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'div'>>, 'children'> {
     /**
      * Delay before hiding after player becomes idle (ms).
      * Defaults to Root's idleTimeout. Set to 0 to disable auto-hide.
@@ -620,12 +627,12 @@ declare enum PictureInPictureButtonDataAttributes {
     supported = "data-supported"
 }
 
-interface PictureInPictureButtonProps extends React.ComponentPropsWithRef<'button'> {
+interface PictureInPictureButtonProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     render?: RenderProp<PictureInPictureButtonRenderProps, PictureInPictureButtonState>;
 }
 interface PictureInPictureButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     'aria-pressed': boolean;
     disabled: boolean;
@@ -654,13 +661,13 @@ declare enum PlayButtonDataAttributes {
     waiting = "data-waiting"
 }
 
-interface PlayButtonProps extends Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface PlayButtonProps extends Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>>, 'children'> {
     render?: RenderProp<PlayButtonRenderProps, PlayButtonState>;
     children?: React.ReactNode;
 }
 interface PlayButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     [PlayButtonDataAttributes.playing]?: boolean;
     [PlayButtonDataAttributes.paused]?: boolean;
@@ -686,7 +693,7 @@ declare enum PlaybackRateButtonDataAttributes {
     rate = "data-rate"
 }
 
-interface PlaybackRateButtonProps extends React.ComponentPropsWithRef<'button'> {
+interface PlaybackRateButtonProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     /**
      * Available playback rates to cycle through.
      * @default [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
@@ -696,7 +703,7 @@ interface PlaybackRateButtonProps extends React.ComponentPropsWithRef<'button'>
 }
 interface PlaybackRateButtonRenderProps {
     ref: React.Ref<HTMLButtonElement>;
-    type: 'button';
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     'aria-label': string;
     [PlaybackRateButtonDataAttributes.rate]: number;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -734,7 +741,7 @@ interface PlaybackRateMenuState {
     playbackRate: number;
     rates: readonly number[];
 }
-interface PlaybackRateMenuItemProps extends React.ComponentPropsWithRef<'button'> {
+interface PlaybackRateMenuItemProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     rate: number;
 }
 declare const PlaybackRateMenuItem: React.ForwardRefExoticComponent<Omit<PlaybackRateMenuItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -818,7 +825,7 @@ interface QualityMenuState {
     qualities: VideoQuality[];
     activeQuality: VideoQuality | null;
 }
-interface QualityMenuItemProps extends React.ComponentPropsWithRef<'button'> {
+interface QualityMenuItemProps extends WithPreventableBaseHandlers<React.ComponentPropsWithRef<'button'>> {
     quality: VideoQuality;
 }
 declare const QualityMenuItem: React.ForwardRefExoticComponent<Omit<QualityMenuItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
@@ -1194,7 +1201,7 @@ declare namespace Track {
     type Props = TrackProps;
 }
 
-interface VideoProps extends Omit<React.ComponentPropsWithRef<'video'>, 'onTimeUpdate' | 'onDurationChange' | 'onProgress' | 'onPlay' | 'onPause' | 'onEnded' | 'onWaiting' | 'onCanPlay' | 'onSeeking' | 'onSeeked' | 'onVolumeChange' | 'onLoadedMetadata'> {
+interface VideoProps extends Omit<WithPreventableBaseHandlers<React.ComponentPropsWithRef<'video'>>, 'onTimeUpdate' | 'onDurationChange' | 'onProgress' | 'onPlay' | 'onPause' | 'onEnded' | 'onWaiting' | 'onCanPlay' | 'onSeeking' | 'onSeeked' | 'onVolumeChange' | 'onLoadedMetadata'> {
     /**
      * Toggle play/pause when clicking on the video.
      * @default true