@mattebox/player 0.1.0 → 0.3.0

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

@@ -0,0 +1,124 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+//#region src/elements/start-button.ts
+const STATES = ["play", "replay"];
+const STYLE = `${BUTTON_STYLE}
+:host {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -32px 0 0 -52px;
+}
+[part~="button"] {
+  width: 104px;
+  height: 64px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(0, 0, 0, 0.45);
+  color: var(--mbx-text);
+  opacity: 0.9;
+  transition: opacity 0.15s, background 0.15s;
+}
+[part~="button"]:hover { opacity: 1; background: rgba(0, 0, 0, 0.6); }
+/* A box too short for the button above the bar: the bar's play does the job. */
+:host([cramped]) { display: none; }
+[part~="icon"], ::slotted(*) { width: 40px; height: 40px; margin-left: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  [part~="button"] { transition: none; }
+}
+`;
+var MbxStartButton = class extends Component {
+	static get observedAttributes() {
+		return ["label-play", "label-replay"];
+	}
+	constructor() {
+		super();
+		this.failed = false;
+		this.resizer = 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, icon);
+		for (const state of STATES) this.button.append(this.slots[state]);
+		this.button.addEventListener("click", () => {
+			var _this$player;
+			(_this$player = this.player) === null || _this$player === void 0 || _this$player.video.play().catch(() => void 0);
+		});
+		root.append(style(STYLE), this.button);
+	}
+	attach(player) {
+		const video = player.video;
+		this.listen(video, [
+			"play",
+			"pause",
+			"ended"
+		], () => {
+			this.render();
+		});
+		this.listen(video, ["playing", "loadstart"], () => {
+			this.failed = false;
+			this.render();
+		});
+		this.listen(player, ["sourcechange"], () => {
+			this.failed = false;
+			this.render();
+		});
+		const failure = (event) => {
+			if (!event.detail.fatal) return;
+			this.failed = true;
+			this.render();
+		};
+		player.addEventListener("error", failure);
+		this.keep(() => {
+			player.removeEventListener("error", failure);
+		});
+		this.failed = player.error !== null;
+		if (typeof ResizeObserver !== "undefined") {
+			this.resizer = new ResizeObserver(() => {
+				this.fit(player);
+			});
+			this.resizer.observe(player);
+		}
+		this.fit(player);
+		this.render();
+	}
+	detach() {
+		var _this$resizer;
+		(_this$resizer = this.resizer) === null || _this$resizer === void 0 || _this$resizer.disconnect();
+		this.resizer = null;
+		this.removeAttribute("cramped");
+	}
+	/**
+	* Cramped when the button's foot would be inside the bar's box, which
+	* starts at the top of its gradient: then the bar's own play button is
+	* the one to press. Measured with the button shown, since a hidden one
+	* has no box.
+	*/
+	fit(player) {
+		const bar = player.querySelector("mbx-control-bar");
+		if (bar === null) {
+			this.removeAttribute("cramped");
+			return;
+		}
+		const wasHidden = this.hidden;
+		const wasCramped = this.hasAttribute("cramped");
+		this.hidden = false;
+		this.removeAttribute("cramped");
+		const cramped = this.button.getBoundingClientRect().bottom > bar.getBoundingClientRect().top;
+		this.hidden = wasHidden;
+		this.toggleAttribute("cramped", cramped);
+		if (cramped !== wasCramped) 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" : "play";
+		show(this.slots, state);
+		this.button.setAttribute("aria-label", (_this$getAttribute = this.getAttribute(`label-${state}`)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : state === "play" ? "Play" : "Replay");
+		this.hidden = this.failed || !video.paused;
+	}
+};
+//#endregion
+export { MbxStartButton };

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

