@videojs/react 0.1.0-preview.2

package/dist/VolumeSlider-DoR6idnJ.js

@@ -0,0 +1,905 @@
+import { a as useMediaStore, i as useMediaSelector } from "./store-DpQF8Ges.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 { jsx, jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, arrow, autoUpdate, flip, offset, safePolygon, shift, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, useTransitionStatus } from "@floating-ui/react";
+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, portalId = "@default_portal_id",...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__ */ jsxs("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]),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("div", {
+			id: portalId,
+			style: {
+				position: "absolute",
+				zIndex: 10
+			}
+		})]
+	});
+});
+
+//#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 [openReason, setOpenReason] = useState(null);
+	const { refs, floatingStyles, context } = useFloating({
+		open,
+		onOpenChange: (open$1, _event, reason) => {
+			setOpen(open$1);
+			setOpenReason(reason || null);
+		},
+		placement,
+		middleware: [
+			offset(sideOffset),
+			flip(),
+			shift()
+		],
+		whileElementsMounted: autoUpdate
+	});
+	const { status: transitionStatus } = useTransitionStatus(context);
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useHover(context, {
+			enabled: openOnHover,
+			mouseOnly: true,
+			move: false,
+			delay: {
+				open: delay,
+				close: closeDelay
+			},
+			handleClose: safePolygon({ blockPointerEvents: true })
+		}),
+		useFocus(context),
+		useDismiss(context),
+		useRole(context)
+	]);
+	const updatePositioning = useCallback((newPlacement, newSideOffset) => {
+		setPlacement(newPlacement);
+		setSideOffset(newSideOffset);
+	}, []);
+	const value = useMemo(() => ({
+		open,
+		setOpen,
+		openReason,
+		refs,
+		floatingStyles,
+		getReferenceProps,
+		getFloatingProps,
+		context,
+		updatePositioning,
+		transitionStatus
+	}), [
+		open,
+		openReason,
+		refs,
+		floatingStyles,
+		getReferenceProps,
+		getFloatingProps,
+		context,
+		updatePositioning,
+		transitionStatus
+	]);
+	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+		value,
+		children
+	});
+}
+function PopoverTrigger({ children }) {
+	const { refs, getReferenceProps, open } = usePopoverContext();
+	return cloneElement(Children.only(children), {
+		ref: refs.setReference,
+		...getReferenceProps(),
+		"data-popup-open": open ? "" : void 0
+	});
+}
+function PopoverPositioner({ side = "top", sideOffset = 5, children }) {
+	const { refs, floatingStyles, updatePositioning } = usePopoverContext();
+	useEffect(() => {
+		updatePositioning(side, sideOffset);
+	}, [
+		side,
+		sideOffset,
+		updatePositioning
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: refs.setFloating,
+		style: floatingStyles,
+		children
+	});
+}
+function PopoverPopup({ className, children }) {
+	const { getFloatingProps, context, transitionStatus } = usePopoverContext();
+	const { refs, placement } = context;
+	const triggerElement = refs.reference.current;
+	const dataAttributes = triggerElement?.attributes ? Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value])) : {};
+	return /* @__PURE__ */ jsx(FloatingFocusManager, {
+		context,
+		modal: false,
+		initialFocus: -1,
+		returnFocus: false,
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			...getFloatingProps(),
+			...dataAttributes,
+			"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
+		})
+	});
+}
+function PopoverPortal({ children, root, rootId = "@default_portal_id" }) {
+	return /* @__PURE__ */ jsx(FloatingPortal, {
+		root,
+		id: rootId,
+		children
+	});
+}
+const Popover = {
+	Root: PopoverRoot,
+	Trigger: PopoverTrigger,
+	Positioner: PopoverPositioner,
+	Popup: PopoverPopup,
+	Portal: PopoverPortal
+};
+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);
+const TooltipPositionerContext = createContext(null);
+function useTooltipContext() {
+	const context = useContext(TooltipContext);
+	if (!context) throw new Error("Tooltip components must be used within TooltipRoot");
+	return context;
+}
+function useTooltipPositionerContext() {
+	const context = useContext(TooltipPositionerContext);
+	if (!context) throw new Error("TooltipArrow must be used within TooltipPositioner");
+	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 arrowRef = useRef(null);
+	const { context } = useFloating({
+		open,
+		onOpenChange: setOpen,
+		placement,
+		middleware: [
+			offset(sideOffset),
+			flip(),
+			shift({ padding: collisionPadding }),
+			arrow({ element: arrowRef })
+		],
+		whileElementsMounted: autoUpdate
+	});
+	const { status: transitionStatus } = useTransitionStatus(context);
+	const hover = useHover(context, { delay: {
+		open: delay,
+		close: closeDelay
+	} });
+	const focus = useFocus(context);
+	const dismiss = useDismiss(context);
+	const role = useRole(context, { role: "tooltip" });
+	const clientPoint = useClientPoint(context, {
+		axis: trackCursorAxis || "both",
+		enabled: !!trackCursorAxis
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions(trackCursorAxis ? [
+		hover,
+		focus,
+		dismiss,
+		role,
+		clientPoint
+	] : [
+		hover,
+		focus,
+		dismiss,
+		role
+	]);
+	const updatePositioning = useCallback(({ side, sideOffset: sideOffset$1, collisionPadding: collisionPadding$1 }) => {
+		setPlacement(side);
+		setSideOffset(sideOffset$1);
+		setCollisionPadding(collisionPadding$1);
+	}, []);
+	const value = useMemo(() => ({
+		getReferenceProps,
+		getFloatingProps,
+		context,
+		updatePositioning,
+		arrowRef,
+		transitionStatus,
+		trackCursorAxis
+	}), [
+		getReferenceProps,
+		getFloatingProps,
+		context,
+		updatePositioning,
+		transitionStatus,
+		trackCursorAxis
+	]);
+	return /* @__PURE__ */ jsx(TooltipContext.Provider, {
+		value,
+		children
+	});
+}
+function TooltipTrigger({ children }) {
+	const { context, getReferenceProps } = useTooltipContext();
+	const { refs, open } = context;
+	return cloneElement(Children.only(children), {
+		ref: refs.setReference,
+		...getReferenceProps(),
+		"data-popup-open": open ? "" : void 0
+	});
+}
+function TooltipPositioner({ side = "top", sideOffset = 0, collisionPadding = 0, children }) {
+	const { context, updatePositioning, trackCursorAxis } = useTooltipContext();
+	const { refs, floatingStyles } = context;
+	useEffect(() => {
+		updatePositioning({
+			side,
+			sideOffset,
+			collisionPadding
+		});
+	}, [
+		side,
+		sideOffset,
+		collisionPadding,
+		updatePositioning
+	]);
+	const positionerContextValue = useMemo(() => ({ side }), [side]);
+	return /* @__PURE__ */ jsx(TooltipPositionerContext.Provider, {
+		value: positionerContextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: refs.setFloating,
+			style: {
+				...floatingStyles,
+				pointerEvents: trackCursorAxis ? "none" : void 0
+			},
+			children
+		})
+	});
+}
+function TooltipPopup({ className = "", children }) {
+	const { context, getFloatingProps, transitionStatus } = useTooltipContext();
+	const { refs, placement } = context;
+	const triggerElement = refs.reference.current;
+	const dataAttributes = triggerElement?.attributes ? Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value])) : {};
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		...getFloatingProps(),
+		...dataAttributes,
+		"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
+	});
+}
+function TooltipArrow({ className = "", children }) {
+	const { arrowRef, context } = useTooltipContext();
+	const { side } = useTooltipPositionerContext();
+	const { x: arrowX, y: arrowY } = context.middlewareData.arrow || {
+		x: 0,
+		y: 0
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: arrowRef,
+		className,
+		"aria-hidden": "true",
+		"data-side": side,
+		style: {
+			left: arrowX != null ? `${arrowX}px` : void 0,
+			top: arrowY != null ? `${arrowY}px` : void 0
+		},
+		children
+	});
+}
+function TooltipPortal({ children, root, rootId = "@default_portal_id" }) {
+	return /* @__PURE__ */ jsx(FloatingPortal, {
+		root,
+		id: rootId,
+		children
+	});
+}
+const Tooltip = {
+	Root: TooltipRoot,
+	Trigger: TooltipTrigger,
+	Positioner: TooltipPositioner,
+	Popup: TooltipPopup,
+	Arrow: TooltipArrow,
+	Portal: TooltipPortal
+};
+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-DoR6idnJ.js.map