@mattebox/player 0.1.0 → 0.3.0

package/dist/es2015/elements/live-button.js

@@ -0,0 +1,97 @@
+import { el } from "../dom.js";
+import { Component } from "./component.js";
+import { seekRow, style } from "./shared.js";
+import { live } from "../controls/session.js";
+//#region src/elements/live-button.ts
+/**
+* <mbx-live-button>: a dot and the word, the dot red at the edge and grey
+* behind it, the way viewers read it everywhere. Shown once the stream has
+* an availability window, which is what makes it live; disabled at the
+* edge, where there is nowhere to go; a click seeks to the edge, the one
+* engine write the row makes. The element carries `at-edge` meanwhile.
+*
+* Without a seek bar, when the player says the stream is not seekable,
+* there is nowhere to come back from either: the dot stays red and the
+* button stays inert, whatever the playhead does. The word comes from
+* `text`, the name from `label-live` and `label-at-edge`. It sits in the
+* bar's seek row unless the page says otherwise.
+*/
+const STYLE = `
+:host { display: inline-flex; }
+:host([hidden]) { display: none; }
+[part~="button"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 40px;
+  padding: 0 8px;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  opacity: 0.9;
+}
+[part~="button"]:hover { opacity: 1; }
+[part~="button"]:disabled { cursor: default; opacity: 1; }
+[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="dot"] { width: 10px; height: 10px; border-radius: 50%; background: var(--mbx-muted); transition: background 0.2s; }
+:host([at-edge]) [part~="dot"] { background: var(--mbx-live); box-shadow: 0 0 6px var(--mbx-live); }
+@media (prefers-reduced-motion: reduce) {
+  [part~="dot"] { transition: none; }
+}
+`;
+var MbxLiveButton = class extends Component {
+	static get observedAttributes() {
+		return [
+			"text",
+			"label-live",
+			"label-at-edge"
+		];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.button = el("button", "button");
+		this.button.type = "button";
+		this.text = el("span", "text");
+		this.button.append(el("span", "dot"), this.text);
+		this.button.addEventListener("click", () => {
+			var _live, _this$player$engine, _this$player;
+			(_live = live((_this$player$engine = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.engine) !== null && _this$player$engine !== void 0 ? _this$player$engine : null)) === null || _live === void 0 || _live.seekToEdge();
+		});
+		root.append(style(STYLE), this.button);
+	}
+	connectedCallback() {
+		seekRow(this);
+		super.connectedCallback();
+	}
+	attach(player) {
+		const tick = () => {
+			this.render();
+		};
+		this.listen(player.video, ["timeupdate", "emptied"], tick);
+		this.listen(player, ["sourcechange"], tick);
+		this.observe(player, ["live", "seekable"], tick);
+		this.render();
+	}
+	render() {
+		var _this$getAttribute, _this$getAttribute2, _this$getAttribute3;
+		const player = this.player;
+		if (player === null) return;
+		const api = live(player.engine);
+		this.hidden = api === void 0;
+		this.text.textContent = (_this$getAttribute = this.getAttribute("text")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "LIVE";
+		if (api === void 0) return;
+		const atEdge = player.hasAttribute("live") && !player.hasAttribute("seekable") || api.atEdge;
+		this.button.disabled = atEdge;
+		this.toggleAttribute("at-edge", atEdge);
+		this.button.setAttribute("aria-label", atEdge ? (_this$getAttribute2 = this.getAttribute("label-at-edge")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "At the live edge" : (_this$getAttribute3 = this.getAttribute("label-live")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "Go to the live edge");
+	}
+};
+//#endregion
+export { MbxLiveButton };

package/dist/es2015/elements/menu-element.js

@@ -0,0 +1,39 @@
+import { icon } from "../controls/icons.js";
+import { menu } from "../controls/menu.js";
+import { fill } from "../labels.js";
+import { Component } from "./component.js";
+import { MENU_STYLE, iconSlots, style } from "./shared.js";
+//#region src/elements/menu-element.ts
+var MenuElement = class extends Component {
+	constructor(states, glyphs) {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.menu = menu({
+			host: this,
+			ceiling: () => {
+				var _this$player$video$ge, _this$player;
+				return (_this$player$video$ge = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video.getBoundingClientRect().top) !== null && _this$player$video$ge !== void 0 ? _this$player$video$ge : null;
+			},
+			back: (page) => {
+				var _this$getAttribute;
+				return fill((_this$getAttribute = this.getAttribute("label-back")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Back from {page}", { page });
+			}
+		});
+		this.slots = iconSlots(states, glyphs);
+		for (const state of states) this.menu.button.append(this.slots[state]);
+		root.append(style(MENU_STYLE), this.menu.button, this.menu.popup);
+	}
+	detach() {
+		this.menu.close();
+	}
+	render() {
+		var _this$getAttribute2;
+		this.menu.label((_this$getAttribute2 = this.getAttribute("label")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : this.name());
+	}
+};
+/** A glyph that never changes, for a menu of one state. */
+function single(name) {
+	return [["default"], () => icon(name)];
+}
+//#endregion
+export { MenuElement, single };

package/dist/es2015/elements/mute-button.js

@@ -0,0 +1,60 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+//#region src/elements/mute-button.ts
+/**
+* <mbx-mute-button>: mute and unmute, with the level drawn in the glyph:
+* `icon-mute` while muted or at zero, `icon-low` up to half, `icon-high`
+* above. Unmuting at zero volume would change nothing the viewer can
+* hear, so it brings the volume up too. The name comes from `label-mute`
+* and `label-unmute`, and `aria-pressed` says which state it is in.
+*/
+const LEVELS = [
+	"mute",
+	"low",
+	"high"
+];
+var MbxMuteButton = class extends Component {
+	static get observedAttributes() {
+		return ["label-mute", "label-unmute"];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.slots = iconSlots(LEVELS, (level) => icon(level === "mute" ? "mute" : level === "low" ? "volume-low" : "volume-high"));
+		for (const level of LEVELS) this.button.append(this.slots[level]);
+		this.button.addEventListener("click", () => {
+			this.toggle();
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	toggle() {
+		var _this$player;
+		const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+		if (video === void 0) return;
+		if (video.muted) {
+			video.muted = false;
+			if (video.volume === 0) video.volume = 1;
+		} else video.muted = true;
+	}
+	attach(player) {
+		this.listen(player.video, ["volumechange", "emptied"], () => {
+			this.render();
+		});
+		this.render();
+	}
+	render() {
+		var _this$player2, _this$getAttribute, _this$getAttribute2;
+		const video = (_this$player2 = this.player) === null || _this$player2 === void 0 ? void 0 : _this$player2.video;
+		if (video === void 0) return;
+		const silent = video.muted || video.volume === 0;
+		show(this.slots, silent ? "mute" : video.volume <= .5 ? "low" : "high");
+		this.button.setAttribute("aria-label", silent ? (_this$getAttribute = this.getAttribute("label-unmute")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Unmute" : (_this$getAttribute2 = this.getAttribute("label-mute")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Mute");
+		this.button.setAttribute("aria-pressed", String(video.muted));
+	}
+};
+//#endregion
+export { MbxMuteButton };

package/dist/es2015/elements/panels.js

@@ -0,0 +1,52 @@
+import { Component } from "./component.js";
+import { style } from "./shared.js";
+//#region src/elements/panels.ts
+/**
+* <mbx-panels>: the row under the video for what native controls cannot
+* show. It sits in the player beside the video, in flow, so it lands
+* under the picture, and lays its children out in a row: the quality,
+* audio and subtitles menus, the live button, the lock. Each child hides
+* itself when its session has nothing for it, and the row hides when
+* every child has, so a native session shows no strip at all.
+*/
+const STYLE = `
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mbx-gap);
+  padding: var(--mbx-pad);
+  background: var(--mbx-surface);
+  color: var(--mbx-text);
+  font: 400 13px/1.4 var(--mbx-font);
+}
+:host([hidden]) { display: none; }
+`;
+var MbxPanels = class extends Component {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" }).append(style(STYLE), document.createElement("slot"));
+	}
+	empty() {
+		return ![...this.children].some((child) => !child.hidden);
+	}
+	attach() {
+		const tick = () => {
+			const empty = this.empty();
+			if (this.hidden !== empty) this.hidden = empty;
+		};
+		const observer = new MutationObserver(tick);
+		observer.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["hidden"]
+		});
+		this.keep(() => {
+			observer.disconnect();
+		});
+		tick();
+	}
+};
+//#endregion
+export { MbxPanels };

package/dist/es2015/elements/pip-button.js

@@ -0,0 +1,56 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+import { pictureInPicture } from "../controls/pip.js";
+//#region src/elements/pip-button.ts
+/**
+* <mbx-pip-button>: picture in picture, through whichever API the browser
+* has, and hidden where there is none. The glyph is `icon-enter` or
+* `icon-exit`, the name `label-enter` or `label-exit`, and the element
+* sets `pip` on the player while the video is in the floating window.
+*/
+const STATES = ["enter", "exit"];
+var MbxPipButton = class extends Component {
+	static get observedAttributes() {
+		return ["label-enter", "label-exit"];
+	}
+	constructor() {
+		super();
+		this.api = null;
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.slots = iconSlots(STATES, (state) => icon(state === "enter" ? "picture-in-picture" : "picture-in-picture-exit"));
+		for (const state of STATES) this.button.append(this.slots[state]);
+		this.button.addEventListener("click", () => {
+			var _this$api;
+			(_this$api = this.api) === null || _this$api === void 0 || _this$api.toggle();
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	attach(player) {
+		const api = pictureInPicture(player.video);
+		this.api = api;
+		this.hidden = !api.supported;
+		this.keep(api.watch(() => {
+			this.render();
+		}));
+		this.render();
+	}
+	detach(player) {
+		this.api = null;
+		player.removeAttribute("pip");
+	}
+	render() {
+		var _this$getAttribute, _this$getAttribute2;
+		const player = this.player;
+		if (player === null || this.api === null) return;
+		const active = this.api.active();
+		show(this.slots, active ? "exit" : "enter");
+		this.button.setAttribute("aria-label", active ? (_this$getAttribute = this.getAttribute("label-exit")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Leave picture in picture" : (_this$getAttribute2 = this.getAttribute("label-enter")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Picture in picture");
+		player.toggleAttribute("pip", active);
+	}
+};
+//#endregion
+export { MbxPipButton };

package/dist/es2015/elements/play-button.js

@@ -0,0 +1,68 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+//#region src/elements/play-button.ts
+/**
+* <mbx-play-button>: play, pause, or replay once the media has ended. It
+* reads the video on the events the video already fires and writes one
+* thing back on click. The glyph is a slot per state, so a page drops its
+* own SVG into `icon-play`, `icon-pause` or `icon-replay`; the name is on
+* the button, from `label-play`, `label-pause` and `label-replay`, where a
+* screen reader reads it.
+*/
+const STATES = [
+	"play",
+	"pause",
+	"replay"
+];
+const LABELS = {
+	play: "Play",
+	pause: "Pause",
+	replay: "Replay"
+};
+var MbxPlayButton = class extends Component {
+	static get observedAttributes() {
+		return STATES.map((state) => `label-${state}`);
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.slots = iconSlots(STATES, icon);
+		for (const state of STATES) this.button.append(this.slots[state]);
+		this.button.addEventListener("click", () => {
+			this.toggle();
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	toggle() {
+		var _this$player;
+		const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+		if (video === void 0) return;
+		if (video.paused) video.play().catch(() => void 0);
+		else video.pause();
+	}
+	attach(player) {
+		this.listen(player.video, [
+			"play",
+			"pause",
+			"ended",
+			"emptied"
+		], () => {
+			this.render();
+		});
+		this.render();
+	}
+	render() {
+		var _this$player2, _this$getAttribute;
+		const video = (_this$player2 = this.player) === null || _this$player2 === void 0 ? void 0 : _this$player2.video;
+		if (video === void 0) return;
+		const state = video.ended ? "replay" : video.paused ? "play" : "pause";
+		show(this.slots, state);
+		this.button.setAttribute("aria-label", (_this$getAttribute = this.getAttribute(`label-${state}`)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : LABELS[state]);
+	}
+};
+//#endregion
+export { MbxPlayButton };

package/dist/es2015/elements/quality-menu.js

@@ -0,0 +1,68 @@
+import { show } from "./shared.js";
+import { MenuElement, single } from "./menu-element.js";
+//#region src/elements/quality-menu.ts
+const AUTO = "auto";
+function renditionLabel(rendition) {
+	if (rendition.height !== void 0) return `${rendition.height}p`;
+	return `${Math.round(rendition.bitrate / 1e3)} kbps`;
+}
+var MbxQualityMenu = class extends MenuElement {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-auto",
+			"label-back"
+		];
+	}
+	constructor() {
+		super(...single("settings"));
+		this.engine = null;
+		show(this.slots, "default");
+	}
+	name() {
+		return "Quality";
+	}
+	attach(player) {
+		this.follow(player, (engine) => {
+			this.engine = engine;
+			this.render();
+			if (engine === null) return void 0;
+			const tick = () => {
+				this.render();
+			};
+			const offs = [
+				engine.on("tracks:changed", tick),
+				engine.on("quality:constraints-unsatisfiable", tick),
+				engine.on("quality:pin-unsatisfiable", tick)
+			];
+			return () => {
+				for (const off of offs) off();
+			};
+		});
+	}
+	render() {
+		var _this$getAttribute, _quality$pinned;
+		super.render();
+		const engine = this.engine;
+		if (engine === null) {
+			this.hidden = true;
+			return;
+		}
+		const quality = engine.quality;
+		const items = [[AUTO, (_this$getAttribute = this.getAttribute("label-auto")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Auto"]];
+		for (const rendition of quality.renditions) items.push([rendition.id, renditionLabel(rendition)]);
+		this.menu.fill([{
+			name: "rendition",
+			items,
+			value: (_quality$pinned = quality.pinned) !== null && _quality$pinned !== void 0 ? _quality$pinned : AUTO,
+			onSelect: (value) => {
+				if (value === AUTO) quality.auto();
+				else quality.pin(value);
+				this.render();
+			}
+		}]);
+		this.hidden = quality.renditions.length === 0;
+	}
+};
+//#endregion
+export { MbxQualityMenu };

package/dist/es2015/elements/remaining-time.js

@@ -0,0 +1,26 @@
+import { format } from "../controls/time.js";
+import { live, span } from "../controls/session.js";
+import { TimeElement } from "./time-element.js";
+//#region src/elements/remaining-time.ts
+/**
+* <mbx-remaining-time>: what is left, "-4:53", once the metadata is in. A
+* bar that shows one number shows this one: a viewer asks how much is
+* left more often than where they are. A live stream has no end, so the
+* element hides while the stream is live, as the duration does.
+*/
+var MbxRemainingTime = class extends TimeElement {
+	constructor() {
+		super(":host { text-align: right; }");
+	}
+	render() {
+		const player = this.player;
+		if (player === null) return;
+		const video = player.video;
+		const engine = player.engine;
+		const on = live(engine) !== void 0;
+		this.hidden = on;
+		if (!on) this.text.data = `-${format(Math.max(0, span(video, engine).end - video.currentTime))}`;
+	}
+};
+//#endregion
+export { MbxRemainingTime };