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

package/README.md

@@ -24,5 +24,5 @@ members:
 
 [package]: https://www.npmjs.com/package/@videojs/react
 [package-badge]: https://img.shields.io/npm/v/@videojs/react/next?label=@videojs/react@next
-[discord]: https://discord.gg/b664Gq3pdy
+[discord]: https://discord.gg/JBqHh485uF
 [gh-discussions]: https://github.com/videojs/v10/discussions

package/dist/{VolumeSlider-DoR6idnJ.js → VolumeSlider-CWpLFzdJ.js}

@@ -1,4 +1,4 @@
-import { a as useMediaStore, i as useMediaSelector } from "./store-DpQF8Ges.js";
+import { a as useMediaStore, i as useMediaSelector } from "./store-hGO5HE2A.js";
 import { currentTimeDisplayStateDefinition, durationDisplayStateDefinition, fullscreenButtonStateDefinition, muteButtonStateDefinition, playButtonStateDefinition, previewTimeDisplayStateDefinition, timeSliderStateDefinition, volumeSliderStateDefinition } from "@videojs/core/store";
 import { formatDisplayTime, shallowEqual } from "@videojs/utils";
 import * as React$1 from "react";
@@ -902,4 +902,4 @@ var VolumeSlider_default = VolumeSlider$1;
 
 //#endregion
 export { DurationDisplay as _, TimeSlider$1 as a, Popover as c, PlayButton_default as d, MuteButton as f, FullscreenButton as g, useMediaContainerRef as h, Tooltip_default as i, Popover_default as l, MediaContainer as m, VolumeSlider_default as n, PreviewTimeDisplay as o, MuteButton_default as p, Tooltip as r, PreviewTimeDisplay_default as s, VolumeSlider$1 as t, PlayButton as u, CurrentTimeDisplay as v };
-//# sourceMappingURL=VolumeSlider-DoR6idnJ.js.map
+//# sourceMappingURL=VolumeSlider-CWpLFzdJ.js.map

