@bysages/react 0.3.1 → 0.4.0

package/dist/media-player-gQrnxU52.mjs

@@ -0,0 +1,554 @@
+import { t as iconNode } from "./icon-BALgGtNK.mjs";
+import { t as Select } from "./select-ozUFq0zd.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+//#region src/components/media-player/context.ts
+const MediaPlayerProvider = createContext(null);
+function useMediaPlayer() {
+	const context = useContext(MediaPlayerProvider);
+	if (!context) throw new Error("Media player parts must be used inside Audio.Root or Video.Root");
+	return context;
+}
+//#endregion
+//#region src/components/media-player/use-media-controls.ts
+/** The shared HTMLMediaElement state: one source of truth for both the
+* audio and video faces, so their controls never drift apart. */
+function useMediaControls(media) {
+	const [currentTime, setCurrentTime] = useState(0);
+	const [duration, setDuration] = useState(0);
+	const [playing, setPlaying] = useState(false);
+	const [muted, setMuted] = useState(false);
+	const [volume, setVolumeState] = useState(1);
+	const [playbackRate, setPlaybackRateState] = useState(1);
+	const [selectedTextTrack, setSelectedTextTrack] = useState(-1);
+	const [error, setError] = useState(false);
+	const readMedia = useCallback((element) => {
+		setCurrentTime(element.currentTime || 0);
+		setDuration(Number.isFinite(element.duration) ? element.duration : 0);
+		setPlaying(!element.paused && !element.ended);
+		setMuted(element.muted);
+		setVolumeState(element.volume);
+		setPlaybackRateState(element.playbackRate);
+		setError(false);
+	}, []);
+	const readTextTracks = useCallback((element) => {
+		setSelectedTextTrack(Array.from(element.textTracks).findIndex((track) => track.mode === "showing"));
+	}, []);
+	const clamp = useCallback((value, min, max) => {
+		return Math.min(Math.max(value, min), max);
+	}, []);
+	const seek = useCallback((time) => {
+		const element = media.current;
+		if (!element) return;
+		const limit = Number.isFinite(element.duration) ? element.duration : Number.MAX_SAFE_INTEGER;
+		element.currentTime = clamp(time, 0, limit);
+	}, [clamp, media]);
+	const setVolume = useCallback((value) => {
+		const element = media.current;
+		if (!element) return;
+		element.volume = clamp(value, 0, 1);
+	}, [clamp, media]);
+	const setPlaybackRate = useCallback((value) => {
+		const element = media.current;
+		if (!element) return;
+		element.playbackRate = value;
+	}, [media]);
+	const toggleMuted = useCallback(() => {
+		const element = media.current;
+		if (!element) return;
+		element.muted = !element.muted;
+	}, [media]);
+	const toggle = useCallback(async () => {
+		const element = media.current;
+		if (!element) return;
+		if (element.paused) await element.play();
+		else element.pause();
+	}, [media]);
+	const selectTextTrack = useCallback((index) => {
+		const element = media.current;
+		if (!element) return;
+		Array.from(element.textTracks).forEach((track, trackIndex) => {
+			track.mode = trackIndex === index ? "showing" : "disabled";
+		});
+		setSelectedTextTrack(index);
+	}, [media]);
+	const togglePictureInPicture = useCallback(async () => {
+		const element = media.current;
+		if (!element?.requestPictureInPicture) return;
+		if (document.pictureInPictureElement) await document.exitPictureInPicture();
+		else await element.requestPictureInPicture();
+	}, [media]);
+	const toggleFullscreen = useCallback(async (root) => {
+		if (document.fullscreenElement) await document.exitFullscreen();
+		else await root.requestFullscreen();
+	}, []);
+	useEffect(() => {
+		const element = media.current;
+		if (!element) return;
+		const updateFromEvent = (event) => {
+			readMedia(element);
+			setError(event.type === "error");
+			if (event.type === "error") readTextTracks(element);
+		};
+		const syncTracks = () => {
+			readTextTracks(element);
+			window.setTimeout(() => readTextTracks(element), 0);
+		};
+		const events = [
+			"loadedmetadata",
+			"durationchange",
+			"timeupdate",
+			"progress",
+			"play",
+			"pause",
+			"ended",
+			"waiting",
+			"playing",
+			"seeking",
+			"seeked",
+			"volumechange",
+			"ratechange",
+			"error"
+		];
+		for (const event of events) element.addEventListener(event, updateFromEvent);
+		element.addEventListener("loadedmetadata", syncTracks);
+		element.addEventListener("loadstart", syncTracks);
+		readMedia(element);
+		readTextTracks(element);
+		return () => {
+			for (const event of events) element.removeEventListener(event, updateFromEvent);
+			element.removeEventListener("loadedmetadata", syncTracks);
+			element.removeEventListener("loadstart", syncTracks);
+			element.pause();
+		};
+	}, [
+		media,
+		readMedia,
+		readTextTracks
+	]);
+	return {
+		currentTime,
+		duration,
+		error,
+		muted,
+		playing,
+		playbackRate,
+		selectedTextTrack,
+		seek,
+		selectTextTrack,
+		setPlaybackRate,
+		setVolume,
+		toggle,
+		toggleFullscreen,
+		toggleMuted,
+		togglePictureInPicture,
+		volume
+	};
+}
+/** A compact clock for player chrome: hours only when the media asks
+* for them, stable digits so the time never jitters the controls. */
+function formatMediaTime(seconds) {
+	if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+	const whole = Math.floor(seconds);
+	const hours = Math.floor(whole / 3600);
+	const minutes = Math.floor(whole % 3600 / 60);
+	const secs = String(whole % 3600 % 60).padStart(2, "0");
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${secs}` : `${minutes}:${secs}`;
+}
+//#endregion
+//#region src/components/media-player/parts.tsx
+function part(name) {
+	function MediaPart(props) {
+		return /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-scope": "media-player",
+			"data-part": name.toLowerCase(),
+			children: props.children
+		});
+	}
+	return MediaPart;
+}
+/** The native media element, framed by the shared shell's state machine. */
+function Media(props) {
+	const context = useMediaPlayer();
+	const Element = context.kind === "video" ? "video" : "audio";
+	const nativeProps = {
+		...props,
+		src: context.sources.length > 0 ? void 0 : context.src,
+		"data-scope": "media-player",
+		"data-part": "media",
+		autoPlay: void 0,
+		loop: void 0,
+		muted: void 0,
+		preload: void 0,
+		poster: void 0,
+		playsInline: void 0,
+		ref: (value) => {
+			context.media.current = value;
+		},
+		"aria-label": context.label,
+		onPlay: (event) => context.emit("play", event),
+		onPause: (event) => context.emit("pause", event),
+		onEnded: (event) => context.emit("ended", event),
+		onTimeUpdate: (event) => context.emit("timeupdate", event),
+		onVolumeChange: (event) => context.emit("volumechange", event),
+		onRateChange: (event) => context.emit("ratechange", event),
+		onError: (event) => context.emit("error", event)
+	};
+	if (context.kind === "video") {
+		nativeProps.poster = context.poster;
+		nativeProps.playsInline = context.playsInline;
+	}
+	nativeProps.autoPlay = context.autoplay;
+	nativeProps.loop = context.loop;
+	nativeProps.muted = context.muted;
+	nativeProps.preload = context.preload;
+	return /* @__PURE__ */ jsxs(Element, {
+		...nativeProps,
+		children: [context.sources.map((source) => /* @__PURE__ */ jsx("source", {
+			src: source.src,
+			type: source.type
+		}, source.src)), context.tracks.map((track) => /* @__PURE__ */ jsx("track", {
+			src: track.src,
+			kind: track.kind ?? "subtitles",
+			label: track.label,
+			srcLang: track.srcLang,
+			default: track.default
+		}, track.src))]
+	});
+}
+/** Play and pause share one seal-cut control: the state changes the mark,
+* never the control's place in the hand. */
+function PlayButton({ label, ...props }) {
+	const context = useMediaPlayer();
+	const text = label ?? (context.controls.playing ? "Pause" : "Play");
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		"data-scope": "media-player",
+		"data-part": "play-button",
+		"aria-label": text,
+		"aria-pressed": context.controls.playing,
+		title: text,
+		disabled: context.disabled,
+		onClick: () => void context.controls.toggle(),
+		children: iconNode(context.controls.playing ? "pause" : "play", {
+			width: "16",
+			height: "16"
+		})
+	});
+}
+/** The elapsed and total time bracket the timeline. */
+function Time(props) {
+	const context = useMediaPlayer();
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		"data-scope": "media-player",
+		"data-part": "time",
+		children: [
+			formatMediaTime(context.controls.currentTime),
+			" / ",
+			formatMediaTime(context.controls.duration)
+		]
+	});
+}
+/** Seeking writes straight to currentTime; buffered ranges can later
+* ride the same part as a second ink wash. */
+function Timeline({ label = "Seek", ...props }) {
+	const context = useMediaPlayer();
+	const progress = context.controls.duration > 0 ? Math.min(context.controls.currentTime / context.controls.duration * 100, 100) : 0;
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		type: "range",
+		"data-scope": "media-player",
+		"data-part": "timeline",
+		min: 0,
+		max: context.controls.duration || 0,
+		step: .1,
+		value: context.controls.currentTime,
+		disabled: context.disabled || context.controls.duration <= 0,
+		"aria-label": label,
+		"aria-valuetext": formatMediaTime(context.controls.currentTime),
+		style: {
+			...props.style,
+			"--bs-media-progress": `${progress}%`
+		},
+		onInput: (event) => context.controls.seek(Number(event.currentTarget.value))
+	});
+}
+/** Muting stays at the left of the volume well, the way a hand expects. */
+function MuteButton({ label, ...props }) {
+	const context = useMediaPlayer();
+	const muted = context.controls.muted || context.controls.volume === 0;
+	const text = label ?? (muted ? "Unmute" : "Mute");
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		"data-scope": "media-player",
+		"data-part": "mute-button",
+		"aria-label": text,
+		"aria-pressed": muted,
+		title: text,
+		disabled: context.disabled,
+		onClick: () => context.controls.toggleMuted(),
+		children: iconNode(muted ? "volume-x" : "volume-2", {
+			width: "16",
+			height: "16"
+		})
+	});
+}
+function Volume({ label = "Volume", ...props }) {
+	const context = useMediaPlayer();
+	const volume = context.controls.muted ? 0 : context.controls.volume;
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		type: "range",
+		"data-scope": "media-player",
+		"data-part": "volume",
+		min: 0,
+		max: 1,
+		step: .01,
+		value: volume,
+		disabled: context.disabled,
+		"aria-label": label,
+		"aria-valuetext": `${Math.round(volume * 100)}%`,
+		style: {
+			...props.style,
+			"--bs-media-progress": `${volume * 100}%`
+		},
+		onInput: (event) => context.controls.setVolume(Number(event.currentTarget.value))
+	});
+}
+/** Playback rate is a real choice, not hidden behind native menus. */
+function Rate({ label = "Playback speed", ...props }) {
+	const context = useMediaPlayer();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "media-player",
+		"data-part": "rate",
+		children: /* @__PURE__ */ jsx(Select, {
+			clearable: false,
+			disabled: context.disabled,
+			options: context.playbackRates.map((rate) => ({
+				label: `${rate}×`,
+				value: String(rate)
+			})),
+			placeholder: label,
+			size: "sm",
+			value: String(context.controls.playbackRate),
+			onValueChange: (value) => context.controls.setPlaybackRate(Number(value))
+		})
+	});
+}
+/** Text tracks use the browser's native model; the control chooses a
+* track index, while rendering stays with the media element. */
+function Captions({ label = "Captions", ...props }) {
+	const context = useMediaPlayer();
+	if (context.tracks.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-scope": "media-player",
+		"data-part": "captions",
+		children: /* @__PURE__ */ jsx(Select, {
+			clearable: false,
+			disabled: context.disabled,
+			options: [{
+				label: "Off",
+				value: "-1"
+			}, ...context.tracks.map((track, index) => ({
+				label: track.label ?? `Track ${index + 1}`,
+				value: String(index)
+			}))],
+			placeholder: label,
+			size: "sm",
+			value: String(context.controls.selectedTextTrack),
+			onValueChange: (value) => context.controls.selectTextTrack(Number(value))
+		})
+	});
+}
+/** Picture-in-picture is video-only and capability-detected. */
+function PipButton({ label = "Toggle picture in picture", ...props }) {
+	const context = useMediaPlayer();
+	if (context.kind !== "video") return null;
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		"data-scope": "media-player",
+		"data-part": "pip-button",
+		"aria-label": label,
+		title: label,
+		disabled: context.disabled,
+		onClick: () => void context.controls.togglePictureInPicture(),
+		children: iconNode("picture-in-picture", {
+			width: "16",
+			height: "16"
+		})
+	});
+}
+/** Fullscreen takes the whole vessel, not just the moving picture. */
+function FullscreenButton({ label = "Toggle fullscreen", ...props }) {
+	const context = useMediaPlayer();
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		"data-scope": "media-player",
+		"data-part": "fullscreen-button",
+		"aria-label": label,
+		title: label,
+		disabled: context.disabled,
+		onClick: () => {
+			const root = context.root.current;
+			if (root) context.controls.toggleFullscreen(root);
+		},
+		children: iconNode("maximize-2", {
+			width: "16",
+			height: "16"
+		})
+	});
+}
+const Stage = part("Stage");
+const Controls = part("Controls");
+//#endregion
+//#region src/components/media-player/shell.tsx
+/** The headless shell: it owns the media reference and the shared state
+* machine, while the public parts remain free to compose in any order. */
+function MediaPlayerShell(props) {
+	injectComponentStyle("media-player");
+	const media = useRef(null);
+	const root = useRef(null);
+	const controls = useMediaControls(media);
+	const { kind, children, label = "Media player", src, sources = [], tracks = [], autoplay = false, loop = false, muted = false, preload = "metadata", volume = 1, playbackRate = 1, playbackRates = [
+		.5,
+		.75,
+		1,
+		1.25,
+		1.5,
+		2
+	], disabled = false, poster, playsInline = true, onPlay, onPause, onEnded, onTimeupdate, onVolumechange, onRatechange, onError, ...rest } = props;
+	useEffect(() => {
+		const element = media.current;
+		if (!element) return;
+		element.volume = volume;
+		element.playbackRate = playbackRate;
+	}, [playbackRate, volume]);
+	return /* @__PURE__ */ jsx(MediaPlayerProvider, {
+		value: {
+			autoplay,
+			controls,
+			disabled,
+			emit: (event, source) => {
+				if (event === "play") onPlay?.(source);
+				if (event === "pause") onPause?.(source);
+				if (event === "ended") onEnded?.(source);
+				if (event === "timeupdate") onTimeupdate?.(source);
+				if (event === "volumechange") onVolumechange?.(source);
+				if (event === "ratechange") onRatechange?.(source);
+				if (event === "error") onError?.(source);
+			},
+			kind,
+			label,
+			loop,
+			media,
+			muted,
+			playbackRates,
+			playsInline,
+			poster,
+			preload,
+			root,
+			sources,
+			src,
+			tracks
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			ref: root,
+			"data-scope": "media-player",
+			"data-part": "root",
+			"data-kind": kind,
+			"data-playing": controls.playing,
+			"data-muted": controls.muted,
+			"data-error": controls.error ? true : void 0,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/components/media-player/index.tsx
+function createRoot(kind) {
+	function MediaRoot(props) {
+		return /* @__PURE__ */ jsx(MediaPlayerShell, {
+			kind,
+			...props
+		});
+	}
+	return MediaRoot;
+}
+function facade(Root, extra) {
+	function MediaPlayerFacade(props) {
+		return /* @__PURE__ */ jsx(Root, {
+			...props,
+			children: extra
+		});
+	}
+	return MediaPlayerFacade;
+}
+const AudioRoot = createRoot("audio");
+const VideoRoot = createRoot("video");
+/** The complete audio player: source controls compose into one compact
+* rail, while custom arrangement stays on Audio.Root. */
+const AudioFacade = facade(AudioRoot, [/* @__PURE__ */ jsx(Stage, { children: /* @__PURE__ */ jsx(Media, {}) }, "stage"), /* @__PURE__ */ jsxs(Controls, { children: [
+	/* @__PURE__ */ jsx(PlayButton, {}),
+	/* @__PURE__ */ jsx(Timeline, {}),
+	/* @__PURE__ */ jsx(Time, {}),
+	/* @__PURE__ */ jsx(MuteButton, {}),
+	/* @__PURE__ */ jsx(Volume, {}),
+	/* @__PURE__ */ jsx(Rate, {})
+] }, "controls")]);
+/** The complete video player: source, caption, PiP and fullscreen
+* controls compose under the stage, while Video.Root stays open. */
+const VideoFacade = facade(VideoRoot, [/* @__PURE__ */ jsx(Stage, { children: /* @__PURE__ */ jsx(Media, {}) }, "stage"), /* @__PURE__ */ jsxs(Controls, { children: [
+	/* @__PURE__ */ jsx(PlayButton, {}),
+	/* @__PURE__ */ jsx(Timeline, {}),
+	/* @__PURE__ */ jsx(Time, {}),
+	/* @__PURE__ */ jsx(MuteButton, {}),
+	/* @__PURE__ */ jsx(Volume, {}),
+	/* @__PURE__ */ jsx(Rate, {}),
+	/* @__PURE__ */ jsx(Captions, {}),
+	/* @__PURE__ */ jsx(PipButton, {}),
+	/* @__PURE__ */ jsx(FullscreenButton, {})
+] }, "controls")]);
+/** Audio and video share one instrument: the same state, the same keys,
+* and the same control rhythm, while each face keeps its native element's
+* own semantics. The parts — Root, Stage, Media, Controls, PlayButton,
+* Timeline, Time, MuteButton, Volume, Rate, Captions, PipButton,
+* FullscreenButton. */
+const Audio = Object.assign(AudioFacade, {
+	Root: AudioRoot,
+	Stage,
+	Media,
+	Controls,
+	PlayButton,
+	Timeline,
+	Time,
+	MuteButton,
+	Volume,
+	Rate
+});
+const Video = Object.assign(VideoFacade, {
+	Root: VideoRoot,
+	Stage,
+	Media,
+	Controls,
+	PlayButton,
+	Timeline,
+	Time,
+	MuteButton,
+	Volume,
+	Rate,
+	Captions,
+	PipButton,
+	FullscreenButton
+});
+//#endregion
+export { Video as n, formatMediaTime as r, Audio as t };