@videojs/react 0.1.0-preview.6 → 0.1.0-preview.8

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.
Files changed (17) hide show
  1. package/dist/{VolumeSlider-CWpLFzdJ.js → VolumeSlider-DmlupkvF.js} +341 -204
  2. package/dist/VolumeSlider-DmlupkvF.js.map +1 -0
  3. package/dist/{frosted-JuY6ZaAp.js → frosted-0lXuIgHt.js} +34 -38
  4. package/dist/frosted-0lXuIgHt.js.map +1 -0
  5. package/dist/index.d.ts +9 -37
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +3 -3
  8. package/dist/{minimal-pUeFJF1F.js → minimal-B-R9aRNe.js} +35 -38
  9. package/dist/minimal-B-R9aRNe.js.map +1 -0
  10. package/dist/skins/frosted.css +1 -1
  11. package/dist/skins/frosted.js +2 -2
  12. package/dist/skins/minimal.css +1 -1
  13. package/dist/skins/minimal.js +2 -2
  14. package/package.json +4 -5
  15. package/dist/VolumeSlider-CWpLFzdJ.js.map +0 -1
  16. package/dist/frosted-JuY6ZaAp.js.map +0 -1
  17. package/dist/minimal-pUeFJF1F.js.map +0 -1
package/dist/VolumeSlider-DmlupkvF.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"VolumeSlider-DmlupkvF.js","names":["Context","CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>","DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>","baseProps: Record<string, any>","FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>","React","MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement>>>","baseProps: Record<string, any>","MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>","baseProps: Record<string, any>","PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>","value: PopoverContextType","Popover: {\n Root: typeof PopoverRoot;\n Trigger: typeof PopoverTrigger;\n Positioner: typeof PopoverPositioner;\n Popup: typeof PopoverPopup;\n}","PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>","CoreTimeSlider","TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot>","TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack>","TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb>","TimeSliderPointer: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderTimeSliderPointer\n>","TimeSliderProgress: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderTimeSliderProgress\n>","TimeSlider","sideOffset","collisionPadding","value: TooltipContextType","Tooltip: {\n Root: typeof TooltipRoot;\n Trigger: typeof TooltipTrigger;\n Positioner: typeof TooltipPositioner;\n Popup: typeof TooltipPopup;\n}","CoreVolumeSlider","VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot>","VolumeSliderTrack: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderTrack\n>","VolumeSliderThumb: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderThumb\n>","VolumeSliderProgress: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderProgress\n>","VolumeSlider"],"sources":["../src/utils/component-factory.tsx","../src/components/CurrentTimeDisplay.tsx","../src/components/DurationDisplay.tsx","../src/components/FullscreenButton.tsx","../src/utils/use-composed-refs.ts","../src/components/MediaContainer.tsx","../src/components/MuteButton.tsx","../src/components/PlayButton.tsx","../src/components/Popover.tsx","../src/components/PreviewTimeDisplay.tsx","../src/components/TimeSlider.tsx","../src/components/Tooltip.tsx","../src/components/VolumeSlider.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';\n\nexport type StateHookFn<TProps = any, TState = any> = (props: TProps) => TState;\n\nexport type PropsHookFn<TProps = any, TState = any, TResultProps = any> = (\n props: TProps,\n state: TState\n) => TResultProps;\n\nexport type RenderFn<TProps = any, TState = any> = (props: TProps, state: TState) => ReactElement;\n\nconst Context = createContext<any>(null);\n\n/**\n * Generic factory function to create connected components following the hooks pattern\n * inspired by Adobe React Spectrum and Base UI architectures.\n *\n * @param useStateHook - Hook that provides component state\n * @param usePropsHook - Hook that enhances props with state-derived values\n * @param defaultRender - Default render function for the component\n * @param displayName - Display name for React DevTools\n * @returns Connected component with customizable render prop\n */\nexport function toConnectedComponent<\n TProps extends Record<string, any>,\n TState,\n TResultProps extends Record<string, any>,\n TRenderFn extends RenderFn<TResultProps, TState>,\n>(\n useStateHook: StateHookFn<TProps, TState>,\n usePropsHook: PropsHookFn<TProps, TState, TResultProps>,\n defaultRender: TRenderFn,\n displayName: string,\n): ConnectedComponent<TProps, TRenderFn> {\n const ConnectedComponent = forwardRef<HTMLElement, TProps & { render?: TRenderFn }>(\n ({ render = defaultRender, ...props }, ref) => {\n const propsWithRef = ref ? { ...props, ref } : props;\n const connectedState = useStateHook(propsWithRef as unknown as TProps);\n const connectedProps = usePropsHook(propsWithRef as unknown as TProps, connectedState);\n return <Context.Provider value={connectedState}>{render(connectedProps, connectedState)}</Context.Provider>;\n },\n );\n\n ConnectedComponent.displayName = displayName;\n\n return ConnectedComponent;\n}\n\n/**\n * Type helper to infer the component type from the factory\n */\nexport type ConnectedComponent<TProps extends Record<string, any>, TRenderFn extends RenderFn<any, any>> = React.ForwardRefExoticComponent<\n React.PropsWithoutRef<TProps & { render?: TRenderFn }> & React.RefAttributes<HTMLElement>\n>;\n\n/**\n * Factory function to create context-based components that don't use toConnectedComponent\n * These components rely on context provided by a parent component.\n *\n * @param usePropsHook - Hook that enhances props with context-derived values\n * @param defaultRender - Default render function for the component\n * @param displayName - Display name for React DevTools\n * @returns Context-based component with customizable render prop\n */\nexport function toContextComponent<\n TProps extends Record<string, any>,\n TResultProps extends Record<string, any>,\n TRenderFn extends (props: TResultProps, context: any) => ReactElement,\n>(\n usePropsHook: (props: TProps, context: any) => TResultProps,\n defaultRender: TRenderFn,\n displayName: string,\n): ContextComponent<TProps, TRenderFn> {\n const ContextComponent = forwardRef<HTMLElement, TProps & { render?: TRenderFn }>(\n ({ render = defaultRender, ...props }, ref) => {\n const context = useContext(Context);\n const propsWithRef = ref ? { ...props, ref } : props;\n const contextProps = usePropsHook(propsWithRef as unknown as TProps, context);\n return render(contextProps, context);\n },\n );\n\n ContextComponent.displayName = displayName;\n\n return ContextComponent;\n}\n\n/**\n * Type helper to infer the context component type from the factory\n */\nexport type ContextComponent<\n TProps extends Record<string, any>,\n TRenderFn extends (props: any, context: any) => ReactElement,\n> = React.ForwardRefExoticComponent<\n React.PropsWithoutRef<TProps & { render?: TRenderFn }> & React.RefAttributes<any>\n>;\n\n/**\n * Hook that manages a CoreClass instance and triggers re-renders when state changes.\n * Uses useSyncExternalStore for optimal performance with external state subscriptions.\n */\nexport function useCore<\n T extends {\n subscribe: (callback: (state: any) => void) => () => void;\n getState: () => any;\n setState: (state: any) => void;\n },\n>(CoreClass: new () => T, state: any): T {\n const coreRef = useRef<T | null>(null);\n const snapshotRef = useRef<any>(null);\n\n // Initialize the core instance\n if (!coreRef.current) {\n coreRef.current = new CoreClass();\n snapshotRef.current = coreRef.current.getState();\n }\n\n useEffect(() => {\n coreRef.current?.setState(state);\n }, [...Object.values(state)]);\n\n // Use useSyncExternalStore to subscribe to state changes\n useSyncExternalStore(\n useCallback((onStoreChange) => {\n if (!coreRef.current) return () => {};\n return coreRef.current.subscribe((newState) => {\n snapshotRef.current = newState;\n onStoreChange();\n });\n }, []),\n useCallback(() => {\n return snapshotRef.current;\n }, []),\n () => null, // server snapshot\n );\n\n return coreRef.current;\n}\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { currentTimeDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useCurrentTimeDisplayState(_props: any): {\n currentTime: number;\n duration: number;\n} {\n /** @TODO Fix type issues with hooks (CJP) */\n const mediaState = useMediaSelector(currentTimeDisplayStateDefinition.stateTransform, shallowEqual);\n\n // Current time display is read-only, no request methods needed\n return {\n currentTime: mediaState.currentTime ?? 0,\n duration: mediaState.duration ?? 0,\n };\n}\n\nexport type CurrentTimeDisplayState = ReturnType<typeof useCurrentTimeDisplayState>;\n\nexport interface CurrentTimeDisplayProps extends React.ComponentProps<'span'> {\n showRemaining?: boolean;\n}\n\nexport function useCurrentTimeDisplayProps(\n props: PropsWithChildren,\n _state: ReturnType<typeof useCurrentTimeDisplayState>,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n return baseProps;\n}\n\nexport function renderCurrentTimeDisplay(props: CurrentTimeDisplayProps, state: CurrentTimeDisplayState): JSX.Element {\n const { showRemaining, ...restProps } = props;\n\n /** @TODO Should this live here or elsewhere? (CJP) */\n const timeLabel\n = showRemaining && state.duration != null && state.currentTime != null\n ? formatDisplayTime(-(state.duration - state.currentTime))\n : formatDisplayTime(state.currentTime);\n\n return <span {...restProps}>{timeLabel}</span>;\n}\n\nexport const CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>\n = toConnectedComponent(\n useCurrentTimeDisplayState,\n useCurrentTimeDisplayProps,\n renderCurrentTimeDisplay,\n 'CurrentTimeDisplay',\n );\n\nexport default CurrentTimeDisplay;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { durationDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useDurationDisplayState(_props: any): {\n duration: number;\n} {\n /** @TODO Fix type issues with hooks (CJP) */\n const mediaState = useMediaSelector(durationDisplayStateDefinition.stateTransform, shallowEqual);\n\n // Duration display is read-only, no request methods needed\n return {\n duration: mediaState.duration ?? 0,\n };\n}\n\nexport type useDurationDisplayState = typeof useDurationDisplayState;\nexport type DurationDisplayState = ReturnType<useDurationDisplayState>;\n\nexport function useDurationDisplayProps(props: PropsWithChildren): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n return baseProps;\n}\n\nexport type useDurationDisplayProps = typeof useDurationDisplayProps;\ntype DurationDisplayProps = ReturnType<useDurationDisplayProps>;\n\nexport function renderDurationDisplay(props: DurationDisplayProps, state: DurationDisplayState): JSX.Element {\n return <span {...props}>{formatDisplayTime(state.duration)}</span>;\n}\n\nexport type renderDurationDisplay = typeof renderDurationDisplay;\n\nexport const DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>\n = toConnectedComponent(useDurationDisplayState, useDurationDisplayProps, renderDurationDisplay, 'DurationDisplay');\n\nexport default DurationDisplay;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { fullscreenButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useFullscreenButtonState(_props: any): {\n fullscreen: boolean;\n requestEnterFullscreen: () => void;\n requestExitFullscreen: () => void;\n} {\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(fullscreenButtonStateDefinition.stateTransform, shallowEqual);\n const methods = useMemo(\n () => fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n [mediaStore],\n );\n\n return {\n fullscreen: mediaState.fullscreen,\n requestEnterFullscreen: methods.requestEnterFullscreen,\n requestExitFullscreen: methods.requestExitFullscreen,\n } as const;\n}\n\nexport type FullscreenButtonState = ReturnType<typeof useFullscreenButtonState>;\n\nexport function getFullscreenButtonProps(\n props: PropsWithChildren,\n state: FullscreenButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** @TODO Need another state provider in core for i18n (CJP) */\n /** aria attributes/props */\n role: 'button',\n 'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',\n /** tooltip */\n 'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n // Handle boolean data attribute: present with empty string when true, absent when false\n if (state.fullscreen) {\n baseProps['data-fullscreen'] = '';\n }\n\n return baseProps;\n}\n\nexport type FullscreenButtonProps = ReturnType<typeof getFullscreenButtonProps>;\n\nexport function renderFullscreenButton(props: FullscreenButtonProps, state: FullscreenButtonState): JSX.Element {\n return (\n <button\n type=\"button\"\n {...props}\n onClick={() => {\n if (props.disabled) return;\n if (state.fullscreen) {\n state.requestExitFullscreen();\n } else {\n state.requestEnterFullscreen();\n }\n }}\n >\n {props.children}\n </button>\n );\n}\n\nexport const FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>\n = toConnectedComponent(useFullscreenButtonState, getFullscreenButtonProps, renderFullscreenButton, 'FullscreenButton');\n\nexport default FullscreenButton;\n","import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T): (() => void) | void | undefined {\n if (typeof ref === 'function') {\n return ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as React.MutableRefObject<T>).current = value;\n }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n return (node) => {\n let hasCleanup = false;\n const cleanups = refs.map((ref) => {\n const cleanup = setRef(ref, node);\n if (!hasCleanup && typeof cleanup == 'function') {\n hasCleanup = true;\n }\n return cleanup;\n });\n\n // React <19 will log an error to the console if a callback ref returns a\n // value. We don't use ref cleanups internally so this will only happen if a\n // user's ref callback returns a value, which we only expect if they are\n // using the cleanup functionality added in React 19.\n if (hasCleanup) {\n return () => {\n for (let i = 0; i < cleanups.length; i++) {\n const cleanup = cleanups[i];\n if (typeof cleanup == 'function') {\n cleanup();\n } else {\n setRef(refs[i], null);\n }\n }\n };\n }\n };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import type { FC, HTMLProps, PropsWithChildren, RefCallback } from 'react';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { forwardRef, useCallback, useMemo } from 'react';\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\n/**\n * Hook to associate a React element as the fullscreen container for the media store.\n * This is equivalent to Media Chrome's useMediaFullscreenRef but for VJS-10.\n *\n * The ref callback will register the element as the container state owner\n * in the media store, enabling fullscreen functionality.\n *\n * @example\n * import { useMediaContainerRef } from '@videojs/react';\n *\n * const PlayerContainer = ({ children }) => {\n * const containerRef = useMediaContainerRef();\n * return <div ref={containerRef}>{children}</div>;\n * };\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useMediaContainerRef(): RefCallback<HTMLElement | null> {\n const mediaStore = useMediaStore();\n\n return useCallback(\n (containerElement: HTMLElement | null) => {\n if (!mediaStore) return;\n\n // Register or unregister the container element as the container state owner\n mediaStore.dispatch({\n type: 'containerstateownerchangerequest',\n detail: containerElement,\n });\n },\n [mediaStore],\n );\n}\n\n/**\n * MediaContainer component that automatically registers itself as the fullscreen container.\n * This provides a simple wrapper component for fullscreen functionality.\n *\n * @example\n * import { MediaContainer } from '@videojs/react';\n *\n * const MyPlayer = () => (\n * <MediaContainer>\n * <video src=\"video.mp4\" />\n * <div>Controls here</div>\n * </MediaContainer>\n * );\n */\nexport const MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement>>> = forwardRef(\n ({ children, ...props }, ref) => {\n const containerRef = useMediaContainerRef();\n const composedRef = useComposedRefs(ref, containerRef);\n\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);\n const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n if (!['video', 'audio'].includes((event.target as HTMLElement).localName || '')) return;\n\n if (mediaState.paused) {\n methods.requestPlay();\n } else {\n methods.requestPause();\n }\n }, [mediaState.paused, methods]);\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n <div\n ref={composedRef}\n onClick={handleClick}\n data-media-container\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { muteButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useMuteButtonState(_props: any): {\n volumeLevel: string;\n muted: boolean;\n requestMute: () => void;\n requestUnmute: () => void;\n} {\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(muteButtonStateDefinition.stateTransform, shallowEqual);\n const methods = useMemo(() => muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n return {\n volumeLevel: mediaState.volumeLevel,\n muted: mediaState.muted,\n requestMute: methods.requestMute,\n requestUnmute: methods.requestUnmute,\n } as const;\n}\n\nexport type MuteButtonState = ReturnType<typeof useMuteButtonState>;\n\nexport function getMuteButtonProps(\n props: PropsWithChildren,\n state: MuteButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** data attributes/props - non-boolean */\n 'data-volume-level': state.volumeLevel,\n /** @TODO Need another state provider in core for i18n (CJP) */\n /** aria attributes/props */\n role: 'button',\n 'aria-label': state.muted ? 'unmute' : 'mute',\n /** tooltip */\n 'data-tooltip': state.muted ? 'Unmute' : 'Mute',\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n // Handle boolean data attribute: present with empty string when true, absent when false\n if (state.muted) {\n baseProps['data-muted'] = '';\n }\n\n return baseProps;\n}\n\nexport type MuteButtonProps = ReturnType<typeof getMuteButtonProps>;\n\nexport function renderMuteButton(props: MuteButtonProps, state: MuteButtonState): JSX.Element {\n return (\n <button\n type=\"button\"\n {...props}\n onClick={() => {\n if (props.disabled) return;\n if (state.volumeLevel === 'off') {\n state.requestUnmute();\n } else {\n state.requestMute();\n }\n }}\n >\n {props.children}\n </button>\n );\n}\n\nexport const MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton> = toConnectedComponent(\n useMuteButtonState,\n getMuteButtonProps,\n renderMuteButton,\n 'MuteButton',\n);\n\nexport default MuteButton;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function usePlayButtonState(_props: any): {\n paused: boolean;\n requestPlay: () => void;\n requestPause: () => void;\n} {\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);\n const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n return {\n paused: mediaState.paused,\n requestPlay: methods.requestPlay,\n requestPause: methods.requestPause,\n };\n}\n\nexport type PlayButtonState = ReturnType<typeof usePlayButtonState>;\n\nexport function getPlayButtonProps(\n props: Record<string, unknown>,\n state: PlayButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** @TODO Need another state provider in core for i18n (CJP) */\n /** aria attributes/props */\n role: 'button',\n 'aria-label': state.paused ? 'play' : 'pause',\n /** tooltip */\n 'data-tooltip': state.paused ? 'Play' : 'Pause',\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n // Handle boolean data attribute: present with empty string when true, absent when false\n if (state.paused) {\n baseProps['data-paused'] = '';\n }\n\n return baseProps;\n}\n\nexport type PlayButtonProps = ReturnType<typeof getPlayButtonProps>;\n\nexport function renderPlayButton(props: PlayButtonProps, state: PlayButtonState): JSX.Element {\n return (\n <button\n type=\"button\"\n {...props}\n onClick={() => {\n if (props.disabled) return;\n if (state.paused) {\n state.requestPlay();\n } else {\n state.requestPause();\n }\n }}\n >\n {props.children}\n </button>\n );\n}\n\nexport const PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton> = toConnectedComponent(\n usePlayButtonState,\n getPlayButtonProps,\n renderPlayButton,\n 'PlayButton',\n);\n\nexport default PlayButton;\n","import type { ReactNode } from 'react';\n\nimport { contains, safePolygon } from '@videojs/utils/dom';\n\nimport {\n Children,\n cloneElement,\n createContext,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype Placement = 'top' | 'top-start' | 'top-end';\n\ntype TransitionStatus = 'initial' | 'open' | 'close' | 'unmounted';\n\ninterface PopoverContextType {\n open: boolean;\n setOpen: (open: boolean) => void;\n popupRef: React.RefObject<HTMLElement | null>;\n triggerRef: React.RefObject<HTMLElement | null>;\n updatePositioning: (placement: Placement, sideOffset: number) => void;\n transitionStatus: TransitionStatus;\n placement: Placement;\n sideOffset: number;\n}\n\ninterface PopoverRootProps {\n openOnHover?: boolean;\n delay?: number;\n closeDelay?: number;\n children: ReactNode;\n}\n\ninterface PopoverTriggerProps {\n children: ReactNode;\n}\n\ninterface PopoverPositionerProps {\n side?: Placement;\n sideOffset?: number;\n children: ReactNode;\n}\n\ninterface PopoverPopupProps {\n id?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst PopoverContext = createContext<PopoverContextType | null>(null);\n\nfunction usePopoverContext(): PopoverContextType {\n const context = useContext(PopoverContext);\n if (!context) {\n throw new Error('Popover components must be used within PopoverRoot');\n }\n return context;\n}\n\nfunction PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children }: PopoverRootProps): JSX.Element {\n const [open, setOpen] = useState(false);\n const [placement, setPlacement] = useState<Placement>('top');\n const [sideOffset, setSideOffset] = useState(5);\n const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>('initial');\n const popupRef = useRef<HTMLElement | null>(null);\n const triggerRef = useRef<HTMLElement | null>(null);\n const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const pointerMoveHandlerRef = useRef<((event: MouseEvent) => void) | null>(null);\n\n const clearHoverTimeout = useCallback(() => {\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n hoverTimeoutRef.current = null;\n }\n }, []);\n\n const setOpenState = useCallback((newOpen: boolean) => {\n if (open === newOpen) return;\n\n setOpen(newOpen);\n\n if (newOpen) {\n setTransitionStatus('initial');\n if (popupRef.current) {\n popupRef.current.showPopover();\n }\n requestAnimationFrame(() => {\n setTransitionStatus('open');\n });\n } else {\n setTransitionStatus('close');\n }\n }, [open]);\n\n useEffect(() => {\n if (!popupRef.current || open) return;\n\n const transitions = popupRef.current.getAnimations().filter(anim => anim instanceof CSSTransition);\n if (transitions.length > 0) {\n Promise.all(transitions.map(t => t.finished))\n .then(() => popupRef.current?.hidePopover())\n .catch(() => popupRef.current?.hidePopover());\n } else {\n popupRef.current.hidePopover();\n }\n }, [open, transitionStatus]);\n\n const updatePositioning = useCallback((newPlacement: Placement, newSideOffset: number) => {\n setPlacement(newPlacement);\n setSideOffset(newSideOffset);\n }, []);\n\n useEffect(() => {\n const trigger = triggerRef.current;\n const popup = popupRef.current;\n if (!trigger || !popup) return;\n\n const abortController = new AbortController();\n const { signal } = abortController;\n\n const addPointerMoveListener = () => {\n if (!globalThis.matchMedia?.('(hover: hover)')?.matches) return;\n\n if (!pointerMoveHandlerRef.current) {\n pointerMoveHandlerRef.current = safePolygon({ blockPointerEvents: true })({\n placement,\n elements: {\n domReference: trigger,\n floating: popup,\n },\n x: 0,\n y: 0,\n onClose: () => {\n if (pointerMoveHandlerRef.current) {\n document.documentElement.removeEventListener('pointermove', pointerMoveHandlerRef.current);\n }\n clearHoverTimeout();\n\n hoverTimeoutRef.current = setTimeout(() => {\n setOpenState(false);\n }, closeDelay);\n },\n });\n }\n\n // Event listener is automatically removed when AbortController is aborted\n document.documentElement.addEventListener('pointermove', pointerMoveHandlerRef.current, { signal });\n };\n\n const handlePointerEnter = (event: PointerEvent) => {\n if (!openOnHover) return;\n\n clearHoverTimeout();\n\n if (event.currentTarget === popup) {\n addPointerMoveListener();\n }\n\n if (open) {\n return;\n }\n\n hoverTimeoutRef.current = setTimeout(() => {\n setOpenState(true);\n }, delay);\n };\n\n const handlePointerLeave = () => {\n if (!openOnHover) return;\n addPointerMoveListener();\n };\n\n if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n // Event listeners are automatically removed when AbortController is aborted\n trigger.addEventListener('pointerenter', handlePointerEnter, { signal });\n trigger.addEventListener('pointerleave', handlePointerLeave, { signal });\n popup.addEventListener('pointerenter', handlePointerEnter, { signal });\n }\n\n const handleFocusIn = () => {\n setOpenState(true);\n };\n\n const handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (relatedTarget && popup && contains(popup, relatedTarget)) return;\n setOpenState(false);\n };\n\n // Event listeners are automatically removed when AbortController is aborted\n trigger.addEventListener('focusin', handleFocusIn, { signal });\n trigger.addEventListener('focusout', handleFocusOut, { signal });\n popup.addEventListener('focusout', handleFocusOut, { signal });\n\n return () => {\n abortController.abort();\n clearHoverTimeout();\n\n if (pointerMoveHandlerRef.current) {\n document.documentElement.removeEventListener('pointermove', pointerMoveHandlerRef.current);\n }\n\n pointerMoveHandlerRef.current = null;\n };\n }, [openOnHover, delay, closeDelay, open, placement, setOpenState, clearHoverTimeout]);\n\n useEffect(() => {\n if (!popupRef.current || !triggerRef.current) return;\n\n const popup = popupRef.current;\n const popupId = popup.id;\n if (popupId) {\n popup.style.setProperty('position-anchor', `--${popupId}`);\n }\n\n const [side, alignment] = placement.split('-');\n popup.style.setProperty('top', `calc(anchor(${side}) - ${sideOffset}px)`);\n popup.style.setProperty('translate', `0 -100%`);\n popup.style.setProperty('justify-self', alignment === 'start'\n ? 'anchor-start'\n : alignment === 'end'\n ? 'anchor-end'\n : 'anchor-center');\n }, [placement, sideOffset]);\n\n const value: PopoverContextType = useMemo(() => ({\n open,\n setOpen: setOpenState,\n popupRef,\n triggerRef,\n updatePositioning,\n transitionStatus,\n placement,\n sideOffset,\n }), [open, setOpenState, updatePositioning, transitionStatus, placement, sideOffset]);\n\n return <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>;\n}\n\nfunction PopoverTrigger({ children }: PopoverTriggerProps): JSX.Element {\n const { triggerRef, open } = usePopoverContext();\n\n // eslint-disable-next-line react/no-clone-element, react/no-children-only\n return cloneElement(Children.only(children) as JSX.Element, {\n ref: triggerRef,\n 'data-popup-open': open ? '' : undefined,\n });\n}\n\nfunction PopoverPositioner({ side = 'top', sideOffset = 5, children }: PopoverPositionerProps): JSX.Element | null {\n const { updatePositioning } = usePopoverContext();\n\n useEffect(() => {\n updatePositioning(side, sideOffset);\n }, [side, sideOffset, updatePositioning]);\n\n return <>{children}</>;\n}\n\nfunction PopoverPopup({ id, className, children }: PopoverPopupProps): JSX.Element {\n const { popupRef, triggerRef, transitionStatus, placement } = usePopoverContext();\n const triggerElement = triggerRef.current;\n\n const uniqueId = useId();\n const popupId = id ?? uniqueId;\n\n useEffect(() => {\n if (!popupRef.current || !triggerRef.current) return;\n\n const popup = popupRef.current;\n const trigger = triggerRef.current;\n\n popup.setAttribute('popover', 'manual');\n trigger.setAttribute('commandfor', popupId);\n trigger.style.setProperty('anchor-name', `--${popupId}`);\n }, [popupId, popupRef, triggerRef]);\n\n // Copy data attributes from trigger element\n const dataAttributes = useMemo(() => {\n if (!triggerElement?.attributes) return {};\n return Object.fromEntries(\n Array.from(triggerElement.attributes)\n .filter(attr => attr.name.startsWith('data-'))\n .map(attr => [attr.name, attr.value]),\n );\n }, [triggerElement]);\n\n return (\n <div\n ref={popupRef as React.RefObject<HTMLDivElement>}\n id={popupId}\n className={className}\n {...dataAttributes}\n data-side={placement}\n data-starting-style={transitionStatus === 'initial' ? '' : undefined}\n data-open={transitionStatus === 'initial' || transitionStatus === 'open' ? '' : undefined}\n data-ending-style={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n >\n {children}\n </div>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const Popover: {\n Root: typeof PopoverRoot;\n Trigger: typeof PopoverTrigger;\n Positioner: typeof PopoverPositioner;\n Popup: typeof PopoverPopup;\n} = {\n Root: PopoverRoot,\n Trigger: PopoverTrigger,\n Positioner: PopoverPositioner,\n Popup: PopoverPopup,\n};\n\nexport default Popover;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function usePreviewTimeDisplayState(_props: any): {\n previewTime: number;\n} {\n /** @TODO Fix type issues with hooks (CJP) */\n const mediaState = useMediaSelector(previewTimeDisplayStateDefinition.stateTransform, shallowEqual);\n\n // Preview time display is read-only, no request methods needed\n return {\n previewTime: mediaState.previewTime ?? 0,\n };\n}\n\nexport type PreviewTimeDisplayState = ReturnType<typeof usePreviewTimeDisplayState>;\n\nexport interface PreviewTimeDisplayProps extends React.ComponentProps<'span'> {\n showRemaining?: boolean;\n}\n\nexport function getPreviewTimeDisplayProps(\n props: PropsWithChildren,\n _state: ReturnType<typeof usePreviewTimeDisplayState>,\n): PropsWithChildren<Record<string, unknown>> {\n const baseProps: Record<string, any> = {\n /** external props spread last to allow for overriding */\n ...props,\n };\n\n return baseProps;\n}\n\nexport function renderPreviewTimeDisplay(props: PreviewTimeDisplayProps, state: PreviewTimeDisplayState): JSX.Element {\n const { showRemaining, ...restProps } = props;\n\n /** @TODO Should this live here or elsewhere? (CJP) */\n const timeLabel = formatDisplayTime(state.previewTime);\n\n return <span {...restProps}>{timeLabel}</span>;\n}\n\nexport const PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>\n = toConnectedComponent(\n usePreviewTimeDisplayState,\n getPreviewTimeDisplayProps,\n renderPreviewTimeDisplay,\n 'PreviewTimeDisplay',\n );\n\nexport default PreviewTimeDisplay;\n","import type { ConnectedComponent } from '../utils/component-factory';\n\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\n\nimport { timeSliderStateDefinition } from '@videojs/core/store';\nimport { shallowEqual } from '@videojs/utils';\nimport { useCallback, useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface TimeSliderState {\n currentTime: number;\n duration: number;\n requestSeek: (time: number) => void;\n core: CoreTimeSlider;\n orientation: 'horizontal' | 'vertical';\n}\n\nexport interface TimeSliderProps extends React.ComponentPropsWithRef<'div'> {\n orientation?: 'horizontal' | 'vertical';\n}\n\ninterface TimeSliderRenderProps extends React.ComponentProps<'div'> {\n 'data-orientation'?: 'horizontal' | 'vertical';\n 'data-current-time'?: number;\n 'data-duration'?: number;\n}\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\nexport function useTimeSliderRootState(props: TimeSliderProps): TimeSliderState {\n const { orientation = 'horizontal' } = props;\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(timeSliderStateDefinition.stateTransform, shallowEqual);\n const mediaMethods = useMemo(() => timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n const core = useCore(CoreTimeSlider, { ...mediaState, ...mediaMethods });\n\n return {\n ...mediaState,\n ...mediaMethods,\n orientation,\n core,\n };\n}\n\nexport function useTimeSliderRootProps(props: TimeSliderProps, state: TimeSliderState): TimeSliderRenderProps {\n const { _fillWidth, _pointerWidth, _currentTimeText, _durationText } = state.core.getState();\n\n const { children, className, id, style, orientation = 'horizontal', ref } = props;\n\n const internalRef = useCallback((el: HTMLDivElement) => {\n if (!el) return;\n state.core?.attach(el);\n }, [state.core]);\n\n const composedRef = useComposedRefs(ref, internalRef);\n\n return {\n ref: composedRef,\n id,\n role: 'slider',\n tabIndex: 0,\n 'aria-label': 'Seek',\n 'aria-valuemin': 0,\n 'aria-valuemax': Math.round(state.duration),\n 'aria-valuenow': Math.round(state.currentTime),\n 'aria-valuetext': `${_currentTimeText} of ${_durationText}`,\n 'aria-orientation': orientation,\n 'data-orientation': orientation,\n 'data-current-time': state.currentTime,\n 'data-duration': state.duration,\n className,\n style: {\n ...style,\n '--slider-fill': `${_fillWidth.toFixed(3)}%`,\n '--slider-pointer': `${(_pointerWidth * 100).toFixed(3)}%`,\n } as React.CSSProperties,\n children,\n };\n}\n\nexport function renderTimeSliderRoot(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot> = toConnectedComponent(\n useTimeSliderRootState,\n useTimeSliderRootProps,\n renderTimeSliderRoot,\n 'TimeSlider.Root',\n);\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport function useTimeSliderTrackProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n return {\n ref: useCallback((el: HTMLDivElement) => {\n context.core?.setState({ _trackElement: el });\n }, [context.core]),\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',\n },\n };\n}\n\nexport function renderTimeSliderTrack(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack> = toContextComponent(\n useTimeSliderTrackProps,\n renderTimeSliderTrack,\n 'TimeSlider.Track',\n);\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport function getTimeSliderThumbProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',\n [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',\n translate: context.orientation === 'horizontal' ? '-50% -50%' : '-50% 50%',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderTimeSliderThumb(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb> = toContextComponent(\n getTimeSliderThumbProps,\n renderTimeSliderThumb,\n 'TimeSlider.Thumb',\n);\n\n// ============================================================================\n// POINTER COMPONENT\n// ============================================================================\n\nexport function getTimeSliderPointerProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-pointer, 0%)',\n [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderTimeSliderPointer(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderPointer: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderTimeSliderPointer\n> = toContextComponent(getTimeSliderPointerProps, renderTimeSliderPointer, 'TimeSlider.Pointer');\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport function getTimeSliderProgressProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',\n [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n [context.orientation === 'horizontal' ? 'top' : 'bottom']: '0',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderTimeSliderProgress(props: TimeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst TimeSliderProgress: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderTimeSliderProgress\n> = toContextComponent(getTimeSliderProgressProps, renderTimeSliderProgress, 'TimeSlider.Progress');\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const TimeSlider = Object.assign(\n {},\n {\n Root: TimeSliderRoot,\n Track: TimeSliderTrack,\n Thumb: TimeSliderThumb,\n Pointer: TimeSliderPointer,\n Progress: TimeSliderProgress,\n },\n) as {\n Root: typeof TimeSliderRoot;\n Track: typeof TimeSliderTrack;\n Thumb: typeof TimeSliderThumb;\n Pointer: typeof TimeSliderPointer;\n Progress: typeof TimeSliderProgress;\n};\n\nexport default TimeSlider;\n","import type { ReactNode, RefObject } from 'react';\n\nimport { contains, getBoundingClientRectWithoutTransform, getInBoundsAdjustments } from '@videojs/utils/dom';\n\nimport {\n Children,\n cloneElement,\n createContext,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\ntype Placement = 'top' | 'top-start' | 'top-end';\n\ninterface UpdatePositioningProps {\n side: Placement;\n sideOffset: number;\n collisionPadding: number;\n}\n\ntype TransitionStatus = 'initial' | 'open' | 'close' | 'unmounted';\n\ninterface TooltipContextType {\n popupRef: RefObject<HTMLElement | null>;\n triggerRef: RefObject<HTMLElement | null>;\n open: boolean;\n transitionStatus: TransitionStatus;\n updatePositioning: (props: UpdatePositioningProps) => void;\n trackCursorAxis?: 'x' | 'y' | 'both' | undefined;\n placement: Placement;\n sideOffset: number;\n collisionPadding: number;\n}\n\ninterface TooltipRootProps {\n delay?: number;\n closeDelay?: number;\n children: ReactNode;\n trackCursorAxis?: 'x' | 'y' | 'both';\n}\n\ninterface TooltipTriggerProps {\n children: ReactNode;\n}\n\ninterface TooltipPositionerProps {\n side?: Placement;\n sideOffset?: number;\n collisionPadding?: number;\n children: ReactNode;\n}\n\ninterface TooltipPopupProps {\n id?: string;\n className?: string;\n children: ReactNode;\n}\n\nconst TooltipContext = createContext<TooltipContextType | null>(null);\n\nfunction useTooltipContext(): TooltipContextType {\n const context = useContext(TooltipContext);\n if (!context) {\n throw new Error('Tooltip components must be used within TooltipRoot');\n }\n return context;\n}\n\nfunction TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }: TooltipRootProps): JSX.Element {\n const [open, setOpen] = useState(false);\n const [placement, setPlacement] = useState<Placement>('top');\n const [sideOffset, setSideOffset] = useState(0);\n const [collisionPadding, setCollisionPadding] = useState(0);\n const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>('initial');\n const popupRef = useRef<HTMLElement | null>(null);\n const triggerRef = useRef<HTMLElement | null>(null);\n const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const pointerPositionRef = useRef({ x: 0, y: 0 });\n\n const updatePositioning = useCallback(({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => {\n setPlacement(side);\n setSideOffset(sideOffset);\n setCollisionPadding(collisionPadding);\n }, []);\n\n const clearHoverTimeout = useCallback(() => {\n if (hoverTimeoutRef.current) {\n clearTimeout(hoverTimeoutRef.current);\n hoverTimeoutRef.current = null;\n }\n }, []);\n\n const checkCollision = useCallback(() => {\n if (!popupRef.current || !triggerRef.current || !open) return;\n\n const mediaContainer = popupRef.current.closest('[data-media-container]') as HTMLElement | null;\n if (!mediaContainer) return;\n\n const popupRect = getBoundingClientRectWithoutTransform(popupRef.current);\n const boundsRect = getBoundingClientRectWithoutTransform(mediaContainer);\n const { x } = getInBoundsAdjustments(popupRect, boundsRect, collisionPadding);\n\n if (x !== 0) {\n if (trackCursorAxis) {\n const currentLeft = Number.parseFloat(popupRef.current.style.left || '0');\n popupRef.current.style.setProperty('left', `${currentLeft + x}px`);\n } else {\n popupRef.current.style.setProperty('translate', `${x}px -100%`);\n }\n } else {\n if (trackCursorAxis) {\n popupRef.current.style.setProperty('translate', '-50% -100%');\n } else {\n popupRef.current.style.setProperty('translate', '0 -100%');\n }\n }\n }, [open, collisionPadding, trackCursorAxis]);\n\n const updatePosition = useCallback(() => {\n if (open && trackCursorAxis && popupRef.current) {\n popupRef.current.style.setProperty('left', `${pointerPositionRef.current.x}px`);\n checkCollision();\n }\n }, [open, trackCursorAxis, checkCollision]);\n\n const setOpenState = useCallback(\n (newOpen: boolean) => {\n if (open === newOpen) return;\n\n setOpen(newOpen);\n\n if (newOpen) {\n setTransitionStatus('initial');\n if (popupRef.current) {\n popupRef.current.showPopover();\n }\n requestAnimationFrame(() => {\n setTransitionStatus('open');\n checkCollision();\n });\n } else {\n setTransitionStatus('close');\n }\n },\n [open, checkCollision],\n );\n\n useEffect(() => {\n if (!popupRef.current || open) return;\n\n const transitions = popupRef.current.getAnimations().filter(anim => anim instanceof CSSTransition);\n if (transitions.length > 0) {\n Promise.all(transitions.map(t => t.finished))\n .then(() => popupRef.current?.hidePopover())\n .catch(() => popupRef.current?.hidePopover());\n } else {\n popupRef.current.hidePopover();\n }\n }, [open, transitionStatus]);\n\n useEffect(() => {\n const trigger = triggerRef.current;\n const popup = popupRef.current;\n if (!trigger || !popup) return;\n\n const abortController = new AbortController();\n const { signal } = abortController;\n\n const handlePointerEnter = () => {\n clearHoverTimeout();\n\n hoverTimeoutRef.current = setTimeout(() => {\n setOpenState(true);\n }, delay);\n };\n\n const handlePointerLeave = () => {\n clearHoverTimeout();\n\n hoverTimeoutRef.current = setTimeout(() => {\n setOpenState(false);\n }, closeDelay);\n };\n\n const handlePointerMove = (event: PointerEvent) => {\n if (trackCursorAxis) {\n pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n if (open) {\n updatePosition();\n }\n }\n };\n\n const handleFocusIn = () => {\n setOpenState(true);\n };\n\n const handleFocusOut = (event: FocusEvent) => {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (relatedTarget && popup && contains(popup, relatedTarget)) return;\n setOpenState(false);\n };\n\n if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n // Event listeners are automatically removed when AbortController is aborted\n trigger.addEventListener('pointerenter', handlePointerEnter, { signal });\n trigger.addEventListener('pointerleave', handlePointerLeave, { signal });\n\n if (trackCursorAxis) {\n trigger.addEventListener('pointermove', handlePointerMove, { signal });\n }\n }\n\n // Event listeners are automatically removed when AbortController is aborted\n trigger.addEventListener('focusin', handleFocusIn, { signal });\n trigger.addEventListener('focusout', handleFocusOut, { signal });\n\n return () => {\n abortController.abort();\n clearHoverTimeout();\n };\n }, [delay, closeDelay, trackCursorAxis, open, setOpenState, clearHoverTimeout, updatePosition]);\n\n useEffect(() => {\n if (!popupRef.current || !triggerRef.current) return;\n\n const popup = popupRef.current;\n const popupId = popup.id;\n if (popupId) {\n popup.style.setProperty('position-anchor', `--${popupId}`);\n }\n\n const [side, alignment] = placement.split('-');\n popup.style.setProperty('top', `calc(anchor(${side}) - ${sideOffset}px)`);\n\n if (trackCursorAxis) {\n popup.style.setProperty('translate', `-50% -100%`);\n } else {\n popup.style.setProperty('translate', `0 -100%`);\n popup.style.setProperty('justify-self', alignment === 'start'\n ? 'anchor-start'\n : alignment === 'end'\n ? 'anchor-end'\n : 'anchor-center');\n }\n }, [placement, sideOffset, trackCursorAxis]);\n\n useEffect(() => {\n if (!popupRef.current) return;\n\n const resizeObserver = new ResizeObserver(checkCollision);\n resizeObserver.observe(popupRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [checkCollision]);\n\n const value: TooltipContextType = useMemo(\n () => ({\n popupRef,\n triggerRef,\n open,\n transitionStatus,\n updatePositioning,\n trackCursorAxis,\n placement,\n sideOffset,\n collisionPadding,\n }),\n [open, transitionStatus, updatePositioning, trackCursorAxis, placement, sideOffset, collisionPadding],\n );\n\n return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;\n}\n\nfunction TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element {\n const { triggerRef, open } = useTooltipContext();\n\n // eslint-disable-next-line react/no-clone-element, react/no-children-only\n return cloneElement(Children.only(children) as JSX.Element, {\n ref: triggerRef,\n 'data-popup-open': open ? '' : undefined,\n });\n}\n\nfunction TooltipPositioner({\n side = 'top',\n sideOffset = 0,\n collisionPadding = 0,\n children,\n}: TooltipPositionerProps): JSX.Element | null {\n const { updatePositioning } = useTooltipContext();\n\n useEffect(() => {\n updatePositioning({ side, sideOffset, collisionPadding });\n }, [side, sideOffset, collisionPadding, updatePositioning]);\n\n return <>{children}</>;\n}\n\nfunction TooltipPopup({ id, className = '', children }: TooltipPopupProps): JSX.Element | null {\n const { popupRef, triggerRef, transitionStatus, placement } = useTooltipContext();\n const triggerElement = triggerRef.current;\n\n const uniqueId = useId();\n const popupId = id ?? uniqueId;\n\n useEffect(() => {\n if (!popupRef.current || !triggerRef.current) return;\n\n const popup = popupRef.current;\n const trigger = triggerRef.current;\n\n popup.setAttribute('popover', 'manual');\n trigger.setAttribute('commandfor', popupId);\n trigger.style.setProperty('anchor-name', `--${popupId}`);\n }, [popupId, popupRef, triggerRef]);\n\n // Copy data attributes from trigger element\n const dataAttributes = useMemo(() => {\n if (!triggerElement?.attributes) return {};\n return Object.fromEntries(\n Array.from(triggerElement.attributes)\n .filter(attr => attr.name.startsWith('data-'))\n .map(attr => [attr.name, attr.value]),\n );\n }, [triggerElement]);\n\n return (\n <div\n ref={popupRef as RefObject<HTMLDivElement>}\n id={popupId}\n className={className}\n role=\"tooltip\"\n {...dataAttributes}\n data-side={placement}\n data-starting-style={transitionStatus === 'initial' ? '' : undefined}\n data-open={transitionStatus === 'initial' || transitionStatus === 'open' ? '' : undefined}\n data-ending-style={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n >\n {children}\n </div>\n );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const Tooltip: {\n Root: typeof TooltipRoot;\n Trigger: typeof TooltipTrigger;\n Positioner: typeof TooltipPositioner;\n Popup: typeof TooltipPopup;\n} = {\n Root: TooltipRoot,\n Trigger: TooltipTrigger,\n Positioner: TooltipPositioner,\n Popup: TooltipPopup,\n};\n\nexport default Tooltip;\n","import type { ConnectedComponent } from '../utils/component-factory';\n\nimport { VolumeSlider as CoreVolumeSlider } from '@videojs/core';\n\nimport { volumeSliderStateDefinition } from '@videojs/core/store';\nimport { shallowEqual } from '@videojs/utils';\nimport { useCallback, useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';\n\nexport interface VolumeSliderState {\n volume: number;\n muted: boolean;\n volumeLevel: string;\n requestVolumeChange: (volume: number) => void;\n core: CoreVolumeSlider;\n orientation: 'horizontal' | 'vertical';\n}\n\nexport interface VolumeSliderProps extends React.ComponentProps<'div'> {\n orientation?: 'horizontal' | 'vertical';\n}\n\ninterface VolumeSliderRenderProps extends React.ComponentProps<'div'> {\n 'data-orientation'?: 'horizontal' | 'vertical';\n 'data-muted'?: boolean;\n 'data-volume-level'?: string;\n}\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\nexport function useVolumeSliderRootState(props: VolumeSliderProps): VolumeSliderState {\n const { orientation = 'horizontal' } = props;\n const mediaStore = useMediaStore();\n const mediaState = useMediaSelector(volumeSliderStateDefinition.stateTransform, shallowEqual);\n const mediaMethods = useMemo(\n () => volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),\n [mediaStore],\n );\n const core = useCore(CoreVolumeSlider, { ...mediaState, ...mediaMethods });\n\n return {\n ...mediaState,\n ...mediaMethods,\n orientation,\n core,\n };\n}\n\nexport function useVolumeSliderRootProps(props: VolumeSliderProps, state: VolumeSliderState): VolumeSliderRenderProps {\n const { _fillWidth, _pointerWidth, _volumeText } = state.core.getState();\n\n const { children, className, id, style, orientation = 'horizontal' } = props;\n\n return {\n ref: useCallback((el: HTMLDivElement) => {\n if (!el) return;\n state.core?.attach(el);\n }, []),\n id,\n role: 'slider',\n tabIndex: 0,\n 'aria-label': 'Volume',\n 'aria-valuemin': 0,\n 'aria-valuemax': 100,\n 'aria-valuenow': Math.round(state.volume * 100),\n 'aria-valuetext': _volumeText,\n 'aria-orientation': orientation,\n 'data-orientation': orientation,\n 'data-muted': state.muted,\n 'data-volume-level': state.volumeLevel,\n className,\n style: {\n ...style,\n '--slider-fill': `${_fillWidth.toFixed(3)}%`,\n '--slider-pointer': `${_pointerWidth.toFixed(3)}%`,\n } as React.CSSProperties,\n children,\n };\n}\n\nexport function renderVolumeSliderRoot(props: VolumeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot> = toConnectedComponent(\n useVolumeSliderRootState,\n useVolumeSliderRootProps,\n renderVolumeSliderRoot,\n 'VolumeSlider.Root',\n);\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport function useVolumeSliderTrackProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {\n return {\n ref: useCallback((el: HTMLDivElement) => {\n context.core?.setState({ _trackElement: el });\n }, []),\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',\n },\n };\n}\n\nexport function renderVolumeSliderTrack(props: VolumeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst VolumeSliderTrack: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderTrack\n> = toContextComponent(useVolumeSliderTrackProps, renderVolumeSliderTrack, 'VolumeSlider.Track');\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport function getVolumeSliderThumbProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',\n [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',\n translate: context.orientation === 'horizontal' ? '-50% -50%' : '-50% 50%',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderVolumeSliderThumb(props: VolumeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst VolumeSliderThumb: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderThumb\n> = toContextComponent(getVolumeSliderThumbProps, renderVolumeSliderThumb, 'VolumeSlider.Thumb');\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport function getVolumeSliderProgressProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {\n return {\n 'data-orientation': context.orientation,\n ...props,\n style: {\n ...props.style,\n [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',\n [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n [context.orientation === 'horizontal' ? 'top' : 'bottom']: '0',\n position: 'absolute' as const,\n },\n };\n}\n\nexport function renderVolumeSliderProgress(props: VolumeSliderRenderProps): JSX.Element {\n return <div {...props} />;\n}\n\nconst VolumeSliderProgress: ConnectedComponent<\n React.ComponentProps<'div'>,\n typeof renderVolumeSliderProgress\n> = toContextComponent(getVolumeSliderProgressProps, renderVolumeSliderProgress, 'VolumeSlider.Progress');\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const VolumeSlider = Object.assign(\n {},\n {\n Root: VolumeSliderRoot,\n Track: VolumeSliderTrack,\n Thumb: VolumeSliderThumb,\n Progress: VolumeSliderProgress,\n },\n) as {\n Root: typeof VolumeSliderRoot;\n Track: typeof VolumeSliderTrack;\n Thumb: typeof VolumeSliderThumb;\n Progress: typeof VolumeSliderProgress;\n};\n\nexport default VolumeSlider;\n"],"mappings":"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"}
package/dist/{frosted-JuY6ZaAp.js → frosted-0lXuIgHt.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { _ as DurationDisplay, a as TimeSlider, c as Popover, d as PlayButton_default, g as FullscreenButton, m as MediaContainer, o as PreviewTimeDisplay, p as MuteButton_default, r as Tooltip, t as VolumeSlider, v as CurrentTimeDisplay } from "./VolumeSlider-CWpLFzdJ.js";
1
+ import { _ as DurationDisplay, a as TimeSlider, c as Popover, d as PlayButton_default, g as FullscreenButton, m as MediaContainer, o as PreviewTimeDisplay, p as MuteButton_default, r as Tooltip, t as VolumeSlider, v as CurrentTimeDisplay } from "./VolumeSlider-DmlupkvF.js";
2
2
  import { a as Play_default, l as FullscreenEnter_default, n as VolumeLow_default, o as Pause_default, r as VolumeHigh_default, s as FullscreenExit_default, t as VolumeOff_default } from "./icons-BqfV81R8.js";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
4
 
@@ -7,37 +7,34 @@ function cn(...classes) {
7
7
  return classes.filter(Boolean).join(" ");
8
8
  }
9
9
  const styles = {
10
- MediaContainer: cn("vjs", "vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black", "vjs:text-[0.8125rem]", "vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]", "vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0", "vjs:[&:fullscreen]:rounded-none", "vjs:[&_video]:w-full vjs:[&_video]:h-full"),
10
+ MediaContainer: cn("vjs", "vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--frosted-border-radius,2rem)", "vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased", "vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]", "vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0", "vjs:[&:fullscreen]:rounded-none", "vjs:[&_video]:w-full vjs:[&_video]:h-full"),
11
11
  Overlay: cn("vjs:opacity-0 vjs:delay-500 vjs:duration-300 vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-gradient-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90", "vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-100", "vjs:has-[+.controls_[aria-expanded=\"true\"]]:opacity-100 vjs:has-[+.controls_[aria-expanded=\"true\"]]:delay-0 vjs:has-[+.controls_[aria-expanded=\"true\"]]:duration-100", "vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100"),
12
12
  Surface: cn("vjs:bg-white/10 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90", "vjs:ring vjs:ring-white/10 vjs:ring-inset vjs:shadow-sm vjs:shadow-black/15", "vjs:after:absolute vjs:after:inset-0 vjs:after:ring vjs:after:rounded-[inherit] vjs:after:ring-black/15 vjs:after:pointer-events-none vjs:after:z-10", "vjs:reduced-transparency:bg-black/70 vjs:reduced-transparency:ring-black vjs:reduced-transparency:after:ring-white/20", "vjs:contrast-more:bg-black/90 vjs:contrast-more:ring-black vjs:contrast-more:after:ring-white/20"),
13
- Controls: cn("vjs:@container/controls vjs:absolute vjs:inset-x-3 vjs:bottom-3 vjs:rounded-full vjs:flex vjs:items-center vjs:p-1 vjs:gap-0.5 vjs:text-white", "vjs:transition vjs:will-change-[transform,scale,filter,opacity] vjs:origin-bottom vjs:ease-out", "controls", "vjs:scale-90 vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300", "vjs:has-[[data-paused]]:scale-100 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-100", "vjs:has-[[aria-expanded=\"true\"]]:scale-100 vjs:has-[[aria-expanded=\"true\"]]:opacity-100 vjs:has-[[aria-expanded=\"true\"]]:blur-none vjs:has-[[aria-expanded=\"true\"]]:delay-0 vjs:has-[[aria-expanded=\"true\"]]:duration-100", "vjs:group-hover/root:scale-100 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100"),
14
- Icon: cn("icon"),
13
+ Controls: cn("controls", "vjs:@container/controls vjs:absolute vjs:inset-x-3 vjs:bottom-3 vjs:rounded-full vjs:flex vjs:items-center vjs:p-1 vjs:gap-0.5 vjs:text-white", "vjs:transition vjs:will-change-[transform,scale,filter,opacity] vjs:origin-bottom vjs:ease-out", "vjs:scale-90 vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300", "vjs:has-[[data-paused]]:scale-100 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-100", "vjs:has-[[aria-expanded=\"true\"]]:scale-100 vjs:has-[[aria-expanded=\"true\"]]:opacity-100 vjs:has-[[aria-expanded=\"true\"]]:blur-none vjs:has-[[aria-expanded=\"true\"]]:delay-0 vjs:has-[[aria-expanded=\"true\"]]:duration-100", "vjs:group-hover/root:scale-100 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100"),
14
+ Icon: cn("icon vjs:[&_path]:transition-transform vjs:[&_path]:ease-out"),
15
15
  Button: cn("vjs:group/button vjs:cursor-pointer vjs:relative vjs:shrink-0 vjs:transition-[color,background,outline-offset] vjs:select-none vjs:p-2 vjs:rounded-full", "vjs:bg-transparent vjs:text-white/90", "vjs:hover:no-underline vjs:hover:bg-white/10 vjs:hover:text-white vjs:focus-visible:no-underline vjs:focus-visible:bg-white/10 vjs:focus-visible:text-white", "vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-blue-500", "vjs:disabled:grayscale vjs:disabled:opacity-50 vjs:disabled:cursor-not-allowed", "vjs:aria-busy:pointer-events-none vjs:aria-busy:cursor-not-allowed", "vjs:aria-expanded:bg-white/10 vjs:aria-expanded:text-white"),
16
16
  IconButton: cn("vjs:grid vjs:[&_.icon]:[grid-area:1/1]", "vjs:[&_.icon]:shrink-0 vjs:[&_.icon]:transition-opacity vjs:[&_.icon]:duration-150 vjs:[&_.icon]:ease-linear vjs:[&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] vjs:[&_.icon]:shadow-black/25"),
17
- PlayButton: cn("vjs:[&_.pause-icon]:opacity-100 vjs:[&[data-paused]_.pause-icon]:opacity-0", "vjs:[&_.play-icon]:opacity-0 vjs:[&[data-paused]_.play-icon]:opacity-100"),
18
- PlayIcon: cn("play-icon"),
19
- PauseIcon: cn("pause-icon"),
20
- PlayTooltipPopup: cn("vjs:[&_.pause-tooltip]:inline vjs:[&[data-paused]_.pause-tooltip]:hidden", "vjs:[&_.play-tooltip]:hidden vjs:[&[data-paused]_.play-tooltip]:inline"),
17
+ PlayIcon: cn("vjs:opacity-0 vjs:group-data-paused/button:opacity-100"),
18
+ PauseIcon: cn("vjs:group-data-paused/button:opacity-0"),
19
+ PlayTooltipPopup: cn("vjs:[&_.pause-tooltip]:inline vjs:[&_.play-tooltip]:hidden", "vjs:data-paused:[&_.pause-tooltip]:hidden vjs:data-paused:[&_.play-tooltip]:inline"),
21
20
  PlayTooltip: cn("play-tooltip"),
22
21
  PauseTooltip: cn("pause-tooltip"),
23
- MuteButton: cn("vjs:[&_.icon]:hidden", "vjs:[&[data-volume-level=\"high\"]_.volume-high-icon]:inline", "vjs:[&[data-volume-level=\"medium\"]_.volume-low-icon]:inline", "vjs:[&[data-volume-level=\"low\"]_.volume-low-icon]:inline", "vjs:[&[data-volume-level=\"off\"]_.volume-off-icon]:inline"),
24
- VolumeHighIcon: cn("volume-high-icon"),
25
- VolumeLowIcon: cn("volume-low-icon"),
26
- VolumeOffIcon: cn("volume-off-icon"),
27
- FullscreenButton: cn("vjs:[&_.fullscreen-enter-icon]:opacity-100 vjs:[&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0", "vjs:[&_.fullscreen-exit-icon]:opacity-0 vjs:[&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100", "vjs:[&_path]:transition-transform vjs:ease-out"),
28
- FullscreenEnterIcon: cn("fullscreen-enter-icon", "vjs:group-hover/button:[&_.arrow-1]:-translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px", "vjs:group-hover/button:[&_.arrow-2]:translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px"),
29
- FullscreenExitIcon: cn("fullscreen-exit-icon", "vjs:[&_.arrow-1]:-translate-x-px vjs:[&_.arrow-1]:-translate-y-px", "vjs:[&_.arrow-2]:translate-x-px vjs:[&_.arrow-2]:translate-y-px", "vjs:group-hover/button:[&_.arrow-1]:translate-0", "vjs:group-hover/button:[&_.arrow-2]:translate-0"),
30
- FullscreenTooltipPopup: cn("vjs:[&_.fullscreen-enter-tooltip]:inline vjs:[&[data-fullscreen]_.fullscreen-enter-tooltip]:hidden", "vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:[&[data-fullscreen]_.fullscreen-exit-tooltip]:inline"),
22
+ VolumeHighIcon: cn("vjs:hidden vjs:group-data-[volume-level=high]/button:inline vjs:group-data-[volume-level=medium]/button:inline"),
23
+ VolumeLowIcon: cn("vjs:hidden vjs:group-data-[volume-level=low]/button:inline"),
24
+ VolumeOffIcon: cn("vjs:hidden vjs:group-data-[volume-level=off]/button:inline"),
25
+ FullscreenEnterIcon: cn("vjs:group-data-fullscreen/button:hidden", "vjs:group-hover/button:[&_.arrow-1]:-translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px", "vjs:group-hover/button:[&_.arrow-2]:translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px"),
26
+ FullscreenExitIcon: cn("vjs:hidden vjs:group-data-fullscreen/button:inline", "vjs:[&_.arrow-1]:-translate-x-px vjs:[&_.arrow-1]:-translate-y-px", "vjs:[&_.arrow-2]:translate-x-px vjs:[&_.arrow-2]:translate-y-px", "vjs:group-hover/button:[&_.arrow-1]:translate-0", "vjs:group-hover/button:[&_.arrow-2]:translate-0"),
27
+ FullscreenTooltipPopup: cn("vjs:[&_.fullscreen-enter-tooltip]:inline vjs:data-fullscreen:[&_.fullscreen-enter-tooltip]:hidden", "vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:data-fullscreen:[&_.fullscreen-exit-tooltip]:inline"),
31
28
  FullscreenEnterTooltip: cn("fullscreen-enter-tooltip"),
32
29
  FullscreenExitTooltip: cn("fullscreen-exit-tooltip"),
33
30
  TimeControls: cn("vjs:flex-1 vjs:flex vjs:items-center vjs:gap-3 vjs:px-1.5"),
34
31
  TimeDisplay: cn("vjs:tabular-nums vjs:text-shadow-2xs/25"),
35
- SliderRoot: cn("vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:relative vjs:rounded-full", "vjs:[&[data-orientation=\"horizontal\"]]:h-5 vjs:[&[data-orientation=\"horizontal\"]]:min-w-20", "vjs:[&[data-orientation=\"vertical\"]]:w-5 vjs:[&[data-orientation=\"vertical\"]]:h-20"),
36
- SliderTrack: cn("vjs:relative vjs:select-none vjs:transition-[outline-offset] vjs:rounded-[inherit] vjs:bg-white/20 vjs:ring-1 vjs:ring-black/5", "vjs:[&[data-orientation=\"horizontal\"]]:w-full vjs:[&[data-orientation=\"horizontal\"]]:h-1", "vjs:[&[data-orientation=\"vertical\"]]:w-1", "vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-blue-500"),
32
+ SliderRoot: cn("vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:relative vjs:rounded-full", "vjs:data-[orientation=horizontal]:h-5 vjs:data-[orientation=horizontal]:min-w-20", "vjs:data-[orientation=vertical]:w-5 vjs:data-[orientation=vertical]:h-20"),
33
+ SliderTrack: cn("vjs:relative vjs:select-none vjs:transition-[outline-offset] vjs:rounded-[inherit] vjs:bg-white/20 vjs:ring-1 vjs:ring-black/5", "vjs:data-[orientation=horizontal]:w-full vjs:data-[orientation=horizontal]:h-1", "vjs:data-[orientation=vertical]:w-1", "vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-blue-500"),
37
34
  SliderProgress: cn("vjs:bg-white vjs:rounded-[inherit]"),
38
35
  SliderPointer: cn("vjs:bg-white/20 vjs:rounded-[inherit]"),
39
- SliderThumb: cn("vjs:bg-white vjs:z-10 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:opacity-0 vjs:transition-[opacity,height,width] vjs:ease-out", "vjs:group-hover/slider:opacity-100 vjs:group-focus-within/slider:opacity-100", "vjs:size-2.5 vjs:active:size-3 vjs:group-active/slider:size-3", "vjs:[&[data-orientation=\"horizontal\"]]:hover:cursor-ew-resize", "vjs:[&[data-orientation=\"vertical\"]]:hover:cursor-ns-resize"),
40
- PopupAnimation: cn("vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-[instant]:duration-0", "vjs:data-[starting-style]:scale-0 vjs:data-[starting-style]:opacity-0 vjs:data-[starting-style]:blur-sm", "vjs:data-[ending-style]:scale-0 vjs:data-[ending-style]:opacity-0 vjs:data-[ending-style]:blur-sm"),
36
+ SliderThumb: cn("vjs:bg-white vjs:z-10 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:opacity-0 vjs:transition-[opacity,height,width] vjs:ease-out", "vjs:group-hover/slider:opacity-100 vjs:group-focus-within/slider:opacity-100", "vjs:size-2.5 vjs:active:size-3 vjs:group-active/slider:size-3", "vjs:data-[orientation=horizontal]:hover:cursor-ew-resize", "vjs:data-[orientation=vertical]:hover:cursor-ns-resize"),
37
+ PopupAnimation: cn("vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-instant:duration-0", "vjs:data-starting-style:scale-0 vjs:data-starting-style:opacity-0 vjs:data-starting-style:blur-sm", "vjs:data-ending-style:scale-0 vjs:data-ending-style:opacity-0 vjs:data-ending-style:blur-sm"),
41
38
  PopoverPopup: cn("vjs:relative vjs:px-1 vjs:py-3 vjs:rounded-full"),
42
39
  TooltipPopup: cn("vjs:whitespace-nowrap vjs:rounded-full vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2.5 vjs:py-1")
43
40
  };
@@ -53,14 +50,13 @@ function FrostedSkin({ children, className = "" }) {
53
50
  /* @__PURE__ */ jsx("div", { className: styles_default.Overlay }),
54
51
  /* @__PURE__ */ jsxs("div", {
55
52
  className: `${styles_default.Surface} ${styles_default.Controls}`,
56
- "data-testid": "media-controls",
57
53
  children: [
58
54
  /* @__PURE__ */ jsxs(Tooltip.Root, {
59
55
  delay: 500,
60
56
  children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsxs(PlayButton_default, {
61
- className: `${styles_default.Button} ${styles_default.IconButton} ${styles_default.PlayButton}`,
62
- children: [/* @__PURE__ */ jsx(Play_default, { className: `${styles_default.PlayIcon} ${styles_default.Icon}` }), /* @__PURE__ */ jsx(Pause_default, { className: `${styles_default.PauseIcon} ${styles_default.Icon}` })]
63
- }) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
57
+ className: `${styles_default.Button} ${styles_default.IconButton}`,
58
+ children: [/* @__PURE__ */ jsx(Play_default, { className: `${styles_default.Icon} ${styles_default.PlayIcon}` }), /* @__PURE__ */ jsx(Pause_default, { className: `${styles_default.Icon} ${styles_default.PauseIcon}` })]
59
+ }) }), /* @__PURE__ */ jsx(Tooltip.Positioner, {
64
60
  side: "top",
65
61
  sideOffset: 12,
66
62
  collisionPadding: 12,
@@ -74,7 +70,7 @@ function FrostedSkin({ children, className = "" }) {
74
70
  children: "Pause"
75
71
  })]
76
72
  })
77
- }) })]
73
+ })]
78
74
  }),
