@mattebox/player-cast 0.5.0 → 0.6.0

package/dist/cast-button.js

@@ -2,7 +2,7 @@ import { cast } from "./cast.js";
 import { Component } from "./component.js";
 import { icon } from "./icons.js";
 import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
-//#region src/cast-button.ts
+// src/cast-button.ts
 const STATES = ["default", "active"];
 var MbxCastButton = class extends Component {
 	static get observedAttributes() {
@@ -50,10 +50,9 @@ var MbxCastButton = class extends Component {
 		this.button.disabled = !active && player.player?.session == null;
 		this.button.toggleAttribute("aria-busy", state === "connecting");
 		show(this.slots, active ? "active" : "default");
-		this.button.setAttribute("aria-label", active ? this.getAttribute("label-stop") ?? "Stop casting" : this.getAttribute("label-start") ?? "Cast");
+		this.button.setAttribute("aria-label", active ? this.word("label-stop", "castStop", "Stop casting") : this.word("label-start", "castStart", "Cast"));
 	}
 };
-//#endregion
 export { MbxCastButton };
 
 //# sourceMappingURL=cast-button.js.map

package/dist/cast-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cast-button.js","names":[],"sources":["../src/cast-button.ts"],"sourcesContent":["/**\n * <mbx-cast-button>: starts and ends a Chromecast session for the player,\n * and is hidden where there is no Cast: a browser without the SDK, or no\n * device on the network. `receiver` is the receiver application id, the\n * Default Media Receiver without one; `sdk=\"none\"` leaves loading the\n * sender SDK to the page. The glyph is `icon` or `icon-active`, the name\n * `label-start` or `label-stop`.\n *\n * Before the request goes to the receiver the button dispatches\n * `castload`, cancelable, with the request as `detail`, so a page adds\n * `customData` for its receiver or cancels. The player carries `casting`\n * while the session runs, and the cast screen drives the receiver.\n */\nimport type { Cast } from './cast.js';\nimport { cast } from './cast.js';\nimport { Component } from './component.js';\nimport type { PlayerHost } from './host.js';\nimport { icon } from './icons.js';\nimport { BUTTON_STYLE, iconSlots, show, style } from './shared.js';\n\ntype State = 'default' | 'active';\nconst STATES: readonly State[] = ['default', 'active'];\n\nexport class MbxCastButton extends Component {\n  static get observedAttributes(): readonly string[] {\n    return ['label-start', 'label-stop'];\n  }\n\n  declare private readonly button: HTMLButtonElement;\n  declare private readonly slots: Record<State, HTMLSlotElement>;\n  declare private api: Cast | null;\n\n  constructor() {\n    super();\n    this.api = null;\n    const root = this.attachShadow({ mode: 'open' });\n    this.button = document.createElement('button');\n    this.button.type = 'button';\n    this.button.setAttribute('part', 'button');\n    this.slots = iconSlots(STATES, (state) => icon(state === 'active' ? 'cast-active' : 'cast'));\n    for (const state of STATES) this.button.append(this.slots[state]);\n    this.button.addEventListener('click', () => {\n      const api = this.api;\n      if (api === null) return;\n      if (api.state() === 'casting') api.stop();\n      else api.start(this);\n    });\n    root.append(style(BUTTON_STYLE), this.button);\n  }\n\n  protected override attach(player: PlayerHost): void {\n    const api = cast(player);\n    this.api = api;\n    api.connect(this.getAttribute('receiver'), this.getAttribute('sdk'));\n    this.keep(\n      api.watch(() => {\n        this.render();\n      }),\n    );\n    // A session decides whether there is anything to send.\n    this.follow(player, () => {\n      this.render();\n      return undefined;\n    });\n  }\n\n  protected override detach(): void {\n    this.api?.disconnect();\n    this.api = null;\n  }\n\n  protected override render(): void {\n    const player = this.player;\n    const api = this.api;\n    if (player === null || api === null) return;\n    const state = api.state();\n    const active = state === 'casting';\n    this.hidden = state === 'unavailable';\n    // Nothing loaded means nothing to send; the receiver would show its idle screen.\n    this.button.disabled = !active && player.player?.session == null;\n    this.button.toggleAttribute('aria-busy', state === 'connecting');\n    show(this.slots, active ? 'active' : 'default');\n    this.button.setAttribute(\n      'aria-label',\n      active\n        ? (this.getAttribute('label-stop') ?? 'Stop casting')\n        : (this.getAttribute('label-start') ?? 'Cast'),\n    );\n  }\n}\n"],"mappings":";;;;;AAqBA,MAAM,SAA2B,CAAC,WAAW,QAAQ;AAErD,IAAa,gBAAb,cAAmC,UAAU;CAC3C,WAAW,qBAAwC;EACjD,OAAO,CAAC,eAAe,YAAY;CACrC;CAMA,cAAc;EACZ,MAAM;EACN,KAAK,MAAM;EACX,MAAM,OAAO,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;EAC/C,KAAK,SAAS,SAAS,cAAc,QAAQ;EAC7C,KAAK,OAAO,OAAO;EACnB,KAAK,OAAO,aAAa,QAAQ,QAAQ;EACzC,KAAK,QAAQ,UAAU,SAAS,UAAU,KAAK,UAAU,WAAW,gBAAgB,MAAM,CAAC;EAC3F,KAAK,MAAM,SAAS,QAAQ,KAAK,OAAO,OAAO,KAAK,MAAM,MAAM;EAChE,KAAK,OAAO,iBAAiB,eAAe;GAC1C,MAAM,MAAM,KAAK;GACjB,IAAI,QAAQ,MAAM;GAClB,IAAI,IAAI,MAAM,MAAM,WAAW,IAAI,KAAK;QACnC,IAAI,MAAM,IAAI;EACrB,CAAC;EACD,KAAK,OAAO,MAAM,YAAY,GAAG,KAAK,MAAM;CAC9C;CAEA,OAA0B,QAA0B;EAClD,MAAM,MAAM,KAAK,MAAM;EACvB,KAAK,MAAM;EACX,IAAI,QAAQ,KAAK,aAAa,UAAU,GAAG,KAAK,aAAa,KAAK,CAAC;EACnE,KAAK,KACH,IAAI,YAAY;GACd,KAAK,OAAO;EACd,CAAC,CACH;EAEA,KAAK,OAAO,cAAc;GACxB,KAAK,OAAO;EAEd,CAAC;CACH;CAEA,SAAkC;EAChC,KAAK,KAAK,WAAW;EACrB,KAAK,MAAM;CACb;CAEA,SAAkC;EAChC,MAAM,SAAS,KAAK;EACpB,MAAM,MAAM,KAAK;EACjB,IAAI,WAAW,QAAQ,QAAQ,MAAM;EACrC,MAAM,QAAQ,IAAI,MAAM;EACxB,MAAM,SAAS,UAAU;EACzB,KAAK,SAAS,UAAU;EAExB,KAAK,OAAO,WAAW,CAAC,UAAU,OAAO,QAAQ,WAAW;EAC5D,KAAK,OAAO,gBAAgB,aAAa,UAAU,YAAY;EAC/D,KAAK,KAAK,OAAO,SAAS,WAAW,SAAS;EAC9C,KAAK,OAAO,aACV,cACA,SACK,KAAK,aAAa,YAAY,KAAK,iBACnC,KAAK,aAAa,aAAa,KAAK,MAC3C;CACF;AACF"}
+{"version":3,"file":"cast-button.js","names":[],"sources":["../src/cast-button.ts"],"sourcesContent":["/**\n * <mbx-cast-button>: starts and ends a Chromecast session for the player,\n * and is hidden where there is no Cast: a browser without the SDK, or no\n * device on the network. `receiver` is the receiver application id, the\n * Default Media Receiver without one; `sdk=\"none\"` leaves loading the\n * sender SDK to the page. The glyph is `icon` or `icon-active`, the name\n * `label-start` or `label-stop`.\n *\n * Before the request goes to the receiver the button dispatches\n * `castload`, cancelable, with the request as `detail`, so a page adds\n * `customData` for its receiver or cancels. The player carries `casting`\n * while the session runs, and the cast screen drives the receiver.\n */\nimport type { Cast } from './cast.js';\nimport { cast } from './cast.js';\nimport { Component } from './component.js';\nimport type { PlayerHost } from './host.js';\nimport { icon } from './icons.js';\nimport { BUTTON_STYLE, iconSlots, show, style } from './shared.js';\n\ntype State = 'default' | 'active';\nconst STATES: readonly State[] = ['default', 'active'];\n\nexport class MbxCastButton extends Component {\n  static get observedAttributes(): readonly string[] {\n    return ['label-start', 'label-stop'];\n  }\n\n  declare private readonly button: HTMLButtonElement;\n  declare private readonly slots: Record<State, HTMLSlotElement>;\n  declare private api: Cast | null;\n\n  constructor() {\n    super();\n    this.api = null;\n    const root = this.attachShadow({ mode: 'open' });\n    this.button = document.createElement('button');\n    this.button.type = 'button';\n    this.button.setAttribute('part', 'button');\n    this.slots = iconSlots(STATES, (state) => icon(state === 'active' ? 'cast-active' : 'cast'));\n    for (const state of STATES) this.button.append(this.slots[state]);\n    this.button.addEventListener('click', () => {\n      const api = this.api;\n      if (api === null) return;\n      if (api.state() === 'casting') api.stop();\n      else api.start(this);\n    });\n    root.append(style(BUTTON_STYLE), this.button);\n  }\n\n  protected override attach(player: PlayerHost): void {\n    const api = cast(player);\n    this.api = api;\n    api.connect(this.getAttribute('receiver'), this.getAttribute('sdk'));\n    this.keep(\n      api.watch(() => {\n        this.render();\n      }),\n    );\n    // A session decides whether there is anything to send.\n    this.follow(player, () => {\n      this.render();\n      return undefined;\n    });\n  }\n\n  protected override detach(): void {\n    this.api?.disconnect();\n    this.api = null;\n  }\n\n  protected override render(): void {\n    const player = this.player;\n    const api = this.api;\n    if (player === null || api === null) return;\n    const state = api.state();\n    const active = state === 'casting';\n    this.hidden = state === 'unavailable';\n    // Nothing loaded means nothing to send; the receiver would show its idle screen.\n    this.button.disabled = !active && player.player?.session == null;\n    this.button.toggleAttribute('aria-busy', state === 'connecting');\n    show(this.slots, active ? 'active' : 'default');\n    this.button.setAttribute(\n      'aria-label',\n      active\n        ? this.word('label-stop', 'castStop', 'Stop casting')\n        : this.word('label-start', 'castStart', 'Cast'),\n    );\n  }\n}\n"],"mappings":";;;;;AAqBA,MAAM,SAA2B,CAAC,WAAW,QAAQ;AAErD,IAAa,gBAAb,cAAmC,UAAU;CAC3C,WAAW,qBAAwC;EACjD,OAAO,CAAC,eAAe,YAAY;CACrC;CAMA,cAAc;EACZ,MAAM;EACN,KAAK,MAAM;EACX,MAAM,OAAO,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;EAC/C,KAAK,SAAS,SAAS,cAAc,QAAQ;EAC7C,KAAK,OAAO,OAAO;EACnB,KAAK,OAAO,aAAa,QAAQ,QAAQ;EACzC,KAAK,QAAQ,UAAU,SAAS,UAAU,KAAK,UAAU,WAAW,gBAAgB,MAAM,CAAC;EAC3F,KAAK,MAAM,SAAS,QAAQ,KAAK,OAAO,OAAO,KAAK,MAAM,MAAM;EAChE,KAAK,OAAO,iBAAiB,eAAe;GAC1C,MAAM,MAAM,KAAK;GACjB,IAAI,QAAQ,MAAM;GAClB,IAAI,IAAI,MAAM,MAAM,WAAW,IAAI,KAAK;QACnC,IAAI,MAAM,IAAI;EACrB,CAAC;EACD,KAAK,OAAO,MAAM,YAAY,GAAG,KAAK,MAAM;CAC9C;CAEA,OAA0B,QAA0B;EAClD,MAAM,MAAM,KAAK,MAAM;EACvB,KAAK,MAAM;EACX,IAAI,QAAQ,KAAK,aAAa,UAAU,GAAG,KAAK,aAAa,KAAK,CAAC;EACnE,KAAK,KACH,IAAI,YAAY;GACd,KAAK,OAAO;EACd,CAAC,CACH;EAEA,KAAK,OAAO,cAAc;GACxB,KAAK,OAAO;EAEd,CAAC;CACH;CAEA,SAAkC;EAChC,KAAK,KAAK,WAAW;EACrB,KAAK,MAAM;CACb;CAEA,SAAkC;EAChC,MAAM,SAAS,KAAK;EACpB,MAAM,MAAM,KAAK;EACjB,IAAI,WAAW,QAAQ,QAAQ,MAAM;EACrC,MAAM,QAAQ,IAAI,MAAM;EACxB,MAAM,SAAS,UAAU;EACzB,KAAK,SAAS,UAAU;EAExB,KAAK,OAAO,WAAW,CAAC,UAAU,OAAO,QAAQ,WAAW;EAC5D,KAAK,OAAO,gBAAgB,aAAa,UAAU,YAAY;EAC/D,KAAK,KAAK,OAAO,SAAS,WAAW,SAAS;EAC9C,KAAK,OAAO,aACV,cACA,SACI,KAAK,KAAK,cAAc,YAAY,cAAc,IAClD,KAAK,KAAK,eAAe,aAAa,MAAM,CAClD;CACF;AACF"}

package/dist/cast-screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cast-screen.d.ts","sourceRoot":"","sources":["../src/cast-screen.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAuB5C,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAc;IAC7C,iBAAyB,IAAI,CAAoB;IACjD,iBAAyB,KAAK,CAAiC;IAC/D,iBAAyB,IAAI,CAAS;IACtC,iBAAyB,GAAG,CAAc;IAC1C,iBAAyB,IAAI,CAAc;IAC3C,iBAAyB,IAAI,CAAoB;IACjD,QAAgB,GAAG,CAAc;IACjC,kGAAkG;IAClG,QAAgB,IAAI,CAAgB;;IA8CpC,sEAAsE;IAC7D,iBAAiB,IAAI,IAAI;cAKf,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAWhC,MAAM,IAAI,IAAI;IAKjC,yEAAyE;IACzE,OAAO,CAAC,KAAK;cAcM,MAAM,IAAI,IAAI;CAsBlC"}
+{"version":3,"file":"cast-screen.d.ts","sourceRoot":"","sources":["../src/cast-screen.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAuB5C,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,kBAAkB,IAAI,SAAS,MAAM,EAAE,CAEjD;IAED,iBAAyB,MAAM,CAAc;IAC7C,iBAAyB,IAAI,CAAoB;IACjD,iBAAyB,KAAK,CAAiC;IAC/D,iBAAyB,IAAI,CAAS;IACtC,iBAAyB,GAAG,CAAc;IAC1C,iBAAyB,IAAI,CAAc;IAC3C,iBAAyB,IAAI,CAAoB;IACjD,QAAgB,GAAG,CAAc;IACjC,kGAAkG;IAClG,QAAgB,IAAI,CAAgB;;IA8CpC,sEAAsE;IAC7D,iBAAiB,IAAI,IAAI;cAKf,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;cAWhC,MAAM,IAAI,IAAI;IAKjC,yEAAyE;IACzE,OAAO,CAAC,KAAK;cAcM,MAAM,IAAI,IAAI;CAwBlC"}

package/dist/cast-screen.js

@@ -3,7 +3,7 @@ import { Component } from "./component.js";
 import { icon } from "./icons.js";
 import { BUTTON_STYLE, SLIDER_STYLE, describe, el, fill, format, iconSlots, show, style } from "./shared.js";
 import { slider } from "./slider.js";
-//#region src/cast-screen.ts
+// src/cast-screen.ts
 const STYLE_CSS = ":host{color:var(--mbx-text);font:400 .9375em / 1.4 var(--mbx-font);text-align:center;background:#000000d9;justify-content:center;align-items:center;padding:1.0667em;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}:host([hidden]){display:none}[part~=box]{flex-direction:column;align-items:center;width:100%;max-width:28em;display:flex}[part~=box]>:not([hidden])~:not([hidden]){margin-top:.8em}[part~=title]{font-size:1.2em;font-weight:600}[part~=row]{justify-content:center;align-items:center;width:100%;display:flex}[part~=row]>:not([hidden])~:not([hidden]){margin-left:.8em}[part~=slider]{flex:1}[part~=time]{font-variant-numeric:tabular-nums;color:var(--mbx-muted);font-size:.8667em}[part~=stop]{height:2.4em;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;background:0 0;border:1px solid;padding:0 1.0667em;font-weight:600}[part~=stop]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=stop]:focus:not(:focus-visible){outline:none}[hidden]{display:none}";
 const STATES = ["play", "pause"];
 const STEP = 5;
@@ -99,18 +99,17 @@ var MbxCastScreen = class extends Component {
 		const remote = api.remote();
 		const state = remote.loaded && !remote.paused ? "pause" : "play";
 		show(this.slots, state);
-		this.play.setAttribute("aria-label", this.getAttribute(`label-${state}`) ?? (state === "play" ? "Play" : "Pause"));
-		this.seek.label(this.getAttribute("label-seek") ?? "Seek");
-		this.stop.textContent = this.getAttribute("label-stop") ?? "Stop casting";
+		this.play.setAttribute("aria-label", state === "play" ? this.word("label-play", "play", "Play") : this.word("label-pause", "pause", "Pause"));
+		this.seek.label(this.word("label-seek", "seek", "Seek"));
+		this.stop.textContent = this.word("label-stop", "castStop", "Stop casting");
 		const casting = api.state() === "casting";
 		this.hidden = !casting;
 		if (!casting) return;
-		this.title_.textContent = fill(this.getAttribute("label") ?? "Casting to {device}", { device: api.device() ?? "" });
+		this.title_.textContent = fill(this.word("label", "castingTo", "Casting to {device}"), { device: api.device() ?? "" });
 		this.play.disabled = !remote.loaded;
 		this.paint();
 	}
 };
-//#endregion
 export { MbxCastScreen };
 
 //# sourceMappingURL=cast-screen.js.map

package/dist/cast-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"cast-screen.js","names":[],"sources":["../src/cast-screen.ts"],"sourcesContent":["/**\n * <mbx-cast-screen>: covers the picture while the player casts, with the\n * receiver's name, play and pause, the seek slider, the time, and a stop\n * button. It drives the receiver through the SDK's remote player; the\n * video underneath stays paused and untouched (rule 3). It sits in the\n * player beside the video, hidden until the player carries `casting`.\n *\n * The title comes from `label` with `{device}`, the stop button's text from\n * `label-stop`, the play button's name from `label-play` and `label-pause`\n * and its glyph from `icon-play` and `icon-pause`, the slider's name from\n * `label-seek`. A live stream has no duration on the receiver, so the\n * slider and the time hide for it.\n */\nimport type { Cast } from './cast.js';\nimport { cast } from './cast.js';\nimport STYLE_CSS from './cast-screen.css?inline';\nimport { Component } from './component.js';\nimport type { PlayerHost } from './host.js';\nimport { icon } from './icons.js';\nimport {\n  BUTTON_STYLE,\n  describe,\n  el,\n  fill,\n  format,\n  iconSlots,\n  SLIDER_STYLE,\n  show,\n  style,\n} from './shared.js';\nimport type { Slider } from './slider.js';\nimport { slider } from './slider.js';\n\ntype State = 'play' | 'pause';\nconst STATES: readonly State[] = ['play', 'pause'];\nconst STEP = 5;\nconst PAGE = 30;\n\nconst STYLE = BUTTON_STYLE + SLIDER_STYLE + STYLE_CSS;\n\nexport class MbxCastScreen extends Component {\n  static get observedAttributes(): readonly string[] {\n    return ['label', 'label-stop', 'label-play', 'label-pause', 'label-seek'];\n  }\n\n  declare private readonly title_: HTMLElement;\n  declare private readonly play: HTMLButtonElement;\n  declare private readonly slots: Record<State, HTMLSlotElement>;\n  declare private readonly seek: Slider;\n  declare private readonly row: HTMLElement;\n  declare private readonly time: HTMLElement;\n  declare private readonly stop: HTMLButtonElement;\n  declare private api: Cast | null;\n  /** Where the thumb is while a pointer holds it, so the receiver's reports do not move it back. */\n  declare private held: number | null;\n\n  constructor() {\n    super();\n    this.api = null;\n    this.held = null;\n    const root = this.attachShadow({ mode: 'open' });\n    const box = el('div', 'box');\n    this.title_ = el('div', 'title');\n    this.play = document.createElement('button');\n    this.play.type = 'button';\n    this.play.setAttribute('part', 'button play');\n    this.slots = iconSlots(STATES, icon);\n    for (const state of STATES) this.play.append(this.slots[state]);\n    this.play.addEventListener('click', () => {\n      this.api?.playPause();\n    });\n    this.seek = slider({\n      step: () => STEP,\n      page: () => PAGE,\n      onInput: (value) => {\n        if (this.seek.dragging()) {\n          this.held = value;\n          this.paint();\n          return;\n        }\n        this.held = null;\n        this.api?.seek(value);\n      },\n      onDrag: (on) => {\n        this.toggleAttribute('dragging', on);\n        if (!on) this.held = null;\n      },\n    });\n    this.time = el('span', 'time');\n    this.row = el('div', 'row');\n    this.row.append(this.play, this.seek.root, this.time);\n    this.stop = el('button', 'stop');\n    this.stop.type = 'button';\n    this.stop.addEventListener('click', () => {\n      this.api?.stop();\n    });\n    box.append(this.title_, this.row, this.stop);\n    root.append(style(STYLE), box);\n  }\n\n  /** Hidden before attaching: a constructor must not add attributes. */\n  override connectedCallback(): void {\n    if (this.player === null) this.hidden = true;\n    super.connectedCallback();\n  }\n\n  protected override attach(player: PlayerHost): void {\n    const api = cast(player);\n    this.api = api;\n    this.keep(\n      api.watch(() => {\n        this.render();\n      }),\n    );\n    this.render();\n  }\n\n  protected override detach(): void {\n    this.api = null;\n    this.hidden = true;\n  }\n\n  /** The slider and the time, from the receiver or from the held thumb. */\n  private paint(): void {\n    const api = this.api;\n    if (api === null) return;\n    const remote = api.remote();\n    const seekable = remote.loaded && Number.isFinite(remote.duration);\n    this.seek.root.hidden = !seekable;\n    this.time.hidden = !seekable;\n    if (!seekable) return;\n    const at = this.held ?? remote.time;\n    this.seek.range(0, remote.duration);\n    this.seek.set(at, describe(at, remote.duration));\n    this.time.textContent = `${format(at)} / ${format(remote.duration)}`;\n  }\n\n  protected override render(): void {\n    const api = this.api;\n    if (api === null) return;\n    const remote = api.remote();\n    // Named while hidden too: a screen reader walks the tree either way.\n    const state: State = remote.loaded && !remote.paused ? 'pause' : 'play';\n    show(this.slots, state);\n    this.play.setAttribute(\n      'aria-label',\n      this.getAttribute(`label-${state}`) ?? (state === 'play' ? 'Play' : 'Pause'),\n    );\n    this.seek.label(this.getAttribute('label-seek') ?? 'Seek');\n    this.stop.textContent = this.getAttribute('label-stop') ?? 'Stop casting';\n    const casting = api.state() === 'casting';\n    this.hidden = !casting;\n    if (!casting) return;\n    this.title_.textContent = fill(this.getAttribute('label') ?? 'Casting to {device}', {\n      device: api.device() ?? '',\n    });\n    this.play.disabled = !remote.loaded;\n    this.paint();\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"cast-screen.js","names":[],"sources":["../src/cast-screen.ts"],"sourcesContent":["/**\n * <mbx-cast-screen>: covers the picture while the player casts, with the\n * receiver's name, play and pause, the seek slider, the time, and a stop\n * button. It drives the receiver through the SDK's remote player; the\n * video underneath stays paused and untouched (rule 3). It sits in the\n * player beside the video, hidden until the player carries `casting`.\n *\n * The title comes from `label` with `{device}`, the stop button's text from\n * `label-stop`, the play button's name from `label-play` and `label-pause`\n * and its glyph from `icon-play` and `icon-pause`, the slider's name from\n * `label-seek`. A live stream has no duration on the receiver, so the\n * slider and the time hide for it.\n */\nimport type { Cast } from './cast.js';\nimport { cast } from './cast.js';\nimport STYLE_CSS from './cast-screen.css?inline';\nimport { Component } from './component.js';\nimport type { PlayerHost } from './host.js';\nimport { icon } from './icons.js';\nimport {\n  BUTTON_STYLE,\n  describe,\n  el,\n  fill,\n  format,\n  iconSlots,\n  SLIDER_STYLE,\n  show,\n  style,\n} from './shared.js';\nimport type { Slider } from './slider.js';\nimport { slider } from './slider.js';\n\ntype State = 'play' | 'pause';\nconst STATES: readonly State[] = ['play', 'pause'];\nconst STEP = 5;\nconst PAGE = 30;\n\nconst STYLE = BUTTON_STYLE + SLIDER_STYLE + STYLE_CSS;\n\nexport class MbxCastScreen extends Component {\n  static get observedAttributes(): readonly string[] {\n    return ['label', 'label-stop', 'label-play', 'label-pause', 'label-seek'];\n  }\n\n  declare private readonly title_: HTMLElement;\n  declare private readonly play: HTMLButtonElement;\n  declare private readonly slots: Record<State, HTMLSlotElement>;\n  declare private readonly seek: Slider;\n  declare private readonly row: HTMLElement;\n  declare private readonly time: HTMLElement;\n  declare private readonly stop: HTMLButtonElement;\n  declare private api: Cast | null;\n  /** Where the thumb is while a pointer holds it, so the receiver's reports do not move it back. */\n  declare private held: number | null;\n\n  constructor() {\n    super();\n    this.api = null;\n    this.held = null;\n    const root = this.attachShadow({ mode: 'open' });\n    const box = el('div', 'box');\n    this.title_ = el('div', 'title');\n    this.play = document.createElement('button');\n    this.play.type = 'button';\n    this.play.setAttribute('part', 'button play');\n    this.slots = iconSlots(STATES, icon);\n    for (const state of STATES) this.play.append(this.slots[state]);\n    this.play.addEventListener('click', () => {\n      this.api?.playPause();\n    });\n    this.seek = slider({\n      step: () => STEP,\n      page: () => PAGE,\n      onInput: (value) => {\n        if (this.seek.dragging()) {\n          this.held = value;\n          this.paint();\n          return;\n        }\n        this.held = null;\n        this.api?.seek(value);\n      },\n      onDrag: (on) => {\n        this.toggleAttribute('dragging', on);\n        if (!on) this.held = null;\n      },\n    });\n    this.time = el('span', 'time');\n    this.row = el('div', 'row');\n    this.row.append(this.play, this.seek.root, this.time);\n    this.stop = el('button', 'stop');\n    this.stop.type = 'button';\n    this.stop.addEventListener('click', () => {\n      this.api?.stop();\n    });\n    box.append(this.title_, this.row, this.stop);\n    root.append(style(STYLE), box);\n  }\n\n  /** Hidden before attaching: a constructor must not add attributes. */\n  override connectedCallback(): void {\n    if (this.player === null) this.hidden = true;\n    super.connectedCallback();\n  }\n\n  protected override attach(player: PlayerHost): void {\n    const api = cast(player);\n    this.api = api;\n    this.keep(\n      api.watch(() => {\n        this.render();\n      }),\n    );\n    this.render();\n  }\n\n  protected override detach(): void {\n    this.api = null;\n    this.hidden = true;\n  }\n\n  /** The slider and the time, from the receiver or from the held thumb. */\n  private paint(): void {\n    const api = this.api;\n    if (api === null) return;\n    const remote = api.remote();\n    const seekable = remote.loaded && Number.isFinite(remote.duration);\n    this.seek.root.hidden = !seekable;\n    this.time.hidden = !seekable;\n    if (!seekable) return;\n    const at = this.held ?? remote.time;\n    this.seek.range(0, remote.duration);\n    this.seek.set(at, describe(at, remote.duration));\n    this.time.textContent = `${format(at)} / ${format(remote.duration)}`;\n  }\n\n  protected override render(): void {\n    const api = this.api;\n    if (api === null) return;\n    const remote = api.remote();\n    // Named while hidden too: a screen reader walks the tree either way.\n    const state: State = remote.loaded && !remote.paused ? 'pause' : 'play';\n    show(this.slots, state);\n    this.play.setAttribute(\n      'aria-label',\n      state === 'play'\n        ? this.word('label-play', 'play', 'Play')\n        : this.word('label-pause', 'pause', 'Pause'),\n    );\n    this.seek.label(this.word('label-seek', 'seek', 'Seek'));\n    this.stop.textContent = this.word('label-stop', 'castStop', 'Stop casting');\n    const casting = api.state() === 'casting';\n    this.hidden = !casting;\n    if (!casting) return;\n    this.title_.textContent = fill(this.word('label', 'castingTo', 'Casting to {device}'), {\n      device: api.device() ?? '',\n    });\n    this.play.disabled = !remote.loaded;\n    this.paint();\n  }\n}\n"],"mappings":"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"}

package/dist/cast.js

@@ -1,4 +1,4 @@
-//#region src/cast.ts
+// src/cast.ts
 /** Whether the session is live: the engine's `live` namespace, once it has an edge. */
 function live(engine) {
 	const api = engine?.live;
@@ -342,7 +342,6 @@ function cast(player) {
 	}
 	return held;
 }
-//#endregion
 export { LICENSE_NAMESPACE, cast };
 
 //# sourceMappingURL=cast.js.map

package/dist/cdn/mattebox-player-cast.min.js

@@ -1 +1 @@
-var matteboxPlayerCast=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e){"@babel/helpers - typeof";return t=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},t(e)}function n(e,n){if(t(e)!=`object`||!e)return e;var r=e[Symbol.toPrimitive];if(r!==void 0){var i=r.call(e,n||`default`);if(t(i)!=`object`)return i;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(n===`string`?String:Number)(e)}function r(e){var r=n(e,`string`);return t(r)==`symbol`?r:r+``}function i(e,t,n){return(t=r(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?a(Object(n),!0).forEach(function(t){i(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function s(e){let t=e==null?void 0:e.live;return t!==void 0&&t.edge!==null}let c=`urn:x-cast:ch.mattebox.license`,l=null,u=null,d=null,f=null,p=/* @__PURE__ */ new Set,m=null,h={loaded:!1,paused:!0,time:0,duration:NaN},g=h;function _(){return globalThis}function v(){for(let e of[...p])e()}function y(e){var t;if(l!==null)return l;let n=_();return((t=n.cast)==null?void 0:t.framework)===void 0?`chrome`in n?(l=new Promise(t=>{let r=n.__onGCastApiAvailable;if(n.__onGCastApiAvailable=e=>{var n,i;r==null||r(e),t(e?(n=(i=_().cast)==null?void 0:i.framework)==null?null:n:null)},e===`none`)return;let i=document.createElement(`script`);i.src=`https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1`,i.async=!0,i.addEventListener(`error`,()=>t(null)),document.head.append(i)}),l):(l=Promise.resolve(null),l):(l=Promise.resolve(n.cast.framework),l)}function b(e,t){let n=e.CastContext.getInstance(),r=t==null?`CC1AD845`:t;if(u===null){var i,a;let t=(i=(a=_().chrome)==null||(a=a.cast)==null?void 0:a.AutoJoinPolicy.ORIGIN_SCOPED)==null?`origin_scoped`:i;n.setOptions({receiverApplicationId:r,autoJoinPolicy:t}),u=r,n.addEventListener(e.CastContextEventType.CAST_STATE_CHANGED,v),n.addEventListener(e.CastContextEventType.SESSION_STATE_CHANGED,t=>{var r;x(e,n,(r=t.sessionState)==null?``:r)}),d=new e.RemotePlayer,f=new e.RemotePlayerController(d),f.addEventListener(e.RemotePlayerEventType.ANY_CHANGE,()=>{let e=d;(e==null?void 0:e.isConnected)===!0&&e.isMediaLoaded&&(g={loaded:!0,paused:e.isPaused,time:e.currentTime,duration:e.duration>0?e.duration:1/0}),v()})}else t!==null&&t!==u&&console.error(`mattebox-player: the Cast context already uses receiver ${u}`);return n}function x(e,t,n){let r=e.SessionState;if(n===r.SESSION_STARTED&&m!==null&&m.pending)g=h,m.begin(t);else if(n===r.SESSION_RESUMED){var i;let e=(i=t.getCurrentSession())==null||(i=i.getMediaSession())==null||(i=i.media)==null?void 0:i.contentId,n=[...C].find(t=>t.plays(e));n!==void 0&&m===null&&(m=n,n.adopt(t))}else if(n===r.SESSION_ENDED||n===r.SESSION_START_FAILED){let e=m;m=null,e==null||e.end(n===r.SESSION_ENDED)}v()}let S=/* @__PURE__ */ new WeakMap,C=/* @__PURE__ */ new Set;var w=class{constructor(e){this.player=e,this.target=null,this.ctx=null,this.fw=null,this.pending=!1,this.casting=!1,this.handoff=null,this.listening=null}connect(e,t){C.add(this),y(t).then(t=>{t!==null&&(this.fw=t,this.ctx=b(t,e),v())})}disconnect(){C.delete(this)}state(){let e=this.ctx,t=this.fw;if(e===null||t===null)return`unavailable`;if(this.casting)return`casting`;let n=e.getCastState();return n===t.CastState.NO_DEVICES_AVAILABLE?`unavailable`:n===t.CastState.CONNECTING||this.pending?`connecting`:`idle`}device(){var e,t;return this.casting?(e=(t=this.ctx)==null||(t=t.getCurrentSession())==null?void 0:t.getCastDevice().friendlyName)==null?null:e:null}remote(){return g}start(e){let t=this.ctx;t===null||this.casting||(m!==null&&m!==this?t.endCurrentSession(!0):(this.target=e,this.pending=!0,m=this,v(),t.requestSession().catch(()=>{m===this&&(m=null),this.pending=!1,v()})))}stop(){var e;this.casting&&((e=this.ctx)==null||e.endCurrentSession(!0))}playPause(){this.casting&&(f==null||f.playOrPause())}seek(e){this.casting&&d!==null&&(d.currentTime=e,f==null||f.seek())}watch(e){return p.add(e),()=>{p.delete(e)}}plays(e){var t;return e!==void 0&&((t=this.player.player)==null||(t=t.session)==null?void 0:t.source.url)===e}begin(e){var t,n,r,i;this.pending=!1;let a=(t=(n=this.player.player)==null?void 0:n.session)==null?null:t,o=this.player.video,s=o.currentTime,c=!o.paused;if(this.freeze(),a===null)return;let l=this.request(a.source,s,c);if(l===null)return;this.listen(e.getCurrentSession());let u=new CustomEvent(`castload`,{detail:l,bubbles:!0,composed:!0,cancelable:!0});((r=this.target)==null?void 0:r.dispatchEvent(u))!==!1&&((i=e.getCurrentSession())==null||i.loadMedia(l).catch(()=>{}))}adopt(e){this.freeze(),this.listen(e.getCurrentSession())}listen(e){if(this.unlisten(),e===null)return;let t=(t,n)=>{let r;try{r=JSON.parse(n)}catch(e){return}if(r.type!==`unauthorized`)return;let i=r.id,a=!1,s={keySystem:typeof r.keySystem==`string`?r.keySystem:``,status:typeof r.status==`number`?r.status:0,reply(t){a||(a=!0,Promise.resolve(t).then(t=>e.sendMessage(c,o({type:`license`,id:i},t))).catch(()=>{}))}};this.player.dispatchEvent(new CustomEvent(`castunauthorized`,{detail:s,bubbles:!0}))};e.addMessageListener(c,t),this.listening={session:e,fn:t}}unlisten(){let e=this.listening;this.listening=null,e==null||e.session.removeMessageListener(`urn:x-cast:ch.mattebox.license`,e.fn)}freeze(){let e=this.player.engine;this.handoff={live:s(e)},this.player.video.pause(),e==null||e.suspend(),this.casting=!0,this.player.toggleAttribute(`casting`,!0),v()}end(e){if(this.pending=!1,this.unlisten(),!this.casting)return;this.casting=!1;let t=this.handoff;this.handoff=null;let n=this.player.video,r=this.player.engine;r==null||r.resume(),this.player.removeAttribute(`casting`),e&&g.loaded&&((t==null?void 0:t.live)!==!0&&Number.isFinite(g.time)&&(n.currentTime=g.time),g.paused||n.play().catch(()=>void 0))}request(e,t,n){var r,i;let a=(r=_().chrome)==null||(r=r.cast)==null?void 0:r.media;if(a===void 0)return null;let c=this.player.engine,l=(i=e.type)==null?``:i,u=new a.MediaInfo(e.url,l);if(u.streamType=s(c)?a.StreamType.LIVE:a.StreamType.BUFFERED,/mpegurl/i.test(l)){let e=T(c);u.hlsSegmentFormat=e?`ts`:`fmp4`,u.hlsVideoSegmentFormat=e?`mpeg2_ts`:`fmp4`}let d=[];for(let e of this.player.video.querySelectorAll(`track[src]`)){let t=e;if(t.kind!==`subtitles`&&t.kind!==`captions`)continue;let n=new a.Track(d.length+1,a.TrackType.TEXT);n.trackContentId=t.src,n.trackContentType=`text/vtt`,n.subtype=t.kind===`captions`?a.TextTrackType.CAPTIONS:a.TextTrackType.SUBTITLES,n.name=t.label,n.language=t.srclang,d.push(n)}u.tracks=d.length>0?d:null;let f=new a.LoadRequest(u);f.currentTime=t,f.autoplay=n;let p=e.drm;return p!==void 0&&(f.customData={mattebox:o(o(o({},p.licenseUrl===void 0?{}:{licenseUrl:p.licenseUrl}),p.licenseUrls===void 0?{}:{licenseUrls:p.licenseUrls}),p.certificateUrl===void 0?{}:{certificateUrl:p.certificateUrl})}),f}};function T(e){let t=e==null?void 0:e.stats.snapshot().presentation;if(t==null)return!1;for(let e of t.periods)for(let t of e.tracks)for(let e of t.renditions)if(/mp2t/i.test(e.mimeType))return!0;return!1}function E(e){let t=S.get(e);return t===void 0&&(t=new w(e),S.set(e,t)),t}function D(e){let t=e.parentNode;return t===null?e instanceof ShadowRoot?e.host:null:t}function O(e){let t=e;for(;t!==null;){if(t instanceof HTMLElement&&t.localName===`mattebox-player`)return t;t=D(t)}return null}var k=class extends HTMLElement{constructor(){super(),this.player=null,this.offs=[],this.epoch=0}connectedCallback(){let e=O(this);if(e===null)return;this.epoch+=1;let t=this.epoch,n=()=>{t===this.epoch&&this.isConnected&&(customElements.upgrade(e),`video`in e&&(this.player=e,this.attach(this.player)))};`video`in e?n():customElements.whenDefined(`mattebox-player`).then(n)}disconnectedCallback(){this.epoch+=1;for(let e of this.offs)e();this.offs=[];let e=this.player;e!==null&&(this.player=null,this.detach(e))}attributeChangedCallback(){this.player!==null&&this.render()}listen(e,t,n){for(let r of t)e.addEventListener(r,n);this.offs.push(()=>{for(let r of t)e.removeEventListener(r,n)})}keep(e){this.offs.push(e)}follow(e,t){let n,r=()=>{n==null||n(),n=t(e.engine)};this.listen(e,[`sourcechange`],r),this.offs.push(()=>{n==null||n(),n=void 0}),r()}observe(e,t,n,r=!1){let i=new MutationObserver(n);i.observe(e,{attributes:!0,attributeFilter:[...t],subtree:r}),this.offs.push(()=>{i.disconnect()})}detach(e){}render(){}};let A={play:`M9 5L26 16L9 27z`,pause:`M8 6h5.5v20h-5.5zM18.5 6h5.5v20h-5.5z`,cast:`M4 6H28V26H20V23.5H25.5V8.5H6.5V11H4zM4 23h3v3h-3zM4 17.5A8.5 8.5 0 0 1 12.5 26L10 26A6 6 0 0 0 4 20zM4 12A14 14 0 0 1 18 26L15.5 26A11.5 11.5 0 0 0 4 14.5z`,"cast-active":`M4 6H28V26H20A16 16 0 0 0 4 10zM4 23h3v3h-3zM4 17.5A8.5 8.5 0 0 1 12.5 26L10 26A6 6 0 0 0 4 20zM4 12A14 14 0 0 1 18 26L15.5 26A11.5 11.5 0 0 0 4 14.5z`},j=`http://www.w3.org/2000/svg`;function M(e){let t=document.createElementNS(j,`svg`);t.setAttribute(`viewBox`,`0 0 32 32`),t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`part`,`icon`);let n=document.createElementNS(j,`path`);return n.setAttribute(`fill-rule`,`evenodd`),n.setAttribute(`d`,A[e]),t.append(n),t}function N(e){let t=document.createElement(`style`);return t.textContent=e,t}function P(e,t){let n={};for(let r of e){let e=document.createElement(`slot`);e.name=`icon-${r}`,e.append(t(r)),e.hidden=!0,n[r]=e}return n}function F(e,t){for(let n of Object.keys(e))e[n].hidden=n!==t}function I(e,t,n){let r=document.createElement(e);return r.setAttribute(`part`,t),n!==void 0&&(r.textContent=n),r}function L(e,t){return e.replace(/\{(\w+)\}/g,(e,n)=>{let r=t[n];return r===void 0?e:String(r)})}function R(e){return e<10?`0${e}`:`${e}`}function z(e){let t=Number.isFinite(e)&&e>0?Math.floor(e):0,n=Math.floor(t/3600),r=Math.floor(t%3600/60),i=t%60;return n>0?`${n}:${R(r)}:${R(i)}`:`${r}:${R(i)}`}function B(e,t){return Number.isFinite(t)?`${z(e)} of ${z(t)}`:z(e)}let V=[`default`,`active`];var H=class extends k{static get observedAttributes(){return[`label-start`,`label-stop`]}constructor(){super(),this.api=null;let e=this.attachShadow({mode:`open`});this.button=document.createElement(`button`),this.button.type=`button`,this.button.setAttribute(`part`,`button`),this.slots=P(V,e=>M(e===`active`?`cast-active`:`cast`));for(let e of V)this.button.append(this.slots[e]);this.button.addEventListener(`click`,()=>{let e=this.api;e!==null&&(e.state()===`casting`?e.stop():e.start(this))}),e.append(N(`:host{display:inline-flex}:host([hidden]){display:none}[part~=button]{width:2.5em;height:2.5em;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;opacity:.9;background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}[part~=button]:hover{opacity:1}[part~=button]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=button]:focus:not(:focus-visible){outline:none}[part~=icon],::slotted(*){fill:currentColor;width:1.75em;height:1.75em}slot[hidden]{display:none}`),this.button)}attach(e){let t=E(e);this.api=t,t.connect(this.getAttribute(`receiver`),this.getAttribute(`sdk`)),this.keep(t.watch(()=>{this.render()})),this.follow(e,()=>{this.render()})}detach(){var e;(e=this.api)==null||e.disconnect(),this.api=null}render(){var e,t,n;let r=this.player,i=this.api;if(r===null||i===null)return;let a=i.state(),o=a===`casting`;this.hidden=a===`unavailable`,this.button.disabled=!o&&((e=r.player)==null?void 0:e.session)==null,this.button.toggleAttribute(`aria-busy`,a===`connecting`),F(this.slots,o?`active`:`default`),this.button.setAttribute(`aria-label`,o?(t=this.getAttribute(`label-stop`))==null?`Stop casting`:t:(n=this.getAttribute(`label-start`))==null?`Cast`:n)}};function U(e,t,n){return Math.min(n,Math.max(t,e))}function W(e){let{onInput:t}=e,n=I(`div`,`slider`);n.setAttribute(`role`,`slider`),n.tabIndex=0;let r=I(`div`,`rail`),i=I(`div`,`track`),a=I(`div`,`fill`),o=I(`div`,`thumb`);i.append(a),r.append(i,o),n.append(r);let s=0,c=1,l=0,u=!1;function d(){let e=`${(c>s?(l-s)/(c-s):0)*100}%`;a.style.width=e,o.style.left=e}function f(e){let t=r.getBoundingClientRect();return t.width===0?s:s+U((e-t.left)/t.width,0,1)*(c-s)}function p(t){u=t,e.onDrag(t)}function m(e){if(e.button===0){e.preventDefault(),p(!0);try{n.setPointerCapture(e.pointerId)}catch(e){}t(f(e.clientX))}}function h(e){u&&(e.buttons===0?g(e):t(f(e.clientX)))}function g(e){u&&(p(!1),t(f(e.clientX)))}function _(){u&&p(!1)}function v(n){let r;switch(n.key){case`ArrowRight`:case`ArrowUp`:r=l+e.step();break;case`ArrowLeft`:case`ArrowDown`:r=l-e.step();break;case`PageUp`:r=l+e.page();break;case`PageDown`:r=l-e.page();break;case`Home`:r=s;break;case`End`:r=c;break;default:return}n.preventDefault(),t(U(r,s,c))}return n.addEventListener(`pointerdown`,m),n.addEventListener(`pointermove`,h),n.addEventListener(`pointerup`,g),n.addEventListener(`pointercancel`,_),n.addEventListener(`lostpointercapture`,_),n.addEventListener(`keydown`,v),{root:n,track:i,rail:r,label(e){n.setAttribute(`aria-label`,e)},dragging(){return u},range(e,t){s=e,c=t,n.setAttribute(`aria-valuemin`,String(e)),n.setAttribute(`aria-valuemax`,String(t)),d()},set(e,t){l=U(e,s,c),n.setAttribute(`aria-valuenow`,String(l)),n.setAttribute(`aria-valuetext`,t),d()},dispose(){n.removeEventListener(`pointerdown`,m),n.removeEventListener(`pointermove`,h),n.removeEventListener(`pointerup`,g),n.removeEventListener(`pointercancel`,_),n.removeEventListener(`lostpointercapture`,_),n.removeEventListener(`keydown`,v)}}}let G=[`play`,`pause`];var K=class extends k{static get observedAttributes(){return[`label`,`label-stop`,`label-play`,`label-pause`,`label-seek`]}constructor(){super(),this.api=null,this.held=null;let e=this.attachShadow({mode:`open`}),t=I(`div`,`box`);this.title_=I(`div`,`title`),this.play=document.createElement(`button`),this.play.type=`button`,this.play.setAttribute(`part`,`button play`),this.slots=P(G,M);for(let e of G)this.play.append(this.slots[e]);this.play.addEventListener(`click`,()=>{var e;(e=this.api)==null||e.playPause()}),this.seek=W({step:()=>5,page:()=>30,onInput:e=>{var t;this.seek.dragging()?(this.held=e,this.paint()):(this.held=null,(t=this.api)==null||t.seek(e))},onDrag:e=>{this.toggleAttribute(`dragging`,e),e||(this.held=null)}}),this.time=I(`span`,`time`),this.row=I(`div`,`row`),this.row.append(this.play,this.seek.root,this.time),this.stop=I(`button`,`stop`),this.stop.type=`button`,this.stop.addEventListener(`click`,()=>{var e;(e=this.api)==null||e.stop()}),t.append(this.title_,this.row,this.stop),e.append(N(`:host{display:inline-flex}:host([hidden]){display:none}[part~=button]{width:2.5em;height:2.5em;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;opacity:.9;background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}[part~=button]:hover{opacity:1}[part~=button]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=button]:focus:not(:focus-visible){outline:none}[part~=icon],::slotted(*){fill:currentColor;width:1.75em;height:1.75em}slot[hidden]{display:none}:host{display:block}:host([hidden]){display:none}[part~=slider]{border-radius:var(--mbx-radius);cursor:pointer;touch-action:none;height:2.6667em;position:relative}[part~=slider]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=slider]:focus:not(:focus-visible){outline:none}[part~=rail]{position:absolute;top:0;bottom:0;left:.5333em;right:.5333em}[part~=track]{background:#ffffff59;border-radius:2px;height:.2667em;position:absolute;top:50%;left:0;right:0;overflow:hidden;transform:translateY(-50%)}[part~=fill]{background:var(--mbx-accent);position:absolute;top:0;bottom:0;left:0}[part~=thumb]{background:var(--mbx-text);pointer-events:none;border-radius:50%;width:.8em;height:.8em;margin:-.4em 0 0 -.4em;position:absolute;top:50%}:host{color:var(--mbx-text);font:400 .9375em / 1.4 var(--mbx-font);text-align:center;background:#000000d9;justify-content:center;align-items:center;padding:1.0667em;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}:host([hidden]){display:none}[part~=box]{flex-direction:column;align-items:center;width:100%;max-width:28em;display:flex}[part~=box]>:not([hidden])~:not([hidden]){margin-top:.8em}[part~=title]{font-size:1.2em;font-weight:600}[part~=row]{justify-content:center;align-items:center;width:100%;display:flex}[part~=row]>:not([hidden])~:not([hidden]){margin-left:.8em}[part~=slider]{flex:1}[part~=time]{font-variant-numeric:tabular-nums;color:var(--mbx-muted);font-size:.8667em}[part~=stop]{height:2.4em;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;background:0 0;border:1px solid;padding:0 1.0667em;font-weight:600}[part~=stop]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=stop]:focus:not(:focus-visible){outline:none}[hidden]{display:none}`),t)}connectedCallback(){this.player===null&&(this.hidden=!0),super.connectedCallback()}attach(e){let t=E(e);this.api=t,this.keep(t.watch(()=>{this.render()})),this.render()}detach(){this.api=null,this.hidden=!0}paint(){var e;let t=this.api;if(t===null)return;let n=t.remote(),r=n.loaded&&Number.isFinite(n.duration);if(this.seek.root.hidden=!r,this.time.hidden=!r,!r)return;let i=(e=this.held)==null?n.time:e;this.seek.range(0,n.duration),this.seek.set(i,B(i,n.duration)),this.time.textContent=`${z(i)} / ${z(n.duration)}`}render(){var e,t,n,r,i;let a=this.api;if(a===null)return;let o=a.remote(),s=o.loaded&&!o.paused?`pause`:`play`;F(this.slots,s),this.play.setAttribute(`aria-label`,(e=this.getAttribute(`label-${s}`))==null?s===`play`?`Play`:`Pause`:e),this.seek.label((t=this.getAttribute(`label-seek`))==null?`Seek`:t),this.stop.textContent=(n=this.getAttribute(`label-stop`))==null?`Stop casting`:n;let c=a.state()===`casting`;this.hidden=!c,c&&(this.title_.textContent=L((r=this.getAttribute(`label`))==null?`Casting to {device}`:r,{device:(i=a.device())==null?``:i}),this.play.disabled=!o.loaded,this.paint())}};let q=`mbx-cast-button`,J=`mbx-cast-screen`;return customElements.get(`mbx-cast-button`)===void 0&&customElements.define(q,H),customElements.get(`mbx-cast-screen`)===void 0&&customElements.define(J,K),e.CAST_BUTTON=q,e.CAST_SCREEN=J,e.LICENSE_NAMESPACE=c,e.MbxCastButton=H,e.MbxCastScreen=K,e})({});
+var matteboxPlayerCast=(function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function t(e){"@babel/helpers - typeof";return t=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},t(e)}function n(e,n){if(t(e)!=`object`||!e)return e;var r=e[Symbol.toPrimitive];if(r!==void 0){var i=r.call(e,n||`default`);if(t(i)!=`object`)return i;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(n===`string`?String:Number)(e)}function r(e){var r=n(e,`string`);return t(r)==`symbol`?r:r+``}function i(e,t,n){return(t=r(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=arguments[t]==null?{}:arguments[t];t%2?a(Object(n),!0).forEach(function(t){i(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function s(e){let t=e==null?void 0:e.live;return t!==void 0&&t.edge!==null}let c=`urn:x-cast:ch.mattebox.license`,l=null,u=null,d=null,f=null,p=/* @__PURE__ */ new Set,m=null,h={loaded:!1,paused:!0,time:0,duration:NaN},g=h;function _(){return globalThis}function v(){for(let e of[...p])e()}function y(e){var t;if(l!==null)return l;let n=_();return((t=n.cast)==null?void 0:t.framework)===void 0?`chrome`in n?(l=new Promise(t=>{let r=n.__onGCastApiAvailable;if(n.__onGCastApiAvailable=e=>{var n,i;r==null||r(e),t(e?(n=(i=_().cast)==null?void 0:i.framework)==null?null:n:null)},e===`none`)return;let i=document.createElement(`script`);i.src=`https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1`,i.async=!0,i.addEventListener(`error`,()=>t(null)),document.head.append(i)}),l):(l=Promise.resolve(null),l):(l=Promise.resolve(n.cast.framework),l)}function b(e,t){let n=e.CastContext.getInstance(),r=t==null?`CC1AD845`:t;if(u===null){var i,a;let t=(i=(a=_().chrome)==null||(a=a.cast)==null?void 0:a.AutoJoinPolicy.ORIGIN_SCOPED)==null?`origin_scoped`:i;n.setOptions({receiverApplicationId:r,autoJoinPolicy:t}),u=r,n.addEventListener(e.CastContextEventType.CAST_STATE_CHANGED,v),n.addEventListener(e.CastContextEventType.SESSION_STATE_CHANGED,t=>{var r;x(e,n,(r=t.sessionState)==null?``:r)}),d=new e.RemotePlayer,f=new e.RemotePlayerController(d),f.addEventListener(e.RemotePlayerEventType.ANY_CHANGE,()=>{let e=d;(e==null?void 0:e.isConnected)===!0&&e.isMediaLoaded&&(g={loaded:!0,paused:e.isPaused,time:e.currentTime,duration:e.duration>0?e.duration:1/0}),v()})}else t!==null&&t!==u&&console.error(`mattebox-player: the Cast context already uses receiver ${u}`);return n}function x(e,t,n){let r=e.SessionState;if(n===r.SESSION_STARTED&&m!==null&&m.pending)g=h,m.begin(t);else if(n===r.SESSION_RESUMED){var i;let e=(i=t.getCurrentSession())==null||(i=i.getMediaSession())==null||(i=i.media)==null?void 0:i.contentId,n=[...C].find(t=>t.plays(e));n!==void 0&&m===null&&(m=n,n.adopt(t))}else if(n===r.SESSION_ENDED||n===r.SESSION_START_FAILED){let e=m;m=null,e==null||e.end(n===r.SESSION_ENDED)}v()}let S=/* @__PURE__ */ new WeakMap,C=/* @__PURE__ */ new Set;var w=class{constructor(e){this.player=e,this.target=null,this.ctx=null,this.fw=null,this.pending=!1,this.casting=!1,this.handoff=null,this.listening=null}connect(e,t){C.add(this),y(t).then(t=>{t!==null&&(this.fw=t,this.ctx=b(t,e),v())})}disconnect(){C.delete(this)}state(){let e=this.ctx,t=this.fw;if(e===null||t===null)return`unavailable`;if(this.casting)return`casting`;let n=e.getCastState();return n===t.CastState.NO_DEVICES_AVAILABLE?`unavailable`:n===t.CastState.CONNECTING||this.pending?`connecting`:`idle`}device(){var e,t;return this.casting?(e=(t=this.ctx)==null||(t=t.getCurrentSession())==null?void 0:t.getCastDevice().friendlyName)==null?null:e:null}remote(){return g}start(e){let t=this.ctx;t===null||this.casting||(m!==null&&m!==this?t.endCurrentSession(!0):(this.target=e,this.pending=!0,m=this,v(),t.requestSession().catch(()=>{m===this&&(m=null),this.pending=!1,v()})))}stop(){var e;this.casting&&((e=this.ctx)==null||e.endCurrentSession(!0))}playPause(){this.casting&&(f==null||f.playOrPause())}seek(e){this.casting&&d!==null&&(d.currentTime=e,f==null||f.seek())}watch(e){return p.add(e),()=>{p.delete(e)}}plays(e){var t;return e!==void 0&&((t=this.player.player)==null||(t=t.session)==null?void 0:t.source.url)===e}begin(e){var t,n,r,i;this.pending=!1;let a=(t=(n=this.player.player)==null?void 0:n.session)==null?null:t,o=this.player.video,s=o.currentTime,c=!o.paused;if(this.freeze(),a===null)return;let l=this.request(a.source,s,c);if(l===null)return;this.listen(e.getCurrentSession());let u=new CustomEvent(`castload`,{detail:l,bubbles:!0,composed:!0,cancelable:!0});((r=this.target)==null?void 0:r.dispatchEvent(u))!==!1&&((i=e.getCurrentSession())==null||i.loadMedia(l).catch(()=>{}))}adopt(e){this.freeze(),this.listen(e.getCurrentSession())}listen(e){if(this.unlisten(),e===null)return;let t=(t,n)=>{let r;try{r=JSON.parse(n)}catch(e){return}if(r.type!==`unauthorized`)return;let i=r.id,a=!1,s={keySystem:typeof r.keySystem==`string`?r.keySystem:``,status:typeof r.status==`number`?r.status:0,reply(t){a||(a=!0,Promise.resolve(t).then(t=>e.sendMessage(c,o({type:`license`,id:i},t))).catch(()=>{}))}};this.player.dispatchEvent(new CustomEvent(`castunauthorized`,{detail:s,bubbles:!0}))};e.addMessageListener(c,t),this.listening={session:e,fn:t}}unlisten(){let e=this.listening;this.listening=null,e==null||e.session.removeMessageListener(`urn:x-cast:ch.mattebox.license`,e.fn)}freeze(){let e=this.player.engine;this.handoff={live:s(e)},this.player.video.pause(),e==null||e.suspend(),this.casting=!0,this.player.toggleAttribute(`casting`,!0),v()}end(e){if(this.pending=!1,this.unlisten(),!this.casting)return;this.casting=!1;let t=this.handoff;this.handoff=null;let n=this.player.video,r=this.player.engine;r==null||r.resume(),this.player.removeAttribute(`casting`),e&&g.loaded&&((t==null?void 0:t.live)!==!0&&Number.isFinite(g.time)&&(n.currentTime=g.time),g.paused||n.play().catch(()=>void 0))}request(e,t,n){var r,i;let a=(r=_().chrome)==null||(r=r.cast)==null?void 0:r.media;if(a===void 0)return null;let c=this.player.engine,l=(i=e.type)==null?``:i,u=new a.MediaInfo(e.url,l);if(u.streamType=s(c)?a.StreamType.LIVE:a.StreamType.BUFFERED,/mpegurl/i.test(l)){let e=T(c);u.hlsSegmentFormat=e?`ts`:`fmp4`,u.hlsVideoSegmentFormat=e?`mpeg2_ts`:`fmp4`}let d=[];for(let e of this.player.video.querySelectorAll(`track[src]`)){let t=e;if(t.kind!==`subtitles`&&t.kind!==`captions`)continue;let n=new a.Track(d.length+1,a.TrackType.TEXT);n.trackContentId=t.src,n.trackContentType=`text/vtt`,n.subtype=t.kind===`captions`?a.TextTrackType.CAPTIONS:a.TextTrackType.SUBTITLES,n.name=t.label,n.language=t.srclang,d.push(n)}u.tracks=d.length>0?d:null;let f=new a.LoadRequest(u);f.currentTime=t,f.autoplay=n;let p=e.drm;return p!==void 0&&(f.customData={mattebox:o(o(o({},p.licenseUrl===void 0?{}:{licenseUrl:p.licenseUrl}),p.licenseUrls===void 0?{}:{licenseUrls:p.licenseUrls}),p.certificateUrl===void 0?{}:{certificateUrl:p.certificateUrl})}),f}};function T(e){let t=e==null?void 0:e.stats.snapshot().presentation;if(t==null)return!1;for(let e of t.periods)for(let t of e.tracks)for(let e of t.renditions)if(/mp2t/i.test(e.mimeType))return!0;return!1}function E(e){let t=S.get(e);return t===void 0&&(t=new w(e),S.set(e,t)),t}function D(e){let t=e.parentNode;return t===null?e instanceof ShadowRoot?e.host:null:t}function O(e){let t=e;for(;t!==null;){if(t instanceof HTMLElement&&t.localName===`mattebox-player`)return t;t=D(t)}return null}var k=class extends HTMLElement{constructor(){super(),this.player=null,this.offs=[],this.epoch=0}connectedCallback(){let e=O(this);if(e===null)return;this.epoch+=1;let t=this.epoch,n=()=>{t===this.epoch&&this.isConnected&&(customElements.upgrade(e),`video`in e&&(this.player=e,this.listen(e,[`localechange`],()=>{this.render()}),this.attach(this.player)))};`video`in e?n():customElements.whenDefined(`mattebox-player`).then(n)}disconnectedCallback(){this.epoch+=1;for(let e of this.offs)e();this.offs=[];let e=this.player;e!==null&&(this.player=null,this.detach(e))}attributeChangedCallback(){this.player!==null&&this.render()}word(e,t,n){var r,i,a;return(r=(i=this.getAttribute(e))==null?(a=this.player)==null?void 0:a.message(t):i)==null?n:r}listen(e,t,n){for(let r of t)e.addEventListener(r,n);this.offs.push(()=>{for(let r of t)e.removeEventListener(r,n)})}keep(e){this.offs.push(e)}follow(e,t){let n,r=()=>{n==null||n(),n=t(e.engine)};this.listen(e,[`sourcechange`],r),this.offs.push(()=>{n==null||n(),n=void 0}),r()}observe(e,t,n,r=!1){let i=new MutationObserver(n);i.observe(e,{attributes:!0,attributeFilter:[...t],subtree:r}),this.offs.push(()=>{i.disconnect()})}detach(e){}render(){}};let A={play:`M9 5L26 16L9 27z`,pause:`M8 6h5.5v20h-5.5zM18.5 6h5.5v20h-5.5z`,cast:`M4 6H28V26H20V23.5H25.5V8.5H6.5V11H4zM4 23h3v3h-3zM4 17.5A8.5 8.5 0 0 1 12.5 26L10 26A6 6 0 0 0 4 20zM4 12A14 14 0 0 1 18 26L15.5 26A11.5 11.5 0 0 0 4 14.5z`,"cast-active":`M4 6H28V26H20A16 16 0 0 0 4 10zM4 23h3v3h-3zM4 17.5A8.5 8.5 0 0 1 12.5 26L10 26A6 6 0 0 0 4 20zM4 12A14 14 0 0 1 18 26L15.5 26A11.5 11.5 0 0 0 4 14.5z`},j=`http://www.w3.org/2000/svg`;function M(e){let t=document.createElementNS(j,`svg`);t.setAttribute(`viewBox`,`0 0 32 32`),t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`part`,`icon`);let n=document.createElementNS(j,`path`);return n.setAttribute(`fill-rule`,`evenodd`),n.setAttribute(`d`,A[e]),t.append(n),t}function N(e){let t=document.createElement(`style`);return t.textContent=e,t}function P(e,t){let n={};for(let r of e){let e=document.createElement(`slot`);e.name=`icon-${r}`,e.append(t(r)),e.hidden=!0,n[r]=e}return n}function F(e,t){for(let n of Object.keys(e))e[n].hidden=n!==t}function I(e,t,n){let r=document.createElement(e);return r.setAttribute(`part`,t),n!==void 0&&(r.textContent=n),r}function L(e,t){return e.replace(/\{(\w+)\}/g,(e,n)=>{let r=t[n];return r===void 0?e:String(r)})}function R(e){return e<10?`0${e}`:`${e}`}function z(e){let t=Number.isFinite(e)&&e>0?Math.floor(e):0,n=Math.floor(t/3600),r=Math.floor(t%3600/60),i=t%60;return n>0?`${n}:${R(r)}:${R(i)}`:`${r}:${R(i)}`}function B(e,t){return Number.isFinite(t)?`${z(e)} of ${z(t)}`:z(e)}let V=[`default`,`active`];var H=class extends k{static get observedAttributes(){return[`label-start`,`label-stop`]}constructor(){super(),this.api=null;let e=this.attachShadow({mode:`open`});this.button=document.createElement(`button`),this.button.type=`button`,this.button.setAttribute(`part`,`button`),this.slots=P(V,e=>M(e===`active`?`cast-active`:`cast`));for(let e of V)this.button.append(this.slots[e]);this.button.addEventListener(`click`,()=>{let e=this.api;e!==null&&(e.state()===`casting`?e.stop():e.start(this))}),e.append(N(`:host{display:inline-flex}:host([hidden]){display:none}[part~=button]{width:2.5em;height:2.5em;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;opacity:.9;background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}[part~=button]:hover{opacity:1}[part~=button]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=button]:focus:not(:focus-visible){outline:none}[part~=icon],::slotted(*){fill:currentColor;width:1.75em;height:1.75em}slot[hidden]{display:none}`),this.button)}attach(e){let t=E(e);this.api=t,t.connect(this.getAttribute(`receiver`),this.getAttribute(`sdk`)),this.keep(t.watch(()=>{this.render()})),this.follow(e,()=>{this.render()})}detach(){var e;(e=this.api)==null||e.disconnect(),this.api=null}render(){var e;let t=this.player,n=this.api;if(t===null||n===null)return;let r=n.state(),i=r===`casting`;this.hidden=r===`unavailable`,this.button.disabled=!i&&((e=t.player)==null?void 0:e.session)==null,this.button.toggleAttribute(`aria-busy`,r===`connecting`),F(this.slots,i?`active`:`default`),this.button.setAttribute(`aria-label`,i?this.word(`label-stop`,`castStop`,`Stop casting`):this.word(`label-start`,`castStart`,`Cast`))}};function U(e,t,n){return Math.min(n,Math.max(t,e))}function W(e){let{onInput:t}=e,n=I(`div`,`slider`);n.setAttribute(`role`,`slider`),n.tabIndex=0;let r=I(`div`,`rail`),i=I(`div`,`track`),a=I(`div`,`fill`),o=I(`div`,`thumb`);i.append(a),r.append(i,o),n.append(r);let s=0,c=1,l=0,u=!1;function d(){let e=`${(c>s?(l-s)/(c-s):0)*100}%`;a.style.width=e,o.style.left=e}function f(e){let t=r.getBoundingClientRect();return t.width===0?s:s+U((e-t.left)/t.width,0,1)*(c-s)}function p(t){u=t,e.onDrag(t)}function m(e){if(e.button===0){e.preventDefault(),p(!0);try{n.setPointerCapture(e.pointerId)}catch(e){}t(f(e.clientX))}}function h(e){u&&(e.buttons===0?g(e):t(f(e.clientX)))}function g(e){u&&(p(!1),t(f(e.clientX)))}function _(){u&&p(!1)}function v(n){let r;switch(n.key){case`ArrowRight`:case`ArrowUp`:r=l+e.step();break;case`ArrowLeft`:case`ArrowDown`:r=l-e.step();break;case`PageUp`:r=l+e.page();break;case`PageDown`:r=l-e.page();break;case`Home`:r=s;break;case`End`:r=c;break;default:return}n.preventDefault(),t(U(r,s,c))}return n.addEventListener(`pointerdown`,m),n.addEventListener(`pointermove`,h),n.addEventListener(`pointerup`,g),n.addEventListener(`pointercancel`,_),n.addEventListener(`lostpointercapture`,_),n.addEventListener(`keydown`,v),{root:n,track:i,rail:r,label(e){n.setAttribute(`aria-label`,e)},dragging(){return u},range(e,t){s=e,c=t,n.setAttribute(`aria-valuemin`,String(e)),n.setAttribute(`aria-valuemax`,String(t)),d()},set(e,t){l=U(e,s,c),n.setAttribute(`aria-valuenow`,String(l)),n.setAttribute(`aria-valuetext`,t),d()},dispose(){n.removeEventListener(`pointerdown`,m),n.removeEventListener(`pointermove`,h),n.removeEventListener(`pointerup`,g),n.removeEventListener(`pointercancel`,_),n.removeEventListener(`lostpointercapture`,_),n.removeEventListener(`keydown`,v)}}}let G=[`play`,`pause`];var K=class extends k{static get observedAttributes(){return[`label`,`label-stop`,`label-play`,`label-pause`,`label-seek`]}constructor(){super(),this.api=null,this.held=null;let e=this.attachShadow({mode:`open`}),t=I(`div`,`box`);this.title_=I(`div`,`title`),this.play=document.createElement(`button`),this.play.type=`button`,this.play.setAttribute(`part`,`button play`),this.slots=P(G,M);for(let e of G)this.play.append(this.slots[e]);this.play.addEventListener(`click`,()=>{var e;(e=this.api)==null||e.playPause()}),this.seek=W({step:()=>5,page:()=>30,onInput:e=>{var t;this.seek.dragging()?(this.held=e,this.paint()):(this.held=null,(t=this.api)==null||t.seek(e))},onDrag:e=>{this.toggleAttribute(`dragging`,e),e||(this.held=null)}}),this.time=I(`span`,`time`),this.row=I(`div`,`row`),this.row.append(this.play,this.seek.root,this.time),this.stop=I(`button`,`stop`),this.stop.type=`button`,this.stop.addEventListener(`click`,()=>{var e;(e=this.api)==null||e.stop()}),t.append(this.title_,this.row,this.stop),e.append(N(`:host{display:inline-flex}:host([hidden]){display:none}[part~=button]{width:2.5em;height:2.5em;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;opacity:.9;background:0 0;border:0;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}[part~=button]:hover{opacity:1}[part~=button]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=button]:focus:not(:focus-visible){outline:none}[part~=icon],::slotted(*){fill:currentColor;width:1.75em;height:1.75em}slot[hidden]{display:none}:host{display:block}:host([hidden]){display:none}[part~=slider]{border-radius:var(--mbx-radius);cursor:pointer;touch-action:none;height:2.6667em;position:relative}[part~=slider]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=slider]:focus:not(:focus-visible){outline:none}[part~=rail]{position:absolute;top:0;bottom:0;left:.5333em;right:.5333em}[part~=track]{background:#ffffff59;border-radius:2px;height:.2667em;position:absolute;top:50%;left:0;right:0;overflow:hidden;transform:translateY(-50%)}[part~=fill]{background:var(--mbx-accent);position:absolute;top:0;bottom:0;left:0}[part~=thumb]{background:var(--mbx-text);pointer-events:none;border-radius:50%;width:.8em;height:.8em;margin:-.4em 0 0 -.4em;position:absolute;top:50%}:host{color:var(--mbx-text);font:400 .9375em / 1.4 var(--mbx-font);text-align:center;background:#000000d9;justify-content:center;align-items:center;padding:1.0667em;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}:host([hidden]){display:none}[part~=box]{flex-direction:column;align-items:center;width:100%;max-width:28em;display:flex}[part~=box]>:not([hidden])~:not([hidden]){margin-top:.8em}[part~=title]{font-size:1.2em;font-weight:600}[part~=row]{justify-content:center;align-items:center;width:100%;display:flex}[part~=row]>:not([hidden])~:not([hidden]){margin-left:.8em}[part~=slider]{flex:1}[part~=time]{font-variant-numeric:tabular-nums;color:var(--mbx-muted);font-size:.8667em}[part~=stop]{height:2.4em;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;background:0 0;border:1px solid;padding:0 1.0667em;font-weight:600}[part~=stop]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=stop]:focus:not(:focus-visible){outline:none}[hidden]{display:none}`),t)}connectedCallback(){this.player===null&&(this.hidden=!0),super.connectedCallback()}attach(e){let t=E(e);this.api=t,this.keep(t.watch(()=>{this.render()})),this.render()}detach(){this.api=null,this.hidden=!0}paint(){var e;let t=this.api;if(t===null)return;let n=t.remote(),r=n.loaded&&Number.isFinite(n.duration);if(this.seek.root.hidden=!r,this.time.hidden=!r,!r)return;let i=(e=this.held)==null?n.time:e;this.seek.range(0,n.duration),this.seek.set(i,B(i,n.duration)),this.time.textContent=`${z(i)} / ${z(n.duration)}`}render(){var e;let t=this.api;if(t===null)return;let n=t.remote(),r=n.loaded&&!n.paused?`pause`:`play`;F(this.slots,r),this.play.setAttribute(`aria-label`,r===`play`?this.word(`label-play`,`play`,`Play`):this.word(`label-pause`,`pause`,`Pause`)),this.seek.label(this.word(`label-seek`,`seek`,`Seek`)),this.stop.textContent=this.word(`label-stop`,`castStop`,`Stop casting`);let i=t.state()===`casting`;this.hidden=!i,i&&(this.title_.textContent=L(this.word(`label`,`castingTo`,`Casting to {device}`),{device:(e=t.device())==null?``:e}),this.play.disabled=!n.loaded,this.paint())}};let q=`mbx-cast-button`,J=`mbx-cast-screen`;return customElements.get(`mbx-cast-button`)===void 0&&customElements.define(q,H),customElements.get(`mbx-cast-screen`)===void 0&&customElements.define(J,K),e.CAST_BUTTON=q,e.CAST_SCREEN=J,e.LICENSE_NAMESPACE=c,e.MbxCastButton=H,e.MbxCastScreen=K,e})({});

package/dist/component.d.ts

@@ -15,6 +15,7 @@
  * emit check bans helpers. State is declared, then assigned in the
  * constructor.
  */
+import type { Messages } from '@mattebox/player';
 import type { Mattebox } from 'mattebox';
 import type { PlayerHost } from './host.js';
 export declare abstract class Component extends HTMLElement {
@@ -26,6 +27,11 @@ export declare abstract class Component extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
+    /**
+     * A word the element shows: its `attribute` when the page set one, else
+     * the player's language's `id`, else `english`.
+     */
+    protected word(attribute: string, id: keyof Messages, english: string): string;
     /** Adds `fn` for every name on `target`, to be removed on detach. */
     protected listen(target: EventTarget, names: readonly string[], fn: () => void): void;
     /** Keeps `off` to run on detach. */

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG5C,8BAAsB,SAAU,SAAQ,WAAW;IACjD,UAAkB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5C,QAAgB,IAAI,CAAoB;IACxC,yGAAyG;IACzG,QAAgB,KAAK,CAAS;;IAS9B,iBAAiB,IAAI,IAAI;IAiBzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,IAAI,IAAI;IAIhC,qEAAqE;IACrE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAOrF,oCAAoC;IACpC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,IAAI,GAAG,IAAI;IAIrC;;;;OAIG;IACH,SAAS,CAAC,MAAM,CACd,MAAM,EAAE,UAAU,EAClB,EAAE,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,GACxD,IAAI;IAcP,mGAAmG;IACnG,SAAS,CAAC,OAAO,CACf,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,EAAE,EAAE,MAAM,IAAI,EACd,OAAO,UAAQ,GACd,IAAI;IAQP,gFAAgF;IAChF,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAEnD,mFAAmF;IACnF,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,GAAG,IAAI;IAE3C,yFAAyF;IACzF,SAAS,CAAC,MAAM,IAAI,IAAI;CACzB"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAI5C,8BAAsB,SAAU,SAAQ,WAAW;IACjD,UAAkB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5C,QAAgB,IAAI,CAAoB;IACxC,yGAAyG;IACzG,QAAgB,KAAK,CAAS;;IAS9B,iBAAiB,IAAI,IAAI;IAoBzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,IAAI,IAAI;IAIhC;;;OAGG;IACH,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAI9E,qEAAqE;IACrE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,IAAI,GAAG,IAAI;IAOrF,oCAAoC;IACpC,SAAS,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,IAAI,GAAG,IAAI;IAIrC;;;;OAIG;IACH,SAAS,CAAC,MAAM,CACd,MAAM,EAAE,UAAU,EAClB,EAAE,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,GACxD,IAAI;IAcP,mGAAmG;IACnG,SAAS,CAAC,OAAO,CACf,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,SAAS,MAAM,EAAE,EACxB,EAAE,EAAE,MAAM,IAAI,EACd,OAAO,UAAQ,GACd,IAAI;IAQP,gFAAgF;IAChF,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAEnD,mFAAmF;IACnF,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,GAAG,IAAI;IAE3C,yFAAyF;IACzF,SAAS,CAAC,MAAM,IAAI,IAAI;CACzB"}

package/dist/component.js

@@ -1,5 +1,5 @@
 import { PLAYER, findPlayer } from "./host.js";
-//#region src/component.ts
+// src/component.ts
 var Component = class extends HTMLElement {
 	constructor() {
 		super();
@@ -17,6 +17,9 @@ var Component = class extends HTMLElement {
 			customElements.upgrade(found);
 			if (!("video" in found)) return;
 			this.player = found;
+			this.listen(found, ["localechange"], () => {
+				this.render();
+			});
 			this.attach(this.player);
 		};
 		if ("video" in found) attach();
@@ -34,6 +37,13 @@ var Component = class extends HTMLElement {
 	attributeChangedCallback() {
 		if (this.player !== null) this.render();
 	}
+	/**
+	* A word the element shows: its `attribute` when the page set one, else
+	* the player's language's `id`, else `english`.
+	*/
+	word(attribute, id, english) {
+		return this.getAttribute(attribute) ?? this.player?.message(id) ?? english;
+	}
 	/** Adds `fn` for every name on `target`, to be removed on detach. */
 	listen(target, names, fn) {
 		for (const name of names) target.addEventListener(name, fn);
@@ -80,7 +90,6 @@ var Component = class extends HTMLElement {
 	/** Draws the current state. Called on every observed attribute change while attached. */
 	render() {}
 };
-//#endregion
 export { Component };
 
 //# sourceMappingURL=component.js.map

package/dist/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","names":[],"sources":["../src/component.ts"],"sourcesContent":["/**\n * What the two elements share: finding their player, and letting go of it.\n * A copy of the player's own base, because the player exports no base\n * class: a control of the page's own implements the contract from outside\n * (player guide, chapter 03), and so does this package.\n *\n * A control attaches when it is connected inside a player, once the player\n * is defined and upgraded, and detaches when it is removed. Every listener\n * a control adds goes through `listen`, so detaching drops them all. A\n * control connected outside a player is inert. Moving one to another\n * player detaches and attaches again, so a framework that reorders\n * children is safe.\n *\n * No class fields: the ES2015 build would lower them into helpers, and the\n * emit check bans helpers. State is declared, then assigned in the\n * constructor.\n */\nimport type { Mattebox } from 'mattebox';\nimport type { PlayerHost } from './host.js';\nimport { findPlayer, PLAYER } from './host.js';\n\nexport abstract class Component extends HTMLElement {\n  declare protected player: PlayerHost | null;\n  declare private offs: Array<() => void>;\n  /** Bumped on every connect and disconnect, so a late upgrade attaches only to the current connection. */\n  declare private epoch: number;\n\n  constructor() {\n    super();\n    this.player = null;\n    this.offs = [];\n    this.epoch = 0;\n  }\n\n  connectedCallback(): void {\n    const found = findPlayer(this);\n    if (found === null) return;\n    this.epoch += 1;\n    const epoch = this.epoch;\n    const attach = (): void => {\n      if (epoch !== this.epoch || !this.isConnected) return;\n      // Defined, and this instance upgraded: `video` is on the prototype.\n      customElements.upgrade(found);\n      if (!('video' in found)) return;\n      this.player = found as PlayerHost;\n      this.attach(this.player);\n    };\n    if ('video' in found) attach();\n    else void customElements.whenDefined(PLAYER).then(attach);\n  }\n\n  disconnectedCallback(): void {\n    this.epoch += 1;\n    for (const off of this.offs) off();\n    this.offs = [];\n    const player = this.player;\n    if (player === null) return;\n    this.player = null;\n    this.detach(player);\n  }\n\n  attributeChangedCallback(): void {\n    if (this.player !== null) this.render();\n  }\n\n  /** Adds `fn` for every name on `target`, to be removed on detach. */\n  protected listen(target: EventTarget, names: readonly string[], fn: () => void): void {\n    for (const name of names) target.addEventListener(name, fn);\n    this.offs.push(() => {\n      for (const name of names) target.removeEventListener(name, fn);\n    });\n  }\n\n  /** Keeps `off` to run on detach. */\n  protected keep(off: () => void): void {\n    this.offs.push(off);\n  }\n\n  /**\n   * Runs `fn` over the current engine now and on every session change,\n   * running what the last call returned first, so a control's engine\n   * subscriptions live exactly as long as the session. Detach runs it too.\n   */\n  protected follow(\n    player: PlayerHost,\n    fn: (engine: Mattebox | null) => (() => void) | undefined,\n  ): void {\n    let off: (() => void) | undefined;\n    const run = (): void => {\n      off?.();\n      off = fn(player.engine);\n    };\n    this.listen(player, ['sourcechange'], run);\n    this.offs.push(() => {\n      off?.();\n      off = undefined;\n    });\n    run();\n  }\n\n  /** Runs `fn` when any of `names` changes on `target`, or under it with `subtree`, until detach. */\n  protected observe(\n    target: Element,\n    names: readonly string[],\n    fn: () => void,\n    subtree = false,\n  ): void {\n    const observer = new MutationObserver(fn);\n    observer.observe(target, { attributes: true, attributeFilter: [...names], subtree });\n    this.offs.push(() => {\n      observer.disconnect();\n    });\n  }\n\n  /** The control is connected inside an upgraded player. Subscribe and render. */\n  protected abstract attach(player: PlayerHost): void;\n\n  /** The control left its player. Listeners are already gone; undo anything else. */\n  protected detach(_player: PlayerHost): void {}\n\n  /** Draws the current state. Called on every observed attribute change while attached. */\n  protected render(): void {}\n}\n"],"mappings":";;AAqBA,IAAsB,YAAtB,cAAwC,YAAY;CAMlD,cAAc;EACZ,MAAM;EACN,KAAK,SAAS;EACd,KAAK,OAAO,CAAC;EACb,KAAK,QAAQ;CACf;CAEA,oBAA0B;EACxB,MAAM,QAAQ,WAAW,IAAI;EAC7B,IAAI,UAAU,MAAM;EACpB,KAAK,SAAS;EACd,MAAM,QAAQ,KAAK;EACnB,MAAM,eAAqB;GACzB,IAAI,UAAU,KAAK,SAAS,CAAC,KAAK,aAAa;GAE/C,eAAe,QAAQ,KAAK;GAC5B,IAAI,EAAE,WAAW,QAAQ;GACzB,KAAK,SAAS;GACd,KAAK,OAAO,KAAK,MAAM;EACzB;EACA,IAAI,WAAW,OAAO,OAAO;OACxB,eAAoB,YAAY,MAAM,CAAC,CAAC,KAAK,MAAM;CAC1D;CAEA,uBAA6B;EAC3B,KAAK,SAAS;EACd,KAAK,MAAM,OAAO,KAAK,MAAM,IAAI;EACjC,KAAK,OAAO,CAAC;EACb,MAAM,SAAS,KAAK;EACpB,IAAI,WAAW,MAAM;EACrB,KAAK,SAAS;EACd,KAAK,OAAO,MAAM;CACpB;CAEA,2BAAiC;EAC/B,IAAI,KAAK,WAAW,MAAM,KAAK,OAAO;CACxC;;CAGA,OAAiB,QAAqB,OAA0B,IAAsB;EACpF,KAAK,MAAM,QAAQ,OAAO,OAAO,iBAAiB,MAAM,EAAE;EAC1D,KAAK,KAAK,WAAW;GACnB,KAAK,MAAM,QAAQ,OAAO,OAAO,oBAAoB,MAAM,EAAE;EAC/D,CAAC;CACH;;CAGA,KAAe,KAAuB;EACpC,KAAK,KAAK,KAAK,GAAG;CACpB;;;;;;CAOA,OACE,QACA,IACM;EACN,IAAI;EACJ,MAAM,YAAkB;GACtB,MAAM;GACN,MAAM,GAAG,OAAO,MAAM;EACxB;EACA,KAAK,OAAO,QAAQ,CAAC,cAAc,GAAG,GAAG;EACzC,KAAK,KAAK,WAAW;GACnB,MAAM;GACN,MAAM,KAAA;EACR,CAAC;EACD,IAAI;CACN;;CAGA,QACE,QACA,OACA,IACA,UAAU,OACJ;EACN,MAAM,WAAW,IAAI,iBAAiB,EAAE;EACxC,SAAS,QAAQ,QAAQ;GAAE,YAAY;GAAM,iBAAiB,CAAC,GAAG,KAAK;GAAG;EAAQ,CAAC;EACnF,KAAK,KAAK,WAAW;GACnB,SAAS,WAAW;EACtB,CAAC;CACH;;CAMA,OAAiB,SAA2B,CAAC;;CAG7C,SAAyB,CAAC;AAC5B"}
+{"version":3,"file":"component.js","names":[],"sources":["../src/component.ts"],"sourcesContent":["/**\n * What the two elements share: finding their player, and letting go of it.\n * A copy of the player's own base, because the player exports no base\n * class: a control of the page's own implements the contract from outside\n * (player guide, chapter 03), and so does this package.\n *\n * A control attaches when it is connected inside a player, once the player\n * is defined and upgraded, and detaches when it is removed. Every listener\n * a control adds goes through `listen`, so detaching drops them all. A\n * control connected outside a player is inert. Moving one to another\n * player detaches and attaches again, so a framework that reorders\n * children is safe.\n *\n * No class fields: the ES2015 build would lower them into helpers, and the\n * emit check bans helpers. State is declared, then assigned in the\n * constructor.\n */\n\nimport type { Messages } from '@mattebox/player';\nimport type { Mattebox } from 'mattebox';\nimport type { PlayerHost } from './host.js';\nimport { findPlayer, PLAYER } from './host.js';\nimport type {} from './messages.js';\n\nexport abstract class Component extends HTMLElement {\n  declare protected player: PlayerHost | null;\n  declare private offs: Array<() => void>;\n  /** Bumped on every connect and disconnect, so a late upgrade attaches only to the current connection. */\n  declare private epoch: number;\n\n  constructor() {\n    super();\n    this.player = null;\n    this.offs = [];\n    this.epoch = 0;\n  }\n\n  connectedCallback(): void {\n    const found = findPlayer(this);\n    if (found === null) return;\n    this.epoch += 1;\n    const epoch = this.epoch;\n    const attach = (): void => {\n      if (epoch !== this.epoch || !this.isConnected) return;\n      // Defined, and this instance upgraded: `video` is on the prototype.\n      customElements.upgrade(found);\n      if (!('video' in found)) return;\n      this.player = found as PlayerHost;\n      this.listen(found, ['localechange'], () => {\n        this.render();\n      });\n      this.attach(this.player);\n    };\n    if ('video' in found) attach();\n    else void customElements.whenDefined(PLAYER).then(attach);\n  }\n\n  disconnectedCallback(): void {\n    this.epoch += 1;\n    for (const off of this.offs) off();\n    this.offs = [];\n    const player = this.player;\n    if (player === null) return;\n    this.player = null;\n    this.detach(player);\n  }\n\n  attributeChangedCallback(): void {\n    if (this.player !== null) this.render();\n  }\n\n  /**\n   * A word the element shows: its `attribute` when the page set one, else\n   * the player's language's `id`, else `english`.\n   */\n  protected word(attribute: string, id: keyof Messages, english: string): string {\n    return this.getAttribute(attribute) ?? this.player?.message(id) ?? english;\n  }\n\n  /** Adds `fn` for every name on `target`, to be removed on detach. */\n  protected listen(target: EventTarget, names: readonly string[], fn: () => void): void {\n    for (const name of names) target.addEventListener(name, fn);\n    this.offs.push(() => {\n      for (const name of names) target.removeEventListener(name, fn);\n    });\n  }\n\n  /** Keeps `off` to run on detach. */\n  protected keep(off: () => void): void {\n    this.offs.push(off);\n  }\n\n  /**\n   * Runs `fn` over the current engine now and on every session change,\n   * running what the last call returned first, so a control's engine\n   * subscriptions live exactly as long as the session. Detach runs it too.\n   */\n  protected follow(\n    player: PlayerHost,\n    fn: (engine: Mattebox | null) => (() => void) | undefined,\n  ): void {\n    let off: (() => void) | undefined;\n    const run = (): void => {\n      off?.();\n      off = fn(player.engine);\n    };\n    this.listen(player, ['sourcechange'], run);\n    this.offs.push(() => {\n      off?.();\n      off = undefined;\n    });\n    run();\n  }\n\n  /** Runs `fn` when any of `names` changes on `target`, or under it with `subtree`, until detach. */\n  protected observe(\n    target: Element,\n    names: readonly string[],\n    fn: () => void,\n    subtree = false,\n  ): void {\n    const observer = new MutationObserver(fn);\n    observer.observe(target, { attributes: true, attributeFilter: [...names], subtree });\n    this.offs.push(() => {\n      observer.disconnect();\n    });\n  }\n\n  /** The control is connected inside an upgraded player. Subscribe and render. */\n  protected abstract attach(player: PlayerHost): void;\n\n  /** The control left its player. Listeners are already gone; undo anything else. */\n  protected detach(_player: PlayerHost): void {}\n\n  /** Draws the current state. Called on every observed attribute change while attached. */\n  protected render(): void {}\n}\n"],"mappings":";;AAwBA,IAAsB,YAAtB,cAAwC,YAAY;CAMlD,cAAc;EACZ,MAAM;EACN,KAAK,SAAS;EACd,KAAK,OAAO,CAAC;EACb,KAAK,QAAQ;CACf;CAEA,oBAA0B;EACxB,MAAM,QAAQ,WAAW,IAAI;EAC7B,IAAI,UAAU,MAAM;EACpB,KAAK,SAAS;EACd,MAAM,QAAQ,KAAK;EACnB,MAAM,eAAqB;GACzB,IAAI,UAAU,KAAK,SAAS,CAAC,KAAK,aAAa;GAE/C,eAAe,QAAQ,KAAK;GAC5B,IAAI,EAAE,WAAW,QAAQ;GACzB,KAAK,SAAS;GACd,KAAK,OAAO,OAAO,CAAC,cAAc,SAAS;IACzC,KAAK,OAAO;GACd,CAAC;GACD,KAAK,OAAO,KAAK,MAAM;EACzB;EACA,IAAI,WAAW,OAAO,OAAO;OACxB,eAAoB,YAAY,MAAM,CAAC,CAAC,KAAK,MAAM;CAC1D;CAEA,uBAA6B;EAC3B,KAAK,SAAS;EACd,KAAK,MAAM,OAAO,KAAK,MAAM,IAAI;EACjC,KAAK,OAAO,CAAC;EACb,MAAM,SAAS,KAAK;EACpB,IAAI,WAAW,MAAM;EACrB,KAAK,SAAS;EACd,KAAK,OAAO,MAAM;CACpB;CAEA,2BAAiC;EAC/B,IAAI,KAAK,WAAW,MAAM,KAAK,OAAO;CACxC;;;;;CAMA,KAAe,WAAmB,IAAoB,SAAyB;EAC7E,OAAO,KAAK,aAAa,SAAS,KAAK,KAAK,QAAQ,QAAQ,EAAE,KAAK;CACrE;;CAGA,OAAiB,QAAqB,OAA0B,IAAsB;EACpF,KAAK,MAAM,QAAQ,OAAO,OAAO,iBAAiB,MAAM,EAAE;EAC1D,KAAK,KAAK,WAAW;GACnB,KAAK,MAAM,QAAQ,OAAO,OAAO,oBAAoB,MAAM,EAAE;EAC/D,CAAC;CACH;;CAGA,KAAe,KAAuB;EACpC,KAAK,KAAK,KAAK,GAAG;CACpB;;;;;;CAOA,OACE,QACA,IACM;EACN,IAAI;EACJ,MAAM,YAAkB;GACtB,MAAM;GACN,MAAM,GAAG,OAAO,MAAM;EACxB;EACA,KAAK,OAAO,QAAQ,CAAC,cAAc,GAAG,GAAG;EACzC,KAAK,KAAK,WAAW;GACnB,MAAM;GACN,MAAM,KAAA;EACR,CAAC;EACD,IAAI;CACN;;CAGA,QACE,QACA,OACA,IACA,UAAU,OACJ;EACN,MAAM,WAAW,IAAI,iBAAiB,EAAE;EACxC,SAAS,QAAQ,QAAQ;GAAE,YAAY;GAAM,iBAAiB,CAAC,GAAG,KAAK;GAAG;EAAQ,CAAC;EACnF,KAAK,KAAK,WAAW;GACnB,SAAS,WAAW;EACtB,CAAC;CACH;;CAMA,OAAiB,SAA2B,CAAC;;CAG7C,SAAyB,CAAC;AAC5B"}

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

@@ -1,5 +1,5 @@
 import toPropertyKey from "./toPropertyKey.js";
-//#region \0@oxc-project+runtime@0.154.0/helpers/esm/defineProperty.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -8,5 +8,4 @@ function _defineProperty(e, r, t) {
 		writable: !0
 	}) : e[r] = t, e;
 }
-//#endregion
 export { _defineProperty as default };

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

@@ -1,5 +1,5 @@
 import _defineProperty from "./defineProperty.js";
-//#region \0@oxc-project+runtime@0.154.0/helpers/esm/objectSpread2.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/objectSpread2.js
 function ownKeys(e, r) {
 	var t = Object.keys(e);
 	if (Object.getOwnPropertySymbols) {
@@ -21,5 +21,4 @@ function _objectSpread2(e) {
 	}
 	return e;
 }
-//#endregion
 export { _objectSpread2 as default };

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

@@ -1,5 +1,5 @@
 import _typeof from "./typeof.js";
-//#region \0@oxc-project+runtime@0.154.0/helpers/esm/toPrimitive.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -10,5 +10,4 @@ function toPrimitive(t, r) {
 	}
 	return ("string" === r ? String : Number)(t);
 }
-//#endregion
 export { toPrimitive as default };

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

@@ -1,9 +1,8 @@
 import _typeof from "./typeof.js";
 import toPrimitive from "./toPrimitive.js";
-//#region \0@oxc-project+runtime@0.154.0/helpers/esm/toPropertyKey.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
-//#endregion
 export { toPropertyKey as default };

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.154.0/helpers/esm/typeof.js
+// \0@oxc-project+runtime@0.155.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -7,5 +7,4 @@ function _typeof(o) {
 		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
 	}, _typeof(o);
 }
-//#endregion
 export { _typeof as default };

package/dist/es2015/cast-button.js

@@ -2,7 +2,7 @@ import { cast } from "./cast.js";
 import { Component } from "./component.js";
 import { icon } from "./icons.js";
 import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
-//#region src/cast-button.ts
+// src/cast-button.ts
 const STATES = ["default", "active"];
 var MbxCastButton = class extends Component {
 	static get observedAttributes() {
@@ -42,7 +42,7 @@ var MbxCastButton = class extends Component {
 		this.api = null;
 	}
 	render() {
-		var _player$player, _this$getAttribute, _this$getAttribute2;
+		var _player$player;
 		const player = this.player;
 		const api = this.api;
 		if (player === null || api === null) return;
@@ -52,8 +52,7 @@ var MbxCastButton = class extends Component {
 		this.button.disabled = !active && ((_player$player = player.player) === null || _player$player === void 0 ? void 0 : _player$player.session) == null;
 		this.button.toggleAttribute("aria-busy", state === "connecting");
 		show(this.slots, active ? "active" : "default");
-		this.button.setAttribute("aria-label", active ? (_this$getAttribute = this.getAttribute("label-stop")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Stop casting" : (_this$getAttribute2 = this.getAttribute("label-start")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Cast");
+		this.button.setAttribute("aria-label", active ? this.word("label-stop", "castStop", "Stop casting") : this.word("label-start", "castStart", "Cast"));
 	}
 };
-//#endregion
 export { MbxCastButton };

package/dist/es2015/cast-screen.js

@@ -3,7 +3,7 @@ import { Component } from "./component.js";
 import { icon } from "./icons.js";
 import { BUTTON_STYLE, SLIDER_STYLE, describe, el, fill, format, iconSlots, show, style } from "./shared.js";
 import { slider } from "./slider.js";
-//#region src/cast-screen.ts
+// src/cast-screen.ts
 const STYLE_CSS = ":host{color:var(--mbx-text);font:400 .9375em / 1.4 var(--mbx-font);text-align:center;background:#000000d9;justify-content:center;align-items:center;padding:1.0667em;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}:host([hidden]){display:none}[part~=box]{flex-direction:column;align-items:center;width:100%;max-width:28em;display:flex}[part~=box]>:not([hidden])~:not([hidden]){margin-top:.8em}[part~=title]{font-size:1.2em;font-weight:600}[part~=row]{justify-content:center;align-items:center;width:100%;display:flex}[part~=row]>:not([hidden])~:not([hidden]){margin-left:.8em}[part~=slider]{flex:1}[part~=time]{font-variant-numeric:tabular-nums;color:var(--mbx-muted);font-size:.8667em}[part~=stop]{height:2.4em;font:inherit;color:inherit;border-radius:var(--mbx-radius);cursor:pointer;background:0 0;border:1px solid;padding:0 1.0667em;font-weight:600}[part~=stop]:focus{outline:2px solid var(--mbx-accent);outline-offset:-2px}[part~=stop]:focus:not(:focus-visible){outline:none}[hidden]{display:none}";
 const STATES = ["play", "pause"];
 const STEP = 5;
@@ -98,22 +98,21 @@ var MbxCastScreen = class extends Component {
 		this.time.textContent = `${format(at)} / ${format(remote.duration)}`;
 	}
 	render() {
-		var _this$getAttribute, _this$getAttribute2, _this$getAttribute3, _this$getAttribute4, _api$device;
+		var _api$device;
 		const api = this.api;
 		if (api === null) return;
 		const remote = api.remote();
 		const state = remote.loaded && !remote.paused ? "pause" : "play";
 		show(this.slots, state);
-		this.play.setAttribute("aria-label", (_this$getAttribute = this.getAttribute(`label-${state}`)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : state === "play" ? "Play" : "Pause");
-		this.seek.label((_this$getAttribute2 = this.getAttribute("label-seek")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Seek");
-		this.stop.textContent = (_this$getAttribute3 = this.getAttribute("label-stop")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "Stop casting";
+		this.play.setAttribute("aria-label", state === "play" ? this.word("label-play", "play", "Play") : this.word("label-pause", "pause", "Pause"));
+		this.seek.label(this.word("label-seek", "seek", "Seek"));
+		this.stop.textContent = this.word("label-stop", "castStop", "Stop casting");
 		const casting = api.state() === "casting";
 		this.hidden = !casting;
 		if (!casting) return;
-		this.title_.textContent = fill((_this$getAttribute4 = this.getAttribute("label")) !== null && _this$getAttribute4 !== void 0 ? _this$getAttribute4 : "Casting to {device}", { device: (_api$device = api.device()) !== null && _api$device !== void 0 ? _api$device : "" });
+		this.title_.textContent = fill(this.word("label", "castingTo", "Casting to {device}"), { device: (_api$device = api.device()) !== null && _api$device !== void 0 ? _api$device : "" });
 		this.play.disabled = !remote.loaded;
 		this.paint();
 	}
 };
-//#endregion
 export { MbxCastScreen };

package/dist/es2015/cast.js

@@ -1,5 +1,5 @@
-import _objectSpread2 from "./_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/objectSpread2.js";
-//#region src/cast.ts
+import _objectSpread2 from "./_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/objectSpread2.js";
+// src/cast.ts
 /** Whether the session is live: the engine's `live` namespace, once it has an edge. */
 function live(engine) {
 	const api = engine === null || engine === void 0 ? void 0 : engine.live;
@@ -349,5 +349,4 @@ function cast(player) {
 	}
 	return held;
 }
-//#endregion
 export { LICENSE_NAMESPACE, cast };

package/dist/es2015/component.js

@@ -1,5 +1,5 @@
 import { PLAYER, findPlayer } from "./host.js";
-//#region src/component.ts
+// src/component.ts
 var Component = class extends HTMLElement {
 	constructor() {
 		super();
@@ -17,6 +17,9 @@ var Component = class extends HTMLElement {
 			customElements.upgrade(found);
 			if (!("video" in found)) return;
 			this.player = found;
+			this.listen(found, ["localechange"], () => {
+				this.render();
+			});
 			this.attach(this.player);
 		};
 		if ("video" in found) attach();
@@ -34,6 +37,14 @@ var Component = class extends HTMLElement {
 	attributeChangedCallback() {
 		if (this.player !== null) this.render();
 	}
+	/**
+	* A word the element shows: its `attribute` when the page set one, else
+	* the player's language's `id`, else `english`.
+	*/
+	word(attribute, id, english) {
+		var _ref, _this$getAttribute, _this$player;
+		return (_ref = (_this$getAttribute = this.getAttribute(attribute)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.message(id)) !== null && _ref !== void 0 ? _ref : english;
+	}
 	/** Adds `fn` for every name on `target`, to be removed on detach. */
 	listen(target, names, fn) {
 		for (const name of names) target.addEventListener(name, fn);
@@ -80,5 +91,4 @@ var Component = class extends HTMLElement {
 	/** Draws the current state. Called on every observed attribute change while attached. */
 	render() {}
 };
-//#endregion
 export { Component };

package/dist/es2015/host.js

@@ -1,4 +1,4 @@
-//#region src/host.ts
+// src/host.ts
 const PLAYER = "mattebox-player";
 /** The parent, or the host of the shadow root `node` sits in, or null at the document. */
 function above(node) {
@@ -15,5 +15,4 @@ function findPlayer(node) {
 	}
 	return null;
 }
-//#endregion
 export { PLAYER, findPlayer };

package/dist/es2015/icons.js

@@ -1,4 +1,4 @@
-//#region src/icons.ts
+// src/icons.ts
 /** Each glyph's subpaths joined into one `d`, drawn even-odd like the player's. */
 const PATHS = {
 	play: "M9 5L26 16L9 27z",
@@ -19,5 +19,4 @@ function icon(name) {
 	svg.append(path);
 	return svg;
 }
-//#endregion
 export { icon };

package/dist/es2015/index.js

@@ -1,7 +1,7 @@
 import { LICENSE_NAMESPACE } from "./cast.js";
 import { MbxCastButton } from "./cast-button.js";
 import { MbxCastScreen } from "./cast-screen.js";
-//#region src/index.ts
+// src/index.ts
 /**
 * @mattebox/player-cast: <mbx-cast-button> and <mbx-cast-screen>, Chromecast
 * from the player over Google's sender SDK. Importing this module registers
@@ -14,5 +14,4 @@ const CAST_BUTTON = "mbx-cast-button";
 const CAST_SCREEN = "mbx-cast-screen";
 if (customElements.get("mbx-cast-button") === void 0) customElements.define(CAST_BUTTON, MbxCastButton);
 if (customElements.get("mbx-cast-screen") === void 0) customElements.define(CAST_SCREEN, MbxCastScreen);
-//#endregion
 export { CAST_BUTTON, CAST_SCREEN, LICENSE_NAMESPACE, MbxCastButton, MbxCastScreen };

package/dist/es2015/locales/ar.js

@@ -0,0 +1,7 @@
+// src/locales/ar.ts
+var ar_default = {
+	castStart: "إرسال إلى التلفاز",
+	castStop: "إيقاف الإرسال",
+	castingTo: "الإرسال إلى {device}"
+};
+export { ar_default as default };

package/dist/es2015/locales/ca.js

@@ -0,0 +1,7 @@
+// src/locales/ca.ts
+var ca_default = {
+	castStart: "Envia a la tele",
+	castStop: "Atura l'enviament",
+	castingTo: "Enviant a {device}"
+};
+export { ca_default as default };

package/dist/es2015/locales/de.js

@@ -0,0 +1,7 @@
+// src/locales/de.ts
+var de_default = {
+	castStart: "Auf den Fernseher streamen",
+	castStop: "Streaming beenden",
+	castingTo: "Wiedergabe auf {device}"
+};
+export { de_default as default };

package/dist/es2015/locales/es.js

@@ -0,0 +1,7 @@
+// src/locales/es.ts
+var es_default = {
+	castStart: "Enviar a la tele",
+	castStop: "Detener el envío",
+	castingTo: "Enviando a {device}"
+};
+export { es_default as default };

package/dist/es2015/locales/fr.js

@@ -0,0 +1,7 @@
+// src/locales/fr.ts
+var fr_default = {
+	castStart: "Diffuser sur la télé",
+	castStop: "Arrêter la diffusion",
+	castingTo: "Diffusion sur {device}"
+};
+export { fr_default as default };