@mattebox/player 0.1.0 → 0.2.0

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

@@ -0,0 +1,60 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+//#region src/elements/mute-button.ts
+/**
+* <mbx-mute-button>: mute and unmute, with the level drawn in the glyph:
+* `icon-mute` while muted or at zero, `icon-low` up to half, `icon-high`
+* above. Unmuting at zero volume would change nothing the viewer can
+* hear, so it brings the volume up too. The name comes from `label-mute`
+* and `label-unmute`, and `aria-pressed` says which state it is in.
+*/
+const LEVELS = [
+	"mute",
+	"low",
+	"high"
+];
+var MbxMuteButton = class extends Component {
+	static get observedAttributes() {
+		return ["label-mute", "label-unmute"];
+	}
+	constructor() {
+		super();
+		const root = this.attachShadow({ mode: "open" });
+		this.button = document.createElement("button");
+		this.button.type = "button";
+		this.button.setAttribute("part", "button");
+		this.slots = iconSlots(LEVELS, (level) => icon(level === "mute" ? "mute" : level === "low" ? "volume-low" : "volume-high"));
+		for (const level of LEVELS) this.button.append(this.slots[level]);
+		this.button.addEventListener("click", () => {
+			this.toggle();
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	toggle() {
+		var _this$player;
+		const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+		if (video === void 0) return;
+		if (video.muted) {
+			video.muted = false;
+			if (video.volume === 0) video.volume = 1;
+		} else video.muted = true;
+	}
+	attach(player) {
+		this.listen(player.video, ["volumechange", "emptied"], () => {
+			this.render();
+		});
+		this.render();
+	}
+	render() {
+		var _this$player2, _this$getAttribute, _this$getAttribute2;
+		const video = (_this$player2 = this.player) === null || _this$player2 === void 0 ? void 0 : _this$player2.video;
+		if (video === void 0) return;
+		const silent = video.muted || video.volume === 0;
+		show(this.slots, silent ? "mute" : video.volume <= .5 ? "low" : "high");
+		this.button.setAttribute("aria-label", silent ? (_this$getAttribute = this.getAttribute("label-unmute")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Unmute" : (_this$getAttribute2 = this.getAttribute("label-mute")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Mute");
+		this.button.setAttribute("aria-pressed", String(video.muted));
+	}
+};
+//#endregion
+export { MbxMuteButton };

package/dist/es2015/elements/panels.js

@@ -0,0 +1,52 @@
+import { Component } from "./component.js";
+import { style } from "./shared.js";
+//#region src/elements/panels.ts
+/**
+* <mbx-panels>: the row under the video for what native controls cannot
+* show. It sits in the player beside the video, in flow, so it lands
+* under the picture, and lays its children out in a row: the quality,
+* audio and subtitles menus, the live button, the lock. Each child hides
+* itself when its session has nothing for it, and the row hides when
+* every child has, so a native session shows no strip at all.
+*/
+const STYLE = `
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mbx-gap);
+  padding: var(--mbx-pad);
+  background: var(--mbx-surface);
+  color: var(--mbx-text);
+  font: 400 13px/1.4 var(--mbx-font);
+}
+:host([hidden]) { display: none; }
+`;
+var MbxPanels = class extends Component {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" }).append(style(STYLE), document.createElement("slot"));
+	}
+	empty() {
+		return ![...this.children].some((child) => !child.hidden);
+	}
+	attach() {
+		const tick = () => {
+			const empty = this.empty();
+			if (this.hidden !== empty) this.hidden = empty;
+		};
+		const observer = new MutationObserver(tick);
+		observer.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ["hidden"]
+		});
+		this.keep(() => {
+			observer.disconnect();
+		});
+		tick();
+	}
+};
+//#endregion
+export { MbxPanels };

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

@@ -0,0 +1,56 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+import { pictureInPicture } from "../controls/pip.js";
+//#region src/elements/pip-button.ts
+/**
+* <mbx-pip-button>: picture in picture, through whichever API the browser
+* has, and hidden where there is none. The glyph is `icon-enter` or
+* `icon-exit`, the name `label-enter` or `label-exit`, and the element
+* sets `pip` on the player while the video is in the floating window.
+*/
+const STATES = ["enter", "exit"];
+var MbxPipButton = 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" ? "picture-in-picture" : "picture-in-picture-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 = pictureInPicture(player.video);
+		this.api = api;
+		this.hidden = !api.supported;
+		this.keep(api.watch(() => {
+			this.render();
+		}));
+		this.render();
+	}
+	detach(player) {
+		this.api = null;
+		player.removeAttribute("pip");
+	}
+	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 : "Leave picture in picture" : (_this$getAttribute2 = this.getAttribute("label-enter")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "Picture in picture");
+		player.toggleAttribute("pip", active);
+	}
+};
+//#endregion
+export { MbxPipButton };

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