79
75
  /* @__PURE__ */ jsxs("div", {
80
76
  className: styles_default.TimeControls,
@@ -88,7 +84,7 @@ function FrostedSkin({ children, className = "" }) {
88
84
  className: styles_default.SliderTrack,
89
85
  children: [/* @__PURE__ */ jsx(TimeSlider.Progress, { className: styles_default.SliderProgress }), /* @__PURE__ */ jsx(TimeSlider.Pointer, { className: styles_default.SliderPointer })]
90
86
  }), /* @__PURE__ */ jsx(TimeSlider.Thumb, { className: styles_default.SliderThumb })]
91
- }) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
87
+ }) }), /* @__PURE__ */ jsx(Tooltip.Positioner, {
92
88
  side: "top",
93
89
  sideOffset: 18,
94
90
  collisionPadding: 12,
@@ -96,7 +92,7 @@ function FrostedSkin({ children, className = "" }) {
96
92
  className: `${styles_default.Surface} ${styles_default.PopupAnimation} ${styles_default.TooltipPopup}`,
97
93
  children: /* @__PURE__ */ jsx(PreviewTimeDisplay, { className: styles_default.TimeDisplay })
98
94
  })
99
- }) })]
95
+ })]
100
96
  }),
101
97
  /* @__PURE__ */ jsx(DurationDisplay, { className: styles_default.TimeDisplay })
