@mattebox/player 0.1.0 → 0.3.0

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

@@ -0,0 +1,299 @@
+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";
+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;
+  inset: auto 0 0 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 40px 16px 12px;
+  color: var(--mbx-text);
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+  font: 500 16px/1.2 var(--mbx-font);
+  transition: opacity 0.2s;
+}
+: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; }
+}
+`;
+function end(video) {
+	if (Number.isFinite(video.duration)) return video.duration;
+	const ranges = video.seekable;
+	return ranges.length > 0 ? ranges.end(ranges.length - 1) : video.currentTime;
+}
+function toggle(video) {
+	if (video.paused) video.play().catch(() => void 0);
+	else video.pause();
+}
+var MbxControlBar = class extends Component {
+	static get observedAttributes() {
+		return ["idle-ms", "seek-step"];
+	}
+	constructor() {
+		super();
+		this.timer = void 0;
+		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);
+		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() {
+		return {
+			top: this.seekRow.getBoundingClientRect().top,
+			bottom: this.getBoundingClientRect().bottom
+		};
+	}
+	held(player) {
+		if (player.video.paused) return true;
+		if (this.querySelector("[open]") !== null) return true;
+		if (!this.keyboard) return false;
+		const active = this.getRootNode().activeElement;
+		return active !== null && this.contains(active);
+	}
+	idle(player, on) {
+		var _this$cues;
+		if (this.hasAttribute("idle") === on) return;
+		this.toggleAttribute("idle", on);
+		player.toggleAttribute("idle", on);
+		(_this$cues = this.cues) === null || _this$cues === void 0 || _this$cues.lifted(!on);
+	}
+	sleep(player) {
+		this.timer = void 0;
+		if (this.held(player)) {
+			this.timer = setTimeout(() => this.sleep(player), number(this, "idle-ms", IDLE_MS));
+			return;
+		}
+		this.idle(player, true);
+	}
+	wake(player) {
+		clearTimeout(this.timer);
+		this.idle(player, false);
+		this.timer = setTimeout(() => this.sleep(player), number(this, "idle-ms", IDLE_MS));
+	}
+	key(player, event) {
+		this.keyboard = true;
+		this.wake(player);
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		const video = player.video;
+		const onButton = event.composedPath()[0] instanceof HTMLButtonElement;
+		switch (event.key) {
+			case " ":
+				if (onButton) return;
+				toggle(video);
+				break;
+			case "k":
+			case "K":
+				toggle(video);
+				break;
+			case "m":
+			case "M":
+				video.muted = !video.muted;
+				break;
+			case "f":
+			case "F":
+				var _this$screen;
+				(_this$screen = this.screen) === null || _this$screen === void 0 || _this$screen.toggle();
+				break;
+			case "ArrowLeft":
+				video.currentTime = Math.max(0, video.currentTime - number(this, "seek-step", SEEK_STEP));
+				break;
+			case "ArrowRight":
+				video.currentTime = Math.min(end(video), video.currentTime + number(this, "seek-step", SEEK_STEP));
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	}
+	attach(player) {
+		const video = player.video;
+		cueStyle();
+		this.cues = cueLift(video, player, () => this.covered());
+		const screen = fullscreen(player, video);
+		this.screen = screen;
+		const reflect = () => {
+			player.toggleAttribute("fullscreen", screen.active());
+		};
+		this.keep(screen.watch(reflect));
+		reflect();
+		const pointer = () => {
+			this.keyboard = false;
+			this.wake(player);
+		};
+		const key = (event) => {
+			this.key(player, event);
+		};
+		const click = (event) => {
+			if (event.composedPath()[0] === video) toggle(video);
+		};
+		this.listen(player, ["pointermove", "pointerdown"], pointer);
+		player.addEventListener("keydown", key);
+		player.addEventListener("click", click);
+		this.keep(() => {
+			player.removeEventListener("keydown", key);
+			player.removeEventListener("click", click);
+		});
+		this.listen(video, [
+			"play",
+			"pause",
+			"ended"
+		], () => {
+			this.wake(player);
+		});
+		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$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;
+		this.removeAttribute("idle");
+		player.removeAttribute("idle");
+		player.removeAttribute("fullscreen");
+	}
+};
+//#endregion
+export { MbxControlBar };

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

@@ -0,0 +1,27 @@
+import { format } from "../controls/time.js";
+import { live, span, wall } from "../controls/session.js";
+import { TimeElement } from "./time-element.js";
+//#region src/elements/current-time.ts
+/**
+* <mbx-current-time>: the position, "1:23". On a live stream it reads the
+* wall clock when `engine.pdt` can say it, "14:23:05", which is what a
+* viewer of a broadcast wants to know, and the distance behind the edge
+* otherwise, "-0:10". While the player says the stream is live but not
+* seekable, which the seek bar decides, there is no position to show and
+* the element hides.
+*/
+var MbxCurrentTime = class extends TimeElement {
+	render() {
+		var _wall;
+		const player = this.player;
+		if (player === null) return;
+		const video = player.video;
+		const engine = player.engine;
+		const on = live(engine) !== void 0;
+		const time = video.currentTime;
+		this.text.data = on ? (_wall = wall(engine, time)) !== null && _wall !== void 0 ? _wall : `-${format(span(video, engine).end - time)}` : format(time);
+		this.hidden = on && player.hasAttribute("live") && !player.hasAttribute("seekable");
+	}
+};
+//#endregion
+export { MbxCurrentTime };

package/dist/es2015/elements/drm-badge.js

@@ -0,0 +1,138 @@
+import { namespaces } from "../namespaces.js";
+import { el } from "../dom.js";
+import { icon } from "../controls/icons.js";
+import { fill } from "../labels.js";
+import { Component } from "./component.js";
+import { style } from "./shared.js";
+//#region src/elements/drm-badge.ts
+const STYLE = `
+:host { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--mbx-muted); border-radius: var(--mbx-radius); cursor: default; }
+:host([hidden]) { display: none; }
+:host(:focus-visible) { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
+[part~="tooltip"] {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 8px;
+  padding: 8px 10px;
+  background: rgba(16, 17, 20, 0.95);
+  border-radius: var(--mbx-radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  color: var(--mbx-text);
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: left;
+  white-space: nowrap;
+  pointer-events: none;
+}
+[part~="tooltip"][hidden] { display: none; }
+[part~="tooltip-title"] { font-weight: 600; }
+[part~="tooltip-text"] { color: var(--mbx-muted); }
+`;
+/** The name a viewer knows a key system by. */
+function keySystemName(id) {
+	if (id.startsWith("com.widevine")) return "Widevine";
+	if (id.startsWith("com.microsoft.playready")) return "PlayReady";
+	if (id.startsWith("com.apple.fps")) return "FairPlay";
+	return id;
+}
+var MbxDrmBadge = class extends Component {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-key",
+			"label-keys",
+			"label-no-key"
+		];
+	}
+	constructor() {
+		super();
+		this.engine = null;
+		const root = this.attachShadow({ mode: "open" });
+		const slot = document.createElement("slot");
+		slot.name = "icon";
+		slot.append(icon("lock-closed"));
+		this.tooltip = el("div", "tooltip");
+		this.tooltip.setAttribute("role", "tooltip");
+		this.system = el("div", "tooltip-title");
+		this.system_id = el("div", "tooltip-text");
+		this.keys = el("div", "tooltip-text");
+		this.tooltip.append(this.system, this.system_id, this.keys);
+		this.tooltip.hidden = true;
+		root.append(style(STYLE), slot, this.tooltip);
+		const show = () => {
+			this.tooltip.hidden = false;
+		};
+		const hide = () => {
+			this.tooltip.hidden = true;
+		};
+		this.addEventListener("pointerenter", show);
+		this.addEventListener("pointerleave", hide);
+		this.addEventListener("focus", show);
+		this.addEventListener("blur", hide);
+	}
+	/** Named and focusable before attaching: a constructor must not add attributes. */
+	connectedCallback() {
+		if (!this.hasAttribute("role")) this.setAttribute("role", "img");
+		if (!this.hasAttribute("tabindex")) this.tabIndex = 0;
+		if (this.player === null) this.hidden = true;
+		super.connectedCallback();
+	}
+	/** "3 keys: usable ×2, expired", or "no key yet". */
+	sessionsText(sessions) {
+		var _this$getAttribute, _this$getAttribute2, _this$getAttribute3;
+		if (sessions.length === 0) return (_this$getAttribute = this.getAttribute("label-no-key")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "no key yet";
+		const counts = /* @__PURE__ */ new Map();
+		for (const session of sessions) {
+			var _counts$get;
+			counts.set(session.status, ((_counts$get = counts.get(session.status)) !== null && _counts$get !== void 0 ? _counts$get : 0) + 1);
+		}
+		const parts = [];
+		for (const [status, count] of counts) parts.push(count > 1 ? `${status} ×${count}` : status);
+		const template = sessions.length === 1 ? (_this$getAttribute2 = this.getAttribute("label-key")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "{count} key: {statuses}" : (_this$getAttribute3 = this.getAttribute("label-keys")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "{count} keys: {statuses}";
+		return fill(template, {
+			count: sessions.length,
+			statuses: parts.join(", ")
+		});
+	}
+	attach(player) {
+		this.follow(player, (engine) => {
+			this.engine = engine;
+			this.render();
+			if (engine === null || namespaces(engine).drm === void 0) return void 0;
+			const tick = () => {
+				this.render();
+			};
+			const offs = [
+				engine.on("drm:keysystem", tick),
+				engine.on("drm:keystatus", tick),
+				engine.on("drm:encrypted", tick)
+			];
+			return () => {
+				for (const off of offs) off();
+			};
+		});
+	}
+	detach() {
+		this.tooltip.hidden = true;
+	}
+	render() {
+		var _drm$keySystem, _this$getAttribute4;
+		const drm = this.engine === null ? void 0 : namespaces(this.engine).drm;
+		const name = (_drm$keySystem = drm === null || drm === void 0 ? void 0 : drm.keySystem) !== null && _drm$keySystem !== void 0 ? _drm$keySystem : null;
+		this.hidden = name === null;
+		if (drm === void 0 || name === null) return;
+		const keys = this.sessionsText(drm.sessions);
+		const system = keySystemName(name);
+		this.system.textContent = system;
+		this.system_id.textContent = name;
+		this.keys.textContent = keys;
+		this.setAttribute("aria-label", fill((_this$getAttribute4 = this.getAttribute("label")) !== null && _this$getAttribute4 !== void 0 ? _this$getAttribute4 : "Protected by {system}, {keys}", {
+			system,
+			keys
+		}));
+	}
+};
+//#endregion
+export { MbxDrmBadge };

package/dist/es2015/elements/duration.js

@@ -0,0 +1,23 @@
+import { format } from "../controls/time.js";
+import { live, span } from "../controls/session.js";
+import { TimeElement } from "./time-element.js";
+//#region src/elements/duration.ts
+/**
+* <mbx-duration>: the duration, "4:56", once the metadata is in. A live
+* stream has none, so the element hides while the stream is live.
+*/
+var MbxDuration = class extends TimeElement {
+	constructor() {
+		super(":host { text-align: right; }");
+	}
+	render() {
+		const player = this.player;
+		if (player === null) return;
+		const engine = player.engine;
+		const on = live(engine) !== void 0;
+		this.hidden = on;
+		if (!on) this.text.data = format(span(player.video, engine).end);
+	}
+};
+//#endregion
+export { MbxDuration };

package/dist/es2015/elements/error-screen.js

@@ -0,0 +1,97 @@
+import { el } from "../dom.js";
+import { Component } from "./component.js";
+import { style } from "./shared.js";
+//#region src/elements/error-screen.ts
+const STYLE = `
+:host {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.75);
+  color: var(--mbx-text);
+  font: 400 15px/1.4 var(--mbx-font);
+  text-align: center;
+}
+:host([hidden]) { display: none; }
+[part~="box"] { display: flex; flex-direction: column; align-items: center; gap: 8px; }
+[part~="title"] { font-size: 18px; font-weight: 600; }
+[part~="detail"] { font-family: monospace; font-size: 13px; color: var(--mbx-error); }
+[part~="retry"] {
+  height: 36px;
+  padding: 0 16px;
+  font: inherit;
+  font-weight: 600;
+  color: inherit;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+}
+[part~="retry"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+`;
+var MbxErrorScreen = class extends Component {
+	static get observedAttributes() {
+		return ["label-title", "label-retry"];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		const box = el("div", "box");
+		this.title_ = el("div", "title");
+		this.category = el("span", "category");
+		this.code = el("span", "code");
+		const detail = el("div", "detail");
+		detail.append(this.category, el("span", "separator", " · "), this.code);
+		this.retry = el("button", "retry");
+		this.retry.type = "button";
+		this.retry.addEventListener("click", () => {
+			const player = this.player;
+			const src = player === null || player === void 0 ? void 0 : player.getAttribute("src");
+			if (player !== null && player !== void 0 && src !== null && src !== void 0) player.setAttribute("src", src);
+		});
+		box.append(this.title_, detail, this.retry);
+		root.append(style(STYLE), box);
+	}
+	/** Hidden and named before attaching: a constructor must not add attributes. */
+	connectedCallback() {
+		if (this.player === null) this.hidden = true;
+		if (!this.hasAttribute("role")) this.setAttribute("role", "alert");
+		super.connectedCallback();
+	}
+	show(error) {
+		this.category.textContent = error.category;
+		this.code.textContent = error.code;
+		this.hidden = false;
+	}
+	attach(player) {
+		const failure = (event) => {
+			const error = event.detail;
+			if (error.fatal) this.show(error);
+		};
+		player.addEventListener("error", failure);
+		this.keep(() => {
+			player.removeEventListener("error", failure);
+		});
+		this.listen(player.video, ["playing", "loadstart"], () => {
+			this.hidden = true;
+		});
+		this.listen(player, ["sourcechange"], () => {
+			this.hidden = true;
+		});
+		if (player.error !== null) this.show(player.error);
+		this.render();
+	}
+	detach() {
+		this.hidden = true;
+	}
+	render() {
+		var _this$getAttribute, _this$getAttribute2;
+		this.title_.textContent = (_this$getAttribute = this.getAttribute("label-title")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Playback failed";
+		this.retry.textContent = (_this$getAttribute2 = this.getAttribute("label-retry")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Retry";
+	}
+};
+//#endregion
+export { MbxErrorScreen };

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

@@ -0,0 +1,49 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+import { fullscreen } from "../controls/fullscreen.js";
+//#region src/elements/fullscreen-button.ts
+const STATES = ["enter", "exit"];
+var MbxFullscreenButton = class extends Component {
+	static get observedAttributes() {
+		return ["label-enter", "label-exit"];
+	}
+	constructor() {
+		super();
+		this.api = null;
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.slots = iconSlots(STATES, (state) => icon(state === "enter" ? "fullscreen" : "fullscreen-exit"));
+		for (const state of STATES) this.button.append(this.slots[state]);
+		this.button.addEventListener("click", () => {
+			var _this$api;
+			(_this$api = this.api) === null || _this$api === void 0 || _this$api.toggle();
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	attach(player) {
+		const api = fullscreen(player, player.video);
+		this.api = api;
+		this.hidden = !api.supported;
+		this.keep(api.watch(() => {
+			this.render();
+		}));
+		this.render();
+	}
+	detach() {
+		this.api = null;
+	}
+	render() {
+		var _this$getAttribute, _this$getAttribute2;
+		const player = this.player;
+		if (player === null || this.api === null) return;
+		const active = this.api.active();
+		show(this.slots, active ? "exit" : "enter");
+		this.button.setAttribute("aria-label", active ? (_this$getAttribute = this.getAttribute("label-exit")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Exit fullscreen" : (_this$getAttribute2 = this.getAttribute("label-enter")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Enter fullscreen");
+		player.toggleAttribute("fullscreen", active);
+	}
+};
+//#endregion
+export { MbxFullscreenButton };