@mattebox/player 0.5.0 → 0.6.0

package/dist/namespaces.d.ts

@@ -6,7 +6,7 @@
  * 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.
+ * controls read a plain optional shape.
  */
 import type { Mattebox } from 'mattebox';
 import type { DrmApi } from 'mattebox/stages/eme-core';

package/dist/style.d.ts

@@ -17,5 +17,5 @@
  * 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  background: #000;\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/* The stage is a column as tall as the host, so the picture is centred\n   in whatever height the page gives, and the panels row under native\n   controls keeps its place below the picture. The height comes from the\n   page, or from the browser in fullscreen, and not from a display on the\n   host: a page's own \"mattebox-player { display: block }\" beats a :host()\n   rule, so nothing here may depend on one. */\n[part~=\"stage\"] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n}\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. Capped at the stage, and contained, so a box shorter\n   than the picture letterboxes it and a narrower one pillarboxes it. */\n::slotted(video) {\n  display: block;\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  object-fit: contain;\n  aspect-ratio: auto 16 / 9;\n}\n/* The casting attribute is set by @mattebox/player-cast while a receiver\n   plays: its screen has the controls, and the bar and the start button\n   would drive a paused video nobody watches. The attribute is the whole\n   coupling. */\n:host([casting]) ::slotted(mbx-control-bar), :host([casting]) ::slotted(mbx-start-button) { display: none; }\n:host(:focus-visible) [part~=\"stage\"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n/* Fullscreen goes on the host, so every control the page placed inside\n   comes along. The browser gives the host the whole screen with\n   !important; the picture takes what the panels row leaves. The error\n   surface, which sits under the stage in the page, goes over its foot\n   instead. */\n:host(:fullscreen) ::slotted(video) { flex: 1; }\n:host(:fullscreen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n:host(:-webkit-full-screen) ::slotted(video) { flex: 1; }\n:host(:-webkit-full-screen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n[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-error);\n  font: 400 13px/1.4 var(--mbx-font);\n}\n[part~=\"value\"] { color: var(--mbx-accent); }\n[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[hidden] { display: none; }\n";
+export declare const STYLE = "\n:host {\n  display: block;\n  position: relative;\n  outline: none;\n  background: #000;\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/* The stage is a column as tall as the host, so the picture is centred\n   in whatever height the page gives. The height comes from the\n   page, or from the browser in fullscreen, and not from a display on the\n   host: a page's own \"mattebox-player { display: block }\" beats a :host()\n   rule, so nothing here may depend on one. */\n[part~=\"stage\"] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n}\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. Capped at the stage, and contained, so a box shorter\n   than the picture letterboxes it and a narrower one pillarboxes it. */\n::slotted(video) {\n  display: block;\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  object-fit: contain;\n  aspect-ratio: auto 16 / 9;\n}\n/* The casting attribute is set by @mattebox/player-cast while a receiver\n   plays: its screen has the controls, and the bar and the start button\n   would drive a paused video nobody watches. The attribute is the whole\n   coupling. */\n:host([casting]) ::slotted(mbx-control-bar), :host([casting]) ::slotted(mbx-start-button) { display: none; }\n/* controls=\"none\" hides every child but the video, so a page keeps its\n   composition in place and turns it off with one attribute. A normal rule\n   from the page still wins over this one, the way it does over any rule\n   here. */\n:host([controls=\"none\"]) ::slotted(:not(video)) { display: none; }\n:host(:focus-visible) [part~=\"stage\"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n/* Fullscreen goes on the host, so every control the page placed inside\n   comes along. The browser gives the host the whole screen with\n   !important; the picture takes all of it. The error surface, which sits\n   under the stage in the page, goes over its foot instead. */\n:host(:fullscreen) ::slotted(video) { flex: 1; }\n:host(:fullscreen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n:host(:-webkit-full-screen) ::slotted(video) { flex: 1; }\n:host(:-webkit-full-screen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n[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-error);\n  font: 400 13px/1.4 var(--mbx-font);\n}\n[part~=\"value\"] { color: var(--mbx-accent); }\n[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[hidden] { display: none; }\n";
 //# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

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

package/dist/style.js

