@bazza-ui/react 0.1.0-canary.10 → 0.1.0-canary.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-5T5B5SPR.cjs.map +1 -1
- package/dist/chunk-JFEVUUPC.cjs.map +1 -1
- package/dist/chunk-M4G6J7DP.cjs.map +1 -1
- package/dist/chunk-SCDHQZFI.cjs.map +1 -1
- package/dist/chunk-W4ACKMIZ.cjs.map +1 -1
- package/dist/chunk-XMZZ62VJ.cjs.map +1 -1
- package/dist/combobox/index.cjs.map +1 -1
- package/dist/command-menu/index.cjs.map +1 -1
- package/dist/context-menu/index.cjs.map +1 -1
- package/dist/dropdown-menu/index.cjs +1 -1
- package/dist/dropdown-menu/index.cjs.map +1 -1
- package/dist/dropdown-menu/index.js +1 -1
- package/dist/dropdown-menu/index.js.map +1 -1
- package/dist/internal/listbox/index.cjs.map +1 -1
- package/dist/internal/popup-menu/index.cjs.map +1 -1
- package/dist/kbd/index.cjs.map +1 -1
- package/dist/loaders/index.cjs.map +1 -1
- package/dist/select/index.cjs +1 -1
- package/dist/select/index.cjs.map +1 -1
- package/dist/select/index.d.cts +22 -2
- package/dist/select/index.d.ts +22 -2
- package/dist/select/index.js +1 -1
- package/dist/select/index.js.map +1 -1
- package/dist/video-player/index.cjs.map +1 -1
- package/package.json +1 -1
|
@@ -1 +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","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"]}
|
|
1
|
+
{"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/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","bufferedPercentage","state","style"],"mappings":"AAAA,4/BAAyC,yDAA2C,kjCCE7D,IAGVA,EAAAA,CACL,EAAA,CAAA,aAAA,CAA8C,IAAI,CAAA,CAEnD,SAASC,CAAAA,CACdC,CAAAA,CACyB,CACzB,IAAMC,CAAAA,CAAgB,EAAA,CAAA,UAAA,CAAWH,EAAkB,CAAA,CACnD,EAAA,CAAI,CAACG,CAAAA,CACH,MAAM,IAAI,KAAA,CACR,CAAA,aAAA,EAAgBD,CAAS,CAAA,wCAAA,CAC3B,CAAA,CAEF,OAAOC,CACT,CCIO,SAASC,EAAAA,CAAAA,CAA0C,CACxD,OAAOH,CAAAA,CAAsB,gBAAgB,CAC/C,CCxBA,IAAAI,EAAAA,CAAA,CAAA,CAAA,CAAAC,iCAAAA,EAAAD,CAAA,CAAA,iBAAA,CAAA,CAAA,CAAA,EAAAE,EAAAA,CAAA,QAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,cAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,sBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,YAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,gBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,QAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,sBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,gBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,UAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,OAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,qBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,sBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,UAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,kBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,gBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,oBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,MAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,MAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,WAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,eAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,IAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,kBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,UAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,kBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,iBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,iBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,wBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,eAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,sBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,oCAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,wBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,6BAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,8BAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,kCAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,kBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,eAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,eAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,SAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,uBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,WAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,yBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,KAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,KAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,YAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,mBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,mBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,0BAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,iBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,iBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,iBAAA,CAAA,CAAA,CAAA,EAAAC,EAAAA,CAAA,mBAAA,CAAA,CAAA,CAAA,EAAAC,CAAAA,CAAA,cAAA,CAAA,CAAA,CAAA,EAAAtD,EAAAA,CAAAA,CAAAA,CCEA,+CAmFI,IArDSG,EAAAA,CAA0B,EAAA,CAAA,UAAA,CAGrC,QAAA,CAA2BoD,CAAAA,CAAOC,CAAAA,CAAc,CAChD,GAAM,CAAE,MAAA,CAAAC,CAAAA,CAAQ,GAAGC,CAAS,CAAA,CAAIH,CAAAA,CAC1BxD,CAAAA,CAAUF,CAAAA,CAAsB,mBAAmB,CAAA,CAGnD8D,CAAAA,CAAoB,EAAA,CAAA,OAAA,CAAQ,CAAA,CAAA,EAAM,CACtC,EAAA,CAAI,CAAC5D,CAAAA,CAAQ,QAAA,EAAYA,CAAAA,CAAQ,QAAA,CAAS,MAAA,GAAW,CAAA,CAAG,OAAO,CAAA,CAG/D,GAAA,CAAA,IAAS,CAAA,CAAI,CAAA,CAAG,CAAA,CAAIA,CAAAA,CAAQ,QAAA,CAAS,MAAA,CAAQ,CAAA,EAAA,CAC3C,EAAA,CACEA,CAAAA,CAAQ,QAAA,CAAS,KAAA,CAAM,CAAC,CAAA,EAAKA,CAAAA,CAAQ,WAAA,EACrCA,CAAAA,CAAQ,WAAA,EAAeA,CAAAA,CAAQ,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,CAE7C,OAAOA,CAAAA,CAAQ,QAAA,CAAS,GAAA,CAAI,CAAC,CAAA,CAKjC,OAAOA,CAAAA,CAAQ,QAAA,CAAS,GAAA,CAAI,CAAC,CAC/B,CAAA,CAAG,CAACA,CAAAA,CAAQ,QAAA,CAAUA,CAAAA,CAAQ,WAAW,CAAC,CAAA,CAEpC6D,CAAAA,CACJ7D,CAAAA,CAAQ,QAAA,CAAW,CAAA,CAAK4D,CAAAA,CAAc5D,CAAAA,CAAQ,QAAA,CAAY,GAAA,CAAM,CAAA,CAE5D8D,CAAAA,CAAgC,CACpC,QAAA,CAAU9D,CAAAA,CAAQ,QAAA,CAClB,QAAA,CAAUA,CAAAA,CAAQ,QAAA,CAClB,kBAAA,CAAA6D,CAAAA,CACA,WAAA,CAAAD,CACF,CAAA,CAGMG,CAAAA,CAAQ,CACZ,uBAAA,CAAyB,CAAA,EAAA;ACSb","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","'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"]}
|