@mattebox/player 0.4.0 → 0.5.0

package/dist/es2015/element.js

@@ -46,7 +46,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";
@@ -92,12 +96,15 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		this.current = null;
 		this.failure = null;
 		this.reflecting = false;
+		this.started = false;
+		this.waiting = false;
 		this.offs = [];
 		this.queue = Promise.resolve();
 		this.pending = false;
 		this.media = document.createElement("video");
 		this.media.controls = true;
 		for (const name of STATE_EVENTS) this.media.addEventListener(name, () => {
+			this.note(name);
 			this.reflect();
 		});
 		this.media.addEventListener("playing", () => {
@@ -152,6 +159,18 @@ var MatteboxPlayerElement = class MatteboxPlayerElement extends HTMLElement {
 		if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", done, { once: true });
 		else queueMicrotask(done);
 	}
+	/** The two states the video does not hold: whether it has played once, and whether it waits for data. */
+	note(event) {
+		if (event === "playing") {
+			this.started = true;
+			this.waiting = false;
+		} else if (event === "waiting" || event === "stalled") this.waiting = true;
+		else if (event === "canplay") this.waiting = false;
+		else if (event === "emptied") {
+			this.started = false;
+			this.waiting = false;
+		}
+	}
 	/** The video's state on the element, for `mattebox-player[paused]` and the like. */
 	reflect() {
 		const video = this.media;
@@ -161,6 +180,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;
 	}
 	/**

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

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

@@ -40,12 +40,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, MbxPanels, MbxPipButton, MbxPlayButton, MbxQualityMenu, MbxRemainingTime, MbxSeekBar, MbxSkipButton, MbxSpacer, MbxSpeedMenu, MbxSpinner, MbxStartButton, MbxSubtitlesMenu, MbxTitle, MbxVolume, MbxVolumeSlider };

package/dist/es2015/style.js

@@ -60,6 +60,11 @@ 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; }
 :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

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";
@@ -26,4 +28,4 @@ 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, PANELS, 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

@@ -25,8 +25,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';
@@ -51,8 +53,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 +74,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;

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":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,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,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;AAC7D,YAAY,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,qBAAqB,CAAC;QACzC,iBAAiB,EAAE,aAAa,CAAC;QACjC,YAAY,EAAE,SAAS,CAAC;QACxB,iBAAiB,EAAE,aAAa,CAAC;QACjC,iBAAiB,EAAE,aAAa,CAAC;QACjC,mBAAmB,EAAE,eAAe,CAAC;QACrC,YAAY,EAAE,SAAS,CAAC;QACxB,iBAAiB,EAAE,aAAa,CAAC;QACjC,gBAAgB,EAAE,YAAY,CAAC;QAC/B,uBAAuB,EAAE,mBAAmB,CAAC;QAC7C,kBAAkB,EAAE,cAAc,CAAC;QACnC,kBAAkB,EAAE,cAAc,CAAC;QACnC,aAAa,EAAE,UAAU,CAAC;QAC1B,WAAW,EAAE,QAAQ,CAAC;QACtB,kBAAkB,EAAE,cAAc,CAAC;QACnC,cAAc,EAAE,WAAW,CAAC;QAC5B,oBAAoB,EAAE,gBAAgB,CAAC;QACvC,cAAc,EAAE,UAAU,CAAC;QAC3B,iBAAiB,EAAE,aAAa,CAAC;QACjC,gBAAgB,EAAE,YAAY,CAAC;QAC/B,kBAAkB,EAAE,cAAc,CAAC;QACnC,oBAAoB,EAAE,gBAAgB,CAAC;QACvC,gBAAgB,EAAE,YAAY,CAAC;QAC/B,oBAAoB,EAAE,gBAAgB,CAAC;QACvC,eAAe,EAAE,WAAW,CAAC;QAC7B,mBAAmB,EAAE,eAAe,CAAC;QACrC,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/index.js

@@ -19,8 +19,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":"AAmCA,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,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/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, 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/* 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: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;;;;;;;;;;;;;;;;;;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,24FA6EjB,CAAC"}

package/dist/style.js

@@ -59,6 +59,11 @@ 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; }
 :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

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EpB,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";

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,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';

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