@moq/watch 0.2.5 → 0.2.7

package/element.d.ts

@@ -2,7 +2,7 @@ import type { Time } from "@moq/lite";
 import * as Moq from "@moq/lite";
 import { MultiBackend } from "./backend";
 import { Broadcast } from "./broadcast";
-import { type Latency, Sync } from "./sync";
+import type { Latency } from "./sync";
 declare const OBSERVED: readonly ["url", "name", "paused", "volume", "muted", "reload", "latency", "jitter"];
 type Observed = (typeof OBSERVED)[number];
 export default class MoqWatch extends HTMLElement {
@@ -10,7 +10,6 @@ export default class MoqWatch extends HTMLElement {
     static observedAttributes: readonly ["url", "name", "paused", "volume", "muted", "reload", "latency", "jitter"];
     connection: Moq.Connection.Reload;
     broadcast: Broadcast;
-    sync: Sync;
     backend: MultiBackend;
     signals: Moq.Signals.Effect;
     constructor();

package/element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,KAAK,GAAG,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,KAAK,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE5C,QAAA,MAAM,QAAQ,sFAAuF,CAAC;AACtG,KAAK,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAQ1C,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,WAAW;;IAChD,MAAM,CAAC,kBAAkB,uFAAY;IAGrC,UAAU,EAAE,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC;IAGlC,SAAS,EAAE,SAAS,CAAC;IAGrB,IAAI,OAAc;IAGlB,OAAO,EAAE,YAAY,CAAC;IAMtB,OAAO,qBAAgB;;IAsGvB,iBAAiB;IAMjB,oBAAoB;IAUpB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAiCzF,IAAI,GAAG,IAAI,GAAG,GAAG,SAAS,CAEzB;IAED,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS,EAEtC;IAED,IAAI,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAEzB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,EAEtC;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,yCAAyC;IACzC,IAAI,MAAM,IAAI,IAAI,CAAC,KAAK,CAEvB;IAED,oDAAoD;IACpD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;CACD;AAID,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,KAAK,GAAG,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,QAAA,MAAM,QAAQ,sFAAuF,CAAC;AACtG,KAAK,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAQ1C,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,WAAW;;IAChD,MAAM,CAAC,kBAAkB,uFAAY;IAGrC,UAAU,EAAE,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC;IAGlC,SAAS,EAAE,SAAS,CAAC;IAGrB,OAAO,EAAE,YAAY,CAAC;IAMtB,OAAO,qBAAgB;;IAsGvB,iBAAiB;IAMjB,oBAAoB;IAUpB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAiCzF,IAAI,GAAG,IAAI,GAAG,GAAG,SAAS,CAEzB;IAED,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS,EAEtC;IAED,IAAI,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAEzB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,EAEtC;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,yCAAyC;IACzC,IAAI,MAAM,IAAI,IAAI,CAAC,KAAK,CAEvB;IAED,oDAAoD;IACpD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;CACD;AAID,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}

package/element.js

@@ -1,15 +1,13 @@
 import * as o from "@moq/lite";
 import { Signal as c, Effect as l } from "@moq/signals";
-import { i as d, B as u, h } from "./broadcast-CZkbruBC.js";
-const b = ["url", "name", "paused", "volume", "muted", "reload", "latency", "jitter"], m = new FinalizationRegistry((r) => r.close());
-class g extends HTMLElement {
-  static observedAttributes = b;
+import { B as d, h as u } from "./broadcast-BMWX8K5V.js";
+const h = ["url", "name", "paused", "volume", "muted", "reload", "latency", "jitter"], b = new FinalizationRegistry((r) => r.close());
+class m extends HTMLElement {
+  static observedAttributes = h;
   // The connection to the moq-relay server.
   connection;
   // The broadcast being watched.
   broadcast;
-  // Used to sync audio and video playback at a target latency.
-  sync = new d();
   // The backend that powers this element.
   backend;
   // Set when the element is connected to the DOM.
@@ -17,9 +15,9 @@ class g extends HTMLElement {
   // Expose the Effect class, so users can easily create effects scoped to this element.
   signals = new l();
   constructor() {
-    super(), m.register(this, this.signals), this.connection = new o.Connection.Reload({
+    super(), b.register(this, this.signals), this.connection = new o.Connection.Reload({
       enabled: this.#t
-    }), this.signals.cleanup(() => this.connection.close()), this.broadcast = new u({
+    }), this.signals.cleanup(() => this.connection.close()), this.broadcast = new d({
       connection: this.connection.established,
       announced: this.connection.announced,
       enabled: this.#t
@@ -28,7 +26,7 @@ class g extends HTMLElement {
     this.signals.run((e) => {
       const a = e.get(this.connection.established)?.rtt;
       t.set(a ? e.get(a) : void 0);
-    }), this.backend = new h({
+    }), this.backend = new u({
       broadcast: this.broadcast,
       rtt: t
     }), this.signals.cleanup(() => this.backend.close());
@@ -147,8 +145,8 @@ class g extends HTMLElement {
     this.backend.latency.set(t);
   }
 }
-customElements.define("moq-watch", g);
+customElements.define("moq-watch", m);
 export {
-  g as default
+  m as default
 };
 //# sourceMappingURL=element.js.map

package/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","sources":["../src/element.ts"],"sourcesContent":["import type { Time } from \"@moq/lite\";\nimport * as Moq from \"@moq/lite\";\nimport { Effect, Signal } from \"@moq/signals\";\nimport { MultiBackend } from \"./backend\";\nimport { Broadcast } from \"./broadcast\";\nimport { type Latency, Sync } from \"./sync\";\n\nconst OBSERVED = [\"url\", \"name\", \"paused\", \"volume\", \"muted\", \"reload\", \"latency\", \"jitter\"] 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// Used to sync audio and video playback at a target latency.\n\tsync = new Sync();\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\t// Flatten the RTT signal from the connection for the backend.\n\t\tconst rtt = new Signal<number | undefined>(undefined);\n\t\tthis.signals.run((effect) => {\n\t\t\tconst conn = effect.get(this.connection.established);\n\t\t\tconst rttSignal = conn?.rtt;\n\t\t\trtt.set(rttSignal ? effect.get(rttSignal) : undefined);\n\t\t});\n\n\t\tthis.backend = new MultiBackend({\n\t\t\tbroadcast: this.broadcast,\n\t\t\trtt,\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\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 {\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\ncustomElements.define(\"moq-watch\", MoqWatch);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"moq-watch\": MoqWatch;\n\t}\n}\n"],"names":["OBSERVED","cleanup","signals","MoqWatch","Sync","#enabled","Signal","Effect","Moq","Broadcast","rtt","effect","rttSignal","MultiBackend","setElement","canvas","video","observer","url","name","volume","jitter","#setLatencyNumber","value","parsed","oldValue","newValue","exhaustive"],"mappings":"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"}
+{"version":3,"file":"element.js","sources":["../src/element.ts"],"sourcesContent":["import type { Time } from \"@moq/lite\";\nimport * as Moq from \"@moq/lite\";\nimport { Effect, Signal } from \"@moq/signals\";\nimport { MultiBackend } from \"./backend\";\nimport { Broadcast } from \"./broadcast\";\nimport type { Latency } from \"./sync\";\n\nconst OBSERVED = [\"url\", \"name\", \"paused\", \"volume\", \"muted\", \"reload\", \"latency\", \"jitter\"] 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\t// Flatten the RTT signal from the connection for the backend.\n\t\tconst rtt = new Signal<number | undefined>(undefined);\n\t\tthis.signals.run((effect) => {\n\t\t\tconst conn = effect.get(this.connection.established);\n\t\t\tconst rttSignal = conn?.rtt;\n\t\t\trtt.set(rttSignal ? effect.get(rttSignal) : undefined);\n\t\t});\n\n\t\tthis.backend = new MultiBackend({\n\t\t\tbroadcast: this.broadcast,\n\t\t\trtt,\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\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 {\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\ncustomElements.define(\"moq-watch\", MoqWatch);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"moq-watch\": MoqWatch;\n\t}\n}\n"],"names":["OBSERVED","cleanup","signals","MoqWatch","#enabled","Signal","Effect","Moq","Broadcast","rtt","effect","rttSignal","MultiBackend","setElement","canvas","video","observer","url","name","volume","jitter","#setLatencyNumber","value","parsed","oldValue","newValue","exhaustive"],"mappings":"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"}

package/index.js

@@ -1,8 +1,8 @@
 import * as E from "@moq/lite";
 import { Signal as i, Effect as h } from "@moq/signals";
 import * as I from "@moq/signals";
-import { o as m, a as c, b as d, s as w, D as y, M as S, R as _, S as f, c as M, E as k, d as P, e as O, P as g, f as j, g as x } from "./broadcast-CZkbruBC.js";
-import { B as G, m as H, h as K, i as Q, t as U } from "./broadcast-CZkbruBC.js";
+import { o as m, a as c, b as d, s as w, D as y, M as S, R as _, S as f, c as M, E as k, d as P, e as O, P as g, f as j, g as x } from "./broadcast-BMWX8K5V.js";
+import { B as G, m as H, h as K, i as Q, t as U } from "./broadcast-BMWX8K5V.js";
 const T = m({
   name: c(w()),
   // name

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@moq/watch",
   "type": "module",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Watch Media over QUIC broadcasts",
   "license": "(MIT OR Apache-2.0)",
   "repository": "github:moq-dev/moq",

package/sync.d.ts

@@ -21,6 +21,7 @@ export declare class Sync {
     signals: Effect;
     constructor(props?: SyncProps);
     received(timestamp: Time.Milli, label?: string): void;
+    now(): Time.Milli | undefined;
     wait(timestamp: Time.Milli): Promise<void>;
     close(): void;
 }

package/sync.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sync.d.ts","sourceRoot":"","sources":["../src/sync.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9C,gGAAgG;AAChG,MAAM,MAAM,OAAO,GAAG,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;AAW/C,MAAM,WAAW,SAAS;IACzB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACpC,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;CACpD;AAED,qBAAa,IAAI;;IAIhB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAmB;IAGrE,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAKzB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAG3B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;IAItC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAgB;IAOnD,QAAQ,CAAC,SAAS,iCAAiD;IAQnE,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAMjC,OAAO,SAAgB;gBAEX,KAAK,CAAC,EAAE,SAAS;IAyD7B,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,SAAK,GAAG,IAAI;IAgD3C,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAqChD,KAAK;CAGL"}
+{"version":3,"file":"sync.d.ts","sourceRoot":"","sources":["../src/sync.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9C,gGAAgG;AAChG,MAAM,MAAM,OAAO,GAAG,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC;AAK/C,MAAM,WAAW,SAAS;IACzB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACpC,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;CACpD;AAED,qBAAa,IAAI;;IAIhB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAmB;IAGrE,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAKzB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAG3B,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC;IAItC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAgB;IAOnD,QAAQ,CAAC,SAAS,iCAAiD;IAMnE,GAAG,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAMjC,OAAO,SAAgB;gBAEX,KAAK,CAAC,EAAE,SAAS;IAwD7B,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,SAAK,GAAG,IAAI;IA0CjD,GAAG,IAAI,IAAI,CAAC,KAAK,GAAG,SAAS;IAOvB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAqChD,KAAK;CAGL"}

package/ui/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/ui/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAW,MAAM,WAAW,CAAC;AAE9C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AACzC,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,KAAK,2BAA2B,GAAG;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC;AAElH,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,MAAM,WAAW,CAAC;IAC/B,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,aAAa,EAAE,MAAM,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;IAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,mBAAmB,EAAE,MAAM,SAAS,EAAE,CAAC;IACvC,eAAe,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAC1C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD,mBAAmB,EAAE,MAAM,OAAO,CAAC;IACnC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,MAAM,OAAO,CAAC;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;IAC5C,aAAa,EAAE,MAAM,cAAc,CAAC;IACpC,aAAa,EAAE,MAAM,cAAc,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,8DAAwC,CAAC;AAEpE,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAkIhF"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/ui/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAW,MAAM,WAAW,CAAC;AAE9C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AACzC,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,KAAK,2BAA2B,GAAG;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC;AAElH,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,WAAW,EAAE,MAAM,WAAW,CAAC;IAC/B,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,aAAa,EAAE,MAAM,MAAM,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,MAAM,OAAO,CAAC;IACzB,OAAO,EAAE,MAAM,OAAO,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;IAC7B,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,mBAAmB,EAAE,MAAM,SAAS,EAAE,CAAC;IACvC,eAAe,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAC1C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD,mBAAmB,EAAE,MAAM,OAAO,CAAC;IACnC,sBAAsB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE,MAAM,OAAO,CAAC;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;IAC5C,aAAa,EAAE,MAAM,cAAc,CAAC;IACpC,aAAa,EAAE,MAAM,cAAc,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,cAAc,8DAAwC,CAAC;AAEpE,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAoIhF"}

package/ui/index.js

@@ -4,7 +4,7 @@ const Kt = !1, Dt = (t, e) => t === e, Ht = /* @__PURE__ */ Symbol("solid-track"
   equals: Dt
 };
 let Mt = Vt;
-const F = 1, at = 2, Rt = {
+const B = 1, at = 2, Rt = {
   owned: null,
   cleanups: null,
   context: null,
@@ -37,15 +37,15 @@ function E(t, e) {
   return [Tt.bind(n), a];
 }
 function T(t, e, n) {
-  const a = kt(t, e, !1, F);
+  const a = kt(t, e, !1, B);
   X(a);
 }
 function Lt(t, e, n) {
   Mt = te;
-  const a = kt(t, e, !1, F);
+  const a = kt(t, e, !1, B);
   a.user = !0, j ? j.push(a) : X(a);
 }
-function B(t, e, n) {
+function O(t, e, n) {
   n = n ? Object.assign({}, rt, n) : rt;
   const a = kt(t, e, !0, 0);
   return a.observers = null, a.observerSlots = null, a.comparator = n.equals || void 0, X(a), Tt.bind(a);
@@ -82,7 +82,7 @@ function jt(t) {
   return p && p.context && (e = p.context[t.id]) !== void 0 ? e : t.defaultValue;
 }
 function Jt(t) {
-  const e = B(t), n = B(() => wt(e()));
+  const e = O(t), n = O(() => wt(e()));
   return n.toArray = () => {
     const a = n();
     return Array.isArray(a) ? a : a != null ? [a] : [];
@@ -90,7 +90,7 @@ function Jt(t) {
 }
 function Tt() {
   if (this.sources && this.state)
-    if (this.state === F) X(this);
+    if (this.state === B) X(this);
     else {
       const t = C;
       C = null, J(() => it(this), !1), C = t;
@@ -106,7 +106,7 @@ function It(t, e, n) {
   return (!t.comparator || !t.comparator(a, e)) && (t.value = e, t.observers && t.observers.length && J(() => {
     for (let r = 0; r < t.observers.length; r += 1) {
       const o = t.observers[r], s = gt && gt.running;
-      s && gt.disposed.has(o), (s ? !o.tState : !o.state) && (o.pure ? C.push(o) : j.push(o), o.observers && zt(o)), s || (o.state = F);
+      s && gt.disposed.has(o), (s ? !o.tState : !o.state) && (o.pure ? C.push(o) : j.push(o), o.observers && zt(o)), s || (o.state = B);
     }
     if (C.length > 1e6)
       throw C = [], new Error();
@@ -125,13 +125,13 @@ function Zt(t, e, n) {
   try {
     a = t.fn(e);
   } catch (s) {
-    return t.pure && (t.state = F, t.owned && t.owned.forEach(Q), t.owned = null), t.updatedAt = n + 1, Ot(s);
+    return t.pure && (t.state = B, t.owned && t.owned.forEach(Q), t.owned = null), t.updatedAt = n + 1, Ot(s);
   } finally {
     v = o, p = r;
   }
   (!t.updatedAt || t.updatedAt <= n) && (t.updatedAt != null && "observers" in t ? It(t, a) : t.value = a, t.updatedAt = n);
 }
-function kt(t, e, n, a = F, r) {
+function kt(t, e, n, a = B, r) {
   const o = {
     fn: t,
     state: a,
@@ -155,7 +155,7 @@ function ot(t) {
   for (; (t = t.owner) && (!t.updatedAt || t.updatedAt < ut); )
     t.state && e.push(t);
   for (let n = e.length - 1; n >= 0; n--)
-    if (t = e[n], t.state === F)
+    if (t = e[n], t.state === B)
       X(t);
     else if (t.state === at) {
       const a = C;
@@ -195,7 +195,7 @@ function it(t, e) {
     const a = t.sources[n];
     if (a.sources) {
       const r = a.state;
-      r === F ? a !== e && (!a.updatedAt || a.updatedAt < ut) && ot(a) : r === at && it(a, e);
+      r === B ? a !== e && (!a.updatedAt || a.updatedAt < ut) && ot(a) : r === at && it(a, e);
     }
   }
 }
@@ -305,13 +305,13 @@ function ie(t) {
   const e = "fallback" in t && {
     fallback: () => t.fallback
   };
-  return B(ae(() => t.each, t.children, e || void 0));
+  return O(ae(() => t.each, t.children, e || void 0));
 }
 function Z(t) {
-  const e = t.keyed, n = B(() => t.when, void 0, void 0), a = e ? n : B(n, void 0, {
+  const e = t.keyed, n = O(() => t.when, void 0, void 0), a = e ? n : O(n, void 0, {
     equals: (r, o) => !r == !o
   });
-  return B(() => {
+  return O(() => {
     const r = a();
     if (r) {
       const o = t.children;
@@ -323,7 +323,7 @@ function Z(t) {
     return t.fallback;
   }, void 0, void 0);
 }
-const mt = (t) => B(() => t());
+const mt = (t) => O(() => t());
 function se(t, e, n) {
   let a = n.length, r = e.length, o = a, s = 0, i = 0, c = e[r - 1].nextSibling, u = null;
   for (; s < r || i < o; ) {
@@ -671,13 +671,13 @@ function xe(t) {
 function ke(t, e, n) {
   return arguments.length === 2 && (n = e, e = {}), we(t, e)(xe(n));
 }
-function O(t) {
+function U(t) {
   const [e, n] = E(t.peek(), { equals: !1 }), a = t.subscribe((r) => n(() => r));
   return ft(() => a()), e;
 }
 const lt = Xt();
 function Ce(t) {
-  const [e, n] = E("no-url"), [a, r] = E(!1), o = O(t.moqWatch.backend.audio.muted), [s, i] = E(0), c = O(t.moqWatch.backend.video.stalled), u = O(t.moqWatch.backend.latency), f = O(t.moqWatch.backend.jitter), [l, S] = E([]), x = O(t.moqWatch.backend.video.source.track), [A, y] = E(!1), [P, $] = E(!!document.fullscreenElement), m = () => {
+  const [e, n] = E("no-url"), [a, r] = E(!1), o = U(t.moqWatch.backend.audio.muted), [s, i] = E(0), c = U(t.moqWatch.backend.video.stalled), u = U(t.moqWatch.backend.latency), f = U(t.moqWatch.backend.jitter), [l, S] = E([]), x = U(t.moqWatch.backend.video.source.track), [A, y] = E(!1), [P, $] = E(!!document.fullscreenElement), m = () => {
     t.moqWatch.paused = !t.moqWatch.paused;
   }, h = () => {
     document.fullscreenElement ? document.exitFullscreen() : t.moqWatch.requestFullscreen();
@@ -687,12 +687,12 @@ function Ce(t) {
     t.moqWatch.backend.audio.muted.update((b) => !b);
   }, q = (b) => {
     t.moqWatch.latency = b;
-  }, U = (b) => {
+  }, N = (b) => {
     t.moqWatch.backend.video.source.target.update((M) => ({
       ...M,
       name: b
     }));
-  }, K = O(t.moqWatch.backend.video.timestamp), D = O(t.moqWatch.backend.video.buffered), dt = O(t.moqWatch.backend.audio.buffered), Y = {
+  }, K = () => t.moqWatch.backend.sync.now(), D = U(t.moqWatch.backend.video.buffered), dt = U(t.moqWatch.backend.audio.buffered), Y = {
     moqWatch: t.moqWatch,
     watchStatus: e,
     togglePlayback: m,
@@ -707,7 +707,7 @@ function Ce(t) {
     setLatency: q,
     availableRenditions: l,
     activeRendition: x,
-    setActiveRendition: U,
+    setActiveRendition: N,
     isStatsPanelVisible: A,
     setIsStatsPanelVisible: y,
     isFullscreen: P,
@@ -744,7 +744,7 @@ function Ce(t) {
     }
   });
 }
-function N() {
+function F() {
   const t = jt(lt);
   if (!t)
     throw new Error("useWatchUIContext must be used within a WatchUIContextProvider");
@@ -752,7 +752,7 @@ function N() {
 }
 var Se = /* @__PURE__ */ R('<div class="watch-ui__buffering flex--center"><div class=watch-ui__buffering-spinner>');
 function Ae() {
-  const t = N();
+  const t = F();
   return g(Z, {
     get when() {
       return t.buffering();
@@ -775,17 +775,17 @@ function qt(t, e, n, a, r) {
     if (d <= h) continue;
     const _ = h / a * c, q = Math.max(2, (d - h) / a * c);
     if (o.globalAlpha = 0.85, o.fillStyle = r ? "#f87171" : y > 0 ? "#facc15" : "#4ade80", typeof o.roundRect == "function" ? (o.beginPath(), o.roundRect(_, S, q, x, A), o.fill()) : o.fillRect(_, S, q, x), m > a) {
-      const U = ((m - a) / 1e3).toFixed(1);
-      o.globalAlpha = 0.7, o.fillStyle = "black", o.font = "500 9px system-ui, sans-serif", o.textAlign = "right", o.textBaseline = "middle", o.fillText(`+${U}s`, _ + q - 4, u / 2);
+      const N = ((m - a) / 1e3).toFixed(1);
+      o.globalAlpha = 0.7, o.fillStyle = "black", o.font = "500 9px system-ui, sans-serif", o.textAlign = "right", o.textBaseline = "middle", o.fillText(`+${N}s`, _ + q - 4, u / 2);
     }
   }
 }
 function Pe(t) {
-  const e = N(), n = () => t.max ?? 4e3, [a, r] = E(!1), [o, s] = E(!1), i = B(() => e.jitter() / n() * 100);
+  const e = F(), n = () => t.max ?? 4e3, [a, r] = E(!1), [o, s] = E(!1), i = O(() => e.jitter() / n() * 100);
   let c, u, f;
   const l = 48, S = (h) => {
     if (!c) return;
-    const d = c.getBoundingClientRect(), _ = d.width - l, U = Math.max(0, Math.min(h - d.left - l, _)) / _ * n(), K = Math.round(U / et) * et, D = Math.max(vt, Math.min(n(), K));
+    const d = c.getBoundingClientRect(), _ = d.width - l, N = Math.max(0, Math.min(h - d.left - l, _)) / _ * n(), K = Math.round(N / et) * et, D = Math.max(vt, Math.min(n(), K));
     e.setLatency(D);
   }, x = (h) => {
     r(!0), s(!0), S(h.clientX), document.addEventListener("mousemove", A), document.addEventListener("mouseup", y);
@@ -815,7 +815,7 @@ function Pe(t) {
   }), ft(() => {
     $ !== void 0 && cancelAnimationFrame($), document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", y);
   }), (() => {
-    var h = $e(), d = h.firstChild, _ = d.firstChild, q = _.nextSibling, U = q.firstChild, K = U.nextSibling, D = q.nextSibling, dt = D.firstChild, Y = dt.nextSibling, V = D.nextSibling, L = V.firstChild, ht = L.firstChild;
+    var h = $e(), d = h.firstChild, _ = d.firstChild, q = _.nextSibling, N = q.firstChild, K = N.nextSibling, D = q.nextSibling, dt = D.firstChild, Y = dt.nextSibling, V = D.nextSibling, L = V.firstChild, ht = L.firstChild;
     d.$$keydown = P, d.$$mousedown = x;
     var b = c;
     typeof b == "function" ? _t(b, d) : c = d, pt(d, "aria-valuemin", vt);
@@ -838,7 +838,7 @@ function Pe(t) {
 }
 le(["mousedown", "keydown"]);
 function qe() {
-  const t = N();
+  const t = F();
   return g(ct, {
     title: "Fullscreen",
     onClick: () => {
@@ -860,7 +860,7 @@ function qe() {
   });
 }
 function Me() {
-  const t = N();
+  const t = F();
   return g(ct, {
     get title() {
       return t.isPlaying() ? "Pause" : "Play";
@@ -889,7 +889,7 @@ function We(t) {
   return t >= 1e6 ? `${(t / 1e6).toFixed(1)} Mbps` : t >= 1e3 ? `${(t / 1e3).toFixed(0)} kbps` : `${t} bps`;
 }
 function je() {
-  const t = N(), e = (n) => {
+  const t = F(), e = (n) => {
     const a = n.currentTarget.value || void 0;
     t.setActiveRendition(a);
   };
@@ -913,7 +913,7 @@ function je() {
   })();
 }
 function Te() {
-  const t = N();
+  const t = F();
   return g(ct, {
     get title() {
       return t.isStatsPanelVisible() ? "Hide stats" : "Show stats";
@@ -929,7 +929,7 @@ function Te() {
 var Ie = /* @__PURE__ */ R('<div class="watch-ui__volume-slider flex--center"><input type=range min=0 max=100><span class=watch-ui__volume-label>');
 const Ve = (t, e) => e || t === 0 ? g(W.Mute, {}) : t > 0 && t <= 33 ? g(W.VolumeLow, {}) : t > 33 && t <= 66 ? g(W.VolumeMedium, {}) : g(W.VolumeHigh, {});
 function ze() {
-  const [t, e] = E(0), n = N(), a = (r) => {
+  const [t, e] = E(0), n = F(), a = (r) => {
     const o = r.currentTarget, s = parseFloat(o.value);
     n.setVolume(s);
   };
@@ -984,7 +984,7 @@ const Be = {
   text: "Unknown"
 };
 function Ne() {
-  const t = N(), e = () => {
+  const t = F(), e = () => {
     const n = t.watchStatus();
     return Be[n] || Fe;
   };