102
98
  ]
@@ -106,13 +102,13 @@ function FrostedSkin({ children, className = "" }) {
106
102
  delay: 200,
107
103
  closeDelay: 100,
108
104
  children: [/* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(MuteButton_default, {
109
- className: `${styles_default.Button} ${styles_default.IconButton} ${styles_default.MuteButton}`,
105
+ className: `${styles_default.Button} ${styles_default.IconButton}`,
110
106
  children: [
111
- /* @__PURE__ */ jsx(VolumeHigh_default, { className: `${styles_default.VolumeHighIcon} ${styles_default.Icon}` }),
112
- /* @__PURE__ */ jsx(VolumeLow_default, { className: `${styles_default.VolumeLowIcon} ${styles_default.Icon}` }),
113
- /* @__PURE__ */ jsx(VolumeOff_default, { className: `${styles_default.VolumeOffIcon} ${styles_default.Icon}` })
107
+ /* @__PURE__ */ jsx(VolumeHigh_default, { className: `${styles_default.Icon} ${styles_default.VolumeHighIcon}` }),
108
+ /* @__PURE__ */ jsx(VolumeLow_default, { className: `${styles_default.Icon} ${styles_default.VolumeLowIcon}` }),
109
+ /* @__PURE__ */ jsx(VolumeOff_default, { className: `${styles_default.Icon} ${styles_default.VolumeOffIcon}` })
114
110
  ]
115
- }) }), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
111
+ }) }), /* @__PURE__ */ jsx(Popover.Positioner, {
116
112
  side: "top",
117
113
  sideOffset: 12,
118
114
  children: /* @__PURE__ */ jsx(Popover.Popup, {
@@ -126,14 +122,14 @@ function FrostedSkin({ children, className = "" }) {
126
122
  }), /* @__PURE__ */ jsx(VolumeSlider.Thumb, { className: styles_default.SliderThumb })]
127
123
  })
