@mattebox/player 0.1.0

package/dist/panels/quality.js

@@ -0,0 +1,59 @@
+import { el, fill, menu } from '../dom.js';
+const AUTO = 'auto';
+/** A rendition's height when the manifest declared one, its bitrate otherwise. */
+function label(rendition) {
+    if (rendition.height !== undefined)
+        return `${rendition.height}p`;
+    return `${Math.round(rendition.bitrate / 1000)} kbps`;
+}
+export const qualityPanel = (session, video) => {
+    const engine = session.engine;
+    if (engine === null)
+        return null;
+    const quality = engine.quality;
+    const root = el('div', 'panel quality');
+    const [wrapper, select] = menu('quality', 'Quality');
+    const playing = el('span', 'value quality-playing');
+    root.append(wrapper, playing);
+    let shown = '';
+    function render() {
+        const items = [[AUTO, 'Auto']];
+        for (const rendition of quality.renditions)
+            items.push([rendition.id, label(rendition)]);
+        fill(select, items, quality.pinned ?? AUTO);
+        root.hidden = quality.renditions.length === 0;
+    }
+    function tick() {
+        const current = quality.playing === null ? '' : label(quality.playing);
+        if (current === shown)
+            return;
+        shown = current;
+        playing.textContent = current;
+    }
+    select.addEventListener('change', () => {
+        if (select.value === AUTO)
+            quality.auto();
+        else
+            quality.pin(select.value);
+    });
+    const offs = [
+        engine.on('tracks:changed', render),
+        engine.on('quality:constraints-unsatisfiable', render),
+        engine.on('quality:pin-unsatisfiable', render),
+    ];
+    // No event reports the playing rendition: it is derived from currentTime
+    // against the append log, so the element reads it on the clock the video
+    // already ticks.
+    video.addEventListener('timeupdate', tick);
+    render();
+    tick();
+    return {
+        root,
+        dispose() {
+            for (const off of offs)
+                off();
+            video.removeEventListener('timeupdate', tick);
+        },
+    };
+};
+//# sourceMappingURL=quality.js.map

package/dist/panels/quality.js.map

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

package/dist/panels/tracks.d.ts

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

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

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

package/dist/panels/tracks.js

@@ -0,0 +1,49 @@
+import { el, fill, menu } from '../dom.js';
+const OFF = 'off';
+/** The language, then the role, then the id: whichever the manifest gave. */
+function label(track) {
+    const parts = [track.lang, track.role].filter((part) => part !== undefined);
+    return parts.length === 0 ? track.id : parts.join(' · ');
+}
+export const tracksPanel = (session) => {
+    const engine = session.engine;
+    if (engine === null)
+        return null;
+    const tracks = engine.tracks;
+    const root = el('div', 'panel tracks');
+    const [audioLabel, audio] = menu('audio', 'Audio');
+    const [textLabel, text] = menu('text', 'Subtitles');
+    root.append(audioLabel, textLabel);
+    function renderOne(select, wrapper, contentType, off) {
+        const available = tracks.available.filter((track) => track.contentType === contentType);
+        const items = off ? [[OFF, 'Off']] : [];
+        for (const track of available)
+            items.push([track.id, label(track)]);
+        fill(select, items, tracks.active(contentType)?.id ?? OFF);
+        wrapper.hidden = available.length === 0;
+        return available.length;
+    }
+    function render() {
+        const count = renderOne(audio, audioLabel, 'audio', false) + renderOne(text, textLabel, 'text', true);
+        root.hidden = count === 0;
+    }
+    audio.addEventListener('change', () => {
+        tracks.select(audio.value);
+    });
+    text.addEventListener('change', () => {
+        if (text.value === OFF)
+            tracks.deselect('text');
+        else
+            tracks.select(text.value);
+    });
+    const offs = [engine.on('tracks:changed', render), engine.on('tracks:selected', render)];
+    render();
+    return {
+        root,
+        dispose() {
+            for (const off of offs)
+                off();
+        },
+    };
+};
+//# sourceMappingURL=tracks.js.map

package/dist/panels/tracks.js.map

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

