@mattebox/player 0.4.0 → 0.6.0

package/dist/elements/title.js

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

package/dist/elements/title.js.map

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

package/dist/entries/spinner.d.ts

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

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

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

package/dist/entries/spinner.js

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

package/dist/entries/spinner.js.map

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

package/dist/entries/title.d.ts

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

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

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

package/dist/entries/title.js

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

package/dist/entries/title.js.map

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/es2015/controls/menu.js

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

package/dist/es2015/element.js

@@ -1,11 +1,10 @@
-import { CONTROL_BAR, PANELS, PLAYER } from "./tags.js";
-import { composeBar, composePanels } from "./compose.js";
 import { namespaces } from "./namespaces.js";
-import _asyncToGenerator from "./_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/asyncToGenerator.js";
+import _asyncToGenerator from "./_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/asyncToGenerator.js";
 import { drmGuard, resolvePreset } from "./presets.js";
 import { STYLE } from "./style.js";
 import { errorSurface } from "./surface.js";
-import _objectSpread2 from "./_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/objectSpread2.js";
+import { PLAYER } from "./tags.js";
+import _objectSpread2 from "./_virtual/_@oxc-project_runtime@0.150.0/helpers/esm/objectSpread2.js";
 import { createPlayer, inferType, matteboxHandler, nativeHandler } from "@mattebox/player-core";
 //#region src/element.ts
 /** Attributes forwarded onto the video as attributes, never as properties. */
@@ -33,11 +32,19 @@ const OWN = [
 const CHAPTERS = "chapters";
 /**
 * The one attribute whose meaning the element owns: `native` keeps the
-* browser's controls on the video, `custom` swaps them for the bar, `none`
-* leaves the video bare for a page that draws its own. Anything else is
-* `native`. Changing it swaps the bar without touching the session.
+* browser's controls on the video, `custom` swaps them for the controls the
+* page placed inside, `none` takes the browser's off and hides every child
+* but the video. Anything else is `native`. Changing it never touches the
+* session.
 */
 const CONTROLS = "controls";
+/**
+* Inline playback, on until the page writes `playsinline="false"`, the way
+* `spellcheck` and `draggable` are on until told otherwise. An iPhone takes
+* a video without `playsinline` to its own fullscreen on play, where no
+* control the page placed shows. Changing it never reloads.
+*/
+const PLAYSINLINE = "playsinline";
 /** The video's state, as attributes on the element, read on the events the video fires for it. */
 const STATE_EVENTS = [
 	"play",
@@ -46,7 +53,11 @@ const STATE_EVENTS = [
 	"emptied",
 	"volumechange",
 	"loadedmetadata",
-	"resize"
+	"resize",
+	"playing",
+	"waiting",
+	"stalled",
+	"canplay"
 ];
 /** Every stage the engine ships. A narrower preset is optimization. */
 const DEFAULT_PRESET = "full";
@@ -68,7 +79,8 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 			...FORWARDED,
 			...OWN,
 			CONTROLS,
-			CHAPTERS
+			CHAPTERS,
+			PLAYSINLINE
 		];
 	}
 	/**
@@ -84,20 +96,22 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 	constructor(options) {
 		super();
 		this.options = options !== null && options !== void 0 ? options : defaults;
-		this.composed = [];
-		this.settled = false;
 		this.focusable = false;
 		this.track = null;
 		this.core = null;
 		this.current = null;
 		this.failure = null;
 		this.reflecting = false;
+		this.started = false;
+		this.waiting = false;
 		this.offs = [];
 		this.queue = Promise.resolve();
 		this.pending = false;
 		this.media = document.createElement("video");
 		this.media.controls = true;
+		this.media.setAttribute(PLAYSINLINE, "");
 		for (const name of STATE_EVENTS) this.media.addEventListener(name, () => {
+			this.note(name);
 			this.reflect();
 		});
 		this.media.addEventListener("playing", () => {
@@ -130,8 +144,8 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 	/**
 	* The fatal error of the current load, or null once a load starts or
 	* playback resumes. The `error` event says when; this says what, for a
-	* control that attaches after the event, such as the default composition
-	* behind a source that fails while the page is still parsing.
+	* control that attaches after the event, such as an error screen parsed
+	* after a source that failed while the page was still loading.
 	*/
 	get error() {
 		return this.failure;
@@ -140,17 +154,19 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		if (this.media.parentNode !== this) this.append(this.media);
 		for (const name of FORWARDED) this.forward(name);
 		this.reflect();
-		if (!this.settled) this.settle();
 		this.reload();
 	}
