@mattebox/player-cast 0.1.0

package/dist/es2015/shared.js

@@ -0,0 +1,125 @@
+//#region src/shared.ts
+/**
+* The styles and helpers the two elements share, copied from the player:
+* the button and slider styles, the glyph slots, the part helper, the label
+* template, and the time format. The player exports none of them, on
+* purpose: a control of the page's own carries its own, and so does this
+* package. The tokens come through the `--mbx-*` custom properties the
+* player sets, which inherit into every control.
+*/
+const BUTTON_STYLE = `
+:host { display: inline-flex; }
+:host([hidden]) { display: none; }
+[part~="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  opacity: 0.9;
+}
+[part~="button"]:hover { opacity: 1; }
+[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
+slot[hidden] { display: none; }
+`;
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+const SLIDER_STYLE = `
+:host { display: block; }
+:host([hidden]) { display: none; }
+[part~="slider"] {
+  position: relative;
+  height: 40px;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  touch-action: none;
+}
+[part~="slider"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="rail"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }
+[part~="track"] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.35);
+  border-radius: 2px;
+  overflow: hidden;
+}
+[part~="fill"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }
+[part~="thumb"] {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
+  border-radius: 50%;
+  background: var(--mbx-text);
+  pointer-events: none;
+}
+`;
+/** A `<style>` with `text`, for a shadow root. */
+function style(text) {
+	const node = document.createElement("style");
+	node.textContent = text;
+	return node;
+}
+/**
+* A named slot per state with the default glyph as its fallback, so a page
+* drops its own SVG into `slot="icon-<state>"` and the button keeps the
+* name. Returns the slots by state; `show` hides all but one.
+*/
+function iconSlots(states, fallback) {
+	const out = {};
+	for (const state of states) {
+		const slot = document.createElement("slot");
+		slot.name = `icon-${state}`;
+		slot.append(fallback(state));
+		slot.hidden = true;
+		out[state] = slot;
+	}
+	return out;
+}
+function show(slots, state) {
+	for (const key of Object.keys(slots)) slots[key].hidden = key !== state;
+}
+/** An element with its part names, and its text when it has any. */
+function el(tag, part, text) {
+	const node = document.createElement(tag);
+	node.setAttribute("part", part);
+	if (text !== void 0) node.textContent = text;
+	return node;
+}
+function fill(template, values) {
+	return template.replace(/\{(\w+)\}/g, (match, name) => {
+		const value = values[name];
+		return value === void 0 ? match : String(value);
+	});
+}
+function pad(n) {
+	return n < 10 ? `0${n}` : `${n}`;
+}
+/** `m:ss`, or `h:mm:ss` from an hour up. Anything not a finite positive number reads as zero. */
+function format(seconds) {
+	const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const rest = total % 60;
+	return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;
+}
+/** What a screen reader hears for a position: "1:23 of 4:56", or the position alone when the duration is unknown or infinite. */
+function describe(current, duration) {
+	return Number.isFinite(duration) ? `${format(current)} of ${format(duration)}` : format(current);
+}
+//#endregion
+export { BUTTON_STYLE, SLIDER_STYLE, describe, el, fill, format, iconSlots, show, style };

package/dist/es2015/slider.js