@@ -0,0 +1,68 @@
+import { icon } from "../controls/icons.js";
+import { Component } from "./component.js";
+import { BUTTON_STYLE, iconSlots, show, style } from "./shared.js";
+//#region src/elements/play-button.ts
+/**
+* <mbx-play-button>: play, pause, or replay once the media has ended. It
+* reads the video on the events the video already fires and writes one
+* thing back on click. The glyph is a slot per state, so a page drops its
+* own SVG into `icon-play`, `icon-pause` or `icon-replay`; the name is on
+* the button, from `label-play`, `label-pause` and `label-replay`, where a
+* screen reader reads it.
+*/
+const STATES = [
+	"play",
+	"pause",
+	"replay"
+];
+const LABELS = {
+	play: "Play",
+	pause: "Pause",
+	replay: "Replay"
+};
+var MbxPlayButton = class extends Component {
+	static get observedAttributes() {
+		return STATES.map((state) => `label-${state}`);
+	}
+	constructor() {
+		super();
+		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", () => {
+			this.toggle();
+		});
+		root.append(style(BUTTON_STYLE), this.button);
+	}
+	toggle() {
+		var _this$player;
+		const video = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.video;
+		if (video === void 0) return;
+		if (video.paused) video.play().catch(() => void 0);
+		else video.pause();
+	}
+	attach(player) {
+		this.listen(player.video, [
+			"play",
+			"pause",
+			"ended",
+			"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;
+		const state = video.ended ? "replay" : video.paused ? "play" : "pause";
+		show(this.slots, state);
+		this.button.setAttribute("aria-label", (_this$getAttribute = this.getAttribute(`label-${state}`)) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : LABELS[state]);
+	}
+};
+//#endregion
+export { MbxPlayButton };

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

@@ -0,0 +1,68 @@
+import { show } from "./shared.js";
+import { MenuElement, single } from "./menu-element.js";
+//#region src/elements/quality-menu.ts
+const AUTO = "auto";
+function renditionLabel(rendition) {
+	if (rendition.height !== void 0) return `${rendition.height}p`;
+	return `${Math.round(rendition.bitrate / 1e3)} kbps`;
+}
+var MbxQualityMenu = class extends MenuElement {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-auto",
+			"label-back"
+		];
+	}
+	constructor() {
+		super(...single("settings"));
+		this.engine = null;
+		show(this.slots, "default");
+	}
+	name() {
+		return "Quality";
+	}
+	attach(player) {
+		this.follow(player, (engine) => {
+			this.engine = engine;
+			this.render();
+			if (engine === null) return void 0;
+			const tick = () => {
+				this.render();
+			};
+			const offs = [
+				engine.on("tracks:changed", tick),
+				engine.on("quality:constraints-unsatisfiable", tick),
+				engine.on("quality:pin-unsatisfiable", tick)
+			];
+			return () => {
+				for (const off of offs) off();
+			};
+		});
+	}
+	render() {
+		var _this$getAttribute, _quality$pinned;
+		super.render();
+		const engine = this.engine;
+		if (engine === null) {
+			this.hidden = true;
+			return;
+		}
+		const quality = engine.quality;
+		const items = [[AUTO, (_this$getAttribute = this.getAttribute("label-auto")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "Auto"]];
+		for (const rendition of quality.renditions) items.push([rendition.id, renditionLabel(rendition)]);
+		this.menu.fill([{
+			name: "rendition",
+			items,
+			value: (_quality$pinned = quality.pinned) !== null && _quality$pinned !== void 0 ? _quality$pinned : AUTO,
+			onSelect: (value) => {
+				if (value === AUTO) quality.auto();
+				else quality.pin(value);
+				this.render();
+			}
+		}]);
+		this.hidden = quality.renditions.length === 0;
+	}
+};
+//#endregion
+export { MbxQualityMenu };

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