package/dist/{VolumeSlider-DoR6idnJ.js.map → VolumeSlider-CWpLFzdJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VolumeSlider-DoR6idnJ.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> & { portalId?: string }>>","baseProps: Record<string, any>","MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>","baseProps: Record<string, any>","PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>","open","value: PopoverContextType","Popover: {\n  Root: typeof PopoverRoot;\n  Trigger: typeof PopoverTrigger;\n  Positioner: typeof PopoverPositioner;\n  Popup: typeof PopoverPopup;\n  Portal: typeof PopoverPortal;\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","positionerContextValue: TooltipPositionerContextType","Tooltip: {\n  Root: typeof TooltipRoot;\n  Trigger: typeof TooltipTrigger;\n  Positioner: typeof TooltipPositioner;\n  Popup: typeof TooltipPopup;\n  Arrow: typeof TooltipArrow;\n  Portal: typeof TooltipPortal;\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> & { portalId?: string }>> = forwardRef(\n  ({ children, portalId = '@default_portal_id', ...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        {...props}\n      >\n        {children}\n        {/* @TODO We need to make sure this is non-brittle longer term (CJP) */}\n        <div id={portalId} style={{ position: 'absolute', zIndex: 10 }} />\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 { OpenChangeReason, Placement } from '@floating-ui/react';\nimport type { MutableRefObject, ReactNode } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStatus,\n} from '@floating-ui/react';\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\ninterface PopoverContextType {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openReason: OpenChangeReason | null;\n  refs: ReturnType<typeof useFloating>['refs'];\n  floatingStyles: ReturnType<typeof useFloating>['floatingStyles'];\n  getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];\n  getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n  context: ReturnType<typeof useFloating>['context'];\n  updatePositioning: (placement: Placement, sideOffset: number) => void;\n  transitionStatus: ReturnType<typeof useTransitionStatus>['status'];\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  className?: string;\n  children: ReactNode;\n}\n\ninterface PopoverPortalProps {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;\n  rootId?: string;\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 [openReason, setOpenReason] = useState<OpenChangeReason | null>(null);\n\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: (open, _event, reason) => {\n      setOpen(open);\n      setOpenReason(reason || null);\n    },\n    placement,\n    middleware: [offset(sideOffset), flip(), shift()],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { status: transitionStatus } = useTransitionStatus(context);\n\n  const hover = useHover(context, {\n    enabled: openOnHover,\n    mouseOnly: true,\n    move: false,\n    delay: {\n      open: delay,\n      close: closeDelay,\n    },\n    handleClose: safePolygon({ blockPointerEvents: true }),\n  });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);\n\n  const updatePositioning = useCallback((newPlacement: Placement, newSideOffset: number) => {\n    setPlacement(newPlacement);\n    setSideOffset(newSideOffset);\n  }, []);\n\n  const value: PopoverContextType = useMemo(() => ({\n    open,\n    setOpen,\n    openReason,\n    refs,\n    floatingStyles,\n    getReferenceProps,\n    getFloatingProps,\n    context,\n    updatePositioning,\n    transitionStatus,\n  }), [open, openReason, refs, floatingStyles, getReferenceProps, getFloatingProps, context, updatePositioning, transitionStatus]);\n\n  return <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>;\n}\n\nfunction PopoverTrigger({ children }: PopoverTriggerProps): JSX.Element {\n  const { refs, getReferenceProps, 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: refs.setReference,\n    ...getReferenceProps(),\n    'data-popup-open': open ? '' : undefined,\n  });\n}\n\nfunction PopoverPositioner({ side = 'top', sideOffset = 5, children }: PopoverPositionerProps): JSX.Element | null {\n  const { refs, floatingStyles, updatePositioning } = usePopoverContext();\n\n  useEffect(() => {\n    updatePositioning(side, sideOffset);\n  }, [side, sideOffset, updatePositioning]);\n\n  return (\n    <div ref={refs.setFloating} style={floatingStyles}>\n      {children}\n    </div>\n  );\n}\n\nfunction PopoverPopup({ className, children }: PopoverPopupProps): JSX.Element {\n  const { getFloatingProps, context, transitionStatus } = usePopoverContext();\n  const { refs, placement } = context;\n  const triggerElement = refs.reference.current as HTMLElement | null;\n\n  // Copy data attributes from trigger element\n  const dataAttributes = triggerElement?.attributes\n    ? Object.fromEntries(\n        Array.from(triggerElement.attributes)\n          .filter(attr => attr.name.startsWith('data-'))\n          .map(attr => [attr.name, attr.value]),\n      )\n    : {};\n\n  return (\n    <FloatingFocusManager\n      context={context}\n      modal={false}\n      initialFocus={-1}\n      returnFocus={false}\n    >\n      <div\n        className={className}\n        {...getFloatingProps()}\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    </FloatingFocusManager>\n  );\n}\n\nfunction PopoverPortal({ children, root, rootId = '@default_portal_id' }: PopoverPortalProps): JSX.Element {\n  return (\n    <FloatingPortal root={root as HTMLElement} id={rootId as string}>\n      {children}\n    </FloatingPortal>\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  Portal: typeof PopoverPortal;\n} = {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Positioner: PopoverPositioner,\n  Popup: PopoverPopup,\n  Portal: PopoverPortal,\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 { Placement } from '@floating-ui/react';\nimport type { MutableRefObject, ReactNode, RefObject } from 'react';\n\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingPortal,\n  offset,\n  shift,\n  useClientPoint,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStatus,\n} from '@floating-ui/react';\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\ninterface UpdatePositioningProps {\n  side: Placement;\n  sideOffset: number;\n  collisionPadding: number;\n}\n\ninterface TooltipContextType {\n  arrowRef: MutableRefObject<HTMLElement | null>;\n  context: ReturnType<typeof useFloating>['context'];\n  transitionStatus: ReturnType<typeof useTransitionStatus>['status'];\n  getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];\n  getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n  updatePositioning: (props: UpdatePositioningProps) => void;\n  trackCursorAxis?: 'x' | 'y' | 'both' | undefined;\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  className?: string;\n  children: ReactNode;\n}\n\ninterface TooltipArrowProps {\n  className?: string;\n  children: ReactNode;\n}\n\ninterface TooltipPortalProps {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;\n  rootId?: string;\n}\n\nconst TooltipContext = createContext<TooltipContextType | null>(null);\n\ninterface TooltipPositionerContextType {\n  side: Placement;\n}\n\nconst TooltipPositionerContext = createContext<TooltipPositionerContextType | 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 useTooltipPositionerContext(): TooltipPositionerContextType {\n  const context = useContext(TooltipPositionerContext);\n  if (!context) {\n    throw new Error('TooltipArrow must be used within TooltipPositioner');\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 arrowRef = useRef<HTMLElement | null>(null);\n\n  const { context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement,\n    middleware: [\n      offset(sideOffset),\n      flip(),\n      shift({ padding: collisionPadding }),\n      arrow({\n        element: arrowRef,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { status: transitionStatus } = useTransitionStatus(context);\n\n  const hover = useHover(context, {\n    // restMs: 300, // this broke the time slider tooltip, todo: find solution!\n    delay: {\n      open: delay,\n      close: closeDelay,\n    },\n  });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'tooltip' });\n\n  // Use client point hook when trackCursorAxis is enabled\n  const clientPoint = useClientPoint(context, {\n    axis: trackCursorAxis || 'both',\n    enabled: !!trackCursorAxis,\n  });\n\n  // Combine interactions based on whether cursor tracking is enabled\n  const interactions = trackCursorAxis\n    ? [hover, focus, dismiss, role, clientPoint]\n    : [hover, focus, dismiss, role];\n\n  const { getReferenceProps, getFloatingProps } = useInteractions(interactions);\n\n  const updatePositioning = useCallback(({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => {\n    setPlacement(side);\n    setSideOffset(sideOffset);\n    setCollisionPadding(collisionPadding);\n  }, []);\n\n  const value: TooltipContextType = useMemo(() => ({\n    getReferenceProps,\n    getFloatingProps,\n    context,\n    updatePositioning,\n    arrowRef,\n    transitionStatus,\n    trackCursorAxis,\n  }), [getReferenceProps, getFloatingProps, context, updatePositioning, transitionStatus, trackCursorAxis]);\n\n  return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;\n}\n\nfunction TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element {\n  const { context, getReferenceProps } = useTooltipContext();\n  const { refs, open } = context;\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: refs.setReference,\n    ...getReferenceProps(),\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 { context, updatePositioning, trackCursorAxis } = useTooltipContext();\n  const { refs, floatingStyles } = context;\n\n  // Update positioning when props change\n  useEffect(() => {\n    updatePositioning({ side, sideOffset, collisionPadding });\n  }, [side, sideOffset, collisionPadding, updatePositioning]);\n\n  const positionerContextValue: TooltipPositionerContextType = useMemo(() => ({\n    side,\n  }), [side]);\n\n  return (\n    <TooltipPositionerContext.Provider value={positionerContextValue}>\n      <div\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          pointerEvents: trackCursorAxis ? 'none' : undefined,\n        }}\n      >\n        {children}\n      </div>\n    </TooltipPositionerContext.Provider>\n  );\n}\n\nfunction TooltipPopup({ className = '', children }: TooltipPopupProps): JSX.Element | null {\n  const { context, getFloatingProps, transitionStatus } = useTooltipContext();\n  const { refs, placement } = context;\n  const triggerElement = refs.reference.current as HTMLElement | null;\n\n  // Copy data attributes from trigger element\n  const dataAttributes = triggerElement?.attributes\n    ? Object.fromEntries(\n        Array.from(triggerElement.attributes)\n          .filter(attr => attr.name.startsWith('data-'))\n          .map(attr => [attr.name, attr.value]),\n      )\n    : {};\n\n  return (\n    <div\n      className={className}\n      {...getFloatingProps()}\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\nfunction TooltipArrow({ className = '', children }: TooltipArrowProps): JSX.Element {\n  const { arrowRef, context } = useTooltipContext();\n  const { side } = useTooltipPositionerContext();\n\n  // Get arrow positioning data from floating-ui\n  const { x: arrowX, y: arrowY } = context.middlewareData.arrow || { x: 0, y: 0 };\n\n  return (\n    <div\n      ref={arrowRef as RefObject<HTMLDivElement>}\n      className={className}\n      aria-hidden=\"true\"\n      data-side={side}\n      style={{\n        left: arrowX != null ? `${arrowX}px` : undefined,\n        top: arrowY != null ? `${arrowY}px` : undefined,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction TooltipPortal({ children, root, rootId = '@default_portal_id' }: TooltipPortalProps): JSX.Element {\n  return (\n    <FloatingPortal root={root as HTMLElement} id={rootId as string}>\n      {children}\n    </FloatingPortal>\n  );\n}\n\n// Export compound component\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  Arrow: typeof TooltipArrow;\n  Portal: typeof TooltipPortal;\n} = {\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n  Positioner: TooltipPositioner,\n  Popup: TooltipPopup,\n  Arrow: TooltipArrow,\n  Portal: TooltipPortal,\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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"}
+{"version":3,"file":"VolumeSlider-CWpLFzdJ.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> & { portalId?: string }>>","baseProps: Record<string, any>","MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>","baseProps: Record<string, any>","PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>","open","value: PopoverContextType","Popover: {\n  Root: typeof PopoverRoot;\n  Trigger: typeof PopoverTrigger;\n  Positioner: typeof PopoverPositioner;\n  Popup: typeof PopoverPopup;\n  Portal: typeof PopoverPortal;\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","positionerContextValue: TooltipPositionerContextType","Tooltip: {\n  Root: typeof TooltipRoot;\n  Trigger: typeof TooltipTrigger;\n  Positioner: typeof TooltipPositioner;\n  Popup: typeof TooltipPopup;\n  Arrow: typeof TooltipArrow;\n  Portal: typeof TooltipPortal;\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> & { portalId?: string }>> = forwardRef(\n  ({ children, portalId = '@default_portal_id', ...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        {...props}\n      >\n        {children}\n        {/* @TODO We need to make sure this is non-brittle longer term (CJP) */}\n        <div id={portalId} style={{ position: 'absolute', zIndex: 10 }} />\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 { OpenChangeReason, Placement } from '@floating-ui/react';\nimport type { MutableRefObject, ReactNode } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStatus,\n} from '@floating-ui/react';\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\ninterface PopoverContextType {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  openReason: OpenChangeReason | null;\n  refs: ReturnType<typeof useFloating>['refs'];\n  floatingStyles: ReturnType<typeof useFloating>['floatingStyles'];\n  getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];\n  getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n  context: ReturnType<typeof useFloating>['context'];\n  updatePositioning: (placement: Placement, sideOffset: number) => void;\n  transitionStatus: ReturnType<typeof useTransitionStatus>['status'];\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  className?: string;\n  children: ReactNode;\n}\n\ninterface PopoverPortalProps {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;\n  rootId?: string;\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 [openReason, setOpenReason] = useState<OpenChangeReason | null>(null);\n\n  const { refs, floatingStyles, context } = useFloating({\n    open,\n    onOpenChange: (open, _event, reason) => {\n      setOpen(open);\n      setOpenReason(reason || null);\n    },\n    placement,\n    middleware: [offset(sideOffset), flip(), shift()],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { status: transitionStatus } = useTransitionStatus(context);\n\n  const hover = useHover(context, {\n    enabled: openOnHover,\n    mouseOnly: true,\n    move: false,\n    delay: {\n      open: delay,\n      close: closeDelay,\n    },\n    handleClose: safePolygon({ blockPointerEvents: true }),\n  });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);\n\n  const updatePositioning = useCallback((newPlacement: Placement, newSideOffset: number) => {\n    setPlacement(newPlacement);\n    setSideOffset(newSideOffset);\n  }, []);\n\n  const value: PopoverContextType = useMemo(() => ({\n    open,\n    setOpen,\n    openReason,\n    refs,\n    floatingStyles,\n    getReferenceProps,\n    getFloatingProps,\n    context,\n    updatePositioning,\n    transitionStatus,\n  }), [open, openReason, refs, floatingStyles, getReferenceProps, getFloatingProps, context, updatePositioning, transitionStatus]);\n\n  return <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>;\n}\n\nfunction PopoverTrigger({ children }: PopoverTriggerProps): JSX.Element {\n  const { refs, getReferenceProps, 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: refs.setReference,\n    ...getReferenceProps(),\n    'data-popup-open': open ? '' : undefined,\n  });\n}\n\nfunction PopoverPositioner({ side = 'top', sideOffset = 5, children }: PopoverPositionerProps): JSX.Element | null {\n  const { refs, floatingStyles, updatePositioning } = usePopoverContext();\n\n  useEffect(() => {\n    updatePositioning(side, sideOffset);\n  }, [side, sideOffset, updatePositioning]);\n\n  return (\n    <div ref={refs.setFloating} style={floatingStyles}>\n      {children}\n    </div>\n  );\n}\n\nfunction PopoverPopup({ className, children }: PopoverPopupProps): JSX.Element {\n  const { getFloatingProps, context, transitionStatus } = usePopoverContext();\n  const { refs, placement } = context;\n  const triggerElement = refs.reference.current as HTMLElement | null;\n\n  // Copy data attributes from trigger element\n  const dataAttributes = triggerElement?.attributes\n    ? Object.fromEntries(\n        Array.from(triggerElement.attributes)\n          .filter(attr => attr.name.startsWith('data-'))\n          .map(attr => [attr.name, attr.value]),\n      )\n    : {};\n\n  return (\n    <FloatingFocusManager\n      context={context}\n      modal={false}\n      initialFocus={-1}\n      returnFocus={false}\n    >\n      <div\n        className={className}\n        {...getFloatingProps()}\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    </FloatingFocusManager>\n  );\n}\n\nfunction PopoverPortal({ children, root, rootId = '@default_portal_id' }: PopoverPortalProps): JSX.Element {\n  return (\n    <FloatingPortal root={root as HTMLElement} id={rootId as string}>\n      {children}\n    </FloatingPortal>\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  Portal: typeof PopoverPortal;\n} = {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Positioner: PopoverPositioner,\n  Popup: PopoverPopup,\n  Portal: PopoverPortal,\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 { Placement } from '@floating-ui/react';\nimport type { MutableRefObject, ReactNode, RefObject } from 'react';\n\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  FloatingPortal,\n  offset,\n  shift,\n  useClientPoint,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  useTransitionStatus,\n} from '@floating-ui/react';\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\ninterface UpdatePositioningProps {\n  side: Placement;\n  sideOffset: number;\n  collisionPadding: number;\n}\n\ninterface TooltipContextType {\n  arrowRef: MutableRefObject<HTMLElement | null>;\n  context: ReturnType<typeof useFloating>['context'];\n  transitionStatus: ReturnType<typeof useTransitionStatus>['status'];\n  getReferenceProps: ReturnType<typeof useInteractions>['getReferenceProps'];\n  getFloatingProps: ReturnType<typeof useInteractions>['getFloatingProps'];\n  updatePositioning: (props: UpdatePositioningProps) => void;\n  trackCursorAxis?: 'x' | 'y' | 'both' | undefined;\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  className?: string;\n  children: ReactNode;\n}\n\ninterface TooltipArrowProps {\n  className?: string;\n  children: ReactNode;\n}\n\ninterface TooltipPortalProps {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | MutableRefObject<HTMLElement | ShadowRoot | null> | null;\n  rootId?: string;\n}\n\nconst TooltipContext = createContext<TooltipContextType | null>(null);\n\ninterface TooltipPositionerContextType {\n  side: Placement;\n}\n\nconst TooltipPositionerContext = createContext<TooltipPositionerContextType | 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 useTooltipPositionerContext(): TooltipPositionerContextType {\n  const context = useContext(TooltipPositionerContext);\n  if (!context) {\n    throw new Error('TooltipArrow must be used within TooltipPositioner');\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 arrowRef = useRef<HTMLElement | null>(null);\n\n  const { context } = useFloating({\n    open,\n    onOpenChange: setOpen,\n    placement,\n    middleware: [\n      offset(sideOffset),\n      flip(),\n      shift({ padding: collisionPadding }),\n      arrow({\n        element: arrowRef,\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { status: transitionStatus } = useTransitionStatus(context);\n\n  const hover = useHover(context, {\n    // restMs: 300, // this broke the time slider tooltip, todo: find solution!\n    delay: {\n      open: delay,\n      close: closeDelay,\n    },\n  });\n  const focus = useFocus(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: 'tooltip' });\n\n  // Use client point hook when trackCursorAxis is enabled\n  const clientPoint = useClientPoint(context, {\n    axis: trackCursorAxis || 'both',\n    enabled: !!trackCursorAxis,\n  });\n\n  // Combine interactions based on whether cursor tracking is enabled\n  const interactions = trackCursorAxis\n    ? [hover, focus, dismiss, role, clientPoint]\n    : [hover, focus, dismiss, role];\n\n  const { getReferenceProps, getFloatingProps } = useInteractions(interactions);\n\n  const updatePositioning = useCallback(({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => {\n    setPlacement(side);\n    setSideOffset(sideOffset);\n    setCollisionPadding(collisionPadding);\n  }, []);\n\n  const value: TooltipContextType = useMemo(() => ({\n    getReferenceProps,\n    getFloatingProps,\n    context,\n    updatePositioning,\n    arrowRef,\n    transitionStatus,\n    trackCursorAxis,\n  }), [getReferenceProps, getFloatingProps, context, updatePositioning, transitionStatus, trackCursorAxis]);\n\n  return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;\n}\n\nfunction TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element {\n  const { context, getReferenceProps } = useTooltipContext();\n  const { refs, open } = context;\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: refs.setReference,\n    ...getReferenceProps(),\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 { context, updatePositioning, trackCursorAxis } = useTooltipContext();\n  const { refs, floatingStyles } = context;\n\n  // Update positioning when props change\n  useEffect(() => {\n    updatePositioning({ side, sideOffset, collisionPadding });\n  }, [side, sideOffset, collisionPadding, updatePositioning]);\n\n  const positionerContextValue: TooltipPositionerContextType = useMemo(() => ({\n    side,\n  }), [side]);\n\n  return (\n    <TooltipPositionerContext.Provider value={positionerContextValue}>\n      <div\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          pointerEvents: trackCursorAxis ? 'none' : undefined,\n        }}\n      >\n        {children}\n      </div>\n    </TooltipPositionerContext.Provider>\n  );\n}\n\nfunction TooltipPopup({ className = '', children }: TooltipPopupProps): JSX.Element | null {\n  const { context, getFloatingProps, transitionStatus } = useTooltipContext();\n  const { refs, placement } = context;\n  const triggerElement = refs.reference.current as HTMLElement | null;\n\n  // Copy data attributes from trigger element\n  const dataAttributes = triggerElement?.attributes\n    ? Object.fromEntries(\n        Array.from(triggerElement.attributes)\n          .filter(attr => attr.name.startsWith('data-'))\n          .map(attr => [attr.name, attr.value]),\n      )\n    : {};\n\n  return (\n    <div\n      className={className}\n      {...getFloatingProps()}\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\nfunction TooltipArrow({ className = '', children }: TooltipArrowProps): JSX.Element {\n  const { arrowRef, context } = useTooltipContext();\n  const { side } = useTooltipPositionerContext();\n\n  // Get arrow positioning data from floating-ui\n  const { x: arrowX, y: arrowY } = context.middlewareData.arrow || { x: 0, y: 0 };\n\n  return (\n    <div\n      ref={arrowRef as RefObject<HTMLDivElement>}\n      className={className}\n      aria-hidden=\"true\"\n      data-side={side}\n      style={{\n        left: arrowX != null ? `${arrowX}px` : undefined,\n        top: arrowY != null ? `${arrowY}px` : undefined,\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction TooltipPortal({ children, root, rootId = '@default_portal_id' }: TooltipPortalProps): JSX.Element {\n  return (\n    <FloatingPortal root={root as HTMLElement} id={rootId as string}>\n      {children}\n    </FloatingPortal>\n  );\n}\n\n// Export compound component\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  Arrow: typeof TooltipArrow;\n  Portal: typeof TooltipPortal;\n} = {\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n  Positioner: TooltipPositioner,\n  Popup: TooltipPopup,\n  Arrow: TooltipArrow,\n  Portal: TooltipPortal,\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-ra_eRTyG.js → frosted-JuY6ZaAp.js}

@@ -1,4 +1,4 @@
-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-DoR6idnJ.js";
+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";
 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";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -157,4 +157,4 @@ function FrostedSkin({ children, className = "" }) {
 
 //#endregion
 export { FrostedSkin as t };
-//# sourceMappingURL=frosted-ra_eRTyG.js.map
+//# sourceMappingURL=frosted-JuY6ZaAp.js.map

package/dist/{frosted-ra_eRTyG.js.map → frosted-JuY6ZaAp.js.map}

@@ -1 +1 @@
-{"version":3,"file":"frosted-ra_eRTyG.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',\n    // Base typography\n    'vjs:text-[0.8125rem]', // 13px\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    // Hide when playing (for now).\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  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    '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    //  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    //  FIXME: Temporary hide/show logic\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  Icon: cn('icon'),\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  PlayButton: cn(\n    'vjs:[&_.pause-icon]:opacity-100 vjs:[&[data-paused]_.pause-icon]:opacity-0',\n    'vjs:[&_.play-icon]:opacity-0 vjs:[&[data-paused]_.play-icon]:opacity-100',\n  ),\n  PlayIcon: cn('play-icon'),\n  PauseIcon: cn('pause-icon'),\n  PlayTooltipPopup: cn(\n    'vjs:[&_.pause-tooltip]:inline vjs:[&[data-paused]_.pause-tooltip]:hidden',\n    'vjs:[&_.play-tooltip]:hidden vjs:[&[data-paused]_.play-tooltip]:inline',\n  ),\n  PlayTooltip: cn('play-tooltip'),\n  PauseTooltip: cn('pause-tooltip'),\n  MuteButton: cn(\n    'vjs:[&_.icon]:hidden',\n    'vjs:[&[data-volume-level=\"high\"]_.volume-high-icon]:inline',\n    'vjs:[&[data-volume-level=\"medium\"]_.volume-low-icon]:inline',\n    'vjs:[&[data-volume-level=\"low\"]_.volume-low-icon]:inline',\n    'vjs:[&[data-volume-level=\"off\"]_.volume-off-icon]:inline',\n  ),\n  VolumeHighIcon: cn('volume-high-icon'),\n  VolumeLowIcon: cn('volume-low-icon'),\n  VolumeOffIcon: cn('volume-off-icon'),\n  FullscreenButton: cn(\n    'vjs:[&_.fullscreen-enter-icon]:opacity-100 vjs:[&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',\n    'vjs:[&_.fullscreen-exit-icon]:opacity-0 vjs:[&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',\n    'vjs:[&_path]:transition-transform vjs:ease-out',\n  ),\n  FullscreenEnterIcon: cn(\n    'fullscreen-enter-icon',\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    'fullscreen-exit-icon',\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(\n    'vjs:relative vjs:px-1 vjs:py-3 vjs:rounded-full',\n  ),\n  TooltipPopup: cn(\n    '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/*\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}`} data-testid=\"media-controls\">\n        <Tooltip.Root delay={500}>\n          <Tooltip.Trigger>\n            <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>\n              <PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />\n              <PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />\n            </PlayButton>\n          </Tooltip.Trigger>\n          <Tooltip.Portal>\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.Portal>\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.Portal>\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.Portal>\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} ${styles.MuteButton}`}>\n              <VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />\n              <VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />\n              <VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />\n            </MuteButton>\n          </Popover.Trigger>\n          <Popover.Portal>\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.Portal>\n        </Popover.Root>\n\n        <Tooltip.Root delay={500}>\n          <Tooltip.Trigger>\n            <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>\n              <FullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />\n              <FullscreenExitIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />\n            </FullscreenButton>\n          </Tooltip.Trigger>\n          <Tooltip.Portal>\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.Portal>\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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"}
+{"version":3,"file":"frosted-JuY6ZaAp.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',\n    // Base typography\n    'vjs:text-[0.8125rem]', // 13px\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    // Hide when playing (for now).\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  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    '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    //  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    //  FIXME: Temporary hide/show logic\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  Icon: cn('icon'),\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  PlayButton: cn(\n    'vjs:[&_.pause-icon]:opacity-100 vjs:[&[data-paused]_.pause-icon]:opacity-0',\n    'vjs:[&_.play-icon]:opacity-0 vjs:[&[data-paused]_.play-icon]:opacity-100',\n  ),\n  PlayIcon: cn('play-icon'),\n  PauseIcon: cn('pause-icon'),\n  PlayTooltipPopup: cn(\n    'vjs:[&_.pause-tooltip]:inline vjs:[&[data-paused]_.pause-tooltip]:hidden',\n    'vjs:[&_.play-tooltip]:hidden vjs:[&[data-paused]_.play-tooltip]:inline',\n  ),\n  PlayTooltip: cn('play-tooltip'),\n  PauseTooltip: cn('pause-tooltip'),\n  MuteButton: cn(\n    'vjs:[&_.icon]:hidden',\n    'vjs:[&[data-volume-level=\"high\"]_.volume-high-icon]:inline',\n    'vjs:[&[data-volume-level=\"medium\"]_.volume-low-icon]:inline',\n    'vjs:[&[data-volume-level=\"low\"]_.volume-low-icon]:inline',\n    'vjs:[&[data-volume-level=\"off\"]_.volume-off-icon]:inline',\n  ),\n  VolumeHighIcon: cn('volume-high-icon'),\n  VolumeLowIcon: cn('volume-low-icon'),\n  VolumeOffIcon: cn('volume-off-icon'),\n  FullscreenButton: cn(\n    'vjs:[&_.fullscreen-enter-icon]:opacity-100 vjs:[&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',\n    'vjs:[&_.fullscreen-exit-icon]:opacity-0 vjs:[&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',\n    'vjs:[&_path]:transition-transform vjs:ease-out',\n  ),\n  FullscreenEnterIcon: cn(\n    'fullscreen-enter-icon',\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    'fullscreen-exit-icon',\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(\n    'vjs:relative vjs:px-1 vjs:py-3 vjs:rounded-full',\n  ),\n  TooltipPopup: cn(\n    '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/*\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}`} data-testid=\"media-controls\">\n        <Tooltip.Root delay={500}>\n          <Tooltip.Trigger>\n            <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>\n              <PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />\n              <PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />\n            </PlayButton>\n          </Tooltip.Trigger>\n          <Tooltip.Portal>\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.Portal>\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.Portal>\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.Portal>\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} ${styles.MuteButton}`}>\n              <VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />\n              <VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />\n              <VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />\n            </MuteButton>\n          </Popover.Trigger>\n          <Popover.Portal>\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.Portal>\n        </Popover.Root>\n\n        <Tooltip.Root delay={500}>\n          <Tooltip.Trigger>\n            <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>\n              <FullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />\n              <FullscreenExitIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />\n            </FullscreenButton>\n          </Tooltip.Trigger>\n          <Tooltip.Portal>\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.Portal>\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-BNR1awZq.d.ts → index-CM70WSkA.d.ts}

@@ -8,7 +8,7 @@ import { Context, ReactNode } from "react";
 * used "under the hood" for media ui state updates, state change requests, and the hooks and providers that integrate with this context.
 * It is unlikely that you will/should be using `MediaContext` directly.
 *
-* @see {@link MediaProvider}
+* @see {@link VideoProvider}
 * @see {@link useMediaDispatch}
 * @see {@link useMediaSelector}
 */
@@ -20,8 +20,8 @@ declare function useMediaDispatch(): (value: any) => unknown;
 declare function useMediaRef(): (element: any) => void;
 declare function useMediaSelector<S = any>(selector: (state: any) => S, equalityFn?: (a: S, b: S) => boolean): S;
 //#endregion
-//#region src/store/media-provider.d.ts
-declare function MediaProvider({
+//#region src/store/video-provider.d.ts
+declare function VideoProvider({
   children
 }: {
   children: ReactNode;
@@ -32,5 +32,5 @@ type MediaStore$1 = any;
 type MediaState = any;
 type MediaStateOwner = any;
 //#endregion
-export { useMediaDispatch as a, useMediaStore as c, MediaProvider as i, MediaContext as l, MediaStateOwner as n, useMediaRef as o, MediaStore$1 as r, useMediaSelector as s, MediaState as t };
-//# sourceMappingURL=index-BNR1awZq.d.ts.map
+export { useMediaDispatch as a, useMediaStore as c, VideoProvider as i, MediaContext as l, MediaStateOwner as n, useMediaRef as o, MediaStore$1 as r, useMediaSelector as s, MediaState as t };
+//# sourceMappingURL=index-CM70WSkA.d.ts.map

package/dist/{index-BNR1awZq.d.ts.map → index-CM70WSkA.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"index-BNR1awZq.d.ts","names":["MediaContext: Context<any | null>"],"sources":["../src/store/context.ts","../src/store/hooks.ts","../src/store/media-provider.tsx","../src/store/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;AAYA;;;;ACFA;AAIA;AAQgB,cDVHA,YCUG,EDVW,OCUX,CAAA,GAAA,GAAA,IAAA,CAAA;;;iBAZA,aAAA,CAAA,GAAiB;iBAIjB,gBAAA,CAAA;ADFHA,iBCUG,WAAA,CAAA,CDVW,EAAA,CAAA,OAAA,EAAA,GAAA,EAAA,GAAA,IAAA;iBCyBX,oDACY,oBACV,MAAM,gBACrB;;;iBC9Ba,aAAA;;AFEhB;YEFwD;AFExD,CAAA,CAAA,EEFsE,GAAA,CAAI,OFE7DA;;;KGDD,YAAA;AHCCA,KGAD,UAAA,GHAe,GAAA;KGCf,eAAA"}
+{"version":3,"file":"index-CM70WSkA.d.ts","names":["MediaContext: Context<any | null>"],"sources":["../src/store/context.ts","../src/store/hooks.ts","../src/store/video-provider.tsx","../src/store/index.ts"],"sourcesContent":[],"mappings":";;;;;;;;AAYA;;;;ACFA;AAIA;AAQgB,cDVHA,YCUG,EDVW,OCUX,CAAA,GAAA,GAAA,IAAA,CAAA;;;iBAZA,aAAA,CAAA,GAAiB;iBAIjB,gBAAA,CAAA;ADFHA,iBCUG,WAAA,CAAA,CDVW,EAAA,CAAA,OAAA,EAAA,GAAA,EAAA,GAAA,IAAA;iBCyBX,oDACY,oBACV,MAAM,gBACrB;;;iBChCa,aAAA;;AFIhB;YEJwD;AFIxD,CAAA,CAAA,EEJsE,GAAA,CAAI,OFI7DA;;;KGCD,YAAA;AHDCA,KGED,UAAA,GHFe,GAAA;KGGf,eAAA"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { a as useMediaDispatch, c as useMediaStore, i as MediaProvider, l as MediaContext, n as MediaStateOwner, o as useMediaRef, r as MediaStore, s as useMediaSelector, t as MediaState } from "./index-BNR1awZq.js";
+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";
 import { t as FrostedSkin } from "./FrostedSkin-t8edr5LV.js";
 import { t as MinimalSkin } from "./MinimalSkin-DzHkJgW-.js";
 import React$1, { CSSProperties, DetailedHTMLProps, ElementType, FC, HTMLProps, MutableRefObject, PropsWithChildren, ReactElement, ReactNode, Ref, RefCallback, VideoHTMLAttributes } from "react";
@@ -52,6 +52,23 @@ type FullscreenButtonProps = ReturnType<typeof getFullscreenButtonProps>;
 declare function renderFullscreenButton(props: FullscreenButtonProps, state: FullscreenButtonState): JSX.Element;
 declare const FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>;
 //#endregion
+//#region src/components/HlsVideo.d.ts
+type MediaStateOwner$1 = NonNullable<Parameters<ReturnType<typeof useMediaRef>>[0]>;
+/** @TODO Improve type inference and narrowing/widening for different use cases (CJP) */
+type ComponentType = ElementType<Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "ref"> & {
+  ref: Ref<MediaStateOwner$1>;
+}>;
+type VideoProps$1 = PropsWithChildren<{
+  component?: ComponentType;
+  className?: string | undefined;
+  style?: CSSProperties | undefined;
+}>;
+declare function HlsVideo({
+  component,
+  children,
+  ...props
+}: VideoProps$1): JSX.Element;
+//#endregion
 //#region src/components/MediaContainer.d.ts
 /**
 * Hook to associate a React element as the fullscreen container for the media store.
@@ -178,30 +195,6 @@ interface PreviewTimeDisplayProps extends React.ComponentProps<"span"> {
 declare function renderPreviewTimeDisplay(props: PreviewTimeDisplayProps, state: PreviewTimeDisplayState): JSX.Element;
 declare const PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>;
 //#endregion
-//#region src/components/SimpleVideo.d.ts
-type SimpleVideoProps = PropsWithChildren<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {
-  className?: string | undefined;
-  style?: CSSProperties | undefined;
-}>;
-/**
-* SimpleVideo - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)
-* without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the
-* regular Video component instead.
-*
-* This component connects to MediaProvider for play/pause state but sets the src directly on the
-* video element without going through HLS.js or other playback engines.
-*
-* @example
-* ```tsx
-* <MediaProvider>
-*   <MediaSkin>
-*     <SimpleVideo src="video.mp4" />
-*   </MediaSkin>
-* </MediaProvider>
-* ```
-*/
-declare const SimpleVideo: React$1.ForwardRefExoticComponent<SimpleVideoProps & React$1.RefAttributes<HTMLVideoElement>>;
-//#endregion
 //#region src/components/TimeSlider.d.ts
 interface TimeSliderProps extends React.ComponentPropsWithRef<"div"> {
   orientation?: "horizontal" | "vertical";
@@ -296,22 +289,28 @@ declare const Tooltip: {
 };
 //#endregion
 //#region src/components/Video.d.ts
-type MediaStateOwner$1 = NonNullable<Parameters<ReturnType<typeof useMediaRef>>[0]>;
-/** @TODO Improve type inference and narrowing/widening for different use cases (CJP) */
-type ComponentType = ElementType<Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "ref"> & {
-  ref: Ref<MediaStateOwner$1>;
-}>;
-type VideoProps = PropsWithChildren<{
-  component?: ComponentType;
+type VideoProps = PropsWithChildren<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {
   className?: string | undefined;
   style?: CSSProperties | undefined;
 }>;
-declare function Video({
-  component,
-  children,
-  ...props
-}: VideoProps): JSX.Element;
-declare const MediaElementVideo: FC<VideoProps>;
+/**
+* Video - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)
+* without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the
+* regular Video component instead.
+*
+* This component connects to VideoProvider for play/pause state but sets the src directly on the
+* video element without going through HLS.js or other playback engines.
+*
+* @example
+* ```tsx
+* <VideoProvider>
+*   <MediaSkin>
+*     <Video src="video.mp4" />
+*   </MediaSkin>
+* </VideoProvider>
+* ```
+*/
+declare const Video: React$1.ForwardRefExoticComponent<VideoProps & React$1.RefAttributes<HTMLVideoElement>>;
 //#endregion
 //#region src/components/VolumeSlider.d.ts
 interface VolumeSliderProps extends React.ComponentProps<"div"> {
@@ -337,5 +336,5 @@ declare const VolumeSlider: {
   Progress: typeof VolumeSliderProgress;
 };
 //#endregion
-export { CurrentTimeDisplay, DurationDisplay, FrostedSkin, FullscreenButton, MediaContainer, MediaContext, MediaElementVideo, MediaProvider, MediaState, MediaStateOwner, MediaStore, MinimalSkin, MuteButton, PlayButton, Popover, PreviewTimeDisplay, SimpleVideo, TimeSlider, Tooltip, Video, VolumeSlider, useMediaContainerRef, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };
+export { CurrentTimeDisplay, DurationDisplay, FrostedSkin, FullscreenButton, HlsVideo, MediaContainer, MediaContext, MediaState, MediaStateOwner, MediaStore, MinimalSkin, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, Video, VideoProvider, VolumeSlider, useMediaContainerRef, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":["CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>","DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>","FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>","MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement> & { portalId?: string }>>","MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>","PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>","Popover: {\n  Root: typeof PopoverRoot;\n  Trigger: typeof PopoverTrigger;\n  Positioner: typeof PopoverPositioner;\n  Popup: typeof PopoverPopup;\n  Portal: typeof PopoverPortal;\n}","PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>","SimpleVideo: React.ForwardRefExoticComponent<\n  SimpleVideoProps & React.RefAttributes<HTMLVideoElement>\n>","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>","Tooltip: {\n  Root: typeof TooltipRoot;\n  Trigger: typeof TooltipTrigger;\n  Positioner: typeof TooltipPositioner;\n  Popup: typeof TooltipPopup;\n  Arrow: typeof TooltipArrow;\n  Portal: typeof TooltipPortal;\n}","MediaElementVideo: FC<VideoProps>","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>"],"sources":["../src/utils/component-factory.tsx","../src/components/CurrentTimeDisplay.tsx","../src/components/DurationDisplay.tsx","../src/components/FullscreenButton.tsx","../src/components/MediaContainer.tsx","../src/components/MuteButton.tsx","../src/components/PlayButton.tsx","../src/components/Popover.tsx","../src/components/PreviewTimeDisplay.tsx","../src/components/SimpleVideo.tsx","../src/components/TimeSlider.tsx","../src/components/Tooltip.tsx","../src/components/Video.tsx","../src/components/VolumeSlider.tsx"],"sourcesContent":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","names":["CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>","DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>","FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>","MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement> & { portalId?: string }>>","MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>","PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>","Popover: {\n  Root: typeof PopoverRoot;\n  Trigger: typeof PopoverTrigger;\n  Positioner: typeof PopoverPositioner;\n  Popup: typeof PopoverPopup;\n  Portal: typeof PopoverPortal;\n}","PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>","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>","Tooltip: {\n  Root: typeof TooltipRoot;\n  Trigger: typeof TooltipTrigger;\n  Positioner: typeof TooltipPositioner;\n  Popup: typeof TooltipPopup;\n  Arrow: typeof TooltipArrow;\n  Portal: typeof TooltipPortal;\n}","Video: React.ForwardRefExoticComponent<\n  VideoProps & React.RefAttributes<HTMLVideoElement>\n>","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>"],"sources":["../src/utils/component-factory.tsx","../src/components/CurrentTimeDisplay.tsx","../src/components/DurationDisplay.tsx","../src/components/FullscreenButton.tsx","../src/components/HlsVideo.tsx","../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/Video.tsx","../src/components/VolumeSlider.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/index.js

@@ -1,42 +1,16 @@
-import { a as useMediaStore, i as useMediaSelector, n as useMediaDispatch, o as MediaContext, r as useMediaRef, t as MediaProvider } from "./store-DpQF8Ges.js";
-import { _ as DurationDisplay, a as TimeSlider, c as Popover, f as MuteButton, g as FullscreenButton, h as useMediaContainerRef, m as MediaContainer, o as PreviewTimeDisplay, r as Tooltip, t as VolumeSlider, u as PlayButton, v as CurrentTimeDisplay } from "./VolumeSlider-DoR6idnJ.js";
+'use client';
+
+
+import { a as useMediaStore, i as useMediaSelector, n as useMediaDispatch, o as MediaContext, r as useMediaRef, t as VideoProvider } from "./store-hGO5HE2A.js";
+import { _ as DurationDisplay, a as TimeSlider, c as Popover, f as MuteButton, g as FullscreenButton, h as useMediaContainerRef, m as MediaContainer, o as PreviewTimeDisplay, r as Tooltip, t as VolumeSlider, u as PlayButton, v as CurrentTimeDisplay } from "./VolumeSlider-CWpLFzdJ.js";
 import "./icons-BqfV81R8.js";
-import { t as FrostedSkin } from "./frosted-ra_eRTyG.js";
-import { t as MinimalSkin } from "./minimal-Cj3N9SDN.js";
+import { t as FrostedSkin } from "./frosted-JuY6ZaAp.js";
+import { t as MinimalSkin } from "./minimal-pUeFJF1F.js";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { createMediaPlaybackController } from "@videojs/core/media";
 
-//#region src/components/SimpleVideo.tsx
-/**
-* SimpleVideo - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)
-* without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the
-* regular Video component instead.
-*
-* This component connects to MediaProvider for play/pause state but sets the src directly on the
-* video element without going through HLS.js or other playback engines.
-*
-* @example
-* ```tsx
-* <MediaProvider>
-*   <MediaSkin>
-*     <SimpleVideo src="video.mp4" />
-*   </MediaSkin>
-* </MediaProvider>
-* ```
-*/
-const SimpleVideo = forwardRef(({ children,...props }, _ref) => {
-	const mediaRefCallback = useMediaRef();
-	return /* @__PURE__ */ jsx("video", {
-		...props,
-		ref: mediaRefCallback,
-		children
-	});
-});
-SimpleVideo.displayName = "SimpleVideo";
-
-//#endregion
-//#region src/components/Video.tsx
+//#region src/components/HlsVideo.tsx
 function useMediaStateOwner(ref, createMediaPlaybackController$1) {
 	const mediaStateOwnerRef = useRef(createMediaPlaybackController$1());
 	useImperativeHandle(ref, () => mediaStateOwnerRef.current, []);
@@ -59,7 +33,7 @@ const DefaultVideoComponent = forwardRef(({ children,...props }, ref) => {
 });
 /**
 * @description This is a "thin wrapper" around the media component whose primary responsibility is to wire up the element
-* to the <MediaProvider/>'s MediaStore for the media state.
+* to the <VideoProvider/>'s MediaStore for the media state.
 * @param props - Identical to both a <video/>'s props and the <Player/> props, with one addition that may be familiar to
 * MUI users: a `component` prop that allows you to use something other than the <video/> element under the hood.
 * @returns A media react component (e.g. <video/>), wired up as the media element.
@@ -73,15 +47,43 @@ function ConnectedVideo({ component, children,...props }) {
 		children
 	});
 }
-function Video({ component = DefaultVideoComponent, children,...props }) {
+function HlsVideo({ component = DefaultVideoComponent, children,...props }) {
 	return /* @__PURE__ */ jsx(ConnectedVideo, {
 		...props,
 		component,
 		children
 	});
 }
-const MediaElementVideo = Video;
 
 //#endregion
-export { CurrentTimeDisplay, DurationDisplay, FrostedSkin, FullscreenButton, MediaContainer, MediaContext, MediaElementVideo, MediaProvider, MinimalSkin, MuteButton, PlayButton, Popover, PreviewTimeDisplay, SimpleVideo, TimeSlider, Tooltip, Video, VolumeSlider, useMediaContainerRef, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };
+//#region src/components/Video.tsx
+/**
+* Video - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)
+* without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the
+* regular Video component instead.
+*
+* This component connects to VideoProvider for play/pause state but sets the src directly on the
+* video element without going through HLS.js or other playback engines.
+*
+* @example
+* ```tsx
+* <VideoProvider>
+*   <MediaSkin>
+*     <Video src="video.mp4" />
+*   </MediaSkin>
+* </VideoProvider>
+* ```
+*/
+const Video = forwardRef(({ children,...props }, _ref) => {
+	const mediaRefCallback = useMediaRef();
+	return /* @__PURE__ */ jsx("video", {
+		...props,
+		ref: mediaRefCallback,
+		children
+	});
+});
+Video.displayName = "Video";
+
+//#endregion
+export { CurrentTimeDisplay, DurationDisplay, FrostedSkin, FullscreenButton, HlsVideo, MediaContainer, MediaContext, MinimalSkin, MuteButton, PlayButton, Popover, PreviewTimeDisplay, TimeSlider, Tooltip, Video, VideoProvider, VolumeSlider, useMediaContainerRef, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SimpleVideo: React.ForwardRefExoticComponent<\n  SimpleVideoProps & React.RefAttributes<HTMLVideoElement>\n>","createMediaPlaybackController","DefaultVideoComponent: ElementType<\n  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }\n>","MediaElementVideo: FC<VideoProps>"],"sources":["../src/components/SimpleVideo.tsx","../src/components/Video.tsx"],"sourcesContent":["'use client';\n\nimport type {\n  CSSProperties,\n  DetailedHTMLProps,\n  PropsWithChildren,\n  VideoHTMLAttributes,\n} from 'react';\n\nimport React, { forwardRef } from 'react';\nimport { useMediaRef } from '@/store';\n\nexport type SimpleVideoProps = PropsWithChildren<\n  DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {\n    className?: string | undefined;\n    style?: CSSProperties | undefined;\n  }\n>;\n\n/**\n * SimpleVideo - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)\n * without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the\n * regular Video component instead.\n *\n * This component connects to MediaProvider for play/pause state but sets the src directly on the\n * video element without going through HLS.js or other playback engines.\n *\n * @example\n * ```tsx\n * <MediaProvider>\n *   <MediaSkin>\n *     <SimpleVideo src=\"video.mp4\" />\n *   </MediaSkin>\n * </MediaProvider>\n * ```\n */\nexport const SimpleVideo: React.ForwardRefExoticComponent<\n  SimpleVideoProps & React.RefAttributes<HTMLVideoElement>\n> = forwardRef<HTMLVideoElement, SimpleVideoProps>(\n  ({ children, ...props }, _ref) => {\n    const mediaRefCallback = useMediaRef();\n\n    return (\n      // eslint-disable-next-line jsx-a11y/media-has-caption\n      <video {...props} ref={mediaRefCallback}>\n        {children}\n      </video>\n    );\n  },\n);\n\nSimpleVideo.displayName = 'SimpleVideo';\n\nexport default SimpleVideo;\n","'use client';\n\nimport type {\n  CSSProperties,\n  DetailedHTMLProps,\n  ElementType,\n  FC,\n  PropsWithChildren,\n  Ref,\n  VideoHTMLAttributes,\n} from 'react';\n\nimport { createMediaPlaybackController } from '@videojs/core/media';\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useMediaRef } from '@/store';\n\nexport interface MuxVideoProps {\n  'playback-id'?: string;\n}\n\ntype MediaStateOwner = NonNullable<Parameters<ReturnType<typeof useMediaRef>>[0]>;\n\n/** @TODO Improve type inference and narrowing/widening for different use cases (CJP) */\ntype ComponentType = ElementType<\n  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & {\n    ref: Ref<MediaStateOwner>;\n  }\n>;\n\n// These are the first steps/WIP POC of decoupling the Media State Owner from the DOM.\n// Note that everything will still work if you use:\n// 1. an audio/video element directly\n// 2. a custom element a la media-elements\ntype CreateMediaStateOwner = typeof createMediaPlaybackController;\n\nfunction useMediaStateOwner(ref: Ref<any>, createMediaPlaybackController: CreateMediaStateOwner) {\n  const mediaStateOwnerRef = useRef(createMediaPlaybackController(/* props? */));\n  useImperativeHandle(ref, () => mediaStateOwnerRef.current, []);\n  /** @TODO Parameterize this (CJP) */\n  type ComponentProps = DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;\n  return {\n    updateMediaElement(mediaEl: HTMLMediaElement | null, props: ComponentProps) {\n      // NOTE: The details here will almost definitely change for a less \"bare bones\"/\"POC\" implementation of Media State Owner impl. (CJP)\n      mediaStateOwnerRef.current.mediaElement = mediaEl ?? undefined;\n      mediaStateOwnerRef.current.src = props.src as string;\n      if (props.muted) {\n        mediaStateOwnerRef.current.muted = props.muted;\n      }\n    },\n  };\n}\n\nconst DefaultVideoComponent: ElementType<\n  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }\n> = forwardRef<any, any>(({ children, ...props }, ref) => {\n  const { updateMediaElement } = useMediaStateOwner(ref, createMediaPlaybackController);\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...props}\n      ref={(mediaEl) => {\n        /** @TODO In later iterations/non-POC, we should be able to have a function that can be used directly for the `ref` prop (CJP) */\n        updateMediaElement(mediaEl, props);\n      }}\n    >\n      {children}\n    </video>\n  );\n});\n\n/**\n * @description This is a \"thin wrapper\" around the media component whose primary responsibility is to wire up the element\n * to the <MediaProvider/>'s MediaStore for the media state.\n * @param props - Identical to both a <video/>'s props and the <Player/> props, with one addition that may be familiar to\n * MUI users: a `component` prop that allows you to use something other than the <video/> element under the hood.\n * @returns A media react component (e.g. <video/>), wired up as the media element.\n */\nfunction ConnectedVideo({\n  component,\n  children,\n  ...props\n}: PropsWithChildren<{\n  component: ComponentType;\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n}>) {\n  const Component = component;\n  const mediaRefCallback = useMediaRef();\n  // NOTE: While this may feel like magic to folks, in the \"default\" use case, you can think of it as:\n  // return (<video ref={mediaRefCallback} {...restProps} >{children}</video>);\n  return (\n    <Component {...props} ref={mediaRefCallback}>\n      {children}\n    </Component>\n  );\n}\n\nexport type VideoProps = PropsWithChildren<{\n  component?: ComponentType;\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n}>;\n\n// Main Video component with default component\nexport function Video({ component = DefaultVideoComponent, children, ...props }: VideoProps): JSX.Element {\n  return (\n    <ConnectedVideo {...props} component={component}>\n      {children}\n    </ConnectedVideo>\n  );\n}\n\n// MediaElementVideo export (same as Video but for backwards compatibility)\nexport const MediaElementVideo: FC<VideoProps> = Video;\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAaA,cAET,YACD,EAAE,SAAU,GAAG,SAAS,SAAS;CAChC,MAAM,mBAAmB,aAAa;AAEtC,QAEE,oBAAC;EAAM,GAAI;EAAO,KAAK;EACpB;GACK;EAGb;AAED,YAAY,cAAc;;;;ACf1B,SAAS,mBAAmB,KAAe,iCAAsD;CAC/F,MAAM,qBAAqB,OAAOC,iCAA2C,CAAC;AAC9E,qBAAoB,WAAW,mBAAmB,SAAS,EAAE,CAAC;AAG9D,QAAO,EACL,mBAAmB,SAAkC,OAAuB;AAE1E,qBAAmB,QAAQ,eAAe,WAAW;AACrD,qBAAmB,QAAQ,MAAM,MAAM;AACvC,MAAI,MAAM,MACR,oBAAmB,QAAQ,QAAQ,MAAM;IAG9C;;AAGH,MAAMC,wBAEF,YAAsB,EAAE,SAAU,GAAG,SAAS,QAAQ;CACxD,MAAM,EAAE,uBAAuB,mBAAmB,KAAK,8BAA8B;AACrF,QAEE,oBAAC;EACC,GAAI;EACJ,MAAM,YAAY;;AAEhB,sBAAmB,SAAS,MAAM;;EAGnC;GACK;EAEV;;;;;;;;AASF,SAAS,eAAe,EACtB,WACA,SACA,GAAG,SAKD;CACF,MAAM,YAAY;CAClB,MAAM,mBAAmB,aAAa;AAGtC,QACE,oBAAC;EAAU,GAAI;EAAO,KAAK;EACxB;GACS;;AAWhB,SAAgB,MAAM,EAAE,YAAY,uBAAuB,SAAU,GAAG,SAAkC;AACxG,QACE,oBAAC;EAAe,GAAI;EAAkB;EACnC;GACc;;AAKrB,MAAaC,oBAAoC"}
+{"version":3,"file":"index.js","names":["createMediaPlaybackController","DefaultVideoComponent: ElementType<\n  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }\n>","Video: React.ForwardRefExoticComponent<\n  VideoProps & React.RefAttributes<HTMLVideoElement>\n>"],"sources":["../src/components/HlsVideo.tsx","../src/components/Video.tsx"],"sourcesContent":["import type {\n  CSSProperties,\n  DetailedHTMLProps,\n  ElementType,\n  PropsWithChildren,\n  Ref,\n  VideoHTMLAttributes,\n} from 'react';\n\nimport { createMediaPlaybackController } from '@videojs/core/media';\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport { useMediaRef } from '@/store';\n\nexport interface MuxVideoProps {\n  'playback-id'?: string;\n}\n\ntype MediaStateOwner = NonNullable<Parameters<ReturnType<typeof useMediaRef>>[0]>;\n\n/** @TODO Improve type inference and narrowing/widening for different use cases (CJP) */\ntype ComponentType = ElementType<\n  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & {\n    ref: Ref<MediaStateOwner>;\n  }\n>;\n\n// These are the first steps/WIP POC of decoupling the Media State Owner from the DOM.\n// Note that everything will still work if you use:\n// 1. an audio/video element directly\n// 2. a custom element a la media-elements\ntype CreateMediaStateOwner = typeof createMediaPlaybackController;\n\nfunction useMediaStateOwner(ref: Ref<any>, createMediaPlaybackController: CreateMediaStateOwner) {\n  const mediaStateOwnerRef = useRef(createMediaPlaybackController(/* props? */));\n  useImperativeHandle(ref, () => mediaStateOwnerRef.current, []);\n  /** @TODO Parameterize this (CJP) */\n  type ComponentProps = DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;\n  return {\n    updateMediaElement(mediaEl: HTMLMediaElement | null, props: ComponentProps) {\n      // NOTE: The details here will almost definitely change for a less \"bare bones\"/\"POC\" implementation of Media State Owner impl. (CJP)\n      mediaStateOwnerRef.current.mediaElement = mediaEl ?? undefined;\n      mediaStateOwnerRef.current.src = props.src as string;\n      if (props.muted) {\n        mediaStateOwnerRef.current.muted = props.muted;\n      }\n    },\n  };\n}\n\nconst DefaultVideoComponent: ElementType<\n  Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'ref'> & { ref: Ref<any> }\n> = forwardRef<any, any>(({ children, ...props }, ref) => {\n  const { updateMediaElement } = useMediaStateOwner(ref, createMediaPlaybackController);\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption\n    <video\n      {...props}\n      ref={(mediaEl) => {\n        /** @TODO In later iterations/non-POC, we should be able to have a function that can be used directly for the `ref` prop (CJP) */\n        updateMediaElement(mediaEl, props);\n      }}\n    >\n      {children}\n    </video>\n  );\n});\n\n/**\n * @description This is a \"thin wrapper\" around the media component whose primary responsibility is to wire up the element\n * to the <VideoProvider/>'s MediaStore for the media state.\n * @param props - Identical to both a <video/>'s props and the <Player/> props, with one addition that may be familiar to\n * MUI users: a `component` prop that allows you to use something other than the <video/> element under the hood.\n * @returns A media react component (e.g. <video/>), wired up as the media element.\n */\nfunction ConnectedVideo({\n  component,\n  children,\n  ...props\n}: PropsWithChildren<{\n  component: ComponentType;\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n}>) {\n  const Component = component;\n  const mediaRefCallback = useMediaRef();\n  // NOTE: While this may feel like magic to folks, in the \"default\" use case, you can think of it as:\n  // return (<video ref={mediaRefCallback} {...restProps} >{children}</video>);\n  return (\n    <Component {...props} ref={mediaRefCallback}>\n      {children}\n    </Component>\n  );\n}\n\nexport type VideoProps = PropsWithChildren<{\n  component?: ComponentType;\n  className?: string | undefined;\n  style?: CSSProperties | undefined;\n}>;\n\n// HlsVideo component with default component\nexport function HlsVideo({ component = DefaultVideoComponent, children, ...props }: VideoProps): JSX.Element {\n  return (\n    <ConnectedVideo {...props} component={component}>\n      {children}\n    </ConnectedVideo>\n  );\n}\n\nexport default HlsVideo;\n","import type {\n  CSSProperties,\n  DetailedHTMLProps,\n  PropsWithChildren,\n  VideoHTMLAttributes,\n} from 'react';\n\nimport React, { forwardRef } from 'react';\nimport { useMediaRef } from '@/store';\n\nexport type VideoProps = PropsWithChildren<\n  DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement> & {\n    className?: string | undefined;\n    style?: CSSProperties | undefined;\n  }\n>;\n\n/**\n * Video - A basic video component that works with native HTML5 video formats (MP4, WebM, etc.)\n * without using a playback engine. Use this for simple MP4 files. For HLS/DASH streaming, use the\n * regular Video component instead.\n *\n * This component connects to VideoProvider for play/pause state but sets the src directly on the\n * video element without going through HLS.js or other playback engines.\n *\n * @example\n * ```tsx\n * <VideoProvider>\n *   <MediaSkin>\n *     <Video src=\"video.mp4\" />\n *   </MediaSkin>\n * </VideoProvider>\n * ```\n */\nexport const Video: React.ForwardRefExoticComponent<\n  VideoProps & React.RefAttributes<HTMLVideoElement>\n> = forwardRef<HTMLVideoElement, VideoProps>(\n  ({ children, ...props }, _ref) => {\n    const mediaRefCallback = useMediaRef();\n\n    return (\n      // eslint-disable-next-line jsx-a11y/media-has-caption\n      <video {...props} ref={mediaRefCallback}>\n        {children}\n      </video>\n    );\n  },\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;;;;;AAiCA,SAAS,mBAAmB,KAAe,iCAAsD;CAC/F,MAAM,qBAAqB,OAAOA,iCAA2C,CAAC;AAC9E,qBAAoB,WAAW,mBAAmB,SAAS,EAAE,CAAC;AAG9D,QAAO,EACL,mBAAmB,SAAkC,OAAuB;AAE1E,qBAAmB,QAAQ,eAAe,WAAW;AACrD,qBAAmB,QAAQ,MAAM,MAAM;AACvC,MAAI,MAAM,MACR,oBAAmB,QAAQ,QAAQ,MAAM;IAG9C;;AAGH,MAAMC,wBAEF,YAAsB,EAAE,SAAU,GAAG,SAAS,QAAQ;CACxD,MAAM,EAAE,uBAAuB,mBAAmB,KAAK,8BAA8B;AACrF,QAEE,oBAAC;EACC,GAAI;EACJ,MAAM,YAAY;;AAEhB,sBAAmB,SAAS,MAAM;;EAGnC;GACK;EAEV;;;;;;;;AASF,SAAS,eAAe,EACtB,WACA,SACA,GAAG,SAKD;CACF,MAAM,YAAY;CAClB,MAAM,mBAAmB,aAAa;AAGtC,QACE,oBAAC;EAAU,GAAI;EAAO,KAAK;EACxB;GACS;;AAWhB,SAAgB,SAAS,EAAE,YAAY,uBAAuB,SAAU,GAAG,SAAkC;AAC3G,QACE,oBAAC;EAAe,GAAI;EAAkB;EACnC;GACc;;;;;;;;;;;;;;;;;;;;;;ACxErB,MAAaC,QAET,YACD,EAAE,SAAU,GAAG,SAAS,SAAS;CAChC,MAAM,mBAAmB,aAAa;AAEtC,QAEE,oBAAC;EAAM,GAAI;EAAO,KAAK;EACpB;GACK;EAGb;AAED,MAAM,cAAc"}

package/dist/{minimal-Cj3N9SDN.js → minimal-pUeFJF1F.js}

@@ -1,4 +1,4 @@
-import { _ as DurationDisplay, a as TimeSlider, d as PlayButton_default, g as FullscreenButton, i as Tooltip_default, l as Popover_default, m as MediaContainer, n as VolumeSlider_default, p as MuteButton_default, s as PreviewTimeDisplay_default, v as CurrentTimeDisplay } from "./VolumeSlider-DoR6idnJ.js";
+import { _ as DurationDisplay, a as TimeSlider, d as PlayButton_default, g as FullscreenButton, i as Tooltip_default, l as Popover_default, m as MediaContainer, n as VolumeSlider_default, p as MuteButton_default, s as PreviewTimeDisplay_default, v as CurrentTimeDisplay } from "./VolumeSlider-CWpLFzdJ.js";
 import { a as Play_default, c as FullscreenExitAlt_default, n as VolumeLow_default, o as Pause_default, r as VolumeHigh_default, t as VolumeOff_default, u as FullscreenEnterAlt_default } from "./icons-BqfV81R8.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -162,4 +162,4 @@ function MinimalSkin({ children, className = "" }) {
 
 //#endregion
 export { MinimalSkin as t };
-//# sourceMappingURL=minimal-Cj3N9SDN.js.map
+//# sourceMappingURL=minimal-pUeFJF1F.js.map

package/dist/{minimal-Cj3N9SDN.js.map → minimal-pUeFJF1F.js.map}

@@ -1 +1 @@
-{"version":3,"file":"minimal-Cj3N9SDN.js","names":["styles: MinimalSkinStyles","styles","Tooltip","PlayButton","PlayIcon","PauseIcon","PreviewTimeDisplay","Popover","MuteButton","VolumeHighIcon","VolumeLowIcon","VolumeOffIcon","VolumeSlider","FullscreenEnterAltIcon","FullscreenExitAltIcon"],"sources":["../src/skins/minimal/styles.ts","../src/skins/minimal/MinimalSkin.tsx"],"sourcesContent":["import type { MinimalSkinStyles } 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: MinimalSkinStyles = {\n  MediaContainer: cn(\n    'vjs', // Scope preflight\n    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black',\n    // Base typography\n    'vjs:text-[0.8125rem]', // 13px\n    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/20 vjs:after:ring-1 vjs:dark:after:ring-white/20 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',\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:absolute vjs:inset-0 vjs:rounded-[inherit] vjs:pointer-events-none',\n    'vjs:bg-gradient-to-t vjs:from-black/70 vjs:via-black/50 vjs:via-[7.5rem] vjs:to-transparent',\n    'vjs:opacity-0 vjs:delay-500 vjs:duration-300',\n    //  FIXME: Temporary hide/show logic\n    'vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-75',\n    'vjs:has-[+.controls_[aria-expanded=\"true\"]]:opacity-100 vjs:has-[+.controls_[aria-expanded=\"true\"]]:delay-0 vjs:has-[+.controls_[aria-expanded=\"true\"]]:duration-75',\n    'vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-75',\n    // High contrast mode\n    'vjs:contrast-more:from-black/75',\n  ),\n  Controls: cn(\n    'controls', //  FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.\n    'vjs:@container/controls vjs:absolute vjs:inset-x-0 vjs:bottom-0 vjs:flex vjs:items-center vjs:gap-3.5 vjs:z-20 vjs:px-3 vjs:pb-3 vjs:pt-10 vjs:text-white',\n    // Animation\n    'vjs:transition vjs:will-change-[transform,filter,opacity] vjs:ease-out',\n    //  FIXME: Temporary hide/show logic\n    'vjs:translate-y-full vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300',\n    'vjs:has-[[data-paused]]:translate-y-0 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-75',\n    'vjs:has-[[aria-expanded=\"true\"]]:translate-y-0 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-75',\n    'vjs:group-hover/root:translate-y-0 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-75',\n  ),\n  Icon: cn('icon'),\n  TimeDisplayGroup: cn('flex items-center gap-1'),\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.5 vjs:rounded-md',\n    // Background/foreground\n    'vjs:bg-transparent vjs:text-white',\n    // Hover and focus states\n    'vjs:hover:text-white/80 vjs:focus-visible:text-white/80',\n    // Focus state\n    'vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-white',\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:text-white/80',\n  ),\n  ButtonGroup: cn('vjs:flex vjs:items-center vjs:gap-1.5'),\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/40',\n  ),\n  PlayButton: cn(\n    'vjs:[&_.pause-icon]:opacity-100 vjs:[&[data-paused]_.pause-icon]:opacity-0',\n    'vjs:[&_.play-icon]:opacity-0 vjs:[&[data-paused]_.play-icon]:opacity-100',\n  ),\n  PlayIcon: cn('play-icon'),\n  PauseIcon: cn('pause-icon'),\n  PlayTooltipPopup: cn(\n    'vjs:[&_.pause-tooltip]:inline vjs:[&[data-paused]_.pause-tooltip]:hidden',\n    'vjs:[&_.play-tooltip]:hidden vjs:[&[data-paused]_.play-tooltip]:inline',\n  ),\n  PlayTooltip: cn('play-tooltip'),\n  PauseTooltip: cn('pause-tooltip'),\n  MuteButton: cn(\n    'vjs:[&_.icon]:hidden',\n    'vjs:[&[data-volume-level=\"high\"]_.volume-high-icon]:inline',\n    'vjs:[&[data-volume-level=\"medium\"]_.volume-low-icon]:inline',\n    'vjs:[&[data-volume-level=\"low\"]_.volume-low-icon]:inline',\n    'vjs:[&[data-volume-level=\"off\"]_.volume-off-icon]:inline',\n  ),\n  VolumeHighIcon: cn('volume-high-icon'),\n  VolumeLowIcon: cn('volume-low-icon'),\n  VolumeOffIcon: cn('volume-off-icon'),\n  FullscreenButton: cn(\n    'vjs:[&_.fullscreen-enter-icon]:opacity-100 vjs:[&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',\n    'vjs:[&_.fullscreen-exit-icon]:opacity-0 vjs:[&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',\n    'vjs:[&_path]:transition-transform vjs:ease-out',\n  ),\n  FullscreenEnterIcon: cn(\n    'fullscreen-enter-icon',\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    'fullscreen-exit-icon',\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  TimeSliderRoot: cn('vjs:mx-2'),\n  TimeDisplay: cn('vjs:tabular-nums vjs:text-shadow-2xs/20'),\n  DurationDisplay: cn('vjs:text-white/50 vjs:contents'),\n  SliderRoot: cn(\n    'vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:group/slider 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-18',\n  ),\n  SliderTrack: cn(\n    'vjs:relative vjs:select-none vjs:rounded-[inherit] vjs:bg-white/10',\n    'vjs:[&[data-orientation=\"horizontal\"]]:w-full vjs:[&[data-orientation=\"horizontal\"]]:h-[0.1875rem]',\n    'vjs:[&[data-orientation=\"vertical\"]]:w-[0.1875rem]',\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-white',\n  ),\n  SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),\n  SliderPointer: cn('vjs:hidden'),\n  SliderThumb: cn(\n    'vjs:bg-white vjs:z-10 vjs:size-3 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:transition-[opacity,scale] vjs:ease-out vjs:opacity-0 vjs:scale-70 vjs:origin-center',\n    'vjs:group-hover/slider:opacity-100 vjs:group-hover/slider:scale-100',\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(\n    'vjs:py-2',\n  ),\n  TooltipPopup: cn(\n    'vjs:whitespace-nowrap vjs:flex vjs:flex-col vjs:rounded vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2 vjs:py-1 vjs:bg-white/20 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90 vjs:shadow-md vjs:shadow-black/5',\n  ),\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  FullscreenEnterAltIcon,\n  FullscreenExitAltIcon,\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 MinimalSkin({ 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.Controls}>\n        <Tooltip.Root delay={500} closeDelay={0}>\n          <Tooltip.Trigger>\n            <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>\n              <PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />\n              <PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />\n            </PlayButton>\n          </Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Positioner side=\"top-start\" sideOffset={6} collisionPadding={12}>\n              <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.PlayTooltipPopup}`}>\n                <span className={styles.PlayTooltip}>Play</span>\n                <span className={styles.PauseTooltip}>Pause</span>\n              </Tooltip.Popup>\n            </Tooltip.Positioner>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n\n        <div className={styles.TimeDisplayGroup}>\n          <CurrentTimeDisplay\n            // Use showRemaining to show count down/remaining time\n            // showRemaining\n            className={styles.TimeDisplay}\n          />\n\n          <span className={styles.DurationDisplay}>\n            /\n            <DurationDisplay className={`${styles.TimeDisplay}`} />\n          </span>\n        </div>\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.Portal>\n            <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n              <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup}`}>\n                <PreviewTimeDisplay className={styles.TimeDisplay} />\n              </Tooltip.Popup>\n            </Tooltip.Positioner>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n\n        <div className={styles.ButtonGroup}>\n          <Popover.Root openOnHover delay={200} closeDelay={300}>\n            <Popover.Trigger>\n              <MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.MuteButton}`}>\n                <VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />\n                <VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />\n                <VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />\n              </MuteButton>\n            </Popover.Trigger>\n            <Popover.Portal>\n              <Popover.Positioner side=\"top\" sideOffset={2}>\n                <Popover.Popup className={`${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.Portal>\n          </Popover.Root>\n\n          <Tooltip.Root delay={500} closeDelay={0}>\n            <Tooltip.Trigger>\n              <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>\n                <FullscreenEnterAltIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />\n                <FullscreenExitAltIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />\n              </FullscreenButton>\n            </Tooltip.Trigger>\n            <Tooltip.Portal>\n              <Tooltip.Positioner side=\"top-end\" sideOffset={6} collisionPadding={12}>\n                <Tooltip.Popup className={`${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.Portal>\n          </Tooltip.Root>\n        </div>\n      </div>\n    </MediaContainer>\n  );\n}\n"],"mappings":";;;;;AAOA,SAAS,GAAG,GAAG,SAAyC;AACtD,QAAO,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI;;AAG1C,MAAMA,SAA4B;CAChC,gBAAgB,GACd,OACA,8FAEA,wBACA,4MAEA,mCAEA,4CACD;CACD,SAAS,GACP,0EACA,+FACA,gDAEA,4IACA,6KACA,kGAEA,kCACD;CACD,UAAU,GACR,YACA,6JAEA,0EAEA,iFACA,mLACA,0OACA,mKACD;CACD,MAAM,GAAG,OAAO;CAChB,kBAAkB,GAAG,0BAA0B;CAC/C,QAAQ,GACN,2JAEA,qCAEA,2DAEA,wHAEA,kFAEA,sEAEA,kCACD;CACD,aAAa,GAAG,wCAAwC;CACxD,YAAY,GACV,0CACA,wMACD;CACD,YAAY,GACV,8EACA,2EACD;CACD,UAAU,GAAG,YAAY;CACzB,WAAW,GAAG,aAAa;CAC3B,kBAAkB,GAChB,4EACA,yEACD;CACD,aAAa,GAAG,eAAe;CAC/B,cAAc,GAAG,gBAAgB;CACjC,YAAY,GACV,wBACA,gEACA,iEACA,8DACA,6DACD;CACD,gBAAgB,GAAG,mBAAmB;CACtC,eAAe,GAAG,kBAAkB;CACpC,eAAe,GAAG,kBAAkB;CACpC,kBAAkB,GAChB,wGACA,sGACA,iDACD;CACD,qBAAqB,GACnB,yBACA,0GACA,yGACD;CACD,oBAAoB,GAClB,wBACA,oEACA,oEACA,mDACA,kDACD;CACD,wBAAwB,GACtB,sGACA,mGACD;CACD,wBAAwB,GAAG,2BAA2B;CACtD,uBAAuB,GAAG,0BAA0B;CACpD,gBAAgB,GAAG,WAAW;CAC9B,aAAa,GAAG,0CAA0C;CAC1D,iBAAiB,GAAG,iCAAiC;CACrD,YAAY,GACV,yIACA,kGACA,yFACD;CACD,aAAa,GACX,sEACA,0GACA,wDACA,8JACD;CACD,gBAAgB,GAAG,qCAAqC;CACxD,eAAe,GAAG,aAAa;CAC/B,aAAa,GACX,2NACA,uEACA,mEACA,gEACD;CACD,gBAAgB,GAGd,oHACA,2GACA,oGACD;CACD,cAAc,GACZ,WACD;CACD,cAAc,GACZ,yPACD;CACF;AAED,qBAAe;;;;ACzHf,SAAwB,YAAY,EAAE,UAAU,YAAY,MAA8B;AACxF,QACE,qBAAC;EAAe,WAAW,GAAGC,eAAO,eAAe,GAAG;;GACpD;GAED,oBAAC,SAAI,WAAWA,eAAO,UAAW;GAElC,qBAAC;IAAI,WAAWA,eAAO;;KACrB,qBAACC,gBAAQ;MAAK,OAAO;MAAK,YAAY;iBACpC,oBAACA,gBAAQ,qBACP,qBAACC;OAAW,WAAW,GAAGF,eAAO,OAAO,GAAGA,eAAO,WAAW,GAAGA,eAAO;kBACrE,oBAACG,gBAAS,WAAW,GAAGH,eAAO,SAAS,GAAGA,eAAO,SAAU,EAC5D,oBAACI,iBAAU,WAAW,GAAGJ,eAAO,UAAU,GAAGA,eAAO,SAAU;QACnD,GACG,EAClB,oBAACC,gBAAQ,oBACP,oBAACA,gBAAQ;OAAW,MAAK;OAAY,YAAY;OAAG,kBAAkB;iBACpE,qBAACA,gBAAQ;QAAM,WAAW,GAAGD,eAAO,eAAe,GAAGA,eAAO,aAAa,GAAGA,eAAO;mBAClF,oBAAC;SAAK,WAAWA,eAAO;mBAAa;UAAW,EAChD,oBAAC;SAAK,WAAWA,eAAO;mBAAc;UAAY;SACpC;QACG,GACN;OACJ;KAEf,qBAAC;MAAI,WAAWA,eAAO;iBACrB,oBAAC,sBAGC,WAAWA,eAAO,cAClB,EAEF,qBAAC;OAAK,WAAWA,eAAO;kBAAiB,KAEvC,oBAAC,mBAAgB,WAAW,GAAGA,eAAO,gBAAiB;QAClD;OACH;KAEN,qBAACC,gBAAQ;MAAK,iBAAgB;iBAC5B,oBAACA,gBAAQ,qBACP,qBAAC,WAAW;OAAK,WAAWD,eAAO;kBACjC,qBAAC,WAAW;QAAM,WAAWA,eAAO;mBAClC,oBAAC,WAAW,YAAS,WAAWA,eAAO,iBAAkB,EACzD,oBAAC,WAAW,WAAQ,WAAWA,eAAO,gBAAiB;SACtC,EACnB,oBAAC,WAAW,SAAM,WAAWA,eAAO,cAAe;QACnC,GACF,EAClB,oBAACC,gBAAQ,oBACP,oBAACA,gBAAQ;OAAW,MAAK;OAAM,YAAY;OAAI,kBAAkB;iBAC/D,oBAACA,gBAAQ;QAAM,WAAW,GAAGD,eAAO,eAAe,GAAGA,eAAO;kBAC3D,oBAACK,8BAAmB,WAAWL,eAAO,cAAe;SACvC;QACG,GACN;OACJ;KAEf,qBAAC;MAAI,WAAWA,eAAO;iBACrB,qBAACM,gBAAQ;OAAK;OAAY,OAAO;OAAK,YAAY;kBAChD,oBAACA,gBAAQ,qBACP,qBAACC;QAAW,WAAW,GAAGP,eAAO,OAAO,GAAGA,eAAO,WAAW,GAAGA,eAAO;;SACrE,oBAACQ,sBAAe,WAAW,GAAGR,eAAO,eAAe,GAAGA,eAAO,SAAU;SACxE,oBAACS,qBAAc,WAAW,GAAGT,eAAO,cAAc,GAAGA,eAAO,SAAU;SACtE,oBAACU,qBAAc,WAAW,GAAGV,eAAO,cAAc,GAAGA,eAAO,SAAU;;SAC3D,GACG,EAClB,oBAACM,gBAAQ,oBACP,oBAACA,gBAAQ;QAAW,MAAK;QAAM,YAAY;kBACzC,oBAACA,gBAAQ;SAAM,WAAW,GAAGN,eAAO,eAAe,GAAGA,eAAO;mBAC3D,qBAACW,qBAAa;UAAK,WAAWX,eAAO;UAAY,aAAY;qBAC3D,oBAACW,qBAAa;WAAM,WAAWX,eAAO;qBACpC,oBAACW,qBAAa,YAAS,WAAWX,eAAO,iBAAkB;YACxC,EACrB,oBAACW,qBAAa,SAAM,WAAWX,eAAO,cAAe;WACnC;UACN;SACG,GACN;QACJ,EAEf,qBAACC,gBAAQ;OAAK,OAAO;OAAK,YAAY;kBACpC,oBAACA,gBAAQ,qBACP,qBAAC;QAAiB,WAAW,GAAGD,eAAO,OAAO,GAAGA,eAAO,WAAW,GAAGA,eAAO;mBAC3E,oBAACY,8BAAuB,WAAW,GAAGZ,eAAO,oBAAoB,GAAGA,eAAO,SAAU,EACrF,oBAACa,6BAAsB,WAAW,GAAGb,eAAO,mBAAmB,GAAGA,eAAO,SAAU;SAClE,GACH,EAClB,oBAACC,gBAAQ,oBACP,oBAACA,gBAAQ;QAAW,MAAK;QAAU,YAAY;QAAG,kBAAkB;kBAClE,qBAACA,gBAAQ;SAAM,WAAW,GAAGD,eAAO,eAAe,GAAGA,eAAO,aAAa,GAAGA,eAAO;oBAClF,oBAAC;UAAK,WAAWA,eAAO;oBAAwB;WAAuB,EACvE,oBAAC;UAAK,WAAWA,eAAO;oBAAuB;WAAsB;UACvD;SACG,GACN;QACJ;OACX;;KACF;;GACS"}
+{"version":3,"file":"minimal-pUeFJF1F.js","names":["styles: MinimalSkinStyles","styles","Tooltip","PlayButton","PlayIcon","PauseIcon","PreviewTimeDisplay","Popover","MuteButton","VolumeHighIcon","VolumeLowIcon","VolumeOffIcon","VolumeSlider","FullscreenEnterAltIcon","FullscreenExitAltIcon"],"sources":["../src/skins/minimal/styles.ts","../src/skins/minimal/MinimalSkin.tsx"],"sourcesContent":["import type { MinimalSkinStyles } 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: MinimalSkinStyles = {\n  MediaContainer: cn(\n    'vjs', // Scope preflight\n    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black',\n    // Base typography\n    'vjs:text-[0.8125rem]', // 13px\n    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/20 vjs:after:ring-1 vjs:dark:after:ring-white/20 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',\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:absolute vjs:inset-0 vjs:rounded-[inherit] vjs:pointer-events-none',\n    'vjs:bg-gradient-to-t vjs:from-black/70 vjs:via-black/50 vjs:via-[7.5rem] vjs:to-transparent',\n    'vjs:opacity-0 vjs:delay-500 vjs:duration-300',\n    //  FIXME: Temporary hide/show logic\n    'vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-75',\n    'vjs:has-[+.controls_[aria-expanded=\"true\"]]:opacity-100 vjs:has-[+.controls_[aria-expanded=\"true\"]]:delay-0 vjs:has-[+.controls_[aria-expanded=\"true\"]]:duration-75',\n    'vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-75',\n    // High contrast mode\n    'vjs:contrast-more:from-black/75',\n  ),\n  Controls: cn(\n    'controls', //  FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.\n    'vjs:@container/controls vjs:absolute vjs:inset-x-0 vjs:bottom-0 vjs:flex vjs:items-center vjs:gap-3.5 vjs:z-20 vjs:px-3 vjs:pb-3 vjs:pt-10 vjs:text-white',\n    // Animation\n    'vjs:transition vjs:will-change-[transform,filter,opacity] vjs:ease-out',\n    //  FIXME: Temporary hide/show logic\n    'vjs:translate-y-full vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300',\n    'vjs:has-[[data-paused]]:translate-y-0 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-75',\n    'vjs:has-[[aria-expanded=\"true\"]]:translate-y-0 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-75',\n    'vjs:group-hover/root:translate-y-0 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-75',\n  ),\n  Icon: cn('icon'),\n  TimeDisplayGroup: cn('flex items-center gap-1'),\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.5 vjs:rounded-md',\n    // Background/foreground\n    'vjs:bg-transparent vjs:text-white',\n    // Hover and focus states\n    'vjs:hover:text-white/80 vjs:focus-visible:text-white/80',\n    // Focus state\n    'vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-white',\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:text-white/80',\n  ),\n  ButtonGroup: cn('vjs:flex vjs:items-center vjs:gap-1.5'),\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/40',\n  ),\n  PlayButton: cn(\n    'vjs:[&_.pause-icon]:opacity-100 vjs:[&[data-paused]_.pause-icon]:opacity-0',\n    'vjs:[&_.play-icon]:opacity-0 vjs:[&[data-paused]_.play-icon]:opacity-100',\n  ),\n  PlayIcon: cn('play-icon'),\n  PauseIcon: cn('pause-icon'),\n  PlayTooltipPopup: cn(\n    'vjs:[&_.pause-tooltip]:inline vjs:[&[data-paused]_.pause-tooltip]:hidden',\n    'vjs:[&_.play-tooltip]:hidden vjs:[&[data-paused]_.play-tooltip]:inline',\n  ),\n  PlayTooltip: cn('play-tooltip'),\n  PauseTooltip: cn('pause-tooltip'),\n  MuteButton: cn(\n    'vjs:[&_.icon]:hidden',\n    'vjs:[&[data-volume-level=\"high\"]_.volume-high-icon]:inline',\n    'vjs:[&[data-volume-level=\"medium\"]_.volume-low-icon]:inline',\n    'vjs:[&[data-volume-level=\"low\"]_.volume-low-icon]:inline',\n    'vjs:[&[data-volume-level=\"off\"]_.volume-off-icon]:inline',\n  ),\n  VolumeHighIcon: cn('volume-high-icon'),\n  VolumeLowIcon: cn('volume-low-icon'),\n  VolumeOffIcon: cn('volume-off-icon'),\n  FullscreenButton: cn(\n    'vjs:[&_.fullscreen-enter-icon]:opacity-100 vjs:[&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',\n    'vjs:[&_.fullscreen-exit-icon]:opacity-0 vjs:[&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',\n    'vjs:[&_path]:transition-transform vjs:ease-out',\n  ),\n  FullscreenEnterIcon: cn(\n    'fullscreen-enter-icon',\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    'fullscreen-exit-icon',\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  TimeSliderRoot: cn('vjs:mx-2'),\n  TimeDisplay: cn('vjs:tabular-nums vjs:text-shadow-2xs/20'),\n  DurationDisplay: cn('vjs:text-white/50 vjs:contents'),\n  SliderRoot: cn(\n    'vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:group/slider 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-18',\n  ),\n  SliderTrack: cn(\n    'vjs:relative vjs:select-none vjs:rounded-[inherit] vjs:bg-white/10',\n    'vjs:[&[data-orientation=\"horizontal\"]]:w-full vjs:[&[data-orientation=\"horizontal\"]]:h-[0.1875rem]',\n    'vjs:[&[data-orientation=\"vertical\"]]:w-[0.1875rem]',\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-white',\n  ),\n  SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),\n  SliderPointer: cn('vjs:hidden'),\n  SliderThumb: cn(\n    'vjs:bg-white vjs:z-10 vjs:size-3 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:transition-[opacity,scale] vjs:ease-out vjs:opacity-0 vjs:scale-70 vjs:origin-center',\n    'vjs:group-hover/slider:opacity-100 vjs:group-hover/slider:scale-100',\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(\n    'vjs:py-2',\n  ),\n  TooltipPopup: cn(\n    'vjs:whitespace-nowrap vjs:flex vjs:flex-col vjs:rounded vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2 vjs:py-1 vjs:bg-white/20 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90 vjs:shadow-md vjs:shadow-black/5',\n  ),\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  FullscreenEnterAltIcon,\n  FullscreenExitAltIcon,\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 MinimalSkin({ 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.Controls}>\n        <Tooltip.Root delay={500} closeDelay={0}>\n          <Tooltip.Trigger>\n            <PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>\n              <PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />\n              <PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />\n            </PlayButton>\n          </Tooltip.Trigger>\n          <Tooltip.Portal>\n            <Tooltip.Positioner side=\"top-start\" sideOffset={6} collisionPadding={12}>\n              <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.PlayTooltipPopup}`}>\n                <span className={styles.PlayTooltip}>Play</span>\n                <span className={styles.PauseTooltip}>Pause</span>\n              </Tooltip.Popup>\n            </Tooltip.Positioner>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n\n        <div className={styles.TimeDisplayGroup}>\n          <CurrentTimeDisplay\n            // Use showRemaining to show count down/remaining time\n            // showRemaining\n            className={styles.TimeDisplay}\n          />\n\n          <span className={styles.DurationDisplay}>\n            /\n            <DurationDisplay className={`${styles.TimeDisplay}`} />\n          </span>\n        </div>\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.Portal>\n            <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n              <Tooltip.Popup className={`${styles.PopupAnimation} ${styles.TooltipPopup}`}>\n                <PreviewTimeDisplay className={styles.TimeDisplay} />\n              </Tooltip.Popup>\n            </Tooltip.Positioner>\n          </Tooltip.Portal>\n        </Tooltip.Root>\n\n        <div className={styles.ButtonGroup}>\n          <Popover.Root openOnHover delay={200} closeDelay={300}>\n            <Popover.Trigger>\n              <MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.MuteButton}`}>\n                <VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />\n                <VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />\n                <VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />\n              </MuteButton>\n            </Popover.Trigger>\n            <Popover.Portal>\n              <Popover.Positioner side=\"top\" sideOffset={2}>\n                <Popover.Popup className={`${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.Portal>\n          </Popover.Root>\n\n          <Tooltip.Root delay={500} closeDelay={0}>\n            <Tooltip.Trigger>\n              <FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>\n                <FullscreenEnterAltIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />\n                <FullscreenExitAltIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />\n              </FullscreenButton>\n            </Tooltip.Trigger>\n            <Tooltip.Portal>\n              <Tooltip.Positioner side=\"top-end\" sideOffset={6} collisionPadding={12}>\n                <Tooltip.Popup className={`${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.Portal>\n          </Tooltip.Root>\n        </div>\n      </div>\n    </MediaContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/skins/frosted.js

@@ -1,6 +1,9 @@
-import "../store-DpQF8Ges.js";
-import "../VolumeSlider-DoR6idnJ.js";
+'use client';
+
+
+import "../store-hGO5HE2A.js";
+import "../VolumeSlider-CWpLFzdJ.js";
 import "../icons-BqfV81R8.js";
-import { t as FrostedSkin } from "../frosted-ra_eRTyG.js";
+import { t as FrostedSkin } from "../frosted-JuY6ZaAp.js";
 
 export { FrostedSkin };

package/dist/skins/minimal.js

@@ -1,6 +1,9 @@
-import "../store-DpQF8Ges.js";
-import "../VolumeSlider-DoR6idnJ.js";
+'use client';
+
+
+import "../store-hGO5HE2A.js";
+import "../VolumeSlider-CWpLFzdJ.js";
 import "../icons-BqfV81R8.js";
-import { t as MinimalSkin } from "../minimal-Cj3N9SDN.js";
+import { t as MinimalSkin } from "../minimal-pUeFJF1F.js";
 
 export { MinimalSkin };

package/dist/{store-DpQF8Ges.js → store-hGO5HE2A.js}

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 * used "under the hood" for media ui state updates, state change requests, and the hooks and providers that integrate with this context.
 * It is unlikely that you will/should be using `MediaContext` directly.
 *
-* @see {@link MediaProvider}
+* @see {@link VideoProvider}
 * @see {@link useMediaDispatch}
 * @see {@link useMediaSelector}
 */
@@ -110,8 +110,8 @@ function useMediaSelector(selector, equalityFn = refEquality) {
 }
 
 //#endregion
-//#region src/store/media-provider.tsx
-function MediaProvider({ children }) {
+//#region src/store/video-provider.tsx
+function VideoProvider({ children }) {
 	const value = useMemo(() => createMediaStore(), []);
 	return /* @__PURE__ */ jsx(MediaContext.Provider, {
 		value,
@@ -120,5 +120,5 @@ function MediaProvider({ children }) {
 }
 
 //#endregion
-export { useMediaStore as a, useMediaSelector as i, useMediaDispatch as n, MediaContext as o, useMediaRef as r, MediaProvider as t };
-//# sourceMappingURL=store-DpQF8Ges.js.map
+export { useMediaStore as a, useMediaSelector as i, useMediaDispatch as n, MediaContext as o, useMediaRef as r, VideoProvider as t };
+//# sourceMappingURL=store-hGO5HE2A.js.map

package/dist/{store-DpQF8Ges.js.map → store-hGO5HE2A.js.map}

@@ -1 +1 @@
-{"version":3,"file":"store-DpQF8Ges.js","names":["MediaContext: Context<any | null>","is: (x: any, y: any) => boolean","inst: SnapshotRef<Selection>","memoizedSnapshot: Snapshot","memoizedSelection: Selection","nextSelection","prevSnapshot: Snapshot","prevSelection: Selection"],"sources":["../src/store/context.ts","../src/store/use-sync-external-store.ts","../src/store/hooks.ts","../src/store/media-provider.tsx"],"sourcesContent":["import type { Context } from 'react';\nimport { createContext } from 'react';\n\n/**\n * @description The {@link https://react.dev/learn/passing-data-deeply-with-context#context-an-alternative-to-passing-props|React Context}\n * used \"under the hood\" for media ui state updates, state change requests, and the hooks and providers that integrate with this context.\n * It is unlikely that you will/should be using `MediaContext` directly.\n *\n * @see {@link MediaProvider}\n * @see {@link useMediaDispatch}\n * @see {@link useMediaSelector}\n */\nexport const MediaContext: Context<any | null> = createContext<any | null>(null);\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useDebugValue, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\n\n// NOTE: This is a port of https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js\n// and React's internal/shared version of `Object.is` with refactors for TypeScript and bundling. Doing this to avoid adding an additional dependency\n// beyond core React when using the `MediaStore` React hooks and related (CJP)\n\n/**\n * inlined Object.is polyfill to avoid requiring consumers ship their own\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\n */\nfunction isPolyfill(x: any, y: any) {\n  return (\n    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare\n  );\n}\n\ntype SnapshotRef<Selection>\n  = | {\n    hasValue: true;\n    value: Selection;\n  }\n  | {\n    hasValue: false;\n    value: null;\n  }\n  | null;\n\nconst is: (x: any, y: any) => boolean = typeof Object.is === 'function' ? Object.is : isPolyfill;\n\n// Same as useSyncExternalStore, but supports selector and isEqual arguments.\nexport function useSyncExternalStoreWithSelector<Snapshot, Selection>(\n  subscribe: (onStoreChange: () => void) => () => void,\n  getSnapshot: () => Snapshot,\n  getServerSnapshot: undefined | null | (() => Snapshot),\n  selector: (snapshot: Snapshot) => Selection,\n  isEqual?: (a: Selection, b: Selection) => boolean,\n): Selection {\n  // Use this to track the rendered snapshot.\n  const instRef = useRef<SnapshotRef<Selection>>(null);\n  let inst: SnapshotRef<Selection>;\n  if (instRef.current === null) {\n    inst = {\n      hasValue: false,\n      value: null,\n    };\n    instRef.current = inst as SnapshotRef<Selection>;\n  } else {\n    inst = instRef.current;\n  }\n\n  const [getSelection, getServerSelection] = useMemo(() => {\n    // Track the memoized state using closure variables that are local to this\n    // memoized instance of a getSnapshot function. Intentionally not using a\n    // useRef hook, because that state would be shared across all concurrent\n    // copies of the hook/component.\n    let hasMemo = false;\n    let memoizedSnapshot: Snapshot;\n    let memoizedSelection: Selection;\n    const memoizedSelector = (nextSnapshot: Snapshot) => {\n      if (!hasMemo) {\n        // The first time the hook is called, there is no memoized result.\n        hasMemo = true;\n        memoizedSnapshot = nextSnapshot;\n        const nextSelection = selector(nextSnapshot);\n        if (isEqual !== undefined) {\n          // Even if the selector has changed, the currently rendered selection\n          // may be equal to the new selection. We should attempt to reuse the\n          // current value if possible, to preserve downstream memoizations.\n          if (inst.hasValue) {\n            const currentSelection = inst.value;\n            if (isEqual(currentSelection, nextSelection)) {\n              memoizedSelection = currentSelection;\n              return currentSelection;\n            }\n          }\n        }\n        memoizedSelection = nextSelection;\n        return nextSelection;\n      }\n\n      // We may be able to reuse the previous invocation's result.\n      const prevSnapshot: Snapshot = memoizedSnapshot;\n      const prevSelection: Selection = memoizedSelection;\n\n      if (is(prevSnapshot, nextSnapshot)) {\n        // The snapshot is the same as last time. Reuse the previous selection.\n        return prevSelection;\n      }\n\n      // The snapshot has changed, so we need to compute a new selection.\n      const nextSelection = selector(nextSnapshot);\n\n      // If a custom isEqual function is provided, use that to check if the data\n      // has changed. If it hasn't, return the previous selection. That signals\n      // to React that the selections are conceptually equal, and we can bail\n      // out of rendering.\n      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {\n        return prevSelection;\n      }\n\n      memoizedSnapshot = nextSnapshot;\n      memoizedSelection = nextSelection;\n      return nextSelection;\n    };\n    // Assigning this to a constant so that Flow knows it can't change.\n    const maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;\n    const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());\n    const getServerSnapshotWithSelector\n      = maybeGetServerSnapshot === null ? undefined : () => memoizedSelector(maybeGetServerSnapshot());\n    return [getSnapshotWithSelector, getServerSnapshotWithSelector];\n  }, [getSnapshot, getServerSnapshot, selector, isEqual]);\n\n  const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);\n\n  useEffect(() => {\n    inst.hasValue = true;\n    inst.value = value;\n  }, [value]);\n\n  useDebugValue(value);\n  return value;\n}\n","/** @TODO !!! Revisit for SSR (CJP) */\nimport type { MediaStore } from '@videojs/core/store';\n\nimport { useContext } from 'react';\n\nimport { MediaContext } from './context';\nimport { useSyncExternalStoreWithSelector } from './use-sync-external-store';\n\nconst identity = (x?: any) => x;\n\nexport function useMediaStore(): MediaStore {\n  return useContext(MediaContext);\n}\n\nexport function useMediaDispatch(): (value: any) => unknown {\n  const store = useContext(MediaContext);\n  const dispatch = store?.dispatch ?? identity;\n  return (value: any) => {\n    return dispatch(value);\n  };\n}\n\nexport function useMediaRef() {\n  const dispatch = useMediaDispatch();\n\n  return (element: any): void => {\n    // NOTE: This should get invoked with `null` when using as a `ref` callback whenever\n    // the corresponding react media element instance (e.g. a `<video>`) is being removed.\n    /*\n    { type: 'mediastateownerchangerequest', detail: media }\n    */\n    dispatch({ type: 'mediastateownerchangerequest', detail: element });\n  };\n}\n\nexport const refEquality = (a: any, b: any): boolean => a === b;\n\nexport function useMediaSelector<S = any>(\n  selector: (state: any) => S,\n  equalityFn: (a: S, b: S) => boolean = refEquality,\n): S {\n  const store = useContext(MediaContext);\n  const selectedState = useSyncExternalStoreWithSelector(\n    store?.subscribe ?? identity,\n    store?.getState ?? identity,\n    store?.getState ?? identity,\n    selector,\n    equalityFn,\n  ) as S;\n\n  return selectedState;\n}\n","'use client';\n\n/** @TODO !!! Revisit for SSR (CJP) */\nimport type { ReactNode } from 'react';\n\nimport { createMediaStore } from '@videojs/core/store';\n\nimport { useMemo } from 'react';\nimport { MediaContext } from './context';\n\nexport function MediaProvider({ children }: { children: ReactNode }): JSX.Element {\n  const value = useMemo(() => createMediaStore(), []);\n\n  // useEffect(() => {\n  //   value?.dispatch({\n  //     type: 'documentelementchangerequest',\n  //     detail: globalThis.document,\n  //   });\n  //   return () => {\n  //     value?.dispatch({\n  //       type: 'documentelementchangerequest',\n  //       detail: undefined,\n  //     });\n  //   };\n  // }, []);\n\n  return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAaA,eAAoC,cAA0B,KAAK;;;;;;;;ACMhF,SAAS,WAAW,GAAQ,GAAQ;AAClC,QACG,MAAM,MAAM,MAAM,KAAK,IAAI,MAAM,IAAI,MAAQ,MAAM,KAAK,MAAM;;AAenE,MAAMC,KAAkC,OAAO,OAAO,OAAO,aAAa,OAAO,KAAK;AAGtF,SAAgB,iCACd,WACA,aACA,mBACA,UACA,SACW;CAEX,MAAM,UAAU,OAA+B,KAAK;CACpD,IAAIC;AACJ,KAAI,QAAQ,YAAY,MAAM;AAC5B,SAAO;GACL,UAAU;GACV,OAAO;GACR;AACD,UAAQ,UAAU;OAElB,QAAO,QAAQ;CAGjB,MAAM,CAAC,cAAc,sBAAsB,cAAc;EAKvD,IAAI,UAAU;EACd,IAAIC;EACJ,IAAIC;EACJ,MAAM,oBAAoB,iBAA2B;AACnD,OAAI,CAAC,SAAS;AAEZ,cAAU;AACV,uBAAmB;IACnB,MAAMC,kBAAgB,SAAS,aAAa;AAC5C,QAAI,YAAY,QAId;SAAI,KAAK,UAAU;MACjB,MAAM,mBAAmB,KAAK;AAC9B,UAAI,QAAQ,kBAAkBA,gBAAc,EAAE;AAC5C,2BAAoB;AACpB,cAAO;;;;AAIb,wBAAoBA;AACpB,WAAOA;;GAIT,MAAMC,eAAyB;GAC/B,MAAMC,gBAA2B;AAEjC,OAAI,GAAG,cAAc,aAAa,CAEhC,QAAO;GAIT,MAAM,gBAAgB,SAAS,aAAa;AAM5C,OAAI,YAAY,UAAa,QAAQ,eAAe,cAAc,CAChE,QAAO;AAGT,sBAAmB;AACnB,uBAAoB;AACpB,UAAO;;EAGT,MAAM,yBAAyB,sBAAsB,SAAY,OAAO;EACxE,MAAM,gCAAgC,iBAAiB,aAAa,CAAC;AAGrE,SAAO,CAAC,yBADJ,2BAA2B,OAAO,eAAkB,iBAAiB,wBAAwB,CAAC,CACnC;IAC9D;EAAC;EAAa;EAAmB;EAAU;EAAQ,CAAC;CAEvD,MAAM,QAAQ,qBAAqB,WAAW,cAAc,mBAAmB;AAE/E,iBAAgB;AACd,OAAK,WAAW;AAChB,OAAK,QAAQ;IACZ,CAAC,MAAM,CAAC;AAEX,eAAc,MAAM;AACpB,QAAO;;;;;ACxHT,MAAM,YAAY,MAAY;AAE9B,SAAgB,gBAA4B;AAC1C,QAAO,WAAW,aAAa;;AAGjC,SAAgB,mBAA4C;CAE1D,MAAM,WADQ,WAAW,aAAa,EACd,YAAY;AACpC,SAAQ,UAAe;AACrB,SAAO,SAAS,MAAM;;;AAI1B,SAAgB,cAAc;CAC5B,MAAM,WAAW,kBAAkB;AAEnC,SAAQ,YAAuB;AAM7B,WAAS;GAAE,MAAM;GAAgC,QAAQ;GAAS,CAAC;;;AAIvE,MAAa,eAAe,GAAQ,MAAoB,MAAM;AAE9D,SAAgB,iBACd,UACA,aAAsC,aACnC;CACH,MAAM,QAAQ,WAAW,aAAa;AAStC,QARsB,iCACpB,OAAO,aAAa,UACpB,OAAO,YAAY,UACnB,OAAO,YAAY,UACnB,UACA,WACD;;;;;ACtCH,SAAgB,cAAc,EAAE,YAAkD;CAChF,MAAM,QAAQ,cAAc,kBAAkB,EAAE,EAAE,CAAC;AAenD,QAAO,oBAAC,aAAa;EAAgB;EAAQ;GAAiC"}
+{"version":3,"file":"store-hGO5HE2A.js","names":["MediaContext: Context<any | null>","is: (x: any, y: any) => boolean","inst: SnapshotRef<Selection>","memoizedSnapshot: Snapshot","memoizedSelection: Selection","nextSelection","prevSnapshot: Snapshot","prevSelection: Selection"],"sources":["../src/store/context.ts","../src/store/use-sync-external-store.ts","../src/store/hooks.ts","../src/store/video-provider.tsx"],"sourcesContent":["import type { Context } from 'react';\nimport { createContext } from 'react';\n\n/**\n * @description The {@link https://react.dev/learn/passing-data-deeply-with-context#context-an-alternative-to-passing-props|React Context}\n * used \"under the hood\" for media ui state updates, state change requests, and the hooks and providers that integrate with this context.\n * It is unlikely that you will/should be using `MediaContext` directly.\n *\n * @see {@link VideoProvider}\n * @see {@link useMediaDispatch}\n * @see {@link useMediaSelector}\n */\nexport const MediaContext: Context<any | null> = createContext<any | null>(null);\n","/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useDebugValue, useEffect, useMemo, useRef, useSyncExternalStore } from 'react';\n\n// NOTE: This is a port of https://github.com/facebook/react/blob/main/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js\n// and React's internal/shared version of `Object.is` with refactors for TypeScript and bundling. Doing this to avoid adding an additional dependency\n// beyond core React when using the `MediaStore` React hooks and related (CJP)\n\n/**\n * inlined Object.is polyfill to avoid requiring consumers ship their own\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is\n */\nfunction isPolyfill(x: any, y: any) {\n  return (\n    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare\n  );\n}\n\ntype SnapshotRef<Selection>\n  = | {\n    hasValue: true;\n    value: Selection;\n  }\n  | {\n    hasValue: false;\n    value: null;\n  }\n  | null;\n\nconst is: (x: any, y: any) => boolean = typeof Object.is === 'function' ? Object.is : isPolyfill;\n\n// Same as useSyncExternalStore, but supports selector and isEqual arguments.\nexport function useSyncExternalStoreWithSelector<Snapshot, Selection>(\n  subscribe: (onStoreChange: () => void) => () => void,\n  getSnapshot: () => Snapshot,\n  getServerSnapshot: undefined | null | (() => Snapshot),\n  selector: (snapshot: Snapshot) => Selection,\n  isEqual?: (a: Selection, b: Selection) => boolean,\n): Selection {\n  // Use this to track the rendered snapshot.\n  const instRef = useRef<SnapshotRef<Selection>>(null);\n  let inst: SnapshotRef<Selection>;\n  if (instRef.current === null) {\n    inst = {\n      hasValue: false,\n      value: null,\n    };\n    instRef.current = inst as SnapshotRef<Selection>;\n  } else {\n    inst = instRef.current;\n  }\n\n  const [getSelection, getServerSelection] = useMemo(() => {\n    // Track the memoized state using closure variables that are local to this\n    // memoized instance of a getSnapshot function. Intentionally not using a\n    // useRef hook, because that state would be shared across all concurrent\n    // copies of the hook/component.\n    let hasMemo = false;\n    let memoizedSnapshot: Snapshot;\n    let memoizedSelection: Selection;\n    const memoizedSelector = (nextSnapshot: Snapshot) => {\n      if (!hasMemo) {\n        // The first time the hook is called, there is no memoized result.\n        hasMemo = true;\n        memoizedSnapshot = nextSnapshot;\n        const nextSelection = selector(nextSnapshot);\n        if (isEqual !== undefined) {\n          // Even if the selector has changed, the currently rendered selection\n          // may be equal to the new selection. We should attempt to reuse the\n          // current value if possible, to preserve downstream memoizations.\n          if (inst.hasValue) {\n            const currentSelection = inst.value;\n            if (isEqual(currentSelection, nextSelection)) {\n              memoizedSelection = currentSelection;\n              return currentSelection;\n            }\n          }\n        }\n        memoizedSelection = nextSelection;\n        return nextSelection;\n      }\n\n      // We may be able to reuse the previous invocation's result.\n      const prevSnapshot: Snapshot = memoizedSnapshot;\n      const prevSelection: Selection = memoizedSelection;\n\n      if (is(prevSnapshot, nextSnapshot)) {\n        // The snapshot is the same as last time. Reuse the previous selection.\n        return prevSelection;\n      }\n\n      // The snapshot has changed, so we need to compute a new selection.\n      const nextSelection = selector(nextSnapshot);\n\n      // If a custom isEqual function is provided, use that to check if the data\n      // has changed. If it hasn't, return the previous selection. That signals\n      // to React that the selections are conceptually equal, and we can bail\n      // out of rendering.\n      if (isEqual !== undefined && isEqual(prevSelection, nextSelection)) {\n        return prevSelection;\n      }\n\n      memoizedSnapshot = nextSnapshot;\n      memoizedSelection = nextSelection;\n      return nextSelection;\n    };\n    // Assigning this to a constant so that Flow knows it can't change.\n    const maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;\n    const getSnapshotWithSelector = () => memoizedSelector(getSnapshot());\n    const getServerSnapshotWithSelector\n      = maybeGetServerSnapshot === null ? undefined : () => memoizedSelector(maybeGetServerSnapshot());\n    return [getSnapshotWithSelector, getServerSnapshotWithSelector];\n  }, [getSnapshot, getServerSnapshot, selector, isEqual]);\n\n  const value = useSyncExternalStore(subscribe, getSelection, getServerSelection);\n\n  useEffect(() => {\n    inst.hasValue = true;\n    inst.value = value;\n  }, [value]);\n\n  useDebugValue(value);\n  return value;\n}\n","/** @TODO !!! Revisit for SSR (CJP) */\nimport type { MediaStore } from '@videojs/core/store';\n\nimport { useContext } from 'react';\n\nimport { MediaContext } from './context';\nimport { useSyncExternalStoreWithSelector } from './use-sync-external-store';\n\nconst identity = (x?: any) => x;\n\nexport function useMediaStore(): MediaStore {\n  return useContext(MediaContext);\n}\n\nexport function useMediaDispatch(): (value: any) => unknown {\n  const store = useContext(MediaContext);\n  const dispatch = store?.dispatch ?? identity;\n  return (value: any) => {\n    return dispatch(value);\n  };\n}\n\nexport function useMediaRef() {\n  const dispatch = useMediaDispatch();\n\n  return (element: any): void => {\n    // NOTE: This should get invoked with `null` when using as a `ref` callback whenever\n    // the corresponding react media element instance (e.g. a `<video>`) is being removed.\n    /*\n    { type: 'mediastateownerchangerequest', detail: media }\n    */\n    dispatch({ type: 'mediastateownerchangerequest', detail: element });\n  };\n}\n\nexport const refEquality = (a: any, b: any): boolean => a === b;\n\nexport function useMediaSelector<S = any>(\n  selector: (state: any) => S,\n  equalityFn: (a: S, b: S) => boolean = refEquality,\n): S {\n  const store = useContext(MediaContext);\n  const selectedState = useSyncExternalStoreWithSelector(\n    store?.subscribe ?? identity,\n    store?.getState ?? identity,\n    store?.getState ?? identity,\n    selector,\n    equalityFn,\n  ) as S;\n\n  return selectedState;\n}\n","/** @TODO !!! Revisit for SSR (CJP) */\nimport type { ReactNode } from 'react';\n\nimport { createMediaStore } from '@videojs/core/store';\n\nimport { useMemo } from 'react';\nimport { MediaContext } from './context';\n\nexport function VideoProvider({ children }: { children: ReactNode }): JSX.Element {\n  const value = useMemo(() => createMediaStore(), []);\n\n  // useEffect(() => {\n  //   value?.dispatch({\n  //     type: 'documentelementchangerequest',\n  //     detail: globalThis.document,\n  //   });\n  //   return () => {\n  //     value?.dispatch({\n  //       type: 'documentelementchangerequest',\n  //       detail: undefined,\n  //     });\n  //   };\n  // }, []);\n\n  return <MediaContext.Provider value={value}>{children}</MediaContext.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAaA,eAAoC,cAA0B,KAAK;;;;;;;;ACMhF,SAAS,WAAW,GAAQ,GAAQ;AAClC,QACG,MAAM,MAAM,MAAM,KAAK,IAAI,MAAM,IAAI,MAAQ,MAAM,KAAK,MAAM;;AAenE,MAAMC,KAAkC,OAAO,OAAO,OAAO,aAAa,OAAO,KAAK;AAGtF,SAAgB,iCACd,WACA,aACA,mBACA,UACA,SACW;CAEX,MAAM,UAAU,OAA+B,KAAK;CACpD,IAAIC;AACJ,KAAI,QAAQ,YAAY,MAAM;AAC5B,SAAO;GACL,UAAU;GACV,OAAO;GACR;AACD,UAAQ,UAAU;OAElB,QAAO,QAAQ;CAGjB,MAAM,CAAC,cAAc,sBAAsB,cAAc;EAKvD,IAAI,UAAU;EACd,IAAIC;EACJ,IAAIC;EACJ,MAAM,oBAAoB,iBAA2B;AACnD,OAAI,CAAC,SAAS;AAEZ,cAAU;AACV,uBAAmB;IACnB,MAAMC,kBAAgB,SAAS,aAAa;AAC5C,QAAI,YAAY,QAId;SAAI,KAAK,UAAU;MACjB,MAAM,mBAAmB,KAAK;AAC9B,UAAI,QAAQ,kBAAkBA,gBAAc,EAAE;AAC5C,2BAAoB;AACpB,cAAO;;;;AAIb,wBAAoBA;AACpB,WAAOA;;GAIT,MAAMC,eAAyB;GAC/B,MAAMC,gBAA2B;AAEjC,OAAI,GAAG,cAAc,aAAa,CAEhC,QAAO;GAIT,MAAM,gBAAgB,SAAS,aAAa;AAM5C,OAAI,YAAY,UAAa,QAAQ,eAAe,cAAc,CAChE,QAAO;AAGT,sBAAmB;AACnB,uBAAoB;AACpB,UAAO;;EAGT,MAAM,yBAAyB,sBAAsB,SAAY,OAAO;EACxE,MAAM,gCAAgC,iBAAiB,aAAa,CAAC;AAGrE,SAAO,CAAC,yBADJ,2BAA2B,OAAO,eAAkB,iBAAiB,wBAAwB,CAAC,CACnC;IAC9D;EAAC;EAAa;EAAmB;EAAU;EAAQ,CAAC;CAEvD,MAAM,QAAQ,qBAAqB,WAAW,cAAc,mBAAmB;AAE/E,iBAAgB;AACd,OAAK,WAAW;AAChB,OAAK,QAAQ;IACZ,CAAC,MAAM,CAAC;AAEX,eAAc,MAAM;AACpB,QAAO;;;;;ACxHT,MAAM,YAAY,MAAY;AAE9B,SAAgB,gBAA4B;AAC1C,QAAO,WAAW,aAAa;;AAGjC,SAAgB,mBAA4C;CAE1D,MAAM,WADQ,WAAW,aAAa,EACd,YAAY;AACpC,SAAQ,UAAe;AACrB,SAAO,SAAS,MAAM;;;AAI1B,SAAgB,cAAc;CAC5B,MAAM,WAAW,kBAAkB;AAEnC,SAAQ,YAAuB;AAM7B,WAAS;GAAE,MAAM;GAAgC,QAAQ;GAAS,CAAC;;;AAIvE,MAAa,eAAe,GAAQ,MAAoB,MAAM;AAE9D,SAAgB,iBACd,UACA,aAAsC,aACnC;CACH,MAAM,QAAQ,WAAW,aAAa;AAStC,QARsB,iCACpB,OAAO,aAAa,UACpB,OAAO,YAAY,UACnB,OAAO,YAAY,UACnB,UACA,WACD;;;;;ACxCH,SAAgB,cAAc,EAAE,YAAkD;CAChF,MAAM,QAAQ,cAAc,kBAAkB,EAAE,EAAE,CAAC;AAenD,QAAO,oBAAC,aAAa;EAAgB;EAAQ;GAAiC"}

package/dist/store.d.ts

@@ -1,2 +1,2 @@
-import { a as useMediaDispatch, c as useMediaStore, i as MediaProvider, l as MediaContext, n as MediaStateOwner, o as useMediaRef, r as MediaStore, s as useMediaSelector, t as MediaState } from "./index-BNR1awZq.js";
-export { MediaContext, MediaProvider, MediaState, MediaStateOwner, MediaStore, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };
+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";
+export { MediaContext, MediaState, MediaStateOwner, MediaStore, VideoProvider, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };

package/dist/store.js

@@ -1,3 +1,6 @@
-import { a as useMediaStore, i as useMediaSelector, n as useMediaDispatch, o as MediaContext, r as useMediaRef, t as MediaProvider } from "./store-DpQF8Ges.js";
+'use client';
 
-export { MediaContext, MediaProvider, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };
+
+import { a as useMediaStore, i as useMediaSelector, n as useMediaDispatch, o as MediaContext, r as useMediaRef, t as VideoProvider } from "./store-hGO5HE2A.js";
+
+export { MediaContext, VideoProvider, useMediaDispatch, useMediaRef, useMediaSelector, useMediaStore };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "0.1.0-preview.4",
+  "version": "0.1.0-preview.6",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,9 +47,9 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@videojs/core": "0.1.0-preview.4",
-    "@videojs/utils": "0.1.0-preview.4",
-    "@videojs/icons": "0.1.0-preview.4"
+    "@videojs/icons": "0.1.0-preview.6",
+    "@videojs/core": "0.1.0-preview.6",
+    "@videojs/utils": "0.1.0-preview.6"
   },
   "devDependencies": {
     "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",