@@ -0,0 +1,154 @@
+import { el } from "./shared.js";
+//#region src/slider.ts
+/**
+* The slider primitive, copied from the player's, which exports none: a
+* `div` with
+* `role="slider"`, pointer capture for the drag, and the arrow keys. It
+* owns geometry only. What the value means and what happens on change is
+* the caller's, through `onInput`.
+*
+* Not `<input type="range">`: a range input cannot carry layers such as
+* buffered ranges, its geometry is not readable for a preview anchor, and
+* it renders differently per browser. The track is exposed so a caller can
+* lay its own layers on it.
+*
+* The track and the thumb sit on a rail inset from the root's edges by half
+* a thumb, so the thumb at either end is whole and not clipped, and every
+* fraction is measured against the rail.
+*
+* The steps are read on every key, so an element can take them from its
+* attributes as they change.
+*
+* A drag ends on `pointerup`, and also on a move that reports no button
+* held: the button went up where no `pointerup` reached the slider, such
+* as outside the window, and the thumb must not stay on the pointer. A
+* lost capture ends it too.
+*/
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function slider(options) {
+	const { onInput } = options;
+	const root = el("div", "slider");
+	root.setAttribute("role", "slider");
+	root.tabIndex = 0;
+	const rail = el("div", "rail");
+	const track = el("div", "track");
+	const fill = el("div", "fill");
+	const thumb = el("div", "thumb");
+	track.append(fill);
+	rail.append(track, thumb);
+	root.append(rail);
+	let min = 0;
+	let max = 1;
+	let value = 0;
+	let held = false;
+	function paint() {
+		const percent = `${(max > min ? (value - min) / (max - min) : 0) * 100}%`;
+		fill.style.width = percent;
+		thumb.style.left = percent;
+	}
+	/** The value under a horizontal pointer position. */
+	function at(clientX) {
+		const rect = rail.getBoundingClientRect();
+		if (rect.width === 0) return min;
+		return min + clamp((clientX - rect.left) / rect.width, 0, 1) * (max - min);
+	}
+	function hold(on) {
+		held = on;
+		options.onDrag(on);
+	}
+	function down(event) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		hold(true);
+		try {
+			root.setPointerCapture(event.pointerId);
+		} catch (_unused) {}
+		onInput(at(event.clientX));
+	}
+	function move(event) {
+		if (!held) return;
+		if (event.buttons === 0) {
+			up(event);
+			return;
+		}
+		onInput(at(event.clientX));
+	}
+	function up(event) {
+		if (!held) return;
+		hold(false);
+		onInput(at(event.clientX));
+	}
+	function cancel() {
+		if (held) hold(false);
+	}
+	function key(event) {
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				next = value + options.step();
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				next = value - options.step();
+				break;
+			case "PageUp":
+				next = value + options.page();
+				break;
+			case "PageDown":
+				next = value - options.page();
+				break;
+			case "Home":
+				next = min;
+				break;
+			case "End":
+				next = max;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		onInput(clamp(next, min, max));
+	}
+	root.addEventListener("pointerdown", down);
+	root.addEventListener("pointermove", move);
+	root.addEventListener("pointerup", up);
+	root.addEventListener("pointercancel", cancel);
+	root.addEventListener("lostpointercapture", cancel);
+	root.addEventListener("keydown", key);
+	return {
+		root,
+		track,
+		rail,
+		label(text) {
+			root.setAttribute("aria-label", text);
+		},
+		dragging() {
+			return held;
+		},
+		range(low, high) {
+			min = low;
+			max = high;
+			root.setAttribute("aria-valuemin", String(low));
+			root.setAttribute("aria-valuemax", String(high));
+			paint();
+		},
+		set(next, text) {
+			value = clamp(next, min, max);
+			root.setAttribute("aria-valuenow", String(value));
+			root.setAttribute("aria-valuetext", text);
+			paint();
+		},
+		dispose() {
+			root.removeEventListener("pointerdown", down);
+			root.removeEventListener("pointermove", move);
+			root.removeEventListener("pointerup", up);
+			root.removeEventListener("pointercancel", cancel);
+			root.removeEventListener("lostpointercapture", cancel);
+			root.removeEventListener("keydown", key);
+		}
+	};
+}
+//#endregion
+export { slider };

package/dist/host.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The contract of a control of the page's own, as guide chapter 03 of the
+ * player states it: the nearest <mattebox-player> above, through shadow
+ * hosts, then read for `video`, `engine`, `player` and `error`, with
+ * `sourcechange` heard on it. This package implements the contract from
+ * outside, on purpose: the player exports no base class, and a control that
+ * needs more than this surface has found a gap in the player's API.
+ */
+import type { PlayerHost } from '@mattebox/player';
+export type { PlayerHost };
+export declare const PLAYER = "mattebox-player";
+/** The nearest player above `node`, or null outside one. It may not be upgraded yet. */
+export declare function findPlayer(node: Node): HTMLElement | null;
+//# sourceMappingURL=host.d.ts.map

