@bubo-squared/gyroview 0.1.0

package/dist/packages/player/src/controls/controlsMarkup.js

@@ -0,0 +1,85 @@
+import { STABILIZATION_MODES } from "../../../core/src/domain/motion/stabilization/Stabilizer.js";
+import { VIEW_MODES } from "../../../core/src/domain/view/ViewMode.js";
+import "../../../core/src/index.js";
+import controls_default from "./controls.js";
+import { ICONS } from "./icons.js";
+//#region ../../packages/player/src/controls/controlsMarkup.ts
+/**
+* The bar's choice menus, by the name their parts are found under.
+*/
+var ChoiceMenuName = {
+	Stabilization: "stabilization",
+	ViewMode: "view-mode"
+};
+/**
+* The class names of a choice menu's button and popup, for the markup and the query alike.
+*/
+function choiceMenuClasses(name) {
+	return {
+		button: `${name}-button`,
+		popup: `${name}-menu`
+	};
+}
+function menuItemsOf(choices) {
+	return choices.map((choice) => `<button type="button" role="menuitemradio" aria-checked="false" tabindex="-1" data-choice="${choice}"></button>`).join("");
+}
+/**
+* A button opening a popup of choices; the popup's title repeats the button's label for sight.
+* The words are the wording's to fill in.
+*/
+function choiceMenuOf(menu) {
+	const classes = choiceMenuClasses(menu.name);
+	return `<div class="choice">
+        <button class="${classes.button}" type="button" data-label="${menu.title}" aria-haspopup="menu" aria-expanded="false">${menu.icon}</button>
+        <div class="popup ${classes.popup}" hidden>
+          <p class="popup-title" aria-hidden="true" data-text="${menu.title}"></p>
+          <div role="menu" data-label="${menu.title}" data-choices="${menu.choices}">${menu.items}</div>
+        </div>
+      </div>`;
+}
+function pictureMenusMarkup() {
+	return choiceMenuOf({
+		name: ChoiceMenuName.Stabilization,
+		title: "stabilization",
+		icon: ICONS.stabilization,
+		choices: "stabilizationModes",
+		items: menuItemsOf(STABILIZATION_MODES)
+	}) + choiceMenuOf({
+		name: ChoiceMenuName.ViewMode,
+		title: "viewMode",
+		icon: ICONS.viewMode,
+		choices: "viewModes",
+		items: menuItemsOf(VIEW_MODES)
+	});
+}
+/**
+* The controls' stylesheet, which the element adopts beside its own.
+*/
+var CONTROLS_STYLES = controls_default;
+/**
+* The big play button and the control bar, for the element's stage; built when first asked for,
+* so a page importing only the package's types and errors carries none of it. Class names are
+* the contract with `queryControlParts` and `controls.css`. It holds no words, which the
+* wording fills in, nor the play and mute buttons' state-dependent labels and icons, which
+* those buttons give themselves when they are bound.
+*/
+function controlsMarkup() {
+	return `
+  <button class="big-play" part="big-play" type="button">${ICONS.play}</button>
+  <div class="controls" part="controls">
+    <input class="seek" type="range" min="0" max="0" step="0.01" value="0" data-label="seek" />
+    <div class="row">
+      <button class="play" type="button"></button>
+      <button class="stop" type="button" data-label="stop">${ICONS.stop}</button>
+      <span class="time">0:00 / 0:00</span>
+      <span class="spacer"></span>
+      <button class="mute" type="button" data-label="mute"></button>
+      <input class="volume" type="range" min="0" max="1" step="0.01" value="1" data-label="volume" />
+      <button class="reset-view" type="button" data-label="resetView">${ICONS.resetView}</button>
+      ${pictureMenusMarkup()}
+      <button class="fullscreen" type="button" data-label="fullscreen">${ICONS.fullscreen}</button>
+    </div>
+  </div>`;
+}
+//#endregion
+export { CONTROLS_STYLES, ChoiceMenuName, choiceMenuClasses, controlsMarkup };

package/dist/packages/player/src/controls/customControls.js

