@bysages/solid 0.3.1 → 0.4.1

package/dist/media-player-yF7KVUxM.mjs

@@ -0,0 +1,796 @@
+import { r as iconNode } from "./icon-DTqmJCd5.mjs";
+import { t as Select } from "./select-DI7pFspF.mjs";
+import { createComponent, effect, insert, memo, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { For, Show, createContext, createEffect, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { Dynamic } from "solid-js/web";
+//#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] = createSignal(0);
+	const [duration, setDuration] = createSignal(0);
+	const [playing, setPlaying] = createSignal(false);
+	const [muted, setMuted] = createSignal(false);
+	const [volume, setVolumeState] = createSignal(1);
+	const [playbackRate, setPlaybackRateState] = createSignal(1);
+	const [selectedTextTrack, setSelectedTextTrack] = createSignal(-1);
+	const [error, setError] = createSignal(false);
+	const readMedia = (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 = (element) => {
+		setSelectedTextTrack(Array.from(element.textTracks).findIndex((track) => track.mode === "showing"));
+	};
+	const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+	const seek = (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);
+	};
+	const setVolume = (value) => {
+		const element = media.current;
+		if (!element) return;
+		element.volume = clamp(value, 0, 1);
+	};
+	const setPlaybackRate = (value) => {
+		const element = media.current;
+		if (!element) return;
+		element.playbackRate = value;
+	};
+	const toggleMuted = () => {
+		const element = media.current;
+		if (!element) return;
+		element.muted = !element.muted;
+	};
+	const toggle = async () => {
+		const element = media.current;
+		if (!element) return;
+		if (element.paused) await element.play();
+		else element.pause();
+	};
+	const selectTextTrack = (index) => {
+		const element = media.current;
+		if (!element) return;
+		Array.from(element.textTracks).forEach((track, trackIndex) => {
+			track.mode = trackIndex === index ? "showing" : "disabled";
+		});
+		setSelectedTextTrack(index);
+	};
+	const togglePictureInPicture = async () => {
+		const pipElement = media.current;
+		if (!pipElement?.requestPictureInPicture) return;
+		if (document.pictureInPictureElement) await document.exitPictureInPicture();
+		else await pipElement.requestPictureInPicture();
+	};
+	const toggleFullscreen = async (root) => {
+		if (document.fullscreenElement) await document.exitFullscreen();
+		else await root.requestFullscreen();
+	};
+	createEffectOnMedia(media, (element) => {
+		const updateFromEvent = (event) => {
+			readMedia(element);
+			setError(event.type === "error");
+		};
+		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);
+		onCleanup(() => {
+			for (const event of events) element.removeEventListener(event, updateFromEvent);
+			element.removeEventListener("loadedmetadata", syncTracks);
+			element.removeEventListener("loadstart", syncTracks);
+			element.pause();
+		});
+	});
+	return {
+		currentTime,
+		duration,
+		error,
+		muted,
+		playing,
+		playbackRate,
+		selectedTextTrack,
+		seek,
+		selectTextTrack,
+		setPlaybackRate,
+		setVolume,
+		toggle,
+		toggleFullscreen,
+		toggleMuted,
+		togglePictureInPicture,
+		volume
+	};
+}
+/** The media element mounts inside a child part, so its reference is
+* observed as a mutable box. */
+function createEffectOnMedia(media, effect) {
+	createEffect(() => {
+		if (media.current) effect(media.current);
+	});
+}
+/** 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/shell.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<div>`);
+const MediaPlayerProvider = createContext();
+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;
+}
+/** 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 [local, rest] = splitShellProps(props);
+	const [mediaElement, setMediaElement] = createSignal(null);
+	const media = {
+		get current() {
+			return mediaElement();
+		},
+		set current(value) {
+			setMediaElement(value);
+		}
+	};
+	const root = { current: null };
+	const controls = useMediaControls(media);
+	createEffect(() => {
+		const element = media.current;
+		if (!element) return;
+		element.volume = local.volume ?? 1;
+		element.playbackRate = local.playbackRate ?? 1;
+	});
+	const context = {
+		get autoplay() {
+			return local.autoplay ?? false;
+		},
+		controls,
+		get disabled() {
+			return local.disabled ?? false;
+		},
+		emit: (event, source) => {
+			if (event === "play") local.onPlay?.(source);
+			if (event === "pause") local.onPause?.(source);
+			if (event === "ended") local.onEnded?.(source);
+			if (event === "timeupdate") local.onTimeupdate?.(source);
+			if (event === "volumechange") local.onVolumechange?.(source);
+			if (event === "ratechange") local.onRatechange?.(source);
+			if (event === "error") local.onError?.(source);
+		},
+		kind: local.kind,
+		get label() {
+			return local.label ?? "Media player";
+		},
+		get loop() {
+			return local.loop ?? false;
+		},
+		media,
+		get muted() {
+			return local.muted ?? false;
+		},
+		get playbackRates() {
+			return local.playbackRates ?? [
+				.5,
+				.75,
+				1,
+				1.25,
+				1.5,
+				2
+			];
+		},
+		get playsInline() {
+			return local.playsInline ?? true;
+		},
+		get poster() {
+			return local.poster;
+		},
+		get preload() {
+			return local.preload ?? "metadata";
+		},
+		root,
+		get sources() {
+			return local.sources ?? [];
+		},
+		get src() {
+			return local.src;
+		},
+		get tracks() {
+			return local.tracks ?? [];
+		}
+	};
+	return createComponent(MediaPlayerProvider.Provider, {
+		value: context,
+		get children() {
+			var _el$ = _tmpl$$1();
+			ref(() => {
+				return (element) => {
+					root.current = element;
+				};
+			}, _el$);
+			spread(_el$, [rest, {
+				"data-scope": "media-player",
+				"data-part": "root",
+				get "data-kind"() {
+					return local.kind;
+				},
+				get "data-playing"() {
+					return controls.playing();
+				},
+				get "data-muted"() {
+					return controls.muted();
+				},
+				get "data-error"() {
+					return controls.error() ? "" : void 0;
+				}
+			}], true);
+			insert(_el$, () => {
+				return local.children;
+			});
+			return _el$;
+		}
+	});
+}
+function splitShellProps(props) {
+	return splitProps(props, [
+		"kind",
+		"children",
+		"label",
+		"src",
+		"sources",
+		"tracks",
+		"autoplay",
+		"loop",
+		"muted",
+		"preload",
+		"volume",
+		"playbackRate",
+		"playbackRates",
+		"disabled",
+		"poster",
+		"playsInline",
+		"onPlay",
+		"onPause",
+		"onEnded",
+		"onTimeupdate",
+		"onVolumechange",
+		"onRatechange",
+		"onError"
+	]);
+}
+//#endregion
+//#region src/components/media-player/parts.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<source>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<track>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span> / <!>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<input>`);
+function part(name) {
+	function MediaPart(props) {
+		var _el$ = _tmpl$();
+		spread(_el$, [props, {
+			"data-scope": "media-player",
+			get "data-part"() {
+				return name.toLowerCase();
+			}
+		}], true);
+		insert(_el$, () => {
+			return props.children;
+		});
+		return _el$;
+	}
+	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";
+	return createComponent(Dynamic, mergeProps({ get component() {
+		return element();
+	} }, props, {
+		get src() {
+			return memo(() => {
+				return context.sources.length > 0;
+			})() ? void 0 : context.src;
+		},
+		"data-scope": "media-player",
+		"data-part": "media",
+		get autoplay() {
+			return context.autoplay;
+		},
+		get loop() {
+			return context.loop;
+		},
+		get muted() {
+			return context.muted;
+		},
+		get preload() {
+			return context.preload;
+		},
+		get poster() {
+			return context.poster;
+		},
+		get playsinline() {
+			return context.playsInline;
+		},
+		ref: (value) => {
+			context.media.current = value;
+		},
+		get "aria-label"() {
+			return 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),
+		get children() {
+			return [createComponent(For, {
+				get each() {
+					return context.sources;
+				},
+				children: (source) => (() => {
+					var _el$2 = _tmpl$2();
+					effect(() => {
+						return {
+							e: source.src,
+							t: source.type
+						};
+					}, ({ e, t }, _p$) => {
+						e !== _p$?.e && setAttribute(_el$2, "src", e);
+						t !== _p$?.t && setAttribute(_el$2, "type", t);
+					});
+					return _el$2;
+				})()
+			}), createComponent(For, {
+				get each() {
+					return context.tracks;
+				},
+				children: (track) => (() => {
+					var _el$3 = _tmpl$3();
+					effect(() => {
+						return {
+							e: track.src,
+							t: track.kind ?? "subtitles",
+							a: track.label,
+							o: track.srcLang,
+							i: track.default
+						};
+					}, ({ e, t, a, o, i }, _p$) => {
+						e !== _p$?.e && setAttribute(_el$3, "src", e);
+						t !== _p$?.t && setAttribute(_el$3, "kind", t);
+						a !== _p$?.a && setAttribute(_el$3, "label", a);
+						o !== _p$?.o && setAttribute(_el$3, "srclang", o);
+						i !== _p$?.i && setAttribute(_el$3, "default", i);
+					});
+					return _el$3;
+				})()
+			})];
+		}
+	}));
+}
+/** Play and pause share one seal-cut control: the state changes the mark,
+* never the control's place in the hand. */
+function PlayButton(props) {
+	const context = useMediaPlayer();
+	const [local, rest] = splitProps(props, ["label"]);
+	const label = () => local.label ?? (context.controls.playing() ? "Pause" : "Play");
+	var _el$4 = _tmpl$4();
+	spread(_el$4, [rest, {
+		type: "button",
+		"data-scope": "media-player",
+		"data-part": "play-button",
+		get "aria-label"() {
+			return label();
+		},
+		get "aria-pressed"() {
+			return context.controls.playing();
+		},
+		get title() {
+			return label();
+		},
+		get disabled() {
+			return context.disabled;
+		},
+		onClick: () => void context.controls.toggle()
+	}], true);
+	insert(_el$4, () => {
+		return iconNode(context.controls.playing() ? "pause" : "play", {
+			width: "16",
+			height: "16"
+		});
+	});
+	return _el$4;
+}
+/** The elapsed and total time bracket the timeline. */
+function Time(props) {
+	const context = useMediaPlayer();
+	var _el$5 = _tmpl$5();
+	var _el$6 = _el$5.firstChild;
+	var _el$7 = _el$6.nextSibling;
+	spread(_el$5, [props, {
+		"data-scope": "media-player",
+		"data-part": "time"
+	}], true);
+	insert(_el$5, () => {
+		return formatMediaTime(context.controls.currentTime());
+	}, _el$6);
+	insert(_el$5, () => {
+		return formatMediaTime(context.controls.duration());
+	}, _el$7);
+	return _el$5;
+}
+/** The timeline is the sheet on which the listener writes their place. */
+function Timeline(props) {
+	const context = useMediaPlayer();
+	const [local, rest] = splitProps(props, ["label"]);
+	const progress = () => context.controls.duration() > 0 ? context.controls.currentTime() / context.controls.duration() * 100 : 0;
+	var _el$8 = _tmpl$6();
+	spread(_el$8, [rest, {
+		type: "range",
+		"data-scope": "media-player",
+		"data-part": "timeline",
+		min: 0,
+		get max() {
+			return context.controls.duration();
+		},
+		step: .1,
+		get value() {
+			return context.controls.currentTime();
+		},
+		get disabled() {
+			return context.disabled || context.controls.duration() <= 0;
+		},
+		get "aria-label"() {
+			return local.label ?? "Seek";
+		},
+		get "aria-valuetext"() {
+			return formatMediaTime(context.controls.currentTime());
+		},
+		get style() {
+			return {
+				...props.style,
+				"--bs-media-progress": `${progress()}%`
+			};
+		},
+		onInput: (event) => context.controls.seek(Number(event.currentTarget.value))
+	}], false);
+	return _el$8;
+}
+/** Muting stays at the left of the volume well, the way a hand expects. */
+function MuteButton(props) {
+	const context = useMediaPlayer();
+	const [local, rest] = splitProps(props, ["label"]);
+	const muted = () => context.controls.muted() || context.controls.volume() === 0;
+	const label = () => local.label ?? (muted() ? "Unmute" : "Mute");
+	var _el$9 = _tmpl$4();
+	spread(_el$9, [rest, {
+		type: "button",
+		"data-scope": "media-player",
+		"data-part": "mute-button",
+		get "aria-label"() {
+			return label();
+		},
+		get "aria-pressed"() {
+			return muted();
+		},
+		get title() {
+			return label();
+		},
+		get disabled() {
+			return context.disabled;
+		},
+		onClick: () => context.controls.toggleMuted()
+	}], true);
+	insert(_el$9, () => {
+		return iconNode(muted() ? "volume-x" : "volume-2", {
+			width: "16",
+			height: "16"
+		});
+	});
+	return _el$9;
+}
+function Volume(props) {
+	const context = useMediaPlayer();
+	const [local, rest] = splitProps(props, ["label"]);
+	const volume = () => context.controls.muted() ? 0 : context.controls.volume();
+	var _el$10 = _tmpl$6();
+	spread(_el$10, [rest, {
+		type: "range",
+		"data-scope": "media-player",
+		"data-part": "volume",
+		min: 0,
+		max: 1,
+		step: .01,
+		get value() {
+			return volume();
+		},
+		get disabled() {
+			return context.disabled;
+		},
+		get "aria-label"() {
+			return local.label ?? "Volume";
+		},
+		get "aria-valuetext"() {
+			return `${Math.round(volume() * 100)}%`;
+		},
+		get style() {
+			return {
+				...props.style,
+				"--bs-media-progress": `${volume() * 100}%`
+			};
+		},
+		onInput: (event) => context.controls.setVolume(Number(event.currentTarget.value))
+	}], false);
+	return _el$10;
+}
+/** Playback rate is a real choice, not hidden behind native menus. */
+function Rate(props) {
+	const context = useMediaPlayer();
+	const [local, rest] = splitProps(props, ["label"]);
+	var _el$11 = _tmpl$();
+	spread(_el$11, [rest, {
+		"data-scope": "media-player",
+		"data-part": "rate"
+	}], true);
+	insert(_el$11, createComponent(Select, {
+		clearable: false,
+		get disabled() {
+			return context.disabled;
+		},
+		get options() {
+			return context.playbackRates.map((rate) => ({
+				label: `${rate}×`,
+				value: String(rate)
+			}));
+		},
+		get placeholder() {
+			return local.label ?? "Playback speed";
+		},
+		size: "sm",
+		get value() {
+			return String(context.controls.playbackRate());
+		},
+		onValueChange: (value) => context.controls.setPlaybackRate(Number(value))
+	}));
+	return _el$11;
+}
+/** Text tracks use the browser's native model; the control chooses a
+* track index, while rendering stays with the media element. */
+function Captions(props) {
+	const context = useMediaPlayer();
+	const [local, rest] = splitProps(props, ["label"]);
+	return createComponent(Show, {
+		get when() {
+			return context.tracks.length > 0;
+		},
+		get children() {
+			var _el$12 = _tmpl$();
+			spread(_el$12, [rest, {
+				"data-scope": "media-player",
+				"data-part": "captions"
+			}], true);
+			insert(_el$12, createComponent(Select, {
+				clearable: false,
+				get disabled() {
+					return context.disabled;
+				},
+				get options() {
+					return [{
+						label: "Off",
+						value: "-1"
+					}, ...context.tracks.map((track, index) => ({
+						label: track.label ?? `Track ${index + 1}`,
+						value: String(index)
+					}))];
+				},
+				get placeholder() {
+					return local.label ?? "Captions";
+				},
+				size: "sm",
+				get value() {
+					return String(context.controls.selectedTextTrack());
+				},
+				onValueChange: (value) => context.controls.selectTextTrack(Number(value))
+			}));
+			return _el$12;
+		}
+	});
+}
+/** Picture-in-picture is video-only and capability-detected. */
+function PipButton(props) {
+	const context = useMediaPlayer();
+	const [local, rest] = splitProps(props, ["label"]);
+	return createComponent(Show, {
+		get when() {
+			return context.kind === "video";
+		},
+		get children() {
+			var _el$13 = _tmpl$4();
+			spread(_el$13, [rest, {
+				type: "button",
+				"data-scope": "media-player",
+				"data-part": "pip-button",
+				get "aria-label"() {
+					return local.label ?? "Toggle picture in picture";
+				},
+				get title() {
+					return local.label ?? "Toggle picture in picture";
+				},
+				get disabled() {
+					return context.disabled;
+				},
+				onClick: () => void context.controls.togglePictureInPicture()
+			}], true);
+			insert(_el$13, () => {
+				return iconNode("picture-in-picture", {
+					width: "16",
+					height: "16"
+				});
+			});
+			return _el$13;
+		}
+	});
+}
+/** Fullscreen takes the whole vessel, not just the moving picture. */
+function FullscreenButton(props) {
+	const context = useMediaPlayer();
+	const [local, rest] = splitProps(props, ["label"]);
+	var _el$14 = _tmpl$4();
+	spread(_el$14, [rest, {
+		type: "button",
+		"data-scope": "media-player",
+		"data-part": "fullscreen-button",
+		get "aria-label"() {
+			return local.label ?? "Toggle fullscreen";
+		},
+		get title() {
+			return local.label ?? "Toggle fullscreen";
+		},
+		get disabled() {
+			return context.disabled;
+		},
+		onClick: () => {
+			const root = context.root.current;
+			if (root) context.controls.toggleFullscreen(root);
+		}
+	}], true);
+	insert(_el$14, () => {
+		return iconNode("maximize-2", {
+			width: "16",
+			height: "16"
+		});
+	});
+	return _el$14;
+}
+const Stage = part("Stage");
+const Controls = part("Controls");
+//#endregion
+//#region src/components/media-player/index.tsx
+function createRoot(kind) {
+	function MediaRoot(props) {
+		return createComponent(MediaPlayerShell, mergeProps({ kind }, props));
+	}
+	return MediaRoot;
+}
+const AudioRoot = createRoot("audio");
+const VideoRoot = createRoot("video");
+function facade(props) {
+	function MediaPlayerFacade(current) {
+		return createComponent(props.Root, mergeProps(current, { get children() {
+			return props.children;
+		} }));
+	}
+	return MediaPlayerFacade;
+}
+/** The complete audio player: source controls compose into one compact
+* rail, while custom arrangement stays on Audio.Root. */
+const AudioFacade = facade({
+	Root: AudioRoot,
+	children: [createComponent(Stage, { get children() {
+		return createComponent(Media, {});
+	} }), createComponent(Controls, { get children() {
+		return [
+			createComponent(PlayButton, {}),
+			createComponent(Timeline, {}),
+			createComponent(Time, {}),
+			createComponent(MuteButton, {}),
+			createComponent(Volume, {}),
+			createComponent(Rate, {})
+		];
+	} })]
+});
+/** The complete video player: source, caption, PiP and fullscreen
+* controls compose under the stage, while Video.Root stays open. */
+const VideoFacade = facade({
+	Root: VideoRoot,
+	children: [createComponent(Stage, { get children() {
+		return createComponent(Media, {});
+	} }), createComponent(Controls, { get children() {
+		return [
+			createComponent(PlayButton, {}),
+			createComponent(Timeline, {}),
+			createComponent(Time, {}),
+			createComponent(MuteButton, {}),
+			createComponent(Volume, {}),
+			createComponent(Rate, {}),
+			createComponent(Captions, {}),
+			createComponent(PipButton, {}),
+			createComponent(FullscreenButton, {})
+		];
+	} })]
+});
+/** 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 };