package/dist/presets.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Resolving the `preset` attribute to a preset factory without bundling one.
+ * The size story is the engine's, and an element that statically imported a
+ * preset would undo it.
+ *
+ * Two routes, in order. A page on the CDN path has no module resolver, and
+ * its engine bundle carries exactly one preset behind `mattebox.preset`.
+ * Everywhere else the table below answers.
+ *
+ * The table is explicit because a computed specifier is not a portable
+ * dynamic import: no bundler can analyze `import('mattebox/presets/' + name)`,
+ * so it survives the build as a bare specifier the browser cannot resolve.
+ * Twelve literal imports are twelve chunks a bundler can split, and the page
+ * downloads only the one it names. An unknown name is an error the element
+ * reports, not a failed request.
+ */
+import type { Preset } from 'mattebox/presets/full';
+export declare function resolvePreset(name: string): Promise<Preset | null>;
+/** The DRM stages to leave out of a preset on a browser that cannot use them. */
+export declare function drmGuard(): {
+    without?: readonly string[];
+};
+//# sourceMappingURL=presets.d.ts.map

package/dist/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../src/presets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AA4BpD,wBAAsB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAUxE;AAED,iFAAiF;AACjF,wBAAgB,QAAQ,IAAI;IAAE,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,CAE1D"}

package/dist/presets.js

@@ -0,0 +1,36 @@
+/** eme-core's teardown calls `element.setMediaKeys(null)` unguarded, so a build without EME throws out of `detach`. */
+const DRM_STAGES = ['eme-core', 'eme-cenc', 'eme-fairplay'];
+/** The engine's preset matrix: a protocol line, a `-ts` tier, a `-drm` tier, plus `full` and `kernel`. */
+const PRESETS = {
+    dash: () => import('mattebox/presets/dash'),
+    'dash-drm': () => import('mattebox/presets/dash-drm'),
+    dual: () => import('mattebox/presets/dual'),
+    'dual-drm': () => import('mattebox/presets/dual-drm'),
+    'dual-ts': () => import('mattebox/presets/dual-ts'),
+    'dual-ts-drm': () => import('mattebox/presets/dual-ts-drm'),
+    full: () => import('mattebox/presets/full'),
+    hls: () => import('mattebox/presets/hls'),
+    'hls-drm': () => import('mattebox/presets/hls-drm'),
+    'hls-ts': () => import('mattebox/presets/hls-ts'),
+    'hls-ts-drm': () => import('mattebox/presets/hls-ts-drm'),
+    kernel: () => import('mattebox/presets/kernel'),
+};
+export async function resolvePreset(name) {
+    const engine = globalThis.mattebox;
+    if (engine?.preset !== undefined)
+        return engine.preset;
+    const load = PRESETS[name];
+    if (load === undefined)
+        return null;
+    try {
+        return (await load()).default;
+    }
+    catch {
+        return null;
+    }
+}
+/** The DRM stages to leave out of a preset on a browser that cannot use them. */
+export function drmGuard() {
+    return 'setMediaKeys' in HTMLMediaElement.prototype ? {} : { without: DRM_STAGES };
+}
+//# sourceMappingURL=presets.js.map

package/dist/presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.js","sourceRoot":"","sources":["../src/presets.ts"],"names":[],"mappings":"AAuBA,uHAAuH;AACvH,MAAM,UAAU,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC;AAI5D,0GAA0G;AAC1G,MAAM,OAAO,GAAmC;IAC9C,IAAI,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC;IAC3C,UAAU,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,2BAA2B,CAAC;IACrD,IAAI,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC;IAC3C,UAAU,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,2BAA2B,CAAC;IACrD,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,0BAA0B,CAAC;IACnD,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,8BAA8B,CAAC;IAC3D,IAAI,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC;IAC3C,GAAG,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,sBAAsB,CAAC;IACzC,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,0BAA0B,CAAC;IACnD,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;IACjD,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,6BAA6B,CAAC;IACzD,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;CAChD,CAAC;AAEF,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,IAAY;IAC9C,MAAM,MAAM,GAAI,UAA0C,CAAC,QAAQ,CAAC;IACpE,IAAI,MAAM,EAAE,MAAM,KAAK,SAAS;QAAE,OAAO,MAAM,CAAC,MAAM,CAAC;IACvD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACpC,IAAI,CAAC;QACH,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC;IAChC,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,iFAAiF;AACjF,MAAM,UAAU,QAAQ;IACtB,OAAO,cAAc,IAAI,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AACrF,CAAC"}

