@bysages/svelte 0.3.1 → 0.4.1

package/dist/media-player-CfMaLa8v.mjs

@@ -0,0 +1,808 @@
+import { t as defineFamily } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { n as Select } from "./select-E3cvud0r.mjs";
+import { n as useMediaControls, t as formatMediaTime } from "./use-media-controls-BYYG0DgO.mjs";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { getContext, setContext } from "svelte";
+//#region src/components/media-player/context.ts
+const KEY = Symbol("media-player");
+function provideMediaPlayer(context) {
+	setContext(KEY, context);
+}
+function useMediaPlayer() {
+	const context = getContext(KEY);
+	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/MediaPlayerRoot.svelte
+var rest_excludes$15 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"kind",
+	"label",
+	"src",
+	"sources",
+	"tracks",
+	"autoplay",
+	"loop",
+	"muted",
+	"preload",
+	"volume",
+	"playbackRate",
+	"playbackRates",
+	"disabled",
+	"poster",
+	"playsInline",
+	"onplay",
+	"onpause",
+	"onended",
+	"ontimeupdate",
+	"onvolumechange",
+	"onratechange",
+	"onerror",
+	"children"
+]);
+var root_1$3 = $.from_html(`<div><!></div>`);
+function MediaPlayerRoot($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("media-player");
+	let label = $.prop($$props, "label", 3, "Media player"), sources = $.prop($$props, "sources", 19, () => []), tracks = $.prop($$props, "tracks", 19, () => []), autoplay = $.prop($$props, "autoplay", 3, false), loop = $.prop($$props, "loop", 3, false), muted = $.prop($$props, "muted", 3, false), preload = $.prop($$props, "preload", 3, "metadata"), volume = $.prop($$props, "volume", 3, 1), playbackRate = $.prop($$props, "playbackRate", 3, 1);
+	$.prop($$props, "playbackRates", 19, () => [
+		.5,
+		.75,
+		1,
+		1.25,
+		1.5,
+		2
+	]);
+	let disabled = $.prop($$props, "disabled", 3, false), playsInline = $.prop($$props, "playsInline", 3, true), rest = $.rest_props($$props, rest_excludes$15);
+	let mediaElement = $.state(null);
+	let rootElement = $.state(null);
+	const media = {
+		get current() {
+			return $.get(mediaElement);
+		},
+		set current(value) {
+			$.set(mediaElement, value, true);
+		}
+	};
+	const root = { get current() {
+		return $.get(rootElement);
+	} };
+	const controls = useMediaControls(media);
+	$.user_effect(() => {
+		const element = media.current;
+		if (!element) return;
+		element.volume = volume();
+		element.playbackRate = playbackRate();
+	});
+	provideMediaPlayer({
+		get kind() {
+			return $$props.kind;
+		},
+		get label() {
+			return label();
+		},
+		get src() {
+			return $$props.src;
+		},
+		get sources() {
+			return sources();
+		},
+		get tracks() {
+			return tracks();
+		},
+		get autoplay() {
+			return autoplay();
+		},
+		get loop() {
+			return loop();
+		},
+		get muted() {
+			return muted();
+		},
+		get preload() {
+			return preload();
+		},
+		get poster() {
+			return $$props.poster;
+		},
+		get playsInline() {
+			return playsInline();
+		},
+		get disabled() {
+			return disabled();
+		},
+		media,
+		root,
+		controls,
+		emit(event, source) {
+			if (event === "play") $$props.onplay?.(source);
+			if (event === "pause") $$props.onpause?.(source);
+			if (event === "ended") $$props.onended?.(source);
+			if (event === "timeupdate") $$props.ontimeupdate?.(source);
+			if (event === "volumechange") $$props.onvolumechange?.(source);
+			if (event === "ratechange") $$props.onratechange?.(source);
+			if (event === "error") $$props.onerror?.(source);
+		}
+	});
+	var div = root_1$3();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "media-player",
+		"data-part": "root",
+		"data-kind": $$props.kind,
+		"data-playing": controls.playing,
+		"data-muted": controls.muted,
+		"data-error": controls.error ? "" : void 0
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.bind_this(div, ($$value) => $.set(rootElement, $$value), () => $.get(rootElement));
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/AudioRoot.svelte
+var rest_excludes$14 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+function AudioRoot($$anchor, $$props) {
+	let rest = $.rest_props($$props, rest_excludes$14);
+	MediaPlayerRoot($$anchor, $.spread_props({ kind: "audio" }, () => rest, {
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = $.comment();
+			var node = $.first_child(fragment_1);
+			$.snippet(node, () => $$props.children ?? $.noop);
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+}
+//#endregion
+//#region src/components/media-player/MediaPart.svelte
+var rest_excludes$13 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children",
+	"part"
+]);
+var root$12 = $.from_html(`<div><!></div>`);
+function MediaPart($$anchor, $$props) {
+	$.push($$props, true);
+	let rest = $.rest_props($$props, rest_excludes$13);
+	var div = root$12();
+	$.attribute_effect(div, ($0) => ({
+		...rest,
+		"data-scope": "media-player",
+		"data-part": $0
+	}), [() => $$props.part.toLowerCase()]);
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/Controls.svelte
+function Controls($$anchor, $$props) {
+	MediaPart($$anchor, {
+		part: "Controls",
+		get children() {
+			return $$props.children;
+		}
+	});
+}
+//#endregion
+//#region src/components/media-player/Media.svelte
+var rest_excludes$12 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$11 = $.from_html(`<source/>`);
+var root_1$2 = $.from_html(`<track/>`);
+var root_2 = $.from_html(`<!> <!> <!>`, 1);
+function Media($$anchor, $$props) {
+	$.push($$props, true);
+	let rest = $.rest_props($$props, rest_excludes$12);
+	const context = useMediaPlayer();
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.element(node, () => context.kind === "video" ? "video" : "audio", false, ($$element, $$anchor) => {
+		$.bind_this($$element, ($$value) => context.media.current = $$value, () => context?.media?.current);
+		var event_handler = (event) => context.emit("play", event);
+		var event_handler_1 = (event) => context.emit("pause", event);
+		var event_handler_2 = (event) => context.emit("ended", event);
+		var event_handler_3 = (event) => context.emit("timeupdate", event);
+		var event_handler_4 = (event) => context.emit("volumechange", event);
+		var event_handler_5 = (event) => context.emit("ratechange", event);
+		var event_handler_6 = (event) => context.emit("error", event);
+		$.attribute_effect($$element, () => ({
+			...rest,
+			src: context.sources.length > 0 ? void 0 : context.src,
+			"data-scope": "media-player",
+			"data-part": "media",
+			autoplay: context.autoplay,
+			loop: context.loop,
+			muted: context.muted,
+			preload: context.preload,
+			poster: context.poster,
+			playsinline: context.playsInline,
+			"aria-label": context.label,
+			onplay: event_handler,
+			onpause: event_handler_1,
+			onended: event_handler_2,
+			ontimeupdate: event_handler_3,
+			onvolumechange: event_handler_4,
+			onratechange: event_handler_5,
+			onerror: event_handler_6
+		}));
+		var fragment_1 = root_2();
+		var node_1 = $.first_child(fragment_1);
+		$.each(node_1, 17, () => context.sources, (source) => source.src, ($$anchor, source) => {
+			var source_1 = root$11();
+			$.set_attribute(source_1, "src", src);
+			$.template_effect(() => $.set_attribute(source_1, "type", $.get(source).type));
+			$.append($$anchor, source_1);
+		});
+		var node_2 = $.sibling(node_1, 2);
+		$.each(node_2, 17, () => context.tracks, (track) => track.src, ($$anchor, track) => {
+			var track_1 = root_1$2();
+			$.template_effect(() => {
+				$.set_attribute(track_1, "src", $.get(track).src);
+				$.set_attribute(track_1, "kind", $.get(track).kind ?? "subtitles");
+				$.set_attribute(track_1, "label", $.get(track).label);
+				$.set_attribute(track_1, "srclang", $.get(track).srcLang);
+				track_1.default = $.get(track).default;
+			});
+			$.append($$anchor, track_1);
+		});
+		var node_3 = $.sibling(node_2, 2);
+		$.snippet(node_3, () => $$props.children ?? $.noop);
+		$.append($$anchor, fragment_1);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/MuteButton.svelte
+var rest_excludes$11 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"label"
+]);
+var root$10 = $.from_html(`<button><!></button>`);
+function MuteButton($$anchor, $$props) {
+	$.push($$props, true);
+	let rest = $.rest_props($$props, rest_excludes$11);
+	const context = useMediaPlayer();
+	const muted = $.derived(() => context.controls.muted || context.controls.volume === 0);
+	const text = $.derived(() => $$props.label ?? ($.get(muted) ? "Unmute" : "Mute"));
+	var button = root$10();
+	var event_handler = () => context.controls.toggleMuted();
+	$.attribute_effect(button, () => ({
+		...rest,
+		type: "button",
+		"data-scope": "media-player",
+		"data-part": "mute-button",
+		"aria-label": $.get(text),
+		"aria-pressed": $.get(muted),
+		title: $.get(text),
+		disabled: context.disabled,
+		onclick: event_handler
+	}));
+	var node = $.child(button);
+	{
+		let $0 = $.derived(() => $.get(muted) ? "volume-x" : "volume-2");
+		InternalIcon(node, {
+			get name() {
+				return $.get($0);
+			},
+			size: "sm"
+		});
+	}
+	$.reset(button);
+	$.append($$anchor, button);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/PlayButton.svelte
+var rest_excludes$10 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"label"
+]);
+var root$9 = $.from_html(`<button><!></button>`);
+function PlayButton($$anchor, $$props) {
+	$.push($$props, true);
+	let rest = $.rest_props($$props, rest_excludes$10);
+	const context = useMediaPlayer();
+	const text = $.derived(() => $$props.label ?? (context.controls.playing ? "Pause" : "Play"));
+	var button = root$9();
+	var event_handler = () => context.controls.toggle();
+	$.attribute_effect(button, () => ({
+		...rest,
+		type: "button",
+		"data-scope": "media-player",
+		"data-part": "play-button",
+		"aria-label": $.get(text),
+		"aria-pressed": context.controls.playing,
+		title: $.get(text),
+		disabled: context.disabled,
+		onclick: event_handler
+	}));
+	var node = $.child(button);
+	{
+		let $0 = $.derived(() => context.controls.playing ? "pause" : "play");
+		InternalIcon(node, {
+			get name() {
+				return $.get($0);
+			},
+			size: "sm"
+		});
+	}
+	$.reset(button);
+	$.append($$anchor, button);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/Rate.svelte
+var rest_excludes$9 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"label"
+]);
+var root$8 = $.from_html(`<div><!></div>`);
+function Rate($$anchor, $$props) {
+	$.push($$props, true);
+	let label = $.prop($$props, "label", 3, "Playback speed"), rest = $.rest_props($$props, rest_excludes$9);
+	const context = useMediaPlayer();
+	const options = $.derived(() => context.playbackRates.map((rate) => ({
+		label: `${rate}×`,
+		value: String(rate)
+	})));
+	var div = root$8();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "media-player",
+		"data-part": "rate"
+	}));
+	var node = $.child(div);
+	{
+		let $0 = $.derived(() => String(context.controls.playbackRate));
+		Select(node, {
+			clearable: false,
+			get disabled() {
+				return context.disabled;
+			},
+			get options() {
+				return $.get(options);
+			},
+			get placeholder() {
+				return label();
+			},
+			size: "sm",
+			get value() {
+				return $.get($0);
+			},
+			onValueChange: (value) => context.controls.setPlaybackRate(Number(value))
+		});
+	}
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/Stage.svelte
+function Stage($$anchor, $$props) {
+	MediaPart($$anchor, {
+		part: "Stage",
+		get children() {
+			return $$props.children;
+		}
+	});
+}
+//#endregion
+//#region src/components/media-player/Time.svelte
+var rest_excludes$8 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy"
+]);
+var root$7 = $.from_html(`<span> </span>`);
+function Time($$anchor, $$props) {
+	$.push($$props, true);
+	let rest = $.rest_props($$props, rest_excludes$8);
+	const context = useMediaPlayer();
+	var span = root$7();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "media-player",
+		"data-part": "time"
+	}));
+	var text = $.only_child(span);
+	$.template_effect(($0, $1) => $.set_text(text, `${$0 ?? ""} / ${$1 ?? ""}`), [() => formatMediaTime(context.controls.currentTime), () => formatMediaTime(context.controls.duration)]);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/Timeline.svelte
+var rest_excludes$7 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"label"
+]);
+var root$6 = $.from_html(`<input/>`);
+function Timeline($$anchor, $$props) {
+	$.push($$props, true);
+	let label = $.prop($$props, "label", 3, "Seek"), rest = $.rest_props($$props, rest_excludes$7);
+	const context = useMediaPlayer();
+	const progress = $.derived(() => context.controls.duration > 0 ? Math.min(context.controls.currentTime / context.controls.duration * 100, 100) : 0);
+	var input = root$6();
+	var event_handler = (event) => context.controls.seek(Number(event.currentTarget.value));
+	$.attribute_effect(input, ($0) => ({
+		...rest,
+		type: "range",
+		"data-scope": "media-player",
+		"data-part": "timeline",
+		min: "0",
+		max: context.controls.duration || 0,
+		step: "0.1",
+		value: context.controls.currentTime,
+		disabled: context.disabled || context.controls.duration <= 0,
+		"aria-label": label(),
+		"aria-valuetext": $0,
+		style: `--bs-media-progress: ${$.get(progress) ?? ""}%; ${$$props.style ?? "" ?? ""}`,
+		oninput: event_handler
+	}), [() => formatMediaTime(context.controls.currentTime)], void 0, void 0, void 0, true);
+	$.append($$anchor, input);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/Volume.svelte
+var rest_excludes$6 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"label"
+]);
+var root$5 = $.from_html(`<input/>`);
+function Volume($$anchor, $$props) {
+	$.push($$props, true);
+	let label = $.prop($$props, "label", 3, "Volume"), rest = $.rest_props($$props, rest_excludes$6);
+	const context = useMediaPlayer();
+	const volume = $.derived(() => context.controls.muted ? 0 : context.controls.volume);
+	var input = root$5();
+	var event_handler = (event) => context.controls.setVolume(Number(event.currentTarget.value));
+	$.attribute_effect(input, ($0) => ({
+		...rest,
+		type: "range",
+		"data-scope": "media-player",
+		"data-part": "volume",
+		min: "0",
+		max: "1",
+		step: "0.01",
+		value: $.get(volume),
+		disabled: context.disabled,
+		"aria-label": label(),
+		"aria-valuetext": `${$0 ?? ""}%`,
+		style: `--bs-media-progress: ${$.get(volume) * 100}%; ${$$props.style ?? "" ?? ""}`,
+		oninput: event_handler
+	}), [() => Math.round($.get(volume) * 100)], void 0, void 0, void 0, true);
+	$.append($$anchor, input);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/Audio.svelte
+var rest_excludes$5 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy"
+]);
+var root$4 = $.from_html(`<!> <!> <!> <!> <!> <!>`, 1);
+var root_1$1 = $.from_html(`<!> <!>`, 1);
+function Audio$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("media-player");
+	let props = $.rest_props($$props, rest_excludes$5);
+	AudioRoot($$anchor, $.spread_props(() => props, {
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = root_1$1();
+			var node = $.first_child(fragment_1);
+			Stage(node, {
+				children: ($$anchor, $$slotProps) => {
+					Media($$anchor, {});
+				},
+				$$slots: { default: true }
+			});
+			Controls($.sibling(node, 2), {
+				children: ($$anchor, $$slotProps) => {
+					var fragment_3 = root$4();
+					var node_2 = $.first_child(fragment_3);
+					PlayButton(node_2, {});
+					var node_3 = $.sibling(node_2, 2);
+					Timeline(node_3, {});
+					var node_4 = $.sibling(node_3, 2);
+					Time(node_4, {});
+					var node_5 = $.sibling(node_4, 2);
+					MuteButton(node_5, {});
+					var node_6 = $.sibling(node_5, 2);
+					Volume(node_6, {});
+					Rate($.sibling(node_6, 2), {});
+					$.append($$anchor, fragment_3);
+				},
+				$$slots: { default: true }
+			});
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/Captions.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"label"
+]);
+var root$3 = $.from_html(`<div><!></div>`);
+function Captions($$anchor, $$props) {
+	$.push($$props, true);
+	let label = $.prop($$props, "label", 3, "Captions"), rest = $.rest_props($$props, rest_excludes$4);
+	const context = useMediaPlayer();
+	const options = $.derived(() => [{
+		label: "Off",
+		value: "-1"
+	}, ...context.tracks.map((track, index) => ({
+		label: track.label ?? `Track ${index + 1}`,
+		value: String(index)
+	}))]);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	var consequent = ($$anchor) => {
+		var div = root$3();
+		$.attribute_effect(div, () => ({
+			...rest,
+			"data-scope": "media-player",
+			"data-part": "captions"
+		}));
+		var node_1 = $.child(div);
+		{
+			let $0 = $.derived(() => String(context.controls.selectedTextTrack));
+			Select(node_1, {
+				clearable: false,
+				get disabled() {
+					return context.disabled;
+				},
+				get options() {
+					return $.get(options);
+				},
+				get placeholder() {
+					return label();
+				},
+				size: "sm",
+				get value() {
+					return $.get($0);
+				},
+				onValueChange: (value) => context.controls.selectTextTrack(Number(value))
+			});
+		}
+		$.reset(div);
+		$.append($$anchor, div);
+	};
+	$.if(node, ($$render) => {
+		if (context.tracks.length > 0) $$render(consequent);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/FullscreenButton.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"label"
+]);
+var root$2 = $.from_html(`<button><!></button>`);
+function FullscreenButton($$anchor, $$props) {
+	$.push($$props, true);
+	let label = $.prop($$props, "label", 3, "Toggle fullscreen"), rest = $.rest_props($$props, rest_excludes$3);
+	const context = useMediaPlayer();
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	var consequent = ($$anchor) => {
+		var button = root$2();
+		var event_handler = () => context.controls.toggleFullscreen(context.root.current);
+		$.attribute_effect(button, () => ({
+			...rest,
+			type: "button",
+			"data-scope": "media-player",
+			"data-part": "fullscreen-button",
+			"aria-label": label(),
+			title: label(),
+			disabled: context.disabled,
+			onclick: event_handler
+		}));
+		var node_1 = $.child(button);
+		InternalIcon(node_1, {
+			name: "maximize-2",
+			size: "sm"
+		});
+		$.reset(button);
+		$.append($$anchor, button);
+	};
+	$.if(node, ($$render) => {
+		if (context.root.current) $$render(consequent);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/PipButton.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"label"
+]);
+var root$1 = $.from_html(`<button><!></button>`);
+function PipButton($$anchor, $$props) {
+	$.push($$props, true);
+	let label = $.prop($$props, "label", 3, "Toggle picture in picture"), rest = $.rest_props($$props, rest_excludes$2);
+	const context = useMediaPlayer();
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	var consequent = ($$anchor) => {
+		var button = root$1();
+		var event_handler = () => context.controls.togglePictureInPicture();
+		$.attribute_effect(button, () => ({
+			...rest,
+			type: "button",
+			"data-scope": "media-player",
+			"data-part": "pip-button",
+			"aria-label": label(),
+			title: label(),
+			disabled: context.disabled,
+			onclick: event_handler
+		}));
+		var node_1 = $.child(button);
+		InternalIcon(node_1, {
+			name: "picture-in-picture",
+			size: "sm"
+		});
+		$.reset(button);
+		$.append($$anchor, button);
+	};
+	$.if(node, ($$render) => {
+		if (context.kind === "video") $$render(consequent);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/VideoRoot.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+function VideoRoot($$anchor, $$props) {
+	let rest = $.rest_props($$props, rest_excludes$1);
+	MediaPlayerRoot($$anchor, $.spread_props({ kind: "video" }, () => rest, {
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = $.comment();
+			var node = $.first_child(fragment_1);
+			$.snippet(node, () => $$props.children ?? $.noop);
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+}
+//#endregion
+//#region src/components/media-player/Video.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy"
+]);
+var root = $.from_html(`<!> <!> <!> <!> <!> <!> <!> <!> <!>`, 1);
+var root_1 = $.from_html(`<!> <!>`, 1);
+function Video$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("media-player");
+	let props = $.rest_props($$props, rest_excludes);
+	VideoRoot($$anchor, $.spread_props(() => props, {
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = root_1();
+			var node = $.first_child(fragment_1);
+			Stage(node, {
+				children: ($$anchor, $$slotProps) => {
+					Media($$anchor, {});
+				},
+				$$slots: { default: true }
+			});
+			Controls($.sibling(node, 2), {
+				children: ($$anchor, $$slotProps) => {
+					var fragment_3 = root();
+					var node_2 = $.first_child(fragment_3);
+					PlayButton(node_2, {});
+					var node_3 = $.sibling(node_2, 2);
+					Timeline(node_3, {});
+					var node_4 = $.sibling(node_3, 2);
+					Time(node_4, {});
+					var node_5 = $.sibling(node_4, 2);
+					MuteButton(node_5, {});
+					var node_6 = $.sibling(node_5, 2);
+					Volume(node_6, {});
+					var node_7 = $.sibling(node_6, 2);
+					Rate(node_7, {});
+					var node_8 = $.sibling(node_7, 2);
+					Captions(node_8, {});
+					var node_9 = $.sibling(node_8, 2);
+					PipButton(node_9, {});
+					FullscreenButton($.sibling(node_9, 2), {});
+					$.append($$anchor, fragment_3);
+				},
+				$$slots: { default: true }
+			});
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+	$.pop();
+}
+//#endregion
+//#region src/components/media-player/index.ts
+/** 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 = defineFamily(Audio$1, {
+	Root: AudioRoot,
+	Stage,
+	Media,
+	Controls,
+	PlayButton,
+	Timeline,
+	Time,
+	MuteButton,
+	Volume,
+	Rate
+});
+const Video = defineFamily(Video$1, {
+	Root: VideoRoot,
+	Stage,
+	Media,
+	Controls,
+	PlayButton,
+	Timeline,
+	Time,
+	MuteButton,
+	Volume,
+	Rate,
+	Captions,
+	PipButton,
+	FullscreenButton
+});
+//#endregion
+export { Video as n, Audio as t };