@@ -0,0 +1,59 @@
+import { messageOf } from "../../../core/src/shared/errors/GyroViewError.js";
+import "../../../core/src/index.js";
+import { bindKeyboard } from "./keyboard.js";
+import { ViewGestures } from "./ViewGestures.js";
+//#region ../../packages/player/src/controls/customControls.ts
+/**
+* The gestures `<gyro-view>` answers, for an interface of a page's own around the headless
+* player: a drag looks around (or moves a zoomed picture), a pinch or a wheel turn zooms toward
+* the fingers or the pointer, a tap plays or pauses. `surface` is the canvas or an element over
+* it. Returns what removes them.
+*/
+function attachViewGestures(surface, player, options = {}) {
+	const onTap = options.onTap ?? (() => {
+		togglePlayback(player);
+	});
+	const gestures = new ViewGestures(surface, player, onTap);
+	return () => {
+		gestures.detach();
+	};
+}
+/**
+* The keyboard shortcuts `<gyro-view>` answers, on `target`, which a page makes focusable: space
+* or K play and pause, J and L seek, S stops, the arrows look around (with Shift they seek), plus
+* and minus zoom, 0 resets the view, M mutes, F fills the screen and Escape leaves it. Returns
+* what removes them.
+*/
+function attachKeyboard(target, player, options = {}) {
+	const isFullscreen = () => target.matches(":fullscreen");
+	return bindKeyboard(target, {
+		player,
+		togglePlay: () => {
+			togglePlayback(player);
+		},
+		toggleFullscreen: options.toggleFullscreen ?? (() => {
+			isFullscreen() ? document.exitFullscreen() : target.requestFullscreen();
+		}),
+		isFullscreen,
+		exitFullscreen: () => {
+			document.exitFullscreen();
+		}
+	});
+}
+/**
+* Pauses, or starts playing and reports a refused start as the player's `warning`.
+*/
+function togglePlayback(player) {
+	if (!player.isPaused) {
+		player.pause();
+		return;
+	}
+	player.play().catch((error) => {
+		player.events.emit("warning", {
+			code: "playback-failed",
+			message: `playback could not start: ${messageOf(error)}`
+		});
+	});
+}
+//#endregion
+export { attachKeyboard, attachViewGestures, togglePlayback };

package/dist/packages/player/src/controls/formatTime.js

@@ -0,0 +1,19 @@
+//#region ../../packages/player/src/controls/formatTime.ts
+var SECONDS_PER_MINUTE = 60;
+var MINUTES_PER_HOUR = 60;
+/**
+* `m:ss`, or `h:mm:ss` from one hour on, as media players show it. Negative or unknown times
+* read as zero.
+*/
+function formatTime(totalSeconds) {
+	const whole = Number.isFinite(totalSeconds) ? Math.max(0, Math.floor(totalSeconds)) : 0;
+	const seconds = whole % SECONDS_PER_MINUTE;
+	const minutes = Math.floor(whole / SECONDS_PER_MINUTE) % MINUTES_PER_HOUR;
+	const hours = Math.floor(whole / 3600);
+	return hours > 0 ? `${hours}:${padded(minutes)}:${padded(seconds)}` : `${minutes}:${padded(seconds)}`;
+}
+function padded(value) {
+	return String(value).padStart(2, "0");
+}
+//#endregion
+export { formatTime };

package/dist/packages/player/src/controls/icons.js

