@mattebox/player 0.3.1 → 0.5.0

package/dist/elements/spinner.js

@@ -0,0 +1,80 @@
+import { Component } from './component.js';
+import { style } from './shared.js';
+const STYLE = `
+:host {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 44px;
+  height: 44px;
+  margin: -22px 0 0 -22px;
+  display: none;
+  pointer-events: none;
+  color: var(--mbx-text);
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
+}
+:host([waiting]) { display: block; }
+:host([hidden]) { display: none; }
+[part~="ring"] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border: 3px solid rgba(255, 255, 255, 0.22);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: mbx-turn 0.8s linear infinite;
+}
+[part~="ring"][hidden] { display: none; }
+slot[hidden] { display: none; }
+::slotted(*) { width: 100%; height: 100%; }
+@keyframes mbx-turn { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  [part~="ring"] { animation: none; }
+}
+`;
+/** What the video fires as it waits and as it goes on. */
+const EVENTS = ['waiting', 'stalled', 'playing', 'canplay', 'emptied'];
+export class MbxSpinner extends Component {
+    static get observedAttributes() {
+        return ['label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this.ring = document.createElement('div');
+        this.ring.setAttribute('part', 'ring');
+        this.slot_ = document.createElement('slot');
+        this.slot_.name = 'icon';
+        // A page's own glyph replaces the ring: the slot is watched for it.
+        this.slot_.addEventListener('slotchange', () => {
+            this.ring.hidden = this.slot_.assignedNodes().length > 0;
+        });
+        root.append(style(STYLE), this.ring, this.slot_);
+    }
+    /** Named before attaching: a constructor must not add attributes. */
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'status');
+        super.connectedCallback();
+    }
+    attach(player) {
+        const video = player.video;
+        this.listen(video, EVENTS, () => {
+            this.render();
+        });
+        this.render();
+    }
+    detach() {
+        this.removeAttribute('waiting');
+    }
+    render() {
+        const player = this.player;
+        if (player === null)
+            return;
+        this.setAttribute('aria-label', this.getAttribute('label') ?? 'Loading');
+        // The player reflects the same events, and reads them first: it listens
+        // from its constructor, before any control attaches.
+        this.toggleAttribute('waiting', player.hasAttribute('waiting'));
+    }
+}
+//# sourceMappingURL=spinner.js.map

package/dist/elements/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../src/elements/spinner.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bb,CAAC;AAEF,0DAA0D;AAC1D,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;AAEvE,MAAM,OAAO,UAAW,SAAQ,SAAS;IACvC,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAKD;QACE,KAAK,EAAE,CAAC;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACvC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC;QACzB,oEAAoE;QACpE,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;YAC7C,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC;IAED,qEAAqE;IAC5D,iBAAiB;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACpE,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAEkB,MAAM,CAAC,MAAkB;QAC1C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE;YAC9B,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEkB,MAAM;QACvB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC;IAEkB,MAAM;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,MAAM,KAAK,IAAI;YAAE,OAAO;QAC5B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,SAAS,CAAC,CAAC;QACzE,wEAAwE;QACxE,qDAAqD;QACrD,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;IAClE,CAAC;CACF"}

