@videojs/react 0.1.0-preview.7 → 0.1.0-preview.9

package/dist/{VolumeSlider-B8x0_k2f.js → VolumeSlider-DBvAU2X3.js}

@@ -2,7 +2,7 @@ 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";
-import { Children, cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Children, cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { contains, getBoundingClientRectWithoutTransform, getInBoundsAdjustments, safePolygon } from "@videojs/utils/dom";
 import { TimeSlider, VolumeSlider } from "@videojs/core";
@@ -78,7 +78,7 @@ function useCore(CoreClass, state) {
 	}, []), useCallback(() => {
 		return snapshotRef.current;
 	}, []), () => null);
-	return coreRef.current;
+	return coreRef.current.getState();
 }
 
 //#endregion
@@ -348,6 +348,7 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
 	const triggerRef = useRef(null);
 	const hoverTimeoutRef = useRef(null);
 	const pointerMoveHandlerRef = useRef(null);
+	const popupId = useId().replace(/^:([^:]+):$/, "«$1»");
 	const clearHoverTimeout = useCallback(() => {
 		if (hoverTimeoutRef.current) {
 			clearTimeout(hoverTimeoutRef.current);
@@ -448,8 +449,6 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
 	useEffect(() => {
 		if (!popupRef.current || !triggerRef.current) return;
 		const popup = popupRef.current;
-		const popupId = popup.id;
-		if (popupId) popup.style.setProperty("position-anchor", `--${popupId}`);
 		const [side, alignment] = placement.split("-");
 		popup.style.setProperty("top", `calc(anchor(${side}) - ${sideOffset}px)`);
 		popup.style.setProperty("translate", `0 -100%`);
@@ -463,14 +462,16 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
 		updatePositioning,
 		transitionStatus,
 		placement,
-		sideOffset
+		sideOffset,
+		popupId
 	}), [
 		open,
 		setOpenState,
 		updatePositioning,
 		transitionStatus,
 		placement,
-		sideOffset
+		sideOffset,
+		popupId
 	]);
 	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
 		value,
@@ -478,10 +479,17 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
 	});
 }
 function PopoverTrigger({ children }) {
-	const { triggerRef, open } = usePopoverContext();
-	return cloneElement(Children.only(children), {
+	const { triggerRef, open, popupId } = usePopoverContext();
+	const child = Children.only(children);
+	const existingStyle = child.props?.style || {};
+	return cloneElement(child, {
 		ref: triggerRef,
-		"data-popup-open": open ? "" : void 0
+		"data-popup-open": open ? "" : void 0,
+		commandfor: popupId ?? void 0,
+		style: {
+			...existingStyle,
+			...popupId ? { anchorName: `--${popupId}` } : {}
+		}
 	});
 }
 function PopoverPositioner({ side = "top", sideOffset = 5, children }) {
@@ -495,30 +503,23 @@ function PopoverPositioner({ side = "top", sideOffset = 5, children }) {
 	]);
 	return /* @__PURE__ */ jsx(Fragment, { children });
 }
-function PopoverPopup({ id, className, children }) {
-	const { popupRef, triggerRef, transitionStatus, placement } = usePopoverContext();
+function PopoverPopup({ className, style, children }) {
+	const { popupRef, triggerRef, transitionStatus, placement, popupId } = usePopoverContext();
 	const triggerElement = triggerRef.current;
-	const popupId = useMemo(() => id ?? `popover-${Math.random().toString(36).substring(2, 9)}`, [id]);
-	useEffect(() => {
-		if (!popupRef.current || !triggerRef.current) return;
-		const popup = popupRef.current;
-		const trigger = triggerRef.current;
-		popup.setAttribute("popover", "manual");
-		trigger.setAttribute("commandfor", popupId);
-		trigger.style.setProperty("anchor-name", `--${popupId}`);
-	}, [
-		popupId,
-		popupRef,
-		triggerRef
-	]);
+	const dataAttributes = useMemo(() => {
+		if (!triggerElement?.attributes) return {};
+		return Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value]));
+	}, [triggerElement]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: popupRef,
-		id: popupId,
+		id: popupId ?? void 0,
 		className,
-		...useMemo(() => {
-			if (!triggerElement?.attributes) return {};
-			return Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value]));
-		}, [triggerElement]),
+		popover: "manual",
+		style: {
+			...popupId ? { positionAnchor: `--${popupId}` } : {},
+			...style
+		},
+		...dataAttributes,
 		"data-side": placement,
 		"data-starting-style": transitionStatus === "initial" ? "" : void 0,
 		"data-open": transitionStatus === "initial" || transitionStatus === "open" ? "" : void 0,
@@ -562,25 +563,18 @@ function useTimeSliderRootState(props) {
 	const mediaStore = useMediaStore();
 	const mediaState = useMediaSelector(timeSliderStateDefinition.stateTransform, shallowEqual);
 	const mediaMethods = useMemo(() => timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-	const core = useCore(TimeSlider, {
-		...mediaState,
-		...mediaMethods
-	});
 	return {
-		...mediaState,
-		...mediaMethods,
-		orientation,
-		core
+		...useCore(TimeSlider, {
+			...mediaState,
+			...mediaMethods
+		}),
+		orientation
 	};
 }
 function useTimeSliderRootProps(props, state) {
-	const { _fillWidth, _pointerWidth, _currentTimeText, _durationText } = state.core.getState();
 	const { children, className, id, style, orientation = "horizontal", ref } = props;
 	return {
-		ref: useComposedRefs(ref, useCallback((el) => {
-			if (!el) return;
-			state.core?.attach(el);
-		}, [state.core])),
+		ref: useComposedRefs(ref, state._setRootElement),
 		id,
 		role: "slider",
 		tabIndex: 0,
@@ -588,7 +582,7 @@ function useTimeSliderRootProps(props, state) {
 		"aria-valuemin": 0,
 		"aria-valuemax": Math.round(state.duration),
 		"aria-valuenow": Math.round(state.currentTime),
-		"aria-valuetext": `${_currentTimeText} of ${_durationText}`,
+		"aria-valuetext": `${state._currentTimeText} of ${state._durationText}`,
 		"aria-orientation": orientation,
 		"data-orientation": orientation,
 		"data-current-time": state.currentTime,
@@ -596,8 +590,8 @@ function useTimeSliderRootProps(props, state) {
 		className,
 		style: {
 			...style,
-			"--slider-fill": `${_fillWidth.toFixed(3)}%`,
-			"--slider-pointer": `${(_pointerWidth * 100).toFixed(3)}%`
+			"--slider-fill": `${state._fillWidth.toFixed(3)}%`,
+			"--slider-pointer": `${(state._pointerWidth * 100).toFixed(3)}%`
 		},
 		children
 	};
@@ -608,9 +602,7 @@ function renderTimeSliderRoot(props) {
 const TimeSliderRoot = toConnectedComponent(useTimeSliderRootState, useTimeSliderRootProps, renderTimeSliderRoot, "TimeSlider.Root");
 function useTimeSliderTrackProps(props, context) {
 	return {
-		ref: useCallback((el) => {
-			context.core?.setState({ _trackElement: el });
-		}, [context.core]),
+		ref: context._setTrackElement,
 		"data-orientation": context.orientation,
 		...props,
 		style: {
@@ -702,6 +694,7 @@ function TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }) {
 		x: 0,
 		y: 0
 	});
+	const popupId = useId().replace(/^:([^:]+):$/, "«$1»");
 	const updatePositioning = useCallback(({ side, sideOffset: sideOffset$1, collisionPadding: collisionPadding$1 }) => {
 		setPlacement(side);
 		setSideOffset(sideOffset$1);
@@ -815,8 +808,6 @@ function TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }) {
 	useEffect(() => {
 		if (!popupRef.current || !triggerRef.current) return;
 		const popup = popupRef.current;
-		const popupId = popup.id;
-		if (popupId) popup.style.setProperty("position-anchor", `--${popupId}`);
 		const [side, alignment] = placement.split("-");
 		popup.style.setProperty("top", `calc(anchor(${side}) - ${sideOffset}px)`);
 		if (trackCursorAxis) popup.style.setProperty("translate", `-50% -100%`);
@@ -846,7 +837,8 @@ function TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }) {
 		trackCursorAxis,
 		placement,
 		sideOffset,
-		collisionPadding
+		collisionPadding,
+		popupId
 	}), [
 		open,
 		transitionStatus,
@@ -854,7 +846,8 @@ function TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }) {
 		trackCursorAxis,
 		placement,
 		sideOffset,
-		collisionPadding
+		collisionPadding,
+		popupId
 	]);
 	return /* @__PURE__ */ jsx(TooltipContext.Provider, {
 		value,
@@ -862,10 +855,17 @@ function TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }) {
 	});
 }
 function TooltipTrigger({ children }) {
-	const { triggerRef, open } = useTooltipContext();
-	return cloneElement(Children.only(children), {
+	const { triggerRef, open, popupId } = useTooltipContext();
+	const child = Children.only(children);
+	const existingStyle = child.props?.style || {};
+	return cloneElement(child, {
 		ref: triggerRef,
-		"data-popup-open": open ? "" : void 0
+		"data-popup-open": open ? "" : void 0,
+		commandfor: popupId ?? void 0,
+		style: {
+			...existingStyle,
+			...popupId ? { anchorName: `--${popupId}` } : {}
+		}
 	});
 }
 function TooltipPositioner({ side = "top", sideOffset = 0, collisionPadding = 0, children }) {
@@ -884,31 +884,24 @@ function TooltipPositioner({ side = "top", sideOffset = 0, collisionPadding = 0,
 	]);
 	return /* @__PURE__ */ jsx(Fragment, { children });
 }
-function TooltipPopup({ id, className = "", children }) {
-	const { popupRef, triggerRef, transitionStatus, placement } = useTooltipContext();
+function TooltipPopup({ className = "", style, children }) {
+	const { popupRef, triggerRef, transitionStatus, placement, popupId } = useTooltipContext();
 	const triggerElement = triggerRef.current;
-	const popupId = useMemo(() => id ?? `tooltip-${Math.random().toString(36).substring(2, 9)}`, [id]);
-	useEffect(() => {
-		if (!popupRef.current || !triggerRef.current) return;
-		const popup = popupRef.current;
-		const trigger = triggerRef.current;
-		popup.setAttribute("popover", "manual");
-		trigger.setAttribute("commandfor", popupId);
-		trigger.style.setProperty("anchor-name", `--${popupId}`);
-	}, [
-		popupId,
-		popupRef,
-		triggerRef
-	]);
+	const dataAttributes = useMemo(() => {
+		if (!triggerElement?.attributes) return {};
+		return Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value]));
+	}, [triggerElement]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: popupRef,
-		id: popupId,
+		id: popupId ?? void 0,
 		className,
 		role: "tooltip",
-		...useMemo(() => {
-			if (!triggerElement?.attributes) return {};
-			return Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value]));
-		}, [triggerElement]),
+		popover: "manual",
+		style: {
+			...popupId ? { positionAnchor: `--${popupId}` } : {},
+			...style
+		},
+		...dataAttributes,
 		"data-side": placement,
 		"data-starting-style": transitionStatus === "initial" ? "" : void 0,
 		"data-open": transitionStatus === "initial" || transitionStatus === "open" ? "" : void 0,