@@ -0,0 +1,40 @@
+import { parseMarkup } from "./parseMarkup.js";
+//#region ../../packages/player/src/controls/icons.ts
+/**
+* Wraps an icon's shapes in a 24-unit square. Shapes are stroked in `currentColor` unless they
+* say otherwise, so every icon takes the controls' text colour.
+*/
+function icon(shapes) {
+	return `<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${shapes}</svg>`;
+}
+var SPEAKER = "<path d=\"M4 9.5v5h3.5L12 19V5L7.5 9.5z\" fill=\"currentColor\"/>";
+/**
+* The controls' icons, drawn as inline SVG in `currentColor` only: a text glyph is left to the
+* platform's fonts, some of which draw it as a colour emoji.
+*/
+var ICONS = {
+	play: icon("<path d=\"M8 5v14l11-7z\" fill=\"currentColor\"/>"),
+	pause: icon("<rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/>"),
+	stop: icon("<rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"1.5\" fill=\"currentColor\" stroke=\"none\"/>"),
+	sound: icon(`${SPEAKER}<path d="M15.5 9a4 4 0 0 1 0 6"/><path d="M18.5 6a8 8 0 0 1 0 12"/>`),
+	muted: icon(`${SPEAKER}<path d="M16 9.5l5 5M21 9.5l-5 5"/>`),
+	resetView: icon("<path d=\"M4.5 12a7.5 7.5 0 1 0 2.2-5.3\"/><path d=\"M4.5 4.5v4h4\"/>"),
+	stabilization: icon("<rect x=\"2.5\" y=\"8.5\" width=\"19\" height=\"7\" rx=\"3.5\"/><path d=\"M8.5 8.5v7M15.5 8.5v7\"/><circle cx=\"12\" cy=\"12\" r=\"1.8\" fill=\"currentColor\" stroke=\"none\"/>"),
+	viewMode: icon("<circle cx=\"12\" cy=\"12\" r=\"8.5\"/><ellipse cx=\"12\" cy=\"12\" rx=\"3.5\" ry=\"8.5\"/><path d=\"M3.5 12h17\"/>"),
+	fullscreen: icon("<path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\"/>")
+};
+var parsedIcons = /* @__PURE__ */ new Map();
+/**
+* A copy of an icon for a button to show; each is parsed once per page, so changing a button's
+* icon parses nothing.
+*/
+function iconNode(name) {
+	let parsed = parsedIcons.get(name);
+	if (!parsed) {
+		parsed = parseMarkup(ICONS[name]);
+		parsedIcons.set(name, parsed);
+	}
+	return parsed.cloneNode(true);
+}
+//#endregion
+export { ICONS, iconNode };

package/dist/packages/player/src/controls/keyboard.js

@@ -0,0 +1,118 @@
+//#region ../../packages/player/src/controls/keyboard.ts
+/**
+* Keys as `KeyboardEvent.key` reports them. Space and K play, J and L seek, S stops, the arrows
+* look around (with Shift they seek), M mutes, F fills the screen, 0 resets the view, plus and
+* minus zoom. Escape leaves fullscreen.
+*/
+var PLAIN_KEYS = /* @__PURE__ */ new Map([
+	[" ", "toggle-play"],
+	["k", "toggle-play"],
+	["j", "seek-back"],
+	["l", "seek-forward"],
+	["s", "stop"],
+	["m", "toggle-mute"],
+	["f", "toggle-fullscreen"],
+	["0", "reset-view"],
+	["+", "zoom-in"],
+	["=", "zoom-in"],
+	["-", "zoom-out"],
+	["ArrowLeft", "look-left"],
+	["ArrowRight", "look-right"],
+	["ArrowUp", "look-up"],
+	["ArrowDown", "look-down"]
+]);
+var SHIFTED_KEYS = /* @__PURE__ */ new Map([["ArrowLeft", "seek-back"], ["ArrowRight", "seek-forward"]]);
+/**
+* The player command a key press means, or undefined when the press is not a shortcut. A
+* character already carries what Shift did to it (`+` is Shift and `=` on a US keyboard), so
+* Shift picks other commands for the named keys only.
+*/
+function shortcutFor(press) {
+	if (press.hasSystemModifier) return void 0;
+	if (press.key.length === 1) return PLAIN_KEYS.get(press.key.toLowerCase());
+	return press.isShiftPressed ? SHIFTED_KEYS.get(press.key) : PLAIN_KEYS.get(press.key);
+}
+var LOOK_STEP_DEGREES = 5;
+function seekBy(delta) {
+	return ({ player }) => {
+		player.seek(player.currentTime + delta);
+	};
+}
+function lookBy(yawDelta, pitchDelta) {
+	return ({ player }) => {
+		player.turn(yawDelta, pitchDelta);
+	};
+}
+/**
+* What each command does; a command without an action does not compile.
+*/
+var ACTIONS = {
+	"toggle-play": (host) => {
+		host.togglePlay();
+	},
+	stop: ({ player }) => {
+		player.stop();
+	},
+	"seek-back": seekBy(-5),
+	"seek-forward": seekBy(5),
+	"toggle-mute": ({ player }) => {
+		player.setMuted(!player.isMuted);
+	},
+	"toggle-fullscreen": (host) => {
+		host.toggleFullscreen();
+	},
+	"reset-view": ({ player }) => {
+		player.resetView();
+	},
+	"zoom-in": ({ player }) => {
+		player.zoom(1);
+	},
+	"zoom-out": ({ player }) => {
+		player.zoom(-1);
+	},
+	"look-left": lookBy(-5, 0),
+	"look-right": lookBy(LOOK_STEP_DEGREES, 0),
+	"look-up": lookBy(0, LOOK_STEP_DEGREES),
+	"look-down": lookBy(0, -5)
+};
+/**
+* Turns key presses on the element into player commands until the returned function is called,
+* leaving the keys a focused control handles itself and the browser's shortcuts alone.
+*/
+function bindKeyboard(element, host) {
+	const listening = new AbortController();
+	element.addEventListener("keydown", (event) => {
+		if (event.key === "Escape" && host.isFullscreen()) {
+			host.exitFullscreen();
+			return;
+		}
+		const command = shortcutFor({
+			key: event.key,
+			isShiftPressed: event.shiftKey,
+			hasSystemModifier: event.ctrlKey || event.altKey || event.metaKey
+		});
+		if (!command || isControlsOwnKey(event)) return;
+		event.preventDefault();
+		ACTIONS[command](host);
+	}, { signal: listening.signal });
+	return () => {
+		listening.abort();
+	};
+}
+var SLIDER_KEYS = /* @__PURE__ */ new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown"
+]);
+var BUTTON_KEY = " ";
+/**
+* A slider steps with the arrows and a button presses with Space. A press from the shadow tree
+* reaches the element retargeted to it, so the control it started at is read from its path.
+*/
+function isControlsOwnKey(event) {
+	const [origin] = event.composedPath();
+	return origin instanceof HTMLInputElement ? SLIDER_KEYS.has(event.key) : origin instanceof HTMLButtonElement && event.key === BUTTON_KEY;
+}
+//#endregion
+export { bindKeyboard, shortcutFor };