@@ -0,0 +1,314 @@
+import { el } from "../dom.js";
+import { fill } from "../labels.js";
+import { Component } from "./component.js";
+import { SLIDER_STYLE, number, seekRow, style } from "./shared.js";
+import { chapterAt, chapters, followChapters } from "../controls/chapters.js";
+import { format } from "../controls/time.js";
+import { EMPTY, at, clip, fraction } from "../controls/ranges.js";
+import { bufferGoal, live, optional, span, wall } from "../controls/session.js";
+import { slider } from "../controls/slider.js";
+//#region src/elements/seek-bar.ts
+const STEP = 5;
+const PAGE = 30;
+const LIVE_WINDOW = 3;
+/** What the tile scales down to when the page sets no `--mbx-preview-width`. */
+const PREVIEW_WIDTH = 160;
+/** The buffer goal assumed for a session that reports none. */
+const BUFFER_GOAL = 30;
+/** The gap cut at a chapter boundary, in pixels. */
+const GAP = 2;
+const EVENTS = [
+	"timeupdate",
+	"progress",
+	"durationchange",
+	"loadedmetadata",
+	"seeking",
+	"seeked",
+	"emptied"
+];
+const STYLE = `${SLIDER_STYLE}
+:host { flex: 1; }
+[part~="slider"] { flex: 1; }
+[part~="thumb"] { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
+[part~="buffered"] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
+[part~="buffered-range"] { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.3); }
+[part~="hover"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-text); }
+[part~="edge"] { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--mbx-live); }
+[part~="preview"] {
+  position: absolute;
+  bottom: 100%;
+  margin-bottom: 4px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  background: var(--mbx-surface);
+  border-radius: var(--mbx-radius);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  pointer-events: none;
+}
+[part~="preview-image"] { position: relative; overflow: hidden; border-radius: 2px; }
+[part~="preview-tile"] { position: absolute; top: 0; left: 0; transform-origin: top left; background-repeat: no-repeat; }
+[part~="preview-time"] { padding: 0 4px; }
+[part~="preview-title"] { max-width: 240px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }
+[hidden] { display: none; }
+`;
+function percent(part) {
+	return `${part * 100}%`;
+}
+/**
+* A mask that cuts a gap at each boundary between chapters, as stops along
+* the track: opaque up to a boundary, clear for the gap, opaque after.
+*/
+function gaps(list, span) {
+	const stops = ["#000 0"];
+	for (const chapter of list.slice(1)) {
+		const at = percent(fraction(chapter.start, span));
+		const before = `calc(${at} - ${GAP / 2}px)`;
+		const after = `calc(${at} + ${GAP / 2}px)`;
+		stops.push(`#000 ${before}`, `transparent ${before}`, `transparent ${after}`, `#000 ${after}`);
+	}
+	stops.push("#000 100%");
+	return `linear-gradient(to right, ${stops.join(", ")})`;
+}
+var MbxSeekBar = class extends Component {
+	static get observedAttributes() {
+		return [
+			"label",
+			"label-of",
+			"label-behind",
+			"live-window",
+			"chapters"
+		];
+	}
+	constructor() {
+		super();
+		this.range = EMPTY;
+		this.pending = null;
+		this.frame = 0;
+		this.divided = "";
+		this.list = [];
+		const root = this.attachShadow({ mode: "open" });
+		this.bar = slider({
+			step: () => number(this, "step", STEP),
+			page: () => number(this, "page", PAGE),
+			onInput: (value) => {
+				this.input(value);
+			},
+			onDrag: (on) => {
+				this.toggleAttribute("dragging", on);
+			}
+		});
+		this.buffered = el("div", "buffered");
+		this.hover = el("div", "hover");
+		this.edge = el("div", "edge");
+		this.hover.hidden = true;
+		this.edge.hidden = true;
+		this.bar.track.prepend(this.buffered);
+		this.bar.track.append(this.hover, this.edge);
+		this.preview = el("div", "preview");
+		this.image = el("div", "preview-image");
+		this.tile = el("div", "preview-tile");
+		this.time = el("span", "preview-time");
+		this.caption = el("span", "preview-title");
+		this.caption.hidden = true;
+		this.image.append(this.tile);
+		this.image.hidden = true;
+		this.preview.append(this.image, this.caption, this.time);
+		this.preview.hidden = true;
+		this.bar.root.append(this.preview);
+		this.bar.root.addEventListener("pointermove", (event) => {
+			this.point(event);
+		});
+		this.bar.root.addEventListener("pointerleave", () => {
+			this.leave();
+		});
+		root.append(style(STYLE), this.bar.root);
+	}
+	connectedCallback() {
+		seekRow(this);
+		super.connectedCallback();
+	}
+	isLive() {
+		var _this$player$engine, _this$player;
+		return live((_this$player$engine = (_this$player = this.player) === null || _this$player === void 0 ? void 0 : _this$player.engine) !== null && _this$player$engine !== void 0 ? _this$player$engine : null) !== void 0;
+	}
+	/** Whether the chapters divide the track and name the preview. */
+	chaptered() {
+		return this.getAttribute("chapters") !== "none" && this.list.length > 0;
+	}
+	/** The gaps at the chapter boundaries, on every layer of the track at once. */
+	paintChapters() {
+		const mask = this.chaptered() && this.list.length > 1 ? gaps(this.list, this.range) : "";
+		const key = `${mask}|${this.range.start}|${this.range.end}`;
+		if (key === this.divided) return;
+		this.divided = key;
+		const track = this.bar.track.style;
+		track.setProperty("mask-image", mask === "" ? "" : mask);
+		track.setProperty("-webkit-mask-image", mask === "" ? "" : mask);
+	}
+	/** What a screen reader hears at a time. */
+	say(time) {
+		var _this$player$engine2, _this$player2, _this$getAttribute2;
+		const engine = (_this$player$engine2 = (_this$player2 = this.player) === null || _this$player2 === void 0 ? void 0 : _this$player2.engine) !== null && _this$player$engine2 !== void 0 ? _this$player$engine2 : null;
+		if (!this.isLive()) {
+			var _this$getAttribute;
+			const template = (_this$getAttribute = this.getAttribute("label-of")) !== null && _this$getAttribute !== void 0 ? _this$getAttribute : "{current} of {duration}";
+			return Number.isFinite(this.range.end) && this.range.end > 0 ? fill(template, {
+				current: format(time),
+				duration: format(this.range.end)
+			}) : format(time);
+		}
+		const behind = fill((_this$getAttribute2 = this.getAttribute("label-behind")) !== null && _this$getAttribute2 !== void 0 ? _this$getAttribute2 : "{time} behind live", { time: format(this.range.end - time) });
+		const clock = wall(engine, time);
+		return clock === null ? behind : `${clock}, ${behind}`;
+	}
+	/** What the preview shows at a time. */
+	label(time) {
+		var _wall, _this$player$engine3, _this$player3;
+		if (!this.isLive()) return format(time);
+		return (_wall = wall((_this$player$engine3 = (_this$player3 = this.player) === null || _this$player3 === void 0 ? void 0 : _this$player3.engine) !== null && _this$player$engine3 !== void 0 ? _this$player$engine3 : null, time)) !== null && _wall !== void 0 ? _wall : `-${format(this.range.end - time)}`;
+	}
+	input(value) {
+		var _this$player4;
+		const video = (_this$player4 = this.player) === null || _this$player4 === void 0 ? void 0 : _this$player4.video;
+		if (video === void 0) return;
+		this.bar.set(value, this.say(value));
+		if (!this.bar.dragging()) {
+			this.pending = null;
+			video.currentTime = value;
+			return;
+		}
+		this.pending = value;
+		if (this.frame === 0) this.frame = requestAnimationFrame(() => {
+			this.flush();
+		});
+	}
+	flush() {
+		var _this$player5;
+		this.frame = 0;
+		const video = (_this$player5 = this.player) === null || _this$player5 === void 0 ? void 0 : _this$player5.video;
+		if (this.pending === null || video === void 0) return;
+		video.currentTime = this.pending;
+		this.pending = null;
+	}
+	/** The width the page asked for through the token, or the default. */
+	previewWidth() {
+		const set = Number.parseFloat(getComputedStyle(this.preview).getPropertyValue("--mbx-preview-width"));
+		return Number.isFinite(set) && set > 0 ? set : PREVIEW_WIDTH;
+	}
+	/** The tile for a time, if the track has one, drawn at its size and scaled to fit. */
+	paintTile(when) {
+		var _optional$thumbnails$, _optional$thumbnails, _this$player$engine4, _this$player6;
+		const found = (_optional$thumbnails$ = (_optional$thumbnails = optional((_this$player$engine4 = (_this$player6 = this.player) === null || _this$player6 === void 0 ? void 0 : _this$player6.engine) !== null && _this$player$engine4 !== void 0 ? _this$player$engine4 : null).thumbnails) === null || _optional$thumbnails === void 0 ? void 0 : _optional$thumbnails.at(when)) !== null && _optional$thumbnails$ !== void 0 ? _optional$thumbnails$ : null;
+		this.image.hidden = found === null;
+		if (found === null) return;
+		const scale = this.previewWidth() / found.width;
+		this.image.style.width = `${found.width * scale}px`;
+		this.image.style.height = `${found.height * scale}px`;
+		this.tile.style.width = `${found.width}px`;
+		this.tile.style.height = `${found.height}px`;
+		this.tile.style.backgroundImage = `url("${found.url}")`;
+		this.tile.style.backgroundPosition = `-${found.x}px -${found.y}px`;
+		this.tile.style.transform = `scale(${scale})`;
+	}
+	paintBuffered(video) {
+		var _buffered$lastElement;
+		const parts = clip(Array.from({ length: video.buffered.length }, (_, i) => ({
+			start: video.buffered.start(i),
+			end: video.buffered.end(i)
+		})), this.range);
+		const buffered = this.buffered;
+		while (buffered.childElementCount > parts.length) (_buffered$lastElement = buffered.lastElementChild) === null || _buffered$lastElement === void 0 || _buffered$lastElement.remove();
+		while (buffered.childElementCount < parts.length) buffered.append(el("div", "buffered-range"));
+		let i = 0;
+		for (const child of buffered.children) {
+			const part = parts[i];
+			i += 1;
+			if (part === void 0) break;
+			const node = child;
+			node.style.left = percent(part[0]);
+			node.style.width = percent(part[1] - part[0]);
+		}
+	}
+	/** Whether a live window is wide enough to be worth a bar. */
+	worthSeeking() {
+		var _bufferGoal, _this$player$engine5, _this$player7;
+		const goals = number(this, "live-window", LIVE_WINDOW);
+		if (goals === 0) return true;
+		const goal = (_bufferGoal = bufferGoal((_this$player$engine5 = (_this$player7 = this.player) === null || _this$player7 === void 0 ? void 0 : _this$player7.engine) !== null && _this$player$engine5 !== void 0 ? _this$player$engine5 : null)) !== null && _bufferGoal !== void 0 ? _bufferGoal : BUFFER_GOAL;
+		return this.range.end - this.range.start >= goals * goal;
+	}
+	/** The hover marker and the preview follow the pointer, clamped to the bar. */
+	point(event) {
+		var _chapter$title;
+		const rect = this.bar.rail.getBoundingClientRect();
+		if (rect.width === 0 || this.range.end <= this.range.start) return;
+		const part = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+		this.hover.hidden = false;
+		this.hover.style.left = percent(part);
+		this.preview.hidden = false;
+		const when = at(part, this.range);
+		this.time.textContent = this.label(when);
+		const chapter = this.chaptered() ? this.list[chapterAt(this.list, when)] : void 0;
+		this.caption.hidden = chapter === void 0 || chapter.title === "";
+		this.caption.textContent = (_chapter$title = chapter === null || chapter === void 0 ? void 0 : chapter.title) !== null && _chapter$title !== void 0 ? _chapter$title : "";
+		this.paintTile(when);
+		const whole = this.bar.root.getBoundingClientRect();
+		const half = this.preview.offsetWidth / 2;
+		const x = rect.left - whole.left + part * rect.width;
+		this.preview.style.left = `${Math.min(whole.width - half, Math.max(half, x))}px`;
+	}
+	leave() {
+		this.hover.hidden = true;
+		this.preview.hidden = true;
+	}
+	attach(player) {
+		const tick = () => {
+			this.render();
+		};
+		this.listen(player.video, EVENTS, tick);
+		this.keep(followChapters(player.video, tick));
+		this.listen(player, ["sourcechange"], () => {
+			this.leave();
+			this.render();
+		});
+		this.render();
+	}
+	detach(player) {
+		cancelAnimationFrame(this.frame);
+		this.frame = 0;
+		this.pending = null;
+		this.leave();
+		player.removeAttribute("live");
+		player.removeAttribute("seekable");
+	}
+	render() {
+		var _this$getAttribute3;
+		const player = this.player;
+		if (player === null) return;
+		const video = player.video;
+		const engine = player.engine;
+		const api = live(engine);
+		const on = api !== void 0;
+		this.range = span(video, engine);
+		this.list = chapters(video);
+		this.bar.label((_this$getAttribute3 = this.getAttribute("label")) !== null && _this$getAttribute3 !== void 0 ? _this$getAttribute3 : "Seek");
+		this.bar.range(this.range.start, this.range.end);
+		this.paintBuffered(video);
+		this.paintChapters();
+		this.edge.hidden = !on;
+		if (api !== void 0 && api.edge !== null) this.edge.style.left = percent(fraction(api.edge, this.range));
+		const seekable = !on || this.worthSeeking();
+		this.hidden = !seekable;
+		player.toggleAttribute("live", on);
+		player.toggleAttribute("seekable", seekable);
+		if (!this.bar.dragging()) this.bar.set(video.currentTime, this.say(video.currentTime));
+	}
+};
+//#endregion
+export { MbxSeekBar };