128
124
  })
129
- }) })]
125
+ })]
130
126
  }),
131
127
  /* @__PURE__ */ jsxs(Tooltip.Root, {
132
128
  delay: 500,
133
129
  children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { children: /* @__PURE__ */ jsxs(FullscreenButton, {
134
- className: `${styles_default.Button} ${styles_default.IconButton} ${styles_default.FullscreenButton}`,
135
- children: [/* @__PURE__ */ jsx(FullscreenEnter_default, { className: `${styles_default.FullscreenEnterIcon} ${styles_default.Icon}` }), /* @__PURE__ */ jsx(FullscreenExit_default, { className: `${styles_default.FullscreenExitIcon} ${styles_default.Icon}` })]
136
- }) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
130
+ className: `${styles_default.Button} ${styles_default.IconButton}`,
131
+ children: [/* @__PURE__ */ jsx(FullscreenEnter_default, { className: `${styles_default.Icon} ${styles_default.FullscreenEnterIcon} ` }), /* @__PURE__ */ jsx(FullscreenExit_default, { className: `${styles_default.Icon} ${styles_default.FullscreenExitIcon}` })]
132
+ }) }), /* @__PURE__ */ jsx(Tooltip.Positioner, {
137
133
  side: "top",
138
134
  sideOffset: 12,
139
135
  collisionPadding: 12,
@@ -147,7 +143,7 @@ function FrostedSkin({ children, className = "" }) {
147
143
  children: "Exit Fullscreen"
148
144
  })]