package/dist/elements/start-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"start-button.d.ts","sourceRoot":"","sources":["../../src/elements/start-button.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA+B3C,qBAAa,cAAe,SAAQ,SAAS;IAC3C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,KAAK,CAAiC;IAC/D,8FAA8F;IAC9F,QAAgB,MAAM,CAAU;IAChC,kFAAkF;IAClF,QAAgB,OAAO,CAAwB;;cAkB5B,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAkChC,MAAM,IAAI,IAAI;IAMjC;;;;;OAKG;IACH,OAAO,CAAC,GAAG;cAgBQ,MAAM,IAAI,IAAI;CAWlC"}
+{"version":3,"file":"start-button.d.ts","sourceRoot":"","sources":["../../src/elements/start-button.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AA+B3C,qBAAa,cAAe,SAAQ,SAAS;IAC3C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAoB;IACnD,iBAAyB,KAAK,CAAiC;IAC/D,8FAA8F;IAC9F,QAAgB,MAAM,CAAU;IAChC,kFAAkF;IAClF,QAAgB,OAAO,CAAwB;;cAkB5B,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAkChC,MAAM,IAAI,IAAI;IAMjC;;;;;OAKG;IACH,OAAO,CAAC,GAAG;cAgBQ,MAAM,IAAI,IAAI;CAYlC"}

package/dist/elements/start-button.js

@@ -48,7 +48,7 @@ export class MbxStartButton extends Component {
     }
     attach(player) {
         const video = player.video;
-        this.listen(video, ['play', 'pause', 'ended'], () => {
+        this.listen(video, ['play', 'pause', 'ended', 'waiting', 'stalled', 'canplay'], () => {
             this.render();
         });
         this.listen(video, ['playing', 'loadstart'], () => {
@@ -114,7 +114,8 @@ export class MbxStartButton extends Component {
         const state = video.ended ? 'replay' : 'play';
         show(this.slots, state);
         this.button.setAttribute('aria-label', this.getAttribute(`label-${state}`) ?? (state === 'play' ? 'Play' : 'Replay'));
-        this.hidden = this.failed || !video.paused;
+        // The player reflects `waiting` first: it listens from its constructor.
+        this.hidden = this.failed || !video.paused || this.player?.hasAttribute('waiting') === true;
     }
 }
 //# sourceMappingURL=start-button.js.map

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

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

package/dist/elements/title.d.ts

@@ -0,0 +1,19 @@
+import type { PlayerHost } from '../host.js';
+import { Component } from './component.js';
+export declare class MbxTitle extends Component {
+    static get observedAttributes(): readonly string[];
+    private readonly artwork;
+    private readonly heading;
+    private readonly subheading;
+    /** Watches the player's box: the height of the bar's rows decides where the text sits. */
+    private resizer;
+    constructor();
+    protected attach(player: PlayerHost): void;
+    protected detach(): void;
+    /** `playing` on the element, for its own stylesheet and the page's. */
+    private state;
+    /** The height of the bar's rows: its box less the padding above them, which is its fade. Zero without a bar. */
+    private fit;
+    protected render(): void;
+}
+//# sourceMappingURL=title.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/elements/title.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiD3C,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,OAAO,CAAmB;IACnD,iBAAyB,OAAO,CAAc;IAC9C,iBAAyB,UAAU,CAAc;IACjD,0FAA0F;IAC1F,QAAgB,OAAO,CAAwB;;cAgB5B,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAehC,MAAM,IAAI,IAAI;IAOjC,uEAAuE;IACvE,OAAO,CAAC,KAAK;IAIb,gHAAgH;IAChH,OAAO,CAAC,GAAG;cAUQ,MAAM,IAAI,IAAI;CAelC"}

package/dist/elements/title.js

@@ -0,0 +1,139 @@
+/**
+ * <mbx-title>: the heading, the subheading and the artwork of what plays,
+ * as a lower third across the picture above the bar: a scrim that fades
+ * upward, the artwork in the first column, the two lines in the second,
+ * so a heading alone sits on a band and never floats. The content comes
+ * from attributes, `heading`,
+ * `subheading` and `artwork`, because the stream carries none of it: a page
+ * writes what it knows, and a Cast receiver writes what the sender said.
+ * With none of the three the element draws nothing.
+ *
+ * Shown while the video is paused, which includes before the first play,
+ * and hidden while it plays. The element carries `playing` for that rule,
+ * so a page changes it in CSS: `mattebox-player[started] mbx-title
+ * { display: none }` keeps it to the time before the first play, like the
+ * poster, and `mattebox-player:hover mbx-title { display: flex }` brings it
+ * back on hover. The height of the bar's rows, its box less the fade it
+ * pads itself with, goes on the host as `--mbx-bar-rows`, so the text sits
+ * just above the seek row while the band runs under the bar to the bottom
+ * edge, one ramp with the bar's own fade. The scrim is the page's to
+ * override. Placed first among the screens, so the start button, the
+ * error screen and the spinner paint over its band.
+ */
+import { el } from '../dom.js';
+import { Component } from './component.js';
+import { style } from './shared.js';
+const STYLE = `
+:host {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: flex-end;
+  gap: 14px;
+  /* The band runs under the bar to the bottom edge, one ramp with the
+     bar's own fade, so there is no seam where the bar begins; the text
+     sits 12px above the bar's rows, inside the bar's fade. */
+  padding: 72px calc(var(--mbx-pad) + 8px) calc(var(--mbx-bar-rows, 0px) + 12px);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0));
+  color: var(--mbx-text);
+  font: 400 14px/1.35 var(--mbx-font);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  pointer-events: none;
+}
+:host([playing]) { display: none; }
+:host([empty]) { display: none; }
+:host([hidden]) { display: none; }
+[part~="artwork"] {
+  flex: none;
+  height: 72px;
+  width: auto;
+  max-width: 128px;
+  border-radius: var(--mbx-radius);
+  object-fit: cover;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
+}
+[part~="artwork"][hidden] { display: none; }
+[part~="text"] { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 60ch; }
+[part~="heading"] {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[part~="subheading"] { color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+[part~="heading"]:empty, [part~="subheading"]:empty { display: none; }
+`;
+export class MbxTitle extends Component {
+    static get observedAttributes() {
+        return ['heading', 'subheading', 'artwork'];
+    }
+    constructor() {
+        super();
+        this.resizer = null;
+        const root = this.attachShadow({ mode: 'open' });
+        this.artwork = el('img', 'artwork');
+        this.artwork.alt = '';
+        this.artwork.hidden = true;
+        const text = el('div', 'text');
+        this.heading = el('div', 'heading');
+        this.subheading = el('div', 'subheading');
+        text.append(this.heading, this.subheading);
+        root.append(style(STYLE), this.artwork, text);
+    }
+    attach(player) {
+        this.listen(player.video, ['play', 'pause', 'ended', 'emptied'], () => {
+            this.state(player);
+        });
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizer = new ResizeObserver(() => {
+                this.fit(player);
+            });
+            this.resizer.observe(player);
+        }
+        this.fit(player);
+        this.state(player);
+        this.render();
+    }
+    detach() {
+        this.resizer?.disconnect();
+        this.resizer = null;
+        this.removeAttribute('playing');
+        this.style.removeProperty('--mbx-bar-rows');
+    }
+    /** `playing` on the element, for its own stylesheet and the page's. */
+    state(player) {
+        this.toggleAttribute('playing', !player.video.paused);
+    }
+    /** The height of the bar's rows: its box less the padding above them, which is its fade. Zero without a bar. */
+    fit(player) {
+        const bar = player.querySelector('mbx-control-bar');
+        let rows = 0;
+        if (bar !== null) {
+            const top = Number.parseFloat(getComputedStyle(bar).paddingTop) || 0;
+            rows = Math.max(0, bar.getBoundingClientRect().height - top);
+        }
+        this.style.setProperty('--mbx-bar-rows', `${rows}px`);
+    }
+    render() {
+        const heading = this.getAttribute('heading') ?? '';
+        const subheading = this.getAttribute('subheading') ?? '';
+        const artwork = this.getAttribute('artwork');
+        this.heading.textContent = heading;
+        this.subheading.textContent = subheading;
+        if (artwork === null) {
+            this.artwork.removeAttribute('src');
+            this.artwork.hidden = true;
+        }
+        else {
+            this.artwork.src = artwork;
+            this.artwork.hidden = false;
+        }
+        this.toggleAttribute('empty', heading === '' && subheading === '' && artwork === null);
+    }
+}
+//# sourceMappingURL=title.js.map

package/dist/elements/title.js.map

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

package/dist/entries/airplay-button.d.ts

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

package/dist/entries/airplay-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"airplay-button.d.ts","sourceRoot":"","sources":["../../src/entries/airplay-button.ts"],"names":[],"mappings":"AAAA,0GAA0G;AAC1G,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAOjE,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/entries/airplay-button.js

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

package/dist/entries/airplay-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"airplay-button.js","sourceRoot":"","sources":["../../src/entries/airplay-button.ts"],"names":[],"mappings":"AAAA,0GAA0G;AAC1G,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAC1D,CAAC;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/entries/spinner.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../src/entries/spinner.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAOpD,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/entries/spinner.js

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

package/dist/entries/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../src/entries/spinner.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,SAAS,EAAE,CAAC;IAC9C,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;AAC7C,CAAC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/entries/title.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/entries/title.ts"],"names":[],"mappings":"AAAA,wFAAwF;AACxF,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOhD,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/entries/title.js

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

package/dist/entries/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sourceRoot":"","sources":["../../src/entries/title.ts"],"names":[],"mappings":"AAAA,wFAAwF;AACxF,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,IAAI,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5C,cAAc,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AACzC,CAAC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/es2015/_virtual/{_@oxc-project_runtime@0.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/asyncToGenerator.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/asyncToGenerator.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/asyncToGenerator.js
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
 	try {
 		var i = n[a](c), u = i.value;

package/dist/es2015/_virtual/{_@oxc-project_runtime@0.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/defineProperty.js

@@ -1,5 +1,5 @@
 import toPropertyKey from "./toPropertyKey.js";
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,

package/dist/es2015/_virtual/{_@oxc-project_runtime@0.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/objectSpread2.js

@@ -1,5 +1,5 @@
 import _defineProperty from "./defineProperty.js";
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/objectSpread2.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/objectSpread2.js
 function ownKeys(e, r) {
 	var t = Object.keys(e);
 	if (Object.getOwnPropertySymbols) {

package/dist/es2015/_virtual/{_@oxc-project_runtime@0.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/toPrimitive.js

@@ -1,5 +1,5 @@
 import _typeof from "./typeof.js";
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];

package/dist/es2015/_virtual/{_@oxc-project_runtime@0.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/toPropertyKey.js

@@ -1,6 +1,6 @@
 import _typeof from "./typeof.js";
 import toPrimitive from "./toPrimitive.js";
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";

package/dist/es2015/_virtual/{_@oxc-project_runtime@0.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/typeof.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {

package/dist/es2015/compose.js

@@ -1,4 +1,4 @@
-import { 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, START_BUTTON, SUBTITLES_MENU, VOLUME } from "./tags.js";
+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
@@ -20,8 +20,8 @@ function each(...tags) {
 /** 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, PIP_BUTTON, FULLSCREEN_BUTTON));
-	return [...each(START_BUTTON, ERROR_SCREEN), 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() {

package/dist/es2015/controls/airplay.js

@@ -0,0 +1,29 @@
+//#region src/controls/airplay.ts
+const WIRELESS_CHANGED = "webkitcurrentplaybacktargetiswirelesschanged";
+function airplay(video) {
+	const apple = video;
+	if (!("WebKitPlaybackTargetAvailabilityEvent" in globalThis && typeof apple.webkitShowPlaybackTargetPicker === "function")) return {
+		supported: false,
+		offered: () => false,
+		active: () => false,
+		show() {},
+		watch: () => () => {}
+	};
+	return {
+		supported: true,
+		offered: () => video.disableRemotePlayback !== true,
+		active: () => apple.webkitCurrentPlaybackTargetIsWireless === true,
+		show() {
+			var _apple$webkitShowPlay;
+			(_apple$webkitShowPlay = apple.webkitShowPlaybackTargetPicker) === null || _apple$webkitShowPlay === void 0 || _apple$webkitShowPlay.call(apple);
+		},
+		watch(fn) {
+			video.addEventListener(WIRELESS_CHANGED, fn);
+			return () => {
+				video.removeEventListener(WIRELESS_CHANGED, fn);
+			};
+		}
+	};
+}
+//#endregion
+export { airplay };

package/dist/es2015/controls/icons.js

@@ -27,6 +27,8 @@ const PATHS = {
 	"playback-speed": "M13.9213 5.53573C14.3146 5.45804 14.6666 5.76987 14.6666 6.17079V7.57215C14.6666 7.89777 14.4305 8.17277 14.114 8.24925C12.5981 8.61559 11.2506 9.41368 10.2091 10.506C9.98474 10.7414 9.62903 10.8079 9.34742 10.6453L8.14112 9.94885C7.79394 9.7484 7.69985 9.28777 7.96359 8.98585C9.48505 7.24409 11.5636 6.00143 13.9213 5.53573Z M5.88974 12.5908C6.01805 12.2101 6.46491 12.0603 6.81279 12.2611L8.01201 12.9535C8.29379 13.1162 8.41396 13.4577 8.32238 13.7699C8.11252 14.4854 7.99998 15.2424 7.99998 16.0257C7.99998 16.809 8.11252 17.566 8.32238 18.2814C8.41396 18.5936 8.29378 18.9352 8.01201 19.0979L6.82742 19.7818C6.48051 19.9821 6.03488 19.8337 5.90521 19.4547C5.5345 18.3712 5.33331 17.2091 5.33331 16C5.33331 14.8078 5.5289 13.6613 5.88974 12.5908Z M8.17106 22.0852C7.82291 22.2862 7.72949 22.7486 7.99532 23.0502C9.51387 24.773 11.5799 26.0017 13.9213 26.4642C14.3146 26.5419 14.6666 26.2301 14.6666 25.8291V24.4792C14.6666 24.1536 14.4305 23.8786 14.114 23.8021C12.5981 23.4358 11.2506 22.6377 10.2091 21.5453C9.98474 21.31 9.62903 21.2435 9.34742 21.4061L8.17106 22.0852Z M17.3333 25.8291C17.3333 26.2301 17.6857 26.5418 18.079 26.4641C22.9748 25.4969 26.6666 21.1796 26.6666 16C26.6666 10.8204 22.9748 6.50302 18.079 5.5358C17.6857 5.4581 17.3333 5.76987 17.3333 6.17079V7.57215C17.3333 7.89777 17.5697 8.17282 17.8862 8.24932C21.3942 9.09721 24 12.2572 24 16.0257C24 19.7942 21.3942 22.9542 17.8862 23.802C17.5697 23.8785 17.3333 24.1536 17.3333 24.4792V25.8291Z M14.3961 10.4163C13.9561 10.0911 13.3333 10.4053 13.3333 10.9525L13.3333 21.0474C13.3333 21.5946 13.9561 21.9087 14.3962 21.5836L21.2273 16.5359C21.5879 16.2694 21.5879 15.73 21.2273 15.4635L14.3961 10.4163Z",
 	"picture-in-picture": "M16 15.3333C15.6318 15.3333 15.3333 15.6318 15.3333 16V20C15.3333 20.3682 15.6318 20.6667 16 20.6667H21.3333C21.7015 20.6667 22 20.3682 22 20V16C22 15.6318 21.7015 15.3333 21.3333 15.3333H16Z M5.33333 7.33334C5.33333 6.96515 5.63181 6.66667 5.99999 6.66667H26C26.3682 6.66667 26.6667 6.96515 26.6667 7.33334V24.6667C26.6667 25.0349 26.3682 25.3333 26 25.3333H5.99999C5.63181 25.3333 5.33333 25.0349 5.33333 24.6667V7.33334ZM7.99999 10C7.99999 9.63182 8.29847 9.33334 8.66666 9.33334H23.3333C23.7015 9.33334 24 9.63182 24 10V22C24 22.3682 23.7015 22.6667 23.3333 22.6667H8.66666C8.29847 22.6667 7.99999 22.3682 7.99999 22V10Z",
 	"picture-in-picture-exit": "M5.33334 26V19.4667C5.33334 19.393 5.39304 19.3333 5.46668 19.3333H7.86668C7.94031 19.3333 8.00001 19.393 8.00001 19.4667V23.3333C8.00001 23.7015 8.29849 24 8.66668 24H23.3333C23.7015 24 24 23.7015 24 23.3333V8.66666C24 8.29847 23.7015 7.99999 23.3333 7.99999H19.4667C19.393 7.99999 19.3333 7.9403 19.3333 7.86666V5.46666C19.3333 5.39302 19.393 5.33333 19.4667 5.33333H26C26.3682 5.33333 26.6667 5.63181 26.6667 5.99999V26C26.6667 26.3682 26.3682 26.6667 26 26.6667H6.00001C5.63182 26.6667 5.33334 26.3682 5.33334 26Z M14.0098 8.42359H10.806C10.6872 8.42359 10.6277 8.56721 10.7117 8.6512L16.5491 14.4886C16.8094 14.7489 16.8094 15.171 16.5491 15.4314L15.3234 16.657C15.0631 16.9174 14.641 16.9174 14.3806 16.657L8.63739 10.9138C8.55339 10.8298 8.40978 10.8893 8.40978 11.0081V14.0236C8.40978 14.3918 8.1113 14.6903 7.74311 14.6903H6.00978C5.64159 14.6903 5.34311 14.3918 5.34311 14.0236L5.34311 6.02359C5.34311 5.6554 5.64159 5.35692 6.00978 5.35692L14.0098 5.35692C14.378 5.35692 14.6764 5.6554 14.6764 6.02359V7.75692C14.6764 8.12511 14.378 8.42359 14.0098 8.42359Z",
+	airplay: "M5.33334 6.00001C5.33334 5.63182 5.63181 5.33334 6 5.33334H26C26.3682 5.33334 26.6667 5.63182 26.6667 6.00001V20.6667C26.6667 21.0349 26.3682 21.3333 26 21.3333H23.7072C23.4956 21.3333 23.2966 21.233 23.171 21.0628L22.1859 19.7295C21.8607 19.2894 22.1749 18.6667 22.7221 18.6667H23.3333C23.7015 18.6667 24 18.3682 24 18V8.66668C24 8.29849 23.7015 8.00001 23.3333 8.00001H8.66667C8.29848 8.00001 8 8.29849 8 8.66668V18C8 18.3682 8.29848 18.6667 8.66667 18.6667H9.29357C9.84072 18.6667 10.1549 19.2894 9.82976 19.7295L8.84467 21.0628C8.71898 21.233 8.52 21.3333 8.30848 21.3333H6C5.63181 21.3333 5.33334 21.0349 5.33334 20.6667V6.00001Z M8.78528 25.6038C8.46013 26.0439 8.77431 26.6667 9.32147 26.6667L22.6785 26.6667C23.2256 26.6667 23.5398 26.0439 23.2146 25.6038L16.5358 16.5653C16.2693 16.2046 15.73 16.2047 15.4635 16.5653L8.78528 25.6038Z",
+	"airplay-active": "M5.33334 6.00001C5.33334 5.63182 5.63181 5.33334 6 5.33334H26C26.3682 5.33334 26.6667 5.63182 26.6667 6.00001V20.6667C26.6667 21.0349 26.3682 21.3333 26 21.3333H6C5.63181 21.3333 5.33334 21.0349 5.33334 20.6667V6.00001Z M8.78528 25.6038C8.46013 26.0439 8.77431 26.6667 9.32147 26.6667L22.6785 26.6667C23.2256 26.6667 23.5398 26.0439 23.2146 25.6038L16.5358 16.5653C16.2693 16.2046 15.73 16.2047 15.4635 16.5653L8.78528 25.6038Z",
 	chapters: "M16.6927 25.3346C16.3245 25.3346 16.026 25.0361 16.026 24.6679L16.026 7.3346C16.026 6.96641 16.3245 6.66794 16.6927 6.66794L18.6927 6.66794C19.0609 6.66794 19.3594 6.96642 19.3594 7.3346L19.3594 24.6679C19.3594 25.0361 19.0609 25.3346 18.6927 25.3346H16.6927Z M24.026 25.3346C23.6578 25.3346 23.3594 25.0361 23.3594 24.6679L23.3594 7.3346C23.3594 6.96641 23.6578 6.66794 24.026 6.66794L26.026 6.66794C26.3942 6.66794 26.6927 6.96642 26.6927 7.3346V24.6679C26.6927 25.0361 26.3942 25.3346 26.026 25.3346H24.026Z M5.48113 23.9407C5.38584 24.2963 5.59689 24.6619 5.95254 24.7572L7.88439 25.2748C8.24003 25.3701 8.60559 25.159 8.70089 24.8034L13.1871 8.06067C13.2824 7.70503 13.0713 7.33947 12.7157 7.24417L10.7838 6.72654C10.4282 6.63124 10.0626 6.8423 9.96733 7.19794L5.48113 23.9407Z"
 };
 const SVG = "http://www.w3.org/2000/svg";

package/dist/es2015/controls/menu.js

@@ -1,5 +1,5 @@
 import { el, state } from "../dom.js";
-import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/objectSpread2.js";
 //#region src/controls/menu.ts
 /**
 * The menu primitive the quality, audio, subtitles and speed menus share: a

package/dist/es2015/element.js

@@ -1,12 +1,12 @@
 import { CONTROL_BAR, PANELS, PLAYER } from "./tags.js";
 import { composeBar, composePanels } from "./compose.js";
 import { namespaces } from "./namespaces.js";
-import _asyncToGenerator from "./_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/asyncToGenerator.js";
+import _asyncToGenerator from "./_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/asyncToGenerator.js";
 import { drmGuard, resolvePreset } from "./presets.js";
 import { STYLE } from "./style.js";
 import { errorSurface } from "./surface.js";
-import _objectSpread2 from "./_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/objectSpread2.js";
-import { createPlayer, matteboxHandler, nativeHandler } from "@mattebox/player-core";
+import _objectSpread2 from "./_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/objectSpread2.js";
+import { createPlayer, inferType, matteboxHandler, nativeHandler } from "@mattebox/player-core";
 //#region src/element.ts
 /** Attributes forwarded onto the video as attributes, never as properties. */
 const FORWARDED = [
@@ -45,14 +45,19 @@ const STATE_EVENTS = [
 	"ended",
 	"emptied",
 	"volumechange",
-	"loadedmetadata"
+	"loadedmetadata",
+	"resize",
+	"playing",
+	"waiting",
+	"stalled",
+	"canplay"
 ];
 /** Every stage the engine ships. A narrower preset is optimization. */
 const DEFAULT_PRESET = "full";
 /**
 * What `define()` recorded, for the elements the parser creates. It is the
-* one value shared across elements, and the prompt asks for it: a page that
-* writes only markup still has to be able to say what the engine carries.
+* one value shared across elements, because a page that writes only markup
+* still has to be able to say what the engine carries.
 */
 let defaults = {};
 /**
@@ -91,12 +96,15 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		this.current = null;
 		this.failure = null;
 		this.reflecting = false;
+		this.started = false;
+		this.waiting = false;
 		this.offs = [];
 		this.queue = Promise.resolve();
 		this.pending = false;
 		this.media = document.createElement("video");
 		this.media.controls = true;
 		for (const name of STATE_EVENTS) this.media.addEventListener(name, () => {
+			this.note(name);
 			this.reflect();
 		});
 		this.media.addEventListener("playing", () => {
@@ -151,6 +159,18 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", done, { once: true });
 		else queueMicrotask(done);
 	}
+	/** The two states the video does not hold: whether it has played once, and whether it waits for data. */
+	note(event) {
+		if (event === "playing") {
+			this.started = true;
+			this.waiting = false;
+		} else if (event === "waiting" || event === "stalled") this.waiting = true;
+		else if (event === "canplay") this.waiting = false;
+		else if (event === "emptied") {
+			this.started = false;
+			this.waiting = false;
+		}
+	}
 	/** The video's state on the element, for `mattebox-player[paused]` and the like. */
 	reflect() {
 		const video = this.media;
@@ -159,8 +179,26 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		this.toggleAttribute("playing", !video.paused);
 		this.toggleAttribute("ended", video.ended);
 		this.toggleAttribute("muted", video.muted);
+		this.toggleAttribute("audio", this.audio());
+		this.toggleAttribute("started", this.started);
+		this.toggleAttribute("waiting", this.waiting);
 		this.reflecting = false;
 	}
+	/**
+	* Whether the source has no picture. Once the metadata is in, the video's
+	* size decides: zero by zero is sound alone, and `resize` catches a stream
+	* that moves to or from an audio-only rendition. Before that, the type the
+	* page wrote or the URL implies is the hint, so an mp3 is `audio` from
+	* the start rather than from its metadata.
+	*/
+	audio() {
+		var _this$getAttribute;
+		const video = this.media;
+		if (video.readyState >= HTMLMediaElement.HAVE_METADATA) return video.videoWidth === 0 && video.videoHeight === 0;
+		const src = this.getAttribute("src");
+		const type = (_this$getAttribute = this.getAttribute("type")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : src === null ? void 0 : inferType(src);
+		return (type === null || type === void 0 ? void 0 : type.startsWith("audio/")) === true;
+	}
 	disconnectedCallback() {
 		this.enqueue(() => this.teardown());
 	}
@@ -178,6 +216,7 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 			return;
 		}
 		if (name === "preset") this.enqueue(() => this.discard());
+		if (name === "src" || name === "type") this.toggleAttribute("audio", this.audio());
 		this.reload();
 	}
 	/**
@@ -309,11 +348,11 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 	chain() {
 		var _this3 = this;
 		return _asyncToGenerator(function* () {
-			var _this$getAttribute;
+			var _this$getAttribute2;
 			if (_this3.options.handlers !== void 0) return _this3.options.handlers;
 			const config = _this3.options.config === void 0 ? {} : { config: _this3.options.config };
 			if (_this3.options.stages !== void 0) return [matteboxHandler(_objectSpread2({ stages: _this3.options.stages }, config)), nativeHandler()];
-			const name = (_this$getAttribute = _this3.getAttribute("preset")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : DEFAULT_PRESET;
+			const name = (_this$getAttribute2 = _this3.getAttribute("preset")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : DEFAULT_PRESET;
 			const preset = yield resolvePreset(name);
 			if (preset === null) {
 				_this3.report({