@mattebox/player 0.1.0 → 0.3.0

package/dist/es2015/controls/seek.js

@@ -1,203 +0,0 @@
-import { el } from "../dom.js";
-import { EMPTY, at, clip, fraction, spans, window } from "./ranges.js";
-import { slider } from "./slider.js";
-import { clock, describe, format } from "./time.js";
-//#region src/controls/seek.ts
-/** 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 events on which the row re-reads the video. */
-const EVENTS = [
-	"timeupdate",
-	"progress",
-	"durationchange",
-	"loadedmetadata",
-	"seeking",
-	"seeked",
-	"emptied"
-];
-function percent(part) {
-	return `${part * 100}%`;
-}
-function seekBar(video, flag, options) {
-	let source = {};
-	let span = EMPTY;
-	let pending = null;
-	let frame = 0;
-	function isLive() {
-		const live = source.live;
-		return live !== void 0 && live.edge !== null;
-	}
-	/** The wall clock at a presentation time, when the session can say it. */
-	function wall(time) {
-		var _source$pdt$toWallClo, _source$pdt;
-		const epoch = (_source$pdt$toWallClo = (_source$pdt = source.pdt) === null || _source$pdt === void 0 ? void 0 : _source$pdt.toWallClock(time)) !== null && _source$pdt$toWallClo !== void 0 ? _source$pdt$toWallClo : null;
-		return epoch === null ? null : clock(epoch);
-	}
-	/** What a screen reader hears at a time. */
-	function say(time) {
-		if (!isLive()) return describe(time, span.end);
-		const behind = `${format(span.end - time)} behind live`;
-		const at = wall(time);
-		return at === null ? behind : `${at}, ${behind}`;
-	}
-	/** What the preview and the time show at a time. */
-	function label(time) {
-		var _wall;
-		if (!isLive()) return format(time);
-		return (_wall = wall(time)) !== null && _wall !== void 0 ? _wall : `-${format(span.end - time)}`;
-	}
-	function flush() {
-		frame = 0;
-		if (pending === null) return;
-		video.currentTime = pending;
-		pending = null;
-	}
-	const current = el("span", "current-time", "0:00");
-	const duration = el("span", "duration", "0:00");
-	const bar = slider({
-		name: "seek",
-		label: "Seek",
-		step: options.seekStep,
-		page: options.seekPage,
-		onInput(value) {
-			bar.set(value, say(value));
-			current.textContent = label(value);
-			if (!bar.dragging()) {
-				pending = null;
-				video.currentTime = value;
-				return;
-			}
-			pending = value;
-			if (frame === 0) frame = requestAnimationFrame(flush);
-		}
-	});
-	const root = el("div", "row seek-row");
-	root.append(current, bar.root, duration);
-	const buffered = el("div", "buffered seek-buffered");
-	const hover = el("div", "hover seek-hover");
-	const edge = el("div", "edge seek-edge");
-	hover.hidden = true;
-	edge.hidden = true;
-	bar.track.prepend(buffered);
-	bar.track.append(hover, edge);
-	const preview = el("div", "preview seek-preview");
-	const image = el("div", "preview-image seek-preview-image");
-	const tile = el("div", "preview-tile seek-preview-tile");
-	const time = el("span", "preview-time seek-preview-time");
-	image.append(tile);
-	image.hidden = true;
-	preview.append(image, time);
-	preview.hidden = true;
-	bar.root.append(preview);
-	/** The width the page asked for through the token, or the default. */
-	function previewWidth() {
-		const set = Number.parseFloat(getComputedStyle(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. */
-	function paintTile(when) {
-		var _source$thumbnails$at, _source$thumbnails;
-		const found = (_source$thumbnails$at = (_source$thumbnails = source.thumbnails) === null || _source$thumbnails === void 0 ? void 0 : _source$thumbnails.at(when)) !== null && _source$thumbnails$at !== void 0 ? _source$thumbnails$at : null;
-		image.hidden = found === null;
-		if (found === null) return;
-		const scale = previewWidth() / found.width;
-		image.style.width = `${found.width * scale}px`;
-		image.style.height = `${found.height * scale}px`;
-		tile.style.width = `${found.width}px`;
-		tile.style.height = `${found.height}px`;
-		tile.style.backgroundImage = `url("${found.url}")`;
-		tile.style.backgroundPosition = `-${found.x}px -${found.y}px`;
-		tile.style.transform = `scale(${scale})`;
-	}
-	function paintBuffered() {
-		var _buffered$lastElement;
-		const parts = clip(spans(video.buffered), span);
-		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 seek-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. */
-	function worthSeeking() {
-		var _source$bufferGoal, _source$bufferGoal2;
-		if (options.liveWindow === 0) return true;
-		const goal = (_source$bufferGoal = (_source$bufferGoal2 = source.bufferGoal) === null || _source$bufferGoal2 === void 0 ? void 0 : _source$bufferGoal2.call(source)) !== null && _source$bufferGoal !== void 0 ? _source$bufferGoal : BUFFER_GOAL;
-		return span.end - span.start >= options.liveWindow * goal;
-	}
-	function tick() {
-		var _source$window, _source$window2;
-		const on = isLive();
-		const own = on ? (_source$window = (_source$window2 = source.window) === null || _source$window2 === void 0 ? void 0 : _source$window2.call(source)) !== null && _source$window !== void 0 ? _source$window : null : null;
-		span = own !== null && own.end > own.start ? own : window(video.duration, spans(video.seekable), on);
-		bar.range(span.start, span.end);
-		paintBuffered();
-		const live = source.live;
-		edge.hidden = !on;
-		if (on && live !== void 0 && live.edge !== null) edge.style.left = percent(fraction(live.edge, span));
-		const seekable = !on || worthSeeking();
-		bar.root.hidden = !seekable;
-		current.hidden = !seekable;
-		duration.hidden = on;
-		flag("live", on);
-		flag("seekable", seekable);
-		if (!on) duration.textContent = format(span.end);
-		if (!bar.dragging()) {
-			bar.set(video.currentTime, say(video.currentTime));
-			current.textContent = label(video.currentTime);
-		}
-	}
-	/** The hover marker and the preview follow the pointer, clamped to the bar. */
-	function point(event) {
-		const rect = bar.rail.getBoundingClientRect();
-		if (rect.width === 0 || span.end <= span.start) return;
-		const part = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
-		hover.hidden = false;
-		hover.style.left = percent(part);
-		preview.hidden = false;
-		const when = at(part, span);
-		time.textContent = label(when);
-		paintTile(when);
-		const whole = bar.root.getBoundingClientRect();
-		const half = preview.offsetWidth / 2;
-		const x = rect.left - whole.left + part * rect.width;
-		preview.style.left = `${Math.min(whole.width - half, Math.max(half, x))}px`;
-	}
-	function leave() {
-		hover.hidden = true;
-		preview.hidden = true;
-	}
-	bar.root.addEventListener("pointermove", point);
-	bar.root.addEventListener("pointerleave", leave);
-	for (const name of EVENTS) video.addEventListener(name, tick);
-	tick();
-	return {
-		root,
-		attach(found) {
-			source = found;
-			tick();
-		},
-		detach() {
-			source = {};
-			leave();
-			tick();
-		},
-		dispose() {
-			cancelAnimationFrame(frame);
-			bar.root.removeEventListener("pointermove", point);
-			bar.root.removeEventListener("pointerleave", leave);
-			for (const name of EVENTS) video.removeEventListener(name, tick);
-			bar.dispose();
-		}
-	};
-}
-//#endregion
-export { seekBar };

package/dist/es2015/controls/speed.js

@@ -1,41 +0,0 @@
-import { menu } from "./menu.js";
-//#region src/controls/speed.ts
-const RATES = [
-	.5,
-	.75,
-	1,
-	1.25,
-	1.5,
-	2
-];
-function speedMenu(video) {
-	const control = menu({
-		name: "speed",
-		label: "Playback speed",
-		icon: "playback-speed"
-	});
-	function render() {
-		const items = RATES.map((rate) => [String(rate), rate === 1 ? "Normal" : `${rate}×`]);
-		const current = String(video.playbackRate);
-		if (!RATES.some((rate) => String(rate) === current)) items.push([current, `${current}×`]);
-		control.fill([{
-			name: "rate",
-			items,
-			value: current,
-			onSelect(value) {
-				video.playbackRate = Number(value);
-			}
-		}]);
-	}
-	video.addEventListener("ratechange", render);
-	render();
-	return {
-		root: control.root,
-		dispose() {
-			video.removeEventListener("ratechange", render);
-			control.dispose();
-		}
-	};
-}
-//#endregion
-export { speedMenu };

package/dist/es2015/controls/volume.js

@@ -1,30 +0,0 @@
-import { slider } from "./slider.js";
-//#region src/controls/volume.ts
-function volumeSlider(video) {
-	const bar = slider({
-		name: "volume",
-		label: "Volume",
-		step: .05,
-		page: .2,
-		onInput(value) {
-			video.volume = value;
-			if (value > 0) video.muted = false;
-		}
-	});
-	bar.range(0, 1);
-	function render() {
-		const level = video.muted ? 0 : video.volume;
-		bar.set(level, `${Math.round(level * 100)}%`);
-	}
-	video.addEventListener("volumechange", render);
-	render();
-	return {
-		root: bar.root,
-		dispose() {
-			video.removeEventListener("volumechange", render);
-			bar.dispose();
-		}
-	};
-}
-//#endregion
-export { volumeSlider };

package/dist/es2015/panels/drm.js

@@ -1,29 +0,0 @@
-import { el } from "../dom.js";
-import { namespaces } from "../namespaces.js";
-//#region src/panels/drm.ts
-const drmPanel = (session) => {
-	const engine = session.engine;
-	if (engine === null) return null;
-	const found = namespaces(engine).drm;
-	if (found === void 0) return null;
-	const drm = found;
-	const root = el("div", "panel drm");
-	root.append(el("span", "text drm-text", "DRM"));
-	const keySystem = el("span", "value drm-key-system");
-	root.append(keySystem);
-	function render() {
-		const name = drm.keySystem;
-		keySystem.textContent = name !== null && name !== void 0 ? name : "";
-		root.hidden = name === null;
-	}
-	const off = engine.on("drm:keysystem", render);
-	render();
-	return {
-		root,
-		dispose() {
-			off();
-		}
-	};
-};
-//#endregion
-export { drmPanel };

package/dist/es2015/panels/live.js

@@ -1,48 +0,0 @@
-import { el, state } from "../dom.js";
-import { namespaces } from "../namespaces.js";
-//#region src/panels/live.ts
-/**
-* The live badge over `engine.live`. Present only when a live stage is
-* composed, so the factory answers null for VOD-only engines and for native.
-*
-* Latency has no event; it moves with the playhead. The video's `timeupdate`
-* is the clock the browser already runs, so the badge reads on that.
-*/
-const livePanel = (session, video) => {
-	const engine = session.engine;
-	if (engine === null) return null;
-	const found = namespaces(engine).live;
-	if (found === void 0) return null;
-	const live = found;
-	const root = el("div", "panel live");
-	const badge = el("span", "badge live-badge", "Live");
-	const latency = el("span", "value live-latency");
-	const button = el("button", "button live-edge-button", "Go to live");
-	button.type = "button";
-	root.append(badge, latency, button);
-	let shown = "";
-	function tick() {
-		root.hidden = live.edge === null;
-		const atEdge = live.atEdge;
-		state(root, "panel live", { "at-edge": atEdge });
-		button.disabled = atEdge;
-		const seconds = live.latency;
-		const text = seconds === null ? "" : `${seconds.toFixed(1)}s behind`;
-		if (text === shown) return;
-		shown = text;
-		latency.textContent = text;
-	}
-	button.addEventListener("click", () => {
-		live.seekToEdge();
-	});
-	video.addEventListener("timeupdate", tick);
-	tick();
-	return {
-		root,
-		dispose() {
-			video.removeEventListener("timeupdate", tick);
-		}
-	};
-};
-//#endregion
-export { livePanel };

package/dist/es2015/panels/quality.js

@@ -1,52 +0,0 @@
-import { el, fill, menu } from "../dom.js";
-//#region src/panels/quality.ts
-const AUTO = "auto";
-/** A rendition's height when the manifest declared one, its bitrate otherwise. */
-function label(rendition) {
-	if (rendition.height !== void 0) return `${rendition.height}p`;
-	return `${Math.round(rendition.bitrate / 1e3)} kbps`;
-}
-const qualityPanel = (session, video) => {
-	const engine = session.engine;
-	if (engine === null) return null;
-	const quality = engine.quality;
-	const root = el("div", "panel quality");
-	const [wrapper, select] = menu("quality", "Quality");
-	const playing = el("span", "value quality-playing");
-	root.append(wrapper, playing);
-	let shown = "";
-	function render() {
-		var _quality$pinned;
-		const items = [[AUTO, "Auto"]];
-		for (const rendition of quality.renditions) items.push([rendition.id, label(rendition)]);
-		fill(select, items, (_quality$pinned = quality.pinned) !== null && _quality$pinned !== void 0 ? _quality$pinned : AUTO);
-		root.hidden = quality.renditions.length === 0;
-	}
-	function tick() {
-		const current = quality.playing === null ? "" : label(quality.playing);
-		if (current === shown) return;
-		shown = current;
-		playing.textContent = current;
-	}
-	select.addEventListener("change", () => {
-		if (select.value === AUTO) quality.auto();
-		else quality.pin(select.value);
-	});
-	const offs = [
-		engine.on("tracks:changed", render),
-		engine.on("quality:constraints-unsatisfiable", render),
-		engine.on("quality:pin-unsatisfiable", render)
-	];
-	video.addEventListener("timeupdate", tick);
-	render();
-	tick();
-	return {
-		root,
-		dispose() {
-			for (const off of offs) off();
-			video.removeEventListener("timeupdate", tick);
-		}
-	};
-};
-//#endregion
-export { qualityPanel };

package/dist/es2015/panels/tracks.js

@@ -1,47 +0,0 @@
-import { el, fill, menu } from "../dom.js";
-//#region src/panels/tracks.ts
-const OFF = "off";
-/** The language, then the role, then the id: whichever the manifest gave. */
-function label(track) {
-	const parts = [track.lang, track.role].filter((part) => part !== void 0);
-	return parts.length === 0 ? track.id : parts.join(" · ");
-}
-const tracksPanel = (session) => {
-	const engine = session.engine;
-	if (engine === null) return null;
-	const tracks = engine.tracks;
-	const root = el("div", "panel tracks");
-	const [audioLabel, audio] = menu("audio", "Audio");
-	const [textLabel, text] = menu("text", "Subtitles");
-	root.append(audioLabel, textLabel);
-	function renderOne(select, wrapper, contentType, off) {
-		var _tracks$active$id, _tracks$active;
-		const available = tracks.available.filter((track) => track.contentType === contentType);
-		const items = off ? [[OFF, "Off"]] : [];
-		for (const track of available) items.push([track.id, label(track)]);
-		fill(select, items, (_tracks$active$id = (_tracks$active = tracks.active(contentType)) === null || _tracks$active === void 0 ? void 0 : _tracks$active.id) !== null && _tracks$active$id !== void 0 ? _tracks$active$id : OFF);
-		wrapper.hidden = available.length === 0;
-		return available.length;
-	}
-	function render() {
-		const count = renderOne(audio, audioLabel, "audio", false) + renderOne(text, textLabel, "text", true);
-		root.hidden = count === 0;
-	}
-	audio.addEventListener("change", () => {
-		tracks.select(audio.value);
-	});
-	text.addEventListener("change", () => {
-		if (text.value === OFF) tracks.deselect("text");
-		else tracks.select(text.value);
-	});
-	const offs = [engine.on("tracks:changed", render), engine.on("tracks:selected", render)];
-	render();
-	return {
-		root,
-		dispose() {
-			for (const off of offs) off();
-		}
-	};
-};
-//#endregion
-export { tracksPanel };

package/dist/panels/drm.d.ts

@@ -1,8 +0,0 @@
-/**
- * The DRM indicator over `engine.drm`. Present only when the EME stages are
- * composed. It shows the key system in use and nothing else: sessions and key
- * statuses are diagnostics, and the element is not a diagnostics surface.
- */
-import type { PanelFactory } from './panel.js';
-export declare const drmPanel: PanelFactory;
-//# sourceMappingURL=drm.d.ts.map

package/dist/panels/drm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drm.d.ts","sourceRoot":"","sources":["../../src/panels/drm.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAS,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtD,eAAO,MAAM,QAAQ,EAAE,YA6BtB,CAAC"}

package/dist/panels/drm.js

@@ -1,36 +0,0 @@
-/**
- * The DRM indicator over `engine.drm`. Present only when the EME stages are
- * composed. It shows the key system in use and nothing else: sessions and key
- * statuses are diagnostics, and the element is not a diagnostics surface.
- */
-import { el } from '../dom.js';
-import { namespaces } from '../namespaces.js';
-export const drmPanel = (session) => {
-    const engine = session.engine;
-    if (engine === null)
-        return null;
-    const found = namespaces(engine).drm;
-    if (found === undefined)
-        return null;
-    const drm = found;
-    const root = el('div', 'panel drm');
-    root.append(el('span', 'text drm-text', 'DRM'));
-    const keySystem = el('span', 'value drm-key-system');
-    root.append(keySystem);
-    function render() {
-        const name = drm.keySystem;
-        keySystem.textContent = name ?? '';
-        // Nothing to show until a key session opens, and an empty indicator is
-        // worse than none.
-        root.hidden = name === null;
-    }
-    const off = engine.on('drm:keysystem', render);
-    render();
-    return {
-        root,
-        dispose() {
-            off();
-        },
-    };
-};
-//# sourceMappingURL=drm.js.map

package/dist/panels/drm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"drm.js","sourceRoot":"","sources":["../../src/panels/drm.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,CAAC,MAAM,QAAQ,GAAiB,CAAC,OAAO,EAAgB,EAAE;IAC9D,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC9B,IAAI,MAAM,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC;IACrC,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACrC,MAAM,GAAG,GAAW,KAAK,CAAC;IAE1B,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACpC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,EAAE,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IACrD,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAEvB,SAAS,MAAM;QACb,MAAM,IAAI,GAAG,GAAG,CAAC,SAAS,CAAC;QAC3B,SAAS,CAAC,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC;QACnC,uEAAuE;QACvE,mBAAmB;QACnB,IAAI,CAAC,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9B,CAAC;IAED,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAC/C,MAAM,EAAE,CAAC;IAET,OAAO;QACL,IAAI;QACJ,OAAO;YACL,GAAG,EAAE,CAAC;QACR,CAAC;KACF,CAAC;AACJ,CAAC,CAAC"}

package/dist/panels/error.d.ts

@@ -1,13 +0,0 @@
-/**
- * The error surface. It is not a panel: it outlives a session, because the
- * core reports "no handler claimed this source" when there is no session to
- * hang it on. It stays hidden until a fatal error arrives.
- */
-import type { PlayerError } from '@mattebox/player-core';
-export interface ErrorSurface {
-    readonly root: HTMLElement;
-    show(error: PlayerError): void;
-    clear(): void;
-}
-export declare function errorSurface(retry: () => void): ErrorSurface;
-//# sourceMappingURL=error.d.ts.map

package/dist/panels/error.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../src/panels/error.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,KAAK,IAAI,IAAI,CAAC;CACf;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,YAAY,CAqB5D"}

package/dist/panels/error.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error.js","sourceRoot":"","sources":["../../src/panels/error.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAQ/B,MAAM,UAAU,YAAY,CAAC,KAAiB;IAC5C,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,EAAE,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;IACpD,MAAM,IAAI,GAAG,EAAE,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,EAAE,CAAC,QAAQ,EAAE,oBAAoB,EAAE,OAAO,CAAC,CAAC;IAC3D,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACxC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IACpC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IAEnB,OAAO;QACL,IAAI;QACJ,IAAI,CAAC,KAAkB;YACrB,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC;YACtC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QACD,KAAK;YACH,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/panels/live.d.ts

@@ -1,3 +0,0 @@
-import type { PanelFactory } from './panel.js';
-export declare const livePanel: PanelFactory;
-//# sourceMappingURL=live.d.ts.map

package/dist/panels/live.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"live.d.ts","sourceRoot":"","sources":["../../src/panels/live.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAS,YAAY,EAAE,MAAM,YAAY,CAAC;AAEtD,eAAO,MAAM,SAAS,EAAE,YA8CvB,CAAC"}

package/dist/panels/live.js

@@ -1,56 +0,0 @@
-/**
- * The live badge over `engine.live`. Present only when a live stage is
- * composed, so the factory answers null for VOD-only engines and for native.
- *
- * Latency has no event; it moves with the playhead. The video's `timeupdate`
- * is the clock the browser already runs, so the badge reads on that.
- */
-import { el, state } from '../dom.js';
-import { namespaces } from '../namespaces.js';
-export const livePanel = (session, video) => {
-    const engine = session.engine;
-    if (engine === null)
-        return null;
-    const found = namespaces(engine).live;
-    if (found === undefined)
-        return null;
-    // Annotated, not narrowed: a hoisted function declaration below reads it.
-    const live = found;
-    const root = el('div', 'panel live');
-    const badge = el('span', 'badge live-badge', 'Live');
-    const latency = el('span', 'value live-latency');
-    const button = el('button', 'button live-edge-button', 'Go to live');
-    button.type = 'button';
-    root.append(badge, latency, button);
-    let shown = '';
-    function tick() {
-        // The namespace is present whenever a live stage was composed, which says
-        // nothing about the stream: `full` carries both live adapters, so a VOD
-        // presentation has `engine.live` too. A window that never opened leaves
-        // `edge` null, and that is what makes a stream live.
-        root.hidden = live.edge === null;
-        const atEdge = live.atEdge;
-        // State rides the part name: `::part()` takes no attribute selector, so
-        // `::part(at-edge)` is the only way a page can style the edge state.
-        state(root, 'panel live', { 'at-edge': atEdge });
-        button.disabled = atEdge;
-        const seconds = live.latency;
-        const text = seconds === null ? '' : `${seconds.toFixed(1)}s behind`;
-        if (text === shown)
-            return;
-        shown = text;
-        latency.textContent = text;
-    }
-    button.addEventListener('click', () => {
-        live.seekToEdge();
-    });
-    video.addEventListener('timeupdate', tick);
-    tick();
-    return {
-        root,
-        dispose() {
-            video.removeEventListener('timeupdate', tick);
-        },
-    };
-};
-//# sourceMappingURL=live.js.map

package/dist/panels/live.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"live.js","sourceRoot":"","sources":["../../src/panels/live.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,MAAM,CAAC,MAAM,SAAS,GAAiB,CAAC,OAAO,EAAE,KAAK,EAAgB,EAAE;IACtE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC9B,IAAI,MAAM,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC;IACtC,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IACrC,0EAA0E;IAC1E,MAAM,IAAI,GAAY,KAAK,CAAC;IAE5B,MAAM,IAAI,GAAG,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IACrC,MAAM,KAAK,GAAG,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,EAAE,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IACjD,MAAM,MAAM,GAAG,EAAE,CAAC,QAAQ,EAAE,yBAAyB,EAAE,YAAY,CAAC,CAAC;IACrE,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;IACvB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IAEpC,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,SAAS,IAAI;QACX,0EAA0E;QAC1E,wEAAwE;QACxE,wEAAwE;QACxE,qDAAqD;QACrD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;QACjC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,wEAAwE;QACxE,qEAAqE;QACrE,KAAK,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC;QACzB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,MAAM,IAAI,GAAG,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;QACrE,IAAI,IAAI,KAAK,KAAK;YAAE,OAAO;QAC3B,KAAK,GAAG,IAAI,CAAC;QACb,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QACpC,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAC3C,IAAI,EAAE,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,OAAO;YACL,KAAK,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAChD,CAAC;KACF,CAAC;AACJ,CAAC,CAAC"}

package/dist/panels/panel.d.ts

@@ -1,13 +0,0 @@
-/**
- * What a panel is. A panel reads one engine namespace, subscribes to what it
- * needs, and hands back a root and a teardown. It renders nothing for a
- * native session, and nothing for an engine whose stage was not composed:
- * the factory answers null and the element never inserts it.
- */
-import type { Session } from '@mattebox/player-core';
-export interface Panel {
-    readonly root: HTMLElement;
-    dispose(): void;
-}
-export type PanelFactory = (session: Session, video: HTMLVideoElement) => Panel | null;
-//# sourceMappingURL=panel.d.ts.map

package/dist/panels/panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/panels/panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,KAAK,KAAK,GAAG,IAAI,CAAC"}

package/dist/panels/panel.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=panel.js.map

package/dist/panels/panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/panels/panel.ts"],"names":[],"mappings":""}

package/dist/panels/quality.d.ts

@@ -1,3 +0,0 @@
-import type { PanelFactory } from './panel.js';
-export declare const qualityPanel: PanelFactory;
-//# sourceMappingURL=quality.d.ts.map

package/dist/panels/quality.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"quality.d.ts","sourceRoot":"","sources":["../../src/panels/quality.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAS,YAAY,EAAE,MAAM,YAAY,CAAC;AAUtD,eAAO,MAAM,YAAY,EAAE,YAiD1B,CAAC"}