@mattebox/player 0.1.0

package/dist/es2015/style.js

@@ -0,0 +1,347 @@
+//#region src/style.ts
+/**
+* The default styles. Two rules govern them.
+*
+* Nothing carries `!important`. For normal declarations the outer tree wins
+* over the shadow tree, so any `::part()` rule the page writes beats these
+* whatever its specificity; an `!important` here would invert that and make
+* a part unstylable.
+*
+* Selectors stay at one attribute, and every element is reached through its
+* `part`, so the names in the stylesheet are the names the page uses.
+*/
+const STYLE = `
+:host {
+  display: block;
+  position: relative;
+  outline: none;
+  --mbx-surface: #101114;
+  --mbx-text: #f2f3f5;
+  --mbx-muted: #9aa0a6;
+  --mbx-accent: #5b8cff;
+  --mbx-error: #ffb4ab;
+  --mbx-live: #ff4d4d;
+  --mbx-radius: 4px;
+  --mbx-gap: 10px;
+  --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"] {
+  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;
+}
+[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"] {
+  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;
+}
+: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"] {
+  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);
+}
+[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"] {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: var(--mbx-radius);
+  padding: 2px 6px;
+}
+[part~="button"][disabled] { opacity: 0.5; }
+[part~="error"] { color: var(--mbx-error); }
+[hidden] { display: none; }
+`;
+//#endregion
+export { STYLE };

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export type { ControlsOptions } from './controls/options.js';
+export { LAYOUT } from './controls/options.js';
+export { MatteboxPlayerElement } from './element.js';
+//# 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":"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"}

package/dist/index.js

@@ -0,0 +1,9 @@
+/**
+ * @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();
+//# 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;;;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"}

package/dist/namespaces.d.ts

@@ -0,0 +1,45 @@
+/**
+ * The optional namespaces, and the one place the player reaches for them.
+ *
+ * `'live' in engine` is the documented feature test, but it does not narrow,
+ * because the properties are not on the type. A namespace reaches the type
+ * only through a `declare module` merge in the stage that contributes it,
+ * and of the three a player shows, one merge is unreachable and one does not
+ * exist. So the casts live here, once, and the
+ * panels read a plain optional shape.
+ */
+import type { Mattebox } from 'mattebox';
+import type { DrmApi } from 'mattebox/stages/eme-core';
+import type { ThumbnailsApi } from 'mattebox/stages/thumbnails';
+/**
+ * Declared here because it cannot be imported: `LiveApi` lives in
+ * `dist/protocols/live-shared.d.ts`, which neither the package's `exports`
+ * nor its `typesVersions` reaches. This is a copy, and it will drift.
+ */
+export interface LiveApi {
+    /** Where seekToEdge lands, in presentation time, or null before the first window. */
+    readonly edge: number | null;
+    /** Seconds between the availability end and the playhead, or null. */
+    readonly latency: number | null;
+    readonly atEdge: boolean;
+    seekToEdge(): void;
+}
+/**
+ * Declared here for the same reason: the `pdt` stage is not among the
+ * package's `exports`, so its `PdtApi` cannot be imported either. A copy.
+ */
+export interface PdtApi {
+    /** Presentation time to epoch seconds, or null without an anchor. */
+    toWallClock(presentationTime: number): number | null;
+    /** Epoch seconds to presentation time, or null without an anchor. */
+    toPresentationTime(wallClock: number): number | null;
+}
+export interface Namespaces {
+    readonly live?: LiveApi;
+    readonly drm?: DrmApi;
+    readonly thumbnails?: ThumbnailsApi;
+    readonly pdt?: PdtApi;
+}
+/** The optional namespaces on an engine, each present exactly when its stage was composed. */
+export declare function namespaces(engine: Mattebox): Namespaces;
+//# sourceMappingURL=namespaces.d.ts.map

package/dist/namespaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespaces.d.ts","sourceRoot":"","sources":["../src/namespaces.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;;;GAIG;AACH,MAAM,WAAW,OAAO;IACtB,qFAAqF;IACrF,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,sEAAsE;IACtE,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,UAAU,IAAI,IAAI,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,MAAM;IACrB,qEAAqE;IACrE,WAAW,CAAC,gBAAgB,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACrD,qEAAqE;IACrE,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC;IACpC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,8FAA8F;AAC9F,wBAAgB,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,CAEvD"}

package/dist/namespaces.js

@@ -0,0 +1,5 @@
+/** The optional namespaces on an engine, each present exactly when its stage was composed. */
+export function namespaces(engine) {
+    return engine;
+}
+//# sourceMappingURL=namespaces.js.map

package/dist/namespaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespaces.js","sourceRoot":"","sources":["../src/namespaces.ts"],"names":[],"mappings":"AA8CA,8FAA8F;AAC9F,MAAM,UAAU,UAAU,CAAC,MAAgB;IACzC,OAAO,MAAoB,CAAC;AAC9B,CAAC"}

