@mattebox/player 0.4.0 → 0.6.0

package/dist/es2015/elements/title.js

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

package/dist/es2015/entries/spinner.js

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

package/dist/es2015/entries/title.js

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

package/dist/es2015/index.js

@@ -22,8 +22,6 @@ import { MbxLiveButton } from "./elements/live-button.js";
 import "./entries/live-button.js";
 import { MbxMuteButton } from "./elements/mute-button.js";
 import "./entries/mute-button.js";
-import { MbxPanels } from "./elements/panels.js";
-import "./entries/panels.js";
 import { MbxPipButton } from "./elements/pip-button.js";
 import "./entries/pip-button.js";
 import { MbxPlayButton } from "./elements/play-button.js";
@@ -40,12 +38,16 @@ import { MbxSpacer } from "./elements/spacer.js";
 import "./entries/spacer.js";
 import { MbxSpeedMenu } from "./elements/speed-menu.js";
 import "./entries/speed-menu.js";
+import { MbxSpinner } from "./elements/spinner.js";
+import "./entries/spinner.js";
 import { MbxStartButton } from "./elements/start-button.js";
 import "./entries/start-button.js";
 import { MbxSubtitlesMenu } from "./elements/subtitles-menu.js";
 import "./entries/subtitles-menu.js";
+import { MbxTitle } from "./elements/title.js";
+import "./entries/title.js";
 import { MbxVolumeSlider } from "./elements/volume-slider.js";
 import "./entries/volume-slider.js";
 import { MbxVolume } from "./elements/volume.js";
 import "./entries/volume.js";
-export { MatteboxPlayerElement, MbxAirplayButton, MbxAudioMenu, MbxChaptersMenu, MbxControlBar, MbxCurrentTime, MbxDrmBadge, MbxDuration, MbxErrorScreen, MbxFullscreenButton, MbxLiveButton, MbxMuteButton, MbxPanels, MbxPipButton, MbxPlayButton, MbxQualityMenu, MbxRemainingTime, MbxSeekBar, MbxSkipButton, MbxSpacer, MbxSpeedMenu, MbxStartButton, MbxSubtitlesMenu, MbxVolume, MbxVolumeSlider };
+export { MatteboxPlayerElement, MbxAirplayButton, MbxAudioMenu, MbxChaptersMenu, MbxControlBar, MbxCurrentTime, MbxDrmBadge, MbxDuration, MbxErrorScreen, MbxFullscreenButton, MbxLiveButton, MbxMuteButton, MbxPipButton, MbxPlayButton, MbxQualityMenu, MbxRemainingTime, MbxSeekBar, MbxSkipButton, MbxSpacer, MbxSpeedMenu, MbxSpinner, MbxStartButton, MbxSubtitlesMenu, MbxTitle, MbxVolume, MbxVolumeSlider };

package/dist/es2015/presets.js

@@ -1,4 +1,4 @@
-import _asyncToGenerator from "./_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/asyncToGenerator.js";
+import _asyncToGenerator from "./_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/asyncToGenerator.js";
 //#region src/presets.ts
 /** eme-core's teardown calls `element.setMediaKeys(null)` unguarded, so a build without EME throws out of `detach`. */
 const DRM_STAGES = [

package/dist/es2015/style.js

@@ -36,8 +36,7 @@ const STYLE = `
   --mbx-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
 /* The stage is a column as tall as the host, so the picture is centred
-   in whatever height the page gives, and the panels row under native
-   controls keeps its place below the picture. The height comes from the
+   in whatever height the page gives. The height comes from the
    page, or from the browser in fullscreen, and not from a display on the
    host: a page's own "mattebox-player { display: block }" beats a :host()
    rule, so nothing here may depend on one. */
@@ -60,12 +59,21 @@ const STYLE = `
   object-fit: contain;
   aspect-ratio: auto 16 / 9;
 }
