@bysages/solid 0.4.3 → 0.5.0

package/dist/{media-player-yF7KVUxM.mjs → media-player-LHnTiSiN.mjs}

@@ -1,10 +1,9 @@
-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 { r as iconNode } from "./icon-DQqYA2fO.mjs";
+import { t as Select } from "./select-NaNlrYUT.mjs";
+import { Dynamic, createComponent, effect, insert, memo, mergeProps, setAttribute, spread, template, use } from "solid-js/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
+// 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) {
@@ -147,9 +146,8 @@ function formatMediaTime(seconds) {
 	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>`);
+// src/components/media-player/shell.tsx
+var _tmpl$$1 = /*#__PURE__*/ template(`<div>`);
 const MediaPlayerProvider = createContext();
 function useMediaPlayer() {
 	const context = useContext(MediaPlayerProvider);
@@ -240,30 +238,26 @@ function MediaPlayerShell(props) {
 		value: context,
 		get children() {
 			var _el$ = _tmpl$$1();
-			ref(() => {
-				return (element) => {
-					root.current = element;
-				};
+			use((element) => {
+				root.current = element;
 			}, _el$);
-			spread(_el$, [rest, {
+			spread(_el$, mergeProps(rest, {
 				"data-scope": "media-player",
 				"data-part": "root",
-				get "data-kind"() {
+				get ["data-kind"]() {
 					return local.kind;
 				},
-				get "data-playing"() {
+				get ["data-playing"]() {
 					return controls.playing();
 				},
-				get "data-muted"() {
+				get ["data-muted"]() {
 					return controls.muted();
 				},
-				get "data-error"() {
+				get ["data-error"]() {
 					return controls.error() ? "" : void 0;
 				}
-			}], true);
-			insert(_el$, () => {
-				return local.children;
-			});
+			}), false, true);
+			insert(_el$, () => local.children);
 			return _el$;
 		}
 	});
@@ -295,27 +289,26 @@ function splitShellProps(props) {
 		"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>`);
+// 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 (() => {
+			var _el$ = _tmpl$();
+			spread(_el$, mergeProps(props, {
+				"data-scope": "media-player",
+				get ["data-part"]() {
+					return name.toLowerCase();
+				}
+			}), false, true);
+			insert(_el$, () => props.children);
+			return _el$;
+		})();
 	}
 	return MediaPart;
 }
@@ -327,9 +320,7 @@ function Media(props) {
 		return element();
 	} }, props, {
 		get src() {
-			return memo(() => {
-				return context.sources.length > 0;
-			})() ? void 0 : context.src;
+			return memo(() => context.sources.length > 0)() ? void 0 : context.src;
 		},
 		"data-scope": "media-player",
 		"data-part": "media",
@@ -354,7 +345,7 @@ function Media(props) {
 		ref: (value) => {
 			context.media.current = value;
 		},
-		get "aria-label"() {
+		get ["aria-label"]() {
 			return context.label;
 		},
 		onPlay: (event) => context.emit("play", event),
@@ -371,14 +362,14 @@ function Media(props) {
 				},
 				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);
+					effect((_p$) => {
+						var _v$ = source.src, _v$2 = source.type;
+						_v$ !== _p$.e && setAttribute(_el$2, "src", _p$.e = _v$);
+						_v$2 !== _p$.t && setAttribute(_el$2, "type", _p$.t = _v$2);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
 					});
 					return _el$2;
 				})()
@@ -388,20 +379,20 @@ function Media(props) {
 				},
 				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);
+					effect((_p$) => {
+						var _v$3 = track.src, _v$4 = track.kind ?? "subtitles", _v$5 = track.label, _v$6 = track.srcLang, _v$7 = track.default;
+						_v$3 !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$3);
+						_v$4 !== _p$.t && setAttribute(_el$3, "kind", _p$.t = _v$4);
+						_v$5 !== _p$.a && setAttribute(_el$3, "label", _p$.a = _v$5);
+						_v$6 !== _p$.o && setAttribute(_el$3, "srclang", _p$.o = _v$6);
+						_v$7 !== _p$.i && (_el$3.default = _p$.i = _v$7);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0,
+						a: void 0,
+						o: void 0,
+						i: void 0
 					});
 					return _el$3;
 				})()