package/dist/style.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+export declare const STYLE = "\n:host {\n  display: block;\n  position: relative;\n  outline: none;\n  --mbx-surface: #101114;\n  --mbx-text: #f2f3f5;\n  --mbx-muted: #9aa0a6;\n  --mbx-accent: #5b8cff;\n  --mbx-error: #ffb4ab;\n  --mbx-live: #ff4d4d;\n  --mbx-radius: 4px;\n  --mbx-gap: 10px;\n  --mbx-pad: 8px;\n  --mbx-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n[part~=\"stage\"] { position: relative; }\n/* 16:9 until the media says otherwise: a bare video measures 300 by 150 and\n   would jump to its size on metadata. Auto first, so the natural ratio wins\n   once it is known. */\n::slotted(video) { display: block; width: 100%; aspect-ratio: auto 16 / 9; }\n[part~=\"controls\"] {\n  position: absolute;\n  inset: auto 0 0 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 40px 16px 12px;\n  color: var(--mbx-text);\n  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));\n  font: 500 16px/1.2 var(--mbx-font);\n  transition: opacity 0.2s;\n}\n[part~=\"idle\"] { opacity: 0; pointer-events: none; }\n[part~=\"error-screen\"] {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  background: rgba(0, 0, 0, 0.75);\n  color: var(--mbx-text);\n  font: 400 15px/1.4 var(--mbx-font);\n  text-align: center;\n}\n[part~=\"error-box\"] { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n[part~=\"error-title\"] { font-size: 18px; font-weight: 600; }\n[part~=\"error-detail\"] { font-family: monospace; font-size: 13px; color: var(--mbx-error); }\n[part~=\"error-retry\"] { width: auto; height: 36px; padding: 0 16px; border: 1px solid currentColor; font-weight: 600; }\n[part~=\"row\"] { display: flex; align-items: center; gap: 8px; }\n[part~=\"seek-row\"] { gap: 16px; }\n[part~=\"current-time\"], [part~=\"duration\"] { min-width: 3ch; font-variant-numeric: tabular-nums; white-space: nowrap; }\n[part~=\"duration\"] { text-align: right; }\n[part~=\"control\"] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n  opacity: 0.9;\n}\n[part~=\"control\"]:hover { opacity: 1; }\n[part~=\"start-button\"] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 96px;\n  height: 96px;\n  margin: -48px 0 0 -48px;\n  color: var(--mbx-text);\n  opacity: 0.92;\n  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));\n  transition: opacity 0.15s;\n}\n[part~=\"start-button\"]:hover { opacity: 1; }\n[part~=\"start-button\"] [part~=\"icon\"] { width: 72px; height: 72px; }\n[part~=\"error-screen\"] {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  background: rgba(0, 0, 0, 0.75);\n  color: var(--mbx-text);\n  font: 400 15px/1.4 var(--mbx-font);\n  text-align: center;\n}\n[part~=\"error-box\"] { display: flex; flex-direction: column; align-items: center; gap: 8px; }\n[part~=\"error-title\"] { font-size: 18px; font-weight: 600; }\n[part~=\"error-detail\"] { font-family: monospace; font-size: 13px; color: var(--mbx-error); }\n[part~=\"error-retry\"] { width: auto; height: 36px; padding: 0 16px; border: 1px solid currentColor; font-weight: 600; }\n[part~=\"row\"] { display: flex; align-items: center; gap: 8px; }\n[part~=\"seek-row\"] { gap: 16px; }\n[part~=\"current-time\"], [part~=\"duration\"] { min-width: 3ch; font-variant-numeric: tabular-nums; white-space: nowrap; }\n[part~=\"duration\"] { text-align: right; }\n[part~=\"control\"] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 0;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n  opacity: 0.9;\n}\n[part~=\"control\"]:hover { opacity: 1; }\n[part~=\"start-button\"] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 104px;\n  height: 64px;\n  margin: -32px 0 0 -52px;\n  border: 1px solid rgba(255, 255, 255, 0.18);\n  border-radius: var(--mbx-radius);\n  background: rgba(0, 0, 0, 0.45);\n  color: var(--mbx-text);\n  opacity: 0.9;\n  transition: opacity 0.15s, background 0.15s;\n}\n[part~=\"start-button\"]:hover { opacity: 1; background: rgba(0, 0, 0, 0.6); }\n[part~=\"start-button\"] [part~=\"icon\"] { width: 40px; height: 40px; margin-left: 2px; }\n[part~=\"icon\"] { width: 1.75em; height: 1.75em; fill: currentColor; }\n[part~=\"slider\"] {\n  position: relative;\n  flex: none;\n  height: 40px;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n  touch-action: none;\n}\n[part~=\"rail\"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }\n[part~=\"seek\"] { flex: 1; }\n[part~=\"track\"] {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 4px;\n  transform: translateY(-50%);\n  background: rgba(255, 255, 255, 0.35);\n  border-radius: 2px;\n  overflow: hidden;\n}\n[part~=\"fill\"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }\n[part~=\"thumb\"] {\n  position: absolute;\n  top: 50%;\n  width: 16px;\n  height: 16px;\n  margin: -8px 0 0 -8px;\n  border-radius: 50%;\n  background: var(--mbx-text);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n  pointer-events: none;\n}\n[part~=\"buffered\"] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }\n[part~=\"buffered-range\"] { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.3); }\n[part~=\"hover\"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-text); }\n[part~=\"edge\"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-live); }\n[part~=\"preview\"] {\n  position: absolute;\n  bottom: 100%;\n  margin-bottom: 4px;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  padding: 2px;\n  background: var(--mbx-surface);\n  border-radius: var(--mbx-radius);\n  font-size: 13px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  pointer-events: none;\n}\n[part~=\"preview-image\"] { position: relative; overflow: hidden; border-radius: 2px; }\n[part~=\"preview-tile\"] { position: absolute; top: 0; left: 0; transform-origin: top left; background-repeat: no-repeat; }\n[part~=\"preview-time\"] { padding: 0 4px; }\n[part~=\"volume-group\"] { display: flex; align-items: center; }\n[part~=\"volume\"] { width: 0; opacity: 0; transition: width 0.2s ease, opacity 0.2s ease; }\n/* Two attributes in one selector, the one place: the slider unfolds from\n   its group under the pointer or focus, and a page reaches it through\n   ::part(volume) all the same. */\n[part~=\"volume-group\"]:hover [part~=\"volume\"] { width: 80px; opacity: 1; }\n[part~=\"volume-group\"]:focus-within [part~=\"volume\"] { width: 80px; opacity: 1; }\n[part~=\"cluster\"] { display: flex; align-items: center; gap: 4px; margin-left: auto; }\n[part~=\"live-button\"] { width: auto; gap: 6px; padding: 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }\n[part~=\"live-button\"]:disabled { cursor: default; opacity: 1; }\n[part~=\"live-dot\"] { width: 10px; height: 10px; border-radius: 50%; background: var(--mbx-muted); transition: background 0.2s; }\n/* Two attributes, as with the volume: the dot reads the button's state. */\n[part~=\"live-dot\"][part~=\"at-edge\"] { background: var(--mbx-live); box-shadow: 0 0 6px var(--mbx-live); }\n[part~=\"slot\"] { display: contents; }\n[part~=\"menu\"] { position: relative; }\n[part~=\"popup\"] {\n  position: absolute;\n  right: 0;\n  bottom: 100%;\n  margin-bottom: 8px;\n  min-width: 160px;\n  padding: 6px;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  background: rgba(16, 17, 20, 0.95);\n  border-radius: var(--mbx-radius);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);\n  font-size: 14px;\n}\n[part~=\"section\"] { display: flex; flex-direction: column; }\n[part~=\"section\"] + [part~=\"section\"] { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }\n[part~=\"section-label\"] { padding: 4px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mbx-muted); }\n[part~=\"item\"] {\n  display: block;\n  width: 100%;\n  padding: 8px 12px 8px 28px;\n  font: inherit;\n  color: inherit;\n  text-align: left;\n  white-space: nowrap;\n  background: transparent;\n  border: 0;\n  border-radius: var(--mbx-radius);\n  cursor: pointer;\n}\n[part~=\"item\"]:hover { background: rgba(255, 255, 255, 0.12); }\n[part~=\"item\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"page-item\"] { position: relative; padding-right: 28px; }\n[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; }\n[part~=\"back-item\"] { position: relative; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; margin-bottom: 6px; }\n[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; }\n[part~=\"checked\"] { position: relative; }\n[part~=\"checked\"]::before { content: \"\"; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mbx-accent); }\n[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; }\n[part~=\"drm-badge\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"tooltip\"] {\n  position: absolute;\n  right: 0;\n  bottom: 100%;\n  margin-bottom: 8px;\n  padding: 8px 10px;\n  background: rgba(16, 17, 20, 0.95);\n  border-radius: var(--mbx-radius);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);\n  color: var(--mbx-text);\n  font-size: 13px;\n  line-height: 1.4;\n  text-align: left;\n  white-space: nowrap;\n  pointer-events: none;\n}\n[part~=\"tooltip-title\"] { font-weight: 600; }\n[part~=\"tooltip-text\"] { color: var(--mbx-muted); }\n[part~=\"track\"] {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 4px;\n  transform: translateY(-50%);\n  background: rgba(255, 255, 255, 0.3);\n  border-radius: 2px;\n  overflow: hidden;\n}\n[part~=\"fill\"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }\n[part~=\"thumb\"] {\n  position: absolute;\n  top: 50%;\n  width: 12px;\n  height: 12px;\n  margin: -6px 0 0 -6px;\n  border-radius: 50%;\n  background: var(--mbx-text);\n  pointer-events: none;\n}\n:host(:focus-visible) [part~=\"stage\"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"control\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"slider\"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n[part~=\"stage\"]:fullscreen { display: flex; background: #000; }\n[part~=\"stage\"]:fullscreen ::slotted(video) { height: 100%; object-fit: contain; }\n[part~=\"stage\"]:-webkit-full-screen { display: flex; background: #000; }\n[part~=\"stage\"]:-webkit-full-screen ::slotted(video) { height: 100%; object-fit: contain; }\n@media (prefers-reduced-motion: reduce) {\n  [part~=\"controls\"] { transition: none; }\n  [part~=\"volume\"] { transition: none; }\n  [part~=\"live-dot\"] { transition: none; }\n  [part~=\"start-button\"] { transition: none; }\n}\n[part~=\"panels\"], [part~=\"error\"] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mbx-gap);\n  padding: var(--mbx-pad);\n  background: var(--mbx-surface);\n  color: var(--mbx-text);\n  font: 400 13px/1.4 var(--mbx-font);\n}\n[part~=\"panels\"]:empty { display: none; }\n[part~=\"panel\"] { display: flex; align-items: center; gap: 6px; }\n[part~=\"label\"] { display: flex; align-items: center; gap: 6px; }\n[part~=\"text\"] { color: var(--mbx-muted); }\n[part~=\"value\"] { color: var(--mbx-accent); }\n[part~=\"select\"], [part~=\"button\"] {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 1px solid currentColor;\n  border-radius: var(--mbx-radius);\n  padding: 2px 6px;\n}\n[part~=\"button\"][disabled] { opacity: 0.5; }\n[part~=\"error\"] { color: var(--mbx-error); }\n[hidden] { display: none; }\n";
+//# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,umZA4UjB,CAAC"}

