@moq/watch 0.2.16 → 0.2.17

package/element.js

@@ -1,4 +1,4 @@
-import { a as e, r as t, t as n } from "./broadcast-CG8jZRfA.js";
+import { a as e, r as t, t as n } from "./broadcast-80k1hgfM.js";
 import * as r from "@moq/net";
 import { Effect as i, Signal as a } from "@moq/signals";
 //#region src/element.ts
@@ -8,11 +8,17 @@ var o = [
 	"paused",
 	"volume",
 	"muted",
+	"visible",
 	"reload",
 	"latency",
 	"jitter",
 	"catalog-format"
-], s = new FinalizationRegistry((e) => e.close()), c = class extends HTMLElement {
+];
+function s(e) {
+	let t = e?.trim();
+	return t ? t === "never" || t === "always" || /^-?\d+(\.\d+)?(px|%)$/.test(t) ? t : /^-?\d+(\.\d+)?$/.test(t) ? `${t}px` : (console.warn(`moq-watch: invalid visible="${e}", expected "never", "always", or a CSS length like "200px"`), "0px") : "0px";
+}
+var c = new FinalizationRegistry((e) => e.close()), l = class extends HTMLElement {
 	static observedAttributes = o;
 	connection;
 	broadcast;
@@ -20,7 +26,7 @@ var o = [
 	#e = new a(!1);
 	signals = new i();
 	constructor() {
-		super(), s.register(this, this.signals), this.connection = new r.Connection.Reload({ enabled: this.#e }), this.signals.cleanup(() => this.connection.close()), this.broadcast = new n({
+		super(), c.register(this, this.signals), this.connection = new r.Connection.Reload({ enabled: this.#e }), this.signals.cleanup(() => this.connection.close()), this.broadcast = new n({
 			connection: this.connection.established,
 			announced: this.connection.announced,
 			enabled: this.#e
@@ -46,6 +52,9 @@ var o = [
 			e.get(this.backend.audio.muted) ? this.setAttribute("muted", "") : this.removeAttribute("muted");
 		}), this.signals.run((e) => {
 			e.get(this.backend.paused) ? this.setAttribute("paused", "true") : this.removeAttribute("paused");
+		}), this.signals.run((e) => {
+			let t = e.get(this.backend.visible);
+			this.setAttribute("visible", t);
 		}), this.signals.run((e) => {
 			let t = e.get(this.backend.audio.volume);
 			this.setAttribute("volume", t.toString());
@@ -69,8 +78,8 @@ var o = [
 			t && a(t.contentRect.width, t.contentRect.height);
 		});
 		o.observe(this), this.signals.cleanup(() => o.disconnect());
-		let c = this.getBoundingClientRect();
-		a(c.width, c.height);
+		let s = this.getBoundingClientRect();
+		a(s.width, s.height);
 	}
 	connectedCallback() {
 		this.#e.set(!0), this.style.display = "block", this.style.position = "relative";
@@ -90,6 +99,7 @@ var o = [
 			let e = i ? Number.parseFloat(i) : .5;
 			this.backend.audio.volume.set(e);
 		} else if (e === "muted") this.backend.audio.muted.set(i !== null);
+		else if (e === "visible") this.backend.visible.set(s(i));
 		else if (e === "reload") this.broadcast.reload.set(i !== null);
 		else if (e === "latency") !i || i === "real-time" ? this.backend.latency.set("real-time") : this.#t(i);
 		else if (e === "jitter") this.#t(i);
@@ -126,6 +136,12 @@ var o = [
 	set muted(e) {
 		this.backend.audio.muted.set(e);
 	}
+	get visible() {
+		return this.backend.visible.peek();
+	}
+	set visible(e) {
+		this.backend.visible.set(e);
+	}
 	get reload() {
 		return this.broadcast.reload.peek();
 	}
@@ -157,8 +173,8 @@ var o = [
 		this.broadcast.catalog.set(e);
 	}
 };
-customElements.define("moq-watch", c);
+customElements.define("moq-watch", l);
 //#endregion
-export { c as default };
+export { l as default };
 
 //# sourceMappingURL=element.js.map

package/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#enabled","#setLatencyNumber"],"sources":["../src/element.ts"],"sourcesContent":["import type * as Catalog from \"@moq/hang/catalog\";\nimport type { Time } from \"@moq/net\";\nimport * as Moq from \"@moq/net\";\nimport { Effect, Signal } from \"@moq/signals\";\nimport { MultiBackend } from \"./backend\";\nimport { Broadcast, type CatalogFormat, parseCatalogFormat } from \"./broadcast\";\nimport type { Latency } from \"./sync\";\n\nconst OBSERVED = [\"url\", \"name\", \"paused\", \"volume\", \"muted\", \"reload\", \"latency\", \"jitter\", \"catalog-format\"] as const;\ntype Observed = (typeof OBSERVED)[number];\n\n// Close everything when this element is garbage collected.\n// This is primarily to avoid a console.warn that we didn't close() before GC.\n// There's no destructor for web components so this is the best we can do.\nconst cleanup = new FinalizationRegistry<Effect>((signals) => signals.close());\n\n// An optional web component that wraps a <canvas>\nexport default class MoqWatch extends HTMLElement {\n\tstatic observedAttributes = OBSERVED;\n\n\t// The connection to the moq-relay server.\n\tconnection: Moq.Connection.Reload;\n\n\t// The broadcast being watched.\n\tbroadcast: Broadcast;\n\n\t// The backend that powers this element.\n\tbackend: MultiBackend;\n\n\t// Set when the element is connected to the DOM.\n\t#enabled = new Signal(false);\n\n\t// Expose the Effect class, so users can easily create effects scoped to this element.\n\tsignals = new Effect();\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tcleanup.register(this, this.signals);\n\n\t\tthis.connection = new Moq.Connection.Reload({\n\t\t\tenabled: this.#enabled,\n\t\t});\n\t\tthis.signals.cleanup(() => this.connection.close());\n\n\t\tthis.broadcast = new Broadcast({\n\t\t\tconnection: this.connection.established,\n\t\t\tannounced: this.connection.announced,\n\t\t\tenabled: this.#enabled,\n\t\t});\n\t\tthis.signals.cleanup(() => this.broadcast.close());\n\n\t\tthis.backend = new MultiBackend({\n\t\t\tbroadcast: this.broadcast,\n\t\t\tconnection: this.connection.established,\n\t\t});\n\t\tthis.signals.cleanup(() => this.backend.close());\n\n\t\t// Watch to see if the canvas element is added or removed.\n\t\tconst setElement = () => {\n\t\t\tconst canvas = this.querySelector(\"canvas\") as HTMLCanvasElement | undefined;\n\t\t\tconst video = this.querySelector(\"video\") as HTMLVideoElement | undefined;\n\t\t\tif (canvas && video) {\n\t\t\t\tthrow new Error(\"Cannot have both canvas and video elements\");\n\t\t\t}\n\t\t\tthis.backend.element.set(canvas ?? video);\n\t\t};\n\n\t\tconst observer = new MutationObserver(setElement);\n\t\tobserver.observe(this, { childList: true, subtree: true });\n\t\tthis.signals.cleanup(() => observer.disconnect());\n\t\tsetElement();\n\n\t\t// Optionally update attributes to match the library state.\n\t\t// This is kind of dangerous because it can create loops.\n\t\t// NOTE: This only runs when the element is connected to the DOM, which is not obvious.\n\t\t// This is because there's no destructor for web components to clean up our effects.\n\t\tthis.signals.run((effect) => {\n\t\t\tconst url = effect.get(this.connection.url);\n\t\t\tif (url) {\n\t\t\t\tthis.setAttribute(\"url\", url.toString());\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"url\");\n\t\t\t}\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst name = effect.get(this.broadcast.name);\n\t\t\tthis.setAttribute(\"name\", name.toString());\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst muted = effect.get(this.backend.audio.muted);\n\t\t\tif (muted) {\n\t\t\t\tthis.setAttribute(\"muted\", \"\");\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"muted\");\n\t\t\t}\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst paused = effect.get(this.backend.paused);\n\t\t\tif (paused) {\n\t\t\t\tthis.setAttribute(\"paused\", \"true\");\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"paused\");\n\t\t\t}\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst volume = effect.get(this.backend.audio.volume);\n\t\t\tthis.setAttribute(\"volume\", volume.toString());\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst latency = effect.get(this.backend.latency);\n\t\t\tif (latency === \"real-time\") {\n\t\t\t\tthis.setAttribute(\"latency\", \"real-time\");\n\t\t\t} else {\n\t\t\t\tconst jitter = Math.floor(effect.get(this.backend.jitter));\n\t\t\t\tthis.setAttribute(\"latency\", jitter.toString());\n\t\t\t}\n\t\t});\n\n\t\t// Track the element's rendered size and feed it into the rendition picker,\n\t\t// scaled by devicePixelRatio so high-DPI screens still get sharp renditions.\n\t\tconst updateDimensions = (width: number, height: number) => {\n\t\t\tif (width <= 0 || height <= 0) return;\n\t\t\tconst dpr = window.devicePixelRatio || 1;\n\t\t\tthis.backend.video.source.target.update((prev) => ({\n\t\t\t\t...prev,\n\t\t\t\twidth: Math.round(width * dpr),\n\t\t\t\theight: Math.round(height * dpr),\n\t\t\t}));\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver((entries) => {\n\t\t\tconst entry = entries[0];\n\t\t\tif (!entry) return;\n\t\t\tupdateDimensions(entry.contentRect.width, entry.contentRect.height);\n\t\t});\n\t\tresizeObserver.observe(this);\n\t\tthis.signals.cleanup(() => resizeObserver.disconnect());\n\n\t\t// Seed with the current size in case the observer doesn't fire immediately\n\t\t// (e.g. the element is still 0x0 when we attach).\n\t\tconst rect = this.getBoundingClientRect();\n\t\tupdateDimensions(rect.width, rect.height);\n\t}\n\n\t// Annoyingly, we have to use these callbacks to figure out when the element is connected to the DOM.\n\t// This wouldn't be so bad if there was a destructor for web components to clean up our effects.\n\tconnectedCallback() {\n\t\tthis.#enabled.set(true);\n\t\tthis.style.display = \"block\";\n\t\tthis.style.position = \"relative\";\n\t}\n\n\tdisconnectedCallback() {\n\t\t// Stop everything but don't actually cleanup just in case we get added back to the DOM.\n\t\tthis.#enabled.set(false);\n\t}\n\n\t#setLatencyNumber(value: string | null) {\n\t\tconst parsed = value ? Number.parseFloat(value) : Number.NaN;\n\t\tthis.backend.latency.set((Number.isFinite(parsed) ? parsed : 100) as Time.Milli);\n\t}\n\n\tattributeChangedCallback(name: Observed, oldValue: string | null, newValue: string | null) {\n\t\tif (oldValue === newValue) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (name === \"url\") {\n\t\t\tthis.connection.url.set(newValue ? new URL(newValue) : undefined);\n\t\t} else if (name === \"name\") {\n\t\t\tthis.broadcast.name.set(Moq.Path.from(newValue ?? \"\"));\n\t\t} else if (name === \"paused\") {\n\t\t\tthis.backend.paused.set(newValue !== null);\n\t\t} else if (name === \"volume\") {\n\t\t\tconst volume = newValue ? Number.parseFloat(newValue) : 0.5;\n\t\t\tthis.backend.audio.volume.set(volume);\n\t\t} else if (name === \"muted\") {\n\t\t\tthis.backend.audio.muted.set(newValue !== null);\n\t\t} else if (name === \"reload\") {\n\t\t\tthis.broadcast.reload.set(newValue !== null);\n\t\t} else if (name === \"latency\") {\n\t\t\tif (!newValue || newValue === \"real-time\") {\n\t\t\t\tthis.backend.latency.set(\"real-time\");\n\t\t\t} else {\n\t\t\t\tthis.#setLatencyNumber(newValue);\n\t\t\t}\n\t\t} else if (name === \"jitter\") {\n\t\t\t// Deprecated: use latency=\"<number>\" instead.\n\t\t\tthis.#setLatencyNumber(newValue);\n\t\t} else if (name === \"catalog-format\") {\n\t\t\tthis.broadcast.catalogFormat.set(parseCatalogFormat(newValue));\n\t\t} else {\n\t\t\tconst exhaustive: never = name;\n\t\t\tthrow new Error(`Invalid attribute: ${exhaustive}`);\n\t\t}\n\t}\n\n\tget url(): URL | undefined {\n\t\treturn this.connection.url.peek();\n\t}\n\n\tset url(value: string | URL | undefined) {\n\t\tthis.connection.url.set(value ? new URL(value) : undefined);\n\t}\n\n\tget name(): Moq.Path.Valid {\n\t\treturn this.broadcast.name.peek();\n\t}\n\n\tset name(value: string | Moq.Path.Valid) {\n\t\tthis.broadcast.name.set(Moq.Path.from(value));\n\t}\n\n\tget paused(): boolean {\n\t\treturn this.backend.paused.peek();\n\t}\n\n\tset paused(value: boolean) {\n\t\tthis.backend.paused.set(value);\n\t}\n\n\tget volume(): number {\n\t\treturn this.backend.audio.volume.peek();\n\t}\n\n\tset volume(value: number) {\n\t\tthis.backend.audio.volume.set(value);\n\t}\n\n\tget muted(): boolean {\n\t\treturn this.backend.audio.muted.peek();\n\t}\n\n\tset muted(value: boolean) {\n\t\tthis.backend.audio.muted.set(value);\n\t}\n\n\tget reload(): boolean {\n\t\treturn this.broadcast.reload.peek();\n\t}\n\n\tset reload(value: boolean) {\n\t\tthis.broadcast.reload.set(value);\n\t}\n\n\tget latency(): Latency {\n\t\treturn this.backend.latency.peek();\n\t}\n\n\tset latency(value: Latency) {\n\t\tthis.backend.latency.set(value);\n\t}\n\n\t/** The jitter buffer in milliseconds. */\n\tget jitter(): Time.Milli {\n\t\treturn this.backend.jitter.peek();\n\t}\n\n\t/** @deprecated Use `latency = <number>` instead. */\n\tset jitter(value: number) {\n\t\tthis.backend.latency.set(value as Time.Milli);\n\t}\n\n\tget catalogFormat(): CatalogFormat | undefined {\n\t\treturn this.broadcast.catalogFormat.peek();\n\t}\n\n\tset catalogFormat(value: CatalogFormat | undefined) {\n\t\tthis.broadcast.catalogFormat.set(value);\n\t}\n\n\t/**\n\t * The active catalog. Assign directly when `catalogFormat` is `\"manual\"`;\n\t * for `\"hang\"` and `\"msf\"` this is overwritten by the fetch loop.\n\t */\n\tget catalog(): Catalog.Root | undefined {\n\t\treturn this.broadcast.catalog.peek();\n\t}\n\n\tset catalog(value: Catalog.Root | undefined) {\n\t\tthis.broadcast.catalog.set(value);\n\t}\n}\n\ncustomElements.define(\"moq-watch\", MoqWatch);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"moq-watch\": MoqWatch;\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":["#enabled","#setLatencyNumber"],"sources":["../src/element.ts"],"sourcesContent":["import type * as Catalog from \"@moq/hang/catalog\";\nimport type { Time } from \"@moq/net\";\nimport * as Moq from \"@moq/net\";\nimport { Effect, Signal } from \"@moq/signals\";\nimport { MultiBackend } from \"./backend\";\nimport { Broadcast, type CatalogFormat, parseCatalogFormat } from \"./broadcast\";\nimport type { Latency } from \"./sync\";\nimport type { Visible } from \"./video\";\n\nconst OBSERVED = [\n\t\"url\",\n\t\"name\",\n\t\"paused\",\n\t\"volume\",\n\t\"muted\",\n\t\"visible\",\n\t\"reload\",\n\t\"latency\",\n\t\"jitter\",\n\t\"catalog-format\",\n] as const;\ntype Observed = (typeof OBSERVED)[number];\n\n// Parse the `visible` attribute into a Visible value, falling back to \"0px\" (on screen only).\nfunction parseVisible(value: string | null): Visible {\n\tconst trimmed = value?.trim();\n\tif (!trimmed) return \"0px\";\n\tif (trimmed === \"never\" || trimmed === \"always\") return trimmed;\n\t// A CSS length usable as an IntersectionObserver rootMargin (px or %).\n\tif (/^-?\\d+(\\.\\d+)?(px|%)$/.test(trimmed)) return trimmed;\n\t// Allow a bare number as a px convenience (e.g. visible=\"200\").\n\tif (/^-?\\d+(\\.\\d+)?$/.test(trimmed)) return `${trimmed}px`;\n\tconsole.warn(`moq-watch: invalid visible=\"${value}\", expected \"never\", \"always\", or a CSS length like \"200px\"`);\n\treturn \"0px\";\n}\n\n// Close everything when this element is garbage collected.\n// This is primarily to avoid a console.warn that we didn't close() before GC.\n// There's no destructor for web components so this is the best we can do.\nconst cleanup = new FinalizationRegistry<Effect>((signals) => signals.close());\n\n// An optional web component that wraps a <canvas>\nexport default class MoqWatch extends HTMLElement {\n\tstatic observedAttributes = OBSERVED;\n\n\t// The connection to the moq-relay server.\n\tconnection: Moq.Connection.Reload;\n\n\t// The broadcast being watched.\n\tbroadcast: Broadcast;\n\n\t// The backend that powers this element.\n\tbackend: MultiBackend;\n\n\t// Set when the element is connected to the DOM.\n\t#enabled = new Signal(false);\n\n\t// Expose the Effect class, so users can easily create effects scoped to this element.\n\tsignals = new Effect();\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tcleanup.register(this, this.signals);\n\n\t\tthis.connection = new Moq.Connection.Reload({\n\t\t\tenabled: this.#enabled,\n\t\t});\n\t\tthis.signals.cleanup(() => this.connection.close());\n\n\t\tthis.broadcast = new Broadcast({\n\t\t\tconnection: this.connection.established,\n\t\t\tannounced: this.connection.announced,\n\t\t\tenabled: this.#enabled,\n\t\t});\n\t\tthis.signals.cleanup(() => this.broadcast.close());\n\n\t\tthis.backend = new MultiBackend({\n\t\t\tbroadcast: this.broadcast,\n\t\t\tconnection: this.connection.established,\n\t\t});\n\t\tthis.signals.cleanup(() => this.backend.close());\n\n\t\t// Watch to see if the canvas element is added or removed.\n\t\tconst setElement = () => {\n\t\t\tconst canvas = this.querySelector(\"canvas\") as HTMLCanvasElement | undefined;\n\t\t\tconst video = this.querySelector(\"video\") as HTMLVideoElement | undefined;\n\t\t\tif (canvas && video) {\n\t\t\t\tthrow new Error(\"Cannot have both canvas and video elements\");\n\t\t\t}\n\t\t\tthis.backend.element.set(canvas ?? video);\n\t\t};\n\n\t\tconst observer = new MutationObserver(setElement);\n\t\tobserver.observe(this, { childList: true, subtree: true });\n\t\tthis.signals.cleanup(() => observer.disconnect());\n\t\tsetElement();\n\n\t\t// Optionally update attributes to match the library state.\n\t\t// This is kind of dangerous because it can create loops.\n\t\t// NOTE: This only runs when the element is connected to the DOM, which is not obvious.\n\t\t// This is because there's no destructor for web components to clean up our effects.\n\t\tthis.signals.run((effect) => {\n\t\t\tconst url = effect.get(this.connection.url);\n\t\t\tif (url) {\n\t\t\t\tthis.setAttribute(\"url\", url.toString());\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"url\");\n\t\t\t}\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst name = effect.get(this.broadcast.name);\n\t\t\tthis.setAttribute(\"name\", name.toString());\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst muted = effect.get(this.backend.audio.muted);\n\t\t\tif (muted) {\n\t\t\t\tthis.setAttribute(\"muted\", \"\");\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"muted\");\n\t\t\t}\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst paused = effect.get(this.backend.paused);\n\t\t\tif (paused) {\n\t\t\t\tthis.setAttribute(\"paused\", \"true\");\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"paused\");\n\t\t\t}\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst visible = effect.get(this.backend.visible);\n\t\t\tthis.setAttribute(\"visible\", visible);\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst volume = effect.get(this.backend.audio.volume);\n\t\t\tthis.setAttribute(\"volume\", volume.toString());\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst latency = effect.get(this.backend.latency);\n\t\t\tif (latency === \"real-time\") {\n\t\t\t\tthis.setAttribute(\"latency\", \"real-time\");\n\t\t\t} else {\n\t\t\t\tconst jitter = Math.floor(effect.get(this.backend.jitter));\n\t\t\t\tthis.setAttribute(\"latency\", jitter.toString());\n\t\t\t}\n\t\t});\n\n\t\t// Track the element's rendered size and feed it into the rendition picker,\n\t\t// scaled by devicePixelRatio so high-DPI screens still get sharp renditions.\n\t\tconst updateDimensions = (width: number, height: number) => {\n\t\t\tif (width <= 0 || height <= 0) return;\n\t\t\tconst dpr = window.devicePixelRatio || 1;\n\t\t\tthis.backend.video.source.target.update((prev) => ({\n\t\t\t\t...prev,\n\t\t\t\twidth: Math.round(width * dpr),\n\t\t\t\theight: Math.round(height * dpr),\n\t\t\t}));\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver((entries) => {\n\t\t\tconst entry = entries[0];\n\t\t\tif (!entry) return;\n\t\t\tupdateDimensions(entry.contentRect.width, entry.contentRect.height);\n\t\t});\n\t\tresizeObserver.observe(this);\n\t\tthis.signals.cleanup(() => resizeObserver.disconnect());\n\n\t\t// Seed with the current size in case the observer doesn't fire immediately\n\t\t// (e.g. the element is still 0x0 when we attach).\n\t\tconst rect = this.getBoundingClientRect();\n\t\tupdateDimensions(rect.width, rect.height);\n\t}\n\n\t// Annoyingly, we have to use these callbacks to figure out when the element is connected to the DOM.\n\t// This wouldn't be so bad if there was a destructor for web components to clean up our effects.\n\tconnectedCallback() {\n\t\tthis.#enabled.set(true);\n\t\tthis.style.display = \"block\";\n\t\tthis.style.position = \"relative\";\n\t}\n\n\tdisconnectedCallback() {\n\t\t// Stop everything but don't actually cleanup just in case we get added back to the DOM.\n\t\tthis.#enabled.set(false);\n\t}\n\n\t#setLatencyNumber(value: string | null) {\n\t\tconst parsed = value ? Number.parseFloat(value) : Number.NaN;\n\t\tthis.backend.latency.set((Number.isFinite(parsed) ? parsed : 100) as Time.Milli);\n\t}\n\n\tattributeChangedCallback(name: Observed, oldValue: string | null, newValue: string | null) {\n\t\tif (oldValue === newValue) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (name === \"url\") {\n\t\t\tthis.connection.url.set(newValue ? new URL(newValue) : undefined);\n\t\t} else if (name === \"name\") {\n\t\t\tthis.broadcast.name.set(Moq.Path.from(newValue ?? \"\"));\n\t\t} else if (name === \"paused\") {\n\t\t\tthis.backend.paused.set(newValue !== null);\n\t\t} else if (name === \"volume\") {\n\t\t\tconst volume = newValue ? Number.parseFloat(newValue) : 0.5;\n\t\t\tthis.backend.audio.volume.set(volume);\n\t\t} else if (name === \"muted\") {\n\t\t\tthis.backend.audio.muted.set(newValue !== null);\n\t\t} else if (name === \"visible\") {\n\t\t\tthis.backend.visible.set(parseVisible(newValue));\n\t\t} else if (name === \"reload\") {\n\t\t\tthis.broadcast.reload.set(newValue !== null);\n\t\t} else if (name === \"latency\") {\n\t\t\tif (!newValue || newValue === \"real-time\") {\n\t\t\t\tthis.backend.latency.set(\"real-time\");\n\t\t\t} else {\n\t\t\t\tthis.#setLatencyNumber(newValue);\n\t\t\t}\n\t\t} else if (name === \"jitter\") {\n\t\t\t// Deprecated: use latency=\"<number>\" instead.\n\t\t\tthis.#setLatencyNumber(newValue);\n\t\t} else if (name === \"catalog-format\") {\n\t\t\tthis.broadcast.catalogFormat.set(parseCatalogFormat(newValue));\n\t\t} else {\n\t\t\tconst exhaustive: never = name;\n\t\t\tthrow new Error(`Invalid attribute: ${exhaustive}`);\n\t\t}\n\t}\n\n\tget url(): URL | undefined {\n\t\treturn this.connection.url.peek();\n\t}\n\n\tset url(value: string | URL | undefined) {\n\t\tthis.connection.url.set(value ? new URL(value) : undefined);\n\t}\n\n\tget name(): Moq.Path.Valid {\n\t\treturn this.broadcast.name.peek();\n\t}\n\n\tset name(value: string | Moq.Path.Valid) {\n\t\tthis.broadcast.name.set(Moq.Path.from(value));\n\t}\n\n\tget paused(): boolean {\n\t\treturn this.backend.paused.peek();\n\t}\n\n\tset paused(value: boolean) {\n\t\tthis.backend.paused.set(value);\n\t}\n\n\tget volume(): number {\n\t\treturn this.backend.audio.volume.peek();\n\t}\n\n\tset volume(value: number) {\n\t\tthis.backend.audio.volume.set(value);\n\t}\n\n\tget muted(): boolean {\n\t\treturn this.backend.audio.muted.peek();\n\t}\n\n\tset muted(value: boolean) {\n\t\tthis.backend.audio.muted.set(value);\n\t}\n\n\t/** When video is downloaded relative to the canvas position. See {@link Visible}. */\n\tget visible(): Visible {\n\t\treturn this.backend.visible.peek();\n\t}\n\n\tset visible(value: Visible) {\n\t\tthis.backend.visible.set(value);\n\t}\n\n\tget reload(): boolean {\n\t\treturn this.broadcast.reload.peek();\n\t}\n\n\tset reload(value: boolean) {\n\t\tthis.broadcast.reload.set(value);\n\t}\n\n\tget latency(): Latency {\n\t\treturn this.backend.latency.peek();\n\t}\n\n\tset latency(value: Latency) {\n\t\tthis.backend.latency.set(value);\n\t}\n\n\t/** The jitter buffer in milliseconds. */\n\tget jitter(): Time.Milli {\n\t\treturn this.backend.jitter.peek();\n\t}\n\n\t/** @deprecated Use `latency = <number>` instead. */\n\tset jitter(value: number) {\n\t\tthis.backend.latency.set(value as Time.Milli);\n\t}\n\n\tget catalogFormat(): CatalogFormat | undefined {\n\t\treturn this.broadcast.catalogFormat.peek();\n\t}\n\n\tset catalogFormat(value: CatalogFormat | undefined) {\n\t\tthis.broadcast.catalogFormat.set(value);\n\t}\n\n\t/**\n\t * The active catalog. Assign directly when `catalogFormat` is `\"manual\"`;\n\t * for `\"hang\"` and `\"msf\"` this is overwritten by the fetch loop.\n\t */\n\tget catalog(): Catalog.Root | undefined {\n\t\treturn this.broadcast.catalog.peek();\n\t}\n\n\tset catalog(value: Catalog.Root | undefined) {\n\t\tthis.broadcast.catalog.set(value);\n\t}\n}\n\ncustomElements.define(\"moq-watch\", MoqWatch);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"moq-watch\": MoqWatch;\n\t}\n}\n"],"mappings":"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"}

package/index.d.ts

@@ -1,4 +1,5 @@
 export * as Hang from "@moq/hang";
+export * as Json from "@moq/json";
 export * as Net from "@moq/net";
 /** @deprecated Use `Net` instead. */
 export * as Lite from "@moq/net";

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,qCAAqC;AACrC,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AACjC,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,KAAK,GAAG,MAAM,UAAU,CAAC;AAChC,qCAAqC;AACrC,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AACjC,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC"}

package/index.js

@@ -1,5 +1,6 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./broadcast-CG8jZRfA.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./broadcast-80k1hgfM.js";
 import * as l from "@moq/hang";
-import * as u from "@moq/net";
-import * as d from "@moq/signals";
-export { n as Audio, c as Broadcast, i as CATALOG_FORMATS, l as Hang, u as Lite, u as Net, r as Mse, e as MultiBackend, d as Signals, t as Sync, s as Video, o as parseCatalogFormat, a as timeRangesToArray };
+import * as u from "@moq/json";
+import * as d from "@moq/net";
+import * as f from "@moq/signals";
+export { n as Audio, c as Broadcast, i as CATALOG_FORMATS, l as Hang, u as Json, d as Lite, d as Net, r as Mse, e as MultiBackend, f as Signals, t as Sync, s as Video, o as parseCatalogFormat, a as timeRangesToArray };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@moq/watch",
   "type": "module",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "Watch Media over QUIC broadcasts",
   "license": "(MIT OR Apache-2.0)",
   "repository": "github:moq-dev/moq",
@@ -33,10 +33,10 @@
     "./support/element.js"
   ],
   "dependencies": {
-    "@moq/hang": "^0.2.9",
-    "@moq/json": "^0.0.2",
-    "@moq/net": "^0.1.4",
-    "@moq/msf": "^0.1.1",
-    "@moq/signals": "^0.1.8"
+    "@moq/hang": "^0.2.10",
+    "@moq/json": "^0.0.3",
+    "@moq/net": "^0.1.5",
+    "@moq/msf": "^0.1.2",
+    "@moq/signals": "^0.1.9"
   }
 }

package/video/renderer.d.ts

@@ -1,15 +1,33 @@
 import { Time } from "@moq/net";
 import { Signal } from "@moq/signals";
 import type { Decoder } from "./decoder";
+/**
+ * Controls when video is downloaded relative to the canvas position.
+ *
+ * - `"never"`: never download video.
+ * - `"always"`: always download video, regardless of the canvas position or tab visibility.
+ * - a CSS length (`"0px"`, `"200px"`, `"100%"`, ...): download while the canvas is within
+ *   that distance of the viewport (used as the {@link IntersectionObserver} `rootMargin`) and
+ *   the tab is visible. `"0px"` means strictly on screen; larger values pre-warm the video
+ *   before it scrolls in.
+ */
+export type Visible = "never" | "always" | (string & {});
+/** Options for {@link Renderer}. */
 export type RendererProps = {
+    /** The canvas to render decoded frames to. */
     canvas?: HTMLCanvasElement | Signal<HTMLCanvasElement | undefined>;
+    /** Whether playback is paused; when paused only a single preview frame is fetched. */
     paused?: boolean | Signal<boolean>;
+    /** When video is downloaded relative to the canvas position. See {@link Visible}. Defaults to `"0px"`. */
+    visible?: Visible | Signal<Visible>;
 };
+/** Decodes a video track and paints it to a canvas, gating downloads on canvas visibility. */
 export declare class Renderer {
     #private;
     decoder: Decoder;
     canvas: Signal<HTMLCanvasElement | undefined>;
     paused: Signal<boolean>;
+    visible: Signal<Visible>;
     readonly frame: Signal<VideoFrame | undefined>;
     readonly timestamp: Signal<Time.Milli | undefined>;
     constructor(decoder: Decoder, props?: RendererProps);

package/video/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/video/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAU,MAAM,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,MAAM,aAAa,GAAG;IAC3B,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;IACnE,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAGF,qBAAa,QAAQ;;IACpB,OAAO,EAAE,OAAO,CAAC;IAGjB,MAAM,EAAE,MAAM,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;IAG9C,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAGxB,QAAQ,CAAC,KAAK,iCAAiD;IAG/D,QAAQ,CAAC,SAAS,iCAAiD;gBAMvD,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,aAAa;IAwInD,KAAK;CAQL"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/video/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EAAU,MAAM,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKzC;;;;;;;;;GASG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAEzD,oCAAoC;AACpC,MAAM,MAAM,aAAa,GAAG;IAC3B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;IACnE,sFAAsF;IACtF,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,0GAA0G;IAC1G,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;CACpC,CAAC;AAEF,8FAA8F;AAC9F,qBAAa,QAAQ;;IACpB,OAAO,EAAE,OAAO,CAAC;IAGjB,MAAM,EAAE,MAAM,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;IAG9C,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAGxB,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAGzB,QAAQ,CAAC,KAAK,iCAAiD;IAG/D,QAAQ,CAAC,SAAS,iCAAiD;gBAOvD,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,aAAa;IA8JnD,KAAK;CAQL"}