@@ -415,87 +406,85 @@ 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", {
+	return (() => {
+		var _el$4 = _tmpl$4();
+		spread(_el$4, mergeProps(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()
+		}), false, true);
+		insert(_el$4, () => iconNode(context.controls.playing() ? "pause" : "play", {
 			width: "16",
 			height: "16"
-		});
-	});
-	return _el$4;
+		}));
+		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;
+	return (() => {
+		var _el$5 = _tmpl$5(), _el$6 = _el$5.firstChild;
+		spread(_el$5, mergeProps(props, {
+			"data-scope": "media-player",
+			"data-part": "time"
+		}), false, true);
+		insert(_el$5, () => formatMediaTime(context.controls.currentTime()), _el$6);
+		insert(_el$5, () => formatMediaTime(context.controls.duration()), null);
+		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;
+	return (() => {
+		var _el$8 = _tmpl$6();
+		spread(_el$8, mergeProps(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, false);
+		return _el$8;
+	})();
 }
 /** Muting stays at the left of the volume well, the way a hand expects. */
 function MuteButton(props) {
@@ -503,97 +492,101 @@ function MuteButton(props) {
 	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", {
+	return (() => {
+		var _el$9 = _tmpl$4();
+		spread(_el$9, mergeProps(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()
+		}), false, true);
+		insert(_el$9, () => iconNode(muted() ? "volume-x" : "volume-2", {
 			width: "16",
 			height: "16"
-		});
-	});
-	return _el$9;
+		}));
+		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;
+	return (() => {
+		var _el$0 = _tmpl$6();
+		spread(_el$0, mergeProps(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, false);
+		return _el$0;
+	})();
 }
 /** 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;
+	return (() => {
+		var _el$1 = _tmpl$();
+		spread(_el$1, mergeProps(rest, {
+			"data-scope": "media-player",
+			"data-part": "rate"
+		}), false, true);
+		insert(_el$1, 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$1;
+	})();
 }
 /** Text tracks use the browser's native model; the control chooses a
 * track index, while rendering stays with the media element. */
@@ -605,12 +598,12 @@ function Captions(props) {
 			return context.tracks.length > 0;
 		},
 		get children() {
-			var _el$12 = _tmpl$();
-			spread(_el$12, [rest, {
+			var _el$10 = _tmpl$();
+			spread(_el$10, mergeProps(rest, {
 				"data-scope": "media-player",
 				"data-part": "captions"
-			}], true);
-			insert(_el$12, createComponent(Select, {
+			}), false, true);
+			insert(_el$10, createComponent(Select, {
 				clearable: false,
 				get disabled() {
 					return context.disabled;
@@ -633,7 +626,7 @@ function Captions(props) {
 				},
 				onValueChange: (value) => context.controls.selectTextTrack(Number(value))
 			}));
-			return _el$12;
+			return _el$10;
 		}
 	});
 }
@@ -646,12 +639,12 @@ function PipButton(props) {
 			return context.kind === "video";
 		},
 		get children() {
-			var _el$13 = _tmpl$4();
-			spread(_el$13, [rest, {
-				type: "button",
+			var _el$11 = _tmpl$4();
+			spread(_el$11, mergeProps(rest, {
+				"type": "button",
 				"data-scope": "media-player",
 				"data-part": "pip-button",
-				get "aria-label"() {
+				get ["aria-label"]() {
 					return local.label ?? "Toggle picture in picture";
 				},
 				get title() {
@@ -660,15 +653,13 @@ function PipButton(props) {
 				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;
+				"onClick": () => void context.controls.togglePictureInPicture()
+			}), false, true);
+			insert(_el$11, () => iconNode("picture-in-picture", {
+				width: "16",
+				height: "16"
+			}));
+			return _el$11;
 		}
 	});
 }
@@ -676,37 +667,36 @@ function PipButton(props) {
 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", {
+	return (() => {
+		var _el$12 = _tmpl$4();
+		spread(_el$12, mergeProps(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);
+			}
+		}), false, true);
+		insert(_el$12, () => iconNode("maximize-2", {
 			width: "16",
 			height: "16"
-		});
-	});
-	return _el$14;
+		}));
+		return _el$12;
+	})();
 }
 const Stage = part("Stage");
 const Controls = part("Controls");
-//#endregion
-//#region src/components/media-player/index.tsx
+// src/components/media-player/index.tsx
 function createRoot(kind) {
 	function MediaRoot(props) {
 		return createComponent(MediaPlayerShell, mergeProps({ kind }, props));
@@ -792,5 +782,4 @@ const Video = Object.assign(VideoFacade, {
 	PipButton,
 	FullscreenButton
 });
-//#endregion
 export { Video as n, formatMediaTime as r, Audio as t };