149
145
  })
150
- }) })]
146
+ })]
151
147
  })
152
148
  ]
153
149
  })
@@ -157,4 +153,4 @@ function FrostedSkin({ children, className = "" }) {
157
153
 
158
154
  //#endregion
159
155
  export { FrostedSkin as t };
160
- //# sourceMappingURL=frosted-JuY6ZaAp.js.map
156
+ //# sourceMappingURL=frosted-0lXuIgHt.js.map
package/dist/frosted-0lXuIgHt.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"frosted-0lXuIgHt.js","names":["styles: FrostedSkinStyles","styles","PlayButton","PlayIcon","PauseIcon","MuteButton","VolumeHighIcon","VolumeLowIcon","VolumeOffIcon","FullscreenEnterIcon","FullscreenExitIcon"],"sources":["../src/skins/frosted/styles.ts","../src/skins/frosted/FrostedSkin.tsx"],"sourcesContent":["import type { FrostedSkinStyles } from './types';\n\n// NOTE: Removing import to sidestep for compiler complexity (CJP)\n// import { cn } from '../../utils/cn';\n// A (very crude) utility to merge class names\n// Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.\n// It just makes the billions of Tailwind classes a little easier to read.\nfunction cn(...classes: (string | undefined)[]): string {\n return classes.filter(Boolean).join(' ');\n}\n\nconst styles: FrostedSkinStyles = {\n MediaContainer: cn(\n 'vjs', // Scope preflight\n 'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--frosted-border-radius,2rem)',\n // Base typography\n 'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',\n // Fancy borders\n 'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',\n 'vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0',\n // Prevent rounded corners in fullscreen\n 'vjs:[&:fullscreen]:rounded-none',\n // Ensure the nested video inherits the radius\n 'vjs:[&_video]:w-full vjs:[&_video]:h-full',\n ),\n Overlay: cn(\n 'vjs:opacity-0 vjs:delay-500 vjs:duration-300 vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-gradient-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',\n // ------------------------------------\n // FIXME: This is crude temporary logic, we'll improve it later I guess with a [data-show-controls] attribute or something?\n 'vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-100',\n 'vjs:has-[+.controls_[aria-expanded=\"true\"]]:opacity-100 vjs:has-[+.controls_[aria-expanded=\"true\"]]:delay-0 vjs:has-[+.controls_[aria-expanded=\"true\"]]:duration-100',\n 'vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100',\n // ------------------------------------\n ),\n Surface: cn(\n 'vjs:bg-white/10 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',\n // Ring and shadow\n 'vjs:ring vjs:ring-white/10 vjs:ring-inset vjs:shadow-sm vjs:shadow-black/15',\n // Border to enhance contrast on lighter videos\n 'vjs:after:absolute vjs:after:inset-0 vjs:after:ring vjs:after:rounded-[inherit] vjs:after:ring-black/15 vjs:after:pointer-events-none vjs:after:z-10',\n // Reduced transparency for users with preference\n // XXX: This requires a Tailwind custom variant (see 1 below)\n 'vjs:reduced-transparency:bg-black/70 vjs:reduced-transparency:ring-black vjs:reduced-transparency:after:ring-white/20',\n // High contrast mode\n 'vjs:contrast-more:bg-black/90 vjs:contrast-more:ring-black vjs:contrast-more:after:ring-white/20',\n ),\n Controls: cn(\n // ------------------------------------\n // FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.\n 'controls',\n // ------------------------------------\n 'vjs:@container/controls vjs:absolute vjs:inset-x-3 vjs:bottom-3 vjs:rounded-full vjs:flex vjs:items-center vjs:p-1 vjs:gap-0.5 vjs:text-white',\n // Animation\n 'vjs:transition vjs:will-change-[transform,scale,filter,opacity] vjs:origin-bottom vjs:ease-out',\n // ------------------------------------\n // FIXME: Temporary hide/show logic, related to above.\n 'vjs:scale-90 vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300',\n 'vjs:has-[[data-paused]]:scale-100 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-100',\n 'vjs:has-[[aria-expanded=\"true\"]]:scale-100 vjs:has-[[aria-expanded=\"true\"]]:opacity-100 vjs:has-[[aria-expanded=\"true\"]]:blur-none vjs:has-[[aria-expanded=\"true\"]]:delay-0 vjs:has-[[aria-expanded=\"true\"]]:duration-100',\n 'vjs:group-hover/root:scale-100 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100',\n // ------------------------------------\n ),\n Icon: cn('icon vjs:[&_path]:transition-transform vjs:[&_path]:ease-out'),\n Button: cn(\n 'vjs:group/button vjs:cursor-pointer vjs:relative vjs:shrink-0 vjs:transition-[color,background,outline-offset] vjs:select-none vjs:p-2 vjs:rounded-full',\n // Background/foreground\n 'vjs:bg-transparent vjs:text-white/90',\n // Hover and focus states\n 'vjs:hover:no-underline vjs:hover:bg-white/10 vjs:hover:text-white vjs:focus-visible:no-underline vjs:focus-visible:bg-white/10 vjs:focus-visible:text-white',\n // Focus state\n 'vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-blue-500',\n // Disabled state\n 'vjs:disabled:grayscale vjs:disabled:opacity-50 vjs:disabled:cursor-not-allowed',\n // Loading state\n 'vjs:aria-busy:pointer-events-none vjs:aria-busy:cursor-not-allowed',\n // Expanded state\n 'vjs:aria-expanded:bg-white/10 vjs:aria-expanded:text-white',\n ),\n IconButton: cn(\n 'vjs:grid vjs:[&_.icon]:[grid-area:1/1]',\n 'vjs:[&_.icon]:shrink-0 vjs:[&_.icon]:transition-opacity vjs:[&_.icon]:duration-150 vjs:[&_.icon]:ease-linear vjs:[&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] vjs:[&_.icon]:shadow-black/25',\n ),\n PlayIcon: cn('vjs:opacity-0 vjs:group-data-paused/button:opacity-100'),\n PauseIcon: cn('vjs:group-data-paused/button:opacity-0'),\n PlayTooltipPopup: cn(\n 'vjs:[&_.pause-tooltip]:inline vjs:[&_.play-tooltip]:hidden',\n 'vjs:data-paused:[&_.pause-tooltip]:hidden vjs:data-paused:[&_.play-tooltip]:inline',\n ),\n PlayTooltip: cn('play-tooltip'),\n PauseTooltip: cn('pause-tooltip'),\n VolumeHighIcon: cn('vjs:hidden vjs:group-data-[volume-level=high]/button:inline vjs:group-data-[volume-level=medium]/button:inline'),\n VolumeLowIcon: cn('vjs:hidden vjs:group-data-[volume-level=low]/button:inline'),\n VolumeOffIcon: cn('vjs:hidden vjs:group-data-[volume-level=off]/button:inline'),\n FullscreenEnterIcon: cn(\n 'vjs:group-data-fullscreen/button:hidden',\n 'vjs:group-hover/button:[&_.arrow-1]:-translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px',\n 'vjs:group-hover/button:[&_.arrow-2]:translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px',\n ),\n FullscreenExitIcon: cn(\n 'vjs:hidden vjs:group-data-fullscreen/button:inline',\n 'vjs:[&_.arrow-1]:-translate-x-px vjs:[&_.arrow-1]:-translate-y-px',\n 'vjs:[&_.arrow-2]:translate-x-px vjs:[&_.arrow-2]:translate-y-px',\n 'vjs:group-hover/button:[&_.arrow-1]:translate-0',\n 'vjs:group-hover/button:[&_.arrow-2]:translate-0',\n ),\n FullscreenTooltipPopup: cn(\n 'vjs:[&_.fullscreen-enter-tooltip]:inline vjs:data-fullscreen:[&_.fullscreen-enter-tooltip]:hidden',\n 'vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:data-fullscreen:[&_.fullscreen-exit-tooltip]:inline',\n ),\n FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),\n FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),\n TimeControls: cn('vjs:flex-1 vjs:flex vjs:items-center vjs:gap-3 vjs:px-1.5'),\n TimeDisplay: cn('vjs:tabular-nums vjs:text-shadow-2xs/25'),\n SliderRoot: cn(\n 'vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:relative vjs:rounded-full',\n 'vjs:data-[orientation=horizontal]:h-5 vjs:data-[orientation=horizontal]:min-w-20',\n 'vjs:data-[orientation=vertical]:w-5 vjs:data-[orientation=vertical]:h-20',\n ),\n SliderTrack: cn(\n 'vjs:relative vjs:select-none vjs:transition-[outline-offset] vjs:rounded-[inherit] vjs:bg-white/20 vjs:ring-1 vjs:ring-black/5',\n 'vjs:data-[orientation=horizontal]:w-full vjs:data-[orientation=horizontal]:h-1',\n 'vjs:data-[orientation=vertical]:w-1',\n 'vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-blue-500',\n ),\n SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),\n // TODO: Work out what we want to do here.\n SliderPointer: cn('vjs:bg-white/20 vjs:rounded-[inherit]'),\n SliderThumb: cn(\n 'vjs:bg-white vjs:z-10 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:opacity-0 vjs:transition-[opacity,height,width] vjs:ease-out',\n 'vjs:group-hover/slider:opacity-100 vjs:group-focus-within/slider:opacity-100',\n 'vjs:size-2.5 vjs:active:size-3 vjs:group-active/slider:size-3',\n 'vjs:data-[orientation=horizontal]:hover:cursor-ew-resize',\n 'vjs:data-[orientation=vertical]:hover:cursor-ns-resize',\n ),\n PopupAnimation: cn(\n // Animation\n // XXX: We can't use transforms since floating UI uses them for positioning.\n 'vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-instant:duration-0',\n 'vjs:data-starting-style:scale-0 vjs:data-starting-style:opacity-0 vjs:data-starting-style:blur-sm',\n 'vjs:data-ending-style:scale-0 vjs:data-ending-style:opacity-0 vjs:data-ending-style:blur-sm',\n ),\n PopoverPopup: cn('vjs:relative vjs:px-1 vjs:py-3 vjs:rounded-full'),\n TooltipPopup: cn('vjs:whitespace-nowrap vjs:rounded-full vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2.5 vjs:py-1'),\n};\n\n/*\n[1] @custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);\n*/\n\nexport default styles;\n","import type { PropsWithChildren } from 'react';\n\nimport { CurrentTimeDisplay } from '@/components/CurrentTimeDisplay';\nimport { DurationDisplay } from '@/components/DurationDisplay';\nimport { FullscreenButton } from '@/components/FullscreenButton';\nimport { MediaContainer } from '@/components/MediaContainer';\nimport MuteButton from '@/components/MuteButton';\nimport PlayButton from '@/components/PlayButton';\nimport { Popover } from '@/components/Popover';\nimport { PreviewTimeDisplay } from '@/components/PreviewTimeDisplay';\nimport { TimeSlider } from '@/components/TimeSlider';\nimport { Tooltip } from '@/components/Tooltip';\nimport { VolumeSlider } from '@/components/VolumeSlider';\nimport {\n FullscreenEnterIcon,\n FullscreenExitIcon,\n PauseIcon,\n PlayIcon,\n VolumeHighIcon,\n VolumeLowIcon,\n VolumeOffIcon,\n} from '@/icons';\nimport styles from './styles';\n\ntype SkinProps = PropsWithChildren<{\n className?: string;\n}>;\n\nexport default function FrostedSkin({ children, className = '' }: SkinProps): JSX.Element {\n return (\n <MediaContainer className={`${styles.MediaContainer} ${className}`}>\n {children}\n\n <div className={styles.Overlay} />\n\n <div className={`${styles.Surface} ${styles.Controls}`}>\n <Tooltip.Root delay={500}>\n <Tooltip.Trigger>\n <PlayButton className={`${styles.Button} ${styles.IconButton}`}>\n <PlayIcon className={`${styles.Icon} ${styles.PlayIcon}`} />\n <PauseIcon className={`${styles.Icon} ${styles.PauseIcon}`} />\n </PlayButton>\n </Tooltip.Trigger>\n <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n <Tooltip.Popup className={`${styles.TooltipPopup} ${styles.Surface} ${styles.PopupAnimation} ${styles.PlayTooltipPopup}`}>\n <span className={styles.PlayTooltip}>Play</span>\n <span className={styles.PauseTooltip}>Pause</span>\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Root>\n\n <div className={styles.TimeControls}>\n <CurrentTimeDisplay\n // Use showRemaining to show count down/remaining time\n // showRemaining\n className={styles.TimeDisplay}\n />\n\n <Tooltip.Root trackCursorAxis=\"x\">\n <Tooltip.Trigger>\n <TimeSlider.Root className={styles.SliderRoot}>\n <TimeSlider.Track className={styles.SliderTrack}>\n <TimeSlider.Progress className={styles.SliderProgress} />\n <TimeSlider.Pointer className={styles.SliderPointer} />\n </TimeSlider.Track>\n <TimeSlider.Thumb className={styles.SliderThumb} />\n </TimeSlider.Root>\n </Tooltip.Trigger>\n <Tooltip.Positioner side=\"top\" sideOffset={18} collisionPadding={12}>\n <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup}`}>\n <PreviewTimeDisplay className={styles.TimeDisplay} />\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Root>\n\n <DurationDisplay className={styles.TimeDisplay} />\n </div>\n\n <Popover.Root openOnHover delay={200} closeDelay={100}>\n <Popover.Trigger>\n <MuteButton className={`${styles.Button} ${styles.IconButton}`}>\n <VolumeHighIcon className={`${styles.Icon} ${styles.VolumeHighIcon}`} />\n <VolumeLowIcon className={`${styles.Icon} ${styles.VolumeLowIcon}`} />\n <VolumeOffIcon className={`${styles.Icon} ${styles.VolumeOffIcon}`} />\n </MuteButton>\n </Popover.Trigger>\n <Popover.Positioner side=\"top\" sideOffset={12}>\n <Popover.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.PopoverPopup}`}>\n <VolumeSlider.Root className={styles.SliderRoot} orientation=\"vertical\">\n <VolumeSlider.Track className={styles.SliderTrack}>\n <VolumeSlider.Progress className={styles.SliderProgress} />\n </VolumeSlider.Track>\n <VolumeSlider.Thumb className={styles.SliderThumb} />\n </VolumeSlider.Root>\n </Popover.Popup>\n </Popover.Positioner>\n </Popover.Root>\n\n <Tooltip.Root delay={500}>\n <Tooltip.Trigger>\n <FullscreenButton className={`${styles.Button} ${styles.IconButton}`}>\n <FullscreenEnterIcon className={`${styles.Icon} ${styles.FullscreenEnterIcon} `} />\n <FullscreenExitIcon className={`${styles.Icon} ${styles.FullscreenExitIcon}`} />\n </FullscreenButton>\n </Tooltip.Trigger>\n <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.FullscreenTooltipPopup}`}>\n <span className={styles.FullscreenEnterTooltip}>Enter Fullscreen</span>\n <span className={styles.FullscreenExitTooltip}>Exit Fullscreen</span>\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Root>\n </div>\n </MediaContainer>\n );\n}\n\n// function ArrowSvg(props: React.ComponentProps<'svg'>) {\n// return (\n// <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n// <path\n// d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n// className={styles.ArrowFill}\n// />\n// <path\n// d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n// className={styles.ArrowOuterStroke}\n// />\n// <path\n// d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n// className={styles.ArrowInnerStroke}\n// />\n// </svg>\n// );\n// }\n"],"mappings":"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"}
package/dist/index.d.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  import { a as useMediaDispatch, c as useMediaStore, i as VideoProvider, l as MediaContext, n as MediaStateOwner, o as useMediaRef, r as MediaStore, s as useMediaSelector, t as MediaState } from "./index-CM70WSkA.js";
2
2
  import { t as FrostedSkin } from "./FrostedSkin-t8edr5LV.js";