@@ -35,8 +35,7 @@ export const STYLE = `
   --mbx-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
 /* 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
+   in whatever height the page gives. 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. */
@@ -64,12 +63,16 @@ export const STYLE = `
    would drive a paused video nobody watches. The attribute is the whole
    coupling. */
 :host([casting]) ::slotted(mbx-control-bar), :host([casting]) ::slotted(mbx-start-button) { display: none; }
+/* controls="none" hides every child but the video, so a page keeps its
+   composition in place and turns it off with one attribute. A normal rule
+   from the page still wins over this one, the way it does over any rule
+   here. */
+:host([controls="none"]) ::slotted(:not(video)) { display: none; }
 :host(:focus-visible) [part~="stage"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
 /* 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. */
+   !important; the picture takes all of it. 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; }

package/dist/style.js.map

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

package/dist/tags.d.ts

@@ -23,7 +23,6 @@ export declare const QUALITY_MENU = "mbx-quality-menu";
 export declare const AUDIO_MENU = "mbx-audio-menu";
 export declare const SUBTITLES_MENU = "mbx-subtitles-menu";
 export declare const DRM_BADGE = "mbx-drm-badge";
-export declare const PANELS = "mbx-panels";
 export declare const VOLUME = "mbx-volume";
 export declare const CHAPTERS_MENU = "mbx-chapters-menu";
 //# sourceMappingURL=tags.d.ts.map