-	/** Decides on the default composition once the children are all in, then on every mode change. */
-	settle() {
-		const done = () => {
-			this.settled = true;
-			this.mode();
-		};
-		if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", done, { once: true });
-		else queueMicrotask(done);
+	/** The two states the video does not hold: whether it has played once, and whether it waits for data. */
+	note(event) {
+		if (event === "playing") {
+			this.started = true;
+			this.waiting = false;
+		} else if (event === "waiting" || event === "stalled") this.waiting = true;
+		else if (event === "canplay") this.waiting = false;
+		else if (event === "emptied") {
+			this.started = false;
+			this.waiting = false;
+		}
 	}
 	/** The video's state on the element, for `mattebox-player[paused]` and the like. */
 	reflect() {
@@ -161,6 +177,8 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		this.toggleAttribute("ended", video.ended);
 		this.toggleAttribute("muted", video.muted);
 		this.toggleAttribute("audio", this.audio());
+		this.toggleAttribute("started", this.started);
+		this.toggleAttribute("waiting", this.waiting);
 		this.reflecting = false;
 	}
 	/**
@@ -194,14 +212,18 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 			this.chapters();
 			return;
 		}
+		if (name === PLAYSINLINE) {
+			this.media.toggleAttribute(PLAYSINLINE, this.getAttribute(PLAYSINLINE) !== "false");
+			return;
+		}
 		if (name === "preset") this.enqueue(() => this.discard());
 		if (name === "src" || name === "type") this.toggleAttribute("audio", this.audio());
 		this.reload();
 	}
 	/**
-	* Applies the `controls` attribute: the video's own controls, the
-	* tabindex, and the default composition for the mode where the page
-	* wrote none. The controls themselves are elements and attach on their own.
+	* Applies the `controls` attribute: the video's own controls and the
+	* tabindex. The controls themselves are elements the page placed, and
+	* they attach on their own; the element appends none.
 	*/
 	mode() {
 		const value = this.getAttribute(CONTROLS);
@@ -215,14 +237,6 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 			this.tabIndex = 0;
 			this.focusable = true;
 		}
-		if (!this.settled) return;
-		for (const node of this.composed) node.remove();
-		this.composed = [];
-		const own = custom ? CONTROL_BAR : PANELS;
-		if (this.querySelector(`:scope > ${own}`) === null) {
-			this.composed = custom ? composeBar() : composePanels();
-			this.append(...this.composed);
-		}
 	}
 	/** Keeps a hidden chapters track on the video for the `chapters` attribute, or none. */
 	chapters() {

package/dist/es2015/elements/spinner.js

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

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

@@ -52,7 +52,10 @@ var MbxStartButton = class extends Component {
 		this.listen(video, [
 			"play",
 			"pause",
-			"ended"
+			"ended",
+			"waiting",
+			"stalled",
+			"canplay"
 		], () => {
 			this.render();
 		});
@@ -111,13 +114,13 @@ var MbxStartButton = class extends Component {
 		if (cramped !== wasCramped) this.render();
 	}
 	render() {
-		var _this$player2, _this$getAttribute;
+		var _this$player2, _this$getAttribute, _this$player3;
 		const video = (_this$player2 = this.player) === null || _this$player2 === void 0 ? void 0 : _this$player2.video;
 		if (video === void 0) return;
 		const state = video.ended ? "replay" : "play";
 		show(this.slots, state);
 		this.button.setAttribute("aria-label", (_this$getAttribute = this.getAttribute(`label-${state}`)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : state === "play" ? "Play" : "Replay");
-		this.hidden = this.failed || !video.paused;
+		this.hidden = this.failed || !video.paused || ((_this$player3 = this.player) === null || _this$player3 === void 0 ? void 0 : _this$player3.hasAttribute("waiting")) === true;
 	}
 };
 //#endregion