@@ -0,0 +1,103 @@
+import { icon } from "../controls/icons.js";
+import { show } from "./shared.js";
+import { MenuElement } from "./menu-element.js";
+import { onTracks, trackItems } from "./audio-menu.js";
+//#region src/elements/subtitles-menu.ts
+const OFF = "off";
+const SUBTITLE_SIZE = "subtitle-size";
+const SUBTITLE_BACKGROUND = "subtitle-background";
+const SIZES = [
+	["small", "Small"],
+	["medium", "Medium"],
+	["large", "Large"],
+	["xlarge", "Extra large"]
+];
+const BACKGROUNDS = [
+	["none", "None"],
+	["dark", "Dark"],
+	["solid", "Solid"]
+];
+const STATES = ["off", "on"];
+var MbxSubtitlesMenu = class extends MenuElement {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-back",
+			"label-off",
+			"label-track",
+			"label-settings",
+			"label-size",
+			"label-background",
+			...SIZES.map(([id]) => `label-${id}`),
+			...BACKGROUNDS.map(([id]) => `label-${id}`)
+		];
+	}
+	constructor() {
+		super(STATES, (state) => icon(state === "on" ? "closed-captions-on" : "closed-captions"));
+		this.engine = null;
+		show(this.slots, "off");
+	}
+	name() {
+		return "Subtitles";
+	}
+	/** A look's group: the choices named from the attributes, the value from the player's. */
+	looks(player, attribute, name, fallback, choices, initial) {
+		var _this$getAttribute;
+		const set = player.getAttribute(attribute);
+		const value = set !== null && choices.some(([id]) => id === set) ? set : initial;
+		return {
+			name,
+			label: (_this$getAttribute = this.getAttribute(`label-${name}`)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : fallback,
+			items: choices.map(([id, text]) => {
+				var _this$getAttribute2;
+				return [id, (_this$getAttribute2 = this.getAttribute(`label-${id}`)) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : text];
+			}),
+			value,
+			onSelect: (chosen) => {
+				player.setAttribute(attribute, chosen);
+				this.render();
+			}
+		};
+	}
+	attach(player) {
+		this.follow(player, (engine) => {
+			this.engine = engine;
+			this.render();
+			if (engine === null) return void 0;
+			return onTracks(engine, () => {
+				this.render();
+			});
+		});
+	}
+	render() {
+		var _this$getAttribute3, _this$getAttribute4, _this$getAttribute5;
+		super.render();
+		const engine = this.engine;
+		const player = this.player;
+		if (engine === null || player === null) {
+			this.hidden = true;
+			return;
+		}
+		const [tracks, active] = trackItems(engine, "text");
+		const items = [[OFF, (_this$getAttribute3 = this.getAttribute("label-off")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "Off"], ...tracks];
+		this.menu.fill([{
+			name: "track",
+			label: (_this$getAttribute4 = this.getAttribute("label-track")) !== null && _this$getAttribute4 !== void 0 ? _this$getAttribute4 : "Track",
+			items,
+			value: active !== null && active !== void 0 ? active : OFF,
+			onSelect: (value) => {
+				if (value === OFF) engine.tracks.deselect("text");
+				else engine.tracks.select(value);
+				this.render();
+			}
+		}, {
+			name: "settings",
+			label: (_this$getAttribute5 = this.getAttribute("label-settings")) !== null && _this$getAttribute5 !== void 0 ? _this$getAttribute5 : "Settings",
+			entries: [this.looks(player, SUBTITLE_SIZE, "size", "Size", SIZES, "medium"), this.looks(player, SUBTITLE_BACKGROUND, "background", "Background", BACKGROUNDS, "dark")]
+		}]);
+		show(this.slots, active === null ? "off" : "on");
+		this.hidden = tracks.length === 0;
+	}
+};
+//#endregion
+export { MbxSubtitlesMenu, SUBTITLE_BACKGROUND, SUBTITLE_SIZE };

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

@@ -0,0 +1,38 @@
+import { Component } from "./component.js";
+import { seekRow, style } from "./shared.js";
+//#region src/elements/time-element.ts
+const STYLE = `
+:host { display: inline-block; min-width: 3ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
+:host([hidden]) { display: none; }
+`;
+const EVENTS = [
+	"timeupdate",
+	"durationchange",
+	"loadedmetadata",
+	"seeking",
+	"seeked",
+	"emptied"
+];
+var TimeElement = class extends Component {
+	constructor(extra = "") {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.text = document.createTextNode("0:00");
+		root.append(style(STYLE + extra), this.text);
+	}
+	connectedCallback() {
+		seekRow(this);
+		super.connectedCallback();
+	}
+	attach(player) {
+		const tick = () => {
+			this.render();
+		};
+		this.listen(player.video, EVENTS, tick);
+		this.listen(player, ["sourcechange"], tick);
+		this.observe(player, ["live", "seekable"], tick);
+		this.render();
+	}
+};
+//#endregion
+export { TimeElement };

package/dist/es2015/elements/volume-slider.js

@@ -0,0 +1,47 @@
+import { Component } from "./component.js";
+import { SLIDER_STYLE, number, style } from "./shared.js";
+import { slider } from "../controls/slider.js";
+//#region src/elements/volume-slider.ts
+const STEP = .05;
+const PAGE = .2;
+var MbxVolumeSlider = class extends Component {
+	static get observedAttributes() {
+		return ["label"];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.bar = slider({
+			step: () => number(this, "step", STEP),
+			page: () => number(this, "page", PAGE),
+			onInput: (value) => {
+				var _this$player;
+				const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+				if (video === void 0) return;
+				video.volume = value;
+				if (value > 0) video.muted = false;
+			},
+			onDrag: (on) => {
+				this.toggleAttribute("dragging", on);
+			}
+		});
+		this.bar.range(0, 1);
+		root.append(style(`${SLIDER_STYLE}:host { width: 80px; flex: none; }`), this.bar.root);
+	}
+	attach(player) {
+		this.listen(player.video, ["volumechange", "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;
+		this.bar.label((_this$getAttribute = this.getAttribute("label")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Volume");
+		const level = video.muted ? 0 : video.volume;
+		this.bar.set(level, `${Math.round(level * 100)}%`);
+	}
+};
+//#endregion
+export { MbxVolumeSlider };

package/dist/es2015/elements/volume.js

@@ -0,0 +1,52 @@
+import { MUTE_BUTTON, VOLUME_SLIDER } from "../tags.js";
+import { Component } from "./component.js";
+import { style } from "./shared.js";
+//#region src/elements/volume.ts
+/**
+* <mbx-volume>: the mute button with the slider unfolding from it under
+* the pointer or keyboard focus, the way a bar keeps its width for the
+* rest. The two are its children, in light DOM, so the page labels and
+* styles each; a group left empty fills itself with both. The slider
+* folds to nothing otherwise, and a page that wants it always out sets
+* its width on `mbx-volume-slider` itself.
+*
+* Keyboard focus, not any focus: a click leaves focus on the mute button,
+* and a slider that stayed out until something else took it would read as
+* stuck. So the group carries `pointer` from a pointer press until a key
+* is pressed or focus leaves, and focus unfolds the slider only without it.
+*/
+const STYLE = `
+:host { display: inline-flex; align-items: center; }
+:host([hidden]) { display: none; }
+::slotted(mbx-volume-slider) { width: 0; opacity: 0; overflow: hidden; transition: width 0.2s ease, opacity 0.2s ease; }
+/* The bar collapses the slider on its own when the row is narrow; then the pointer unfolds nothing. */
+::slotted(mbx-volume-slider[collapsed]) { display: none; }
+:host(:hover) ::slotted(mbx-volume-slider), :host(:focus-within:not([pointer])) ::slotted(mbx-volume-slider) { width: 80px; opacity: 1; }
+@media (prefers-reduced-motion: reduce) {
+  ::slotted(mbx-volume-slider) { transition: none; }
+}
+`;
+var MbxVolume = class extends Component {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" }).append(style(STYLE), document.createElement("slot"));
+	}
+	/** Both parts, when the page wrote none: a constructor must not add children. */
+	connectedCallback() {
+		if (this.childElementCount === 0) this.append(document.createElement(MUTE_BUTTON), document.createElement(VOLUME_SLIDER));
+		super.connectedCallback();
+	}
+	attach() {
+		this.listen(this, ["pointerdown"], () => {
+			this.toggleAttribute("pointer", true);
+		});
+		this.listen(this, ["keydown", "focusout"], () => {
+			this.removeAttribute("pointer");
+		});
+	}
+	detach() {
+		this.removeAttribute("pointer");
+	}
+};
+//#endregion
+export { MbxVolume };

package/dist/es2015/entries/audio-menu.js

@@ -0,0 +1,7 @@
+import { AUDIO_MENU } from "../tags.js";
+import "../element-entry.js";
+import { MbxAudioMenu } from "../elements/audio-menu.js";
+//#region src/entries/audio-menu.ts
+if (customElements.get("mbx-audio-menu") === void 0) customElements.define(AUDIO_MENU, MbxAudioMenu);
+//#endregion
+export { MbxAudioMenu };

package/dist/es2015/entries/chapters-menu.js

@@ -0,0 +1,7 @@
+import { CHAPTERS_MENU } from "../tags.js";
+import "../element-entry.js";
+import { MbxChaptersMenu } from "../elements/chapters-menu.js";
+//#region src/entries/chapters-menu.ts
+if (customElements.get("mbx-chapters-menu") === void 0) customElements.define(CHAPTERS_MENU, MbxChaptersMenu);
+//#endregion
+export { MbxChaptersMenu };

package/dist/es2015/entries/control-bar.js

@@ -0,0 +1,7 @@
+import { CONTROL_BAR } from "../tags.js";
+import "../element-entry.js";
+import { MbxControlBar } from "../elements/control-bar.js";
+//#region src/entries/control-bar.ts
+if (customElements.get("mbx-control-bar") === void 0) customElements.define(CONTROL_BAR, MbxControlBar);
+//#endregion
+export { MbxControlBar };

package/dist/es2015/entries/current-time.js

@@ -0,0 +1,7 @@
+import { CURRENT_TIME } from "../tags.js";
+import "../element-entry.js";
+import { MbxCurrentTime } from "../elements/current-time.js";
+//#region src/entries/current-time.ts
+if (customElements.get("mbx-current-time") === void 0) customElements.define(CURRENT_TIME, MbxCurrentTime);
+//#endregion
+export { MbxCurrentTime };

package/dist/es2015/entries/drm-badge.js

@@ -0,0 +1,7 @@
+import { DRM_BADGE } from "../tags.js";
+import "../element-entry.js";
+import { MbxDrmBadge } from "../elements/drm-badge.js";
+//#region src/entries/drm-badge.ts
+if (customElements.get("mbx-drm-badge") === void 0) customElements.define(DRM_BADGE, MbxDrmBadge);
+//#endregion
+export { MbxDrmBadge };

package/dist/es2015/entries/duration.js

@@ -0,0 +1,7 @@
+import { DURATION } from "../tags.js";
+import "../element-entry.js";
+import { MbxDuration } from "../elements/duration.js";
+//#region src/entries/duration.ts
+if (customElements.get("mbx-duration") === void 0) customElements.define(DURATION, MbxDuration);
+//#endregion
+export { MbxDuration };

package/dist/es2015/entries/error-screen.js

@@ -0,0 +1,7 @@
+import { ERROR_SCREEN } from "../tags.js";
+import "../element-entry.js";
+import { MbxErrorScreen } from "../elements/error-screen.js";
+//#region src/entries/error-screen.ts
+if (customElements.get("mbx-error-screen") === void 0) customElements.define(ERROR_SCREEN, MbxErrorScreen);
+//#endregion
+export { MbxErrorScreen };

package/dist/es2015/entries/fullscreen-button.js

@@ -0,0 +1,7 @@
+import { FULLSCREEN_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxFullscreenButton } from "../elements/fullscreen-button.js";
+//#region src/entries/fullscreen-button.ts
+if (customElements.get("mbx-fullscreen-button") === void 0) customElements.define(FULLSCREEN_BUTTON, MbxFullscreenButton);
+//#endregion
+export { MbxFullscreenButton };

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

@@ -0,0 +1,7 @@
+import { LIVE_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxLiveButton } from "../elements/live-button.js";
+//#region src/entries/live-button.ts
+if (customElements.get("mbx-live-button") === void 0) customElements.define(LIVE_BUTTON, MbxLiveButton);
+//#endregion
+export { MbxLiveButton };

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

@@ -0,0 +1,7 @@
+import { MUTE_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxMuteButton } from "../elements/mute-button.js";
+//#region src/entries/mute-button.ts
+if (customElements.get("mbx-mute-button") === void 0) customElements.define(MUTE_BUTTON, MbxMuteButton);
+//#endregion
+export { MbxMuteButton };

package/dist/es2015/entries/panels.js

@@ -0,0 +1,7 @@
+import { PANELS } from "../tags.js";
+import "../element-entry.js";
+import { MbxPanels } from "../elements/panels.js";
+//#region src/entries/panels.ts
+if (customElements.get("mbx-panels") === void 0) customElements.define(PANELS, MbxPanels);
+//#endregion
+export { MbxPanels };

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

@@ -0,0 +1,7 @@
+import { PIP_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxPipButton } from "../elements/pip-button.js";
+//#region src/entries/pip-button.ts
+if (customElements.get("mbx-pip-button") === void 0) customElements.define(PIP_BUTTON, MbxPipButton);
+//#endregion
+export { MbxPipButton };

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

@@ -0,0 +1,7 @@
+import { PLAY_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxPlayButton } from "../elements/play-button.js";
+//#region src/entries/play-button.ts
+if (customElements.get("mbx-play-button") === void 0) customElements.define(PLAY_BUTTON, MbxPlayButton);
+//#endregion
+export { MbxPlayButton };

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

@@ -0,0 +1,7 @@
+import { QUALITY_MENU } from "../tags.js";
+import "../element-entry.js";
+import { MbxQualityMenu } from "../elements/quality-menu.js";
+//#region src/entries/quality-menu.ts
+if (customElements.get("mbx-quality-menu") === void 0) customElements.define(QUALITY_MENU, MbxQualityMenu);
+//#endregion
+export { MbxQualityMenu };

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

@@ -0,0 +1,7 @@
+import { REMAINING_TIME } from "../tags.js";
+import "../element-entry.js";
+import { MbxRemainingTime } from "../elements/remaining-time.js";
+//#region src/entries/remaining-time.ts
+if (customElements.get("mbx-remaining-time") === void 0) customElements.define(REMAINING_TIME, MbxRemainingTime);
+//#endregion
+export { MbxRemainingTime };

package/dist/es2015/entries/seek-bar.js

@@ -0,0 +1,7 @@
+import { SEEK_BAR } from "../tags.js";
+import "../element-entry.js";
+import { MbxSeekBar } from "../elements/seek-bar.js";
+//#region src/entries/seek-bar.ts
+if (customElements.get("mbx-seek-bar") === void 0) customElements.define(SEEK_BAR, MbxSeekBar);
+//#endregion
+export { MbxSeekBar };

package/dist/es2015/entries/skip-button.js

@@ -0,0 +1,7 @@
+import { SKIP_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxSkipButton } from "../elements/skip-button.js";
+//#region src/entries/skip-button.ts
+if (customElements.get("mbx-skip-button") === void 0) customElements.define(SKIP_BUTTON, MbxSkipButton);
+//#endregion
+export { MbxSkipButton };

package/dist/es2015/entries/spacer.js

@@ -0,0 +1,7 @@
+import { SPACER } from "../tags.js";
+import "../element-entry.js";
+import { MbxSpacer } from "../elements/spacer.js";
+//#region src/entries/spacer.ts
+if (customElements.get("mbx-spacer") === void 0) customElements.define(SPACER, MbxSpacer);
+//#endregion
+export { MbxSpacer };

package/dist/es2015/entries/speed-menu.js

@@ -0,0 +1,7 @@
+import { SPEED_MENU } from "../tags.js";
+import "../element-entry.js";
+import { MbxSpeedMenu } from "../elements/speed-menu.js";
+//#region src/entries/speed-menu.ts
+if (customElements.get("mbx-speed-menu") === void 0) customElements.define(SPEED_MENU, MbxSpeedMenu);
+//#endregion
+export { MbxSpeedMenu };

package/dist/es2015/entries/start-button.js

@@ -0,0 +1,7 @@
+import { START_BUTTON } from "../tags.js";
+import "../element-entry.js";
+import { MbxStartButton } from "../elements/start-button.js";
+//#region src/entries/start-button.ts
+if (customElements.get("mbx-start-button") === void 0) customElements.define(START_BUTTON, MbxStartButton);
+//#endregion
+export { MbxStartButton };

package/dist/es2015/entries/subtitles-menu.js

@@ -0,0 +1,7 @@
+import { SUBTITLES_MENU } from "../tags.js";
+import "../element-entry.js";
+import { MbxSubtitlesMenu } from "../elements/subtitles-menu.js";
+//#region src/entries/subtitles-menu.ts
+if (customElements.get("mbx-subtitles-menu") === void 0) customElements.define(SUBTITLES_MENU, MbxSubtitlesMenu);
+//#endregion
+export { MbxSubtitlesMenu };

package/dist/es2015/entries/volume-slider.js

@@ -0,0 +1,7 @@
+import { VOLUME_SLIDER } from "../tags.js";
+import "../element-entry.js";
+import { MbxVolumeSlider } from "../elements/volume-slider.js";
+//#region src/entries/volume-slider.ts
+if (customElements.get("mbx-volume-slider") === void 0) customElements.define(VOLUME_SLIDER, MbxVolumeSlider);
+//#endregion
+export { MbxVolumeSlider };

package/dist/es2015/entries/volume.js

@@ -0,0 +1,9 @@
+import { VOLUME } from "../tags.js";
+import "../element-entry.js";
+import "./mute-button.js";
+import "./volume-slider.js";
+import { MbxVolume } from "../elements/volume.js";
+//#region src/entries/volume.ts
+if (customElements.get("mbx-volume") === void 0) customElements.define(VOLUME, MbxVolume);
+//#endregion
+export { MbxVolume };

package/dist/es2015/host.js

@@ -0,0 +1,23 @@
+import "./tags.js";
+//#region src/host.ts
+/** 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`, through shadow hosts, or null outside
+* one. The element found may not be upgraded yet; the caller waits for the
+* definition before reading it.
+*/
+function findPlayer(node) {
+	let current = node;
+	while (current !== null) {
+		if (current instanceof HTMLElement && current.localName === "mattebox-player") return current;
+		current = above(current);
+	}
+	return null;
+}
+//#endregion
+export { findPlayer };

package/dist/es2015/index.js

@@ -1,10 +1,49 @@
-import { LAYOUT } from "./controls/options.js";
 import { MatteboxPlayerElement } from "./element.js";
-//#region src/index.ts
-/**
-* @mattebox/player: the <mattebox-player> custom element. Importing this
-* module registers the element; that is the package's one side effect.
-*/
-MatteboxPlayerElement.define();
-//#endregion
-export { LAYOUT, MatteboxPlayerElement };
+import "./element-entry.js";
+import { MbxAudioMenu } from "./elements/audio-menu.js";
+import "./entries/audio-menu.js";
+import { MbxChaptersMenu } from "./elements/chapters-menu.js";
+import "./entries/chapters-menu.js";
+import { MbxControlBar } from "./elements/control-bar.js";
+import "./entries/control-bar.js";
+import { MbxCurrentTime } from "./elements/current-time.js";
+import "./entries/current-time.js";
+import { MbxDrmBadge } from "./elements/drm-badge.js";
+import "./entries/drm-badge.js";
+import { MbxDuration } from "./elements/duration.js";
+import "./entries/duration.js";
+import { MbxErrorScreen } from "./elements/error-screen.js";
+import "./entries/error-screen.js";
+import { MbxFullscreenButton } from "./elements/fullscreen-button.js";
+import "./entries/fullscreen-button.js";
+import { MbxLiveButton } from "./elements/live-button.js";
+import "./entries/live-button.js";
+import { MbxMuteButton } from "./elements/mute-button.js";
+import "./entries/mute-button.js";
+import { MbxPanels } from "./elements/panels.js";
+import "./entries/panels.js";
+import { MbxPipButton } from "./elements/pip-button.js";
+import "./entries/pip-button.js";
+import { MbxPlayButton } from "./elements/play-button.js";
+import "./entries/play-button.js";
+import { MbxQualityMenu } from "./elements/quality-menu.js";
+import "./entries/quality-menu.js";
+import { MbxRemainingTime } from "./elements/remaining-time.js";
+import "./entries/remaining-time.js";
+import { MbxSeekBar } from "./elements/seek-bar.js";
+import "./entries/seek-bar.js";
+import { MbxSkipButton } from "./elements/skip-button.js";
+import "./entries/skip-button.js";
+import { MbxSpacer } from "./elements/spacer.js";
+import "./entries/spacer.js";
+import { MbxSpeedMenu } from "./elements/speed-menu.js";
+import "./entries/speed-menu.js";
+import { MbxStartButton } from "./elements/start-button.js";
+import "./entries/start-button.js";
+import { MbxSubtitlesMenu } from "./elements/subtitles-menu.js";
+import "./entries/subtitles-menu.js";
+import { MbxVolumeSlider } from "./elements/volume-slider.js";
+import "./entries/volume-slider.js";
+import { MbxVolume } from "./elements/volume.js";
+import "./entries/volume.js";
+export { MatteboxPlayerElement, MbxAudioMenu, MbxChaptersMenu, MbxControlBar, MbxCurrentTime, MbxDrmBadge, MbxDuration, MbxErrorScreen, MbxFullscreenButton, MbxLiveButton, MbxMuteButton, MbxPanels, MbxPipButton, MbxPlayButton, MbxQualityMenu, MbxRemainingTime, MbxSeekBar, MbxSkipButton, MbxSpacer, MbxSpeedMenu, MbxStartButton, MbxSubtitlesMenu, MbxVolume, MbxVolumeSlider };