package/dist/tags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../src/tags.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,eAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,MAAM,eAAe,CAAC;AACnC,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,aAAa,sBAAsB,CAAC;AACjD,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,cAAc,uBAAuB,CAAC;AACnD,eAAO,MAAM,iBAAiB,0BAA0B,CAAC;AACzD,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,OAAO,gBAAgB,CAAC;AACrC,eAAO,MAAM,KAAK,cAAc,CAAC;AACjC,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,QAAQ,iBAAiB,CAAC;AACvC,eAAO,MAAM,cAAc,uBAAuB,CAAC;AACnD,eAAO,MAAM,QAAQ,iBAAiB,CAAC;AACvC,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,cAAc,uBAAuB,CAAC;AACnD,eAAO,MAAM,SAAS,kBAAkB,CAAC;AACzC,eAAO,MAAM,MAAM,eAAe,CAAC;AACnC,eAAO,MAAM,MAAM,eAAe,CAAC;AACnC,eAAO,MAAM,aAAa,sBAAsB,CAAC"}
+{"version":3,"file":"tags.d.ts","sourceRoot":"","sources":["../src/tags.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,eAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,MAAM,eAAe,CAAC;AACnC,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,aAAa,sBAAsB,CAAC;AACjD,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,cAAc,uBAAuB,CAAC;AACnD,eAAO,MAAM,iBAAiB,0BAA0B,CAAC;AACzD,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,OAAO,gBAAgB,CAAC;AACrC,eAAO,MAAM,KAAK,cAAc,CAAC;AACjC,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,QAAQ,iBAAiB,CAAC;AACvC,eAAO,MAAM,cAAc,uBAAuB,CAAC;AACnD,eAAO,MAAM,QAAQ,iBAAiB,CAAC;AACvC,eAAO,MAAM,WAAW,oBAAoB,CAAC;AAC7C,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,YAAY,qBAAqB,CAAC;AAC/C,eAAO,MAAM,UAAU,mBAAmB,CAAC;AAC3C,eAAO,MAAM,cAAc,uBAAuB,CAAC;AACnD,eAAO,MAAM,SAAS,kBAAkB,CAAC;AACzC,eAAO,MAAM,MAAM,eAAe,CAAC;AACnC,eAAO,MAAM,aAAa,sBAAsB,CAAC"}

package/dist/tags.js

@@ -23,7 +23,6 @@ export const QUALITY_MENU = 'mbx-quality-menu';
 export const AUDIO_MENU = 'mbx-audio-menu';
 export const SUBTITLES_MENU = 'mbx-subtitles-menu';
 export const DRM_BADGE = 'mbx-drm-badge';
-export const PANELS = 'mbx-panels';
 export const VOLUME = 'mbx-volume';
 export const CHAPTERS_MENU = 'mbx-chapters-menu';
 //# sourceMappingURL=tags.js.map

package/dist/tags.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags.js","sourceRoot":"","sources":["../src/tags.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,MAAM,CAAC,MAAM,MAAM,GAAG,iBAAiB,CAAC;AACxC,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC;AACnC,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,aAAa,GAAG,mBAAmB,CAAC;AACjD,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC3C,MAAM,CAAC,MAAM,cAAc,GAAG,oBAAoB,CAAC;AACnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;AACzD,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC;AACrC,MAAM,CAAC,MAAM,KAAK,GAAG,WAAW,CAAC;AACjC,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,QAAQ,GAAG,cAAc,CAAC;AACvC,MAAM,CAAC,MAAM,cAAc,GAAG,oBAAoB,CAAC;AACnD,MAAM,CAAC,MAAM,QAAQ,GAAG,cAAc,CAAC;AACvC,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC3C,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC3C,MAAM,CAAC,MAAM,cAAc,GAAG,oBAAoB,CAAC;AACnD,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;AACzC,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC;AACnC,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC;AACnC,MAAM,CAAC,MAAM,aAAa,GAAG,mBAAmB,CAAC"}
+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../src/tags.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,MAAM,CAAC,MAAM,MAAM,GAAG,iBAAiB,CAAC;AACxC,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC;AACnC,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,aAAa,GAAG,mBAAmB,CAAC;AACjD,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC3C,MAAM,CAAC,MAAM,cAAc,GAAG,oBAAoB,CAAC;AACnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;AACzD,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC;AACrC,MAAM,CAAC,MAAM,KAAK,GAAG,WAAW,CAAC;AACjC,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,QAAQ,GAAG,cAAc,CAAC;AACvC,MAAM,CAAC,MAAM,cAAc,GAAG,oBAAoB,CAAC;AACnD,MAAM,CAAC,MAAM,QAAQ,GAAG,cAAc,CAAC;AACvC,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAC7C,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC3C,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AAC3C,MAAM,CAAC,MAAM,cAAc,GAAG,oBAAoB,CAAC;AACnD,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;AACzC,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC;AACnC,MAAM,CAAC,MAAM,aAAa,GAAG,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattebox/player",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "A <mattebox-player> custom element over @mattebox/player-core.",
   "author": "Josep Boix Requesens",
   "repository": {

package/dist/compose.d.ts

@@ -1,5 +0,0 @@
-/** The screens and the bar. */
-export declare function composeBar(): HTMLElement[];
-/** The row under the video. */
-export declare function composePanels(): HTMLElement[];
-//# sourceMappingURL=compose.d.ts.map

package/dist/compose.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":"AA6CA,+BAA+B;AAC/B,wBAAgB,UAAU,IAAI,WAAW,EAAE,CAW1C;AAED,+BAA+B;AAC/B,wBAAgB,aAAa,IAAI,WAAW,EAAE,CAM7C"}

package/dist/compose.js

@@ -1,31 +0,0 @@
-/**
- * The default compositions: what a player gets when the page wrote none of
- * its own. Under `controls="custom"` the screens and the bar, appended
- * when there is no `<mbx-control-bar>` child; under `native` and `none`
- * the panels row under the video, appended when there is no
- * `<mbx-panels>` child. Built by tag, so this module needs no element
- * class, and appended to the player's light DOM, where the page can see
- * it and style it the way it would its own.
- */
-import { AIRPLAY_BUTTON, AUDIO_MENU, CHAPTERS_MENU, CONTROL_BAR, CURRENT_TIME, DRM_BADGE, DURATION, ERROR_SCREEN, FULLSCREEN_BUTTON, LIVE_BUTTON, PANELS, PIP_BUTTON, PLAY_BUTTON, QUALITY_MENU, SEEK_BAR, SKIP_BUTTON, SPACER, SPEED_MENU, SPINNER, START_BUTTON, SUBTITLES_MENU, TITLE, VOLUME, } from './tags.js';
-function skip(seconds) {
-    const node = document.createElement(SKIP_BUTTON);
-    node.setAttribute('seconds', String(seconds));
-    return node;
-}
-function each(...tags) {
-    return tags.map((tag) => document.createElement(tag));
-}
-/** The screens and the bar. */
-export function composeBar() {
-    const bar = document.createElement(CONTROL_BAR);
-    bar.append(...each(CURRENT_TIME, SEEK_BAR, DURATION, LIVE_BUTTON), skip(-10), document.createElement(PLAY_BUTTON), skip(10), ...each(VOLUME, SPACER, SPEED_MENU, CHAPTERS_MENU, SUBTITLES_MENU, AUDIO_MENU), ...each(QUALITY_MENU, AIRPLAY_BUTTON, PIP_BUTTON, FULLSCREEN_BUTTON));
-    return [...each(TITLE, START_BUTTON, ERROR_SCREEN, SPINNER), bar];
-}
-/** The row under the video. */
-export function composePanels() {
-    const row = document.createElement(PANELS);
-    row.append(...each(QUALITY_MENU, AUDIO_MENU, SUBTITLES_MENU, CHAPTERS_MENU, LIVE_BUTTON, DRM_BADGE));
-    return [row];
-}
-//# sourceMappingURL=compose.js.map

package/dist/compose.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"compose.js","sourceRoot":"","sources":["../src/compose.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EACL,cAAc,EACd,UAAU,EACV,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,MAAM,EACN,UAAU,EACV,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,MAAM,EACN,UAAU,EACV,OAAO,EACP,YAAY,EACZ,cAAc,EACd,KAAK,EACL,MAAM,GACP,MAAM,WAAW,CAAC;AAEnB,SAAS,IAAI,CAAC,OAAe;IAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACjD,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,IAAI,CAAC,GAAG,IAAc;IAC7B,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;AACxD,CAAC;AAED,+BAA+B;AAC/B,MAAM,UAAU,UAAU;IACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAChD,GAAG,CAAC,MAAM,CACR,GAAG,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC,EACtD,IAAI,CAAC,CAAC,EAAE,CAAC,EACT,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EACnC,IAAI,CAAC,EAAE,CAAC,EACR,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,CAAC,EAC9E,GAAG,IAAI,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,iBAAiB,CAAC,CACrE,CAAC;IACF,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC;AACpE,CAAC;AAED,+BAA+B;AAC/B,MAAM,UAAU,aAAa;IAC3B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3C,GAAG,CAAC,MAAM,CACR,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,SAAS,CAAC,CACzF,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,CAAC;AACf,CAAC"}

package/dist/elements/panels.d.ts

@@ -1,15 +0,0 @@
-/**
- * <mbx-panels>: the row under the video for what native controls cannot
- * show. It sits in the player beside the video, in flow, so it lands
- * under the picture, and lays its children out in a row: the quality,
- * audio and subtitles menus, the live button, the lock. Each child hides
- * itself when its session has nothing for it, and the row hides when
- * every child has, so a native session shows no strip at all.
- */
-import { Component } from './component.js';
-export declare class MbxPanels extends Component {
-    constructor();
-    private empty;
-    protected attach(): void;
-}
-//# sourceMappingURL=panels.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../src/elements/panels.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiB3C,qBAAa,SAAU,SAAQ,SAAS;;IAOtC,OAAO,CAAC,KAAK;cAIM,MAAM,IAAI,IAAI;CAoBlC"}

package/dist/elements/panels.js

@@ -1,55 +0,0 @@
-/**
- * <mbx-panels>: the row under the video for what native controls cannot
- * show. It sits in the player beside the video, in flow, so it lands
- * under the picture, and lays its children out in a row: the quality,
- * audio and subtitles menus, the live button, the lock. Each child hides
- * itself when its session has nothing for it, and the row hides when
- * every child has, so a native session shows no strip at all.
- */
-import { Component } from './component.js';
-import { style } from './shared.js';
-const STYLE = `
-:host {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--mbx-gap);
-  padding: var(--mbx-pad);
-  background: var(--mbx-surface);
-  color: var(--mbx-text);
-  font: 400 13px/1.4 var(--mbx-font);
-}
-:host([hidden]) { display: none; }
-`;
-export class MbxPanels extends Component {
-    constructor() {
-        super();
-        const root = this.attachShadow({ mode: 'open' });
-        root.append(style(STYLE), document.createElement('slot'));
-    }
-    empty() {
-        return ![...this.children].some((child) => !child.hidden);
-    }
-    attach() {
-        const tick = () => {
-            const empty = this.empty();
-            // Only on a change: the observer sees the row's own attribute too, and
-            // a write it did not need would wake it again without end.
-            if (this.hidden !== empty)
-                this.hidden = empty;
-        };
-        // The children say `hidden` on themselves; the row follows the last of them.
-        const observer = new MutationObserver(tick);
-        observer.observe(this, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['hidden'],
-        });
-        this.keep(() => {
-            observer.disconnect();
-        });
-        tick();
-    }
-}
-//# sourceMappingURL=panels.js.map

package/dist/elements/panels.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"panels.js","sourceRoot":"","sources":["../../src/elements/panels.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,KAAK,GAAG;;;;;;;;;;;;CAYb,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,SAAS;IACtC;QACE,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEO,KAAK;QACX,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAE,KAAqB,CAAC,MAAM,CAAC,CAAC;IAC7E,CAAC;IAEkB,MAAM;QACvB,MAAM,IAAI,GAAG,GAAS,EAAE;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAC3B,uEAAuE;YACvE,2DAA2D;YAC3D,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK;gBAAE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACjD,CAAC,CAAC;QACF,6EAA6E;QAC7E,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE;YACrB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,QAAQ,CAAC;SAC5B,CAAC,CAAC;QACH,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACb,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC,CAAC;QACH,IAAI,EAAE,CAAC;IACT,CAAC;CACF"}

package/dist/entries/panels.d.ts

@@ -1,5 +0,0 @@
-/** `@mattebox/player/elements/panels`: registers <mbx-panels>, and the player with it. */
-import '../element-entry.js';
-import { MbxPanels } from '../elements/panels.js';
-export { MbxPanels };
-//# sourceMappingURL=panels.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../src/entries/panels.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAKlD,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/entries/panels.js

@@ -1,8 +0,0 @@
-/** `@mattebox/player/elements/panels`: registers <mbx-panels>, and the player with it. */
-import '../element-entry.js';
-import { MbxPanels } from '../elements/panels.js';
-import { PANELS } from '../tags.js';
-if (customElements.get(PANELS) === undefined)
-    customElements.define(PANELS, MbxPanels);
-export { MbxPanels };
-//# sourceMappingURL=panels.js.map

package/dist/entries/panels.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"panels.js","sourceRoot":"","sources":["../../src/entries/panels.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,IAAI,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,SAAS;IAAE,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAEvF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/es2015/compose.js

@@ -1,33 +0,0 @@
-import { AIRPLAY_BUTTON, AUDIO_MENU, CHAPTERS_MENU, CONTROL_BAR, CURRENT_TIME, DRM_BADGE, DURATION, ERROR_SCREEN, FULLSCREEN_BUTTON, LIVE_BUTTON, PANELS, PIP_BUTTON, PLAY_BUTTON, QUALITY_MENU, SEEK_BAR, SKIP_BUTTON, SPACER, SPEED_MENU, SPINNER, START_BUTTON, SUBTITLES_MENU, TITLE, VOLUME } from "./tags.js";
-//#region src/compose.ts
-/**
-* The default compositions: what a player gets when the page wrote none of
-* its own. Under `controls="custom"` the screens and the bar, appended
-* when there is no `<mbx-control-bar>` child; under `native` and `none`
-* the panels row under the video, appended when there is no
-* `<mbx-panels>` child. Built by tag, so this module needs no element
-* class, and appended to the player's light DOM, where the page can see
-* it and style it the way it would its own.
-*/
-function skip(seconds) {
-	const node = document.createElement(SKIP_BUTTON);
-	node.setAttribute("seconds", String(seconds));
-	return node;
-}
-function each(...tags) {
-	return tags.map((tag) => document.createElement(tag));
-}
-/** The screens and the bar. */
-function composeBar() {
-	const bar = document.createElement(CONTROL_BAR);
-	bar.append(...each(CURRENT_TIME, SEEK_BAR, DURATION, LIVE_BUTTON), skip(-10), document.createElement(PLAY_BUTTON), skip(10), ...each(VOLUME, SPACER, SPEED_MENU, CHAPTERS_MENU, SUBTITLES_MENU, AUDIO_MENU), ...each(QUALITY_MENU, AIRPLAY_BUTTON, PIP_BUTTON, FULLSCREEN_BUTTON));
-	return [...each(TITLE, START_BUTTON, ERROR_SCREEN, SPINNER), bar];
-}
-/** The row under the video. */
-function composePanels() {
-	const row = document.createElement(PANELS);
-	row.append(...each(QUALITY_MENU, AUDIO_MENU, SUBTITLES_MENU, CHAPTERS_MENU, LIVE_BUTTON, DRM_BADGE));
-	return [row];
-}
-//#endregion
-export { composeBar, composePanels };

package/dist/es2015/elements/panels.js

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

package/dist/es2015/entries/panels.js

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