package/dist/panels/drm.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The DRM indicator over `engine.drm`. Present only when the EME stages are
+ * composed. It shows the key system in use and nothing else: sessions and key
+ * statuses are diagnostics, and the element is not a diagnostics surface.
+ */
+import type { PanelFactory } from './panel.js';
+export declare const drmPanel: PanelFactory;
+//# sourceMappingURL=drm.d.ts.map

package/dist/panels/drm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drm.d.ts","sourceRoot":"","sources":["../../src/panels/drm.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAS,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtD,eAAO,MAAM,QAAQ,EAAE,YA6BtB,CAAC"}

package/dist/panels/drm.js

@@ -0,0 +1,36 @@
+/**
+ * The DRM indicator over `engine.drm`. Present only when the EME stages are
+ * composed. It shows the key system in use and nothing else: sessions and key
+ * statuses are diagnostics, and the element is not a diagnostics surface.
+ */
+import { el } from '../dom.js';
+import { namespaces } from '../namespaces.js';
+export const drmPanel = (session) => {
+    const engine = session.engine;
+    if (engine === null)
+        return null;
+    const found = namespaces(engine).drm;
+    if (found === undefined)
+        return null;
+    const drm = found;
+    const root = el('div', 'panel drm');
+    root.append(el('span', 'text drm-text', 'DRM'));
+    const keySystem = el('span', 'value drm-key-system');
+    root.append(keySystem);
+    function render() {
+        const name = drm.keySystem;
+        keySystem.textContent = name ?? '';
+        // Nothing to show until a key session opens, and an empty indicator is
+        // worse than none.
+        root.hidden = name === null;
+    }
+    const off = engine.on('drm:keysystem', render);
+    render();
+    return {
+        root,
+        dispose() {
+            off();
+        },
+    };
+};
+//# sourceMappingURL=drm.js.map

package/dist/panels/drm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drm.js","sourceRoot":"","sources":["../../src/panels/drm.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,CAAC,MAAM,QAAQ,GAAiB,CAAC,OAAO,EAAgB,EAAE;IAC9D,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC9B,IAAI,MAAM,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC;IACrC,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACrC,MAAM,GAAG,GAAW,KAAK,CAAC;IAE1B,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACpC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,EAAE,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IACrD,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAEvB,SAAS,MAAM;QACb,MAAM,IAAI,GAAG,GAAG,CAAC,SAAS,CAAC;QAC3B,SAAS,CAAC,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC;QACnC,uEAAuE;QACvE,mBAAmB;QACnB,IAAI,CAAC,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9B,CAAC;IAED,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAC/C,MAAM,EAAE,CAAC;IAET,OAAO;QACL,IAAI;QACJ,OAAO;YACL,GAAG,EAAE,CAAC;QACR,CAAC;KACF,CAAC;AACJ,CAAC,CAAC"}

package/dist/panels/error.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The error surface. It is not a panel: it outlives a session, because the
+ * core reports "no handler claimed this source" when there is no session to
+ * hang it on. It stays hidden until a fatal error arrives.
+ */
+import type { PlayerError } from '@mattebox/player-core';
+export interface ErrorSurface {
+    readonly root: HTMLElement;
+    show(error: PlayerError): void;
+    clear(): void;
+}
+export declare function errorSurface(retry: () => void): ErrorSurface;
+//# sourceMappingURL=error.d.ts.map

package/dist/panels/error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../src/panels/error.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,IAAI,IAAI,CAAC;CACf;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,YAAY,CAqB5D"}

package/dist/panels/error.js

@@ -0,0 +1,23 @@
+import { el } from '../dom.js';
+export function errorSurface(retry) {
+    const root = el('div', 'panel error');
+    const category = el('span', 'value error-category');
+    const code = el('span', 'value error-code');
+    const button = el('button', 'button error-retry', 'Retry');
+    button.type = 'button';
+    button.addEventListener('click', retry);
+    root.append(category, code, button);
+    root.hidden = true;
+    return {
+        root,
+        show(error) {
+            category.textContent = error.category;
+            code.textContent = error.code;
+            root.hidden = false;
+        },
+        clear() {
+            root.hidden = true;
+        },
+    };
+}
+//# sourceMappingURL=error.js.map

package/dist/panels/error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.js","sourceRoot":"","sources":["../../src/panels/error.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAQ/B,MAAM,UAAU,YAAY,CAAC,KAAiB;IAC5C,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IACpD,MAAM,IAAI,GAAG,EAAE,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,EAAE,CAAC,QAAQ,EAAE,oBAAoB,EAAE,OAAO,CAAC,CAAC;IAC3D,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACxC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IAEnB,OAAO;QACL,IAAI;QACJ,IAAI,CAAC,KAAkB;YACrB,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC;YACtC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QACD,KAAK;YACH,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/panels/live.d.ts

@@ -0,0 +1,3 @@
+import type { PanelFactory } from './panel.js';
+export declare const livePanel: PanelFactory;
+//# sourceMappingURL=live.d.ts.map