+/* The casting attribute is set by @mattebox/player-cast while a receiver
+   plays: its screen has the controls, and the bar and the start button
+   would drive a paused video nobody watches. The attribute is the whole
+   coupling. */
+:host([casting]) ::slotted(mbx-control-bar), :host([casting]) ::slotted(mbx-start-button) { display: none; }
+/* controls="none" hides every child but the video, so a page keeps its
+   composition in place and turns it off with one attribute. A normal rule
+   from the page still wins over this one, the way it does over any rule
+   here. */
+:host([controls="none"]) ::slotted(:not(video)) { display: none; }
 :host(:focus-visible) [part~="stage"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
 /* Fullscreen goes on the host, so every control the page placed inside
    comes along. The browser gives the host the whole screen with
-   !important; the picture takes what the panels row leaves. The error
-   surface, which sits under the stage in the page, goes over its foot
-   instead. */
+   !important; the picture takes all of it. The error surface, which sits
+   under the stage in the page, goes over its foot instead. */
 :host(:fullscreen) ::slotted(video) { flex: 1; }
 :host(:fullscreen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
 :host(:-webkit-full-screen) ::slotted(video) { flex: 1; }

package/dist/es2015/tags.js

@@ -12,6 +12,8 @@ const AIRPLAY_BUTTON = "mbx-airplay-button";
 const FULLSCREEN_BUTTON = "mbx-fullscreen-button";
 const START_BUTTON = "mbx-start-button";
 const ERROR_SCREEN = "mbx-error-screen";
+const SPINNER = "mbx-spinner";
+const TITLE = "mbx-title";
 const CURRENT_TIME = "mbx-current-time";
 const DURATION = "mbx-duration";
 const REMAINING_TIME = "mbx-remaining-time";
@@ -22,8 +24,7 @@ const QUALITY_MENU = "mbx-quality-menu";
 const AUDIO_MENU = "mbx-audio-menu";
 const SUBTITLES_MENU = "mbx-subtitles-menu";
 const DRM_BADGE = "mbx-drm-badge";
-const PANELS = "mbx-panels";
 const VOLUME = "mbx-volume";
 const CHAPTERS_MENU = "mbx-chapters-menu";
 //#endregion
-export { AIRPLAY_BUTTON, AUDIO_MENU, CHAPTERS_MENU, CONTROL_BAR, CURRENT_TIME, DRM_BADGE, DURATION, ERROR_SCREEN, FULLSCREEN_BUTTON, LIVE_BUTTON, MUTE_BUTTON, PANELS, PIP_BUTTON, PLAYER, PLAY_BUTTON, QUALITY_MENU, REMAINING_TIME, SEEK_BAR, SKIP_BUTTON, SPACER, SPEED_MENU, START_BUTTON, SUBTITLES_MENU, VOLUME, VOLUME_SLIDER };
+export { AIRPLAY_BUTTON, AUDIO_MENU, CHAPTERS_MENU, CONTROL_BAR, CURRENT_TIME, DRM_BADGE, DURATION, ERROR_SCREEN, FULLSCREEN_BUTTON, LIVE_BUTTON, MUTE_BUTTON, PIP_BUTTON, PLAYER, PLAY_BUTTON, QUALITY_MENU, REMAINING_TIME, SEEK_BAR, SKIP_BUTTON, SPACER, SPEED_MENU, SPINNER, START_BUTTON, SUBTITLES_MENU, TITLE, VOLUME, VOLUME_SLIDER };

package/dist/index.d.ts

@@ -16,7 +16,6 @@ import type { MbxErrorScreen } from './entries/error-screen.js';
 import type { MbxFullscreenButton } from './entries/fullscreen-button.js';
 import type { MbxLiveButton } from './entries/live-button.js';
 import type { MbxMuteButton } from './entries/mute-button.js';
-import type { MbxPanels } from './entries/panels.js';
 import type { MbxPipButton } from './entries/pip-button.js';
 import type { MbxPlayButton } from './entries/play-button.js';
 import type { MbxQualityMenu } from './entries/quality-menu.js';
@@ -25,8 +24,10 @@ import type { MbxSeekBar } from './entries/seek-bar.js';
 import type { MbxSkipButton } from './entries/skip-button.js';
 import type { MbxSpacer } from './entries/spacer.js';
 import type { MbxSpeedMenu } from './entries/speed-menu.js';
+import type { MbxSpinner } from './entries/spinner.js';
 import type { MbxStartButton } from './entries/start-button.js';
 import type { MbxSubtitlesMenu } from './entries/subtitles-menu.js';
+import type { MbxTitle } from './entries/title.js';
 import type { MbxVolume } from './entries/volume.js';
 import type { MbxVolumeSlider } from './entries/volume-slider.js';
 export type { MatteboxPlayerOptions } from './element-entry.js';
@@ -42,7 +43,6 @@ export { MbxErrorScreen } from './entries/error-screen.js';
 export { MbxFullscreenButton } from './entries/fullscreen-button.js';
 export { MbxLiveButton } from './entries/live-button.js';
 export { MbxMuteButton } from './entries/mute-button.js';
-export { MbxPanels } from './entries/panels.js';
 export { MbxPipButton } from './entries/pip-button.js';
 export { MbxPlayButton } from './entries/play-button.js';
 export { MbxQualityMenu } from './entries/quality-menu.js';
@@ -51,8 +51,10 @@ export { MbxSeekBar } from './entries/seek-bar.js';
 export { MbxSkipButton } from './entries/skip-button.js';
 export { MbxSpacer } from './entries/spacer.js';
 export { MbxSpeedMenu } from './entries/speed-menu.js';
+export { MbxSpinner } from './entries/spinner.js';
 export { MbxStartButton } from './entries/start-button.js';
 export { MbxSubtitlesMenu } from './entries/subtitles-menu.js';
+export { MbxTitle } from './entries/title.js';
 export { MbxVolume } from './entries/volume.js';
 export { MbxVolumeSlider } from './entries/volume-slider.js';
 export type { PlayerHost } from './host.js';
@@ -70,6 +72,8 @@ declare global {
         'mbx-fullscreen-button': MbxFullscreenButton;
         'mbx-start-button': MbxStartButton;
         'mbx-error-screen': MbxErrorScreen;
+        'mbx-spinner': MbxSpinner;
+        'mbx-title': MbxTitle;
         'mbx-current-time': MbxCurrentTime;
         'mbx-duration': MbxDuration;
         'mbx-remaining-time': MbxRemainingTime;
@@ -82,7 +86,6 @@ declare global {
         'mbx-subtitles-menu': MbxSubtitlesMenu;
         'mbx-drm-badge': MbxDrmBadge;
         'mbx-chapters-menu': MbxChaptersMenu;
-        'mbx-panels': MbxPanels;
     }
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -10,7 +10,6 @@ export { MbxErrorScreen } from './entries/error-screen.js';
 export { MbxFullscreenButton } from './entries/fullscreen-button.js';
 export { MbxLiveButton } from './entries/live-button.js';
 export { MbxMuteButton } from './entries/mute-button.js';
-export { MbxPanels } from './entries/panels.js';
 export { MbxPipButton } from './entries/pip-button.js';
 export { MbxPlayButton } from './entries/play-button.js';
 export { MbxQualityMenu } from './entries/quality-menu.js';
@@ -19,8 +18,10 @@ export { MbxSeekBar } from './entries/seek-bar.js';
 export { MbxSkipButton } from './entries/skip-button.js';
 export { MbxSpacer } from './entries/spacer.js';
 export { MbxSpeedMenu } from './entries/speed-menu.js';
+export { MbxSpinner } from './entries/spinner.js';
 export { MbxStartButton } from './entries/start-button.js';
 export { MbxSubtitlesMenu } from './entries/subtitles-menu.js';
+export { MbxTitle } from './entries/title.js';
 export { MbxVolume } from './entries/volume.js';
 export { MbxVolumeSlider } from './entries/volume-slider.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiCA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAkCA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/namespaces.d.ts

@@ -6,7 +6,7 @@
  * only through a `declare module` merge in the stage that contributes it,
  * and of the three a player shows, one merge is unreachable and one does not
  * exist. So the casts live here, once, and the
- * panels read a plain optional shape.
+ * controls read a plain optional shape.
  */
 import type { Mattebox } from 'mattebox';
 import type { DrmApi } from 'mattebox/stages/eme-core';

package/dist/style.d.ts

@@ -17,5 +17,5 @@
  * Selectors stay at one attribute, and every element is reached through its
  * `part`, so the names in the stylesheet are the names the page uses.
  */
-export declare const STYLE = "\n:host {\n  display: block;\n  position: relative;\n  outline: none;\n  background: #000;\n  --mbx-surface: #101114;\n  --mbx-text: #f2f3f5;\n  --mbx-muted: #9aa0a6;\n  --mbx-accent: #5b8cff;\n  --mbx-error: #ffb4ab;\n  --mbx-live: #ff4d4d;\n  --mbx-radius: 4px;\n  --mbx-gap: 10px;\n  --mbx-pad: 8px;\n  --mbx-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n/* The stage is a column as tall as the host, so the picture is centred\n   in whatever height the page gives, and the panels row under native\n   controls keeps its place below the picture. The height comes from the\n   page, or from the browser in fullscreen, and not from a display on the\n   host: a page's own \"mattebox-player { display: block }\" beats a :host()\n   rule, so nothing here may depend on one. */\n[part~=\"stage\"] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n}\n/* 16:9 until the media says otherwise: a bare video measures 300 by 150 and\n   would jump to its size on metadata. Auto first, so the natural ratio wins\n   once it is known. Capped at the stage, and contained, so a box shorter\n   than the picture letterboxes it and a narrower one pillarboxes it. */\n::slotted(video) {\n  display: block;\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  object-fit: contain;\n  aspect-ratio: auto 16 / 9;\n}\n:host(:focus-visible) [part~=\"stage\"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n/* Fullscreen goes on the host, so every control the page placed inside\n   comes along. The browser gives the host the whole screen with\n   !important; the picture takes what the panels row leaves. The error\n   surface, which sits under the stage in the page, goes over its foot\n   instead. */\n:host(:fullscreen) ::slotted(video) { flex: 1; }\n:host(:fullscreen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n:host(:-webkit-full-screen) ::slotted(video) { flex: 1; }\n:host(:-webkit-full-screen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n[part~=\"error\"] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mbx-gap);\n  padding: var(--mbx-pad);\n  background: var(--mbx-surface);\n  color: var(--mbx-error);\n  font: 400 13px/1.4 var(--mbx-font);\n}\n[part~=\"value\"] { color: var(--mbx-accent); }\n[part~=\"button\"] {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 1px solid currentColor;\n  border-radius: var(--mbx-radius);\n  padding: 2px 6px;\n}\n[hidden] { display: none; }\n";
+export declare const STYLE = "\n:host {\n  display: block;\n  position: relative;\n  outline: none;\n  background: #000;\n  --mbx-surface: #101114;\n  --mbx-text: #f2f3f5;\n  --mbx-muted: #9aa0a6;\n  --mbx-accent: #5b8cff;\n  --mbx-error: #ffb4ab;\n  --mbx-live: #ff4d4d;\n  --mbx-radius: 4px;\n  --mbx-gap: 10px;\n  --mbx-pad: 8px;\n  --mbx-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n/* The stage is a column as tall as the host, so the picture is centred\n   in whatever height the page gives. The height comes from the\n   page, or from the browser in fullscreen, and not from a display on the\n   host: a page's own \"mattebox-player { display: block }\" beats a :host()\n   rule, so nothing here may depend on one. */\n[part~=\"stage\"] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n}\n/* 16:9 until the media says otherwise: a bare video measures 300 by 150 and\n   would jump to its size on metadata. Auto first, so the natural ratio wins\n   once it is known. Capped at the stage, and contained, so a box shorter\n   than the picture letterboxes it and a narrower one pillarboxes it. */\n::slotted(video) {\n  display: block;\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  object-fit: contain;\n  aspect-ratio: auto 16 / 9;\n}\n/* The casting attribute is set by @mattebox/player-cast while a receiver\n   plays: its screen has the controls, and the bar and the start button\n   would drive a paused video nobody watches. The attribute is the whole\n   coupling. */\n:host([casting]) ::slotted(mbx-control-bar), :host([casting]) ::slotted(mbx-start-button) { display: none; }\n/* controls=\"none\" hides every child but the video, so a page keeps its\n   composition in place and turns it off with one attribute. A normal rule\n   from the page still wins over this one, the way it does over any rule\n   here. */\n:host([controls=\"none\"]) ::slotted(:not(video)) { display: none; }\n:host(:focus-visible) [part~=\"stage\"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }\n/* Fullscreen goes on the host, so every control the page placed inside\n   comes along. The browser gives the host the whole screen with\n   !important; the picture takes all of it. The error surface, which sits\n   under the stage in the page, goes over its foot instead. */\n:host(:fullscreen) ::slotted(video) { flex: 1; }\n:host(:fullscreen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n:host(:-webkit-full-screen) ::slotted(video) { flex: 1; }\n:host(:-webkit-full-screen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n[part~=\"error\"] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--mbx-gap);\n  padding: var(--mbx-pad);\n  background: var(--mbx-surface);\n  color: var(--mbx-error);\n  font: 400 13px/1.4 var(--mbx-font);\n}\n[part~=\"value\"] { color: var(--mbx-accent); }\n[part~=\"button\"] {\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: 1px solid currentColor;\n  border-radius: var(--mbx-radius);\n  padding: 2px 6px;\n}\n[hidden] { display: none; }\n";
 //# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

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

package/dist/style.js

@@ -35,8 +35,7 @@ export const STYLE = `
   --mbx-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
 /* The stage is a column as tall as the host, so the picture is centred
-   in whatever height the page gives, and the panels row under native
-   controls keeps its place below the picture. The height comes from the
+   in whatever height the page gives. The height comes from the
    page, or from the browser in fullscreen, and not from a display on the
    host: a page's own "mattebox-player { display: block }" beats a :host()
    rule, so nothing here may depend on one. */
@@ -59,12 +58,21 @@ export const STYLE = `
   object-fit: contain;
   aspect-ratio: auto 16 / 9;
 }
+/* The casting attribute is set by @mattebox/player-cast while a receiver
+   plays: its screen has the controls, and the bar and the start button
+   would drive a paused video nobody watches. The attribute is the whole
+   coupling. */
+:host([casting]) ::slotted(mbx-control-bar), :host([casting]) ::slotted(mbx-start-button) { display: none; }
+/* controls="none" hides every child but the video, so a page keeps its
+   composition in place and turns it off with one attribute. A normal rule
+   from the page still wins over this one, the way it does over any rule
+   here. */
+:host([controls="none"]) ::slotted(:not(video)) { display: none; }
 :host(:focus-visible) [part~="stage"] { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
 /* Fullscreen goes on the host, so every control the page placed inside
    comes along. The browser gives the host the whole screen with
-   !important; the picture takes what the panels row leaves. The error
-   surface, which sits under the stage in the page, goes over its foot
-   instead. */
+   !important; the picture takes all of it. The error surface, which sits
+   under the stage in the page, goes over its foot instead. */
 :host(:fullscreen) ::slotted(video) { flex: 1; }
 :host(:fullscreen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
 :host(:-webkit-full-screen) ::slotted(video) { flex: 1; }

package/dist/style.js.map

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

package/dist/tags.d.ts

@@ -11,6 +11,8 @@ export declare const AIRPLAY_BUTTON = "mbx-airplay-button";
 export declare const FULLSCREEN_BUTTON = "mbx-fullscreen-button";
 export declare const START_BUTTON = "mbx-start-button";
 export declare const ERROR_SCREEN = "mbx-error-screen";
+export declare const SPINNER = "mbx-spinner";
+export declare const TITLE = "mbx-title";
 export declare const CURRENT_TIME = "mbx-current-time";
 export declare const DURATION = "mbx-duration";
 export declare const REMAINING_TIME = "mbx-remaining-time";
@@ -21,7 +23,6 @@ export declare const QUALITY_MENU = "mbx-quality-menu";
 export declare const AUDIO_MENU = "mbx-audio-menu";
 export declare const SUBTITLES_MENU = "mbx-subtitles-menu";
 export declare const DRM_BADGE = "mbx-drm-badge";
-export declare const PANELS = "mbx-panels";
 export declare const VOLUME = "mbx-volume";
 export declare const CHAPTERS_MENU = "mbx-chapters-menu";
 //# sourceMappingURL=tags.d.ts.map

package/dist/tags.d.ts.map

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

package/dist/tags.js

@@ -11,6 +11,8 @@ export const AIRPLAY_BUTTON = 'mbx-airplay-button';
 export const FULLSCREEN_BUTTON = 'mbx-fullscreen-button';
 export const START_BUTTON = 'mbx-start-button';
 export const ERROR_SCREEN = 'mbx-error-screen';
+export const SPINNER = 'mbx-spinner';
+export const TITLE = 'mbx-title';
 export const CURRENT_TIME = 'mbx-current-time';
 export const DURATION = 'mbx-duration';
 export const REMAINING_TIME = 'mbx-remaining-time';
@@ -21,7 +23,6 @@ export const QUALITY_MENU = 'mbx-quality-menu';
 export const AUDIO_MENU = 'mbx-audio-menu';
 export const SUBTITLES_MENU = 'mbx-subtitles-menu';
 export const DRM_BADGE = 'mbx-drm-badge';
-export const PANELS = 'mbx-panels';
 export const VOLUME = 'mbx-volume';
 export const CHAPTERS_MENU = 'mbx-chapters-menu';
 //# sourceMappingURL=tags.js.map

package/dist/tags.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mattebox/player",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A <mattebox-player> custom element over @mattebox/player-core.",
   "author": "Josep Boix Requesens",
   "repository": {
@@ -70,9 +70,9 @@
     "release:ci": "semantic-release"
   },
   "dependencies": {
-    "@mattebox/player-core": "^0.2.0"
+    "@mattebox/player-core": "^0.3.0"
   },
   "peerDependencies": {
-    "mattebox": "^0.5.0"
+    "mattebox": "^0.6.0"
   }
 }

package/dist/compose.d.ts

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

package/dist/compose.d.ts.map

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

package/dist/compose.js

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

package/dist/compose.js.map

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

package/dist/elements/panels.d.ts

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

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

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

package/dist/elements/panels.js

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