react-media-kit 0.1.0

package/dist/index.js

@@ -0,0 +1,1585 @@
+"use client";
+
+import { t as __exportAll } from "./rolldown-runtime-w6R9maHv.js";
+import { createContext, use, useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/utils/time.ts
+function getTimeParts(duration) {
+	const timeParts = {
+		hours: 0,
+		minutes: 0,
+		seconds: 0
+	};
+	if (!Number.isFinite(duration) || duration < 0) return timeParts;
+	timeParts.hours = Math.floor(duration / 3600);
+	duration %= 3600;
+	timeParts.minutes = Math.floor(duration / 60);
+	duration %= 60;
+	timeParts.seconds = Math.floor(duration);
+	return timeParts;
+}
+const padZeros = (value) => String(value).padStart(2, "0");
+function getTimeFormat(time) {
+	const { hours, minutes, seconds } = getTimeParts(time);
+	return (hours ? [
+		hours,
+		minutes,
+		seconds
+	] : [minutes, seconds]).map((v, idx) => idx === 0 ? String(v) : padZeros(v)).join(":");
+}
+function getDurationTimeFormat(time) {
+	const { hours, minutes, seconds } = getTimeParts(time);
+	return `PT${hours}H${minutes}M${seconds}S`;
+}
+function createTimeLabelFormatter(locale) {
+	const createNumberFormatter = (unit) => new Intl.NumberFormat(locale, {
+		style: "unit",
+		unit,
+		unitDisplay: "long"
+	});
+	const numberFormatters = {
+		hour: createNumberFormatter("hour"),
+		minute: createNumberFormatter("minute"),
+		second: createNumberFormatter("second")
+	};
+	const listFormatter = new Intl.ListFormat(locale, {
+		style: "long",
+		type: "conjunction"
+	});
+	return (time) => {
+		const { hours, minutes, seconds } = getTimeParts(time);
+		const timeValues = [
+			hours && numberFormatters["hour"].format(hours),
+			minutes && numberFormatters["minute"].format(minutes),
+			seconds && numberFormatters["second"].format(seconds)
+		].filter(Boolean);
+		if (timeValues.length === 0) return numberFormatters["second"].format(0);
+		return listFormatter.format(timeValues);
+	};
+}
+const normalizeTime = (time) => Number.isFinite(time) ? time : 0;
+
+//#endregion
+//#region src/state/playerReducer.ts
+function playerReducer(state, action) {
+	switch (action.type) {
+		case "PLAY": return {
+			...state,
+			isPlaying: true
+		};
+		case "PAUSE": return {
+			...state,
+			isPlaying: false
+		};
+		case "TOGGLE": return {
+			...state,
+			isPlaying: !state.isPlaying
+		};
+		case "INIT": {
+			const { durationInSec, volume, playbackRate } = action.payload;
+			return {
+				...state,
+				durationInSec: normalizeTime(durationInSec),
+				volume,
+				playbackRate,
+				state: "ready"
+			};
+		}
+		case "TIME_UPDATE": {
+			const { time } = action.payload;
+			return {
+				...state,
+				currentTimeInSec: normalizeTime(time),
+				optimisticTimeInSec: null
+			};
+		}
+		case "SEEKING": {
+			const { time, bufferedEnd } = action.payload;
+			return {
+				...state,
+				optimisticTimeInSec: normalizeTime(time),
+				bufferedEndInSec: bufferedEnd
+			};
+		}
+		case "FULLSCREEN": {
+			const { enabled } = action.payload;
+			return {
+				...state,
+				isFullscreen: enabled
+			};
+		}
+		case "PIP": {
+			const { enabled } = action.payload;
+			return {
+				...state,
+				isPictureInPicture: enabled
+			};
+		}
+		case "MUTE": {
+			const { muted } = action.payload;
+			return {
+				...state,
+				isMuted: muted
+			};
+		}
+		case "VOLUME_CHANGE": {
+			const { volume } = action.payload;
+			return {
+				...state,
+				volume
+			};
+		}
+		case "PLAYBACK_RATE_CHANGE": {
+			const { playbackRate } = action.payload;
+			return {
+				...state,
+				playbackRate
+			};
+		}
+		case "ERROR": return {
+			...state,
+			state: "error"
+		};
+		case "LOADING": return {
+			...state,
+			state: "loading"
+		};
+		case "PROGRESS": {
+			const { bufferedEnd } = action.payload;
+			return {
+				...state,
+				bufferedEndInSec: bufferedEnd
+			};
+		}
+		case "BUFFERING": {
+			const { isBuffering } = action.payload;
+			return {
+				...state,
+				isBuffering
+			};
+		}
+	}
+}
+
+//#endregion
+//#region src/state/seekQueue.ts
+function createSeekQueue() {
+	let queue = { isPending: false };
+	function set(value) {
+		queue = {
+			isPending: true,
+			value
+		};
+	}
+	function pop() {
+		const state = { ...queue };
+		queue = { isPending: false };
+		return state;
+	}
+	function get() {
+		return queue;
+	}
+	return {
+		set,
+		pop,
+		get
+	};
+}
+
+//#endregion
+//#region src/constants.ts
+const VOLUME_INTERVAL = .05;
+const KEY_NAMES = {
+	SPACE: " ",
+	ENTER: "ENTER",
+	ARROW_LEFT: "ARROWLEFT",
+	ARROW_RIGHT: "ARROWRIGHT",
+	ARROW_UP: "ARROWUP",
+	ARROW_DOWN: "ARROWDOWN",
+	HOME: "HOME",
+	END: "END",
+	MUTE: "M",
+	FULLSCREEN: "F"
+};
+const CSS_VARS = {
+	progressPercent: "--progress-percent",
+	bufferPercent: "--buffer-percent"
+};
+const DATA_ATTRS = {
+	mediaPending: "data-media-pending",
+	mediaLoading: "data-media-loading",
+	mediaReady: "data-media-ready",
+	mediaError: "data-media-error",
+	playing: "data-playing",
+	muted: "data-muted",
+	fullscreen: "data-fullscreen",
+	pip: "data-pip",
+	direction: "data-direction",
+	dragging: "data-dragging",
+	active: "data-active",
+	elapsedMode: "data-elapsed-mode"
+};
+
+//#endregion
+//#region src/utils/volume.ts
+const clampVolume = (volume) => Math.max(Math.min(volume, 1), 0);
+
+//#endregion
+//#region src/utils/buffer.ts
+function getBufferedEnd(buffered, time) {
+	if (!buffered) return time;
+	for (let i = 1, len = buffered.length; i <= len; i++) {
+		const idx = len - i;
+		const start = buffered.start(idx);
+		const end = buffered.end(idx);
+		if (time >= start && time <= end) return end;
+	}
+	return time;
+}
+
+//#endregion
+//#region src/state/store.ts
+const initialState = Object.freeze({
+	state: "pending",
+	isPlaying: false,
+	isMuted: false,
+	isFullscreen: false,
+	isPictureInPicture: false,
+	isBuffering: false,
+	durationInSec: 0,
+	currentTimeInSec: 0,
+	optimisticTimeInSec: null,
+	bufferedEndInSec: null,
+	volume: .5,
+	playbackRate: 1
+});
+function createPlayerStore() {
+	let state = { ...initialState };
+	const seekQueue = createSeekQueue();
+	const listeners = /* @__PURE__ */ new Set();
+	const errorListeners = /* @__PURE__ */ new Set();
+	let abortController = new AbortController();
+	let media = null;
+	let container = null;
+	const dispatch = (action) => {
+		state = playerReducer(state, action);
+		listeners.forEach((l) => l());
+	};
+	const handlePlay = () => dispatch({ type: "PLAY" });
+	const handlePause = () => dispatch({ type: "PAUSE" });
+	const play = async () => {
+		try {
+			await media?.play();
+		} catch (error) {
+			notifyAboutError({
+				type: "play",
+				error
+			});
+		}
+	};
+	const pause = () => media?.pause();
+	const toggle = () => state.isPlaying ? pause() : play();
+	const mute = () => media && (media.muted = true);
+	const unmute = () => media && (media.muted = false);
+	const toggleMute = () => state.isMuted ? unmute() : mute();
+	const stepVolume = (delta) => {
+		if (!media) return;
+		const newValue = clampVolume(media.volume + delta);
+		media.volume = newValue;
+		media.muted = false;
+	};
+	const setVolume = (volume) => {
+		if (!media) return;
+		const newValue = clampVolume(volume);
+		media.volume = newValue;
+		media.muted = false;
+	};
+	const toggleFullscreen = async () => {
+		try {
+			if (state.isFullscreen) await document.exitFullscreen();
+			else await container?.requestFullscreen();
+		} catch (error) {
+			notifyAboutError({
+				type: "fullscreen",
+				error
+			});
+		}
+	};
+	const togglePip = async () => {
+		try {
+			if (!(media instanceof HTMLVideoElement)) throw new Error("Picture-in-picture is only supported for video elements");
+			if (state.isPictureInPicture) await document.exitPictureInPicture();
+			else await media.requestPictureInPicture();
+		} catch (error) {
+			notifyAboutError({
+				type: "pip",
+				error
+			});
+		}
+	};
+	const stepPlaybackRate = (delta) => {
+		if (!media) return;
+		media.playbackRate = media.playbackRate + delta;
+	};
+	const setPlaybackRate = (rate) => {
+		if (!media) return;
+		media.playbackRate = rate;
+	};
+	function skip(delta) {
+		if (!media) return;
+		seek(Math.max(Math.min(media.currentTime + delta, state.durationInSec), 0));
+	}
+	function handleTimeUpdate() {
+		dispatch({
+			type: "TIME_UPDATE",
+			payload: { time: this.currentTime }
+		});
+	}
+	function seek(time) {
+		if (!media) return;
+		if (media.seeking) seekQueue.set(time);
+		else media.currentTime = time;
+		dispatch({
+			type: "SEEKING",
+			payload: {
+				time,
+				bufferedEnd: getBufferedEnd(media.buffered, time)
+			}
+		});
+	}
+	function handleSeeking() {
+		if (seekQueue.get().isPending) return;
+		dispatch({
+			type: "SEEKING",
+			payload: {
+				time: this.currentTime,
+				bufferedEnd: getBufferedEnd(this.buffered, this.currentTime)
+			}
+		});
+	}
+	function handleSeeked() {
+		const seekQueueState = seekQueue.pop();
+		if (seekQueueState.isPending && media) media.currentTime = seekQueueState.value;
+	}
+	function handleInit() {
+		const { duration, volume, playbackRate } = this;
+		dispatch({
+			type: "INIT",
+			payload: {
+				durationInSec: duration,
+				volume,
+				playbackRate
+			}
+		});
+	}
+	function handleFullscreen() {
+		dispatch({
+			type: "FULLSCREEN",
+			payload: { enabled: document.fullscreenElement === container }
+		});
+	}
+	function handlePipEnter() {
+		dispatch({
+			type: "PIP",
+			payload: { enabled: true }
+		});
+	}
+	function handlePipLeave() {
+		dispatch({
+			type: "PIP",
+			payload: { enabled: false }
+		});
+	}
+	function handleVolumeChange() {
+		if (state.isMuted !== this.muted) dispatch({
+			type: "MUTE",
+			payload: { muted: this.muted }
+		});
+		if (state.volume !== this.volume) dispatch({
+			type: "VOLUME_CHANGE",
+			payload: { volume: this.volume }
+		});
+	}
+	function handleRateChange() {
+		if (state.playbackRate !== this.playbackRate) dispatch({
+			type: "PLAYBACK_RATE_CHANGE",
+			payload: { playbackRate: this.playbackRate }
+		});
+	}
+	function handleError() {
+		dispatch({ type: "ERROR" });
+		notifyAboutError({
+			type: "media",
+			error: this.error
+		});
+	}
+	function handleLoading() {
+		dispatch({ type: "LOADING" });
+	}
+	function handleBufferingStart() {
+		if (!state.isBuffering) dispatch({
+			type: "BUFFERING",
+			payload: { isBuffering: true }
+		});
+	}
+	function handleBufferingEnd() {
+		if (state.isBuffering) dispatch({
+			type: "BUFFERING",
+			payload: { isBuffering: false }
+		});
+	}
+	function handleProgress() {
+		const time = state.optimisticTimeInSec ?? state.currentTimeInSec;
+		dispatch({
+			type: "PROGRESS",
+			payload: { bufferedEnd: getBufferedEnd(media?.buffered, time) }
+		});
+	}
+	function init(mediaEl, containerEl) {
+		media = mediaEl;
+		container = containerEl;
+		const signalConfig = { signal: abortController.signal };
+		mediaEl.addEventListener("loadedmetadata", handleInit, signalConfig);
+		mediaEl.addEventListener("error", handleError, signalConfig);
+		mediaEl.addEventListener("loadstart", handleLoading, signalConfig);
+		mediaEl.addEventListener("play", handlePlay, signalConfig);
+		mediaEl.addEventListener("pause", handlePause, signalConfig);
+		mediaEl.addEventListener("ratechange", handleRateChange, signalConfig);
+		mediaEl.addEventListener("seeking", handleSeeking, signalConfig);
+		mediaEl.addEventListener("seeked", handleSeeked, signalConfig);
+		mediaEl.addEventListener("timeupdate", handleTimeUpdate, signalConfig);
+		mediaEl.addEventListener("volumechange", handleVolumeChange, signalConfig);
+		mediaEl.addEventListener("progress", handleProgress, signalConfig);
+		mediaEl.addEventListener("waiting", handleBufferingStart, signalConfig);
+		mediaEl.addEventListener("playing", handleBufferingEnd, signalConfig);
+		mediaEl.addEventListener("canplay", handleBufferingEnd, signalConfig);
+		if (mediaEl instanceof HTMLVideoElement) {
+			mediaEl.addEventListener("enterpictureinpicture", handlePipEnter, signalConfig);
+			mediaEl.addEventListener("leavepictureinpicture", handlePipLeave, signalConfig);
+		}
+		containerEl.addEventListener("fullscreenchange", handleFullscreen, signalConfig);
+	}
+	function destroy() {
+		abortController.abort();
+		abortController = new AbortController();
+		listeners.clear();
+		errorListeners.clear();
+	}
+	function subscribe(listener) {
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	}
+	const notifyAboutError = (playerError) => {
+		errorListeners.forEach((l) => l(playerError));
+	};
+	const subscribeToErrors = (cb) => {
+		errorListeners.add(cb);
+		return () => {
+			errorListeners.delete(cb);
+		};
+	};
+	const getSnapshot = () => state;
+	function subscribeWithSelector(selector, listener) {
+		let prev = selector(getSnapshot());
+		return subscribe(() => {
+			const next = selector(getSnapshot());
+			if (Object.is(next, prev)) return;
+			prev = next;
+			listener(next);
+		});
+	}
+	return {
+		controls: {
+			play,
+			pause,
+			toggle,
+			seek,
+			skip,
+			toggleFullscreen,
+			togglePip,
+			toggleMute,
+			mute,
+			unmute,
+			stepVolume,
+			setVolume,
+			stepPlaybackRate,
+			setPlaybackRate
+		},
+		subscribe,
+		subscribeWithSelector,
+		subscribeToErrors,
+		init,
+		destroy,
+		getSnapshot
+	};
+}
+
+//#endregion
+//#region src/state/PlayerContext.tsx
+const PlayerContext = createContext(null);
+const usePlayerSubscription = () => {
+	const ctx = use(PlayerContext);
+	if (!ctx) throw new Error("usePlayerSubscription used outside of the PlayerProvider!");
+	return ctx;
+};
+const usePlayerCtx = () => {
+	const ctx = use(PlayerContext);
+	if (!ctx) throw new Error("usePlayerCtx used outside of the PlayerProvider!");
+	const { lang, mediaEl, containerEl } = ctx;
+	return {
+		lang,
+		mediaEl,
+		containerEl
+	};
+};
+function usePlayer(selector) {
+	const { subscribe, getSnapshot } = usePlayerSubscription();
+	return useSyncExternalStore(subscribe, () => selector(getSnapshot()));
+}
+function usePlayerControls() {
+	const { controls } = usePlayerSubscription();
+	return controls;
+}
+
+//#endregion
+//#region src/hooks/useMergeRefs.ts
+function useMergeRefs(...refs) {
+	return useCallback((node) => {
+		const cleanups = refs.map((ref) => {
+			if (!ref) return null;
+			if (typeof ref === "function") return ref(node);
+			ref.current = node;
+			return null;
+		});
+		return () => {
+			refs.forEach((ref, idx) => {
+				if (!ref) return;
+				if (typeof ref === "function") {
+					const refCleanup = cleanups[idx];
+					if (refCleanup == null) ref(null);
+					else refCleanup();
+				} else ref.current = null;
+			});
+		};
+	}, refs);
+}
+
+//#endregion
+//#region src/utils/attributes.ts
+const setDataAttr = (condition) => condition || void 0;
+
+//#endregion
+//#region src/hooks/useMediaAttributes.ts
+function useMediaAttributes() {
+	const state = usePlayer((s) => s.state);
+	return {
+		[DATA_ATTRS.mediaPending]: setDataAttr(state === "pending"),
+		[DATA_ATTRS.mediaLoading]: setDataAttr(state === "loading"),
+		[DATA_ATTRS.mediaReady]: setDataAttr(state === "ready"),
+		[DATA_ATTRS.mediaError]: setDataAttr(state === "error")
+	};
+}
+
+//#endregion
+//#region src/components/audio/player/AudioPlayer.tsx
+function AudioPlayer({ ref, ...props }) {
+	const { mediaEl } = usePlayerCtx();
+	const mergedRef = useMergeRefs(mediaEl, ref);
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx("audio", {
+		ref: mergedRef,
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/audio/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({ Player: () => AudioPlayer });
+
+//#endregion
+//#region src/components/controls/root/ControlsRoot.tsx
+function ControlsRoot(props) {
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/controls/index.parts.ts
+var index_parts_exports$1 = /* @__PURE__ */ __exportAll({ Root: () => ControlsRoot });
+
+//#endregion
+//#region src/utils/handlers.ts
+const composeHandlers = (...handlers) => {
+	return (event) => {
+		for (const handler of handlers) {
+			if (event.defaultPrevented) return;
+			handler?.(event);
+		}
+	};
+};
+const normalizeKeyCode = (key) => key.toUpperCase();
+
+//#endregion
+//#region src/components/fullscreenButton/root/FullscreenButtonRoot.tsx
+function FullscreenButtonRoot({ onClick, ...props }) {
+	const { toggleFullscreen } = usePlayerControls();
+	const mediaDataAttrs = useMediaAttributes();
+	const isFullscreen = usePlayer((s) => s.isFullscreen);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+		...props,
+		type: "button",
+		onClick: composeHandlers(onClick, toggleFullscreen),
+		[DATA_ATTRS.fullscreen]: setDataAttr(isFullscreen),
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/fullscreenButton/index.parts.ts
+var index_parts_exports$2 = /* @__PURE__ */ __exportAll({ Root: () => FullscreenButtonRoot });
+
+//#endregion
+//#region src/components/pipButton/root/PipButtonRoot.tsx
+function PipButtonRoot({ onClick, ...props }) {
+	const { togglePip } = usePlayerControls();
+	const mediaDataAttrs = useMediaAttributes();
+	const isPictureInPicture = usePlayer((s) => s.isPictureInPicture);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": isPictureInPicture ? "Exit picture-in-picture" : "Enter picture-in-picture",
+		...props,
+		type: "button",
+		onClick: composeHandlers(onClick, togglePip),
+		[DATA_ATTRS.pip]: setDataAttr(isPictureInPicture),
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/pipButton/index.parts.ts
+var index_parts_exports$3 = /* @__PURE__ */ __exportAll({ Root: () => PipButtonRoot });
+
+//#endregion
+//#region src/components/playbackRateButton/root/PlaybackRateButtonRoot.tsx
+function PlaybackRateButtonRoot({ playbackRate, onClick, ...props }) {
+	const { setPlaybackRate } = usePlayerControls();
+	const mediaDataAttrs = useMediaAttributes();
+	const activePlaybackRate = usePlayer((s) => s.playbackRate);
+	const handleClick = () => setPlaybackRate(playbackRate);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": `Playback speed: ${playbackRate}x`,
+		...props,
+		type: "button",
+		onClick: composeHandlers(onClick, handleClick),
+		[DATA_ATTRS.active]: setDataAttr(activePlaybackRate === playbackRate),
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/playbackRateButton/index.parts.ts
+var index_parts_exports$5 = /* @__PURE__ */ __exportAll({ Root: () => PlaybackRateButtonRoot });
+
+//#endregion
+//#region src/components/playButton/root/PlayButtonRoot.tsx
+function PlayButtonRoot({ onClick, ...props }) {
+	const { toggle } = usePlayerControls();
+	const mediaDataAttrs = useMediaAttributes();
+	const isPlaying = usePlayer((s) => s.isPlaying);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": isPlaying ? "Pause video" : "Play video",
+		...props,
+		type: "button",
+		onClick: composeHandlers(onClick, toggle),
+		[DATA_ATTRS.playing]: setDataAttr(isPlaying),
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/playButton/index.parts.ts
+var index_parts_exports$4 = /* @__PURE__ */ __exportAll({ Root: () => PlayButtonRoot });
+
+//#endregion
+//#region src/components/player/root/PlayerRoot.tsx
+const PlayerRoot = ({ children, lang, onError }) => {
+	const [state] = useState(createPlayerStore);
+	const mediaRef = useRef(null);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		if (!mediaRef.current || !containerRef.current) return;
+		state.init(mediaRef.current, containerRef.current);
+		return state.destroy;
+	}, [state]);
+	const subscribeErrorsEvent = useEffectEvent((state) => {
+		if (typeof onError !== "function") return;
+		state.subscribeToErrors(onError);
+	});
+	useEffect(() => {
+		return subscribeErrorsEvent(state);
+	}, [state]);
+	const value = useMemo(() => ({
+		...state,
+		mediaEl: mediaRef,
+		containerEl: containerRef,
+		lang
+	}), [state, lang]);
+	return /* @__PURE__ */ jsx(PlayerContext, {
+		value,
+		children
+	});
+};
+
+//#endregion
+//#region src/components/player/container/PlayerContainer.tsx
+const NATIVE_ACTIVATION_TAGS = /* @__PURE__ */ new Set([
+	"BUTTON",
+	"INPUT",
+	"SELECT",
+	"TEXTAREA",
+	"A"
+]);
+function PlayerContainer({ onKeyDown, style, ref, ...props }) {
+	const { containerEl } = usePlayerCtx();
+	const { toggle, toggleMute, toggleFullscreen, skip, stepVolume } = usePlayerControls();
+	const mergedRef = useMergeRefs(containerEl, ref);
+	const mediaDataAttrs = useMediaAttributes();
+	const isFullscreen = usePlayer((s) => s.isFullscreen);
+	const isPictureInPicture = usePlayer((s) => s.isPictureInPicture);
+	const handleKeyDown = (e) => {
+		if (e.defaultPrevented) return;
+		const key = normalizeKeyCode(e.key);
+		if ((key === KEY_NAMES.SPACE || key === KEY_NAMES.ENTER) && NATIVE_ACTIVATION_TAGS.has(e.target.tagName)) return;
+		switch (key) {
+			case KEY_NAMES.SPACE:
+			case KEY_NAMES.ENTER:
+				e.preventDefault();
+				return toggle();
+			case KEY_NAMES.ARROW_LEFT:
+				e.preventDefault();
+				return skip(-5);
+			case KEY_NAMES.ARROW_RIGHT:
+				e.preventDefault();
+				return skip(5);
+			case KEY_NAMES.ARROW_UP:
+				e.preventDefault();
+				return stepVolume(VOLUME_INTERVAL);
+			case KEY_NAMES.ARROW_DOWN:
+				e.preventDefault();
+				return stepVolume(-VOLUME_INTERVAL);
+			case KEY_NAMES.MUTE: return toggleMute();
+			case KEY_NAMES.FULLSCREEN: return toggleFullscreen();
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergedRef,
+		style: {
+			...style,
+			position: "relative"
+		},
+		...props,
+		onKeyDown: composeHandlers(onKeyDown, handleKeyDown),
+		[DATA_ATTRS.fullscreen]: setDataAttr(isFullscreen),
+		[DATA_ATTRS.pip]: setDataAttr(isPictureInPicture),
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/player/index.parts.ts
+var index_parts_exports$6 = /* @__PURE__ */ __exportAll({
+	Container: () => PlayerContainer,
+	Root: () => PlayerRoot
+});
+
+//#endregion
+//#region src/hooks/useAnimateOnPlay.ts
+function useAnimateOnPlay({ draw: onDraw, intervalMs }) {
+	const { subscribe, subscribeWithSelector, getSnapshot } = usePlayerSubscription();
+	const draw = useEffectEvent(onDraw);
+	useEffect(() => {
+		let animateFrame = null;
+		let prevTime = 0;
+		const animate = (time) => {
+			if (time - prevTime >= intervalMs) {
+				draw();
+				prevTime = time;
+			}
+			animateFrame = requestAnimationFrame(animate);
+		};
+		const startLoop = () => {
+			prevTime = 0;
+			animateFrame = requestAnimationFrame(animate);
+		};
+		const stopLoop = () => {
+			if (animateFrame === null) return;
+			cancelAnimationFrame(animateFrame);
+			animateFrame = null;
+		};
+		const unsubscribe = subscribeWithSelector((s) => s.isPlaying, (isPlaying) => {
+			if (isPlaying) startLoop();
+			else {
+				stopLoop();
+				draw();
+			}
+		});
+		const unsubscribeAny = subscribe(() => !getSnapshot().isPlaying && draw());
+		if (getSnapshot().isPlaying) startLoop();
+		else draw();
+		return () => {
+			unsubscribe();
+			unsubscribeAny();
+			stopLoop();
+		};
+	}, [
+		intervalMs,
+		getSnapshot,
+		subscribe,
+		subscribeWithSelector
+	]);
+}
+
+//#endregion
+//#region src/utils/math.ts
+const toPercent = (value) => value * 100;
+const safeDivide = (divident, divisor) => divisor === 0 ? 0 : divident / divisor;
+
+//#endregion
+//#region src/components/seekbar/root/useSeekbarTime.ts
+const UPDATE_INTERVAL_MS$1 = 25;
+function useSeekbarTime(sliderEl) {
+	const { lang, mediaEl } = usePlayerCtx();
+	const { getSnapshot } = usePlayerSubscription();
+	const getTimeLabel = useMemo(() => createTimeLabelFormatter(lang), [lang]);
+	const draw = useCallback(() => {
+		if (!mediaEl.current || !sliderEl.current) return;
+		const { optimisticTimeInSec, durationInSec } = getSnapshot();
+		const { currentTime } = mediaEl.current;
+		const time = optimisticTimeInSec ?? currentTime;
+		const elapsed = toPercent(safeDivide(time, durationInSec));
+		const totalElapsedTimeLabel = `${getTimeLabel(time)} / ${getTimeLabel(durationInSec)}`;
+		sliderEl.current.style.setProperty(CSS_VARS.progressPercent, elapsed.toFixed(2));
+		sliderEl.current.setAttribute("aria-valuetext", totalElapsedTimeLabel);
+		sliderEl.current.setAttribute("aria-valuenow", String(Math.floor(time)));
+		sliderEl.current.setAttribute("aria-valuemax", String(Math.floor(durationInSec)));
+	}, [
+		mediaEl,
+		getTimeLabel,
+		sliderEl,
+		getSnapshot
+	]);
+	useAnimateOnPlay({
+		draw,
+		intervalMs: UPDATE_INTERVAL_MS$1
+	});
+	useLayoutEffect(() => {
+		draw();
+	}, [lang, draw]);
+}
+
+//#endregion
+//#region src/hooks/useRectPosition.ts
+function useRectPosition() {
+	const rectRef = useRef(null);
+	const calcRectPositionX = (clickX) => {
+		if (!rectRef.current) return null;
+		const { left, width } = rectRef.current;
+		return (clickX - left) / width;
+	};
+	const setRect = (value) => {
+		rectRef.current = value;
+	};
+	return {
+		setRect,
+		calcRectPositionX
+	};
+}
+
+//#endregion
+//#region src/components/seekbar/root/useSeekbarInteractivity.ts
+function useSeekbarInteractivity(sliderEl, { skipInterval }) {
+	const duration = usePlayer((s) => s.durationInSec);
+	const { seek, skip } = usePlayerControls();
+	const { setRect: setSliderRect, calcRectPositionX } = useRectPosition();
+	function updateVideoTime(clickX) {
+		const calculatedPosition = calcRectPositionX(clickX);
+		if (calculatedPosition == null) return;
+		seek(Math.min(Math.max(calculatedPosition, 0), 1) * duration);
+	}
+	const handlePointerDown = (e) => {
+		if (!sliderEl.current) return;
+		setSliderRect(sliderEl.current.getBoundingClientRect());
+		sliderEl.current.setPointerCapture(e.pointerId);
+		sliderEl.current.setAttribute(DATA_ATTRS.dragging, "true");
+		updateVideoTime(e.clientX);
+	};
+	const handlePointerMove = (e) => {
+		if (!sliderEl.current || !sliderEl.current.hasPointerCapture(e.pointerId)) return;
+		updateVideoTime(e.clientX);
+	};
+	const handleLostPointerCapture = () => {
+		if (!sliderEl.current) return;
+		sliderEl.current.toggleAttribute(DATA_ATTRS.dragging, false);
+	};
+	const handleKeyDown = (e) => {
+		switch (normalizeKeyCode(e.key)) {
+			case KEY_NAMES.ARROW_LEFT:
+			case KEY_NAMES.ARROW_DOWN:
+				e.preventDefault();
+				return skip(-skipInterval);
+			case KEY_NAMES.ARROW_RIGHT:
+			case KEY_NAMES.ARROW_UP:
+				e.preventDefault();
+				return skip(skipInterval);
+			case KEY_NAMES.HOME:
+				e.preventDefault();
+				return seek(0);
+			case KEY_NAMES.END:
+				e.preventDefault();
+				return seek(duration);
+		}
+	};
+	return {
+		handlePointerDown,
+		handleLostPointerCapture,
+		handlePointerMove,
+		handleKeyDown
+	};
+}
+
+//#endregion
+//#region src/components/common/Slider.tsx
+function Slider({ style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			...style,
+			...defaultStyle$3
+		},
+		...props,
+		role: "slider",
+		tabIndex: 0
+	});
+}
+const defaultStyle$3 = {
+	touchAction: "none",
+	position: "relative"
+};
+
+//#endregion
+//#region src/components/seekbar/root/useBufferTimer.ts
+function useBufferTime(sliderEl) {
+	const { subscribeWithSelector, getSnapshot } = usePlayerSubscription();
+	useEffect(() => {
+		if (!sliderEl.current) return;
+		return subscribeWithSelector((s) => s.bufferedEndInSec, (bufferedEnd) => {
+			if (!sliderEl.current) return;
+			const { durationInSec } = getSnapshot();
+			const buffered = toPercent(safeDivide(bufferedEnd ?? 0, durationInSec));
+			sliderEl.current.style.setProperty(CSS_VARS.bufferPercent, buffered.toFixed(2));
+		});
+	}, [
+		sliderEl,
+		subscribeWithSelector,
+		getSnapshot
+	]);
+}
+
+//#endregion
+//#region src/components/seekbar/root/SeekbarRoot.tsx
+function SeekbarRoot({ skipInterval = 5, ref, onKeyDown, onPointerMove, onPointerDown, onLostPointerCapture, ...props }) {
+	const sliderEl = useRef(null);
+	const mediaDataAttrs = useMediaAttributes();
+	useSeekbarTime(sliderEl);
+	useBufferTime(sliderEl);
+	const mergedRef = useMergeRefs(sliderEl, ref);
+	const { handlePointerDown, handleLostPointerCapture, handlePointerMove, handleKeyDown } = useSeekbarInteractivity(sliderEl, { skipInterval });
+	return /* @__PURE__ */ jsx(Slider, {
+		ref: mergedRef,
+		"aria-label": "Video player slider",
+		...props,
+		onPointerDown: composeHandlers(onPointerDown, handlePointerDown),
+		onPointerMove: composeHandlers(onPointerMove, handlePointerMove),
+		onLostPointerCapture: composeHandlers(onLostPointerCapture, handleLostPointerCapture),
+		onKeyDown: composeHandlers(onKeyDown, handleKeyDown),
+		"aria-valuemin": 0,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/common/Track.tsx
+function Track({ style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			...style,
+			...defaultStyle$2
+		},
+		...props
+	});
+}
+const defaultStyle$2 = {
+	position: "relative",
+	isolation: "isolate"
+};
+
+//#endregion
+//#region src/components/seekbar/track/SeekbarTrack.tsx
+function SeekbarTrack(props) {
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx(Track, {
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/common/Progress.tsx
+function Progress({ progressVar = "", style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			...style,
+			...defaultStyle$1,
+			transform: `scaleX(calc(var(${progressVar}, 0) / 100))`
+		},
+		...props
+	});
+}
+const defaultStyle$1 = {
+	width: "100%",
+	height: "100%",
+	position: "absolute",
+	transformOrigin: "left",
+	willChange: "transform"
+};
+
+//#endregion
+//#region src/components/seekbar/progress/SeekbarProgress.tsx
+function SeekbarProgress({ style, ...props }) {
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx(Progress, {
+		progressVar: CSS_VARS.progressPercent,
+		style: {
+			zIndex: 2,
+			...style
+		},
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/seekbar/buffer/SeekbarBuffer.tsx
+function SeekbarBuffer({ style, ...props }) {
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx(Progress, {
+		progressVar: CSS_VARS.bufferPercent,
+		style: {
+			zIndex: 1,
+			...style
+		},
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/common/Thumb.tsx
+function Thumb({ style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: defaultContainerStyle,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				...defaultStyle,
+				...style
+			},
+			...props
+		})
+	});
+}
+const defaultContainerStyle = {
+	width: "100%",
+	height: "100%",
+	position: "absolute",
+	transform: `translateX(calc(var(${CSS_VARS.progressPercent}, 0) * 1%))`,
+	willChange: "transform",
+	pointerEvents: "none",
+	left: 0,
+	zIndex: "var(--seekbar-thumb-z-index, 9999)"
+};
+const defaultStyle = {
+	position: "absolute",
+	top: "50%",
+	transform: "translate(-50%, -50%)"
+};
+
+//#endregion
+//#region src/components/seekbar/thumb/SeekbarThumb.tsx
+function SeekbarThumb(props) {
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx(Thumb, {
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/seekbar/index.parts.ts
+var index_parts_exports$7 = /* @__PURE__ */ __exportAll({
+	Buffer: () => SeekbarBuffer,
+	Progress: () => SeekbarProgress,
+	Root: () => SeekbarRoot,
+	Thumb: () => SeekbarThumb,
+	Track: () => SeekbarTrack
+});
+
+//#endregion
+//#region src/components/skipButton/root/SkipButtonRoot.tsx
+const getTimeLabel = createTimeLabelFormatter("en");
+function SkipButtonRoot({ direction, skipInterval = 5, onClick, ...props }) {
+	const { skip } = usePlayerControls();
+	const mediaDataAttrs = useMediaAttributes();
+	const isForward = direction === "forward";
+	const handleSkip = () => skip(isForward ? skipInterval : -skipInterval);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": `Skip ${isForward ? "forward" : "back"} ${getTimeLabel(skipInterval)}`,
+		...props,
+		type: "button",
+		onClick: composeHandlers(onClick, handleSkip),
+		[DATA_ATTRS.direction]: direction,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/skipButton/index.parts.ts
+var index_parts_exports$8 = /* @__PURE__ */ __exportAll({ Root: () => SkipButtonRoot });
+
+//#endregion
+//#region src/components/timeDisplay/TimeDisplayContext.ts
+const TimeDisplayContext = createContext(null);
+const useTimeDisplay = () => {
+	const ctx = use(TimeDisplayContext);
+	if (!ctx) throw new Error("useTimeDisplay used outside of the TimeDisplayProvider!");
+	return ctx;
+};
+
+//#endregion
+//#region src/components/timeDisplay/root/TimeDisplayRoot.tsx
+function TimeDisplayRoot({ initialMode = "elapsed", ...props }) {
+	const [isElapsedMode, setIsElapsedMode] = useState(initialMode === "elapsed");
+	const mediaDataAttrs = useMediaAttributes();
+	const setMode = useCallback((mode) => setIsElapsedMode(mode === "elapsed"), []);
+	const toggleMode = useCallback(() => setIsElapsedMode((m) => !m), []);
+	const value = useMemo(() => ({
+		isElapsedMode,
+		setMode,
+		toggleMode
+	}), [
+		isElapsedMode,
+		setMode,
+		toggleMode
+	]);
+	return /* @__PURE__ */ jsx(TimeDisplayContext, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			...mediaDataAttrs
+		})
+	});
+}
+
+//#endregion
+//#region src/components/timeDisplay/toggle/TimeDisplayToggle.tsx
+function TimeDisplayToggle({ onClick, ...props }) {
+	const { toggleMode, isElapsedMode } = useTimeDisplay();
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": `See ${isElapsedMode ? "remaining" : "elapsed"} time`,
+		...props,
+		type: "button",
+		onClick: composeHandlers(onClick, toggleMode),
+		[DATA_ATTRS.elapsedMode]: isElapsedMode,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/timeDisplay/timer/useTimeDisplayTimer.ts
+const UPDATE_INTERVAL_MS = 250;
+function useTimeDisplayTimer(timerRef) {
+	const { isElapsedMode } = useTimeDisplay();
+	const { mediaEl } = usePlayerCtx();
+	const { getSnapshot } = usePlayerSubscription();
+	const draw = useCallback(() => {
+		if (!mediaEl.current || !timerRef.current) return;
+		const { optimisticTimeInSec, durationInSec } = getSnapshot();
+		const time = optimisticTimeInSec ?? mediaEl.current.currentTime;
+		const remainingTime = durationInSec - time;
+		const displayTime = isElapsedMode ? time : remainingTime;
+		timerRef.current.textContent = `${isElapsedMode ? "" : "-"}${getTimeFormat(displayTime)}`;
+		timerRef.current.dateTime = getDurationTimeFormat(displayTime);
+	}, [
+		isElapsedMode,
+		mediaEl,
+		timerRef,
+		getSnapshot
+	]);
+	useAnimateOnPlay({
+		draw,
+		intervalMs: UPDATE_INTERVAL_MS
+	});
+	useLayoutEffect(() => {
+		draw();
+	}, [isElapsedMode, draw]);
+}
+
+//#endregion
+//#region src/components/timeDisplay/timer/TimeDisplayTimer.tsx
+function TimeDisplayTimer({ ref, ...props }) {
+	const timerRef = useRef(null);
+	const mergedRef = useMergeRefs(timerRef, ref);
+	const mediaDataAttrs = useMediaAttributes();
+	useTimeDisplayTimer(timerRef);
+	return /* @__PURE__ */ jsx("time", {
+		...props,
+		ref: mergedRef,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/timeDisplay/duration/TimeDisplayDuration.tsx
+function TimeDisplayDuration(props) {
+	const mediaDataAttrs = useMediaAttributes();
+	const duration = usePlayer((s) => s.durationInSec);
+	return /* @__PURE__ */ jsx("time", {
+		...props,
+		dateTime: getDurationTimeFormat(duration),
+		...mediaDataAttrs,
+		children: getTimeFormat(duration)
+	});
+}
+
+//#endregion
+//#region src/components/timeDisplay/index.parts.ts
+var index_parts_exports$9 = /* @__PURE__ */ __exportAll({
+	Duration: () => TimeDisplayDuration,
+	Root: () => TimeDisplayRoot,
+	Timer: () => TimeDisplayTimer,
+	Toggle: () => TimeDisplayToggle
+});
+
+//#endregion
+//#region src/components/video/root/VideoRoot.tsx
+function VideoRoot({ style, ...props }) {
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			...style,
+			position: "relative"
+		},
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/video/overlay/useOverlayInteractivity.ts
+function useOverlayInteractivity({ onPointerUp, onPointerDown, onDoubleTouch = "fullscreen", onDoubleClick = "fullscreen", doubleClickInterval = 300 }) {
+	const pointedDownEl = useRef(null);
+	const prevClickTimer = useRef(null);
+	const prevClick = useRef(0);
+	const { containerEl } = usePlayerCtx();
+	const { toggle, toggleFullscreen } = usePlayerControls();
+	useEffect(() => {
+		return () => {
+			if (prevClickTimer.current) clearTimeout(prevClickTimer.current);
+		};
+	}, []);
+	const fireDoubleClick = (e, onDoubleClick) => {
+		if (prevClickTimer.current) {
+			clearTimeout(prevClickTimer.current);
+			prevClickTimer.current = null;
+		}
+		if (typeof onDoubleClick === "function") return onDoubleClick(e);
+		if (onDoubleClick === "fullscreen") return toggleFullscreen();
+	};
+	const handlePointerDown = (e) => {
+		onPointerDown?.(e);
+		if (e.defaultPrevented) return;
+		pointedDownEl.current = e.currentTarget;
+	};
+	const handlePointerUp = (e) => {
+		onPointerUp?.(e);
+		if (e.defaultPrevented || !containerEl.current?.contains(pointedDownEl.current)) return;
+		const now = performance.now();
+		const isSingleClick = now - prevClick.current > doubleClickInterval;
+		pointedDownEl.current = null;
+		prevClick.current = now;
+		if (isSingleClick) prevClickTimer.current = setTimeout(() => {
+			toggle();
+			prevClickTimer.current = null;
+		}, doubleClickInterval);
+		else fireDoubleClick(e, e.pointerType === "mouse" ? onDoubleClick : onDoubleTouch);
+	};
+	const handleKeyDown = (e) => {
+		switch (normalizeKeyCode(e.key)) {
+			case KEY_NAMES.ENTER:
+			case KEY_NAMES.SPACE:
+				e.preventDefault();
+				return toggle();
+		}
+	};
+	return {
+		handlePointerUp,
+		handlePointerDown,
+		handleKeyDown
+	};
+}
+
+//#endregion
+//#region src/components/video/overlay/VideoOverlay.tsx
+function VideoOverlayRoot({ style, label, onDoubleClick, onDoubleTouch, doubleClickInterval, onPointerDown, onPointerUp, onKeyDown, ...props }) {
+	const mediaDataAttrs = useMediaAttributes();
+	const { handlePointerDown, handlePointerUp, handleKeyDown } = useOverlayInteractivity({
+		onPointerDown,
+		onPointerUp,
+		onDoubleClick,
+		onDoubleTouch,
+		doubleClickInterval
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		style: {
+			...style,
+			...requiredStyle
+		},
+		onPointerDown: handlePointerDown,
+		onPointerUp: handlePointerUp,
+		onKeyDown: composeHandlers(onKeyDown, handleKeyDown),
+		...props,
+		onDoubleClick: () => {},
+		...mediaDataAttrs
+	});
+}
+const requiredStyle = {
+	position: "absolute",
+	inset: 0,
+	touchAction: "manipulation"
+};
+
+//#endregion
+//#region src/components/video/player/VideoPlayer.tsx
+function VideoPlayer({ ref, ...props }) {
+	const { mediaEl } = usePlayerCtx();
+	const mergedRef = useMergeRefs(mediaEl, ref);
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx("video", {
+		ref: mergedRef,
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/video/index.parts.ts
+var index_parts_exports$10 = /* @__PURE__ */ __exportAll({
+	Overlay: () => VideoOverlayRoot,
+	Player: () => VideoPlayer,
+	Root: () => VideoRoot
+});
+
+//#endregion
+//#region src/state/shallow.ts
+const isEqual = (a, b) => {
+	if (Object.is(a, b)) return true;
+	if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+	const entriesA = Object.entries(a);
+	const entriesB = Object.entries(b);
+	if (entriesA.length !== entriesB.length) return false;
+	return entriesA.every(([k, v]) => Object.is(v, b[k]));
+};
+function shallow(selector) {
+	let prev = null;
+	return (state) => {
+		const next = selector(state);
+		if (prev && isEqual(prev, next)) return prev;
+		prev = next;
+		return next;
+	};
+}
+
+//#endregion
+//#region src/components/volume/slider/useVolume.ts
+function useVolume(sliderEl, { volumeInterval, computeAriaValueText }) {
+	const computeAriaValueTextStable = useRef(computeAriaValueText);
+	const { setRect: setSliderRect, calcRectPositionX } = useRectPosition();
+	const { subscribeWithSelector, getSnapshot } = usePlayerSubscription();
+	const { stepVolume, setVolume } = usePlayerControls();
+	const updateSliderEl = useCallback(() => {
+		if (!sliderEl.current) return;
+		const { volume, isMuted } = getSnapshot();
+		const currentVolume = isMuted ? 0 : volume;
+		const currentVolumePercent = toPercent(currentVolume).toFixed(2);
+		sliderEl.current.style.setProperty(CSS_VARS.progressPercent, String(currentVolumePercent));
+		sliderEl.current.setAttribute("aria-valuenow", String(currentVolume.toFixed(2)));
+		sliderEl.current.setAttribute("aria-valuetext", computeAriaValueTextStable.current?.({
+			volume,
+			isMuted
+		}) ?? `${currentVolumePercent}%`);
+		sliderEl.current.toggleAttribute(DATA_ATTRS.muted, isMuted);
+	}, [getSnapshot, sliderEl]);
+	useEffect(() => {
+		computeAriaValueTextStable.current = computeAriaValueText;
+	}, [computeAriaValueText]);
+	useLayoutEffect(() => {
+		const unsubscribe = subscribeWithSelector(shallow((s) => ({
+			volume: s.volume,
+			isMuted: s.isMuted
+		})), updateSliderEl);
+		updateSliderEl();
+		return unsubscribe;
+	}, [
+		subscribeWithSelector,
+		updateSliderEl,
+		sliderEl
+	]);
+	function updateVolume(clickX) {
+		const calculatedPosition = calcRectPositionX(clickX);
+		if (calculatedPosition == null) return;
+		setVolume(clampVolume(calculatedPosition));
+		updateSliderEl();
+	}
+	const handlePointerDown = (e) => {
+		if (!sliderEl.current) return;
+		setSliderRect(sliderEl.current.getBoundingClientRect());
+		sliderEl.current.setPointerCapture(e.pointerId);
+		sliderEl.current.setAttribute(DATA_ATTRS.dragging, "true");
+		updateVolume(e.clientX);
+	};
+	const handlePointerMove = (e) => {
+		if (!sliderEl.current || !sliderEl.current.hasPointerCapture(e.pointerId)) return;
+		updateVolume(e.clientX);
+	};
+	const handleLostPointerCapture = () => {
+		if (!sliderEl.current) return;
+		sliderEl.current.toggleAttribute(DATA_ATTRS.dragging, false);
+	};
+	const handleKeyDown = (e) => {
+		switch (normalizeKeyCode(e.key)) {
+			case KEY_NAMES.ARROW_LEFT:
+			case KEY_NAMES.ARROW_DOWN:
+				e.preventDefault();
+				return stepVolume(-volumeInterval);
+			case KEY_NAMES.ARROW_RIGHT:
+			case KEY_NAMES.ARROW_UP:
+				e.preventDefault();
+				return stepVolume(volumeInterval);
+			case KEY_NAMES.HOME:
+				e.preventDefault();
+				return setVolume(0);
+			case KEY_NAMES.END:
+				e.preventDefault();
+				return setVolume(1);
+		}
+	};
+	return {
+		handlePointerDown,
+		handlePointerMove,
+		handleLostPointerCapture,
+		handleKeyDown
+	};
+}
+
+//#endregion
+//#region src/components/volume/slider/VolumeSlider.tsx
+function VolumeSlider({ volumeInterval = VOLUME_INTERVAL, ref, onPointerDown, onPointerMove, onLostPointerCapture, onKeyDown, computeAriaValueText, ...props }) {
+	const sliderEl = useRef(null);
+	const mergedRef = useMergeRefs(sliderEl, ref);
+	const mediaDataAttrs = useMediaAttributes();
+	const { handleKeyDown, handlePointerDown, handlePointerMove, handleLostPointerCapture } = useVolume(sliderEl, {
+		volumeInterval,
+		computeAriaValueText
+	});
+	return /* @__PURE__ */ jsx(Slider, {
+		ref: mergedRef,
+		"aria-label": "Video volume slider",
+		...props,
+		"aria-valuemin": 0,
+		"aria-valuemax": 1,
+		onPointerMove: composeHandlers(onPointerMove, handlePointerMove),
+		onPointerDown: composeHandlers(onPointerDown, handlePointerDown),
+		onLostPointerCapture: composeHandlers(onLostPointerCapture, handleLostPointerCapture),
+		onKeyDown: composeHandlers(onKeyDown, handleKeyDown),
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/volume/mute/VolumeMute.tsx
+function VolumeMute({ onClick, ...props }) {
+	const { toggleMute } = usePlayerControls();
+	const mediaDataAttrs = useMediaAttributes();
+	const isMuted = usePlayer((s) => s.isMuted);
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": isMuted ? "Unmute video" : "Mute video",
+		...props,
+		type: "button",
+		onClick: composeHandlers(onClick, toggleMute),
+		[DATA_ATTRS.muted]: setDataAttr(isMuted),
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/volume/track/VolumeTrack.tsx
+function VolumeTrack(props) {
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx(Track, {
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/volume/progress/VolumeProgress.tsx
+function VolumeProgress(props) {
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx(Progress, {
+		progressVar: CSS_VARS.progressPercent,
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/volume/thumb/VolumeThumb.tsx
+function VolumeThumb(props) {
+	const mediaDataAttrs = useMediaAttributes();
+	return /* @__PURE__ */ jsx(Thumb, {
+		...props,
+		...mediaDataAttrs
+	});
+}
+
+//#endregion
+//#region src/components/volume/index.parts.ts
+var index_parts_exports$11 = /* @__PURE__ */ __exportAll({
+	Mute: () => VolumeMute,
+	Progress: () => VolumeProgress,
+	Slider: () => VolumeSlider,
+	Thumb: () => VolumeThumb,
+	Track: () => VolumeTrack
+});
+
+//#endregion
+export { index_parts_exports as Audio, index_parts_exports$1 as Controls, index_parts_exports$2 as FullscreenButton, index_parts_exports$3 as PipButton, index_parts_exports$4 as PlayButton, index_parts_exports$5 as PlaybackRateButton, index_parts_exports$6 as Player, index_parts_exports$7 as Seekbar, index_parts_exports$8 as SkipButton, index_parts_exports$9 as TimeDisplay, index_parts_exports$10 as Video, index_parts_exports$11 as Volume, usePlayer, usePlayerControls };
+//# sourceMappingURL=index.js.map