package/dist/panels/live.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live.d.ts","sourceRoot":"","sources":["../../src/panels/live.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAS,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtD,eAAO,MAAM,SAAS,EAAE,YA8CvB,CAAC"}

package/dist/panels/live.js

@@ -0,0 +1,56 @@
+/**
+ * The live badge over `engine.live`. Present only when a live stage is
+ * composed, so the factory answers null for VOD-only engines and for native.
+ *
+ * Latency has no event; it moves with the playhead. The video's `timeupdate`
+ * is the clock the browser already runs, so the badge reads on that.
+ */
+import { el, state } from '../dom.js';
+import { namespaces } from '../namespaces.js';
+export const livePanel = (session, video) => {
+    const engine = session.engine;
+    if (engine === null)
+        return null;
+    const found = namespaces(engine).live;
+    if (found === undefined)
+        return null;
+    // Annotated, not narrowed: a hoisted function declaration below reads it.
+    const live = found;
+    const root = el('div', 'panel live');
+    const badge = el('span', 'badge live-badge', 'Live');
+    const latency = el('span', 'value live-latency');
+    const button = el('button', 'button live-edge-button', 'Go to live');
+    button.type = 'button';
+    root.append(badge, latency, button);
+    let shown = '';
+    function tick() {
+        // The namespace is present whenever a live stage was composed, which says
+        // nothing about the stream: `full` carries both live adapters, so a VOD
+        // presentation has `engine.live` too. A window that never opened leaves
+        // `edge` null, and that is what makes a stream live.
+        root.hidden = live.edge === null;
+        const atEdge = live.atEdge;
+        // State rides the part name: `::part()` takes no attribute selector, so
+        // `::part(at-edge)` is the only way a page can style the edge state.
+        state(root, 'panel live', { 'at-edge': atEdge });
+        button.disabled = atEdge;
+        const seconds = live.latency;
+        const text = seconds === null ? '' : `${seconds.toFixed(1)}s behind`;
+        if (text === shown)
+            return;
+        shown = text;
+        latency.textContent = text;
+    }
+    button.addEventListener('click', () => {
+        live.seekToEdge();
+    });
+    video.addEventListener('timeupdate', tick);
+    tick();
+    return {
+        root,
+        dispose() {
+            video.removeEventListener('timeupdate', tick);
+        },
+    };
+};
+//# sourceMappingURL=live.js.map

package/dist/panels/live.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live.js","sourceRoot":"","sources":["../../src/panels/live.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,CAAC,MAAM,SAAS,GAAiB,CAAC,OAAO,EAAE,KAAK,EAAgB,EAAE;IACtE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC9B,IAAI,MAAM,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;IACtC,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACrC,0EAA0E;IAC1E,MAAM,IAAI,GAAY,KAAK,CAAC;IAE5B,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IACrC,MAAM,KAAK,GAAG,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,EAAE,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,EAAE,CAAC,QAAQ,EAAE,yBAAyB,EAAE,YAAY,CAAC,CAAC;IACrE,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAEpC,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,SAAS,IAAI;QACX,0EAA0E;QAC1E,wEAAwE;QACxE,wEAAwE;QACxE,qDAAqD;QACrD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;QACjC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,wEAAwE;QACxE,qEAAqE;QACrE,KAAK,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,MAAM,IAAI,GAAG,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;QACrE,IAAI,IAAI,KAAK,KAAK;YAAE,OAAO;QAC3B,KAAK,GAAG,IAAI,CAAC;QACb,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QACpC,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAC3C,IAAI,EAAE,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,OAAO;YACL,KAAK,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAChD,CAAC;KACF,CAAC;AACJ,CAAC,CAAC"}

package/dist/panels/panel.d.ts

@@ -0,0 +1,13 @@
+/**
+ * What a panel is. A panel reads one engine namespace, subscribes to what it
+ * needs, and hands back a root and a teardown. It renders nothing for a
+ * native session, and nothing for an engine whose stage was not composed:
+ * the factory answers null and the element never inserts it.
+ */
+import type { Session } from '@mattebox/player-core';
+export interface Panel {
+    readonly root: HTMLElement;
+    dispose(): void;
+}
+export type PanelFactory = (session: Session, video: HTMLVideoElement) => Panel | null;
+//# sourceMappingURL=panel.d.ts.map

package/dist/panels/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/panels/panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,KAAK,KAAK,GAAG,IAAI,CAAC"}

package/dist/panels/panel.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=panel.js.map

package/dist/panels/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/panels/panel.ts"],"names":[],"mappings":""}

package/dist/panels/quality.d.ts

@@ -0,0 +1,3 @@
+import type { PanelFactory } from './panel.js';
+export declare const qualityPanel: PanelFactory;
+//# sourceMappingURL=quality.d.ts.map

package/dist/panels/quality.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quality.d.ts","sourceRoot":"","sources":["../../src/panels/quality.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAS,YAAY,EAAE,MAAM,YAAY,CAAC;AAUtD,eAAO,MAAM,YAAY,EAAE,YAiD1B,CAAC"}