@mattebox/player 0.1.0 → 0.3.0

package/dist/es2015/labels.js

@@ -0,0 +1,14 @@
+//#region src/labels.ts
+/**
+* Label templates: `{name}` in an attribute's text is replaced from the
+* values the element has, and a name it does not have stays as written.
+* Pure, node-tested.
+*/
+function fill(template, values) {
+	return template.replace(/\{(\w+)\}/g, (match, name) => {
+		const value = values[name];
+		return value === void 0 ? match : String(value);
+	});
+}
+//#endregion
+export { fill };

package/dist/es2015/style.js

@@ -1,6 +1,14 @@
 //#region src/style.ts
 /**
-* The default styles. Two rules govern them.
+* The default styles of the element itself: the stage, fullscreen, and the
+* error surface under native controls. Every control carries its own sheet.
+* Two rules govern them.
+*
+* The box is black and the picture is centred in it, letterboxed or
+* pillarboxed by `object-fit: contain`, whatever height or ratio the page
+* gives the element: what fullscreen always did, now the default. With no
+* height from the page the stage is as tall as the picture and none of it
+* shows.
 *
 * Nothing carries `!important`. For normal declarations the outer tree wins
 * over the shadow tree, so any `::part()` rule the page writes beats these
@@ -15,6 +23,7 @@ const STYLE = `
   display: block;
   position: relative;
   outline: none;
+  background: #000;
   --mbx-surface: #101114;
   --mbx-text: #f2f3f5;
   --mbx-muted: #9aa0a6;
@@ -26,312 +35,53 @@ const STYLE = `
   --mbx-pad: 8px;
   --mbx-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
-[part~="stage"] { position: relative; }
-/* 16:9 until the media says otherwise: a bare video measures 300 by 150 and
-   would jump to its size on metadata. Auto first, so the natural ratio wins
-   once it is known. */
-::slotted(video) { display: block; width: 100%; aspect-ratio: auto 16 / 9; }
-[part~="controls"] {
-  position: absolute;
-  inset: auto 0 0 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 40px 16px 12px;
-  color: var(--mbx-text);
-  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
-  font: 500 16px/1.2 var(--mbx-font);
-  transition: opacity 0.2s;
-}
-[part~="idle"] { opacity: 0; pointer-events: none; }
-[part~="error-screen"] {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.75);
-  color: var(--mbx-text);
-  font: 400 15px/1.4 var(--mbx-font);
-  text-align: center;
-}
-[part~="error-box"] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
-[part~="error-title"] { font-size: 18px; font-weight: 600; }
-[part~="error-detail"] { font-family: monospace; font-size: 13px; color: var(--mbx-error); }
-[part~="error-retry"] { width: auto; height: 36px; padding: 0 16px; border: 1px solid currentColor; font-weight: 600; }
-[part~="row"] { display: flex; align-items: center; gap: 8px; }
-[part~="seek-row"] { gap: 16px; }
-[part~="current-time"], [part~="duration"] { min-width: 3ch; font-variant-numeric: tabular-nums; white-space: nowrap; }
-[part~="duration"] { text-align: right; }
-[part~="control"] {
-  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~="control"]:hover { opacity: 1; }
-[part~="start-button"] {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 96px;
-  height: 96px;
-  margin: -48px 0 0 -48px;
-  color: var(--mbx-text);
-  opacity: 0.92;
-  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
-  transition: opacity 0.15s;
-}
-[part~="start-button"]:hover { opacity: 1; }
-[part~="start-button"] [part~="icon"] { width: 72px; height: 72px; }
-[part~="error-screen"] {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  background: rgba(0, 0, 0, 0.75);
-  color: var(--mbx-text);
-  font: 400 15px/1.4 var(--mbx-font);
-  text-align: center;
-}
-[part~="error-box"] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
-[part~="error-title"] { font-size: 18px; font-weight: 600; }
-[part~="error-detail"] { font-family: monospace; font-size: 13px; color: var(--mbx-error); }
-[part~="error-retry"] { width: auto; height: 36px; padding: 0 16px; border: 1px solid currentColor; font-weight: 600; }
-[part~="row"] { display: flex; align-items: center; gap: 8px; }
-[part~="seek-row"] { gap: 16px; }
-[part~="current-time"], [part~="duration"] { min-width: 3ch; font-variant-numeric: tabular-nums; white-space: nowrap; }
-[part~="duration"] { text-align: right; }
-[part~="control"] {
-  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~="control"]:hover { opacity: 1; }
-[part~="start-button"] {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 104px;
-  height: 64px;
-  margin: -32px 0 0 -52px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: var(--mbx-radius);
-  background: rgba(0, 0, 0, 0.45);
-  color: var(--mbx-text);
-  opacity: 0.9;
-  transition: opacity 0.15s, background 0.15s;
-}
-[part~="start-button"]:hover { opacity: 1; background: rgba(0, 0, 0, 0.6); }
-[part~="start-button"] [part~="icon"] { width: 40px; height: 40px; margin-left: 2px; }
-[part~="icon"] { width: 1.75em; height: 1.75em; fill: currentColor; }
-[part~="slider"] {
+/* The stage is a column as tall as the host, so the picture is centred
+   in whatever height the page gives, and the panels row under native
+   controls keeps its place below the picture. The height comes from the
+   page, or from the browser in fullscreen, and not from a display on the
+   host: a page's own "mattebox-player { display: block }" beats a :host()
+   rule, so nothing here may depend on one. */
+[part~="stage"] {
   position: relative;
-  flex: none;
-  height: 40px;
-  border-radius: var(--mbx-radius);
-  cursor: pointer;
-  touch-action: none;
-}
-[part~="rail"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }
-[part~="seek"] { flex: 1; }
-[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: 16px;
-  height: 16px;
-  margin: -8px 0 0 -8px;
-  border-radius: 50%;
-  background: var(--mbx-text);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  pointer-events: none;
-}
-[part~="buffered"] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
-[part~="buffered-range"] { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.3); }
-[part~="hover"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-text); }
-[part~="edge"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-live); }
-[part~="preview"] {
-  position: absolute;
-  bottom: 100%;
-  margin-bottom: 4px;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  padding: 2px;
-  background: var(--mbx-surface);
-  border-radius: var(--mbx-radius);
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  pointer-events: none;
-}
-[part~="preview-image"] { position: relative; overflow: hidden; border-radius: 2px; }
-[part~="preview-tile"] { position: absolute; top: 0; left: 0; transform-origin: top left; background-repeat: no-repeat; }
-[part~="preview-time"] { padding: 0 4px; }
-[part~="volume-group"] { display: flex; align-items: center; }
-[part~="volume"] { width: 0; opacity: 0; transition: width 0.2s ease, opacity 0.2s ease; }
-/* Two attributes in one selector, the one place: the slider unfolds from
-   its group under the pointer or focus, and a page reaches it through
-   ::part(volume) all the same. */
-[part~="volume-group"]:hover [part~="volume"] { width: 80px; opacity: 1; }
-[part~="volume-group"]:focus-within [part~="volume"] { width: 80px; opacity: 1; }
-[part~="cluster"] { display: flex; align-items: center; gap: 4px; margin-left: auto; }
-[part~="live-button"] { width: auto; gap: 6px; padding: 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
-[part~="live-button"]:disabled { cursor: default; opacity: 1; }
-[part~="live-dot"] { width: 10px; height: 10px; border-radius: 50%; background: var(--mbx-muted); transition: background 0.2s; }
-/* Two attributes, as with the volume: the dot reads the button's state. */
-[part~="live-dot"][part~="at-edge"] { background: var(--mbx-live); box-shadow: 0 0 6px var(--mbx-live); }
-[part~="slot"] { display: contents; }
-[part~="menu"] { position: relative; }
-[part~="popup"] {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  margin-bottom: 8px;
-  min-width: 160px;
-  padding: 6px;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  background: rgba(16, 17, 20, 0.95);
-  border-radius: var(--mbx-radius);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-  font-size: 14px;
+  justify-content: center;
+  height: 100%;
 }
-[part~="section"] { display: flex; flex-direction: column; }
-[part~="section"] + [part~="section"] { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
-[part~="section-label"] { padding: 4px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mbx-muted); }
-[part~="item"] {
+/* 16:9 until the media says otherwise: a bare video measures 300 by 150 and
+   would jump to its size on metadata. Auto first, so the natural ratio wins
+   once it is known. Capped at the stage, and contained, so a box shorter
+   than the picture letterboxes it and a narrower one pillarboxes it. */
+::slotted(video) {
   display: block;
   width: 100%;
-  padding: 8px 12px 8px 28px;
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  white-space: nowrap;
-  background: transparent;
-  border: 0;
-  border-radius: var(--mbx-radius);
-  cursor: pointer;
-}
-[part~="item"]:hover { background: rgba(255, 255, 255, 0.12); }
-[part~="item"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="page-item"] { position: relative; padding-right: 28px; }
-[part~="page-item"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: 0.7; }
-[part~="back-item"] { position: relative; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; margin-bottom: 6px; }
-[part~="back-item"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 0 0 1.5px; transform: rotate(-45deg); opacity: 0.7; }
-[part~="checked"] { position: relative; }
-[part~="checked"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mbx-accent); }
-[part~="drm-badge"] { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--mbx-muted); border-radius: var(--mbx-radius); cursor: default; }
-[part~="drm-badge"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="tooltip"] {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  margin-bottom: 8px;
-  padding: 8px 10px;
-  background: rgba(16, 17, 20, 0.95);
-  border-radius: var(--mbx-radius);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-  color: var(--mbx-text);
-  font-size: 13px;
-  line-height: 1.4;
-  text-align: left;
-  white-space: nowrap;
-  pointer-events: none;
-}
-[part~="tooltip-title"] { font-weight: 600; }
-[part~="tooltip-text"] { color: var(--mbx-muted); }
-[part~="track"] {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 4px;
-  transform: translateY(-50%);
-  background: rgba(255, 255, 255, 0.3);
-  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;
+  min-height: 0;
+  max-height: 100%;
+  object-fit: contain;
+  aspect-ratio: auto 16 / 9;
 }
 :host(:focus-visible) [part~="stage"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="control"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="slider"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
-[part~="stage"]:fullscreen { display: flex; background: #000; }
-[part~="stage"]:fullscreen ::slotted(video) { height: 100%; object-fit: contain; }
-[part~="stage"]:-webkit-full-screen { display: flex; background: #000; }
-[part~="stage"]:-webkit-full-screen ::slotted(video) { height: 100%; object-fit: contain; }
-@media (prefers-reduced-motion: reduce) {
-  [part~="controls"] { transition: none; }
-  [part~="volume"] { transition: none; }
-  [part~="live-dot"] { transition: none; }
-  [part~="start-button"] { transition: none; }
-}
-[part~="panels"], [part~="error"] {
+/* Fullscreen goes on the host, so every control the page placed inside
+   comes along. The browser gives the host the whole screen with
+   !important; the picture takes what the panels row leaves. The error
+   surface, which sits under the stage in the page, goes over its foot
+   instead. */
+:host(:fullscreen) ::slotted(video) { flex: 1; }
+:host(:fullscreen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
+:host(:-webkit-full-screen) ::slotted(video) { flex: 1; }
+:host(:-webkit-full-screen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
+[part~="error"] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--mbx-gap);
   padding: var(--mbx-pad);
   background: var(--mbx-surface);
-  color: var(--mbx-text);
+  color: var(--mbx-error);
   font: 400 13px/1.4 var(--mbx-font);
 }
-[part~="panels"]:empty { display: none; }
-[part~="panel"] { display: flex; align-items: center; gap: 6px; }
-[part~="label"] { display: flex; align-items: center; gap: 6px; }
-[part~="text"] { color: var(--mbx-muted); }
 [part~="value"] { color: var(--mbx-accent); }
-[part~="select"], [part~="button"] {
+[part~="button"] {
   font: inherit;
   color: inherit;
   background: transparent;
@@ -339,8 +89,6 @@ const STYLE = `
   border-radius: var(--mbx-radius);
   padding: 2px 6px;
 }
-[part~="button"][disabled] { opacity: 0.5; }
-[part~="error"] { color: var(--mbx-error); }
 [hidden] { display: none; }
 `;
 //#endregion

package/dist/es2015/{panels/error.js → surface.js}

@@ -1,7 +1,7 @@
-import { el } from "../dom.js";
-//#region src/panels/error.ts
+import { el } from "./dom.js";
+//#region src/surface.ts
 function errorSurface(retry) {
-	const root = el("div", "panel error");
+	const root = el("div", "error");
 	const category = el("span", "value error-category");
 	const code = el("span", "value error-code");
 	const button = el("button", "button error-retry", "Retry");

package/dist/es2015/tags.js

@@ -0,0 +1,28 @@
+//#region src/tags.ts
+/** The tag names, in one place, so the composition and the lookup agree with the registration. */
+const PLAYER = "mattebox-player";
+const CONTROL_BAR = "mbx-control-bar";
+const SPACER = "mbx-spacer";
+const PLAY_BUTTON = "mbx-play-button";
+const MUTE_BUTTON = "mbx-mute-button";
+const VOLUME_SLIDER = "mbx-volume-slider";
+const SKIP_BUTTON = "mbx-skip-button";
+const PIP_BUTTON = "mbx-pip-button";
+const FULLSCREEN_BUTTON = "mbx-fullscreen-button";
+const START_BUTTON = "mbx-start-button";
+const ERROR_SCREEN = "mbx-error-screen";
+const CURRENT_TIME = "mbx-current-time";
+const DURATION = "mbx-duration";
+const REMAINING_TIME = "mbx-remaining-time";
+const SEEK_BAR = "mbx-seek-bar";
+const LIVE_BUTTON = "mbx-live-button";
+const SPEED_MENU = "mbx-speed-menu";
+const QUALITY_MENU = "mbx-quality-menu";
+const AUDIO_MENU = "mbx-audio-menu";
+const SUBTITLES_MENU = "mbx-subtitles-menu";
+const DRM_BADGE = "mbx-drm-badge";
+const PANELS = "mbx-panels";
+const VOLUME = "mbx-volume";
+const CHAPTERS_MENU = "mbx-chapters-menu";
+//#endregion
+export { AUDIO_MENU, CHAPTERS_MENU, CONTROL_BAR, CURRENT_TIME, DRM_BADGE, DURATION, ERROR_SCREEN, FULLSCREEN_BUTTON, LIVE_BUTTON, MUTE_BUTTON, PANELS, PIP_BUTTON, PLAYER, PLAY_BUTTON, QUALITY_MENU, REMAINING_TIME, SEEK_BAR, SKIP_BUTTON, SPACER, SPEED_MENU, START_BUTTON, SUBTITLES_MENU, VOLUME, VOLUME_SLIDER };

package/dist/host.d.ts

@@ -0,0 +1,26 @@
+/**
+ * What a control sees of the player it sits in: the video, the engine, the
+ * core, and the element itself for its events and attributes. Declared
+ * here and not imported from the element, because the element registers
+ * the controls and a control that imported the element would close a cycle.
+ * `MatteboxPlayerElement` implements it.
+ *
+ * This is the whole surface a control gets. A control that needs more
+ * has found a gap in the player's public API, and the gap is the bug.
+ */
+import type { Player, PlayerError } from '@mattebox/player-core';
+import type { Mattebox } from 'mattebox';
+export interface PlayerHost extends HTMLElement {
+    readonly video: HTMLVideoElement;
+    readonly engine: Mattebox | null;
+    readonly player: Player | null;
+    /** The fatal error of the current load, or null: a control attached after the event still sees it. */
+    readonly error: PlayerError | 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.
+ */
+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;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,sGAAsG;IACtG,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;CACpC;AASD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,GAAG,IAAI,CAOzD"}

package/dist/host.js

@@ -0,0 +1,23 @@
+import { PLAYER } from './tags.js';
+/** 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.
+ */
+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,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAUnC,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;;;;GAIG;AACH,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/index.d.ts

@@ -1,4 +1,85 @@
-export type { ControlsOptions } from './controls/options.js';
-export { LAYOUT } from './controls/options.js';
-export { MatteboxPlayerElement } from './element.js';
+/**
+ * @mattebox/player: the <mattebox-player> custom element and every control
+ * that goes inside it. Importing this module registers them all; that is
+ * the package's one side effect. A page that wants only some takes
+ * `@mattebox/player/element` and the `@mattebox/player/elements/*` entries.
+ */
+import type { MatteboxPlayerElement } from './element-entry.js';
+import type { MbxAudioMenu } from './entries/audio-menu.js';
+import type { MbxChaptersMenu } from './entries/chapters-menu.js';
+import type { MbxControlBar } from './entries/control-bar.js';
+import type { MbxCurrentTime } from './entries/current-time.js';
+import type { MbxDrmBadge } from './entries/drm-badge.js';
+import type { MbxDuration } from './entries/duration.js';
+import type { MbxErrorScreen } from './entries/error-screen.js';
+import type { MbxFullscreenButton } from './entries/fullscreen-button.js';
+import type { MbxLiveButton } from './entries/live-button.js';
+import type { MbxMuteButton } from './entries/mute-button.js';
+import type { MbxPanels } from './entries/panels.js';
+import type { MbxPipButton } from './entries/pip-button.js';
+import type { MbxPlayButton } from './entries/play-button.js';
+import type { MbxQualityMenu } from './entries/quality-menu.js';
+import type { MbxRemainingTime } from './entries/remaining-time.js';
+import type { MbxSeekBar } from './entries/seek-bar.js';
+import type { MbxSkipButton } from './entries/skip-button.js';
+import type { MbxSpacer } from './entries/spacer.js';
+import type { MbxSpeedMenu } from './entries/speed-menu.js';
+import type { MbxStartButton } from './entries/start-button.js';
+import type { MbxSubtitlesMenu } from './entries/subtitles-menu.js';
+import type { MbxVolume } from './entries/volume.js';
+import type { MbxVolumeSlider } from './entries/volume-slider.js';
+export type { MatteboxPlayerOptions } from './element-entry.js';
+export { MatteboxPlayerElement } from './element-entry.js';
+export { MbxAudioMenu } from './entries/audio-menu.js';
+export { MbxChaptersMenu } from './entries/chapters-menu.js';
+export { MbxControlBar } from './entries/control-bar.js';
+export { MbxCurrentTime } from './entries/current-time.js';
+export { MbxDrmBadge } from './entries/drm-badge.js';
+export { MbxDuration } from './entries/duration.js';
+export { MbxErrorScreen } from './entries/error-screen.js';
+export { MbxFullscreenButton } from './entries/fullscreen-button.js';
+export { MbxLiveButton } from './entries/live-button.js';
+export { MbxMuteButton } from './entries/mute-button.js';
+export { MbxPanels } from './entries/panels.js';
+export { MbxPipButton } from './entries/pip-button.js';
+export { MbxPlayButton } from './entries/play-button.js';
+export { MbxQualityMenu } from './entries/quality-menu.js';
+export { MbxRemainingTime } from './entries/remaining-time.js';
+export { MbxSeekBar } from './entries/seek-bar.js';
+export { MbxSkipButton } from './entries/skip-button.js';
+export { MbxSpacer } from './entries/spacer.js';
+export { MbxSpeedMenu } from './entries/speed-menu.js';
+export { MbxStartButton } from './entries/start-button.js';
+export { MbxSubtitlesMenu } from './entries/subtitles-menu.js';
+export { MbxVolume } from './entries/volume.js';
+export { MbxVolumeSlider } from './entries/volume-slider.js';
+export type { PlayerHost } from './host.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mattebox-player': MatteboxPlayerElement;
+        'mbx-control-bar': MbxControlBar;
+        'mbx-spacer': MbxSpacer;
+        'mbx-play-button': MbxPlayButton;
+        'mbx-mute-button': MbxMuteButton;
+        'mbx-volume-slider': MbxVolumeSlider;
+        'mbx-volume': MbxVolume;
+        'mbx-skip-button': MbxSkipButton;
+        'mbx-pip-button': MbxPipButton;
+        'mbx-fullscreen-button': MbxFullscreenButton;
+        'mbx-start-button': MbxStartButton;
+        'mbx-error-screen': MbxErrorScreen;
+        'mbx-current-time': MbxCurrentTime;
+        'mbx-duration': MbxDuration;
+        'mbx-remaining-time': MbxRemainingTime;
+        'mbx-seek-bar': MbxSeekBar;
+        'mbx-live-button': MbxLiveButton;
+        'mbx-speed-menu': MbxSpeedMenu;
+        'mbx-quality-menu': MbxQualityMenu;
+        'mbx-audio-menu': MbxAudioMenu;
+        'mbx-subtitles-menu': MbxSubtitlesMenu;
+        'mbx-drm-badge': MbxDrmBadge;
+        'mbx-chapters-menu': MbxChaptersMenu;
+        'mbx-panels': MbxPanels;
+    }
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

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

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD,qBAAqB,CAAC,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/labels.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Label templates: `{name}` in an attribute's text is replaced from the
+ * values the element has, and a name it does not have stays as written.
+ * Pure, node-tested.
+ */
+export declare function fill(template: string, values: Readonly<Record<string, string | number>>): string;
+//# sourceMappingURL=labels.d.ts.map

package/dist/labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.d.ts","sourceRoot":"","sources":["../src/labels.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAKhG"}