package/dist/style.js

@@ -0,0 +1,345 @@
+/**
+ * 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.
+ */
+export 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; }
+`;
+//# sourceMappingURL=style.js.map

package/dist/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4UpB,CAAC"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@mattebox/player",
+  "version": "0.1.0",
+  "description": "A <mattebox-player> custom element over @mattebox/player-core.",
+  "author": "Josep Boix Requesens",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jboix/mattebox-player.git",
+    "directory": "packages/player"
+  },
+  "homepage": "https://github.com/jboix/mattebox-player#readme",
+  "bugs": {
+    "url": "https://github.com/jboix/mattebox-player/issues"
+  },
+  "keywords": [
+    "mattebox",
+    "player",
+    "custom-element",
+    "hls",
+    "dash",
+    "video"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": true,
+  "engines": {
+    "node": ">=20.19"
+  },
+  "main": "./dist/es2015/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "modern": "./dist/index.js",
+      "default": "./dist/es2015/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "NOTICE"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && npm run build:modern && npm run build:es2015 && npm run build:cdn",
+    "build:modern": "tsc -p tsconfig.build.json",
+    "build:es2015": "rolldown -c rolldown.dist.config.mjs",
+    "build:cdn": "rolldown -c rolldown.cdn.config.mjs",
+    "check:package": "publint && attw --pack . --format table --no-emoji",
+    "release:ci": "semantic-release"
+  },
+  "dependencies": {
+    "@mattebox/player-core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "mattebox": "^0.2.1"
+  }
+}