@mattebox/player 0.1.0 → 0.2.0

package/dist/es2015/elements/shared.js

@@ -0,0 +1,155 @@
+//#region src/elements/shared.ts
+/**
+* The style every button control shares. Each element carries its own
+* copy in its shadow root, so the rules are short and the tokens come
+* through the `--mbx-*` custom properties the player sets, which inherit
+* through light DOM into every control.
+*
+* Nothing carries `!important`: a page's `::part()` rule must win.
+*/
+const BUTTON_STYLE = `
+:host { display: inline-flex; }
+:host([hidden]) { display: none; }
+[part~="button"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  opacity: 0.9;
+}
+[part~="button"]:hover { opacity: 1; }
+[part~="button"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="icon"], ::slotted(*) { width: 1.75em; height: 1.75em; fill: currentColor; }
+slot[hidden] { display: none; }
+`;
+/** The style of a slider: the rail, the track with its fill, and the thumb. */
+const SLIDER_STYLE = `
+:host { display: block; }
+:host([hidden]) { display: none; }
+[part~="slider"] {
+  position: relative;
+  height: 40px;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+  touch-action: none;
+}
+[part~="slider"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="rail"] { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }
+[part~="track"] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.35);
+  border-radius: 2px;
+  overflow: hidden;
+}
+[part~="fill"] { position: absolute; top: 0; bottom: 0; left: 0; background: var(--mbx-accent); }
+[part~="thumb"] {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  margin: -6px 0 0 -6px;
+  border-radius: 50%;
+  background: var(--mbx-text);
+  pointer-events: none;
+}
+`;
+/** A non-negative number from an attribute, else the default. */
+function number(node, name, fallback) {
+	const raw = node.getAttribute(name);
+	const value = raw === null ? NaN : Number(raw);
+	return Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+/** The style of a menu: the button from BUTTON_STYLE, and the popup above it with its items. */
+const MENU_STYLE = `${BUTTON_STYLE}
+:host { position: relative; }
+[part~="popup"] {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 8px;
+  min-width: 160px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: rgba(16, 17, 20, 0.95);
+  border-radius: var(--mbx-radius);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
+  font-size: 14px;
+}
+[part~="popup"][hidden] { display: none; }
+[part~="section"] { display: flex; flex-direction: column; }
+[part~="section"] + [part~="section"] { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
+[part~="section-label"] { padding: 4px 12px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mbx-muted); }
+[part~="item"] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 12px 8px 28px;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  border-radius: var(--mbx-radius);
+  cursor: pointer;
+}
+[part~="item"]:hover { background: rgba(255, 255, 255, 0.12); }
+[part~="item-detail"] { margin-left: auto; color: var(--mbx-muted); font-variant-numeric: tabular-nums; }
+[part~="item"]:focus-visible { outline: 2px solid var(--mbx-accent); outline-offset: -2px; }
+[part~="page-item"] { position: relative; padding-right: 28px; }
+[part~="page-item"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); opacity: 0.7; }
+[part~="back-item"] { position: relative; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; margin-bottom: 6px; }
+[part~="back-item"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 1.5px 0 0 1.5px; transform: rotate(-45deg); opacity: 0.7; }
+[part~="checked"] { position: relative; }
+[part~="checked"]::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mbx-accent); }
+`;
+/** Puts a control in the bar's seek row when it is in a bar, unless the page wrote a `slot` of its own. */
+function seekRow(node) {
+	var _node$parentElement;
+	if (((_node$parentElement = node.parentElement) === null || _node$parentElement === void 0 ? void 0 : _node$parentElement.localName) === "mbx-control-bar" && !node.hasAttribute("slot")) node.slot = "seek";
+}
+/** A `<style>` with `text`, for a shadow root. */
+function style(text) {
+	const node = document.createElement("style");
+	node.textContent = text;
+	return node;
+}
+/**
+* A named slot per state with the default glyph as its fallback, so a page
+* drops its own SVG into `slot="icon-<state>"` and the button keeps the
+* name. Returns the slots by state; `show` hides all but one.
+*/
+function iconSlots(states, fallback) {
+	const out = {};
+	for (const state of states) {
+		const slot = document.createElement("slot");
+		slot.name = `icon-${state}`;
+		slot.append(fallback(state));
+		slot.hidden = true;
+		out[state] = slot;
+	}
+	return out;
+}
+function show(slots, state) {
+	for (const key of Object.keys(slots)) slots[key].hidden = key !== state;
+}
+//#endregion
+export { BUTTON_STYLE, MENU_STYLE, SLIDER_STYLE, iconSlots, number, seekRow, show, style };

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

@@ -0,0 +1,59 @@
+import { icon } from "../controls/icons.js";
+import { fill } from "../labels.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, style } from "./shared.js";
+//#region src/elements/skip-button.ts
+const SECONDS = 10;
+/** The glyph for a skip amount: the set draws 10 and 30, and a plain arrow says the rest. */
+function glyphFor(back, amount) {
+	const side = back ? "seek-backward" : "seek-forward";
+	if (amount === 10 || amount === 30) return `${side}-${amount}`;
+	return side;
+}
+var MbxSkipButton = class extends Component {
+	static get observedAttributes() {
+		return ["seconds", "label"];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.glyph = document.createElement("slot");
+		this.glyph.name = "icon";
+		this.button.append(this.glyph);
+		this.button.addEventListener("click", () => {
+			this.skip();
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	/** The amount, signed. A value that is not a number is the default. */
+	seconds() {
+		var _this$getAttribute;
+		const value = Number((_this$getAttribute = this.getAttribute("seconds")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : SECONDS);
+		return Number.isFinite(value) ? value : SECONDS;
+	}
+	skip() {
+		var _this$player;
+		const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+		if (video === void 0) return;
+		const ranges = video.seekable;
+		const end = Number.isFinite(video.duration) ? video.duration : ranges.length > 0 ? ranges.end(ranges.length - 1) : video.currentTime;
+		video.currentTime = Math.min(end, Math.max(0, video.currentTime + this.seconds()));
+	}
+	attach(_player) {
+		this.render();
+	}
+	render() {
+		var _this$getAttribute2;
+		const seconds = this.seconds();
+		const back = seconds < 0;
+		const amount = Math.abs(seconds);
+		this.glyph.replaceChildren(icon(glyphFor(back, amount)));
+		const template = (_this$getAttribute2 = this.getAttribute("label")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : back ? "Back {seconds} seconds" : "Forward {seconds} seconds";
+		this.button.setAttribute("aria-label", fill(template, { seconds: amount }));
+	}
+};
+//#endregion
+export { MbxSkipButton };

package/dist/es2015/elements/spacer.js

@@ -0,0 +1,11 @@
+import { style } from "./shared.js";
+//#region src/elements/spacer.ts
+/** <mbx-spacer>: takes the room in a row, so what follows sits at the far end. */
+var MbxSpacer = class extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" }).append(style(":host { display: block; flex: 1 1 auto; }"));
+	}
+};
+//#endregion
+export { MbxSpacer };

package/dist/es2015/elements/speed-menu.js

@@ -0,0 +1,60 @@
+import { show } from "./shared.js";
+import { MenuElement, single } from "./menu-element.js";
+//#region src/elements/speed-menu.ts
+const RATES = [
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+];
+var MbxSpeedMenu = class extends MenuElement {
+	static get observedAttributes() {
+		return [
+			"rates",
+			"label",
+			"label-normal",
+			"label-back"
+		];
+	}
+	constructor() {
+		super(...single("playback-speed"));
+		show(this.slots, "default");
+	}
+	name() {
+		return "Playback speed";
+	}
+	rates() {
+		const raw = this.getAttribute("rates");
+		if (raw === null) return RATES;
+		const out = raw.split(/\s+/).map(Number).filter((rate) => Number.isFinite(rate) && rate > 0);
+		return out.length === 0 ? RATES : out;
+	}
+	attach(player) {
+		this.listen(player.video, ["ratechange"], () => {
+			this.render();
+		});
+		this.render();
+	}
+	render() {
+		var _this$player, _this$getAttribute;
+		super.render();
+		const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+		if (video === void 0) return;
+		const normal = (_this$getAttribute = this.getAttribute("label-normal")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Normal";
+		const items = this.rates().map((rate) => [String(rate), rate === 1 ? normal : `${rate}×`]);
+		const current = String(video.playbackRate);
+		if (!items.some(([id]) => id === current)) items.push([current, `${current}×`]);
+		this.menu.fill([{
+			name: "rate",
+			items,
+			value: current,
+			onSelect: (value) => {
+				video.playbackRate = Number(value);
+			}
+		}]);
+	}
+};
+//#endregion
+export { MbxSpeedMenu };

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

@@ -0,0 +1,87 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+//#region src/elements/start-button.ts
+const STATES = ["play", "replay"];
+const STYLE = `${BUTTON_STYLE}
+:host {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -32px 0 0 -52px;
+}
+[part~="button"] {
+  width: 104px;
+  height: 64px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(0, 0, 0, 0.45);
+  color: var(--mbx-text);
+  opacity: 0.9;
+  transition: opacity 0.15s, background 0.15s;
+}
+[part~="button"]:hover { opacity: 1; background: rgba(0, 0, 0, 0.6); }
+[part~="icon"], ::slotted(*) { width: 40px; height: 40px; margin-left: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  [part~="button"] { transition: none; }
+}
+`;
+var MbxStartButton = class extends Component {
+	static get observedAttributes() {
+		return ["label-play", "label-replay"];
+	}
+	constructor() {
+		super();
+		this.failed = false;
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.slots = iconSlots(STATES, icon);
+		for (const state of STATES) this.button.append(this.slots[state]);
+		this.button.addEventListener("click", () => {
+			var _this$player;
+			(_this$player = this.player) === null || _this$player === void 0 || _this$player.video.play().catch(() => void 0);
+		});
+		root.append(style(STYLE), this.button);
+	}
+	attach(player) {
+		const video = player.video;
+		this.listen(video, [
+			"play",
+			"pause",
+			"ended"
+		], () => {
+			this.render();
+		});
+		this.listen(video, ["playing", "loadstart"], () => {
+			this.failed = false;
+			this.render();
+		});
+		this.listen(player, ["sourcechange"], () => {
+			this.failed = false;
+			this.render();
+		});
+		const failure = (event) => {
+			if (!event.detail.fatal) return;
+			this.failed = true;
+			this.render();
+		};
+		player.addEventListener("error", failure);
+		this.keep(() => {
+			player.removeEventListener("error", failure);
+		});
+		this.failed = player.error !== null;
+		this.render();
+	}
+	render() {
+		var _this$player2, _this$getAttribute;
+		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;
+	}
+};
+//#endregion
+export { MbxStartButton };

package/dist/es2015/elements/subtitles-menu.js

@@ -0,0 +1,103 @@
+import { icon } from "../controls/icons.js";
+import { show } from "./shared.js";
+import { MenuElement } from "./menu-element.js";
+import { onTracks, trackItems } from "./audio-menu.js";
+//#region src/elements/subtitles-menu.ts
+const OFF = "off";
+const SUBTITLE_SIZE = "subtitle-size";
+const SUBTITLE_BACKGROUND = "subtitle-background";
+const SIZES = [
+	["small", "Small"],
+	["medium", "Medium"],
+	["large", "Large"],
+	["xlarge", "Extra large"]
+];
+const BACKGROUNDS = [
+	["none", "None"],
+	["dark", "Dark"],
+	["solid", "Solid"]
+];
+const STATES = ["off", "on"];
+var MbxSubtitlesMenu = class extends MenuElement {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-back",
+			"label-off",
+			"label-track",
+			"label-settings",
+			"label-size",
+			"label-background",
+			...SIZES.map(([id]) => `label-${id}`),
+			...BACKGROUNDS.map(([id]) => `label-${id}`)
+		];
+	}
+	constructor() {
+		super(STATES, (state) => icon(state === "on" ? "closed-captions-on" : "closed-captions"));
+		this.engine = null;
+		show(this.slots, "off");
+	}
+	name() {
+		return "Subtitles";
+	}
+	/** A look's group: the choices named from the attributes, the value from the player's. */
+	looks(player, attribute, name, fallback, choices, initial) {
+		var _this$getAttribute;
+		const set = player.getAttribute(attribute);
+		const value = set !== null && choices.some(([id]) => id === set) ? set : initial;
+		return {
+			name,
+			label: (_this$getAttribute = this.getAttribute(`label-${name}`)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : fallback,
+			items: choices.map(([id, text]) => {
+				var _this$getAttribute2;
+				return [id, (_this$getAttribute2 = this.getAttribute(`label-${id}`)) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : text];
+			}),
+			value,
+			onSelect: (chosen) => {
+				player.setAttribute(attribute, chosen);
+				this.render();
+			}
+		};
+	}
+	attach(player) {
+		this.follow(player, (engine) => {
+			this.engine = engine;
+			this.render();
+			if (engine === null) return void 0;
+			return onTracks(engine, () => {
+				this.render();
+			});
+		});
+	}
+	render() {
+		var _this$getAttribute3, _this$getAttribute4, _this$getAttribute5;
+		super.render();
+		const engine = this.engine;
+		const player = this.player;
+		if (engine === null || player === null) {
+			this.hidden = true;
+			return;
+		}
+		const [tracks, active] = trackItems(engine, "text");
+		const items = [[OFF, (_this$getAttribute3 = this.getAttribute("label-off")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "Off"], ...tracks];
+		this.menu.fill([{
+			name: "track",
+			label: (_this$getAttribute4 = this.getAttribute("label-track")) !== null && _this$getAttribute4 !== void 0 ? _this$getAttribute4 : "Track",
+			items,
+			value: active !== null && active !== void 0 ? active : OFF,
+			onSelect: (value) => {
+				if (value === OFF) engine.tracks.deselect("text");
+				else engine.tracks.select(value);
+				this.render();
+			}
+		}, {
+			name: "settings",
+			label: (_this$getAttribute5 = this.getAttribute("label-settings")) !== null && _this$getAttribute5 !== void 0 ? _this$getAttribute5 : "Settings",
+			entries: [this.looks(player, SUBTITLE_SIZE, "size", "Size", SIZES, "medium"), this.looks(player, SUBTITLE_BACKGROUND, "background", "Background", BACKGROUNDS, "dark")]
+		}]);
+		show(this.slots, active === null ? "off" : "on");
+		this.hidden = tracks.length === 0;
+	}
+};
+//#endregion
+export { MbxSubtitlesMenu, SUBTITLE_BACKGROUND, SUBTITLE_SIZE };

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

@@ -0,0 +1,38 @@
+import { Component } from "./component.js";
+import { seekRow, style } from "./shared.js";
+//#region src/elements/time-element.ts
+const STYLE = `
+:host { display: inline-block; min-width: 3ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
+:host([hidden]) { display: none; }
+`;
+const EVENTS = [
+	"timeupdate",
+	"durationchange",
+	"loadedmetadata",
+	"seeking",
+	"seeked",
+	"emptied"
+];
+var TimeElement = class extends Component {
+	constructor(extra = "") {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.text = document.createTextNode("0:00");
+		root.append(style(STYLE + extra), this.text);
+	}
+	connectedCallback() {
+		seekRow(this);
+		super.connectedCallback();
+	}
+	attach(player) {
+		const tick = () => {
+			this.render();
+		};
+		this.listen(player.video, EVENTS, tick);
+		this.listen(player, ["sourcechange"], tick);
+		this.observe(player, ["live", "seekable"], tick);
+		this.render();
+	}
+};
+//#endregion
+export { TimeElement };

package/dist/es2015/elements/volume-slider.js

@@ -0,0 +1,47 @@
+import { Component } from "./component.js";
+import { SLIDER_STYLE, number, style } from "./shared.js";
+import { slider } from "../controls/slider.js";
+//#region src/elements/volume-slider.ts
+const STEP = .05;
+const PAGE = .2;
+var MbxVolumeSlider = class extends Component {
+	static get observedAttributes() {
+		return ["label"];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.bar = slider({
+			step: () => number(this, "step", STEP),
+			page: () => number(this, "page", PAGE),
+			onInput: (value) => {
+				var _this$player;
+				const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+				if (video === void 0) return;
+				video.volume = value;
+				if (value > 0) video.muted = false;
+			},
+			onDrag: (on) => {
+				this.toggleAttribute("dragging", on);
+			}
+		});
+		this.bar.range(0, 1);
+		root.append(style(`${SLIDER_STYLE}:host { width: 80px; flex: none; }`), this.bar.root);
+	}
+	attach(player) {
+		this.listen(player.video, ["volumechange", "emptied"], () => {
+			this.render();
+		});
+		this.render();
+	}
+	render() {
+		var _this$player2, _this$getAttribute;
+		const video = (_this$player2 = this.player) === null || _this$player2 === void 0 ? void 0 : _this$player2.video;
+		if (video === void 0) return;
+		this.bar.label((_this$getAttribute = this.getAttribute("label")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Volume");
+		const level = video.muted ? 0 : video.volume;
+		this.bar.set(level, `${Math.round(level * 100)}%`);
+	}
+};
+//#endregion
+export { MbxVolumeSlider };

package/dist/es2015/elements/volume.js

@@ -0,0 +1,50 @@
+import { MUTE_BUTTON, VOLUME_SLIDER } from "../tags.js";
+import { Component } from "./component.js";
+import { style } from "./shared.js";
+//#region src/elements/volume.ts
+/**
+* <mbx-volume>: the mute button with the slider unfolding from it under
+* the pointer or keyboard focus, the way a bar keeps its width for the
+* rest. The two are its children, in light DOM, so the page labels and
+* styles each; a group left empty fills itself with both. The slider
+* folds to nothing otherwise, and a page that wants it always out sets
+* its width on `mbx-volume-slider` itself.
+*
+* Keyboard focus, not any focus: a click leaves focus on the mute button,
+* and a slider that stayed out until something else took it would read as
+* stuck. So the group carries `pointer` from a pointer press until a key
+* is pressed or focus leaves, and focus unfolds the slider only without it.
+*/
+const STYLE = `
+:host { display: inline-flex; align-items: center; }
+:host([hidden]) { display: none; }
+::slotted(mbx-volume-slider) { width: 0; opacity: 0; overflow: hidden; transition: width 0.2s ease, opacity 0.2s ease; }
+:host(:hover) ::slotted(mbx-volume-slider), :host(:focus-within:not([pointer])) ::slotted(mbx-volume-slider) { width: 80px; opacity: 1; }
+@media (prefers-reduced-motion: reduce) {
+  ::slotted(mbx-volume-slider) { transition: none; }
+}
+`;
+var MbxVolume = class extends Component {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" }).append(style(STYLE), document.createElement("slot"));
+	}
+	/** Both parts, when the page wrote none: a constructor must not add children. */
+	connectedCallback() {
+		if (this.childElementCount === 0) this.append(document.createElement(MUTE_BUTTON), document.createElement(VOLUME_SLIDER));
+		super.connectedCallback();
+	}
+	attach() {
+		this.listen(this, ["pointerdown"], () => {
+			this.toggleAttribute("pointer", true);
+		});
+		this.listen(this, ["keydown", "focusout"], () => {
+			this.removeAttribute("pointer");
+		});
+	}
+	detach() {
+		this.removeAttribute("pointer");
+	}
+};
+//#endregion
+export { MbxVolume };

package/dist/es2015/entries/audio-menu.js

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

package/dist/es2015/entries/chapters-menu.js

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

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

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

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

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

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

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

package/dist/es2015/entries/duration.js

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

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

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