package/dist/packages/player/src/controls/messages.js

@@ -0,0 +1,94 @@
+//#region ../../packages/player/src/controls/messages.ts
+var UNREACHABLE = "The video could not be loaded.";
+var UNSUPPORTED_BROWSER = "This browser cannot play this video.";
+var UNREADABLE = "This file cannot be played.";
+var FAILED = "The video could not be played.";
+var DEFAULT_MESSAGES = {
+	labels: {
+		player: "360° video player",
+		loading: "Loading",
+		play: "Play",
+		pause: "Pause",
+		stop: "Stop",
+		seek: "Seek",
+		position: "{time} of {duration}",
+		mute: "Mute",
+		volume: "Volume",
+		resetView: "Reset view",
+		stabilization: "Stabilization",
+		viewMode: "View",
+		fullscreen: "Fullscreen"
+	},
+	stabilizationModes: {
+		off: "Off",
+		lock: "Lock",
+		horizon: "Horizon",
+		follow: "Follow"
+	},
+	viewModes: {
+		"raw-lenses": "Raw lenses",
+		equirectangular: "Equirectangular",
+		normal: "Normal"
+	},
+	errors: {
+		"binary-out-of-bounds": UNREADABLE,
+		"binary-unsafe-integer": UNREADABLE,
+		"codec-unsupported": UNSUPPORTED_BROWSER,
+		cors: UNREACHABLE,
+		decode: FAILED,
+		"embed-destroyed": FAILED,
+		"index-out-of-range": FAILED,
+		"invalid-argument": FAILED,
+		"invalid-byte-range": UNREACHABLE,
+		"invalid-calibration": UNREADABLE,
+		"invalid-protobuf": UNREADABLE,
+		"invalid-trailer": UNREADABLE,
+		"invariant-violation": FAILED,
+		"missing-second-file": "Part of this recording is missing.",
+		"no-calibration": UNREADABLE,
+		"no-info-record": UNREADABLE,
+		"no-key-frame": UNREADABLE,
+		"playback-blocked": FAILED,
+		"range-unsupported": UNREACHABLE,
+		"render-unavailable": UNSUPPORTED_BROWSER,
+		"source-truncated": UNREACHABLE,
+		"source-unreadable": UNREACHABLE,
+		"unsupported-calibration": UNREADABLE,
+		"unsupported-container": UNREADABLE,
+		"unsupported-gyro-record": UNREADABLE,
+		"unsupported-info-format": UNREADABLE,
+		"unsupported-layout": UNREADABLE
+	}
+};
+/**
+* The default words with the page's own in their place. What is not a string is left out, so a
+* partial or mistyped table still leaves every word said.
+*/
+function messagesWith(overrides) {
+	const given = isRecord(overrides) ? overrides : {};
+	return {
+		labels: tableWith(DEFAULT_MESSAGES.labels, given["labels"]),
+		stabilizationModes: tableWith(DEFAULT_MESSAGES.stabilizationModes, given["stabilizationModes"]),
+		viewModes: tableWith(DEFAULT_MESSAGES.viewModes, given["viewModes"]),
+		errors: tableWith(DEFAULT_MESSAGES.errors, given["errors"])
+	};
+}
+function isLabelName(name) {
+	return name !== null && Object.hasOwn(DEFAULT_MESSAGES.labels, name);
+}
+function isChoiceTable(name) {
+	return name === "stabilizationModes" || name === "viewModes";
+}
+function tableWith(defaults, overrides) {
+	if (!isRecord(overrides)) return defaults;
+	const words = Object.entries(defaults).map(([key, word]) => {
+		const given = overrides[key];
+		return [key, typeof given === "string" ? given : word];
+	});
+	return Object.fromEntries(words);
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+//#endregion
+export { DEFAULT_MESSAGES, isChoiceTable, isLabelName, messagesWith };

package/dist/packages/player/src/controls/parseMarkup.js

@@ -0,0 +1,31 @@
+import { lazy } from "../../../core/src/shared/lazy.js";
+import "../../../core/src/index.js";
+//#region ../../packages/player/src/controls/parseMarkup.ts
+/**
+* The Trusted Types policy the element parses its own markup through. A page that enforces
+* Trusted Types allows it by name in its CSP: `trusted-types gyroview`.
+*/
+var MARKUP_POLICY_NAME = "gyroview";
+/**
+* Parses markup this package built from its own constants into nodes to clone. Where the browser
+* has Trusted Types the markup goes through the policy, which passes it on as it is: a page that
+* enforces them refuses a plain string.
+*/
+function parseMarkup(markup) {
+	const template = document.createElement("template");
+	template.innerHTML = markupPolicy()?.createHTML(markup) ?? markup;
+	return template.content;
+}
+/**
+* Made once per page: a second policy of the same name is refused where the CSP names it.
+*/
+var markupPolicy = lazy(() => {
+	const factory = globalThis.trustedTypes;
+	try {
+		return factory?.createPolicy(MARKUP_POLICY_NAME, { createHTML: (markup) => markup });
+	} catch {
+		return;
+	}
+});
+//#endregion
+export { MARKUP_POLICY_NAME, parseMarkup };

package/dist/packages/player/src/controls/viewButtons.js

@@ -0,0 +1,14 @@
+//#region ../../packages/player/src/controls/viewButtons.ts
+/**
+* Binds Reset view, which brings the current view mode back to how it starts, and Fullscreen.
+*/
+function bindViewButtons(parts, host) {
+	parts.resetView.addEventListener("click", () => {
+		host.player.resetView();
+	});
+	parts.fullscreen.addEventListener("click", () => {
+		host.toggleFullscreen();
+	});
+}
+//#endregion
+export { bindViewButtons };

package/dist/packages/player/src/element/ElementLoads.js

@@ -0,0 +1,119 @@
+import { Deferred } from "../../../core/src/shared/async/Deferred.js";
+import "../../../core/src/index.js";
+import { PlaybackAttribute } from "./attributeNames.js";
+import { shouldPreload } from "./attributes.js";
+import { elementSourceOf } from "./elementSource.js";
+//#region ../../packages/player/src/element/ElementLoads.ts
+/**
+* When `<gyro-view>` loads, and what. Attribute changes are read together a microtask after they
+* arrive, so a `src` set with its `src2` loads once; files handed in replace the attributes until
+* `src` or `src2` change. Only a connected element loads: one out of the document owes its load
+* to the next connection, and lets its recording go a microtask after a removal unless it was
+* only moved. A seek asked for while a load waits starts the new recording there.
+*/
+var ElementLoads = class {
+	element;
+	player;
+	scheduled;
+	/**
+	* The recording the attributes name is still to be loaded once connected: at first, after a
+	* removal let it go, and after a change of source while out of the document.
+	*/
+	isOwed = true;
+	/**
+	* A `load()` asked for out of the document, settled by the load the connection starts.
+	*/
+	awaited;
+	startTime;
+	files;
+	constructor(element, player) {
+		this.element = element;
+		this.player = player;
+	}
+	connected() {
+		if (this.isOwed) this.schedule();
+		this.awaited?.follow(this.scheduled ?? Promise.resolve());
+		this.awaited = void 0;
+	}
+	/**
+	* A move within the document disconnects and connects again at once: only an element still out
+	* of it a microtask later lets its recording go.
+	*/
+	async disconnected() {
+		await Promise.resolve();
+		if (this.element.isConnected) return;
+		this.player.unload();
+		this.isOwed = true;
+	}
+	sourceChanged() {
+		this.files = void 0;
+		this.schedule();
+	}
+	loadFiles(files) {
+		this.files = files;
+		this.schedule();
+	}
+	/**
+	* The change already waiting to be read, or else a load now; out of the document, the load the
+	* next connection starts.
+	*/
+	load() {
+		return this.element.isConnected ? this.scheduled ?? this.reload() : this.loadOnConnection();
+	}
+	/**
+	* Seeks there, or starts the recording the waiting load brings there.
+	*/
+	seek(time) {
+		if (this.scheduled) this.startTime = time;
+		else this.player.seek(time);
+	}
+	/**
+	* The waiting load, however it ends: a failure has been dispatched as an `error` already.
+	*/
+	async settled() {
+		try {
+			await this.scheduled;
+		} catch {}
+	}
+	loadOnConnection() {
+		this.isOwed = true;
+		this.awaited ??= new Deferred();
+		return this.awaited.promise;
+	}
+	schedule() {
+		this.isOwed = !this.element.isConnected;
+		if (this.scheduled || !this.element.isConnected) return;
+		const scheduled = this.loadAfterPendingChanges();
+		this.scheduled = scheduled;
+		scheduled.catch(ignoreReportedFailure);
+	}
+	async loadAfterPendingChanges() {
+		await Promise.resolve();
+		this.scheduled = void 0;
+		if (this.element.isConnected) await this.reload();
+	}
+	reload() {
+		this.isOwed = false;
+		const read = (attribute) => this.element.getAttribute(attribute);
+		const source = elementSourceOf(read, document.baseURI, this.files);
+		delete this.element.dataset["hasFrame"];
+		const startTime = this.startTime;
+		this.startTime = void 0;
+		if (!source) {
+			this.player.unload();
+			return Promise.resolve();
+		}
+		const loading = this.player.load(source, {
+			autoplay: this.element.autoplay,
+			preload: shouldPreload(read(PlaybackAttribute.Preload))
+		});
+		if (startTime !== void 0) this.player.seek(startTime);
+		return loading;
+	}
+};
+/**
+* A failed load has already been dispatched as an `error` event; the promise adds nothing.
+*/
+function ignoreReportedFailure() {}
+//#endregion
+export { ElementLoads };

package/dist/packages/player/src/element/FullscreenToggle.js

@@ -0,0 +1,39 @@
+//#region ../../packages/player/src/element/FullscreenToggle.ts
+var FILL_ATTRIBUTE = "data-fill";
+/**
+* Fills the screen with the element through the Fullscreen API where there is one, and by
+* pinning the element over the page where there is not (iPhone Safari has none for anything
+* but a video). Escape leaves either way.
+*/
+var FullscreenToggle = class {
+	element;
+	constructor(element) {
+		this.element = element;
+	}
+	get isActive() {
+		return this.isNativelyFullscreen() || this.element.hasAttribute(FILL_ATTRIBUTE);
+	}
+	async toggle() {
+		await (this.isActive ? this.exit() : this.enter());
+	}
+	async exit() {
+		if (this.isNativelyFullscreen()) await document.exitFullscreen();
+		this.element.removeAttribute(FILL_ATTRIBUTE);
+	}
+	/**
+	* Asked of the element itself: `document.fullscreenElement` names the outermost shadow host
+	* instead when the player sits inside another component.
+	*/
+	isNativelyFullscreen() {
+		return this.element.matches(":fullscreen");
+	}
+	async enter() {
+		if (document.fullscreenEnabled) try {
+			await this.element.requestFullscreen();
+			return;
+		} catch {}
+		this.element.setAttribute(FILL_ATTRIBUTE, "");
+	}
+};
+//#endregion
+export { FullscreenToggle };