package/dist/host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../src/host.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,YAAY,EAAE,UAAU,EAAE,CAAC;AAE3B,eAAO,MAAM,MAAM,oBAAoB,CAAC;AASxC,wFAAwF;AACxF,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,GAAG,IAAI,CAOzD"}

package/dist/host.js

@@ -0,0 +1,19 @@
+export const PLAYER = 'mattebox-player';
+/** The parent, or the host of the shadow root `node` sits in, or null at the document. */
+function above(node) {
+    const parent = node.parentNode;
+    if (parent !== null)
+        return parent;
+    return node instanceof ShadowRoot ? node.host : null;
+}
+/** The nearest player above `node`, or null outside one. It may not be upgraded yet. */
+export function findPlayer(node) {
+    let current = node;
+    while (current !== null) {
+        if (current instanceof HTMLElement && current.localName === PLAYER)
+            return current;
+        current = above(current);
+    }
+    return null;
+}
+//# sourceMappingURL=host.js.map

package/dist/host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.js","sourceRoot":"","sources":["../src/host.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,MAAM,GAAG,iBAAiB,CAAC;AAExC,0FAA0F;AAC1F,SAAS,KAAK,CAAC,IAAU;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;IAC/B,IAAI,MAAM,KAAK,IAAI;QAAE,OAAO,MAAM,CAAC;IACnC,OAAO,IAAI,YAAY,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AACvD,CAAC;AAED,wFAAwF;AACxF,MAAM,UAAU,UAAU,CAAC,IAAU;IACnC,IAAI,OAAO,GAAgB,IAAI,CAAC;IAChC,OAAO,OAAO,KAAK,IAAI,EAAE,CAAC;QACxB,IAAI,OAAO,YAAY,WAAW,IAAI,OAAO,CAAC,SAAS,KAAK,MAAM;YAAE,OAAO,OAAO,CAAC;QACnF,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/icons.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The play and pause glyphs, copied from Vidstack's media-icons 0.10.0
+ * (https://github.com/vidstack/media-icons): filled paths on a 32-unit
+ * viewBox, drawn for a control bar, one visual weight across the set.
+ * Copied, not depended on. The notice below is the license's one condition,
+ * and packages/player/NOTICE repeats it for the published tarball.
+ *
+ * MIT License
+ *
+ * Copyright (c) 2023 Rahim Alwer
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export type IconName = 'play' | 'pause' | 'cast' | 'cast-active';
+/** A glyph, hidden from the accessibility tree: the button it sits in carries the name. */
+export declare function icon(name: IconName): SVGSVGElement;
+//# sourceMappingURL=icons.d.ts.map

package/dist/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,aAAa,CAAC;AAgBjE,2FAA2F;AAC3F,wBAAgB,IAAI,CAAC,IAAI,EAAE,QAAQ,GAAG,aAAa,CAUlD"}

package/dist/icons.js

@@ -0,0 +1,52 @@
+/**
+ * The play and pause glyphs, copied from Vidstack's media-icons 0.10.0
+ * (https://github.com/vidstack/media-icons): filled paths on a 32-unit
+ * viewBox, drawn for a control bar, one visual weight across the set.
+ * Copied, not depended on. The notice below is the license's one condition,
+ * and packages/player/NOTICE repeats it for the published tarball.
+ *
+ * MIT License
+ *
+ * Copyright (c) 2023 Rahim Alwer
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+/** Each glyph's subpaths joined into one `d`, drawn even-odd like the player's. */
+const PATHS = {
+    play: 'M10.6667 6.6548C10.6667 6.10764 11.2894 5.79346 11.7295 6.11862L24.377 15.4634C24.7377 15.7298 24.7377 16.2692 24.3771 16.5357L11.7295 25.8813C11.2895 26.2065 10.6667 25.8923 10.6667 25.3451L10.6667 6.6548Z',
+    pause: 'M8.66667 6.66667C8.29848 6.66667 8 6.96514 8 7.33333V24.6667C8 25.0349 8.29848 25.3333 8.66667 25.3333H12.6667C13.0349 25.3333 13.3333 25.0349 13.3333 24.6667V7.33333C13.3333 6.96514 13.0349 6.66667 12.6667 6.66667H8.66667Z M19.3333 6.66667C18.9651 6.66667 18.6667 6.96514 18.6667 7.33333V24.6667C18.6667 25.0349 18.9651 25.3333 19.3333 25.3333H23.3333C23.7015 25.3333 24 25.0349 24 24.6667V7.33333C24 6.96514 23.7015 6.66667 23.3333 6.66667H19.3333Z',
+    // The cast glyphs are this package's own drawing, not media-icons: a
+    // screen with the corner open for three arcs, filled while casting.
+    cast: 'M4 6h24v18H20v-2h6V8H6v1H4V6zM4 21a3 3 0 0 1 3 3H4zM4 15a9 9 0 0 1 9 9h-2a7 7 0 0 0-7-7zM4 10a14 14 0 0 1 14 14h-2A12 12 0 0 0 4 12z',
+    'cast-active': 'M4 6h24v18H20A16 16 0 0 0 4 8zM4 21a3 3 0 0 1 3 3H4zM4 15a9 9 0 0 1 9 9h-2a7 7 0 0 0-7-7zM4 10a14 14 0 0 1 14 14h-2A12 12 0 0 0 4 12z',
+};
+const SVG = 'http://www.w3.org/2000/svg';
+/** A glyph, hidden from the accessibility tree: the button it sits in carries the name. */
+export function icon(name) {
+    const svg = document.createElementNS(SVG, 'svg');
+    svg.setAttribute('viewBox', '0 0 32 32');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.setAttribute('part', 'icon');
+    const path = document.createElementNS(SVG, 'path');
+    path.setAttribute('fill-rule', 'evenodd');
+    path.setAttribute('d', PATHS[name]);
+    svg.append(path);
+    return svg;
+}
+//# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAIH,mFAAmF;AACnF,MAAM,KAAK,GAAuC;IAChD,IAAI,EAAE,gNAAgN;IACtN,KAAK,EACH,ocAAoc;IACtc,qEAAqE;IACrE,oEAAoE;IACpE,IAAI,EAAE,sIAAsI;IAC5I,aAAa,EACX,uIAAuI;CAC1I,CAAC;AAEF,MAAM,GAAG,GAAG,4BAA4B,CAAC;AAEzC,2FAA2F;AAC3F,MAAM,UAAU,IAAI,CAAC,IAAc;IACjC,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACjD,GAAG,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;IACzC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACxC,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IACnD,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAC1C,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IACpC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACjB,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @mattebox/player-cast: <mbx-cast-button> and <mbx-cast-screen>, Chromecast
+ * from the player over Google's sender SDK. Importing this module registers
+ * both elements; that is the package's one side effect. It is a package of
+ * its own because the button loads Google's script onto the page, which the
+ * player never does on an integrator's behalf: the AirPlay button, over
+ * Safari's own API, ships with the player.
+ */
+import { MbxCastButton } from './cast-button.js';
+import { MbxCastScreen } from './cast-screen.js';
+export type { CastState, LoadRequest as CastLoadRequest, MediaInfo, Track } from './cast.js';
+export { MbxCastButton } from './cast-button.js';
+export { MbxCastScreen } from './cast-screen.js';
+export declare const CAST_BUTTON = "mbx-cast-button";
+export declare const CAST_SCREEN = "mbx-cast-screen";
+declare global {
+    interface HTMLElementTagNameMap {
+        'mbx-cast-button': MbxCastButton;
+        'mbx-cast-screen': MbxCastScreen;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,YAAY,EAAE,SAAS,EAAE,WAAW,IAAI,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAC7F,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAS7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;QACjC,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/index.js

@@ -0,0 +1,21 @@
+/**
+ * @mattebox/player-cast: <mbx-cast-button> and <mbx-cast-screen>, Chromecast
+ * from the player over Google's sender SDK. Importing this module registers
+ * both elements; that is the package's one side effect. It is a package of
+ * its own because the button loads Google's script onto the page, which the
+ * player never does on an integrator's behalf: the AirPlay button, over
+ * Safari's own API, ships with the player.
+ */
+import { MbxCastButton } from './cast-button.js';
+import { MbxCastScreen } from './cast-screen.js';
+export { MbxCastButton } from './cast-button.js';
+export { MbxCastScreen } from './cast-screen.js';
+export const CAST_BUTTON = 'mbx-cast-button';
+export const CAST_SCREEN = 'mbx-cast-screen';
+if (customElements.get(CAST_BUTTON) === undefined) {
+    customElements.define(CAST_BUTTON, MbxCastButton);
+}
+if (customElements.get(CAST_SCREEN) === undefined) {
+    customElements.define(CAST_SCREEN, MbxCastScreen);
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAE7C,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AACpD,CAAC;AACD,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AACpD,CAAC"}

package/dist/shared.d.ts

@@ -0,0 +1,29 @@
+/**
+ * The styles and helpers the two elements share, copied from the player:
+ * the button and slider styles, the glyph slots, the part helper, the label
+ * template, and the time format. The player exports none of them, on
+ * purpose: a control of the page's own carries its own, and so does this
+ * package. The tokens come through the `--mbx-*` custom properties the
+ * player sets, which inherit into every control.
+ */
+export declare const BUTTON_STYLE = "\n:host { display: inline-flex; }\n:host([hidden]) { display: none; }\n[part~=\"button\"] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n  opacity: 0.9;\n}\n[part~=\"button\"]:hover { opacity: 1; }\n[part~=\"button\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"icon\"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }\nslot[hidden] { display: none; }\n";
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+export declare const SLIDER_STYLE = "\n:host { display: block; }\n:host([hidden]) { display: none; }\n[part~=\"slider\"] {\n  position: relative;\n  height: 40px;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n  touch-action: none;\n}\n[part~=\"slider\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"rail\"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }\n[part~=\"track\"] {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 4px;\n  transform: translateY(-50%);\n  background: rgba(255, 255, 255, 0.35);\n  border-radius: 2px;\n  overflow: hidden;\n}\n[part~=\"fill\"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }\n[part~=\"thumb\"] {\n  position: absolute;\n  top: 50%;\n  width: 12px;\n  height: 12px;\n  margin: -6px 0 0 -6px;\n  border-radius: 50%;\n  background: var(--mbx-text);\n  pointer-events: none;\n}\n";
+/** A `<style>` with `text`, for a shadow root. */
+export declare function style(text: string): HTMLStyleElement;
+/**
+ * A named slot per state with the default glyph as its fallback, so a page
+ * drops its own SVG into `slot="icon-<state>"` and the button keeps the
+ * name. Returns the slots by state; `show` hides all but one.
+ */
+export declare function iconSlots<S extends string>(states: readonly S[], fallback: (state: S) => SVGSVGElement): Record<S, HTMLSlotElement>;
+export declare function show<S extends string>(slots: Record<S, HTMLSlotElement>, state: S): void;
+/** An element with its part names, and its text when it has any. */
+export declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, part: string, text?: string): HTMLElementTagNameMap[K];
+export declare function fill(template: string, values: Readonly<Record<string, string | number>>): string;
+/** `m:ss`, or `h:mm:ss` from an hour up. Anything not a finite positive number reads as zero. */
+export declare function format(seconds: number): string;
+/** What a screen reader hears for a position: "1:23 of 4:56", or the position alone when the duration is unknown or infinite. */
+export declare function describe(current: number, duration: number): string;
+//# sourceMappingURL=shared.d.ts.map

package/dist/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../src/shared.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,eAAO,MAAM,YAAY,8oBAuBxB,CAAC;AAEF,+EAA+E;AAE/E,+EAA+E;AAC/E,eAAO,MAAM,YAAY,o5BAkCxB,CAAC;AAEF,kDAAkD;AAClD,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,gBAAgB,CAIpD;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EACxC,MAAM,EAAE,SAAS,CAAC,EAAE,EACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,aAAa,GACpC,MAAM,CAAC,CAAC,EAAE,eAAe,CAAC,CAU5B;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,eAAe,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,CAExF;AAED,oEAAoE;AACpE,wBAAgB,EAAE,CAAC,CAAC,SAAS,MAAM,qBAAqB,EACtD,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,MAAM,EACZ,IAAI,CAAC,EAAE,MAAM,GACZ,qBAAqB,CAAC,CAAC,CAAC,CAK1B;AAED,wBAAgB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAKhG;AAMD,iGAAiG;AACjG,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAM9C;AAED,iIAAiI;AACjI,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAElE"}

package/dist/shared.js

@@ -0,0 +1,125 @@
+/**
+ * The styles and helpers the two elements share, copied from the player:
+ * the button and slider styles, the glyph slots, the part helper, the label
+ * template, and the time format. The player exports none of them, on
+ * purpose: a control of the page's own carries its own, and so does this
+ * package. The tokens come through the `--mbx-*` custom properties the
+ * player sets, which inherit into every control.
+ */
+export const BUTTON_STYLE = `
+:host { display: inline-flex; }
+:host([hidden]) { display: none; }
+[part~="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  opacity: 0.9;
+}
+[part~="button"]:hover { opacity: 1; }
+[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
+slot[hidden] { display: none; }
+`;
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+export const SLIDER_STYLE = `
+:host { display: block; }
+:host([hidden]) { display: none; }
+[part~="slider"] {
+  position: relative;
+  height: 40px;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  touch-action: none;
+}
+[part~="slider"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="rail"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }
+[part~="track"] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.35);
+  border-radius: 2px;
+  overflow: hidden;
+}
+[part~="fill"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }
+[part~="thumb"] {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
+  border-radius: 50%;
+  background: var(--mbx-text);
+  pointer-events: none;
+}
+`;
+/** A `<style>` with `text`, for a shadow root. */
+export function style(text) {
+    const node = document.createElement('style');
+    node.textContent = text;
+    return node;
+}
+/**
+ * A named slot per state with the default glyph as its fallback, so a page
+ * drops its own SVG into `slot="icon-<state>"` and the button keeps the
+ * name. Returns the slots by state; `show` hides all but one.
+ */
+export function iconSlots(states, fallback) {
+    const out = {};
+    for (const state of states) {
+        const slot = document.createElement('slot');
+        slot.name = `icon-${state}`;
+        slot.append(fallback(state));
+        slot.hidden = true;
+        out[state] = slot;
+    }
+    return out;
+}
+export function show(slots, state) {
+    for (const key of Object.keys(slots))
+        slots[key].hidden = key !== state;
+}
+/** An element with its part names, and its text when it has any. */
+export function el(tag, part, text) {
+    const node = document.createElement(tag);
+    node.setAttribute('part', part);
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+export function fill(template, values) {
+    return template.replace(/\{(\w+)\}/g, (match, name) => {
+        const value = values[name];
+        return value === undefined ? match : String(value);
+    });
+}
+function pad(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+/** `m:ss`, or `h:mm:ss` from an hour up. Anything not a finite positive number reads as zero. */
+export function format(seconds) {
+    const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+    const hours = Math.floor(total / 3600);
+    const minutes = Math.floor((total % 3600) / 60);
+    const rest = total % 60;
+    return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;
+}
+/** What a screen reader hears for a position: "1:23 of 4:56", or the position alone when the duration is unknown or infinite. */
+export function describe(current, duration) {
+    return Number.isFinite(duration) ? `${format(current)} of ${format(duration)}` : format(current);
+}
+//# sourceMappingURL=shared.js.map

package/dist/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../src/shared.ts"],"names":[],"mappings":"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"}