@videojs/react 0.1.0-preview.8 → 10.0.0-alpha.11

package/dist/VolumeSlider-DmlupkvF.js

@@ -1,1042 +0,0 @@
-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, 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";
-
-//#region src/utils/component-factory.tsx
-const Context$1 = createContext(null);
-/**
-* Generic factory function to create connected components following the hooks pattern
-* inspired by Adobe React Spectrum and Base UI architectures.
-*
-* @param useStateHook - Hook that provides component state
-* @param usePropsHook - Hook that enhances props with state-derived values
-* @param defaultRender - Default render function for the component
-* @param displayName - Display name for React DevTools
-* @returns Connected component with customizable render prop
-*/
-function toConnectedComponent(useStateHook, usePropsHook, defaultRender, displayName) {
-	const ConnectedComponent = forwardRef(({ render = defaultRender,...props }, ref) => {
-		const propsWithRef = ref ? {
-			...props,
-			ref
-		} : props;
-		const connectedState = useStateHook(propsWithRef);
-		const connectedProps = usePropsHook(propsWithRef, connectedState);
-		return /* @__PURE__ */ jsx(Context$1.Provider, {
-			value: connectedState,
-			children: render(connectedProps, connectedState)
-		});
-	});
-	ConnectedComponent.displayName = displayName;
-	return ConnectedComponent;
-}
-/**
-* Factory function to create context-based components that don't use toConnectedComponent
-* These components rely on context provided by a parent component.
-*
-* @param usePropsHook - Hook that enhances props with context-derived values
-* @param defaultRender - Default render function for the component
-* @param displayName - Display name for React DevTools
-* @returns Context-based component with customizable render prop
-*/
-function toContextComponent(usePropsHook, defaultRender, displayName) {
-	const ContextComponent = forwardRef(({ render = defaultRender,...props }, ref) => {
-		const context = useContext(Context$1);
-		return render(usePropsHook(ref ? {
-			...props,
-			ref
-		} : props, context), context);
-	});
-	ContextComponent.displayName = displayName;
-	return ContextComponent;
-}
-/**
-* Hook that manages a CoreClass instance and triggers re-renders when state changes.
-* Uses useSyncExternalStore for optimal performance with external state subscriptions.
-*/
-function useCore(CoreClass, state) {
-	const coreRef = useRef(null);
-	const snapshotRef = useRef(null);
-	if (!coreRef.current) {
-		coreRef.current = new CoreClass();
-		snapshotRef.current = coreRef.current.getState();
-	}
-	useEffect(() => {
-		coreRef.current?.setState(state);
-	}, [...Object.values(state)]);
-	useSyncExternalStore(useCallback((onStoreChange) => {
-		if (!coreRef.current) return () => {};
-		return coreRef.current.subscribe((newState) => {
-			snapshotRef.current = newState;
-			onStoreChange();
-		});
-	}, []), useCallback(() => {
-		return snapshotRef.current;
-	}, []), () => null);
-	return coreRef.current;
-}
-
-//#endregion
-//#region src/components/CurrentTimeDisplay.tsx
-function useCurrentTimeDisplayState(_props) {
-	/** @TODO Fix type issues with hooks (CJP) */
-	const mediaState = useMediaSelector(currentTimeDisplayStateDefinition.stateTransform, shallowEqual);
-	return {
-		currentTime: mediaState.currentTime ?? 0,
-		duration: mediaState.duration ?? 0
-	};
-}
-function useCurrentTimeDisplayProps(props, _state) {
-	return { ...props };
-}
-function renderCurrentTimeDisplay(props, state) {
-	const { showRemaining,...restProps } = props;
-	/** @TODO Should this live here or elsewhere? (CJP) */
-	const timeLabel = showRemaining && state.duration != null && state.currentTime != null ? formatDisplayTime(-(state.duration - state.currentTime)) : formatDisplayTime(state.currentTime);
-	return /* @__PURE__ */ jsx("span", {
-		...restProps,
-		children: timeLabel
-	});
-}
-const CurrentTimeDisplay = toConnectedComponent(useCurrentTimeDisplayState, useCurrentTimeDisplayProps, renderCurrentTimeDisplay, "CurrentTimeDisplay");
-
-//#endregion
-//#region src/components/DurationDisplay.tsx
-function useDurationDisplayState(_props) {
-	return { duration: useMediaSelector(durationDisplayStateDefinition.stateTransform, shallowEqual).duration ?? 0 };
-}
-function useDurationDisplayProps(props) {
-	return { ...props };
-}
-function renderDurationDisplay(props, state) {
-	return /* @__PURE__ */ jsx("span", {
-		...props,
-		children: formatDisplayTime(state.duration)
-	});
-}
-const DurationDisplay = toConnectedComponent(useDurationDisplayState, useDurationDisplayProps, renderDurationDisplay, "DurationDisplay");
-
-//#endregion
-//#region src/components/FullscreenButton.tsx
-function useFullscreenButtonState(_props) {
-	const mediaStore = useMediaStore();
-	const mediaState = useMediaSelector(fullscreenButtonStateDefinition.stateTransform, shallowEqual);
-	const methods = useMemo(() => fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-	return {
-		fullscreen: mediaState.fullscreen,
-		requestEnterFullscreen: methods.requestEnterFullscreen,
-		requestExitFullscreen: methods.requestExitFullscreen
-	};
-}
-function getFullscreenButtonProps(props, state) {
-	const baseProps = {
-		role: "button",
-		"aria-label": state.fullscreen ? "exit fullscreen" : "enter fullscreen",
-		"data-tooltip": state.fullscreen ? "Exit Fullscreen" : "Enter Fullscreen",
-		...props
-	};
-	if (state.fullscreen) baseProps["data-fullscreen"] = "";
-	return baseProps;
-}
-function renderFullscreenButton(props, state) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		...props,
-		onClick: () => {
-			if (props.disabled) return;
-			if (state.fullscreen) state.requestExitFullscreen();
-			else state.requestEnterFullscreen();
-		},
-		children: props.children
-	});
-}
-const FullscreenButton = toConnectedComponent(useFullscreenButtonState, getFullscreenButtonProps, renderFullscreenButton, "FullscreenButton");
-
-//#endregion
-//#region src/utils/use-composed-refs.ts
-/**
-* Set a given ref to a given value
-* This utility takes care of different types of refs: callback refs and RefObject(s)
-*/
-function setRef(ref, value) {
-	if (typeof ref === "function") return ref(value);
-	else if (ref !== null && ref !== void 0) ref.current = value;
-}
-/**
-* A utility to compose multiple refs together
-* Accepts callback refs and RefObject(s)
-*/
-function composeRefs(...refs) {
-	return (node) => {
-		let hasCleanup = false;
-		const cleanups = refs.map((ref) => {
-			const cleanup = setRef(ref, node);
-			if (!hasCleanup && typeof cleanup == "function") hasCleanup = true;
-			return cleanup;
-		});
-		if (hasCleanup) return () => {
-			for (let i = 0; i < cleanups.length; i++) {
-				const cleanup = cleanups[i];
-				if (typeof cleanup == "function") cleanup();
-				else setRef(refs[i], null);
-			}
-		};
-	};
-}
-/**
-* A custom hook that composes multiple refs
-* Accepts callback refs and RefObject(s)
-*/
-function useComposedRefs(...refs) {
-	return React$1.useCallback(composeRefs(...refs), refs);
-}
-
-//#endregion
-//#region src/components/MediaContainer.tsx
-/**
-* Hook to associate a React element as the fullscreen container for the media store.
-* This is equivalent to Media Chrome's useMediaFullscreenRef but for VJS-10.
-*
-* The ref callback will register the element as the container state owner
-* in the media store, enabling fullscreen functionality.
-*
-* @example
-* import { useMediaContainerRef } from '@videojs/react';
-*
-* const PlayerContainer = ({ children }) => {
-*   const containerRef = useMediaContainerRef();
-*   return <div ref={containerRef}>{children}</div>;
-* };
-*/
-function useMediaContainerRef() {
-	const mediaStore = useMediaStore();
-	return useCallback((containerElement) => {
-		if (!mediaStore) return;
-		mediaStore.dispatch({
-			type: "containerstateownerchangerequest",
-			detail: containerElement
-		});
-	}, [mediaStore]);
-}
-/**
-* MediaContainer component that automatically registers itself as the fullscreen container.
-* This provides a simple wrapper component for fullscreen functionality.
-*
-* @example
-* import { MediaContainer } from '@videojs/react';
-*
-* const MyPlayer = () => (
-*   <MediaContainer>
-*     <video src="video.mp4" />
-*     <div>Controls here</div>
-*   </MediaContainer>
-* );
-*/
-const MediaContainer = forwardRef(({ children,...props }, ref) => {
-	const composedRef = useComposedRefs(ref, useMediaContainerRef());
-	const mediaStore = useMediaStore();
-	const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);
-	const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: composedRef,
-		onClick: useCallback((event) => {
-			if (!["video", "audio"].includes(event.target.localName || "")) return;
-			if (mediaState.paused) methods.requestPlay();
-			else methods.requestPause();
-		}, [mediaState.paused, methods]),
-		"data-media-container": true,
-		...props,
-		children
-	});
-});
-
-//#endregion
-//#region src/components/MuteButton.tsx
-function useMuteButtonState(_props) {
-	const mediaStore = useMediaStore();
-	const mediaState = useMediaSelector(muteButtonStateDefinition.stateTransform, shallowEqual);
-	const methods = useMemo(() => muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-	return {
-		volumeLevel: mediaState.volumeLevel,
-		muted: mediaState.muted,
-		requestMute: methods.requestMute,
-		requestUnmute: methods.requestUnmute
-	};
-}
-function getMuteButtonProps(props, state) {
-	const baseProps = {
-		"data-volume-level": state.volumeLevel,
-		role: "button",
-		"aria-label": state.muted ? "unmute" : "mute",
-		"data-tooltip": state.muted ? "Unmute" : "Mute",
-		...props
-	};
-	if (state.muted) baseProps["data-muted"] = "";
-	return baseProps;
-}
-function renderMuteButton(props, state) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		...props,
-		onClick: () => {
-			if (props.disabled) return;
-			if (state.volumeLevel === "off") state.requestUnmute();
-			else state.requestMute();
-		},
-		children: props.children
-	});
-}
-const MuteButton = toConnectedComponent(useMuteButtonState, getMuteButtonProps, renderMuteButton, "MuteButton");
-var MuteButton_default = MuteButton;
-
-//#endregion
-//#region src/components/PlayButton.tsx
-function usePlayButtonState(_props) {
-	const mediaStore = useMediaStore();
-	const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);
-	const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-	return {
-		paused: mediaState.paused,
-		requestPlay: methods.requestPlay,
-		requestPause: methods.requestPause
-	};
-}
-function getPlayButtonProps(props, state) {
-	const baseProps = {
-		role: "button",
-		"aria-label": state.paused ? "play" : "pause",
-		"data-tooltip": state.paused ? "Play" : "Pause",
-		...props
-	};
-	if (state.paused) baseProps["data-paused"] = "";
-	return baseProps;
-}
-function renderPlayButton(props, state) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		...props,
-		onClick: () => {
-			if (props.disabled) return;
-			if (state.paused) state.requestPlay();
-			else state.requestPause();
-		},
-		children: props.children
-	});
-}
-const PlayButton = toConnectedComponent(usePlayButtonState, getPlayButtonProps, renderPlayButton, "PlayButton");
-var PlayButton_default = PlayButton;
-
-//#endregion
-//#region src/components/Popover.tsx
-const PopoverContext = createContext(null);
-function usePopoverContext() {
-	const context = useContext(PopoverContext);
-	if (!context) throw new Error("Popover components must be used within PopoverRoot");
-	return context;
-}
-function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children }) {
-	const [open, setOpen] = useState(false);
-	const [placement, setPlacement] = useState("top");
-	const [sideOffset, setSideOffset] = useState(5);
-	const [transitionStatus, setTransitionStatus] = useState("initial");
-	const popupRef = useRef(null);
-	const triggerRef = useRef(null);
-	const hoverTimeoutRef = useRef(null);
-	const pointerMoveHandlerRef = useRef(null);
-	const clearHoverTimeout = useCallback(() => {
-		if (hoverTimeoutRef.current) {
-			clearTimeout(hoverTimeoutRef.current);
-			hoverTimeoutRef.current = null;
-		}
-	}, []);
-	const setOpenState = useCallback((newOpen) => {
-		if (open === newOpen) return;
-		setOpen(newOpen);
-		if (newOpen) {
-			setTransitionStatus("initial");
-			if (popupRef.current) popupRef.current.showPopover();
-			requestAnimationFrame(() => {
-				setTransitionStatus("open");
-			});
-		} else setTransitionStatus("close");
-	}, [open]);
-	useEffect(() => {
-		if (!popupRef.current || open) return;
-		const transitions = popupRef.current.getAnimations().filter((anim) => anim instanceof CSSTransition);
-		if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => popupRef.current?.hidePopover()).catch(() => popupRef.current?.hidePopover());
-		else popupRef.current.hidePopover();
-	}, [open, transitionStatus]);
-	const updatePositioning = useCallback((newPlacement, newSideOffset) => {
-		setPlacement(newPlacement);
-		setSideOffset(newSideOffset);
-	}, []);
-	useEffect(() => {
-		const trigger = triggerRef.current;
-		const popup = popupRef.current;
-		if (!trigger || !popup) return;
-		const abortController = new AbortController();
-		const { signal } = abortController;
-		const addPointerMoveListener = () => {
-			if (!globalThis.matchMedia?.("(hover: hover)")?.matches) return;
-			if (!pointerMoveHandlerRef.current) pointerMoveHandlerRef.current = safePolygon({ blockPointerEvents: true })({
-				placement,
-				elements: {
-					domReference: trigger,
-					floating: popup
-				},
-				x: 0,
-				y: 0,
-				onClose: () => {
-					if (pointerMoveHandlerRef.current) document.documentElement.removeEventListener("pointermove", pointerMoveHandlerRef.current);
-					clearHoverTimeout();
-					hoverTimeoutRef.current = setTimeout(() => {
-						setOpenState(false);
-					}, closeDelay);
-				}
-			});
-			document.documentElement.addEventListener("pointermove", pointerMoveHandlerRef.current, { signal });
-		};
-		const handlePointerEnter = (event) => {
-			if (!openOnHover) return;
-			clearHoverTimeout();
-			if (event.currentTarget === popup) addPointerMoveListener();
-			if (open) return;
-			hoverTimeoutRef.current = setTimeout(() => {
-				setOpenState(true);
-			}, delay);
-		};
-		const handlePointerLeave = () => {
-			if (!openOnHover) return;
-			addPointerMoveListener();
-		};
-		if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
-			trigger.addEventListener("pointerenter", handlePointerEnter, { signal });
-			trigger.addEventListener("pointerleave", handlePointerLeave, { signal });
-			popup.addEventListener("pointerenter", handlePointerEnter, { signal });
-		}
-		const handleFocusIn = () => {
-			setOpenState(true);
-		};
-		const handleFocusOut = (event) => {
-			const relatedTarget = event.relatedTarget;
-			if (relatedTarget && popup && contains(popup, relatedTarget)) return;
-			setOpenState(false);
-		};
-		trigger.addEventListener("focusin", handleFocusIn, { signal });
-		trigger.addEventListener("focusout", handleFocusOut, { signal });
-		popup.addEventListener("focusout", handleFocusOut, { signal });
-		return () => {
-			abortController.abort();
-			clearHoverTimeout();
-			if (pointerMoveHandlerRef.current) document.documentElement.removeEventListener("pointermove", pointerMoveHandlerRef.current);
-			pointerMoveHandlerRef.current = null;
-		};
-	}, [
-		openOnHover,
-		delay,
-		closeDelay,
-		open,
-		placement,
-		setOpenState,
-		clearHoverTimeout
-	]);
-	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%`);
-		popup.style.setProperty("justify-self", alignment === "start" ? "anchor-start" : alignment === "end" ? "anchor-end" : "anchor-center");
-	}, [placement, sideOffset]);
-	const value = useMemo(() => ({
-		open,
-		setOpen: setOpenState,
-		popupRef,
-		triggerRef,
-		updatePositioning,
-		transitionStatus,
-		placement,
-		sideOffset
-	}), [
-		open,
-		setOpenState,
-		updatePositioning,
-		transitionStatus,
-		placement,
-		sideOffset
-	]);
-	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
-		value,
-		children
-	});
-}
-function PopoverTrigger({ children }) {
-	const { triggerRef, open } = usePopoverContext();
-	return cloneElement(Children.only(children), {
-		ref: triggerRef,
-		"data-popup-open": open ? "" : void 0
-	});
-}
-function PopoverPositioner({ side = "top", sideOffset = 5, children }) {
-	const { updatePositioning } = usePopoverContext();
-	useEffect(() => {
-		updatePositioning(side, sideOffset);
-	}, [
-		side,
-		sideOffset,
-		updatePositioning
-	]);
-	return /* @__PURE__ */ jsx(Fragment, { children });
-}
-function PopoverPopup({ id, className, children }) {
-	const { popupRef, triggerRef, transitionStatus, placement } = usePopoverContext();
-	const triggerElement = triggerRef.current;
-	const uniqueId = useId();
-	const popupId = id ?? uniqueId;
-	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
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: popupRef,
-		id: popupId,
-		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]),
-		"data-side": placement,
-		"data-starting-style": transitionStatus === "initial" ? "" : void 0,
-		"data-open": transitionStatus === "initial" || transitionStatus === "open" ? "" : void 0,
-		"data-ending-style": transitionStatus === "close" || transitionStatus === "unmounted" ? "" : void 0,
-		"data-closed": transitionStatus === "close" || transitionStatus === "unmounted" ? "" : void 0,
-		children
-	});
-}
-const Popover = {
-	Root: PopoverRoot,
-	Trigger: PopoverTrigger,
-	Positioner: PopoverPositioner,
-	Popup: PopoverPopup
-};
-var Popover_default = Popover;
-
-//#endregion
-//#region src/components/PreviewTimeDisplay.tsx
-function usePreviewTimeDisplayState(_props) {
-	return { previewTime: useMediaSelector(previewTimeDisplayStateDefinition.stateTransform, shallowEqual).previewTime ?? 0 };
-}
-function getPreviewTimeDisplayProps(props, _state) {
-	return { ...props };
-}
-function renderPreviewTimeDisplay(props, state) {
-	const { showRemaining,...restProps } = props;
-	/** @TODO Should this live here or elsewhere? (CJP) */
-	const timeLabel = formatDisplayTime(state.previewTime);
-	return /* @__PURE__ */ jsx("span", {
-		...restProps,
-		children: timeLabel
-	});
-}
-const PreviewTimeDisplay = toConnectedComponent(usePreviewTimeDisplayState, getPreviewTimeDisplayProps, renderPreviewTimeDisplay, "PreviewTimeDisplay");
-var PreviewTimeDisplay_default = PreviewTimeDisplay;
-
-//#endregion
-//#region src/components/TimeSlider.tsx
-function useTimeSliderRootState(props) {
-	const { orientation = "horizontal" } = 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
-	};
-}
-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])),
-		id,
-		role: "slider",
-		tabIndex: 0,
-		"aria-label": "Seek",
-		"aria-valuemin": 0,
-		"aria-valuemax": Math.round(state.duration),
-		"aria-valuenow": Math.round(state.currentTime),
-		"aria-valuetext": `${_currentTimeText} of ${_durationText}`,
-		"aria-orientation": orientation,
-		"data-orientation": orientation,
-		"data-current-time": state.currentTime,
-		"data-duration": state.duration,
-		className,
-		style: {
-			...style,
-			"--slider-fill": `${_fillWidth.toFixed(3)}%`,
-			"--slider-pointer": `${(_pointerWidth * 100).toFixed(3)}%`
-		},
-		children
-	};
-}
-function renderTimeSliderRoot(props) {
-	return /* @__PURE__ */ jsx("div", { ...props });
-}
-const TimeSliderRoot = toConnectedComponent(useTimeSliderRootState, useTimeSliderRootProps, renderTimeSliderRoot, "TimeSlider.Root");
-function useTimeSliderTrackProps(props, context) {
-	return {
-		ref: useCallback((el) => {
-			context.core?.setState({ _trackElement: el });
-		}, [context.core]),
-		"data-orientation": context.orientation,
-		...props,
-		style: {
-			...props.style,
-			[context.orientation === "horizontal" ? "width" : "height"]: "100%"
-		}
-	};
-}
-function renderTimeSliderTrack(props) {
-	return /* @__PURE__ */ jsx("div", { ...props });
-}
-const TimeSliderTrack = toContextComponent(useTimeSliderTrackProps, renderTimeSliderTrack, "TimeSlider.Track");
-function getTimeSliderThumbProps(props, context) {
-	return {
-		"data-orientation": context.orientation,
-		...props,
-		style: {
-			...props.style,
-			[context.orientation === "horizontal" ? "insetInlineStart" : "insetBlockEnd"]: "var(--slider-fill)",
-			[context.orientation === "horizontal" ? "top" : "left"]: "50%",
-			translate: context.orientation === "horizontal" ? "-50% -50%" : "-50% 50%",
-			position: "absolute"
-		}
-	};
-}
-function renderTimeSliderThumb(props) {
-	return /* @__PURE__ */ jsx("div", { ...props });
-}
-const TimeSliderThumb = toContextComponent(getTimeSliderThumbProps, renderTimeSliderThumb, "TimeSlider.Thumb");
-function getTimeSliderPointerProps(props, context) {
-	return {
-		"data-orientation": context.orientation,
-		...props,
-		style: {
-			...props.style,
-			[context.orientation === "horizontal" ? "width" : "height"]: "var(--slider-pointer, 0%)",
-			[context.orientation === "horizontal" ? "height" : "width"]: "100%",
-			position: "absolute"
-		}
-	};
-}
-function renderTimeSliderPointer(props) {
-	return /* @__PURE__ */ jsx("div", { ...props });
-}
-const TimeSliderPointer = toContextComponent(getTimeSliderPointerProps, renderTimeSliderPointer, "TimeSlider.Pointer");
-function getTimeSliderProgressProps(props, context) {
-	return {
-		"data-orientation": context.orientation,
-		...props,
-		style: {
-			...props.style,
-			[context.orientation === "horizontal" ? "width" : "height"]: "var(--slider-fill, 0%)",
-			[context.orientation === "horizontal" ? "height" : "width"]: "100%",
-			[context.orientation === "horizontal" ? "top" : "bottom"]: "0",
-			position: "absolute"
-		}
-	};
-}
-function renderTimeSliderProgress(props) {
-	return /* @__PURE__ */ jsx("div", { ...props });
-}
-const TimeSliderProgress = toContextComponent(getTimeSliderProgressProps, renderTimeSliderProgress, "TimeSlider.Progress");
-const TimeSlider$1 = Object.assign({}, {
-	Root: TimeSliderRoot,
-	Track: TimeSliderTrack,
-	Thumb: TimeSliderThumb,
-	Pointer: TimeSliderPointer,
-	Progress: TimeSliderProgress
-});
-
-//#endregion
-//#region src/components/Tooltip.tsx
-const TooltipContext = createContext(null);
-function useTooltipContext() {
-	const context = useContext(TooltipContext);
-	if (!context) throw new Error("Tooltip components must be used within TooltipRoot");
-	return context;
-}
-function TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }) {
-	const [open, setOpen] = useState(false);
-	const [placement, setPlacement] = useState("top");
-	const [sideOffset, setSideOffset] = useState(0);
-	const [collisionPadding, setCollisionPadding] = useState(0);
-	const [transitionStatus, setTransitionStatus] = useState("initial");
-	const popupRef = useRef(null);
-	const triggerRef = useRef(null);
-	const hoverTimeoutRef = useRef(null);
-	const pointerPositionRef = useRef({
-		x: 0,
-		y: 0
-	});
-	const updatePositioning = useCallback(({ side, sideOffset: sideOffset$1, collisionPadding: collisionPadding$1 }) => {
-		setPlacement(side);
-		setSideOffset(sideOffset$1);
-		setCollisionPadding(collisionPadding$1);
-	}, []);
-	const clearHoverTimeout = useCallback(() => {
-		if (hoverTimeoutRef.current) {
-			clearTimeout(hoverTimeoutRef.current);
-			hoverTimeoutRef.current = null;
-		}
-	}, []);
-	const checkCollision = useCallback(() => {
-		if (!popupRef.current || !triggerRef.current || !open) return;
-		const mediaContainer = popupRef.current.closest("[data-media-container]");
-		if (!mediaContainer) return;
-		const { x } = getInBoundsAdjustments(getBoundingClientRectWithoutTransform(popupRef.current), getBoundingClientRectWithoutTransform(mediaContainer), collisionPadding);
-		if (x !== 0) if (trackCursorAxis) {
-			const currentLeft = Number.parseFloat(popupRef.current.style.left || "0");
-			popupRef.current.style.setProperty("left", `${currentLeft + x}px`);
-		} else popupRef.current.style.setProperty("translate", `${x}px -100%`);
-		else if (trackCursorAxis) popupRef.current.style.setProperty("translate", "-50% -100%");
-		else popupRef.current.style.setProperty("translate", "0 -100%");
-	}, [
-		open,
-		collisionPadding,
-		trackCursorAxis
-	]);
-	const updatePosition = useCallback(() => {
-		if (open && trackCursorAxis && popupRef.current) {
-			popupRef.current.style.setProperty("left", `${pointerPositionRef.current.x}px`);
-			checkCollision();
-		}
-	}, [
-		open,
-		trackCursorAxis,
-		checkCollision
-	]);
-	const setOpenState = useCallback((newOpen) => {
-		if (open === newOpen) return;
-		setOpen(newOpen);
-		if (newOpen) {
-			setTransitionStatus("initial");
-			if (popupRef.current) popupRef.current.showPopover();
-			requestAnimationFrame(() => {
-				setTransitionStatus("open");
-				checkCollision();
-			});
-		} else setTransitionStatus("close");
-	}, [open, checkCollision]);
-	useEffect(() => {
-		if (!popupRef.current || open) return;
-		const transitions = popupRef.current.getAnimations().filter((anim) => anim instanceof CSSTransition);
-		if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => popupRef.current?.hidePopover()).catch(() => popupRef.current?.hidePopover());
-		else popupRef.current.hidePopover();
-	}, [open, transitionStatus]);
-	useEffect(() => {
-		const trigger = triggerRef.current;
-		const popup = popupRef.current;
-		if (!trigger || !popup) return;
-		const abortController = new AbortController();
-		const { signal } = abortController;
-		const handlePointerEnter = () => {
-			clearHoverTimeout();
-			hoverTimeoutRef.current = setTimeout(() => {
-				setOpenState(true);
-			}, delay);
-		};
-		const handlePointerLeave = () => {
-			clearHoverTimeout();
-			hoverTimeoutRef.current = setTimeout(() => {
-				setOpenState(false);
-			}, closeDelay);
-		};
-		const handlePointerMove = (event) => {
-			if (trackCursorAxis) {
-				pointerPositionRef.current = {
-					x: event.clientX,
-					y: event.clientY
-				};
-				if (open) updatePosition();
-			}
-		};
-		const handleFocusIn = () => {
-			setOpenState(true);
-		};
-		const handleFocusOut = (event) => {
-			const relatedTarget = event.relatedTarget;
-			if (relatedTarget && popup && contains(popup, relatedTarget)) return;
-			setOpenState(false);
-		};
-		if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
-			trigger.addEventListener("pointerenter", handlePointerEnter, { signal });
-			trigger.addEventListener("pointerleave", handlePointerLeave, { signal });
-			if (trackCursorAxis) trigger.addEventListener("pointermove", handlePointerMove, { signal });
-		}
-		trigger.addEventListener("focusin", handleFocusIn, { signal });
-		trigger.addEventListener("focusout", handleFocusOut, { signal });
-		return () => {
-			abortController.abort();
-			clearHoverTimeout();
-		};
-	}, [
-		delay,
-		closeDelay,
-		trackCursorAxis,
-		open,
-		setOpenState,
-		clearHoverTimeout,
-		updatePosition
-	]);
-	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%`);
-		else {
-			popup.style.setProperty("translate", `0 -100%`);
-			popup.style.setProperty("justify-self", alignment === "start" ? "anchor-start" : alignment === "end" ? "anchor-end" : "anchor-center");
-		}
-	}, [
-		placement,
-		sideOffset,
-		trackCursorAxis
-	]);
-	useEffect(() => {
-		if (!popupRef.current) return;
-		const resizeObserver = new ResizeObserver(checkCollision);
-		resizeObserver.observe(popupRef.current);
-		return () => {
-			resizeObserver.disconnect();
-		};
-	}, [checkCollision]);
-	const value = useMemo(() => ({
-		popupRef,
-		triggerRef,
-		open,
-		transitionStatus,
-		updatePositioning,
-		trackCursorAxis,
-		placement,
-		sideOffset,
-		collisionPadding
-	}), [
-		open,
-		transitionStatus,
-		updatePositioning,
-		trackCursorAxis,
-		placement,
-		sideOffset,
-		collisionPadding
-	]);
-	return /* @__PURE__ */ jsx(TooltipContext.Provider, {
-		value,
-		children
-	});
-}
-function TooltipTrigger({ children }) {
-	const { triggerRef, open } = useTooltipContext();
-	return cloneElement(Children.only(children), {
-		ref: triggerRef,
-		"data-popup-open": open ? "" : void 0
-	});
-}
-function TooltipPositioner({ side = "top", sideOffset = 0, collisionPadding = 0, children }) {
-	const { updatePositioning } = useTooltipContext();
-	useEffect(() => {
-		updatePositioning({
-			side,
-			sideOffset,
-			collisionPadding
-		});
-	}, [
-		side,
-		sideOffset,
-		collisionPadding,
-		updatePositioning
-	]);
-	return /* @__PURE__ */ jsx(Fragment, { children });
-}
-function TooltipPopup({ id, className = "", children }) {
-	const { popupRef, triggerRef, transitionStatus, placement } = useTooltipContext();
-	const triggerElement = triggerRef.current;
-	const uniqueId = useId();
-	const popupId = id ?? uniqueId;
-	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
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: popupRef,
-		id: popupId,
-		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]),
-		"data-side": placement,
-		"data-starting-style": transitionStatus === "initial" ? "" : void 0,
-		"data-open": transitionStatus === "initial" || transitionStatus === "open" ? "" : void 0,
-		"data-ending-style": transitionStatus === "close" || transitionStatus === "unmounted" ? "" : void 0,
-		"data-closed": transitionStatus === "close" || transitionStatus === "unmounted" ? "" : void 0,
-		children
-	});
-}
-const Tooltip = {
-	Root: TooltipRoot,
-	Trigger: TooltipTrigger,
-	Positioner: TooltipPositioner,
-	Popup: TooltipPopup
-};
-var Tooltip_default = Tooltip;
-
-//#endregion
-//#region src/components/VolumeSlider.tsx
-function useVolumeSliderRootState(props) {
-	const { orientation = "horizontal" } = 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
-	};
-}
-function useVolumeSliderRootProps(props, state) {
-	const { _fillWidth, _pointerWidth, _volumeText } = state.core.getState();
-	const { children, className, id, style, orientation = "horizontal" } = props;
-	return {
-		ref: useCallback((el) => {
-			if (!el) return;
-			state.core?.attach(el);
-		}, []),
-		id,
-		role: "slider",
-		tabIndex: 0,
-		"aria-label": "Volume",
-		"aria-valuemin": 0,
-		"aria-valuemax": 100,
-		"aria-valuenow": Math.round(state.volume * 100),
-		"aria-valuetext": _volumeText,
-		"aria-orientation": orientation,
-		"data-orientation": orientation,
-		"data-muted": state.muted,
-		"data-volume-level": state.volumeLevel,
-		className,
-		style: {
-			...style,
-			"--slider-fill": `${_fillWidth.toFixed(3)}%`,
-			"--slider-pointer": `${_pointerWidth.toFixed(3)}%`
-		},
-		children
-	};
-}
-function renderVolumeSliderRoot(props) {
-	return /* @__PURE__ */ jsx("div", { ...props });
-}
-const VolumeSliderRoot = toConnectedComponent(useVolumeSliderRootState, useVolumeSliderRootProps, renderVolumeSliderRoot, "VolumeSlider.Root");
-function useVolumeSliderTrackProps(props, context) {
-	return {
-		ref: useCallback((el) => {
-			context.core?.setState({ _trackElement: el });
-		}, []),
-		"data-orientation": context.orientation,
-		...props,
-		style: {
-			...props.style,
-			[context.orientation === "horizontal" ? "width" : "height"]: "100%"
-		}
-	};
-}
-function renderVolumeSliderTrack(props) {
-	return /* @__PURE__ */ jsx("div", { ...props });
-}
-const VolumeSliderTrack = toContextComponent(useVolumeSliderTrackProps, renderVolumeSliderTrack, "VolumeSlider.Track");
-function getVolumeSliderThumbProps(props, context) {
-	return {
-		"data-orientation": context.orientation,
-		...props,
-		style: {
-			...props.style,
-			[context.orientation === "horizontal" ? "insetInlineStart" : "insetBlockEnd"]: "var(--slider-fill)",
-			[context.orientation === "horizontal" ? "top" : "left"]: "50%",
-			translate: context.orientation === "horizontal" ? "-50% -50%" : "-50% 50%",
-			position: "absolute"
-		}
-	};
-}
-function renderVolumeSliderThumb(props) {
-	return /* @__PURE__ */ jsx("div", { ...props });
-}
-const VolumeSliderThumb = toContextComponent(getVolumeSliderThumbProps, renderVolumeSliderThumb, "VolumeSlider.Thumb");
-function getVolumeSliderProgressProps(props, context) {
-	return {
-		"data-orientation": context.orientation,
-		...props,
-		style: {
-			...props.style,
-			[context.orientation === "horizontal" ? "width" : "height"]: "var(--slider-fill, 0%)",
-			[context.orientation === "horizontal" ? "height" : "width"]: "100%",
-			[context.orientation === "horizontal" ? "top" : "bottom"]: "0",
-			position: "absolute"
-		}
-	};
-}
-function renderVolumeSliderProgress(props) {
-	return /* @__PURE__ */ jsx("div", { ...props });
-}
-const VolumeSliderProgress = toContextComponent(getVolumeSliderProgressProps, renderVolumeSliderProgress, "VolumeSlider.Progress");
-const VolumeSlider$1 = Object.assign({}, {
-	Root: VolumeSliderRoot,
-	Track: VolumeSliderTrack,
-	Thumb: VolumeSliderThumb,
-	Progress: VolumeSliderProgress
-});
-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-DmlupkvF.js.map