@videojs/react 0.1.0-preview.10

package/dist/VolumeSlider-BSyqpW7V.js

@@ -0,0 +1,796 @@
+import { a as useMediaStore, i as useMediaSelector } from "./store-BYodyXVF.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 { Popover, TimeSlider, Tooltip, 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.getState();
+}
+
+//#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/utils/use-mutation-observer.ts
+/**
+* Custom React hook for observing DOM mutations using MutationObserver
+*
+* @param target - Element to observe (ref or element)
+* @param callback - Function called when mutations occur
+* @param options - MutationObserver options
+*/
+function useMutationObserver(target, callback, options = {
+	attributes: true,
+	childList: true,
+	subtree: true
+}) {
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	}, [callback]);
+	useEffect(() => {
+		const element = target && "current" in target ? target.current : target;
+		if (!element || !(element instanceof Element)) return;
+		const observer = new MutationObserver((mutations, obs) => {
+			callbackRef.current(mutations, obs);
+		});
+		observer.observe(element, options);
+		return () => {
+			observer.disconnect();
+		};
+	}, [target, options]);
+}
+
+//#endregion
+//#region src/components/Popover.tsx
+function usePopoverRootState(props) {
+	const { openOnHover = false, delay = 0, closeDelay = 0 } = props;
+	const [placement, setPlacement] = useState("top");
+	const [sideOffset, setSideOffset] = useState(5);
+	const [collisionPadding, setCollisionPadding] = useState(0);
+	const popupId = useId().replace(/^:([^:]+):$/, "«$1»");
+	const coreState = useCore(Popover, {
+		openOnHover,
+		delay,
+		closeDelay,
+		placement,
+		sideOffset,
+		collisionPadding
+	});
+	const updatePositioning = useCallback((newPlacement, newSideOffset, newCollisionPadding) => {
+		setPlacement(newPlacement);
+		setSideOffset(newSideOffset);
+		setCollisionPadding(newCollisionPadding);
+	}, []);
+	return {
+		...coreState,
+		popupId,
+		updatePositioning
+	};
+}
+function usePopoverRootProps(props, _state) {
+	return { children: props.children };
+}
+function renderPopoverRoot(props) {
+	return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+}
+const PopoverRoot = toConnectedComponent(usePopoverRootState, usePopoverRootProps, renderPopoverRoot, "Popover.Root");
+function usePopoverTriggerProps(props, context) {
+	const { children } = props;
+	const { _setTriggerElement, _open, popupId } = context;
+	const child = Children.only(children);
+	const existingStyle = child.props?.style || {};
+	return {
+		child,
+		triggerProps: {
+			ref: _setTriggerElement,
+			"data-popup-open": _open ? "" : void 0,
+			commandfor: popupId ?? void 0,
+			style: {
+				...existingStyle,
+				...popupId ? { anchorName: `--${popupId}` } : {}
+			}
+		}
+	};
+}
+function renderPopoverTrigger(props) {
+	return cloneElement(props.child, props.triggerProps);
+}
+const PopoverTrigger = toContextComponent(usePopoverTriggerProps, renderPopoverTrigger, "Popover.Trigger");
+function usePopoverPositionerProps(props, context) {
+	const { side = "top", sideOffset = 5, collisionPadding = 0, collisionBoundary, children } = props;
+	const { updatePositioning, _setCollisionBoundaryElement } = context;
+	useEffect(() => {
+		updatePositioning(side, sideOffset, collisionPadding);
+	}, [
+		side,
+		sideOffset,
+		collisionPadding,
+		updatePositioning
+	]);
+	useEffect(() => {
+		if (collisionBoundary) _setCollisionBoundaryElement(collisionBoundary);
+	}, [collisionBoundary, _setCollisionBoundaryElement]);
+	return { children };
+}
+function renderPopoverPositioner(props) {
+	return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+}
+const PopoverPositioner = toContextComponent(usePopoverPositionerProps, renderPopoverPositioner, "Popover.Positioner");
+function usePopoverPopupProps(props, context) {
+	const { className, style, children, id } = props;
+	const { _setPopoverElement, _transitionStatus, placement, popupId, _popoverStyle, _triggerElement, _popoverElement, _setCollisionBoundaryElement, _collisionBoundaryElement } = context;
+	useEffect(() => {
+		if (!_popoverElement) return;
+		if (!_collisionBoundaryElement) _setCollisionBoundaryElement(_popoverElement.closest("[data-media-container]"));
+	}, [
+		_popoverElement,
+		_collisionBoundaryElement,
+		_setCollisionBoundaryElement
+	]);
+	const [dataAttrs, setDataAttrs] = useState(() => getDataAttributes(_triggerElement));
+	useEffect(() => {
+		setDataAttrs(getDataAttributes(_triggerElement));
+	}, [_triggerElement]);
+	useMutationObserver(_triggerElement, () => {
+		setDataAttrs(getDataAttributes(_triggerElement));
+	}, { attributes: true });
+	return {
+		ref: _setPopoverElement,
+		id: id ?? popupId ?? void 0,
+		className,
+		popover: "manual",
+		style: {
+			..._popoverStyle,
+			...style
+		},
+		...dataAttrs,
+		"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 getDataAttributes(element) {
+	if (!element) return void 0;
+	return Object.fromEntries(Array.from(element.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value]));
+}
+function renderPopoverPopup(props) {
+	return /* @__PURE__ */ jsx("div", { ...props });
+}
+const PopoverPopup = toContextComponent(usePopoverPopupProps, renderPopoverPopup, "Popover.Popup");
+const Popover$1 = Object.assign({}, {
+	Root: PopoverRoot,
+	Trigger: PopoverTrigger,
+	Positioner: PopoverPositioner,
+	Popup: PopoverPopup
+});
+var Popover_default = Popover$1;
+
+//#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]);
+	return {
+		...useCore(TimeSlider, {
+			...mediaState,
+			...mediaMethods
+		}),
+		orientation
+	};
+}
+function useTimeSliderRootProps(props, state) {
+	const { children, className, id, style, orientation = "horizontal", ref } = props;
+	return {
+		ref: useComposedRefs(ref, state._setRootElement),
+		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": `${state._currentTimeText} of ${state._durationText}`,
+		"aria-orientation": orientation,
+		"data-orientation": orientation,
+		"data-current-time": state.currentTime,
+		"data-duration": state.duration,
+		className,
+		style: {
+			...style,
+			"--slider-fill": `${state._fillWidth.toFixed(3)}%`,
+			"--slider-pointer": `${(state._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: context._setTrackElement,
+		"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
+function useTooltipRootState(props) {
+	const { delay = 0, closeDelay = 0, trackCursorAxis } = props;
+	const [placement, setPlacement] = useState("top");
+	const [sideOffset, setSideOffset] = useState(0);
+	const [collisionPadding, setCollisionPadding] = useState(0);
+	const popupId = useId().replace(/^:([^:]+):$/, "«$1»");
+	const coreState = useCore(Tooltip, {
+		delay,
+		closeDelay,
+		placement,
+		sideOffset,
+		collisionPadding,
+		trackCursorAxis
+	});
+	const updatePositioning = useCallback((newPlacement, newSideOffset, newCollisionPadding) => {
+		setPlacement(newPlacement);
+		setSideOffset(newSideOffset);
+		setCollisionPadding(newCollisionPadding);
+	}, []);
+	return {
+		...coreState,
+		popupId,
+		updatePositioning
+	};
+}
+function useTooltipRootProps(props, _state) {
+	return { children: props.children };
+}
+function renderTooltipRoot(props) {
+	return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+}
+const TooltipRoot = toConnectedComponent(useTooltipRootState, useTooltipRootProps, renderTooltipRoot, "Tooltip.Root");
+function useTooltipTriggerProps(props, context) {
+	return usePopoverTriggerProps(props, context);
+}
+function renderTooltipTrigger(props) {
+	return cloneElement(props.child, props.triggerProps);
+}
+const TooltipTrigger = toContextComponent(useTooltipTriggerProps, renderTooltipTrigger, "Tooltip.Trigger");
+function useTooltipPositionerProps(props, context) {
+	return usePopoverPositionerProps(props, context);
+}
+function renderTooltipPositioner(props) {
+	return /* @__PURE__ */ jsx(Fragment, { children: props.children });
+}
+const TooltipPositioner = toContextComponent(useTooltipPositionerProps, renderTooltipPositioner, "Tooltip.Positioner");
+function useTooltipPopupProps(props, context) {
+	return usePopoverPopupProps(props, context);
+}
+function renderTooltipPopup(props) {
+	return /* @__PURE__ */ jsx("div", { ...props });
+}
+const TooltipPopup = toContextComponent(useTooltipPopupProps, renderTooltipPopup, "Tooltip.Popup");
+const Tooltip$1 = Object.assign({}, {
+	Root: TooltipRoot,
+	Trigger: TooltipTrigger,
+	Positioner: TooltipPositioner,
+	Popup: TooltipPopup
+});
+var Tooltip_default = Tooltip$1;
+
+//#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]);
+	return {
+		...useCore(VolumeSlider, {
+			...mediaState,
+			...mediaMethods
+		}),
+		orientation
+	};
+}
+function useVolumeSliderRootProps(props, state) {
+	const { children, className, id, style, orientation = "horizontal", ref } = props;
+	return {
+		ref: useComposedRefs(ref, state._setRootElement),
+		id,
+		role: "slider",
+		tabIndex: 0,
+		"aria-label": "Volume",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": Math.round(state.volume * 100),
+		"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": `${state._fillWidth.toFixed(3)}%`,
+			"--slider-pointer": `${(state._pointerWidth * 100).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: context._setTrackElement,
+		"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$1 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$1 as r, PreviewTimeDisplay_default as s, VolumeSlider$1 as t, PlayButton as u, CurrentTimeDisplay as v };
+//# sourceMappingURL=VolumeSlider-BSyqpW7V.js.map