@@ -932,25 +925,18 @@ function useVolumeSliderRootState(props) {
 	const mediaStore = useMediaStore();
 	const mediaState = useMediaSelector(volumeSliderStateDefinition.stateTransform, shallowEqual);
 	const mediaMethods = useMemo(() => volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-	const core = useCore(VolumeSlider, {
-		...mediaState,
-		...mediaMethods
-	});
 	return {
-		...mediaState,
-		...mediaMethods,
-		orientation,
-		core
+		...useCore(VolumeSlider, {
+			...mediaState,
+			...mediaMethods
+		}),
+		orientation
 	};
 }
 function useVolumeSliderRootProps(props, state) {
-	const { _fillWidth, _pointerWidth, _volumeText } = state.core.getState();
-	const { children, className, id, style, orientation = "horizontal" } = props;
+	const { children, className, id, style, orientation = "horizontal", ref } = props;
 	return {
-		ref: useCallback((el) => {
-			if (!el) return;
-			state.core?.attach(el);
-		}, []),
+		ref: useComposedRefs(ref, state._setRootElement),
 		id,
 		role: "slider",
 		tabIndex: 0,
@@ -958,16 +944,17 @@ function useVolumeSliderRootProps(props, state) {
 		"aria-valuemin": 0,
 		"aria-valuemax": 100,
 		"aria-valuenow": Math.round(state.volume * 100),
-		"aria-valuetext": _volumeText,
+		"aria-valuetext": state._volumeText,
 		"aria-orientation": orientation,
 		"data-orientation": orientation,
 		"data-muted": state.muted,
 		"data-volume-level": state.volumeLevel,
+		"data-volume": state.volume,
 		className,
 		style: {
 			...style,
-			"--slider-fill": `${_fillWidth.toFixed(3)}%`,
-			"--slider-pointer": `${_pointerWidth.toFixed(3)}%`
+			"--slider-fill": `${state._fillWidth.toFixed(3)}%`,
+			"--slider-pointer": `${(state._pointerWidth * 100).toFixed(3)}%`
 		},
 		children
 	};
@@ -978,9 +965,7 @@ function renderVolumeSliderRoot(props) {
 const VolumeSliderRoot = toConnectedComponent(useVolumeSliderRootState, useVolumeSliderRootProps, renderVolumeSliderRoot, "VolumeSlider.Root");
 function useVolumeSliderTrackProps(props, context) {
 	return {
-		ref: useCallback((el) => {
-			context.core?.setState({ _trackElement: el });
-		}, []),
+		ref: context._setTrackElement,
 		"data-orientation": context.orientation,
 		...props,
 		style: {
@@ -1037,4 +1022,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-B8x0_k2f.js.map
+//# sourceMappingURL=VolumeSlider-DBvAU2X3.js.map

package/dist/VolumeSlider-DBvAU2X3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeSlider-DBvAU2X3.js","names":["Context","CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>","DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>","baseProps: Record<string, any>","FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>","React","MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement>>>","baseProps: Record<string, any>","MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>","baseProps: Record<string, any>","PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>","value: PopoverContextType","Popover: {\n  Root: typeof PopoverRoot;\n  Trigger: typeof PopoverTrigger;\n  Positioner: typeof PopoverPositioner;\n  Popup: typeof PopoverPopup;\n}","PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>","CoreTimeSlider","TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot>","TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack>","TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb>","TimeSliderPointer: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderPointer\n>","TimeSliderProgress: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderProgress\n>","TimeSlider","sideOffset","collisionPadding","value: TooltipContextType","Tooltip: {\n  Root: typeof TooltipRoot;\n  Trigger: typeof TooltipTrigger;\n  Positioner: typeof TooltipPositioner;\n  Popup: typeof TooltipPopup;\n}","CoreVolumeSlider","VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot>","VolumeSliderTrack: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderTrack\n>","VolumeSliderThumb: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderThumb\n>","VolumeSliderProgress: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderProgress\n>","VolumeSlider"],"sources":["../src/utils/component-factory.tsx","../src/components/CurrentTimeDisplay.tsx","../src/components/DurationDisplay.tsx","../src/components/FullscreenButton.tsx","../src/utils/use-composed-refs.ts","../src/components/MediaContainer.tsx","../src/components/MuteButton.tsx","../src/components/PlayButton.tsx","../src/components/Popover.tsx","../src/components/PreviewTimeDisplay.tsx","../src/components/TimeSlider.tsx","../src/components/Tooltip.tsx","../src/components/VolumeSlider.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';\n\nexport type StateHookFn<TProps = any, TState = any> = (props: TProps) => TState;\n\nexport type PropsHookFn<TProps = any, TState = any, TResultProps = any> = (\n  props: TProps,\n  state: TState\n) => TResultProps;\n\nexport type RenderFn<TProps = any, TState = any> = (props: TProps, state: TState) => ReactElement;\n\nconst Context = createContext<any>(null);\n\n/**\n * Generic factory function to create connected components following the hooks pattern\n * inspired by Adobe React Spectrum and Base UI architectures.\n *\n * @param useStateHook - Hook that provides component state\n * @param usePropsHook - Hook that enhances props with state-derived values\n * @param defaultRender - Default render function for the component\n * @param displayName - Display name for React DevTools\n * @returns Connected component with customizable render prop\n */\nexport function toConnectedComponent<\n  TProps extends Record<string, any>,\n  TState,\n  TResultProps extends Record<string, any>,\n  TRenderFn extends RenderFn<TResultProps, TState>,\n>(\n  useStateHook: StateHookFn<TProps, TState>,\n  usePropsHook: PropsHookFn<TProps, TState, TResultProps>,\n  defaultRender: TRenderFn,\n  displayName: string,\n): ConnectedComponent<TProps, TRenderFn> {\n  const ConnectedComponent = forwardRef<HTMLElement, TProps & { render?: TRenderFn }>(\n    ({ render = defaultRender, ...props }, ref) => {\n      const propsWithRef = ref ? { ...props, ref } : props;\n      const connectedState = useStateHook(propsWithRef as unknown as TProps);\n      const connectedProps = usePropsHook(propsWithRef as unknown as TProps, connectedState);\n      return <Context.Provider value={connectedState}>{render(connectedProps, connectedState)}</Context.Provider>;\n    },\n  );\n\n  ConnectedComponent.displayName = displayName;\n\n  return ConnectedComponent;\n}\n\n/**\n * Type helper to infer the component type from the factory\n */\nexport type ConnectedComponent<TProps extends Record<string, any>, TRenderFn extends RenderFn<any, any>> = React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<TProps & { render?: TRenderFn }> & React.RefAttributes<HTMLElement>\n>;\n\n/**\n * Factory function to create context-based components that don't use toConnectedComponent\n * These components rely on context provided by a parent component.\n *\n * @param usePropsHook - Hook that enhances props with context-derived values\n * @param defaultRender - Default render function for the component\n * @param displayName - Display name for React DevTools\n * @returns Context-based component with customizable render prop\n */\nexport function toContextComponent<\n  TProps extends Record<string, any>,\n  TResultProps extends Record<string, any>,\n  TRenderFn extends (props: TResultProps, context: any) => ReactElement,\n>(\n  usePropsHook: (props: TProps, context: ReturnType<StateHookFn<TProps>>) => 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): ReturnType<T['getState']> {\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.getState();\n}\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { currentTimeDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useCurrentTimeDisplayState(_props: any): {\n  currentTime: number;\n  duration: number;\n} {\n  /** @TODO Fix type issues with hooks (CJP) */\n  const mediaState = useMediaSelector(currentTimeDisplayStateDefinition.stateTransform, shallowEqual);\n\n  // Current time display is read-only, no request methods needed\n  return {\n    currentTime: mediaState.currentTime ?? 0,\n    duration: mediaState.duration ?? 0,\n  };\n}\n\nexport type CurrentTimeDisplayState = ReturnType<typeof useCurrentTimeDisplayState>;\n\nexport interface CurrentTimeDisplayProps extends React.ComponentProps<'span'> {\n  showRemaining?: boolean;\n}\n\nexport function useCurrentTimeDisplayProps(\n  props: PropsWithChildren,\n  _state: ReturnType<typeof useCurrentTimeDisplayState>,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  return baseProps;\n}\n\nexport function renderCurrentTimeDisplay(props: CurrentTimeDisplayProps, state: CurrentTimeDisplayState): JSX.Element {\n  const { showRemaining, ...restProps } = props;\n\n  /** @TODO Should this live here or elsewhere? (CJP) */\n  const timeLabel\n    = showRemaining && state.duration != null && state.currentTime != null\n      ? formatDisplayTime(-(state.duration - state.currentTime))\n      : formatDisplayTime(state.currentTime);\n\n  return <span {...restProps}>{timeLabel}</span>;\n}\n\nexport const CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>\n  = toConnectedComponent(\n    useCurrentTimeDisplayState,\n    useCurrentTimeDisplayProps,\n    renderCurrentTimeDisplay,\n    'CurrentTimeDisplay',\n  );\n\nexport default CurrentTimeDisplay;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { durationDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useDurationDisplayState(_props: any): {\n  duration: number;\n} {\n  /** @TODO Fix type issues with hooks (CJP) */\n  const mediaState = useMediaSelector(durationDisplayStateDefinition.stateTransform, shallowEqual);\n\n  // Duration display is read-only, no request methods needed\n  return {\n    duration: mediaState.duration ?? 0,\n  };\n}\n\nexport type useDurationDisplayState = typeof useDurationDisplayState;\nexport type DurationDisplayState = ReturnType<useDurationDisplayState>;\n\nexport function useDurationDisplayProps(props: PropsWithChildren): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  return baseProps;\n}\n\nexport type useDurationDisplayProps = typeof useDurationDisplayProps;\ntype DurationDisplayProps = ReturnType<useDurationDisplayProps>;\n\nexport function renderDurationDisplay(props: DurationDisplayProps, state: DurationDisplayState): JSX.Element {\n  return <span {...props}>{formatDisplayTime(state.duration)}</span>;\n}\n\nexport type renderDurationDisplay = typeof renderDurationDisplay;\n\nexport const DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>\n  = toConnectedComponent(useDurationDisplayState, useDurationDisplayProps, renderDurationDisplay, 'DurationDisplay');\n\nexport default DurationDisplay;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { fullscreenButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useFullscreenButtonState(_props: any): {\n  fullscreen: boolean;\n  requestEnterFullscreen: () => void;\n  requestExitFullscreen: () => void;\n} {\n  const mediaStore = useMediaStore();\n  const mediaState = useMediaSelector(fullscreenButtonStateDefinition.stateTransform, shallowEqual);\n  const methods = useMemo(\n    () => fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n    [mediaStore],\n  );\n\n  return {\n    fullscreen: mediaState.fullscreen,\n    requestEnterFullscreen: methods.requestEnterFullscreen,\n    requestExitFullscreen: methods.requestExitFullscreen,\n  } as const;\n}\n\nexport type FullscreenButtonState = ReturnType<typeof useFullscreenButtonState>;\n\nexport function getFullscreenButtonProps(\n  props: PropsWithChildren,\n  state: FullscreenButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',\n    /** tooltip */\n    'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  // Handle boolean data attribute: present with empty string when true, absent when false\n  if (state.fullscreen) {\n    baseProps['data-fullscreen'] = '';\n  }\n\n  return baseProps;\n}\n\nexport type FullscreenButtonProps = ReturnType<typeof getFullscreenButtonProps>;\n\nexport function renderFullscreenButton(props: FullscreenButtonProps, state: FullscreenButtonState): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      onClick={() => {\n        if (props.disabled) return;\n        if (state.fullscreen) {\n          state.requestExitFullscreen();\n        } else {\n          state.requestEnterFullscreen();\n        }\n      }}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nexport const FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>\n  = toConnectedComponent(useFullscreenButtonState, getFullscreenButtonProps, renderFullscreenButton, 'FullscreenButton');\n\nexport default FullscreenButton;\n","import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T): (() => void) | void | undefined {\n  if (typeof ref === 'function') {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    (ref as React.MutableRefObject<T>).current = value;\n  }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  return (node) => {\n    let hasCleanup = false;\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node);\n      if (!hasCleanup && typeof cleanup == 'function') {\n        hasCleanup = true;\n      }\n      return cleanup;\n    });\n\n    // React <19 will log an error to the console if a callback ref returns a\n    // value. We don't use ref cleanups internally so this will only happen if a\n    // user's ref callback returns a value, which we only expect if they are\n    // using the cleanup functionality added in React 19.\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (typeof cleanup == 'function') {\n            cleanup();\n          } else {\n            setRef(refs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import type { FC, HTMLProps, PropsWithChildren, RefCallback } from 'react';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { forwardRef, useCallback, useMemo } from 'react';\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\n/**\n * Hook to associate a React element as the fullscreen container for the media store.\n * This is equivalent to Media Chrome's useMediaFullscreenRef but for VJS-10.\n *\n * The ref callback will register the element as the container state owner\n * in the media store, enabling fullscreen functionality.\n *\n * @example\n * import { useMediaContainerRef } from '@videojs/react';\n *\n * const PlayerContainer = ({ children }) => {\n *   const containerRef = useMediaContainerRef();\n *   return <div ref={containerRef}>{children}</div>;\n * };\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useMediaContainerRef(): RefCallback<HTMLElement | null> {\n  const mediaStore = useMediaStore();\n\n  return useCallback(\n    (containerElement: HTMLElement | null) => {\n      if (!mediaStore) return;\n\n      // Register or unregister the container element as the container state owner\n      mediaStore.dispatch({\n        type: 'containerstateownerchangerequest',\n        detail: containerElement,\n      });\n    },\n    [mediaStore],\n  );\n}\n\n/**\n * MediaContainer component that automatically registers itself as the fullscreen container.\n * This provides a simple wrapper component for fullscreen functionality.\n *\n * @example\n * import { MediaContainer } from '@videojs/react';\n *\n * const MyPlayer = () => (\n *   <MediaContainer>\n *     <video src=\"video.mp4\" />\n *     <div>Controls here</div>\n *   </MediaContainer>\n * );\n */\nexport const MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement>>> = forwardRef(\n  ({ children, ...props }, ref) => {\n    const containerRef = useMediaContainerRef();\n    const composedRef = useComposedRefs(ref, containerRef);\n\n    const mediaStore = useMediaStore();\n    const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);\n    const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n    const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n      if (!['video', 'audio'].includes((event.target as HTMLElement).localName || '')) return;\n\n      if (mediaState.paused) {\n        methods.requestPlay();\n      } else {\n        methods.requestPause();\n      }\n    }, [mediaState.paused, methods]);\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n      <div\n        ref={composedRef}\n        onClick={handleClick}\n        data-media-container\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { muteButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useMuteButtonState(_props: any): {\n  volumeLevel: string;\n  muted: boolean;\n  requestMute: () => void;\n  requestUnmute: () => void;\n} {\n  const mediaStore = useMediaStore();\n  const mediaState = useMediaSelector(muteButtonStateDefinition.stateTransform, shallowEqual);\n  const methods = useMemo(() => muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n  return {\n    volumeLevel: mediaState.volumeLevel,\n    muted: mediaState.muted,\n    requestMute: methods.requestMute,\n    requestUnmute: methods.requestUnmute,\n  } as const;\n}\n\nexport type MuteButtonState = ReturnType<typeof useMuteButtonState>;\n\nexport function getMuteButtonProps(\n  props: PropsWithChildren,\n  state: MuteButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props - non-boolean */\n    'data-volume-level': state.volumeLevel,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    'aria-label': state.muted ? 'unmute' : 'mute',\n    /** tooltip */\n    'data-tooltip': state.muted ? 'Unmute' : 'Mute',\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  // Handle boolean data attribute: present with empty string when true, absent when false\n  if (state.muted) {\n    baseProps['data-muted'] = '';\n  }\n\n  return baseProps;\n}\n\nexport type MuteButtonProps = ReturnType<typeof getMuteButtonProps>;\n\nexport function renderMuteButton(props: MuteButtonProps, state: MuteButtonState): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      onClick={() => {\n        if (props.disabled) return;\n        if (state.volumeLevel === 'off') {\n          state.requestUnmute();\n        } else {\n          state.requestMute();\n        }\n      }}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nexport const MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton> = toConnectedComponent(\n  useMuteButtonState,\n  getMuteButtonProps,\n  renderMuteButton,\n  'MuteButton',\n);\n\nexport default MuteButton;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function usePlayButtonState(_props: any): {\n  paused: boolean;\n  requestPlay: () => void;\n  requestPause: () => void;\n} {\n  const mediaStore = useMediaStore();\n  const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);\n  const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n  return {\n    paused: mediaState.paused,\n    requestPlay: methods.requestPlay,\n    requestPause: methods.requestPause,\n  };\n}\n\nexport type PlayButtonState = ReturnType<typeof usePlayButtonState>;\n\nexport function getPlayButtonProps(\n  props: Record<string, unknown>,\n  state: PlayButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    'aria-label': state.paused ? 'play' : 'pause',\n    /** tooltip */\n    'data-tooltip': state.paused ? 'Play' : 'Pause',\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  // Handle boolean data attribute: present with empty string when true, absent when false\n  if (state.paused) {\n    baseProps['data-paused'] = '';\n  }\n\n  return baseProps;\n}\n\nexport type PlayButtonProps = ReturnType<typeof getPlayButtonProps>;\n\nexport function renderPlayButton(props: PlayButtonProps, state: PlayButtonState): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      onClick={() => {\n        if (props.disabled) return;\n        if (state.paused) {\n          state.requestPlay();\n        } else {\n          state.requestPause();\n        }\n      }}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nexport const PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton> = toConnectedComponent(\n  usePlayButtonState,\n  getPlayButtonProps,\n  renderPlayButton,\n  'PlayButton',\n);\n\nexport default PlayButton;\n","import type { ReactNode } from 'react';\n\nimport { contains, safePolygon } from '@videojs/utils/dom';\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\ntype Placement = 'top' | 'top-start' | 'top-end';\n\ntype TransitionStatus = 'initial' | 'open' | 'close' | 'unmounted';\n\ninterface PopoverContextType {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  popupRef: React.RefObject<HTMLElement | null>;\n  triggerRef: React.RefObject<HTMLElement | null>;\n  updatePositioning: (placement: Placement, sideOffset: number) => void;\n  transitionStatus: TransitionStatus;\n  placement: Placement;\n  sideOffset: number;\n  popupId: string | undefined;\n}\n\ninterface PopoverRootProps {\n  openOnHover?: boolean;\n  delay?: number;\n  closeDelay?: number;\n  children: ReactNode;\n}\n\ninterface PopoverTriggerProps {\n  children: ReactNode;\n}\n\ninterface PopoverPositionerProps {\n  side?: Placement;\n  sideOffset?: number;\n  children: ReactNode;\n}\n\ninterface PopoverPopupProps {\n  id?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  children: ReactNode;\n}\n\nconst PopoverContext = createContext<PopoverContextType | null>(null);\n\nfunction usePopoverContext(): PopoverContextType {\n  const context = useContext(PopoverContext);\n  if (!context) {\n    throw new Error('Popover components must be used within PopoverRoot');\n  }\n  return context;\n}\n\nfunction PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children }: PopoverRootProps): JSX.Element {\n  const [open, setOpen] = useState(false);\n  const [placement, setPlacement] = useState<Placement>('top');\n  const [sideOffset, setSideOffset] = useState(5);\n  const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>('initial');\n  const popupRef = useRef<HTMLElement | null>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pointerMoveHandlerRef = useRef<((event: MouseEvent) => void) | null>(null);\n  const uniqueId = useId();\n  const popupId = uniqueId.replace(/^:([^:]+):$/, '«$1»');\n\n  const clearHoverTimeout = useCallback(() => {\n    if (hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  const setOpenState = useCallback((newOpen: boolean) => {\n    if (open === newOpen) return;\n\n    setOpen(newOpen);\n\n    if (newOpen) {\n      setTransitionStatus('initial');\n      if (popupRef.current) {\n        popupRef.current.showPopover();\n      }\n      requestAnimationFrame(() => {\n        setTransitionStatus('open');\n      });\n    } else {\n      setTransitionStatus('close');\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (!popupRef.current || open) return;\n\n    const transitions = popupRef.current.getAnimations().filter(anim => anim instanceof CSSTransition);\n    if (transitions.length > 0) {\n      Promise.all(transitions.map(t => t.finished))\n        .then(() => popupRef.current?.hidePopover())\n        .catch(() => popupRef.current?.hidePopover());\n    } else {\n      popupRef.current.hidePopover();\n    }\n  }, [open, transitionStatus]);\n\n  const updatePositioning = useCallback((newPlacement: Placement, newSideOffset: number) => {\n    setPlacement(newPlacement);\n    setSideOffset(newSideOffset);\n  }, []);\n\n  useEffect(() => {\n    const trigger = triggerRef.current;\n    const popup = popupRef.current;\n    if (!trigger || !popup) return;\n\n    const abortController = new AbortController();\n    const { signal } = abortController;\n\n    const addPointerMoveListener = () => {\n      if (!globalThis.matchMedia?.('(hover: hover)')?.matches) return;\n\n      if (!pointerMoveHandlerRef.current) {\n        pointerMoveHandlerRef.current = safePolygon({ blockPointerEvents: true })({\n          placement,\n          elements: {\n            domReference: trigger,\n            floating: popup,\n          },\n          x: 0,\n          y: 0,\n          onClose: () => {\n            if (pointerMoveHandlerRef.current) {\n              document.documentElement.removeEventListener('pointermove', pointerMoveHandlerRef.current);\n            }\n            clearHoverTimeout();\n\n            hoverTimeoutRef.current = setTimeout(() => {\n              setOpenState(false);\n            }, closeDelay);\n          },\n        });\n      }\n\n      // Event listener is automatically removed when AbortController is aborted\n      document.documentElement.addEventListener('pointermove', pointerMoveHandlerRef.current, { signal });\n    };\n\n    const handlePointerEnter = (event: PointerEvent) => {\n      if (!openOnHover) return;\n\n      clearHoverTimeout();\n\n      if (event.currentTarget === popup) {\n        addPointerMoveListener();\n      }\n\n      if (open) {\n        return;\n      }\n\n      hoverTimeoutRef.current = setTimeout(() => {\n        setOpenState(true);\n      }, delay);\n    };\n\n    const handlePointerLeave = () => {\n      if (!openOnHover) return;\n      addPointerMoveListener();\n    };\n\n    if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n      // Event listeners are automatically removed when AbortController is aborted\n      trigger.addEventListener('pointerenter', handlePointerEnter, { signal });\n      trigger.addEventListener('pointerleave', handlePointerLeave, { signal });\n      popup.addEventListener('pointerenter', handlePointerEnter, { signal });\n    }\n\n    const handleFocusIn = () => {\n      setOpenState(true);\n    };\n\n    const handleFocusOut = (event: FocusEvent) => {\n      const relatedTarget = event.relatedTarget as HTMLElement;\n      if (relatedTarget && popup && contains(popup, relatedTarget)) return;\n      setOpenState(false);\n    };\n\n    // Event listeners are automatically removed when AbortController is aborted\n    trigger.addEventListener('focusin', handleFocusIn, { signal });\n    trigger.addEventListener('focusout', handleFocusOut, { signal });\n    popup.addEventListener('focusout', handleFocusOut, { signal });\n\n    return () => {\n      abortController.abort();\n      clearHoverTimeout();\n\n      if (pointerMoveHandlerRef.current) {\n        document.documentElement.removeEventListener('pointermove', pointerMoveHandlerRef.current);\n      }\n\n      pointerMoveHandlerRef.current = null;\n    };\n  }, [openOnHover, delay, closeDelay, open, placement, setOpenState, clearHoverTimeout]);\n\n  useEffect(() => {\n    if (!popupRef.current || !triggerRef.current) return;\n\n    const popup = popupRef.current;\n    const [side, alignment] = placement.split('-');\n    popup.style.setProperty('top', `calc(anchor(${side}) - ${sideOffset}px)`);\n    popup.style.setProperty('translate', `0 -100%`);\n    popup.style.setProperty('justify-self', alignment === 'start'\n      ? 'anchor-start'\n      : alignment === 'end'\n        ? 'anchor-end'\n        : 'anchor-center');\n  }, [placement, sideOffset]);\n\n  const value: PopoverContextType = useMemo(() => ({\n    open,\n    setOpen: setOpenState,\n    popupRef,\n    triggerRef,\n    updatePositioning,\n    transitionStatus,\n    placement,\n    sideOffset,\n    popupId,\n  }), [open, setOpenState, updatePositioning, transitionStatus, placement, sideOffset, popupId]);\n\n  return <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>;\n}\n\nfunction PopoverTrigger({ children }: PopoverTriggerProps): JSX.Element {\n  const { triggerRef, open, popupId } = usePopoverContext();\n\n  const child = Children.only(children) as JSX.Element;\n  const existingStyle = (child.props as { style?: React.CSSProperties })?.style || {};\n\n  // eslint-disable-next-line react/no-clone-element\n  return cloneElement(child, {\n    ref: triggerRef,\n    'data-popup-open': open ? '' : undefined,\n    commandfor: popupId ?? undefined,\n    style: {\n      ...existingStyle,\n      ...(popupId ? { anchorName: `--${popupId}` as any } : {}),\n    },\n  });\n}\n\nfunction PopoverPositioner({ side = 'top', sideOffset = 5, children }: PopoverPositionerProps): JSX.Element | null {\n  const { updatePositioning } = usePopoverContext();\n\n  useEffect(() => {\n    updatePositioning(side, sideOffset);\n  }, [side, sideOffset, updatePositioning]);\n\n  return <>{children}</>;\n}\n\nfunction PopoverPopup({ className, style, children }: PopoverPopupProps): JSX.Element {\n  const { popupRef, triggerRef, transitionStatus, placement, popupId } = usePopoverContext();\n  const triggerElement = triggerRef.current;\n\n  // Copy data attributes from trigger element\n  const dataAttributes = useMemo(() => {\n    if (!triggerElement?.attributes) return {};\n    return Object.fromEntries(\n      Array.from(triggerElement.attributes)\n        .filter(attr => attr.name.startsWith('data-'))\n        .map(attr => [attr.name, attr.value]),\n    );\n  }, [triggerElement]);\n\n  return (\n    <div\n      ref={popupRef as React.RefObject<HTMLDivElement>}\n      id={popupId ?? undefined}\n      className={className}\n      popover=\"manual\"\n      style={{\n        ...(popupId ? { positionAnchor: `--${popupId}` as any } : {}),\n        ...style,\n      }}\n      {...dataAttributes}\n      data-side={placement}\n      data-starting-style={transitionStatus === 'initial' ? '' : undefined}\n      data-open={transitionStatus === 'initial' || transitionStatus === 'open' ? '' : undefined}\n      data-ending-style={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n      data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const Popover: {\n  Root: typeof PopoverRoot;\n  Trigger: typeof PopoverTrigger;\n  Positioner: typeof PopoverPositioner;\n  Popup: typeof PopoverPopup;\n} = {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Positioner: PopoverPositioner,\n  Popup: PopoverPopup,\n};\n\nexport default Popover;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function usePreviewTimeDisplayState(_props: any): {\n  previewTime: number;\n} {\n  /** @TODO Fix type issues with hooks (CJP) */\n  const mediaState = useMediaSelector(previewTimeDisplayStateDefinition.stateTransform, shallowEqual);\n\n  // Preview time display is read-only, no request methods needed\n  return {\n    previewTime: mediaState.previewTime ?? 0,\n  };\n}\n\nexport type PreviewTimeDisplayState = ReturnType<typeof usePreviewTimeDisplayState>;\n\nexport interface PreviewTimeDisplayProps extends React.ComponentProps<'span'> {\n  showRemaining?: boolean;\n}\n\nexport function getPreviewTimeDisplayProps(\n  props: PropsWithChildren,\n  _state: ReturnType<typeof usePreviewTimeDisplayState>,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  return baseProps;\n}\n\nexport function renderPreviewTimeDisplay(props: PreviewTimeDisplayProps, state: PreviewTimeDisplayState): JSX.Element {\n  const { showRemaining, ...restProps } = props;\n\n  /** @TODO Should this live here or elsewhere? (CJP) */\n  const timeLabel = formatDisplayTime(state.previewTime);\n\n  return <span {...restProps}>{timeLabel}</span>;\n}\n\nexport const PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>\n  = toConnectedComponent(\n    usePreviewTimeDisplayState,\n    getPreviewTimeDisplayProps,\n    renderPreviewTimeDisplay,\n    'PreviewTimeDisplay',\n  );\n\nexport default PreviewTimeDisplay;\n","import type { Prettify } from '../types';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\nimport { timeSliderStateDefinition } from '@videojs/core/store';\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport type TimeSliderState = Prettify<ReturnType<typeof useCore<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 coreState = useCore(CoreTimeSlider, { ...mediaState, ...mediaMethods });\n  return {\n    ...coreState,\n    orientation,\n  };\n}\n\nexport function useTimeSliderRootProps(props: TimeSliderProps, state: TimeSliderState): TimeSliderRenderProps {\n  const { children, className, id, style, orientation = 'horizontal', ref } = props;\n  const composedRef = useComposedRefs(ref, state._setRootElement);\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': `${state._currentTimeText} of ${state._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': `${state._fillWidth.toFixed(3)}%`,\n      '--slider-pointer': `${(state._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: context._setTrackElement,\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',\n    },\n  };\n}\n\nexport function renderTimeSliderTrack(props: TimeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack> = toContextComponent(\n  useTimeSliderTrackProps,\n  renderTimeSliderTrack,\n  'TimeSlider.Track',\n);\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport function getTimeSliderThumbProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n  return {\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',\n      [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',\n      translate: context.orientation === 'horizontal' ? '-50% -50%' : '-50% 50%',\n      position: 'absolute' as const,\n    },\n  };\n}\n\nexport function renderTimeSliderThumb(props: TimeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb> = toContextComponent(\n  getTimeSliderThumbProps,\n  renderTimeSliderThumb,\n  'TimeSlider.Thumb',\n);\n\n// ============================================================================\n// POINTER COMPONENT\n// ============================================================================\n\nexport function getTimeSliderPointerProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n  return {\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-pointer, 0%)',\n      [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n      position: 'absolute' as const,\n    },\n  };\n}\n\nexport function renderTimeSliderPointer(props: TimeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst TimeSliderPointer: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderPointer\n> = toContextComponent(getTimeSliderPointerProps, renderTimeSliderPointer, 'TimeSlider.Pointer');\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport function getTimeSliderProgressProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n  return {\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',\n      [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n      [context.orientation === 'horizontal' ? 'top' : 'bottom']: '0',\n      position: 'absolute' as const,\n    },\n  };\n}\n\nexport function renderTimeSliderProgress(props: TimeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst TimeSliderProgress: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderProgress\n> = toContextComponent(getTimeSliderProgressProps, renderTimeSliderProgress, 'TimeSlider.Progress');\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const TimeSlider = Object.assign(\n  {},\n  {\n    Root: TimeSliderRoot,\n    Track: TimeSliderTrack,\n    Thumb: TimeSliderThumb,\n    Pointer: TimeSliderPointer,\n    Progress: TimeSliderProgress,\n  },\n) as {\n  Root: typeof TimeSliderRoot;\n  Track: typeof TimeSliderTrack;\n  Thumb: typeof TimeSliderThumb;\n  Pointer: typeof TimeSliderPointer;\n  Progress: typeof TimeSliderProgress;\n};\n\nexport default TimeSlider;\n","import type { ReactNode, RefObject } from 'react';\n\nimport { contains, getBoundingClientRectWithoutTransform, getInBoundsAdjustments } from '@videojs/utils/dom';\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\ntype Placement = 'top' | 'top-start' | 'top-end';\n\ninterface UpdatePositioningProps {\n  side: Placement;\n  sideOffset: number;\n  collisionPadding: number;\n}\n\ntype TransitionStatus = 'initial' | 'open' | 'close' | 'unmounted';\n\ninterface TooltipContextType {\n  popupRef: RefObject<HTMLElement | null>;\n  triggerRef: RefObject<HTMLElement | null>;\n  open: boolean;\n  transitionStatus: TransitionStatus;\n  updatePositioning: (props: UpdatePositioningProps) => void;\n  trackCursorAxis?: 'x' | 'y' | 'both' | undefined;\n  placement: Placement;\n  sideOffset: number;\n  collisionPadding: number;\n  popupId: string | 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  id?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  children: ReactNode;\n}\n\nconst TooltipContext = createContext<TooltipContextType | null>(null);\n\nfunction useTooltipContext(): TooltipContextType {\n  const context = useContext(TooltipContext);\n  if (!context) {\n    throw new Error('Tooltip components must be used within TooltipRoot');\n  }\n  return context;\n}\n\nfunction TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }: TooltipRootProps): JSX.Element {\n  const [open, setOpen] = useState(false);\n  const [placement, setPlacement] = useState<Placement>('top');\n  const [sideOffset, setSideOffset] = useState(0);\n  const [collisionPadding, setCollisionPadding] = useState(0);\n  const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>('initial');\n  const popupRef = useRef<HTMLElement | null>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pointerPositionRef = useRef({ x: 0, y: 0 });\n  const uniqueId = useId();\n  const popupId = uniqueId.replace(/^:([^:]+):$/, '«$1»');\n\n  const updatePositioning = useCallback(({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => {\n    setPlacement(side);\n    setSideOffset(sideOffset);\n    setCollisionPadding(collisionPadding);\n  }, []);\n\n  const clearHoverTimeout = useCallback(() => {\n    if (hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  const checkCollision = useCallback(() => {\n    if (!popupRef.current || !triggerRef.current || !open) return;\n\n    const mediaContainer = popupRef.current.closest('[data-media-container]') as HTMLElement | null;\n    if (!mediaContainer) return;\n\n    const popupRect = getBoundingClientRectWithoutTransform(popupRef.current);\n    const boundsRect = getBoundingClientRectWithoutTransform(mediaContainer);\n    const { x } = getInBoundsAdjustments(popupRect, boundsRect, collisionPadding);\n\n    if (x !== 0) {\n      if (trackCursorAxis) {\n        const currentLeft = Number.parseFloat(popupRef.current.style.left || '0');\n        popupRef.current.style.setProperty('left', `${currentLeft + x}px`);\n      } else {\n        popupRef.current.style.setProperty('translate', `${x}px -100%`);\n      }\n    } else {\n      if (trackCursorAxis) {\n        popupRef.current.style.setProperty('translate', '-50% -100%');\n      } else {\n        popupRef.current.style.setProperty('translate', '0 -100%');\n      }\n    }\n  }, [open, collisionPadding, trackCursorAxis]);\n\n  const updatePosition = useCallback(() => {\n    if (open && trackCursorAxis && popupRef.current) {\n      popupRef.current.style.setProperty('left', `${pointerPositionRef.current.x}px`);\n      checkCollision();\n    }\n  }, [open, trackCursorAxis, checkCollision]);\n\n  const setOpenState = useCallback(\n    (newOpen: boolean) => {\n      if (open === newOpen) return;\n\n      setOpen(newOpen);\n\n      if (newOpen) {\n        setTransitionStatus('initial');\n        if (popupRef.current) {\n          popupRef.current.showPopover();\n        }\n        requestAnimationFrame(() => {\n          setTransitionStatus('open');\n          checkCollision();\n        });\n      } else {\n        setTransitionStatus('close');\n      }\n    },\n    [open, checkCollision],\n  );\n\n  useEffect(() => {\n    if (!popupRef.current || open) return;\n\n    const transitions = popupRef.current.getAnimations().filter(anim => anim instanceof CSSTransition);\n    if (transitions.length > 0) {\n      Promise.all(transitions.map(t => t.finished))\n        .then(() => popupRef.current?.hidePopover())\n        .catch(() => popupRef.current?.hidePopover());\n    } else {\n      popupRef.current.hidePopover();\n    }\n  }, [open, transitionStatus]);\n\n  useEffect(() => {\n    const trigger = triggerRef.current;\n    const popup = popupRef.current;\n    if (!trigger || !popup) return;\n\n    const abortController = new AbortController();\n    const { signal } = abortController;\n\n    const handlePointerEnter = () => {\n      clearHoverTimeout();\n\n      hoverTimeoutRef.current = setTimeout(() => {\n        setOpenState(true);\n      }, delay);\n    };\n\n    const handlePointerLeave = () => {\n      clearHoverTimeout();\n\n      hoverTimeoutRef.current = setTimeout(() => {\n        setOpenState(false);\n      }, closeDelay);\n    };\n\n    const handlePointerMove = (event: PointerEvent) => {\n      if (trackCursorAxis) {\n        pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n        if (open) {\n          updatePosition();\n        }\n      }\n    };\n\n    const handleFocusIn = () => {\n      setOpenState(true);\n    };\n\n    const handleFocusOut = (event: FocusEvent) => {\n      const relatedTarget = event.relatedTarget as HTMLElement;\n      if (relatedTarget && popup && contains(popup, relatedTarget)) return;\n      setOpenState(false);\n    };\n\n    if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n      // Event listeners are automatically removed when AbortController is aborted\n      trigger.addEventListener('pointerenter', handlePointerEnter, { signal });\n      trigger.addEventListener('pointerleave', handlePointerLeave, { signal });\n\n      if (trackCursorAxis) {\n        trigger.addEventListener('pointermove', handlePointerMove, { signal });\n      }\n    }\n\n    // Event listeners are automatically removed when AbortController is aborted\n    trigger.addEventListener('focusin', handleFocusIn, { signal });\n    trigger.addEventListener('focusout', handleFocusOut, { signal });\n\n    return () => {\n      abortController.abort();\n      clearHoverTimeout();\n    };\n  }, [delay, closeDelay, trackCursorAxis, open, setOpenState, clearHoverTimeout, updatePosition]);\n\n  useEffect(() => {\n    if (!popupRef.current || !triggerRef.current) return;\n\n    const popup = popupRef.current;\n    const [side, alignment] = placement.split('-');\n    popup.style.setProperty('top', `calc(anchor(${side}) - ${sideOffset}px)`);\n\n    if (trackCursorAxis) {\n      popup.style.setProperty('translate', `-50% -100%`);\n    } else {\n      popup.style.setProperty('translate', `0 -100%`);\n      popup.style.setProperty('justify-self', alignment === 'start'\n        ? 'anchor-start'\n        : alignment === 'end'\n          ? 'anchor-end'\n          : 'anchor-center');\n    }\n  }, [placement, sideOffset, trackCursorAxis]);\n\n  useEffect(() => {\n    if (!popupRef.current) return;\n\n    const resizeObserver = new ResizeObserver(checkCollision);\n    resizeObserver.observe(popupRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [checkCollision]);\n\n  const value: TooltipContextType = useMemo(\n    () => ({\n      popupRef,\n      triggerRef,\n      open,\n      transitionStatus,\n      updatePositioning,\n      trackCursorAxis,\n      placement,\n      sideOffset,\n      collisionPadding,\n      popupId,\n    }),\n    [open, transitionStatus, updatePositioning, trackCursorAxis, placement, sideOffset, collisionPadding, popupId],\n  );\n\n  return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;\n}\n\nfunction TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element {\n  const { triggerRef, open, popupId } = useTooltipContext();\n\n  const child = Children.only(children) as JSX.Element;\n  const existingStyle = (child.props as { style?: React.CSSProperties })?.style || {};\n\n  // eslint-disable-next-line react/no-clone-element\n  return cloneElement(child, {\n    ref: triggerRef,\n    'data-popup-open': open ? '' : undefined,\n    commandfor: popupId ?? undefined,\n    style: {\n      ...existingStyle,\n      ...(popupId ? { anchorName: `--${popupId}` as any } : {}),\n    },\n  });\n}\n\nfunction TooltipPositioner({\n  side = 'top',\n  sideOffset = 0,\n  collisionPadding = 0,\n  children,\n}: TooltipPositionerProps): JSX.Element | null {\n  const { updatePositioning } = useTooltipContext();\n\n  useEffect(() => {\n    updatePositioning({ side, sideOffset, collisionPadding });\n  }, [side, sideOffset, collisionPadding, updatePositioning]);\n\n  return <>{children}</>;\n}\n\nfunction TooltipPopup({ className = '', style, children }: TooltipPopupProps): JSX.Element | null {\n  const { popupRef, triggerRef, transitionStatus, placement, popupId } = useTooltipContext();\n  const triggerElement = triggerRef.current;\n\n  // Copy data attributes from trigger element\n  const dataAttributes = useMemo(() => {\n    if (!triggerElement?.attributes) return {};\n    return Object.fromEntries(\n      Array.from(triggerElement.attributes)\n        .filter(attr => attr.name.startsWith('data-'))\n        .map(attr => [attr.name, attr.value]),\n    );\n  }, [triggerElement]);\n\n  return (\n    <div\n      ref={popupRef as RefObject<HTMLDivElement>}\n      id={popupId ?? undefined}\n      className={className}\n      role=\"tooltip\"\n      popover=\"manual\"\n      style={{\n        ...(popupId ? { positionAnchor: `--${popupId}` as any } : {}),\n        ...style,\n      }}\n      {...dataAttributes}\n      data-side={placement}\n      data-starting-style={transitionStatus === 'initial' ? '' : undefined}\n      data-open={transitionStatus === 'initial' || transitionStatus === 'open' ? '' : undefined}\n      data-ending-style={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n      data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const Tooltip: {\n  Root: typeof TooltipRoot;\n  Trigger: typeof TooltipTrigger;\n  Positioner: typeof TooltipPositioner;\n  Popup: typeof TooltipPopup;\n} = {\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n  Positioner: TooltipPositioner,\n  Popup: TooltipPopup,\n};\n\nexport default Tooltip;\n","import type { Prettify } from '../types';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { VolumeSlider as CoreVolumeSlider } from '@videojs/core';\nimport { volumeSliderStateDefinition } from '@videojs/core/store';\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport type VolumeSliderState = Prettify<ReturnType<typeof useCore<CoreVolumeSlider>>> & {\n  orientation: 'horizontal' | 'vertical';\n};\n\nexport interface VolumeSliderProps extends React.ComponentPropsWithRef<'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  'data-volume'?: number;\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(() => volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n  const coreState = useCore(CoreVolumeSlider, { ...mediaState, ...mediaMethods });\n  return {\n    ...coreState,\n    orientation,\n  };\n}\n\nexport function useVolumeSliderRootProps(props: VolumeSliderProps, state: VolumeSliderState): VolumeSliderRenderProps {\n  const { children, className, id, style, orientation = 'horizontal', ref } = props;\n  const composedRef = useComposedRefs(ref, state._setRootElement);\n\n  return {\n    ref: composedRef,\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': state._volumeText,\n    'aria-orientation': orientation,\n    'data-orientation': orientation,\n    'data-muted': state.muted,\n    'data-volume-level': state.volumeLevel,\n    'data-volume': state.volume,\n    className,\n    style: {\n      ...style,\n      '--slider-fill': `${state._fillWidth.toFixed(3)}%`,\n      '--slider-pointer': `${(state._pointerWidth * 100).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: context._setTrackElement,\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-BYwSN7-8.js → frosted-D2OXDJRV.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-B8x0_k2f.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-DBvAU2X3.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";
 
@@ -153,4 +153,4 @@ function FrostedSkin({ children, className = "" }) {
 
 //#endregion
 export { FrostedSkin as t };
-//# sourceMappingURL=frosted-BYwSN7-8.js.map
+//# sourceMappingURL=frosted-D2OXDJRV.js.map

package/dist/{frosted-BYwSN7-8.js.map → frosted-D2OXDJRV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"frosted-BYwSN7-8.js","names":["styles: FrostedSkinStyles","styles","PlayButton","PlayIcon","PauseIcon","MuteButton","VolumeHighIcon","VolumeLowIcon","VolumeOffIcon","FullscreenEnterIcon","FullscreenExitIcon"],"sources":["../src/skins/frosted/styles.ts","../src/skins/frosted/FrostedSkin.tsx"],"sourcesContent":["import type { FrostedSkinStyles } from './types';\n\n// NOTE: Removing import to sidestep for compiler complexity (CJP)\n// import { cn } from '../../utils/cn';\n// A (very crude) utility to merge class names\n// Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.\n// It just makes the billions of Tailwind classes a little easier to read.\nfunction cn(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nconst styles: FrostedSkinStyles = {\n  MediaContainer: cn(\n    'vjs', // Scope preflight\n    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--frosted-border-radius,2rem)',\n    // Base typography\n    'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',\n    // Fancy borders\n    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',\n    'vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0',\n    // Prevent rounded corners in fullscreen\n    'vjs:[&:fullscreen]:rounded-none',\n    // Ensure the nested video inherits the radius\n    'vjs:[&_video]:w-full vjs:[&_video]:h-full',\n  ),\n  Overlay: cn(\n    'vjs:opacity-0 vjs:delay-500 vjs:duration-300 vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-gradient-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',\n    // ------------------------------------\n    //  FIXME: This is crude temporary logic, we'll improve it later I guess with a [data-show-controls] attribute or something?\n    'vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-100',\n    'vjs:has-[+.controls_[aria-expanded=\"true\"]]:opacity-100 vjs:has-[+.controls_[aria-expanded=\"true\"]]:delay-0 vjs:has-[+.controls_[aria-expanded=\"true\"]]:duration-100',\n    'vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100',\n    // ------------------------------------\n  ),\n  Surface: cn(\n    'vjs:bg-white/10 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',\n    // Ring and shadow\n    'vjs:ring vjs:ring-white/10 vjs:ring-inset vjs:shadow-sm vjs:shadow-black/15',\n    // Border to enhance contrast on lighter videos\n    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring vjs:after:rounded-[inherit] vjs:after:ring-black/15 vjs:after:pointer-events-none vjs:after:z-10',\n    // Reduced transparency for users with preference\n    // XXX: This requires a Tailwind custom variant (see 1 below)\n    'vjs:reduced-transparency:bg-black/70 vjs:reduced-transparency:ring-black vjs:reduced-transparency:after:ring-white/20',\n    // High contrast mode\n    'vjs:contrast-more:bg-black/90 vjs:contrast-more:ring-black vjs:contrast-more:after:ring-white/20',\n  ),\n  Controls: cn(\n    // ------------------------------------\n    //  FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.\n    'controls',\n    // ------------------------------------\n    'vjs:@container/controls vjs:absolute vjs:inset-x-3 vjs:bottom-3 vjs:rounded-full vjs:flex vjs:items-center vjs:p-1 vjs:gap-0.5 vjs:text-white',\n    // Animation\n    'vjs:transition vjs:will-change-[transform,scale,filter,opacity] vjs:origin-bottom vjs:ease-out',\n    // ------------------------------------\n    //  FIXME: Temporary hide/show logic, related to above.\n    'vjs:scale-90 vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300',\n    'vjs:has-[[data-paused]]:scale-100 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-100',\n    'vjs:has-[[aria-expanded=\"true\"]]:scale-100 vjs:has-[[aria-expanded=\"true\"]]:opacity-100 vjs:has-[[aria-expanded=\"true\"]]:blur-none vjs:has-[[aria-expanded=\"true\"]]:delay-0 vjs:has-[[aria-expanded=\"true\"]]:duration-100',\n    'vjs:group-hover/root:scale-100 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100',\n    // ------------------------------------\n  ),\n  Icon: cn('icon vjs:[&_path]:transition-transform vjs:[&_path]:ease-out'),\n  Button: cn(\n    'vjs:group/button vjs:cursor-pointer vjs:relative vjs:shrink-0 vjs:transition-[color,background,outline-offset] vjs:select-none vjs:p-2 vjs:rounded-full',\n    // Background/foreground\n    'vjs:bg-transparent vjs:text-white/90',\n    // Hover and focus states\n    'vjs:hover:no-underline vjs:hover:bg-white/10 vjs:hover:text-white vjs:focus-visible:no-underline vjs:focus-visible:bg-white/10 vjs:focus-visible:text-white',\n    // Focus state\n    'vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-blue-500',\n    // Disabled state\n    'vjs:disabled:grayscale vjs:disabled:opacity-50 vjs:disabled:cursor-not-allowed',\n    // Loading state\n    'vjs:aria-busy:pointer-events-none vjs:aria-busy:cursor-not-allowed',\n    // Expanded state\n    'vjs:aria-expanded:bg-white/10 vjs:aria-expanded:text-white',\n  ),\n  IconButton: cn(\n    'vjs:grid vjs:[&_.icon]:[grid-area:1/1]',\n    'vjs:[&_.icon]:shrink-0 vjs:[&_.icon]:transition-opacity vjs:[&_.icon]:duration-150 vjs:[&_.icon]:ease-linear vjs:[&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] vjs:[&_.icon]:shadow-black/25',\n  ),\n  PlayIcon: cn('vjs:opacity-0 vjs:group-data-paused/button:opacity-100'),\n  PauseIcon: cn('vjs:group-data-paused/button:opacity-0'),\n  PlayTooltipPopup: cn(\n    'vjs:[&_.pause-tooltip]:inline vjs:[&_.play-tooltip]:hidden',\n    'vjs:data-paused:[&_.pause-tooltip]:hidden vjs:data-paused:[&_.play-tooltip]:inline',\n  ),\n  PlayTooltip: cn('play-tooltip'),\n  PauseTooltip: cn('pause-tooltip'),\n  VolumeHighIcon: cn('vjs:hidden vjs:group-data-[volume-level=high]/button:inline vjs:group-data-[volume-level=medium]/button:inline'),\n  VolumeLowIcon: cn('vjs:hidden vjs:group-data-[volume-level=low]/button:inline'),\n  VolumeOffIcon: cn('vjs:hidden vjs:group-data-[volume-level=off]/button:inline'),\n  FullscreenEnterIcon: cn(\n    'vjs:group-data-fullscreen/button:hidden',\n    'vjs:group-hover/button:[&_.arrow-1]:-translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px',\n    'vjs:group-hover/button:[&_.arrow-2]:translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px',\n  ),\n  FullscreenExitIcon: cn(\n    'vjs:hidden vjs:group-data-fullscreen/button:inline',\n    'vjs:[&_.arrow-1]:-translate-x-px vjs:[&_.arrow-1]:-translate-y-px',\n    'vjs:[&_.arrow-2]:translate-x-px vjs:[&_.arrow-2]:translate-y-px',\n    'vjs:group-hover/button:[&_.arrow-1]:translate-0',\n    'vjs:group-hover/button:[&_.arrow-2]:translate-0',\n  ),\n  FullscreenTooltipPopup: cn(\n    'vjs:[&_.fullscreen-enter-tooltip]:inline vjs:data-fullscreen:[&_.fullscreen-enter-tooltip]:hidden',\n    'vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:data-fullscreen:[&_.fullscreen-exit-tooltip]:inline',\n  ),\n  FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),\n  FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),\n  TimeControls: cn('vjs:flex-1 vjs:flex vjs:items-center vjs:gap-3 vjs:px-1.5'),\n  TimeDisplay: cn('vjs:tabular-nums vjs:text-shadow-2xs/25'),\n  SliderRoot: cn(\n    'vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:relative vjs:rounded-full',\n    'vjs:data-[orientation=horizontal]:h-5 vjs:data-[orientation=horizontal]:min-w-20',\n    'vjs:data-[orientation=vertical]:w-5 vjs:data-[orientation=vertical]:h-20',\n  ),\n  SliderTrack: cn(\n    'vjs:relative vjs:select-none vjs:transition-[outline-offset] vjs:rounded-[inherit] vjs:bg-white/20 vjs:ring-1 vjs:ring-black/5',\n    'vjs:data-[orientation=horizontal]:w-full vjs:data-[orientation=horizontal]:h-1',\n    'vjs:data-[orientation=vertical]:w-1',\n    'vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-blue-500',\n  ),\n  SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),\n  // TODO: Work out what we want to do here.\n  SliderPointer: cn('vjs:bg-white/20 vjs:rounded-[inherit]'),\n  SliderThumb: cn(\n    'vjs:bg-white vjs:z-10 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:opacity-0 vjs:transition-[opacity,height,width] vjs:ease-out',\n    'vjs:group-hover/slider:opacity-100 vjs:group-focus-within/slider:opacity-100',\n    'vjs:size-2.5 vjs:active:size-3 vjs:group-active/slider:size-3',\n    'vjs:data-[orientation=horizontal]:hover:cursor-ew-resize',\n    'vjs:data-[orientation=vertical]:hover:cursor-ns-resize',\n  ),\n  PopupAnimation: cn(\n    // Animation\n    // XXX: We can't use transforms since floating UI uses them for positioning.\n    'vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-instant:duration-0',\n    'vjs:data-starting-style:scale-0 vjs:data-starting-style:opacity-0 vjs:data-starting-style:blur-sm',\n    'vjs:data-ending-style:scale-0 vjs:data-ending-style:opacity-0 vjs:data-ending-style:blur-sm',\n  ),\n  PopoverPopup: cn('vjs:relative vjs:px-1 vjs:py-3 vjs:rounded-full'),\n  TooltipPopup: cn('vjs:whitespace-nowrap vjs:rounded-full vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2.5 vjs:py-1'),\n};\n\n/*\n[1] @custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);\n*/\n\nexport default styles;\n","import type { PropsWithChildren } from 'react';\n\nimport { CurrentTimeDisplay } from '@/components/CurrentTimeDisplay';\nimport { DurationDisplay } from '@/components/DurationDisplay';\nimport { FullscreenButton } from '@/components/FullscreenButton';\nimport { MediaContainer } from '@/components/MediaContainer';\nimport MuteButton from '@/components/MuteButton';\nimport PlayButton from '@/components/PlayButton';\nimport { Popover } from '@/components/Popover';\nimport { PreviewTimeDisplay } from '@/components/PreviewTimeDisplay';\nimport { TimeSlider } from '@/components/TimeSlider';\nimport { Tooltip } from '@/components/Tooltip';\nimport { VolumeSlider } from '@/components/VolumeSlider';\nimport {\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PlayIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@/icons';\nimport styles from './styles';\n\ntype SkinProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nexport default function FrostedSkin({ children, className = '' }: SkinProps): JSX.Element {\n  return (\n    <MediaContainer className={`${styles.MediaContainer} ${className}`}>\n      {children}\n\n      <div className={styles.Overlay} />\n\n      <div className={`${styles.Surface} ${styles.Controls}`}>\n        <Tooltip.Root delay={500}>\n          <Tooltip.Trigger>\n            <PlayButton className={`${styles.Button} ${styles.IconButton}`}>\n              <PlayIcon className={`${styles.Icon} ${styles.PlayIcon}`} />\n              <PauseIcon className={`${styles.Icon} ${styles.PauseIcon}`} />\n            </PlayButton>\n          </Tooltip.Trigger>\n          <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n            <Tooltip.Popup className={`${styles.TooltipPopup} ${styles.Surface} ${styles.PopupAnimation} ${styles.PlayTooltipPopup}`}>\n              <span className={styles.PlayTooltip}>Play</span>\n              <span className={styles.PauseTooltip}>Pause</span>\n            </Tooltip.Popup>\n          </Tooltip.Positioner>\n        </Tooltip.Root>\n\n        <div className={styles.TimeControls}>\n          <CurrentTimeDisplay\n            // Use showRemaining to show count down/remaining time\n            // showRemaining\n            className={styles.TimeDisplay}\n          />\n\n          <Tooltip.Root trackCursorAxis=\"x\">\n            <Tooltip.Trigger>\n              <TimeSlider.Root className={styles.SliderRoot}>\n                <TimeSlider.Track className={styles.SliderTrack}>\n                  <TimeSlider.Progress className={styles.SliderProgress} />\n                  <TimeSlider.Pointer className={styles.SliderPointer} />\n                </TimeSlider.Track>\n                <TimeSlider.Thumb className={styles.SliderThumb} />\n              </TimeSlider.Root>\n            </Tooltip.Trigger>\n            <Tooltip.Positioner side=\"top\" sideOffset={18} collisionPadding={12}>\n              <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup}`}>\n                <PreviewTimeDisplay className={styles.TimeDisplay} />\n              </Tooltip.Popup>\n            </Tooltip.Positioner>\n          </Tooltip.Root>\n\n          <DurationDisplay className={styles.TimeDisplay} />\n        </div>\n\n        <Popover.Root openOnHover delay={200} closeDelay={100}>\n          <Popover.Trigger>\n            <MuteButton className={`${styles.Button} ${styles.IconButton}`}>\n              <VolumeHighIcon className={`${styles.Icon} ${styles.VolumeHighIcon}`} />\n              <VolumeLowIcon className={`${styles.Icon} ${styles.VolumeLowIcon}`} />\n              <VolumeOffIcon className={`${styles.Icon} ${styles.VolumeOffIcon}`} />\n            </MuteButton>\n          </Popover.Trigger>\n          <Popover.Positioner side=\"top\" sideOffset={12}>\n            <Popover.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.PopoverPopup}`}>\n              <VolumeSlider.Root className={styles.SliderRoot} orientation=\"vertical\">\n                <VolumeSlider.Track className={styles.SliderTrack}>\n                  <VolumeSlider.Progress className={styles.SliderProgress} />\n                </VolumeSlider.Track>\n                <VolumeSlider.Thumb className={styles.SliderThumb} />\n              </VolumeSlider.Root>\n            </Popover.Popup>\n          </Popover.Positioner>\n        </Popover.Root>\n\n        <Tooltip.Root delay={500}>\n          <Tooltip.Trigger>\n            <FullscreenButton className={`${styles.Button} ${styles.IconButton}`}>\n              <FullscreenEnterIcon className={`${styles.Icon} ${styles.FullscreenEnterIcon} `} />\n              <FullscreenExitIcon className={`${styles.Icon} ${styles.FullscreenExitIcon}`} />\n            </FullscreenButton>\n          </Tooltip.Trigger>\n          <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n            <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.FullscreenTooltipPopup}`}>\n              <span className={styles.FullscreenEnterTooltip}>Enter Fullscreen</span>\n              <span className={styles.FullscreenExitTooltip}>Exit Fullscreen</span>\n            </Tooltip.Popup>\n          </Tooltip.Positioner>\n        </Tooltip.Root>\n      </div>\n    </MediaContainer>\n  );\n}\n\n// function ArrowSvg(props: React.ComponentProps<'svg'>) {\n//   return (\n//     <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n//       <path\n//         d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n//         className={styles.ArrowFill}\n//       />\n//       <path\n//         d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n//         className={styles.ArrowOuterStroke}\n//       />\n//       <path\n//         d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n//         className={styles.ArrowInnerStroke}\n//       />\n//     </svg>\n//   );\n// }\n"],"mappings":"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"}
+{"version":3,"file":"frosted-D2OXDJRV.js","names":["styles: FrostedSkinStyles","styles","PlayButton","PlayIcon","PauseIcon","MuteButton","VolumeHighIcon","VolumeLowIcon","VolumeOffIcon","FullscreenEnterIcon","FullscreenExitIcon"],"sources":["../src/skins/frosted/styles.ts","../src/skins/frosted/FrostedSkin.tsx"],"sourcesContent":["import type { FrostedSkinStyles } from './types';\n\n// NOTE: Removing import to sidestep for compiler complexity (CJP)\n// import { cn } from '../../utils/cn';\n// A (very crude) utility to merge class names\n// Usually I'd use something like `clsx` or `classnames` but this is ok for our simple use case.\n// It just makes the billions of Tailwind classes a little easier to read.\nfunction cn(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nconst styles: FrostedSkinStyles = {\n  MediaContainer: cn(\n    'vjs', // Scope preflight\n    'vjs:relative vjs:isolate vjs:@container/root vjs:group/root vjs:overflow-clip vjs:bg-black vjs:rounded-(--frosted-border-radius,2rem)',\n    // Base typography\n    'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',\n    // Fancy borders\n    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/10 vjs:after:ring-1 vjs:dark:after:ring-white/10 vjs:after:ring-inset vjs:after:z-10 vjs:after:pointer-events-none vjs:after:rounded-[inherit]',\n    'vjs:before:absolute vjs:before:inset-px vjs:before:rounded-[inherit] vjs:before:ring-white/15 vjs:before:ring-1 vjs:before:ring-inset vjs:before:z-10 vjs:before:pointer-events-none vjs:dark:before:ring-0',\n    // Prevent rounded corners in fullscreen\n    'vjs:[&:fullscreen]:rounded-none',\n    // Ensure the nested video inherits the radius\n    'vjs:[&_video]:w-full vjs:[&_video]:h-full',\n  ),\n  Overlay: cn(\n    'vjs:opacity-0 vjs:delay-500 vjs:duration-300 vjs:rounded-[inherit] vjs:absolute vjs:inset-0 vjs:pointer-events-none vjs:bg-gradient-to-t vjs:from-black/50 vjs:via-black/20 vjs:to-transparent vjs:transition-opacity vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',\n    // ------------------------------------\n    //  FIXME: This is crude temporary logic, we'll improve it later I guess with a [data-show-controls] attribute or something?\n    'vjs:has-[+.controls_[data-paused]]:opacity-100 vjs:has-[+.controls_[data-paused]]:delay-0 vjs:has-[+.controls_[data-paused]]:duration-100',\n    'vjs:has-[+.controls_[aria-expanded=\"true\"]]:opacity-100 vjs:has-[+.controls_[aria-expanded=\"true\"]]:delay-0 vjs:has-[+.controls_[aria-expanded=\"true\"]]:duration-100',\n    'vjs:group-hover/root:opacity-100 vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100',\n    // ------------------------------------\n  ),\n  Surface: cn(\n    'vjs:bg-white/10 vjs:backdrop-blur-3xl vjs:backdrop-saturate-150 vjs:backdrop-brightness-90',\n    // Ring and shadow\n    'vjs:ring vjs:ring-white/10 vjs:ring-inset vjs:shadow-sm vjs:shadow-black/15',\n    // Border to enhance contrast on lighter videos\n    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring vjs:after:rounded-[inherit] vjs:after:ring-black/15 vjs:after:pointer-events-none vjs:after:z-10',\n    // Reduced transparency for users with preference\n    // XXX: This requires a Tailwind custom variant (see 1 below)\n    'vjs:reduced-transparency:bg-black/70 vjs:reduced-transparency:ring-black vjs:reduced-transparency:after:ring-white/20',\n    // High contrast mode\n    'vjs:contrast-more:bg-black/90 vjs:contrast-more:ring-black vjs:contrast-more:after:ring-white/20',\n  ),\n  Controls: cn(\n    // ------------------------------------\n    //  FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.\n    'controls',\n    // ------------------------------------\n    'vjs:@container/controls vjs:absolute vjs:inset-x-3 vjs:bottom-3 vjs:rounded-full vjs:flex vjs:items-center vjs:p-1 vjs:gap-0.5 vjs:text-white',\n    // Animation\n    'vjs:transition vjs:will-change-[transform,scale,filter,opacity] vjs:origin-bottom vjs:ease-out',\n    // ------------------------------------\n    //  FIXME: Temporary hide/show logic, related to above.\n    'vjs:scale-90 vjs:opacity-0 vjs:blur-sm vjs:delay-500 vjs:duration-300',\n    'vjs:has-[[data-paused]]:scale-100 vjs:has-[[data-paused]]:opacity-100 vjs:has-[[data-paused]]:blur-none vjs:has-[[data-paused]]:delay-0 vjs:has-[[data-paused]]:duration-100',\n    'vjs:has-[[aria-expanded=\"true\"]]:scale-100 vjs:has-[[aria-expanded=\"true\"]]:opacity-100 vjs:has-[[aria-expanded=\"true\"]]:blur-none vjs:has-[[aria-expanded=\"true\"]]:delay-0 vjs:has-[[aria-expanded=\"true\"]]:duration-100',\n    'vjs:group-hover/root:scale-100 vjs:group-hover/root:opacity-100 vjs:group-hover/root:blur-none vjs:group-hover/root:delay-0 vjs:group-hover/root:duration-100',\n    // ------------------------------------\n  ),\n  Icon: cn('icon vjs:[&_path]:transition-transform vjs:[&_path]:ease-out'),\n  Button: cn(\n    'vjs:group/button vjs:cursor-pointer vjs:relative vjs:shrink-0 vjs:transition-[color,background,outline-offset] vjs:select-none vjs:p-2 vjs:rounded-full',\n    // Background/foreground\n    'vjs:bg-transparent vjs:text-white/90',\n    // Hover and focus states\n    'vjs:hover:no-underline vjs:hover:bg-white/10 vjs:hover:text-white vjs:focus-visible:no-underline vjs:focus-visible:bg-white/10 vjs:focus-visible:text-white',\n    // Focus state\n    'vjs:-outline-offset-2 vjs:focus-visible:outline-2 vjs:focus-visible:outline-offset-2 vjs:focus-visible:outline-blue-500',\n    // Disabled state\n    'vjs:disabled:grayscale vjs:disabled:opacity-50 vjs:disabled:cursor-not-allowed',\n    // Loading state\n    'vjs:aria-busy:pointer-events-none vjs:aria-busy:cursor-not-allowed',\n    // Expanded state\n    'vjs:aria-expanded:bg-white/10 vjs:aria-expanded:text-white',\n  ),\n  IconButton: cn(\n    'vjs:grid vjs:[&_.icon]:[grid-area:1/1]',\n    'vjs:[&_.icon]:shrink-0 vjs:[&_.icon]:transition-opacity vjs:[&_.icon]:duration-150 vjs:[&_.icon]:ease-linear vjs:[&_.icon]:drop-shadow-[0_1px_0_var(--tw-shadow-color)] vjs:[&_.icon]:shadow-black/25',\n  ),\n  PlayIcon: cn('vjs:opacity-0 vjs:group-data-paused/button:opacity-100'),\n  PauseIcon: cn('vjs:group-data-paused/button:opacity-0'),\n  PlayTooltipPopup: cn(\n    'vjs:[&_.pause-tooltip]:inline vjs:[&_.play-tooltip]:hidden',\n    'vjs:data-paused:[&_.pause-tooltip]:hidden vjs:data-paused:[&_.play-tooltip]:inline',\n  ),\n  PlayTooltip: cn('play-tooltip'),\n  PauseTooltip: cn('pause-tooltip'),\n  VolumeHighIcon: cn('vjs:hidden vjs:group-data-[volume-level=high]/button:inline vjs:group-data-[volume-level=medium]/button:inline'),\n  VolumeLowIcon: cn('vjs:hidden vjs:group-data-[volume-level=low]/button:inline'),\n  VolumeOffIcon: cn('vjs:hidden vjs:group-data-[volume-level=off]/button:inline'),\n  FullscreenEnterIcon: cn(\n    'vjs:group-data-fullscreen/button:hidden',\n    'vjs:group-hover/button:[&_.arrow-1]:-translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px',\n    'vjs:group-hover/button:[&_.arrow-2]:translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px',\n  ),\n  FullscreenExitIcon: cn(\n    'vjs:hidden vjs:group-data-fullscreen/button:inline',\n    'vjs:[&_.arrow-1]:-translate-x-px vjs:[&_.arrow-1]:-translate-y-px',\n    'vjs:[&_.arrow-2]:translate-x-px vjs:[&_.arrow-2]:translate-y-px',\n    'vjs:group-hover/button:[&_.arrow-1]:translate-0',\n    'vjs:group-hover/button:[&_.arrow-2]:translate-0',\n  ),\n  FullscreenTooltipPopup: cn(\n    'vjs:[&_.fullscreen-enter-tooltip]:inline vjs:data-fullscreen:[&_.fullscreen-enter-tooltip]:hidden',\n    'vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:data-fullscreen:[&_.fullscreen-exit-tooltip]:inline',\n  ),\n  FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),\n  FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),\n  TimeControls: cn('vjs:flex-1 vjs:flex vjs:items-center vjs:gap-3 vjs:px-1.5'),\n  TimeDisplay: cn('vjs:tabular-nums vjs:text-shadow-2xs/25'),\n  SliderRoot: cn(\n    'vjs:group/slider vjs:outline-0 vjs:flex vjs:items-center vjs:justify-center vjs:flex-1 vjs:relative vjs:rounded-full',\n    'vjs:data-[orientation=horizontal]:h-5 vjs:data-[orientation=horizontal]:min-w-20',\n    'vjs:data-[orientation=vertical]:w-5 vjs:data-[orientation=vertical]:h-20',\n  ),\n  SliderTrack: cn(\n    'vjs:relative vjs:select-none vjs:transition-[outline-offset] vjs:rounded-[inherit] vjs:bg-white/20 vjs:ring-1 vjs:ring-black/5',\n    'vjs:data-[orientation=horizontal]:w-full vjs:data-[orientation=horizontal]:h-1',\n    'vjs:data-[orientation=vertical]:w-1',\n    'vjs:-outline-offset-2 vjs:group-focus-visible/slider:outline-2 vjs:group-focus-visible/slider:outline-offset-6 vjs:group-focus-visible/slider:outline-blue-500',\n  ),\n  SliderProgress: cn('vjs:bg-white vjs:rounded-[inherit]'),\n  // TODO: Work out what we want to do here.\n  SliderPointer: cn('vjs:bg-white/20 vjs:rounded-[inherit]'),\n  SliderThumb: cn(\n    'vjs:bg-white vjs:z-10 vjs:select-none vjs:ring vjs:ring-black/10 vjs:rounded-full vjs:shadow-sm vjs:shadow-black/15 vjs:opacity-0 vjs:transition-[opacity,height,width] vjs:ease-out',\n    'vjs:group-hover/slider:opacity-100 vjs:group-focus-within/slider:opacity-100',\n    'vjs:size-2.5 vjs:active:size-3 vjs:group-active/slider:size-3',\n    'vjs:data-[orientation=horizontal]:hover:cursor-ew-resize',\n    'vjs:data-[orientation=vertical]:hover:cursor-ns-resize',\n  ),\n  PopupAnimation: cn(\n    // Animation\n    // XXX: We can't use transforms since floating UI uses them for positioning.\n    'vjs:transition-[transform,scale,opacity,filter] vjs:origin-bottom vjs:duration-200 vjs:data-instant:duration-0',\n    'vjs:data-starting-style:scale-0 vjs:data-starting-style:opacity-0 vjs:data-starting-style:blur-sm',\n    'vjs:data-ending-style:scale-0 vjs:data-ending-style:opacity-0 vjs:data-ending-style:blur-sm',\n  ),\n  PopoverPopup: cn('vjs:relative vjs:px-1 vjs:py-3 vjs:rounded-full'),\n  TooltipPopup: cn('vjs:whitespace-nowrap vjs:rounded-full vjs:text-white vjs:text-xs vjs:@7xl/root:text-sm vjs:px-2.5 vjs:py-1'),\n};\n\n/*\n[1] @custom-variant reduced-transparency @media (prefers-reduced-transparency: reduce);\n*/\n\nexport default styles;\n","import type { PropsWithChildren } from 'react';\n\nimport { CurrentTimeDisplay } from '@/components/CurrentTimeDisplay';\nimport { DurationDisplay } from '@/components/DurationDisplay';\nimport { FullscreenButton } from '@/components/FullscreenButton';\nimport { MediaContainer } from '@/components/MediaContainer';\nimport MuteButton from '@/components/MuteButton';\nimport PlayButton from '@/components/PlayButton';\nimport { Popover } from '@/components/Popover';\nimport { PreviewTimeDisplay } from '@/components/PreviewTimeDisplay';\nimport { TimeSlider } from '@/components/TimeSlider';\nimport { Tooltip } from '@/components/Tooltip';\nimport { VolumeSlider } from '@/components/VolumeSlider';\nimport {\n  FullscreenEnterIcon,\n  FullscreenExitIcon,\n  PauseIcon,\n  PlayIcon,\n  VolumeHighIcon,\n  VolumeLowIcon,\n  VolumeOffIcon,\n} from '@/icons';\nimport styles from './styles';\n\ntype SkinProps = PropsWithChildren<{\n  className?: string;\n}>;\n\nexport default function FrostedSkin({ children, className = '' }: SkinProps): JSX.Element {\n  return (\n    <MediaContainer className={`${styles.MediaContainer} ${className}`}>\n      {children}\n\n      <div className={styles.Overlay} />\n\n      <div className={`${styles.Surface} ${styles.Controls}`}>\n        <Tooltip.Root delay={500}>\n          <Tooltip.Trigger>\n            <PlayButton className={`${styles.Button} ${styles.IconButton}`}>\n              <PlayIcon className={`${styles.Icon} ${styles.PlayIcon}`} />\n              <PauseIcon className={`${styles.Icon} ${styles.PauseIcon}`} />\n            </PlayButton>\n          </Tooltip.Trigger>\n          <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n            <Tooltip.Popup className={`${styles.TooltipPopup} ${styles.Surface} ${styles.PopupAnimation} ${styles.PlayTooltipPopup}`}>\n              <span className={styles.PlayTooltip}>Play</span>\n              <span className={styles.PauseTooltip}>Pause</span>\n            </Tooltip.Popup>\n          </Tooltip.Positioner>\n        </Tooltip.Root>\n\n        <div className={styles.TimeControls}>\n          <CurrentTimeDisplay\n            // Use showRemaining to show count down/remaining time\n            // showRemaining\n            className={styles.TimeDisplay}\n          />\n\n          <Tooltip.Root trackCursorAxis=\"x\">\n            <Tooltip.Trigger>\n              <TimeSlider.Root className={styles.SliderRoot}>\n                <TimeSlider.Track className={styles.SliderTrack}>\n                  <TimeSlider.Progress className={styles.SliderProgress} />\n                  <TimeSlider.Pointer className={styles.SliderPointer} />\n                </TimeSlider.Track>\n                <TimeSlider.Thumb className={styles.SliderThumb} />\n              </TimeSlider.Root>\n            </Tooltip.Trigger>\n            <Tooltip.Positioner side=\"top\" sideOffset={18} collisionPadding={12}>\n              <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup}`}>\n                <PreviewTimeDisplay className={styles.TimeDisplay} />\n              </Tooltip.Popup>\n            </Tooltip.Positioner>\n          </Tooltip.Root>\n\n          <DurationDisplay className={styles.TimeDisplay} />\n        </div>\n\n        <Popover.Root openOnHover delay={200} closeDelay={100}>\n          <Popover.Trigger>\n            <MuteButton className={`${styles.Button} ${styles.IconButton}`}>\n              <VolumeHighIcon className={`${styles.Icon} ${styles.VolumeHighIcon}`} />\n              <VolumeLowIcon className={`${styles.Icon} ${styles.VolumeLowIcon}`} />\n              <VolumeOffIcon className={`${styles.Icon} ${styles.VolumeOffIcon}`} />\n            </MuteButton>\n          </Popover.Trigger>\n          <Popover.Positioner side=\"top\" sideOffset={12}>\n            <Popover.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.PopoverPopup}`}>\n              <VolumeSlider.Root className={styles.SliderRoot} orientation=\"vertical\">\n                <VolumeSlider.Track className={styles.SliderTrack}>\n                  <VolumeSlider.Progress className={styles.SliderProgress} />\n                </VolumeSlider.Track>\n                <VolumeSlider.Thumb className={styles.SliderThumb} />\n              </VolumeSlider.Root>\n            </Popover.Popup>\n          </Popover.Positioner>\n        </Popover.Root>\n\n        <Tooltip.Root delay={500}>\n          <Tooltip.Trigger>\n            <FullscreenButton className={`${styles.Button} ${styles.IconButton}`}>\n              <FullscreenEnterIcon className={`${styles.Icon} ${styles.FullscreenEnterIcon} `} />\n              <FullscreenExitIcon className={`${styles.Icon} ${styles.FullscreenExitIcon}`} />\n            </FullscreenButton>\n          </Tooltip.Trigger>\n          <Tooltip.Positioner side=\"top\" sideOffset={12} collisionPadding={12}>\n            <Tooltip.Popup className={`${styles.Surface} ${styles.PopupAnimation} ${styles.TooltipPopup} ${styles.FullscreenTooltipPopup}`}>\n              <span className={styles.FullscreenEnterTooltip}>Enter Fullscreen</span>\n              <span className={styles.FullscreenExitTooltip}>Exit Fullscreen</span>\n            </Tooltip.Popup>\n          </Tooltip.Positioner>\n        </Tooltip.Root>\n      </div>\n    </MediaContainer>\n  );\n}\n\n// function ArrowSvg(props: React.ComponentProps<'svg'>) {\n//   return (\n//     <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\" {...props}>\n//       <path\n//         d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n//         className={styles.ArrowFill}\n//       />\n//       <path\n//         d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n//         className={styles.ArrowOuterStroke}\n//       />\n//       <path\n//         d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n//         className={styles.ArrowInnerStroke}\n//       />\n//     </svg>\n//   );\n// }\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -145,6 +145,7 @@ interface PopoverPositionerProps {
 interface PopoverPopupProps {
   id?: string;
   className?: string;
+  style?: React.CSSProperties;
   children: ReactNode;
 }
 declare function PopoverRoot({
@@ -162,8 +163,8 @@ declare function PopoverPositioner({
   children
 }: PopoverPositionerProps): JSX.Element | null;
 declare function PopoverPopup({
-  id,
   className,
+  style,
   children
 }: PopoverPopupProps): JSX.Element;
 declare const Popover: {
@@ -184,6 +185,22 @@ 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/types.d.ts
+declare module '*.module.css' {
+  const classes: {
+    [key: string]: string;
+  };
+  export default classes;
+}
+declare global {
+  namespace React {
+    interface HTMLAttributes<T> {
+      popover?: 'auto' | 'manual' | string;
+      commandfor?: string;
+    }
+  }
+}
+//#endregion
 //#region src/components/TimeSlider.d.ts
 interface TimeSliderProps extends React.ComponentPropsWithRef<"div"> {
   orientation?: "horizontal" | "vertical";
@@ -231,6 +248,7 @@ interface TooltipPositionerProps {
 interface TooltipPopupProps {
   id?: string;
   className?: string;
+  style?: React.CSSProperties;
   children: ReactNode;
 }
 declare function TooltipRoot({
@@ -249,8 +267,8 @@ declare function TooltipPositioner({
   children
 }: TooltipPositionerProps): JSX.Element | null;
 declare function TooltipPopup({
-  id,
   className,
+  style,
   children
 }: TooltipPopupProps): JSX.Element | null;
 declare const Tooltip: {
@@ -285,13 +303,14 @@ type VideoProps = PropsWithChildren<DetailedHTMLProps<VideoHTMLAttributes<HTMLVi
 declare const Video: React$1.ForwardRefExoticComponent<VideoProps & React$1.RefAttributes<HTMLVideoElement>>;
 //#endregion
 //#region src/components/VolumeSlider.d.ts
-interface VolumeSliderProps extends React.ComponentProps<"div"> {
+interface VolumeSliderProps extends React.ComponentPropsWithRef<"div"> {
   orientation?: "horizontal" | "vertical";
 }
 interface VolumeSliderRenderProps extends React.ComponentProps<"div"> {
   "data-orientation"?: "horizontal" | "vertical";
   "data-muted"?: boolean;
   "data-volume-level"?: string;
+  "data-volume"?: number;
 }
 declare function renderVolumeSliderRoot(props: VolumeSliderRenderProps): JSX.Element;
 declare const VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot>;

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>>>","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}","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}","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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"}
+{"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>>>","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}","PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>","Prettify","T","K","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}","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/types.d.ts","../src/components/TimeSlider.tsx","../src/components/Tooltip.tsx","../src/components/Video.tsx","../src/components/VolumeSlider.tsx"],"sourcesContent":["declare module '*.module.css' {\n  const classes: { [key: string]: string };\n  export default classes;\n}\n\ndeclare global {\n  namespace React {\n    interface HTMLAttributes<T> {\n      popover?: 'auto' | 'manual' | string;\n      commandfor?: string;\n    }\n  }\n}\n\nexport type Prettify<T> = {\n  [K in keyof T]: T[K];\n} & {};\n"],"mappings":";;;;;;;;AAWqF,KAAzE,QAAyE,CAAA,SAAA,GAAA,EA0CrF,SAAY,GAAA,CAAkC,GAAA,CAAA,KAAA,EA1Ca,MA0Cb,EAAA,KAAA,EA1C4B,MA0C5B,EAAA,GA1CuC,YA0CvC;;;;ACAjCA,KDAD,kBCAwE,CAAhC,eDAN,MCAM,CAAA,MAAA,EAAA,GAAA,CAAA,EAAgC,kBDAC,QCAD,CAAA,GAAA,EAAA,GAAA,CAAA,CAAnD,GDA0E,KAAA,CAAM,yBCAhF,CDC/B,KAAA,CAAM,eCDyB,CDCT,MCDS,GAAA;EAAA,MAAA,CAAA,EDCW,SCDX;KDC0B,KAAA,CAAM,cAAc;;;iBC7C/D,0BAAA;;;;KAcJ,uBAAA,GAA0B,kBAAkB;ADZ5C,UCcK,uBAAA,SAAgC,KAAA,CAAM,cDd3C,CAAA,MAAA,CAAA,CAAA;EAA+C,aAAA,CAAA,EAAA,OAAA;;AAA0B,iBC8BrE,wBAAA,CD9BqE,KAAA,EC8BrC,uBD9BqC,EAAA,KAAA,EC8BL,uBD9BK,CAAA,EC8BqB,GAAA,CAAI,OD9BzB;AA0CzE,cCACA,kBDAD,ECAqB,kBDArB,CCAwC,uBDAxC,EAAA,OCAwE,wBDAxE,CAAA;;;iBE5CI,uBAAA;;;KAYJ,uBAAA,UAAiC;KACjC,oBAAA,GAAuB,WAAW;AFXlC,iBEaI,uBAAA,CFbJ,KAAA,EEamC,iBFbnC,CAAA,EEauD,iBFbvD,CEayE,MFbzE,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA;AAA+C,KEsB/C,uBAAA,GFtB+C,OEsBd,uBFtBc;KEuBtD,oBAAA,GAAuB,UFvB8C,CEuBnC,uBFvBmC,CAAA;AAAW,iBEyBrE,qBAAA,CFzBqE,KAAA,EEyBxC,oBFzBwC,EAAA,KAAA,EEyBX,oBFzBW,CAAA,EEyBY,GAAA,CAAI,OFzBhB;AAAA,KE6BzE,qBAAA,GF7ByE,OE6B1C,qBF7B0C;AA0CzE,cEXCC,eFWD,EEXkB,kBFWlB,CEXqC,oBFWrC,EAAA,OEXkE,qBFWlE,CAAA;;;iBG1CI,wBAAA;;;;;AHAJ,KGmBA,qBAAA,GAAwB,UHnBxB,CAAA,OGmB0C,wBHnB1C,CAAA;AAA+C,iBGqB3C,wBAAA,CHrB2C,KAAA,EGsBlD,iBHtBkD,EAAA,KAAA,EGuBlD,qBHvBkD,CAAA,EGwBxD,iBHxBwD,CGwBtC,MHxBsC,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA;AAAe,KG4C9D,qBAAA,GAAwB,UH5CsC,CAAA,OG4CpB,wBH5CoB,CAAA;AAAW,iBG8CrE,sBAAA,CH9CqE,KAAA,EG8CvC,qBH9CuC,EAAA,KAAA,EG8CT,qBH9CS,CAAA,EG8Ce,GAAA,CAAI,OH9CnB;AAAA,cGiExEC,gBHjEwE,EGiEtD,kBHjEsD,CGiEnC,qBHjEmC,EAAA,OGiEL,sBHjEK,CAAA;;;KIOhF,iBAAA,GAAkB,YAAY,WAAW,kBAAkB;;AJPhE,KIUK,aAAA,GAAgB,WJVT,CIWV,IJXU,CIWL,iBJXK,CIWa,mBJXb,CIWiC,gBJXjC,CAAA,EIWoD,gBJXpD,CAAA,EAAA,KAAA,CAAA,GAAA;EAA+C,GAAA,EIYlD,GJZkD,CIY9C,iBJZ8C,CAAA;CAAe,CAAA;AAAW,KIoFzE,YAAA,GAAa,iBJpF4D,CAAA;EAAA,SAAA,CAAA,EIqFvE,aJrFuE;EA0CrF,SAAY,CAAA,EAAA,MAAA,GAAA,SAAA;EAAkC,KAAA,CAAA,EI6CpC,aJ7CoC,GAAA,SAAA;CAAuC,CAAA;AAC7D,iBIgDR,QAAA,CJhDQ;EAAA,SAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EIgD4D,YJhD5D,CAAA,EIgDyE,GAAA,CAAI,OJhD7E;;;;;;;;;AA3CxB;;;;;AA0CA;;;;AAC4C,iBK7B5B,oBAAA,CAAA,CL6B4B,EK7BJ,WL6BI,CK7BQ,WL6BR,GAAA,IAAA,CAAA;;;;;;;;;AC7C5C;AAcA;AAEA;AAgBA;;;AAA8G,cIejGC,cJfiG,EIejF,EJfiF,CIe9E,iBJf8E,CIe5D,SJf4D,CIelD,cJfkD,CAAA,CAAA,CAAA;;;iBK9B9F,kBAAA;;;;;ANAhB,CAAA;AAA2D,KMkB/C,eAAA,GAAkB,UNlB6B,CAAA,OMkBX,kBNlBW,CAAA;AAAe,iBMoB1D,kBAAA,CNpB0D,KAAA,EMqBjE,iBNrBiE,EAAA,KAAA,EMsBjE,eNtBiE,CAAA,EMuBvE,iBNvBuE,CMuBrD,MNvBqD,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA;AAAW,KM6CzE,eAAA,GAAkB,UN7CuD,CAAA,OM6CrC,kBN7CqC,CAAA;AAAA,iBM+CrE,gBAAA,CN/CqE,KAAA,EM+C7C,eN/C6C,EAAA,KAAA,EM+CrB,eN/CqB,CAAA,EM+CH,GAAA,CAAI,ON/CD;AA0CzE,cMwBCC,UNxBD,EMwBa,kBNxBb,CMwBgC,eNxBhC,EAAA,OMwBwD,gBNxBxD,CAAA;;;iBO1CI,kBAAA;;;;;APAJ,KOgBA,eAAA,GAAkB,UPhBlB,CAAA,OOgBoC,kBPhBpC,CAAA;AAA+C,iBOkB3C,kBAAA,CPlB2C,KAAA,EOmBlD,MPnBkD,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,KAAA,EOoBlD,ePpBkD,CAAA,EOqBxD,iBPrBwD,COqBtC,MPrBsC,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA;AAAe,KOyC9D,eAAA,GAAkB,UPzC4C,CAAA,OOyC1B,kBPzC0B,CAAA;AAAW,iBO2CrE,gBAAA,CP3CqE,KAAA,EO2C7C,eP3C6C,EAAA,KAAA,EO2CrB,eP3CqB,CAAA,EO2CH,GAAA,CAAI,OP3CD;AAAA,cO8DxEC,UP9DwE,EO8D5D,kBP9D4D,CO8DzC,eP9DyC,EAAA,OO8DjB,gBP9DiB,CAAA;;;KQMhF,WAAA;UAgBK,gBAAA;;;;YAIE;AR1BZ;UQ6BU,mBAAA,CR7BiD;EAAe,QAAA,EQ8B9D,SR9B8D;;UQiChE,sBAAA,CRjC2E;EA0CrF,IAAY,CAAA,EQRH,WRQG;EAAkC,UAAA,CAAA,EAAA,MAAA;EAAuC,QAAA,EQNzE,SRMyE;;UQH3E,iBAAA,CRIkC;EAA1C,EAAA,CAAA,EAAA,MAAM;EAAuE,SAAA,CAAA,EAAA,MAAA;EAApB,KAAA,CAAM,EQDvD,KAAA,CAAM,aRCiD;EAD0C,QAAM,EQCrG,SRDqG;;iBQcxG,WAAA;;;;;GAA0E,mBAAmB,GAAA,CAAI;iBAkLjG,cAAA;;GAA6B,sBAAsB,GAAA,CAAI;iBAkBvD,iBAAA;;;;GAA8D,yBAAyB,GAAA,CAAI;AP9PpG,iBOwQS,YAAA,CPxQO;EAAA,SAAA;EAAA,KAAA;EAAA;AAAA,CAAA,EOwQsC,iBPxQtC,CAAA,EOwQ0D,GAAA,CAAI,OPxQ9D;AAcJ,cO+RCC,OP/RD,EAAA;EAEZ,IAAiB,EAAA,OO8RF,WP9RE;EAgBjB,OAAgB,EAAA,OO+QE,cP/QF;EAAgC,UAAA,EAAA,OOgR3B,iBPhR2B;EAAgC,KAAA,EAAA,OOiRhE,YPjRgE;CAA0B;;;iBQhC1F,0BAAA;;;KAYJ,uBAAA,GAA0B,kBAAkB;UAEvC,uBAAA,SAAgC,KAAA,CAAM;ETZvD,aAAY,CAAA,EAAA,OAAA;;AAAyE,iBS4BrE,wBAAA,CT5BqE,KAAA,ES4BrC,uBT5BqC,EAAA,KAAA,ES4BL,uBT5BK,CAAA,ES4BqB,GAAA,CAAI,OT5BzB;AAAA,cSqCxEC,kBTrCwE,ESqCpD,kBTrCoD,CSqCjC,uBTrCiC,EAAA,OSqCD,wBTrCC,CAAA;;;;;;;;;;;IAAzE,UAAA,cAAA,CAAA,CAAA,CAAA,CAAA;MAA+C,OAAA,CAAA,EAAA,MAAA,GAAA,QAAA,GAAA,MAAA;MAAe,UAAA,CAAA,EAAA,MAAA;IAAW;EAAA;AA0CrF;;;AA1CY,UWIK,eAAA,SAAwB,KAAA,CAAM,qBXJnC,CAAA,KAAA,CAAA,CAAA;EAA+C,WAAA,CAAA,EAAA,YAAA,GAAA,UAAA;;UWQjD,qBAAA,SAA8B,KAAA,CAAM,cXRuC,CAAA,KAAA,CAAA,CAAA;EAAA,kBAAA,CAAA,EAAA,YAAA,GAAA,UAAA;EA0CrF,mBAAY,CAAA,EAAA,MAAA;EAAkC,eAAA,CAAA,EAAA,MAAA;;AACtC,iBWeQ,oBAAA,CXfR,KAAA,EWeoC,qBXfpC,CAAA,EWe4D,GAAA,CAAI,OXfhE;cWmBFI,cXnByE,EWmBzD,kBXnByD,CWmBtC,eXnBsC,EAAA,OWmBd,oBXnBc,CAAA;AADkC,iBW2CjG,qBAAA,CX3CiG,KAAA,EW2CpE,qBX3CoE,CAAA,EW2C5C,GAAA,CAAI,OX3CwC;cW+C3GC,eX/C2G,EW+C1F,kBX/C0F,CW+CvE,KAAA,CAAM,cX/CiE,CAAA,KAAA,CAAA,EAAA,OW+CnC,qBX/CmC,CAAA;iBWuEjG,qBAAA,QAA6B,wBAAwB,GAAA,CAAI;cAInEC,iBAAiB,mBAAmB,KAAA,CAAM,8BAA8B;AVzGlE,iBUgII,uBAAA,CVhIwC,KAAA,EUgIT,qBVhIT,CAAA,EUgIiC,GAAA,CAAI,OVhIrC;AAEtC,cUkIMC,iBVlIW,EUkIQ,kBVlI8B,CUmIrD,KAAA,CAAM,cVnI+C,CAAA,KAAA,CAAA,EAAA,OUoI9C,uBVpI8C,CAAA;AAgBP,iBUyIhC,wBAAA,CVzIgC,KAAA,EUyIA,qBVzIA,CAAA,EUyIwB,GAAA,CAAI,OVzI5B;cU6I1CC,kBV7I0E,EU6ItD,kBV7IsD,CU8I9E,KAAA,CAAM,cV9IwE,CAAA,KAAA,CAAA,EAAA,OU+IvE,wBV/IuE,CAAA;AAA8B,cUsJjG,UVtJiG,EAAA;EAAA,IAAA,EAAA,OUgK/F,cVhK+F;EAY9G,KAAaf,EAAAA,OUqJG,eVrJoE;EAAhC,KAAA,EAAA,OUsJpC,eVtJoC;EAAgC,OAAA,EAAA,OUuJlE,iBVvJkE;EAAnD,QAAA,EAAA,OUwJd,kBVxJc;CAAA;;;KWpC5B,SAAA;UAuBK,gBAAA;;;YAGE;;AZhCZ;UYoCU,mBAAA,CZpCiD;EAAe,QAAA,EYqC9D,SZrC8D;;UYwChE,sBAAA,CZxC2E;EA0CrF,IAAY,CAAA,EYDH,SZCG;EAAkC,UAAA,CAAA,EAAA,MAAA;EAAuC,gBAAA,CAAA,EAAA,MAAA;EAC7D,QAAA,EYCZ,SZDY;;UYId,iBAAA,CZJF;EAAuE,EAAA,CAAA,EAAA,MAAA;EAApB,SAAM,CAAA,EAAA,MAAA;EAD0C,KAAA,CAAM,EYQvG,KAAA,CAAM,aZRiG;EAAA,QAAA,EYSrG,SZTqG;;iBYsBxG,WAAA;;;;;GAAsE,mBAAmB,GAAA,CAAI;iBA8M7F,cAAA;;GAA6B,sBAAsB,GAAA,CAAI;AXhRhE,iBWkSS,iBAAA,CXlSO;EAAA,IAAA;EAAA,UAAA;EAAA,gBAAA;EAAA;AAAA,CAAA,EWuSb,sBXvSa,CAAA,EWuSY,GAAA,CAAI,OXvShB,GAAA,IAAA;AAchB,iBWmSS,YAAA,CXnSG;EAAA,SAAA;EAA4C,KAAA;EAAA;AAAlB,CAAkB,EWmSG,iBXnSrB,CAAA,EWmSyC,GAAA,CAAI,OXnS7C,GAAA,IAAA;AAErB,cWuUJgB,OXvUI,EAAA;EAgBjB,IAAgB,EAAA,OWwTD,WXxTC;EAAgC,OAAA,EAAA,OWyT9B,cXzT8B;EAAgC,UAAA,EAAA,OW0T3D,iBX1T2D;EAA0B,KAAI,EAAA,OW2T9F,YX3T8F;CAAA;;;KY/BlG,UAAA,GAAa,kBACvB,kBAAkB,oBAAoB,mBAAmB;;UAE/C;;;AbFZ;;;;;AA0CA;;;;;;;;;;;canBaC,OAAO,OAAA,CAAM,0BACxB,aAAa,OAAA,CAAM,cAAc;;;AbxBvB,UcIK,iBAAA,SAA0B,KAAA,CAAM,qBdJrC,CAAA,KAAA,CAAA,CAAA;EAA+C,WAAA,CAAA,EAAA,YAAA,GAAA,UAAA;;UcQjD,uBAAA,SAAgC,KAAA,CAAM,cdRqC,CAAA,KAAA,CAAA,CAAA;EAAA,kBAAA,CAAA,EAAA,YAAA,GAAA,UAAA;EA0CrF,YAAY,CAAA,EAAA,OAAA;EAAkC,mBAAA,CAAA,EAAA,MAAA;EAAuC,aAAA,CAAA,EAAA,MAAA;;AACN,iBciB/D,sBAAA,CdjB+D,KAAA,EciBjC,uBdjBiC,CAAA,EciBP,GAAA,CAAI,OdjBG;ccqBzEC,gBdrB2D,EcqBzC,kBdrByC,CcqBtB,iBdrBsB,EAAA,OcqBI,sBdrBJ,CAAA;AADgD,iBc6CjG,uBAAA,Cd7CiG,KAAA,Ec6ClE,uBd7CkE,CAAA,Ec6CxC,GAAA,CAAI,Od7CoC;cciD3GC,mBAAmB,mBACvB,KAAA,CAAM,8BACC;iBAqBO,uBAAA,QAA+B,0BAA0B,GAAA,CAAI;AbpH7E,cawHMC,iBbxHU,EawHS,kBbxHT,CayHd,KAAA,CAAM,cbzHQ,CAAA,KAAA,CAAA,EAAA,Oa0HP,uBb1HO,CAAA;AAgBC,iBa+HD,0BAAA,Cb/HuC,KAAA,Ea+HL,uBb/HK,CAAA,Ea+HqB,GAAA,CAAI,Ob/HzB;AAgBvD,camHMC,oBbnHU,EamHY,kBbnHZ,CaoHd,KAAA,CAAM,cbpHQ,CAAA,KAAA,CAAA,EAAA,OaqHP,0BbrHO,CAAA;AAAgC,ca4HnC,Yb5HmC,EAAA;EAAgC,IAAA,EAAA,OaqIjE,gBbrIiE;EAA0B,KAAI,EAAA,OasI9F,iBbtI8F;EAAA,KAAA,EAAA,OauI9F,iBbvI8F;EAY9G,QAAarB,EAAAA,Oa4HM,oBb5HiE;CAAhC"}

package/dist/index.js

@@ -2,10 +2,10 @@
 
 
 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-B8x0_k2f.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-DBvAU2X3.js";
 import "./icons-BqfV81R8.js";
-import { t as FrostedSkin } from "./frosted-BYwSN7-8.js";
-import { t as MinimalSkin } from "./minimal-CVRiJIWD.js";
+import { t as FrostedSkin } from "./frosted-D2OXDJRV.js";
+import { t as MinimalSkin } from "./minimal-CDaU4avz.js";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { createMediaPlaybackController } from "@videojs/core/media";

package/dist/{minimal-CVRiJIWD.js → minimal-CDaU4avz.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-B8x0_k2f.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-DBvAU2X3.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";
 
@@ -159,4 +159,4 @@ function MinimalSkin({ children, className = "" }) {
 
 //#endregion
 export { MinimalSkin as t };
-//# sourceMappingURL=minimal-CVRiJIWD.js.map
+//# sourceMappingURL=minimal-CDaU4avz.js.map

package/dist/{minimal-CVRiJIWD.js.map → minimal-CDaU4avz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"minimal-CVRiJIWD.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 vjs:rounded-(--minimal-border-radius,0.75rem)',\n    // Base typography\n    'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',\n    // Fancy borders\n    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/15 vjs:after:ring-1 vjs:dark:after:ring-white/15 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    // High contrast mode\n    'vjs:contrast-more:from-black/75',\n    // ------------------------------------\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    // ------------------------------------\n  ),\n  Controls: cn(\n    // ------------------------------------\n    //  FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.\n    'controls',\n    // ------------------------------------\n    'vjs:@container/controls vjs:absolute vjs:inset-x-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    // ------------------------------------\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  ),\n  Icon: cn('icon vjs:[&_path]:transition-transform vjs:[&_path]:ease-out'),\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  PlayIcon: cn('vjs:opacity-0 vjs:group-data-paused/button:opacity-100'),\n  PauseIcon: cn('vjs:group-data-paused/button:opacity-0'),\n  PlayTooltipPopup: cn(\n    'vjs:[&_.pause-tooltip]:inline vjs: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  VolumeHighIcon: cn('vjs:hidden vjs:group-data-[volume-level=high]/button:inline vjs:group-data-[volume-level=medium]/button:inline'),\n  VolumeLowIcon: cn('vjs:hidden vjs:group-data-[volume-level=low]/button:inline'),\n  VolumeOffIcon: cn('vjs:hidden vjs:group-data-[volume-level=off]/button:inline'),\n  FullscreenEnterIcon: cn(\n    'vjs:group-data-fullscreen/button:hidden',\n    'vjs:group-hover/button:[&_.arrow-1]:translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px',\n    'vjs:group-hover/button:[&_.arrow-2]:-translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px',\n  ),\n  FullscreenExitIcon: cn(\n    'vjs:hidden vjs:group-data-fullscreen/button:inline',\n    'vjs:[&_.arrow-1]:translate-x-px vjs:[&_.arrow-1]:-translate-y-px',\n    'vjs:[&_.arrow-2]:-translate-x-px vjs:[&_.arrow-2]:translate-y-px',\n    'vjs:group-hover/button:[&_.arrow-1]:translate-0',\n    'vjs:group-hover/button:[&_.arrow-2]:translate-0',\n  ),\n  FullscreenTooltipPopup: cn(\n    'vjs:[&_.fullscreen-enter-tooltip]:inline vjs:data-fullscreen:[&_.fullscreen-enter-tooltip]:hidden',\n    'vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:data-fullscreen:[&_.fullscreen-exit-tooltip]:inline',\n  ),\n  FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),\n  FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),\n  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('vjs:py-2 vjs:bg-transparent'),\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}`}>\n              <PlayIcon className={`${styles.Icon} ${styles.PlayIcon}`} />\n              <PauseIcon className={`${styles.Icon} ${styles.PauseIcon}`} />\n            </PlayButton>\n          </Tooltip.Trigger>\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.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.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.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}`}>\n                <VolumeHighIcon className={`${styles.Icon} ${styles.VolumeHighIcon}`} />\n                <VolumeLowIcon className={`${styles.Icon} ${styles.VolumeLowIcon}`} />\n                <VolumeOffIcon className={`${styles.Icon} ${styles.VolumeOffIcon}`} />\n              </MuteButton>\n            </Popover.Trigger>\n            <Popover.Positioner side=\"top\" sideOffset={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.Root>\n\n          <Tooltip.Root delay={500} closeDelay={0}>\n            <Tooltip.Trigger>\n              <FullscreenButton className={`${styles.Button} ${styles.IconButton}`}>\n                <FullscreenEnterAltIcon className={`${styles.Icon} ${styles.FullscreenEnterIcon}`} />\n                <FullscreenExitAltIcon className={`${styles.Icon} ${styles.FullscreenExitIcon}`} />\n              </FullscreenButton>\n            </Tooltip.Trigger>\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.Root>\n        </div>\n      </div>\n    </MediaContainer>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"minimal-CDaU4avz.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 vjs:rounded-(--minimal-border-radius,0.75rem)',\n    // Base typography\n    'vjs:font-sans vjs:text-[0.8125rem] vjs:subpixel-antialiased',\n    // Fancy borders\n    'vjs:after:absolute vjs:after:inset-0 vjs:after:ring-black/15 vjs:after:ring-1 vjs:dark:after:ring-white/15 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    // High contrast mode\n    'vjs:contrast-more:from-black/75',\n    // ------------------------------------\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    // ------------------------------------\n  ),\n  Controls: cn(\n    // ------------------------------------\n    //  FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.\n    'controls',\n    // ------------------------------------\n    'vjs:@container/controls vjs:absolute vjs:inset-x-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    // ------------------------------------\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  ),\n  Icon: cn('icon vjs:[&_path]:transition-transform vjs:[&_path]:ease-out'),\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  PlayIcon: cn('vjs:opacity-0 vjs:group-data-paused/button:opacity-100'),\n  PauseIcon: cn('vjs:group-data-paused/button:opacity-0'),\n  PlayTooltipPopup: cn(\n    'vjs:[&_.pause-tooltip]:inline vjs: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  VolumeHighIcon: cn('vjs:hidden vjs:group-data-[volume-level=high]/button:inline vjs:group-data-[volume-level=medium]/button:inline'),\n  VolumeLowIcon: cn('vjs:hidden vjs:group-data-[volume-level=low]/button:inline'),\n  VolumeOffIcon: cn('vjs:hidden vjs:group-data-[volume-level=off]/button:inline'),\n  FullscreenEnterIcon: cn(\n    'vjs:group-data-fullscreen/button:hidden',\n    'vjs:group-hover/button:[&_.arrow-1]:translate-x-px vjs:group-hover/button:[&_.arrow-1]:-translate-y-px',\n    'vjs:group-hover/button:[&_.arrow-2]:-translate-x-px vjs:group-hover/button:[&_.arrow-2]:translate-y-px',\n  ),\n  FullscreenExitIcon: cn(\n    'vjs:hidden vjs:group-data-fullscreen/button:inline',\n    'vjs:[&_.arrow-1]:translate-x-px vjs:[&_.arrow-1]:-translate-y-px',\n    'vjs:[&_.arrow-2]:-translate-x-px vjs:[&_.arrow-2]:translate-y-px',\n    'vjs:group-hover/button:[&_.arrow-1]:translate-0',\n    'vjs:group-hover/button:[&_.arrow-2]:translate-0',\n  ),\n  FullscreenTooltipPopup: cn(\n    'vjs:[&_.fullscreen-enter-tooltip]:inline vjs:data-fullscreen:[&_.fullscreen-enter-tooltip]:hidden',\n    'vjs:[&_.fullscreen-exit-tooltip]:hidden vjs:data-fullscreen:[&_.fullscreen-exit-tooltip]:inline',\n  ),\n  FullscreenEnterTooltip: cn('fullscreen-enter-tooltip'),\n  FullscreenExitTooltip: cn('fullscreen-exit-tooltip'),\n  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('vjs:py-2 vjs:bg-transparent'),\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}`}>\n              <PlayIcon className={`${styles.Icon} ${styles.PlayIcon}`} />\n              <PauseIcon className={`${styles.Icon} ${styles.PauseIcon}`} />\n            </PlayButton>\n          </Tooltip.Trigger>\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.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.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.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}`}>\n                <VolumeHighIcon className={`${styles.Icon} ${styles.VolumeHighIcon}`} />\n                <VolumeLowIcon className={`${styles.Icon} ${styles.VolumeLowIcon}`} />\n                <VolumeOffIcon className={`${styles.Icon} ${styles.VolumeOffIcon}`} />\n              </MuteButton>\n            </Popover.Trigger>\n            <Popover.Positioner side=\"top\" sideOffset={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.Root>\n\n          <Tooltip.Root delay={500} closeDelay={0}>\n            <Tooltip.Trigger>\n              <FullscreenButton className={`${styles.Button} ${styles.IconButton}`}>\n                <FullscreenEnterAltIcon className={`${styles.Icon} ${styles.FullscreenEnterIcon}`} />\n                <FullscreenExitAltIcon className={`${styles.Icon} ${styles.FullscreenExitIcon}`} />\n              </FullscreenButton>\n            </Tooltip.Trigger>\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.Root>\n        </div>\n      </div>\n    </MediaContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/skins/frosted.js

@@ -2,8 +2,8 @@
 
 
 import "../store-hGO5HE2A.js";
-import "../VolumeSlider-B8x0_k2f.js";
+import "../VolumeSlider-DBvAU2X3.js";
 import "../icons-BqfV81R8.js";
-import { t as FrostedSkin } from "../frosted-BYwSN7-8.js";
+import { t as FrostedSkin } from "../frosted-D2OXDJRV.js";
 
 export { FrostedSkin };

package/dist/skins/minimal.js

@@ -2,8 +2,8 @@
 
 
 import "../store-hGO5HE2A.js";
-import "../VolumeSlider-B8x0_k2f.js";
+import "../VolumeSlider-DBvAU2X3.js";
 import "../icons-BqfV81R8.js";
-import { t as MinimalSkin } from "../minimal-CVRiJIWD.js";
+import { t as MinimalSkin } from "../minimal-CDaU4avz.js";
 
 export { MinimalSkin };

package/package.json

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

package/dist/VolumeSlider-B8x0_k2f.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VolumeSlider-B8x0_k2f.js","names":["Context","CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>","DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>","baseProps: Record<string, any>","FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>","React","MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement>>>","baseProps: Record<string, any>","MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton>","baseProps: Record<string, any>","PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton>","value: PopoverContextType","Popover: {\n  Root: typeof PopoverRoot;\n  Trigger: typeof PopoverTrigger;\n  Positioner: typeof PopoverPositioner;\n  Popup: typeof PopoverPopup;\n}","PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>","CoreTimeSlider","TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot>","TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack>","TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb>","TimeSliderPointer: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderPointer\n>","TimeSliderProgress: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderProgress\n>","TimeSlider","sideOffset","collisionPadding","value: TooltipContextType","Tooltip: {\n  Root: typeof TooltipRoot;\n  Trigger: typeof TooltipTrigger;\n  Positioner: typeof TooltipPositioner;\n  Popup: typeof TooltipPopup;\n}","CoreVolumeSlider","VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot>","VolumeSliderTrack: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderTrack\n>","VolumeSliderThumb: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderThumb\n>","VolumeSliderProgress: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderProgress\n>","VolumeSlider"],"sources":["../src/utils/component-factory.tsx","../src/components/CurrentTimeDisplay.tsx","../src/components/DurationDisplay.tsx","../src/components/FullscreenButton.tsx","../src/utils/use-composed-refs.ts","../src/components/MediaContainer.tsx","../src/components/MuteButton.tsx","../src/components/PlayButton.tsx","../src/components/Popover.tsx","../src/components/PreviewTimeDisplay.tsx","../src/components/TimeSlider.tsx","../src/components/Tooltip.tsx","../src/components/VolumeSlider.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';\n\nexport type StateHookFn<TProps = any, TState = any> = (props: TProps) => TState;\n\nexport type PropsHookFn<TProps = any, TState = any, TResultProps = any> = (\n  props: TProps,\n  state: TState\n) => TResultProps;\n\nexport type RenderFn<TProps = any, TState = any> = (props: TProps, state: TState) => ReactElement;\n\nconst Context = createContext<any>(null);\n\n/**\n * Generic factory function to create connected components following the hooks pattern\n * inspired by Adobe React Spectrum and Base UI architectures.\n *\n * @param useStateHook - Hook that provides component state\n * @param usePropsHook - Hook that enhances props with state-derived values\n * @param defaultRender - Default render function for the component\n * @param displayName - Display name for React DevTools\n * @returns Connected component with customizable render prop\n */\nexport function toConnectedComponent<\n  TProps extends Record<string, any>,\n  TState,\n  TResultProps extends Record<string, any>,\n  TRenderFn extends RenderFn<TResultProps, TState>,\n>(\n  useStateHook: StateHookFn<TProps, TState>,\n  usePropsHook: PropsHookFn<TProps, TState, TResultProps>,\n  defaultRender: TRenderFn,\n  displayName: string,\n): ConnectedComponent<TProps, TRenderFn> {\n  const ConnectedComponent = forwardRef<HTMLElement, TProps & { render?: TRenderFn }>(\n    ({ render = defaultRender, ...props }, ref) => {\n      const propsWithRef = ref ? { ...props, ref } : props;\n      const connectedState = useStateHook(propsWithRef as unknown as TProps);\n      const connectedProps = usePropsHook(propsWithRef as unknown as TProps, connectedState);\n      return <Context.Provider value={connectedState}>{render(connectedProps, connectedState)}</Context.Provider>;\n    },\n  );\n\n  ConnectedComponent.displayName = displayName;\n\n  return ConnectedComponent;\n}\n\n/**\n * Type helper to infer the component type from the factory\n */\nexport type ConnectedComponent<TProps extends Record<string, any>, TRenderFn extends RenderFn<any, any>> = React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<TProps & { render?: TRenderFn }> & React.RefAttributes<HTMLElement>\n>;\n\n/**\n * Factory function to create context-based components that don't use toConnectedComponent\n * These components rely on context provided by a parent component.\n *\n * @param usePropsHook - Hook that enhances props with context-derived values\n * @param defaultRender - Default render function for the component\n * @param displayName - Display name for React DevTools\n * @returns Context-based component with customizable render prop\n */\nexport function toContextComponent<\n  TProps extends Record<string, any>,\n  TResultProps extends Record<string, any>,\n  TRenderFn extends (props: TResultProps, context: any) => ReactElement,\n>(\n  usePropsHook: (props: TProps, context: any) => TResultProps,\n  defaultRender: TRenderFn,\n  displayName: string,\n): ContextComponent<TProps, TRenderFn> {\n  const ContextComponent = forwardRef<HTMLElement, TProps & { render?: TRenderFn }>(\n    ({ render = defaultRender, ...props }, ref) => {\n      const context = useContext(Context);\n      const propsWithRef = ref ? { ...props, ref } : props;\n      const contextProps = usePropsHook(propsWithRef as unknown as TProps, context);\n      return render(contextProps, context);\n    },\n  );\n\n  ContextComponent.displayName = displayName;\n\n  return ContextComponent;\n}\n\n/**\n * Type helper to infer the context component type from the factory\n */\nexport type ContextComponent<\n  TProps extends Record<string, any>,\n  TRenderFn extends (props: any, context: any) => ReactElement,\n> = React.ForwardRefExoticComponent<\n  React.PropsWithoutRef<TProps & { render?: TRenderFn }> & React.RefAttributes<any>\n>;\n\n/**\n * Hook that manages a CoreClass instance and triggers re-renders when state changes.\n * Uses useSyncExternalStore for optimal performance with external state subscriptions.\n */\nexport function useCore<\n  T extends {\n    subscribe: (callback: (state: any) => void) => () => void;\n    getState: () => any;\n    setState: (state: any) => void;\n  },\n>(CoreClass: new () => T, state: any): T {\n  const coreRef = useRef<T | null>(null);\n  const snapshotRef = useRef<any>(null);\n\n  // Initialize the core instance\n  if (!coreRef.current) {\n    coreRef.current = new CoreClass();\n    snapshotRef.current = coreRef.current.getState();\n  }\n\n  useEffect(() => {\n    coreRef.current?.setState(state);\n  }, [...Object.values(state)]);\n\n  // Use useSyncExternalStore to subscribe to state changes\n  useSyncExternalStore(\n    useCallback((onStoreChange) => {\n      if (!coreRef.current) return () => {};\n      return coreRef.current.subscribe((newState) => {\n        snapshotRef.current = newState;\n        onStoreChange();\n      });\n    }, []),\n    useCallback(() => {\n      return snapshotRef.current;\n    }, []),\n    () => null, // server snapshot\n  );\n\n  return coreRef.current;\n}\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { currentTimeDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useCurrentTimeDisplayState(_props: any): {\n  currentTime: number;\n  duration: number;\n} {\n  /** @TODO Fix type issues with hooks (CJP) */\n  const mediaState = useMediaSelector(currentTimeDisplayStateDefinition.stateTransform, shallowEqual);\n\n  // Current time display is read-only, no request methods needed\n  return {\n    currentTime: mediaState.currentTime ?? 0,\n    duration: mediaState.duration ?? 0,\n  };\n}\n\nexport type CurrentTimeDisplayState = ReturnType<typeof useCurrentTimeDisplayState>;\n\nexport interface CurrentTimeDisplayProps extends React.ComponentProps<'span'> {\n  showRemaining?: boolean;\n}\n\nexport function useCurrentTimeDisplayProps(\n  props: PropsWithChildren,\n  _state: ReturnType<typeof useCurrentTimeDisplayState>,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  return baseProps;\n}\n\nexport function renderCurrentTimeDisplay(props: CurrentTimeDisplayProps, state: CurrentTimeDisplayState): JSX.Element {\n  const { showRemaining, ...restProps } = props;\n\n  /** @TODO Should this live here or elsewhere? (CJP) */\n  const timeLabel\n    = showRemaining && state.duration != null && state.currentTime != null\n      ? formatDisplayTime(-(state.duration - state.currentTime))\n      : formatDisplayTime(state.currentTime);\n\n  return <span {...restProps}>{timeLabel}</span>;\n}\n\nexport const CurrentTimeDisplay: ConnectedComponent<CurrentTimeDisplayProps, typeof renderCurrentTimeDisplay>\n  = toConnectedComponent(\n    useCurrentTimeDisplayState,\n    useCurrentTimeDisplayProps,\n    renderCurrentTimeDisplay,\n    'CurrentTimeDisplay',\n  );\n\nexport default CurrentTimeDisplay;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { durationDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useDurationDisplayState(_props: any): {\n  duration: number;\n} {\n  /** @TODO Fix type issues with hooks (CJP) */\n  const mediaState = useMediaSelector(durationDisplayStateDefinition.stateTransform, shallowEqual);\n\n  // Duration display is read-only, no request methods needed\n  return {\n    duration: mediaState.duration ?? 0,\n  };\n}\n\nexport type useDurationDisplayState = typeof useDurationDisplayState;\nexport type DurationDisplayState = ReturnType<useDurationDisplayState>;\n\nexport function useDurationDisplayProps(props: PropsWithChildren): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  return baseProps;\n}\n\nexport type useDurationDisplayProps = typeof useDurationDisplayProps;\ntype DurationDisplayProps = ReturnType<useDurationDisplayProps>;\n\nexport function renderDurationDisplay(props: DurationDisplayProps, state: DurationDisplayState): JSX.Element {\n  return <span {...props}>{formatDisplayTime(state.duration)}</span>;\n}\n\nexport type renderDurationDisplay = typeof renderDurationDisplay;\n\nexport const DurationDisplay: ConnectedComponent<DurationDisplayProps, typeof renderDurationDisplay>\n  = toConnectedComponent(useDurationDisplayState, useDurationDisplayProps, renderDurationDisplay, 'DurationDisplay');\n\nexport default DurationDisplay;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { fullscreenButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useFullscreenButtonState(_props: any): {\n  fullscreen: boolean;\n  requestEnterFullscreen: () => void;\n  requestExitFullscreen: () => void;\n} {\n  const mediaStore = useMediaStore();\n  const mediaState = useMediaSelector(fullscreenButtonStateDefinition.stateTransform, shallowEqual);\n  const methods = useMemo(\n    () => fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch),\n    [mediaStore],\n  );\n\n  return {\n    fullscreen: mediaState.fullscreen,\n    requestEnterFullscreen: methods.requestEnterFullscreen,\n    requestExitFullscreen: methods.requestExitFullscreen,\n  } as const;\n}\n\nexport type FullscreenButtonState = ReturnType<typeof useFullscreenButtonState>;\n\nexport function getFullscreenButtonProps(\n  props: PropsWithChildren,\n  state: FullscreenButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    'aria-label': state.fullscreen ? 'exit fullscreen' : 'enter fullscreen',\n    /** tooltip */\n    'data-tooltip': state.fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen',\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  // Handle boolean data attribute: present with empty string when true, absent when false\n  if (state.fullscreen) {\n    baseProps['data-fullscreen'] = '';\n  }\n\n  return baseProps;\n}\n\nexport type FullscreenButtonProps = ReturnType<typeof getFullscreenButtonProps>;\n\nexport function renderFullscreenButton(props: FullscreenButtonProps, state: FullscreenButtonState): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      onClick={() => {\n        if (props.disabled) return;\n        if (state.fullscreen) {\n          state.requestExitFullscreen();\n        } else {\n          state.requestEnterFullscreen();\n        }\n      }}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nexport const FullscreenButton: ConnectedComponent<FullscreenButtonProps, typeof renderFullscreenButton>\n  = toConnectedComponent(useFullscreenButtonState, getFullscreenButtonProps, renderFullscreenButton, 'FullscreenButton');\n\nexport default FullscreenButton;\n","import * as React from 'react';\n\ntype PossibleRef<T> = React.Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nfunction setRef<T>(ref: PossibleRef<T>, value: T): (() => void) | void | undefined {\n  if (typeof ref === 'function') {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    (ref as React.MutableRefObject<T>).current = value;\n  }\n}\n\n/**\n * A utility to compose multiple refs together\n * Accepts callback refs and RefObject(s)\n */\nfunction composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  return (node) => {\n    let hasCleanup = false;\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node);\n      if (!hasCleanup && typeof cleanup == 'function') {\n        hasCleanup = true;\n      }\n      return cleanup;\n    });\n\n    // React <19 will log an error to the console if a callback ref returns a\n    // value. We don't use ref cleanups internally so this will only happen if a\n    // user's ref callback returns a value, which we only expect if they are\n    // using the cleanup functionality added in React 19.\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (typeof cleanup == 'function') {\n            cleanup();\n          } else {\n            setRef(refs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * A custom hook that composes multiple refs\n * Accepts callback refs and RefObject(s)\n */\nfunction useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return React.useCallback(composeRefs(...refs), refs);\n}\n\nexport { composeRefs, useComposedRefs };\n","import type { FC, HTMLProps, PropsWithChildren, RefCallback } from 'react';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { forwardRef, useCallback, useMemo } from 'react';\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\n/**\n * Hook to associate a React element as the fullscreen container for the media store.\n * This is equivalent to Media Chrome's useMediaFullscreenRef but for VJS-10.\n *\n * The ref callback will register the element as the container state owner\n * in the media store, enabling fullscreen functionality.\n *\n * @example\n * import { useMediaContainerRef } from '@videojs/react';\n *\n * const PlayerContainer = ({ children }) => {\n *   const containerRef = useMediaContainerRef();\n *   return <div ref={containerRef}>{children}</div>;\n * };\n */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useMediaContainerRef(): RefCallback<HTMLElement | null> {\n  const mediaStore = useMediaStore();\n\n  return useCallback(\n    (containerElement: HTMLElement | null) => {\n      if (!mediaStore) return;\n\n      // Register or unregister the container element as the container state owner\n      mediaStore.dispatch({\n        type: 'containerstateownerchangerequest',\n        detail: containerElement,\n      });\n    },\n    [mediaStore],\n  );\n}\n\n/**\n * MediaContainer component that automatically registers itself as the fullscreen container.\n * This provides a simple wrapper component for fullscreen functionality.\n *\n * @example\n * import { MediaContainer } from '@videojs/react';\n *\n * const MyPlayer = () => (\n *   <MediaContainer>\n *     <video src=\"video.mp4\" />\n *     <div>Controls here</div>\n *   </MediaContainer>\n * );\n */\nexport const MediaContainer: FC<PropsWithChildren<HTMLProps<HTMLDivElement>>> = forwardRef(\n  ({ children, ...props }, ref) => {\n    const containerRef = useMediaContainerRef();\n    const composedRef = useComposedRefs(ref, containerRef);\n\n    const mediaStore = useMediaStore();\n    const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);\n    const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n    const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {\n      if (!['video', 'audio'].includes((event.target as HTMLElement).localName || '')) return;\n\n      if (mediaState.paused) {\n        methods.requestPlay();\n      } else {\n        methods.requestPause();\n      }\n    }, [mediaState.paused, methods]);\n\n    return (\n      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n      <div\n        ref={composedRef}\n        onClick={handleClick}\n        data-media-container\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { muteButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function useMuteButtonState(_props: any): {\n  volumeLevel: string;\n  muted: boolean;\n  requestMute: () => void;\n  requestUnmute: () => void;\n} {\n  const mediaStore = useMediaStore();\n  const mediaState = useMediaSelector(muteButtonStateDefinition.stateTransform, shallowEqual);\n  const methods = useMemo(() => muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n  return {\n    volumeLevel: mediaState.volumeLevel,\n    muted: mediaState.muted,\n    requestMute: methods.requestMute,\n    requestUnmute: methods.requestUnmute,\n  } as const;\n}\n\nexport type MuteButtonState = ReturnType<typeof useMuteButtonState>;\n\nexport function getMuteButtonProps(\n  props: PropsWithChildren,\n  state: MuteButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** data attributes/props - non-boolean */\n    'data-volume-level': state.volumeLevel,\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    'aria-label': state.muted ? 'unmute' : 'mute',\n    /** tooltip */\n    'data-tooltip': state.muted ? 'Unmute' : 'Mute',\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  // Handle boolean data attribute: present with empty string when true, absent when false\n  if (state.muted) {\n    baseProps['data-muted'] = '';\n  }\n\n  return baseProps;\n}\n\nexport type MuteButtonProps = ReturnType<typeof getMuteButtonProps>;\n\nexport function renderMuteButton(props: MuteButtonProps, state: MuteButtonState): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      onClick={() => {\n        if (props.disabled) return;\n        if (state.volumeLevel === 'off') {\n          state.requestUnmute();\n        } else {\n          state.requestMute();\n        }\n      }}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nexport const MuteButton: ConnectedComponent<MuteButtonProps, typeof renderMuteButton> = toConnectedComponent(\n  useMuteButtonState,\n  getMuteButtonProps,\n  renderMuteButton,\n  'MuteButton',\n);\n\nexport default MuteButton;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { playButtonStateDefinition } from '@videojs/core/store';\n\nimport { shallowEqual } from '@videojs/utils';\nimport { useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function usePlayButtonState(_props: any): {\n  paused: boolean;\n  requestPlay: () => void;\n  requestPause: () => void;\n} {\n  const mediaStore = useMediaStore();\n  const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);\n  const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n\n  return {\n    paused: mediaState.paused,\n    requestPlay: methods.requestPlay,\n    requestPause: methods.requestPause,\n  };\n}\n\nexport type PlayButtonState = ReturnType<typeof usePlayButtonState>;\n\nexport function getPlayButtonProps(\n  props: Record<string, unknown>,\n  state: PlayButtonState,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** @TODO Need another state provider in core for i18n (CJP) */\n    /** aria attributes/props */\n    role: 'button',\n    'aria-label': state.paused ? 'play' : 'pause',\n    /** tooltip */\n    'data-tooltip': state.paused ? 'Play' : 'Pause',\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  // Handle boolean data attribute: present with empty string when true, absent when false\n  if (state.paused) {\n    baseProps['data-paused'] = '';\n  }\n\n  return baseProps;\n}\n\nexport type PlayButtonProps = ReturnType<typeof getPlayButtonProps>;\n\nexport function renderPlayButton(props: PlayButtonProps, state: PlayButtonState): JSX.Element {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      onClick={() => {\n        if (props.disabled) return;\n        if (state.paused) {\n          state.requestPlay();\n        } else {\n          state.requestPause();\n        }\n      }}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nexport const PlayButton: ConnectedComponent<PlayButtonProps, typeof renderPlayButton> = toConnectedComponent(\n  usePlayButtonState,\n  getPlayButtonProps,\n  renderPlayButton,\n  'PlayButton',\n);\n\nexport default PlayButton;\n","import type { ReactNode } from 'react';\n\nimport { contains, safePolygon } from '@videojs/utils/dom';\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\ntype Placement = 'top' | 'top-start' | 'top-end';\n\ntype TransitionStatus = 'initial' | 'open' | 'close' | 'unmounted';\n\ninterface PopoverContextType {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  popupRef: React.RefObject<HTMLElement | null>;\n  triggerRef: React.RefObject<HTMLElement | null>;\n  updatePositioning: (placement: Placement, sideOffset: number) => void;\n  transitionStatus: TransitionStatus;\n  placement: Placement;\n  sideOffset: number;\n}\n\ninterface PopoverRootProps {\n  openOnHover?: boolean;\n  delay?: number;\n  closeDelay?: number;\n  children: ReactNode;\n}\n\ninterface PopoverTriggerProps {\n  children: ReactNode;\n}\n\ninterface PopoverPositionerProps {\n  side?: Placement;\n  sideOffset?: number;\n  children: ReactNode;\n}\n\ninterface PopoverPopupProps {\n  id?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst PopoverContext = createContext<PopoverContextType | null>(null);\n\nfunction usePopoverContext(): PopoverContextType {\n  const context = useContext(PopoverContext);\n  if (!context) {\n    throw new Error('Popover components must be used within PopoverRoot');\n  }\n  return context;\n}\n\nfunction PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children }: PopoverRootProps): JSX.Element {\n  const [open, setOpen] = useState(false);\n  const [placement, setPlacement] = useState<Placement>('top');\n  const [sideOffset, setSideOffset] = useState(5);\n  const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>('initial');\n  const popupRef = useRef<HTMLElement | null>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pointerMoveHandlerRef = useRef<((event: MouseEvent) => void) | null>(null);\n\n  const clearHoverTimeout = useCallback(() => {\n    if (hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  const setOpenState = useCallback((newOpen: boolean) => {\n    if (open === newOpen) return;\n\n    setOpen(newOpen);\n\n    if (newOpen) {\n      setTransitionStatus('initial');\n      if (popupRef.current) {\n        popupRef.current.showPopover();\n      }\n      requestAnimationFrame(() => {\n        setTransitionStatus('open');\n      });\n    } else {\n      setTransitionStatus('close');\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (!popupRef.current || open) return;\n\n    const transitions = popupRef.current.getAnimations().filter(anim => anim instanceof CSSTransition);\n    if (transitions.length > 0) {\n      Promise.all(transitions.map(t => t.finished))\n        .then(() => popupRef.current?.hidePopover())\n        .catch(() => popupRef.current?.hidePopover());\n    } else {\n      popupRef.current.hidePopover();\n    }\n  }, [open, transitionStatus]);\n\n  const updatePositioning = useCallback((newPlacement: Placement, newSideOffset: number) => {\n    setPlacement(newPlacement);\n    setSideOffset(newSideOffset);\n  }, []);\n\n  useEffect(() => {\n    const trigger = triggerRef.current;\n    const popup = popupRef.current;\n    if (!trigger || !popup) return;\n\n    const abortController = new AbortController();\n    const { signal } = abortController;\n\n    const addPointerMoveListener = () => {\n      if (!globalThis.matchMedia?.('(hover: hover)')?.matches) return;\n\n      if (!pointerMoveHandlerRef.current) {\n        pointerMoveHandlerRef.current = safePolygon({ blockPointerEvents: true })({\n          placement,\n          elements: {\n            domReference: trigger,\n            floating: popup,\n          },\n          x: 0,\n          y: 0,\n          onClose: () => {\n            if (pointerMoveHandlerRef.current) {\n              document.documentElement.removeEventListener('pointermove', pointerMoveHandlerRef.current);\n            }\n            clearHoverTimeout();\n\n            hoverTimeoutRef.current = setTimeout(() => {\n              setOpenState(false);\n            }, closeDelay);\n          },\n        });\n      }\n\n      // Event listener is automatically removed when AbortController is aborted\n      document.documentElement.addEventListener('pointermove', pointerMoveHandlerRef.current, { signal });\n    };\n\n    const handlePointerEnter = (event: PointerEvent) => {\n      if (!openOnHover) return;\n\n      clearHoverTimeout();\n\n      if (event.currentTarget === popup) {\n        addPointerMoveListener();\n      }\n\n      if (open) {\n        return;\n      }\n\n      hoverTimeoutRef.current = setTimeout(() => {\n        setOpenState(true);\n      }, delay);\n    };\n\n    const handlePointerLeave = () => {\n      if (!openOnHover) return;\n      addPointerMoveListener();\n    };\n\n    if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n      // Event listeners are automatically removed when AbortController is aborted\n      trigger.addEventListener('pointerenter', handlePointerEnter, { signal });\n      trigger.addEventListener('pointerleave', handlePointerLeave, { signal });\n      popup.addEventListener('pointerenter', handlePointerEnter, { signal });\n    }\n\n    const handleFocusIn = () => {\n      setOpenState(true);\n    };\n\n    const handleFocusOut = (event: FocusEvent) => {\n      const relatedTarget = event.relatedTarget as HTMLElement;\n      if (relatedTarget && popup && contains(popup, relatedTarget)) return;\n      setOpenState(false);\n    };\n\n    // Event listeners are automatically removed when AbortController is aborted\n    trigger.addEventListener('focusin', handleFocusIn, { signal });\n    trigger.addEventListener('focusout', handleFocusOut, { signal });\n    popup.addEventListener('focusout', handleFocusOut, { signal });\n\n    return () => {\n      abortController.abort();\n      clearHoverTimeout();\n\n      if (pointerMoveHandlerRef.current) {\n        document.documentElement.removeEventListener('pointermove', pointerMoveHandlerRef.current);\n      }\n\n      pointerMoveHandlerRef.current = null;\n    };\n  }, [openOnHover, delay, closeDelay, open, placement, setOpenState, clearHoverTimeout]);\n\n  useEffect(() => {\n    if (!popupRef.current || !triggerRef.current) return;\n\n    const popup = popupRef.current;\n    const popupId = popup.id;\n    if (popupId) {\n      popup.style.setProperty('position-anchor', `--${popupId}`);\n    }\n\n    const [side, alignment] = placement.split('-');\n    popup.style.setProperty('top', `calc(anchor(${side}) - ${sideOffset}px)`);\n    popup.style.setProperty('translate', `0 -100%`);\n    popup.style.setProperty('justify-self', alignment === 'start'\n      ? 'anchor-start'\n      : alignment === 'end'\n        ? 'anchor-end'\n        : 'anchor-center');\n  }, [placement, sideOffset]);\n\n  const value: PopoverContextType = useMemo(() => ({\n    open,\n    setOpen: setOpenState,\n    popupRef,\n    triggerRef,\n    updatePositioning,\n    transitionStatus,\n    placement,\n    sideOffset,\n  }), [open, setOpenState, updatePositioning, transitionStatus, placement, sideOffset]);\n\n  return <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>;\n}\n\nfunction PopoverTrigger({ children }: PopoverTriggerProps): JSX.Element {\n  const { triggerRef, open } = usePopoverContext();\n\n  // eslint-disable-next-line react/no-clone-element, react/no-children-only\n  return cloneElement(Children.only(children) as JSX.Element, {\n    ref: triggerRef,\n    'data-popup-open': open ? '' : undefined,\n  });\n}\n\nfunction PopoverPositioner({ side = 'top', sideOffset = 5, children }: PopoverPositionerProps): JSX.Element | null {\n  const { updatePositioning } = usePopoverContext();\n\n  useEffect(() => {\n    updatePositioning(side, sideOffset);\n  }, [side, sideOffset, updatePositioning]);\n\n  return <>{children}</>;\n}\n\nfunction PopoverPopup({ id, className, children }: PopoverPopupProps): JSX.Element {\n  const { popupRef, triggerRef, transitionStatus, placement } = usePopoverContext();\n  const triggerElement = triggerRef.current;\n\n  const popupId = useMemo(() => id ?? `popover-${Math.random().toString(36).substring(2, 9)}`, [id]);\n\n  useEffect(() => {\n    if (!popupRef.current || !triggerRef.current) return;\n\n    const popup = popupRef.current;\n    const trigger = triggerRef.current;\n\n    popup.setAttribute('popover', 'manual');\n    trigger.setAttribute('commandfor', popupId);\n    trigger.style.setProperty('anchor-name', `--${popupId}`);\n  }, [popupId, popupRef, triggerRef]);\n\n  // Copy data attributes from trigger element\n  const dataAttributes = useMemo(() => {\n    if (!triggerElement?.attributes) return {};\n    return Object.fromEntries(\n      Array.from(triggerElement.attributes)\n        .filter(attr => attr.name.startsWith('data-'))\n        .map(attr => [attr.name, attr.value]),\n    );\n  }, [triggerElement]);\n\n  return (\n    <div\n      ref={popupRef as React.RefObject<HTMLDivElement>}\n      id={popupId}\n      className={className}\n      {...dataAttributes}\n      data-side={placement}\n      data-starting-style={transitionStatus === 'initial' ? '' : undefined}\n      data-open={transitionStatus === 'initial' || transitionStatus === 'open' ? '' : undefined}\n      data-ending-style={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n      data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const Popover: {\n  Root: typeof PopoverRoot;\n  Trigger: typeof PopoverTrigger;\n  Positioner: typeof PopoverPositioner;\n  Popup: typeof PopoverPopup;\n} = {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Positioner: PopoverPositioner,\n  Popup: PopoverPopup,\n};\n\nexport default Popover;\n","import type { PropsWithChildren } from 'react';\nimport type { ConnectedComponent } from '../utils/component-factory';\n\nimport { previewTimeDisplayStateDefinition } from '@videojs/core/store';\nimport { formatDisplayTime, shallowEqual } from '@videojs/utils';\n\nimport { useMediaSelector } from '@/store';\nimport { toConnectedComponent } from '../utils/component-factory';\n\nexport function usePreviewTimeDisplayState(_props: any): {\n  previewTime: number;\n} {\n  /** @TODO Fix type issues with hooks (CJP) */\n  const mediaState = useMediaSelector(previewTimeDisplayStateDefinition.stateTransform, shallowEqual);\n\n  // Preview time display is read-only, no request methods needed\n  return {\n    previewTime: mediaState.previewTime ?? 0,\n  };\n}\n\nexport type PreviewTimeDisplayState = ReturnType<typeof usePreviewTimeDisplayState>;\n\nexport interface PreviewTimeDisplayProps extends React.ComponentProps<'span'> {\n  showRemaining?: boolean;\n}\n\nexport function getPreviewTimeDisplayProps(\n  props: PropsWithChildren,\n  _state: ReturnType<typeof usePreviewTimeDisplayState>,\n): PropsWithChildren<Record<string, unknown>> {\n  const baseProps: Record<string, any> = {\n    /** external props spread last to allow for overriding */\n    ...props,\n  };\n\n  return baseProps;\n}\n\nexport function renderPreviewTimeDisplay(props: PreviewTimeDisplayProps, state: PreviewTimeDisplayState): JSX.Element {\n  const { showRemaining, ...restProps } = props;\n\n  /** @TODO Should this live here or elsewhere? (CJP) */\n  const timeLabel = formatDisplayTime(state.previewTime);\n\n  return <span {...restProps}>{timeLabel}</span>;\n}\n\nexport const PreviewTimeDisplay: ConnectedComponent<PreviewTimeDisplayProps, typeof renderPreviewTimeDisplay>\n  = toConnectedComponent(\n    usePreviewTimeDisplayState,\n    getPreviewTimeDisplayProps,\n    renderPreviewTimeDisplay,\n    'PreviewTimeDisplay',\n  );\n\nexport default PreviewTimeDisplay;\n","import type { ConnectedComponent } from '../utils/component-factory';\n\nimport { TimeSlider as CoreTimeSlider } from '@videojs/core';\n\nimport { timeSliderStateDefinition } from '@videojs/core/store';\nimport { shallowEqual } from '@videojs/utils';\nimport { useCallback, useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';\nimport { useComposedRefs } from '../utils/use-composed-refs';\n\nexport interface TimeSliderState {\n  currentTime: number;\n  duration: number;\n  requestSeek: (time: number) => void;\n  core: CoreTimeSlider;\n  orientation: 'horizontal' | 'vertical';\n}\n\nexport interface TimeSliderProps extends React.ComponentPropsWithRef<'div'> {\n  orientation?: 'horizontal' | 'vertical';\n}\n\ninterface TimeSliderRenderProps extends React.ComponentProps<'div'> {\n  'data-orientation'?: 'horizontal' | 'vertical';\n  'data-current-time'?: number;\n  'data-duration'?: number;\n}\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\nexport function useTimeSliderRootState(props: TimeSliderProps): TimeSliderState {\n  const { orientation = 'horizontal' } = props;\n  const mediaStore = useMediaStore();\n  const mediaState = useMediaSelector(timeSliderStateDefinition.stateTransform, shallowEqual);\n  const mediaMethods = useMemo(() => timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);\n  const core = useCore(CoreTimeSlider, { ...mediaState, ...mediaMethods });\n\n  return {\n    ...mediaState,\n    ...mediaMethods,\n    orientation,\n    core,\n  };\n}\n\nexport function useTimeSliderRootProps(props: TimeSliderProps, state: TimeSliderState): TimeSliderRenderProps {\n  const { _fillWidth, _pointerWidth, _currentTimeText, _durationText } = state.core.getState();\n\n  const { children, className, id, style, orientation = 'horizontal', ref } = props;\n\n  const internalRef = useCallback((el: HTMLDivElement) => {\n    if (!el) return;\n    state.core?.attach(el);\n  }, [state.core]);\n\n  const composedRef = useComposedRefs(ref, internalRef);\n\n  return {\n    ref: composedRef,\n    id,\n    role: 'slider',\n    tabIndex: 0,\n    'aria-label': 'Seek',\n    'aria-valuemin': 0,\n    'aria-valuemax': Math.round(state.duration),\n    'aria-valuenow': Math.round(state.currentTime),\n    'aria-valuetext': `${_currentTimeText} of ${_durationText}`,\n    'aria-orientation': orientation,\n    'data-orientation': orientation,\n    'data-current-time': state.currentTime,\n    'data-duration': state.duration,\n    className,\n    style: {\n      ...style,\n      '--slider-fill': `${_fillWidth.toFixed(3)}%`,\n      '--slider-pointer': `${(_pointerWidth * 100).toFixed(3)}%`,\n    } as React.CSSProperties,\n    children,\n  };\n}\n\nexport function renderTimeSliderRoot(props: TimeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst TimeSliderRoot: ConnectedComponent<TimeSliderProps, typeof renderTimeSliderRoot> = toConnectedComponent(\n  useTimeSliderRootState,\n  useTimeSliderRootProps,\n  renderTimeSliderRoot,\n  'TimeSlider.Root',\n);\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport function useTimeSliderTrackProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n  return {\n    ref: useCallback((el: HTMLDivElement) => {\n      context.core?.setState({ _trackElement: el });\n    }, [context.core]),\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',\n    },\n  };\n}\n\nexport function renderTimeSliderTrack(props: TimeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst TimeSliderTrack: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderTrack> = toContextComponent(\n  useTimeSliderTrackProps,\n  renderTimeSliderTrack,\n  'TimeSlider.Track',\n);\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport function getTimeSliderThumbProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n  return {\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',\n      [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',\n      translate: context.orientation === 'horizontal' ? '-50% -50%' : '-50% 50%',\n      position: 'absolute' as const,\n    },\n  };\n}\n\nexport function renderTimeSliderThumb(props: TimeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst TimeSliderThumb: ConnectedComponent<React.ComponentProps<'div'>, typeof renderTimeSliderThumb> = toContextComponent(\n  getTimeSliderThumbProps,\n  renderTimeSliderThumb,\n  'TimeSlider.Thumb',\n);\n\n// ============================================================================\n// POINTER COMPONENT\n// ============================================================================\n\nexport function getTimeSliderPointerProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n  return {\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-pointer, 0%)',\n      [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n      position: 'absolute' as const,\n    },\n  };\n}\n\nexport function renderTimeSliderPointer(props: TimeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst TimeSliderPointer: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderPointer\n> = toContextComponent(getTimeSliderPointerProps, renderTimeSliderPointer, 'TimeSlider.Pointer');\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport function getTimeSliderProgressProps(props: React.ComponentProps<'div'>, context: TimeSliderState): TimeSliderRenderProps {\n  return {\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',\n      [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n      [context.orientation === 'horizontal' ? 'top' : 'bottom']: '0',\n      position: 'absolute' as const,\n    },\n  };\n}\n\nexport function renderTimeSliderProgress(props: TimeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst TimeSliderProgress: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderTimeSliderProgress\n> = toContextComponent(getTimeSliderProgressProps, renderTimeSliderProgress, 'TimeSlider.Progress');\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const TimeSlider = Object.assign(\n  {},\n  {\n    Root: TimeSliderRoot,\n    Track: TimeSliderTrack,\n    Thumb: TimeSliderThumb,\n    Pointer: TimeSliderPointer,\n    Progress: TimeSliderProgress,\n  },\n) as {\n  Root: typeof TimeSliderRoot;\n  Track: typeof TimeSliderTrack;\n  Thumb: typeof TimeSliderThumb;\n  Pointer: typeof TimeSliderPointer;\n  Progress: typeof TimeSliderProgress;\n};\n\nexport default TimeSlider;\n","import type { ReactNode, RefObject } from 'react';\n\nimport { contains, getBoundingClientRectWithoutTransform, getInBoundsAdjustments } from '@videojs/utils/dom';\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\ntype Placement = 'top' | 'top-start' | 'top-end';\n\ninterface UpdatePositioningProps {\n  side: Placement;\n  sideOffset: number;\n  collisionPadding: number;\n}\n\ntype TransitionStatus = 'initial' | 'open' | 'close' | 'unmounted';\n\ninterface TooltipContextType {\n  popupRef: RefObject<HTMLElement | null>;\n  triggerRef: RefObject<HTMLElement | null>;\n  open: boolean;\n  transitionStatus: TransitionStatus;\n  updatePositioning: (props: UpdatePositioningProps) => void;\n  trackCursorAxis?: 'x' | 'y' | 'both' | undefined;\n  placement: Placement;\n  sideOffset: number;\n  collisionPadding: number;\n}\n\ninterface TooltipRootProps {\n  delay?: number;\n  closeDelay?: number;\n  children: ReactNode;\n  trackCursorAxis?: 'x' | 'y' | 'both';\n}\n\ninterface TooltipTriggerProps {\n  children: ReactNode;\n}\n\ninterface TooltipPositionerProps {\n  side?: Placement;\n  sideOffset?: number;\n  collisionPadding?: number;\n  children: ReactNode;\n}\n\ninterface TooltipPopupProps {\n  id?: string;\n  className?: string;\n  children: ReactNode;\n}\n\nconst TooltipContext = createContext<TooltipContextType | null>(null);\n\nfunction useTooltipContext(): TooltipContextType {\n  const context = useContext(TooltipContext);\n  if (!context) {\n    throw new Error('Tooltip components must be used within TooltipRoot');\n  }\n  return context;\n}\n\nfunction TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }: TooltipRootProps): JSX.Element {\n  const [open, setOpen] = useState(false);\n  const [placement, setPlacement] = useState<Placement>('top');\n  const [sideOffset, setSideOffset] = useState(0);\n  const [collisionPadding, setCollisionPadding] = useState(0);\n  const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>('initial');\n  const popupRef = useRef<HTMLElement | null>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pointerPositionRef = useRef({ x: 0, y: 0 });\n\n  const updatePositioning = useCallback(({ side, sideOffset, collisionPadding }: UpdatePositioningProps) => {\n    setPlacement(side);\n    setSideOffset(sideOffset);\n    setCollisionPadding(collisionPadding);\n  }, []);\n\n  const clearHoverTimeout = useCallback(() => {\n    if (hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  const checkCollision = useCallback(() => {\n    if (!popupRef.current || !triggerRef.current || !open) return;\n\n    const mediaContainer = popupRef.current.closest('[data-media-container]') as HTMLElement | null;\n    if (!mediaContainer) return;\n\n    const popupRect = getBoundingClientRectWithoutTransform(popupRef.current);\n    const boundsRect = getBoundingClientRectWithoutTransform(mediaContainer);\n    const { x } = getInBoundsAdjustments(popupRect, boundsRect, collisionPadding);\n\n    if (x !== 0) {\n      if (trackCursorAxis) {\n        const currentLeft = Number.parseFloat(popupRef.current.style.left || '0');\n        popupRef.current.style.setProperty('left', `${currentLeft + x}px`);\n      } else {\n        popupRef.current.style.setProperty('translate', `${x}px -100%`);\n      }\n    } else {\n      if (trackCursorAxis) {\n        popupRef.current.style.setProperty('translate', '-50% -100%');\n      } else {\n        popupRef.current.style.setProperty('translate', '0 -100%');\n      }\n    }\n  }, [open, collisionPadding, trackCursorAxis]);\n\n  const updatePosition = useCallback(() => {\n    if (open && trackCursorAxis && popupRef.current) {\n      popupRef.current.style.setProperty('left', `${pointerPositionRef.current.x}px`);\n      checkCollision();\n    }\n  }, [open, trackCursorAxis, checkCollision]);\n\n  const setOpenState = useCallback(\n    (newOpen: boolean) => {\n      if (open === newOpen) return;\n\n      setOpen(newOpen);\n\n      if (newOpen) {\n        setTransitionStatus('initial');\n        if (popupRef.current) {\n          popupRef.current.showPopover();\n        }\n        requestAnimationFrame(() => {\n          setTransitionStatus('open');\n          checkCollision();\n        });\n      } else {\n        setTransitionStatus('close');\n      }\n    },\n    [open, checkCollision],\n  );\n\n  useEffect(() => {\n    if (!popupRef.current || open) return;\n\n    const transitions = popupRef.current.getAnimations().filter(anim => anim instanceof CSSTransition);\n    if (transitions.length > 0) {\n      Promise.all(transitions.map(t => t.finished))\n        .then(() => popupRef.current?.hidePopover())\n        .catch(() => popupRef.current?.hidePopover());\n    } else {\n      popupRef.current.hidePopover();\n    }\n  }, [open, transitionStatus]);\n\n  useEffect(() => {\n    const trigger = triggerRef.current;\n    const popup = popupRef.current;\n    if (!trigger || !popup) return;\n\n    const abortController = new AbortController();\n    const { signal } = abortController;\n\n    const handlePointerEnter = () => {\n      clearHoverTimeout();\n\n      hoverTimeoutRef.current = setTimeout(() => {\n        setOpenState(true);\n      }, delay);\n    };\n\n    const handlePointerLeave = () => {\n      clearHoverTimeout();\n\n      hoverTimeoutRef.current = setTimeout(() => {\n        setOpenState(false);\n      }, closeDelay);\n    };\n\n    const handlePointerMove = (event: PointerEvent) => {\n      if (trackCursorAxis) {\n        pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n        if (open) {\n          updatePosition();\n        }\n      }\n    };\n\n    const handleFocusIn = () => {\n      setOpenState(true);\n    };\n\n    const handleFocusOut = (event: FocusEvent) => {\n      const relatedTarget = event.relatedTarget as HTMLElement;\n      if (relatedTarget && popup && contains(popup, relatedTarget)) return;\n      setOpenState(false);\n    };\n\n    if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n      // Event listeners are automatically removed when AbortController is aborted\n      trigger.addEventListener('pointerenter', handlePointerEnter, { signal });\n      trigger.addEventListener('pointerleave', handlePointerLeave, { signal });\n\n      if (trackCursorAxis) {\n        trigger.addEventListener('pointermove', handlePointerMove, { signal });\n      }\n    }\n\n    // Event listeners are automatically removed when AbortController is aborted\n    trigger.addEventListener('focusin', handleFocusIn, { signal });\n    trigger.addEventListener('focusout', handleFocusOut, { signal });\n\n    return () => {\n      abortController.abort();\n      clearHoverTimeout();\n    };\n  }, [delay, closeDelay, trackCursorAxis, open, setOpenState, clearHoverTimeout, updatePosition]);\n\n  useEffect(() => {\n    if (!popupRef.current || !triggerRef.current) return;\n\n    const popup = popupRef.current;\n    const popupId = popup.id;\n    if (popupId) {\n      popup.style.setProperty('position-anchor', `--${popupId}`);\n    }\n\n    const [side, alignment] = placement.split('-');\n    popup.style.setProperty('top', `calc(anchor(${side}) - ${sideOffset}px)`);\n\n    if (trackCursorAxis) {\n      popup.style.setProperty('translate', `-50% -100%`);\n    } else {\n      popup.style.setProperty('translate', `0 -100%`);\n      popup.style.setProperty('justify-self', alignment === 'start'\n        ? 'anchor-start'\n        : alignment === 'end'\n          ? 'anchor-end'\n          : 'anchor-center');\n    }\n  }, [placement, sideOffset, trackCursorAxis]);\n\n  useEffect(() => {\n    if (!popupRef.current) return;\n\n    const resizeObserver = new ResizeObserver(checkCollision);\n    resizeObserver.observe(popupRef.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [checkCollision]);\n\n  const value: TooltipContextType = useMemo(\n    () => ({\n      popupRef,\n      triggerRef,\n      open,\n      transitionStatus,\n      updatePositioning,\n      trackCursorAxis,\n      placement,\n      sideOffset,\n      collisionPadding,\n    }),\n    [open, transitionStatus, updatePositioning, trackCursorAxis, placement, sideOffset, collisionPadding],\n  );\n\n  return <TooltipContext.Provider value={value}>{children}</TooltipContext.Provider>;\n}\n\nfunction TooltipTrigger({ children }: TooltipTriggerProps): JSX.Element {\n  const { triggerRef, open } = useTooltipContext();\n\n  // eslint-disable-next-line react/no-clone-element, react/no-children-only\n  return cloneElement(Children.only(children) as JSX.Element, {\n    ref: triggerRef,\n    'data-popup-open': open ? '' : undefined,\n  });\n}\n\nfunction TooltipPositioner({\n  side = 'top',\n  sideOffset = 0,\n  collisionPadding = 0,\n  children,\n}: TooltipPositionerProps): JSX.Element | null {\n  const { updatePositioning } = useTooltipContext();\n\n  useEffect(() => {\n    updatePositioning({ side, sideOffset, collisionPadding });\n  }, [side, sideOffset, collisionPadding, updatePositioning]);\n\n  return <>{children}</>;\n}\n\nfunction TooltipPopup({ id, className = '', children }: TooltipPopupProps): JSX.Element | null {\n  const { popupRef, triggerRef, transitionStatus, placement } = useTooltipContext();\n  const triggerElement = triggerRef.current;\n\n  const popupId = useMemo(() => id ?? `tooltip-${Math.random().toString(36).substring(2, 9)}`, [id]);\n\n  useEffect(() => {\n    if (!popupRef.current || !triggerRef.current) return;\n\n    const popup = popupRef.current;\n    const trigger = triggerRef.current;\n\n    popup.setAttribute('popover', 'manual');\n    trigger.setAttribute('commandfor', popupId);\n    trigger.style.setProperty('anchor-name', `--${popupId}`);\n  }, [popupId, popupRef, triggerRef]);\n\n  // Copy data attributes from trigger element\n  const dataAttributes = useMemo(() => {\n    if (!triggerElement?.attributes) return {};\n    return Object.fromEntries(\n      Array.from(triggerElement.attributes)\n        .filter(attr => attr.name.startsWith('data-'))\n        .map(attr => [attr.name, attr.value]),\n    );\n  }, [triggerElement]);\n\n  return (\n    <div\n      ref={popupRef as RefObject<HTMLDivElement>}\n      id={popupId}\n      className={className}\n      role=\"tooltip\"\n      {...dataAttributes}\n      data-side={placement}\n      data-starting-style={transitionStatus === 'initial' ? '' : undefined}\n      data-open={transitionStatus === 'initial' || transitionStatus === 'open' ? '' : undefined}\n      data-ending-style={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n      data-closed={transitionStatus === 'close' || transitionStatus === 'unmounted' ? '' : undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport const Tooltip: {\n  Root: typeof TooltipRoot;\n  Trigger: typeof TooltipTrigger;\n  Positioner: typeof TooltipPositioner;\n  Popup: typeof TooltipPopup;\n} = {\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n  Positioner: TooltipPositioner,\n  Popup: TooltipPopup,\n};\n\nexport default Tooltip;\n","import type { ConnectedComponent } from '../utils/component-factory';\n\nimport { VolumeSlider as CoreVolumeSlider } from '@videojs/core';\n\nimport { volumeSliderStateDefinition } from '@videojs/core/store';\nimport { shallowEqual } from '@videojs/utils';\nimport { useCallback, useMemo } from 'react';\n\nimport { useMediaSelector, useMediaStore } from '@/store';\nimport { toConnectedComponent, toContextComponent, useCore } from '../utils/component-factory';\n\nexport interface VolumeSliderState {\n  volume: number;\n  muted: boolean;\n  volumeLevel: string;\n  requestVolumeChange: (volume: number) => void;\n  core: CoreVolumeSlider;\n  orientation: 'horizontal' | 'vertical';\n}\n\nexport interface VolumeSliderProps extends React.ComponentProps<'div'> {\n  orientation?: 'horizontal' | 'vertical';\n}\n\ninterface VolumeSliderRenderProps extends React.ComponentProps<'div'> {\n  'data-orientation'?: 'horizontal' | 'vertical';\n  'data-muted'?: boolean;\n  'data-volume-level'?: string;\n}\n\n// ============================================================================\n// ROOT COMPONENT\n// ============================================================================\n\nexport function useVolumeSliderRootState(props: VolumeSliderProps): VolumeSliderState {\n  const { orientation = 'horizontal' } = props;\n  const mediaStore = useMediaStore();\n  const mediaState = useMediaSelector(volumeSliderStateDefinition.stateTransform, shallowEqual);\n  const mediaMethods = useMemo(\n    () => volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),\n    [mediaStore],\n  );\n  const core = useCore(CoreVolumeSlider, { ...mediaState, ...mediaMethods });\n\n  return {\n    ...mediaState,\n    ...mediaMethods,\n    orientation,\n    core,\n  };\n}\n\nexport function useVolumeSliderRootProps(props: VolumeSliderProps, state: VolumeSliderState): VolumeSliderRenderProps {\n  const { _fillWidth, _pointerWidth, _volumeText } = state.core.getState();\n\n  const { children, className, id, style, orientation = 'horizontal' } = props;\n\n  return {\n    ref: useCallback((el: HTMLDivElement) => {\n      if (!el) return;\n      state.core?.attach(el);\n    }, []),\n    id,\n    role: 'slider',\n    tabIndex: 0,\n    'aria-label': 'Volume',\n    'aria-valuemin': 0,\n    'aria-valuemax': 100,\n    'aria-valuenow': Math.round(state.volume * 100),\n    'aria-valuetext': _volumeText,\n    'aria-orientation': orientation,\n    'data-orientation': orientation,\n    'data-muted': state.muted,\n    'data-volume-level': state.volumeLevel,\n    className,\n    style: {\n      ...style,\n      '--slider-fill': `${_fillWidth.toFixed(3)}%`,\n      '--slider-pointer': `${_pointerWidth.toFixed(3)}%`,\n    } as React.CSSProperties,\n    children,\n  };\n}\n\nexport function renderVolumeSliderRoot(props: VolumeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst VolumeSliderRoot: ConnectedComponent<VolumeSliderProps, typeof renderVolumeSliderRoot> = toConnectedComponent(\n  useVolumeSliderRootState,\n  useVolumeSliderRootProps,\n  renderVolumeSliderRoot,\n  'VolumeSlider.Root',\n);\n\n// ============================================================================\n// TRACK COMPONENT\n// ============================================================================\n\nexport function useVolumeSliderTrackProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {\n  return {\n    ref: useCallback((el: HTMLDivElement) => {\n      context.core?.setState({ _trackElement: el });\n    }, []),\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'width' : 'height']: '100%',\n    },\n  };\n}\n\nexport function renderVolumeSliderTrack(props: VolumeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst VolumeSliderTrack: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderTrack\n> = toContextComponent(useVolumeSliderTrackProps, renderVolumeSliderTrack, 'VolumeSlider.Track');\n\n// ============================================================================\n// THUMB COMPONENT\n// ============================================================================\n\nexport function getVolumeSliderThumbProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {\n  return {\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'insetInlineStart' : 'insetBlockEnd']: 'var(--slider-fill)',\n      [context.orientation === 'horizontal' ? 'top' : 'left']: '50%',\n      translate: context.orientation === 'horizontal' ? '-50% -50%' : '-50% 50%',\n      position: 'absolute' as const,\n    },\n  };\n}\n\nexport function renderVolumeSliderThumb(props: VolumeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst VolumeSliderThumb: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderThumb\n> = toContextComponent(getVolumeSliderThumbProps, renderVolumeSliderThumb, 'VolumeSlider.Thumb');\n\n// ============================================================================\n// PROGRESS COMPONENT\n// ============================================================================\n\nexport function getVolumeSliderProgressProps(props: React.ComponentProps<'div'>, context: VolumeSliderState): VolumeSliderRenderProps {\n  return {\n    'data-orientation': context.orientation,\n    ...props,\n    style: {\n      ...props.style,\n      [context.orientation === 'horizontal' ? 'width' : 'height']: 'var(--slider-fill, 0%)',\n      [context.orientation === 'horizontal' ? 'height' : 'width']: '100%',\n      [context.orientation === 'horizontal' ? 'top' : 'bottom']: '0',\n      position: 'absolute' as const,\n    },\n  };\n}\n\nexport function renderVolumeSliderProgress(props: VolumeSliderRenderProps): JSX.Element {\n  return <div {...props} />;\n}\n\nconst VolumeSliderProgress: ConnectedComponent<\n  React.ComponentProps<'div'>,\n  typeof renderVolumeSliderProgress\n> = toContextComponent(getVolumeSliderProgressProps, renderVolumeSliderProgress, 'VolumeSlider.Progress');\n\n// ============================================================================\n// EXPORTS\n// ============================================================================\n\nexport const VolumeSlider = Object.assign(\n  {},\n  {\n    Root: VolumeSliderRoot,\n    Track: VolumeSliderTrack,\n    Thumb: VolumeSliderThumb,\n    Progress: VolumeSliderProgress,\n  },\n) as {\n  Root: typeof VolumeSliderRoot;\n  Track: typeof VolumeSliderTrack;\n  Thumb: typeof VolumeSliderThumb;\n  Progress: typeof VolumeSliderProgress;\n};\n\nexport default VolumeSlider;\n"],"mappings":"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"}