@mattebox/player 0.2.0 → 0.3.1

package/dist/es2015/controls/slider.js

@@ -17,6 +17,11 @@ import { el } from "../dom.js";
 *
 * The steps are read on every key, so an element can take them from its
 * attributes as they change.
+*
+* A drag ends on `pointerup`, and also on a move that reports no button
+* held: the button went up where no `pointerup` reached the slider, such
+* as outside the window, and the thumb must not stay on the pointer. A
+* lost capture ends it too.
 */
 function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
@@ -62,7 +67,12 @@ function slider(options) {
 		onInput(at(event.clientX));
 	}
 	function move(event) {
-		if (held) onInput(at(event.clientX));
+		if (!held) return;
+		if (event.buttons === 0) {
+			up(event);
+			return;
+		}
+		onInput(at(event.clientX));
 	}
 	function up(event) {
 		if (!held) return;
@@ -104,6 +114,7 @@ function slider(options) {
 	root.addEventListener("pointermove", move);
 	root.addEventListener("pointerup", up);
 	root.addEventListener("pointercancel", cancel);
+	root.addEventListener("lostpointercapture", cancel);
 	root.addEventListener("keydown", key);
 	return {
 		root,
@@ -133,6 +144,7 @@ function slider(options) {
 			root.removeEventListener("pointermove", move);
 			root.removeEventListener("pointerup", up);
 			root.removeEventListener("pointercancel", cancel);
+			root.removeEventListener("lostpointercapture", cancel);
 			root.removeEventListener("keydown", key);
 		}
 	};

package/dist/es2015/elements/component.js

@@ -64,12 +64,13 @@ var Component = class extends HTMLElement {
 		});
 		run();
 	}