3
3
  import { t as MinimalSkin } from "./MinimalSkin-DzHkJgW-.js";
4
- import React$1, { CSSProperties, DetailedHTMLProps, ElementType, FC, HTMLProps, MutableRefObject, PropsWithChildren, ReactElement, ReactNode, Ref, RefCallback, VideoHTMLAttributes } from "react";
5
- import { Placement } from "@floating-ui/react";
4
+ import React$1, { CSSProperties, DetailedHTMLProps, ElementType, FC, HTMLProps, PropsWithChildren, ReactElement, ReactNode, Ref, RefCallback, VideoHTMLAttributes } from "react";
6
5
  import { TimeSlider as TimeSlider$1, VolumeSlider as VolumeSlider$1 } from "@videojs/core";
7
6
 
8
7
  //#region src/utils/component-factory.d.ts
@@ -100,9 +99,7 @@ declare function useMediaContainerRef(): RefCallback<HTMLElement | null>;
100
99
  * </MediaContainer>
101
100
  * );
102
101
  */
103
- declare const MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement> & {
104
- portalId?: string;
105
- }>>;
102
+ declare const MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement>>>;
106
103
  //#endregion
107
104
  //#region src/components/MuteButton.d.ts
108
105
  declare function useMuteButtonState(_props: any): {
@@ -130,6 +127,7 @@ declare function renderPlayButton(props: PlayButtonProps, state: PlayButtonState
130
127
  declare const PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>;
131
128
  //#endregion
132
129
  //#region src/components/Popover.d.ts
130
+ type Placement$1 = "top" | "top-start" | "top-end";
133
131
  interface PopoverRootProps {
134
132
  openOnHover?: boolean;
135
133
  delay?: number;
@@ -140,19 +138,15 @@ interface PopoverTriggerProps {
140
138
  children: ReactNode;
141
139
  }
142
140
  interface PopoverPositionerProps {
143
- side?: Placement;
141
+ side?: Placement$1;
144
142
  sideOffset?: number;
145
143
  children: ReactNode;
146
144
  }
147
145
  interface PopoverPopupProps {
146
+ id?: string;
148
147
  className?: string;
149
148
  children: ReactNode;
150
149
  }
151
- interface PopoverPortalProps {
152
- children: ReactNode;
153
- root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;
154
- rootId?: string;
155
- }
156
150
  declare function PopoverRoot({
157
151
  openOnHover,
158
152
  delay,
@@ -168,20 +162,15 @@ declare function PopoverPositioner({
168
162
  children
169
163
  }: PopoverPositionerProps): JSX.Element | null;
170
164
  declare function PopoverPopup({
165
+ id,
171
166
  className,
172
167
  children
173
168
  }: PopoverPopupProps): JSX.Element;
174
- declare function PopoverPortal({
175
- children,
176
- root,
177
- rootId
178
- }: PopoverPortalProps): JSX.Element;
179
169
  declare const Popover: {
180
170
  Root: typeof PopoverRoot;
181
171
  Trigger: typeof PopoverTrigger;
182
172
  Positioner: typeof PopoverPositioner;
183
173
  Popup: typeof PopoverPopup;
184
- Portal: typeof PopoverPortal;
185
174
  };
186
175
  //#endregion
187
176
  //#region src/components/PreviewTimeDisplay.d.ts
@@ -223,6 +212,7 @@ declare const TimeSlider: {
223
212
  };
224
213
  //#endregion
225
214
  //#region src/components/Tooltip.d.ts
215
+ type Placement = "top" | "top-start" | "top-end";
226
216
  interface TooltipRootProps {
227
217
  delay?: number;
228
218
  closeDelay?: number;
@@ -239,18 +229,10 @@ interface TooltipPositionerProps {
239
229
  children: ReactNode;
240
230
  }
241
231
  interface TooltipPopupProps {
232
+ id?: string;
242
233
  className?: string;
243
234
  children: ReactNode;
244
235
  }
245
- interface TooltipArrowProps {
246
- className?: string;
247
- children: ReactNode;
248
- }
249
- interface TooltipPortalProps {
250
- children: ReactNode;
251
- root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;
252
- rootId?: string;
253
- }
254
236
  declare function TooltipRoot({
255
237
  delay,
256
238
  closeDelay,
@@ -267,25 +249,15 @@ declare function TooltipPositioner({
267
249
  children
268
250
  }: TooltipPositionerProps): JSX.Element | null;
269
251
  declare function TooltipPopup({
252
+ id,
270
253
  className,
271
254
  children
272
255
  }: TooltipPopupProps): JSX.Element | null;
273
- declare function TooltipArrow({
274
- className,
275
- children
276
- }: TooltipArrowProps): JSX.Element;
277
- declare function TooltipPortal({
278
- children,
279
- root,
280
- rootId
281
- }: TooltipPortalProps): JSX.Element;
282
256
  declare const Tooltip: {
283
257
  Root: typeof TooltipRoot;
284
258
  Trigger: typeof TooltipTrigger;
285
259
  Positioner: typeof TooltipPositioner;
286
260
  Popup: typeof TooltipPopup;
287
- Arrow: typeof TooltipArrow;
288
- Portal: typeof TooltipPortal;
289
261
  };
290
262
  //#endregion
291
263
  //#region src/components/Video.d.ts