-	/** Runs `fn` when any of `names` changes on `target`, until detach. */
-	observe(target, names, fn) {
+	/** Runs `fn` when any of `names` changes on `target`, or under it with `subtree`, until detach. */
+	observe(target, names, fn, subtree = false) {
 		const observer = new MutationObserver(fn);
 		observer.observe(target, {
 			attributes: true,
-			attributeFilter: [...names]
+			attributeFilter: [...names],
+			subtree
 		});
 		this.offs.push(() => {
 			observer.disconnect();

package/dist/es2015/elements/control-bar.js

@@ -1,3 +1,4 @@
+import { AUDIO_MENU, CHAPTERS_MENU, DRM_BADGE, MUTE_BUTTON, PIP_BUTTON, QUALITY_MENU, SKIP_BUTTON, SPEED_MENU, SUBTITLES_MENU, VOLUME, VOLUME_SLIDER } from "../tags.js";
 import { Component } from "./component.js";
 import { number, style } from "./shared.js";
 import { cueLift, cueStyle } from "../controls/cues.js";
@@ -5,6 +6,50 @@ import { fullscreen } from "../controls/fullscreen.js";
 //#region src/elements/control-bar.ts
 const IDLE_MS = 3e3;
 const SEEK_STEP = 5;
+/**
+* What goes first when the row is too narrow, by tag: the slider, which
+* takes the most room for the least; then the diagnostics, the lock and
+* the menus a viewer rarely opens; then the menus for the picture and the
+* sound; then the skips; then the mute and the subtitles. The subtitles
+* menu goes last of the menus because it is the one a viewer may need.
+* The diagnostics is another package's, named here as a string. A
+* `priority` attribute on the control replaces its default.
+*/
+const PRIORITY = {
+	[VOLUME_SLIDER]: 5,
+	"mbx-diagnostics": 4,
+	[DRM_BADGE]: 4,
+	[SPEED_MENU]: 4,
+	[CHAPTERS_MENU]: 4,
+	[AUDIO_MENU]: 3,
+	[QUALITY_MENU]: 3,
+	[PIP_BUTTON]: 3,
+	[SKIP_BUTTON]: 2,
+	[SUBTITLES_MENU]: 1,
+	[VOLUME]: 1,
+	[MUTE_BUTTON]: 1
+};
+/** The width the volume group unfolds its slider to, from volume.ts: what a folded slider is counted at. */
+const SLIDER_WIDTH = 80;
+/** Room kept between the last button and the edge, so nothing sits flush against it. */
+const SLACK = 8;
+function shown(node) {
+	return node.getClientRects().length > 0;
+}
+/** The slider inside a volume group child, when it has one. */
+function slider(child) {
+	return child.localName === "mbx-volume" ? child.querySelector(VOLUME_SLIDER) : null;
+}
+/** A child's priority: its attribute, else its tag's default, else zero. */
+function priority(child) {
+	var _PRIORITY$child$local;
+	const own = child.getAttribute("priority");
+	if (own !== null) {
+		const value = Number(own);
+		return Number.isFinite(value) && value > 0 ? value : 0;
+	}
+	return (_PRIORITY$child$local = PRIORITY[child.localName]) !== null && _PRIORITY$child$local !== void 0 ? _PRIORITY$child$local : 0;
+}
 const STYLE = `
 :host {
   position: absolute;
@@ -22,6 +67,7 @@ const STYLE = `
 :host([idle]) { opacity: 0; pointer-events: none; }
 [part~="row"] { display: flex; align-items: center; gap: 8px; }
 [part~="seek-row"] { gap: 16px; }
+::slotted([collapsed]) { display: none; }
 @media (prefers-reduced-motion: reduce) {
   :host { transition: none; }
 }
@@ -45,16 +91,70 @@ var MbxControlBar = class extends Component {
 		this.keyboard = false;
 		this.cues = null;
 		this.screen = null;
+		this.resizer = null;
 		const root = this.attachShadow({ mode: "open" });
 		this.seekRow = document.createElement("div");
 		this.seekRow.setAttribute("part", "row seek-row");
 		const seek = document.createElement("slot");
 		seek.name = "seek";
 		this.seekRow.append(seek);
-		const buttons = document.createElement("div");
-		buttons.setAttribute("part", "row buttons-row");
-		buttons.append(document.createElement("slot"));
-		root.append(style(STYLE), this.seekRow, buttons);
+		this.buttonsRow = document.createElement("div");
+		this.buttonsRow.setAttribute("part", "row buttons-row");
+		this.buttons = document.createElement("slot");
+		this.buttonsRow.append(this.buttons);
+		root.append(style(STYLE), this.seekRow, this.buttonsRow);
+	}
+	/**
+	* What the buttons need: their widths and the gaps between them, the
+	* spacer aside since it takes what is left, and a folded slider at the
+	* width it unfolds to. The row's own width says nothing, because the
+	* spacer fills it whatever the buttons take.
+	*/
+	needed(children) {
+		const gap = Number.parseFloat(getComputedStyle(this.buttonsRow).columnGap) || 0;
+		let sum = 0;
+		let count = 0;
+		for (const child of children) {
+			if (child.localName === "mbx-spacer" || !shown(child)) continue;
+			sum += child.getBoundingClientRect().width;
+			count += 1;
+			const folded = slider(child);
+			if (folded !== null && shown(folded)) sum += Math.max(0, SLIDER_WIDTH - folded.getBoundingClientRect().width);
+		}
+		return sum + gap * Math.max(0, count - 1);
+	}
+	/**
+	* Collapses the buttons row to its width. Everything is shown first, so
+	* a wider bar gets its controls back, then the highest priorities go one
+	* at a time while the buttons need more than the row has, less the
+	* slack. Each step lays the row out again; a bar carries a dozen
+	* controls, so that is cheap.
+	*/
+	collapse() {
+		const children = this.buttons.assignedElements();
+		const candidates = [];
+		for (const [index, child] of children.entries()) {
+			child.removeAttribute("collapsed");
+			const inner = slider(child);
+			inner === null || inner === void 0 || inner.removeAttribute("collapsed");
+			if (inner !== null && shown(inner)) candidates.push({
+				node: inner,
+				index: index + .5,
+				priority: priority(inner)
+			});
+			if (shown(child)) candidates.push({
+				node: child,
+				index,
+				priority: priority(child)
+			});
+		}
+		candidates.sort((a, b) => b.priority - a.priority || b.index - a.index);
+		const room = this.buttonsRow.clientWidth - SLACK;
+		for (const { node, priority: level } of candidates) {
+			if (level === 0) return;
+			if (this.needed(children) <= room) return;
+			node.setAttribute("collapsed", "");
+		}
 	}
 	/** From the first row's top to the bar's bottom: what the bar covers of the picture. */
 	covered() {
@@ -161,11 +261,32 @@ var MbxControlBar = class extends Component {
 		});
 		this.wake(player);
 		this.cues.lifted(true);
+		const collapse = () => {
+			this.collapse();
+		};
+		this.listen(this.buttons, ["slotchange"], collapse);
+		this.observe(this, [
+			"hidden",
+			"priority",
+			"slot"
+		], collapse, true);
+		if (typeof ResizeObserver !== "undefined") {
+			this.resizer = new ResizeObserver(collapse);
+			this.resizer.observe(this.buttonsRow);
+		}
+		collapse();
 	}
 	detach(player) {
-		var _this$cues2;
+		var _this$resizer, _this$cues2;
 		clearTimeout(this.timer);
 		this.timer = void 0;
+		(_this$resizer = this.resizer) === null || _this$resizer === void 0 || _this$resizer.disconnect();
+		this.resizer = null;
+		for (const child of this.buttons.assignedElements()) {
+			var _slider;
+			child.removeAttribute("collapsed");
+			(_slider = slider(child)) === null || _slider === void 0 || _slider.removeAttribute("collapsed");
+		}
 		(_this$cues2 = this.cues) === null || _this$cues2 === void 0 || _this$cues2.dispose();
 		this.cues = null;
 		this.screen = null;

package/dist/es2015/elements/remaining-time.js

@@ -0,0 +1,26 @@
+import { format } from "../controls/time.js";
+import { live, span } from "../controls/session.js";
+import { TimeElement } from "./time-element.js";
+//#region src/elements/remaining-time.ts
+/**
+* <mbx-remaining-time>: what is left, "-4:53", once the metadata is in. A
+* bar that shows one number shows this one: a viewer asks how much is
+* left more often than where they are. A live stream has no end, so the
+* element hides while the stream is live, as the duration does.
+*/
+var MbxRemainingTime = class extends TimeElement {
+	constructor() {
+		super(":host { text-align: right; }");
+	}
+	render() {
+		const player = this.player;
+		if (player === null) return;
+		const video = player.video;
+		const engine = player.engine;
+		const on = live(engine) !== void 0;
+		this.hidden = on;
+		if (!on) this.text.data = `-${format(Math.max(0, span(video, engine).end - video.currentTime))}`;
+	}
+};
+//#endregion
+export { MbxRemainingTime };

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

@@ -20,6 +20,8 @@ const STYLE = `${BUTTON_STYLE}
   transition: opacity 0.15s, background 0.15s;
 }
 [part~="button"]:hover { opacity: 1; background: rgba(0, 0, 0, 0.6); }
+/* A box too short for the button above the bar: the bar's play does the job. */
+:host([cramped]) { display: none; }
 [part~="icon"], ::slotted(*) { width: 40px; height: 40px; margin-left: 2px; }
 @media (prefers-reduced-motion: reduce) {
   [part~="button"] { transition: none; }
@@ -32,6 +34,7 @@ var MbxStartButton = class extends Component {
 	constructor() {
 		super();
 		this.failed = false;
+		this.resizer = null;
 		const root = this.attachShadow({ mode: "open" });
 		this.button = document.createElement("button");
 		this.button.type = "button";
@@ -71,8 +74,42 @@ var MbxStartButton = class extends Component {
 			player.removeEventListener("error", failure);
 		});
 		this.failed = player.error !== null;
+		if (typeof ResizeObserver !== "undefined") {
+			this.resizer = new ResizeObserver(() => {
+				this.fit(player);
+			});
+			this.resizer.observe(player);
+		}
+		this.fit(player);
 		this.render();
 	}
+	detach() {
+		var _this$resizer;
+		(_this$resizer = this.resizer) === null || _this$resizer === void 0 || _this$resizer.disconnect();
+		this.resizer = null;
+		this.removeAttribute("cramped");
+	}
+	/**
+	* Cramped when the button's foot would be inside the bar's box, which
+	* starts at the top of its gradient: then the bar's own play button is
+	* the one to press. Measured with the button shown, since a hidden one
+	* has no box.
+	*/
+	fit(player) {
+		const bar = player.querySelector("mbx-control-bar");
+		if (bar === null) {
+			this.removeAttribute("cramped");
+			return;
+		}
+		const wasHidden = this.hidden;
+		const wasCramped = this.hasAttribute("cramped");
+		this.hidden = false;
+		this.removeAttribute("cramped");
+		const cramped = this.button.getBoundingClientRect().bottom > bar.getBoundingClientRect().top;
+		this.hidden = wasHidden;
+		this.toggleAttribute("cramped", cramped);
+		if (cramped !== wasCramped) this.render();
+	}
 	render() {
 		var _this$player2, _this$getAttribute;
 		const video = (_this$player2 = this.player) === null || _this$player2 === void 0 ? void 0 : _this$player2.video;

package/dist/es2015/elements/volume.js

@@ -19,6 +19,8 @@ const STYLE = `
 :host { display: inline-flex; align-items: center; }
 :host([hidden]) { display: none; }
 ::slotted(mbx-volume-slider) { width: 0; opacity: 0; overflow: hidden; transition: width 0.2s ease, opacity 0.2s ease; }
+/* The bar collapses the slider on its own when the row is narrow; then the pointer unfolds nothing. */
+::slotted(mbx-volume-slider[collapsed]) { display: none; }
 :host(:hover) ::slotted(mbx-volume-slider), :host(:focus-within:not([pointer])) ::slotted(mbx-volume-slider) { width: 80px; opacity: 1; }
 @media (prefers-reduced-motion: reduce) {
   ::slotted(mbx-volume-slider) { transition: none; }

package/dist/es2015/entries/remaining-time.js

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

package/dist/es2015/index.js

@@ -28,6 +28,8 @@ import { MbxPlayButton } from "./elements/play-button.js";
 import "./entries/play-button.js";
 import { MbxQualityMenu } from "./elements/quality-menu.js";
 import "./entries/quality-menu.js";
+import { MbxRemainingTime } from "./elements/remaining-time.js";
+import "./entries/remaining-time.js";
 import { MbxSeekBar } from "./elements/seek-bar.js";
 import "./entries/seek-bar.js";
 import { MbxSkipButton } from "./elements/skip-button.js";
@@ -44,4 +46,4 @@ import { MbxVolumeSlider } from "./elements/volume-slider.js";
 import "./entries/volume-slider.js";
 import { MbxVolume } from "./elements/volume.js";
 import "./entries/volume.js";
-export { MatteboxPlayerElement, MbxAudioMenu, MbxChaptersMenu, MbxControlBar, MbxCurrentTime, MbxDrmBadge, MbxDuration, MbxErrorScreen, MbxFullscreenButton, MbxLiveButton, MbxMuteButton, MbxPanels, MbxPipButton, MbxPlayButton, MbxQualityMenu, MbxSeekBar, MbxSkipButton, MbxSpacer, MbxSpeedMenu, MbxStartButton, MbxSubtitlesMenu, MbxVolume, MbxVolumeSlider };
+export { MatteboxPlayerElement, MbxAudioMenu, MbxChaptersMenu, MbxControlBar, MbxCurrentTime, MbxDrmBadge, MbxDuration, MbxErrorScreen, MbxFullscreenButton, MbxLiveButton, MbxMuteButton, MbxPanels, MbxPipButton, MbxPlayButton, MbxQualityMenu, MbxRemainingTime, MbxSeekBar, MbxSkipButton, MbxSpacer, MbxSpeedMenu, MbxStartButton, MbxSubtitlesMenu, MbxVolume, MbxVolumeSlider };

package/dist/es2015/style.js

@@ -4,6 +4,12 @@
 * error surface under native controls. Every control carries its own sheet.
 * Two rules govern them.
 *
+* The box is black and the picture is centred in it, letterboxed or
+* pillarboxed by `object-fit: contain`, whatever height or ratio the page
+* gives the element: what fullscreen always did, now the default. With no
+* height from the page the stage is as tall as the picture and none of it
+* shows.
+*
 * Nothing carries `!important`. For normal declarations the outer tree wins
 * over the shadow tree, so any `::part()` rule the page writes beats these
 * whatever its specificity; an `!important` here would invert that and make
@@ -17,6 +23,7 @@ const STYLE = `
   display: block;
   position: relative;
   outline: none;
+  background: #000;
   --mbx-surface: #101114;
   --mbx-text: #f2f3f5;
   --mbx-muted: #9aa0a6;
@@ -28,26 +35,40 @@ const STYLE = `
   --mbx-pad: 8px;
   --mbx-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
-[part~="stage"] { position: relative; }
+/* 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
+   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. */
+[part~="stage"] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
 /* 16:9 until the media says otherwise: a bare video measures 300 by 150 and
    would jump to its size on metadata. Auto first, so the natural ratio wins
-   once it is known. */
-::slotted(video) { display: block; width: 100%; aspect-ratio: auto 16 / 9; }
+   once it is known. Capped at the stage, and contained, so a box shorter
+   than the picture letterboxes it and a narrower one pillarboxes it. */
+::slotted(video) {
+  display: block;
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  object-fit: contain;
+  aspect-ratio: auto 16 / 9;
+}
 :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 stage takes the height and the video sits in it. The
-   height comes from the browser, which gives the fullscreen element the
-   whole screen with !important, 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. The error surface, which sits
-   under the stage in the page, goes over its foot instead. */
-:host(:fullscreen) { background: #000; }
-:host(:fullscreen) [part~="stage"] { height: 100%; display: flex; }
-:host(:fullscreen) ::slotted(video) { height: 100%; object-fit: contain; }
+   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. */
+:host(:fullscreen) ::slotted(video) { flex: 1; }
 :host(:fullscreen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
-:host(:-webkit-full-screen) { background: #000; }
-:host(:-webkit-full-screen) [part~="stage"] { height: 100%; display: flex; }
-:host(:-webkit-full-screen) ::slotted(video) { height: 100%; object-fit: contain; }
+:host(:-webkit-full-screen) ::slotted(video) { flex: 1; }
 :host(:-webkit-full-screen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
 [part~="error"] {
   display: flex;

package/dist/es2015/tags.js

@@ -13,6 +13,7 @@ const START_BUTTON = "mbx-start-button";
 const ERROR_SCREEN = "mbx-error-screen";
 const CURRENT_TIME = "mbx-current-time";
 const DURATION = "mbx-duration";
+const REMAINING_TIME = "mbx-remaining-time";
 const SEEK_BAR = "mbx-seek-bar";
 const LIVE_BUTTON = "mbx-live-button";
 const SPEED_MENU = "mbx-speed-menu";
@@ -24,4 +25,4 @@ const PANELS = "mbx-panels";
 const VOLUME = "mbx-volume";
 const CHAPTERS_MENU = "mbx-chapters-menu";
 //#endregion
-export { 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, SEEK_BAR, SKIP_BUTTON, SPACER, SPEED_MENU, START_BUTTON, SUBTITLES_MENU, VOLUME, VOLUME_SLIDER };
+export { 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 };

package/dist/index.d.ts

@@ -19,6 +19,7 @@ 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';
+import type { MbxRemainingTime } from './entries/remaining-time.js';
 import type { MbxSeekBar } from './entries/seek-bar.js';
 import type { MbxSkipButton } from './entries/skip-button.js';
 import type { MbxSpacer } from './entries/spacer.js';
@@ -43,6 +44,7 @@ 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';
+export { MbxRemainingTime } from './entries/remaining-time.js';
 export { MbxSeekBar } from './entries/seek-bar.js';
 export { MbxSkipButton } from './entries/skip-button.js';
 export { MbxSpacer } from './entries/spacer.js';
@@ -68,6 +70,7 @@ declare global {
         'mbx-error-screen': MbxErrorScreen;
         'mbx-current-time': MbxCurrentTime;
         'mbx-duration': MbxDuration;
+        'mbx-remaining-time': MbxRemainingTime;
         'mbx-seek-bar': MbxSeekBar;
         'mbx-live-button': MbxLiveButton;
         'mbx-speed-menu': MbxSpeedMenu;

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

@@ -13,6 +13,7 @@ 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';
+export { MbxRemainingTime } from './entries/remaining-time.js';
 export { MbxSeekBar } from './entries/seek-bar.js';
 export { MbxSkipButton } from './entries/skip-button.js';
 export { MbxSpacer } from './entries/spacer.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AA+BA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,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,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":"AAgCA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,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"}

package/dist/style.d.ts

@@ -3,6 +3,12 @@
  * error surface under native controls. Every control carries its own sheet.
  * Two rules govern them.
  *
+ * The box is black and the picture is centred in it, letterboxed or
+ * pillarboxed by `object-fit: contain`, whatever height or ratio the page
+ * gives the element: what fullscreen always did, now the default. With no
+ * height from the page the stage is as tall as the picture and none of it
+ * shows.
+ *
  * Nothing carries `!important`. For normal declarations the outer tree wins
  * over the shadow tree, so any `::part()` rule the page writes beats these
  * whatever its specificity; an `!important` here would invert that and make
@@ -11,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  --mbx-surface: #101114;\n  --mbx-text: #f2f3f5;\n  --mbx-muted: #9aa0a6;\n  --mbx-accent: #5b8cff;\n  --mbx-error: #ffb4ab;\n  --mbx-live: #ff4d4d;\n  --mbx-radius: 4px;\n  --mbx-gap: 10px;\n  --mbx-pad: 8px;\n  --mbx-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n}\n[part~=\"stage\"] { position: relative; }\n/* 16:9 until the media says otherwise: a bare video measures 300 by 150 and\n   would jump to its size on metadata. Auto first, so the natural ratio wins\n   once it is known. */\n::slotted(video) { display: block; width: 100%; aspect-ratio: auto 16 / 9; }\n: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 stage takes the height and the video sits in it. The\n   height comes from the browser, which gives the fullscreen element the\n   whole screen with !important, and not from a display on the host:\n   a page's own \"mattebox-player { display: block }\" beats a :host()\n   rule, so nothing here may depend on one. The error surface, which sits\n   under the stage in the page, goes over its foot instead. */\n:host(:fullscreen) { background: #000; }\n:host(:fullscreen) [part~=\"stage\"] { height: 100%; display: flex; }\n:host(:fullscreen) ::slotted(video) { height: 100%; object-fit: contain; }\n:host(:fullscreen) [part~=\"error\"] { position: absolute; left: 0; right: 0; bottom: 0; }\n:host(:-webkit-full-screen) { background: #000; }\n:host(:-webkit-full-screen) [part~=\"stage\"] { height: 100%; display: flex; }\n:host(:-webkit-full-screen) ::slotted(video) { height: 100%; object-fit: contain; }\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, 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";
 //# 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;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,KAAK,s0EAyDjB,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK,8iFAwEjB,CAAC"}

package/dist/style.js

@@ -3,6 +3,12 @@
  * error surface under native controls. Every control carries its own sheet.
  * Two rules govern them.
  *
+ * The box is black and the picture is centred in it, letterboxed or
+ * pillarboxed by `object-fit: contain`, whatever height or ratio the page
+ * gives the element: what fullscreen always did, now the default. With no
+ * height from the page the stage is as tall as the picture and none of it
+ * shows.
+ *
  * Nothing carries `!important`. For normal declarations the outer tree wins
  * over the shadow tree, so any `::part()` rule the page writes beats these
  * whatever its specificity; an `!important` here would invert that and make
@@ -16,6 +22,7 @@ export const STYLE = `
   display: block;
   position: relative;
   outline: none;
+  background: #000;
   --mbx-surface: #101114;
   --mbx-text: #f2f3f5;
   --mbx-muted: #9aa0a6;
@@ -27,26 +34,40 @@ export const STYLE = `
   --mbx-pad: 8px;
   --mbx-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
 }
-[part~="stage"] { position: relative; }
+/* 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
+   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. */
+[part~="stage"] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
 /* 16:9 until the media says otherwise: a bare video measures 300 by 150 and
    would jump to its size on metadata. Auto first, so the natural ratio wins
-   once it is known. */
-::slotted(video) { display: block; width: 100%; aspect-ratio: auto 16 / 9; }
+   once it is known. Capped at the stage, and contained, so a box shorter
+   than the picture letterboxes it and a narrower one pillarboxes it. */
+::slotted(video) {
+  display: block;
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+  object-fit: contain;
+  aspect-ratio: auto 16 / 9;
+}
 :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 stage takes the height and the video sits in it. The
-   height comes from the browser, which gives the fullscreen element the
-   whole screen with !important, 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. The error surface, which sits
-   under the stage in the page, goes over its foot instead. */
-:host(:fullscreen) { background: #000; }
-:host(:fullscreen) [part~="stage"] { height: 100%; display: flex; }
-:host(:fullscreen) ::slotted(video) { height: 100%; object-fit: contain; }
+   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. */
+:host(:fullscreen) ::slotted(video) { flex: 1; }
 :host(:fullscreen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
-:host(:-webkit-full-screen) { background: #000; }
-:host(:-webkit-full-screen) [part~="stage"] { height: 100%; display: flex; }
-:host(:-webkit-full-screen) ::slotted(video) { height: 100%; object-fit: contain; }
+:host(:-webkit-full-screen) ::slotted(video) { flex: 1; }
 :host(:-webkit-full-screen) [part~="error"] { position: absolute; left: 0; right: 0; bottom: 0; }
 [part~="error"] {
   display: flex;

package/dist/style.js.map

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

package/dist/tags.d.ts

@@ -12,6 +12,7 @@ export declare const START_BUTTON = "mbx-start-button";
 export declare const ERROR_SCREEN = "mbx-error-screen";
 export declare const CURRENT_TIME = "mbx-current-time";
 export declare const DURATION = "mbx-duration";
+export declare const REMAINING_TIME = "mbx-remaining-time";
 export declare const SEEK_BAR = "mbx-seek-bar";
 export declare const LIVE_BUTTON = "mbx-live-button";
 export declare const SPEED_MENU = "mbx-speed-menu";

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,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,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,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"}