@moq/watch 0.1.1 → 0.2.0

package/broadcast.d.ts

@@ -4,14 +4,14 @@ import { type Getter, Signal } from "@moq/signals";
 export interface BroadcastProps {
     connection?: Moq.Connection.Established | Signal<Moq.Connection.Established | undefined>;
     enabled?: boolean | Signal<boolean>;
-    path?: Moq.Path.Valid | Signal<Moq.Path.Valid | undefined>;
+    name?: Moq.Path.Valid | Signal<Moq.Path.Valid | undefined>;
     reload?: boolean | Signal<boolean>;
 }
 export declare class Broadcast {
     #private;
     connection: Signal<Moq.Connection.Established | undefined>;
     enabled: Signal<boolean>;
-    path: Signal<Moq.Path.Valid | undefined>;
+    name: Signal<Moq.Path.Valid | undefined>;
     status: Moq.Signals.Signal<"offline" | "loading" | "live">;
     reload: Signal<boolean>;
     readonly active: Getter<Moq.Broadcast | undefined>;

package/element.d.ts

@@ -1,30 +1,30 @@
 import type { Time } from "@moq/lite";
 import * as Moq from "@moq/lite";
-import { Signal } from "@moq/signals";
-import type * as Audio from "./audio";
-import { type Backend } from "./backend";
+import { MultiBackend } from "./backend";
 import { Broadcast } from "./broadcast";
 import { Sync } from "./sync";
-import type * as Video from "./video";
-declare const OBSERVED: readonly ["url", "name", "path", "paused", "volume", "muted", "reload", "jitter", "latency"];
+declare const OBSERVED: readonly ["url", "name", "paused", "volume", "muted", "reload", "jitter"];
 type Observed = (typeof OBSERVED)[number];
-export default class MoqWatch extends HTMLElement implements Backend {
+export default class MoqWatch extends HTMLElement {
     #private;
-    static observedAttributes: readonly ["url", "name", "path", "paused", "volume", "muted", "reload", "jitter", "latency"];
+    static observedAttributes: readonly ["url", "name", "paused", "volume", "muted", "reload", "jitter"];
     connection: Moq.Connection.Reload;
     broadcast: Broadcast;
     sync: Sync;
+    backend: MultiBackend;
     signals: Moq.Signals.Effect;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: Observed, oldValue: string | null, newValue: string | null): void;
-    get url(): Signal<URL | undefined>;
-    get path(): Signal<Moq.Path.Valid | undefined>;
-    get jitter(): Signal<Time.Milli>;
-    get paused(): Signal<boolean>;
-    get audio(): Audio.Backend;
-    get video(): Video.Backend;
+    get url(): URL | undefined;
+    set url(value: string | URL | undefined);
+    get name(): Moq.Path.Valid | undefined;
+    set name(value: string | Moq.Path.Valid | undefined);
+    get paused(): boolean;
+    set paused(value: boolean);
+    get jitter(): Time.Milli;
+    set jitter(value: number);
 }
 declare global {
     interface HTMLElementTagNameMap {

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;AACjC,OAAO,EAAU,MAAM,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,KAAK,KAAK,MAAM,SAAS,CAAC;AACtC,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,KAAK,KAAK,MAAM,SAAS,CAAC;AAItC,QAAA,MAAM,QAAQ,8FAA+F,CAAC;AAC9G,KAAK,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAQ1C,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,WAAY,YAAW,OAAO;;IACnE,MAAM,CAAC,kBAAkB,+FAAY;IAGrC,UAAU,EAAE,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC;IAGlC,SAAS,EAAE,SAAS,CAAC;IAGrB,IAAI,OAAc;IASlB,OAAO,qBAAgB;;IA2FvB,iBAAiB;IAMjB,oBAAoB;IAKpB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IA2BzF,IAAI,GAAG,IAAI,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,CAEjC;IAED,IAAI,IAAI,IAAI,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAE7C;IAED,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAE/B;IAED,IAAI,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,CAE5B;IAED,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,CAEzB;IAED,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,CAEzB;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,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,QAAA,MAAM,QAAQ,2EAA4E,CAAC;AAC3F,KAAK,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAQ1C,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,WAAW;;IAChD,MAAM,CAAC,kBAAkB,4EAAY;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;;IA2FvB,iBAAiB;IAMjB,oBAAoB;IAKpB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IA0BzF,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,GAAG,SAAS,CAErC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,EAElD;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,MAAM,IAAI,IAAI,CAAC,KAAK,CAEvB;IAED,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,101 +1,107 @@
-import * as o from "@moq/lite";
-import { Signal as n, Effect as a } from "@moq/signals";
-import { h as l, B as h, g as u } from "./broadcast-BFfLDq15.js";
-const c = ["url", "name", "path", "paused", "volume", "muted", "reload", "jitter", "latency"], d = new FinalizationRegistry((r) => r.close());
+import * as n from "@moq/lite";
+import { Signal as a, Effect as r } from "@moq/signals";
+import { h as c, B as l, g as d } from "./broadcast-DhcOJtcZ.js";
+const u = ["url", "name", "paused", "volume", "muted", "reload", "jitter"], h = new FinalizationRegistry((o) => o.close());
 class b extends HTMLElement {
-  static observedAttributes = c;
+  static observedAttributes = u;
   // 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 l();
+  sync = new c();
   // The backend that powers this element.
-  #t;
+  backend;
   // Set when the element is connected to the DOM.
-  #e = new n(!1);
+  #t = new a(!1);
   // Expose the Effect class, so users can easily create effects scoped to this element.
-  signals = new a();
+  signals = new r();
   constructor() {
-    super(), d.register(this, this.signals), this.connection = new o.Connection.Reload({
-      enabled: this.#e
-    }), this.signals.cleanup(() => this.connection.close()), this.broadcast = new h({
+    super(), h.register(this, this.signals), this.connection = new n.Connection.Reload({
+      enabled: this.#t
+    }), this.signals.cleanup(() => this.connection.close()), this.broadcast = new l({
       connection: this.connection.established,
-      enabled: this.#e
-    }), this.signals.cleanup(() => this.broadcast.close()), this.#t = new u({
+      enabled: this.#t
+    }), this.signals.cleanup(() => this.broadcast.close()), this.backend = new d({
       broadcast: this.broadcast
-    }), this.signals.cleanup(() => this.#t.close());
-    const s = () => {
-      const t = this.querySelector("canvas"), e = this.querySelector("video");
-      if (t && e)
+    }), this.signals.cleanup(() => this.backend.close());
+    const e = () => {
+      const t = this.querySelector("canvas"), s = this.querySelector("video");
+      if (t && s)
         throw new Error("Cannot have both canvas and video elements");
-      this.#t.element.set(t ?? e);
-    }, i = new MutationObserver(s);
-    i.observe(this, { childList: !0, subtree: !0 }), this.signals.cleanup(() => i.disconnect()), s(), this.signals.run((t) => {
-      const e = t.get(this.url);
-      e ? this.setAttribute("url", e.toString()) : this.removeAttribute("url");
+      this.backend.element.set(t ?? s);
+    }, i = new MutationObserver(e);
+    i.observe(this, { childList: !0, subtree: !0 }), this.signals.cleanup(() => i.disconnect()), e(), this.signals.run((t) => {
+      const s = t.get(this.connection.url);
+      s ? this.setAttribute("url", s.toString()) : this.removeAttribute("url");
     }), this.signals.run((t) => {
-      const e = t.get(this.path);
-      e ? this.setAttribute("path", e.toString()) : this.removeAttribute("path");
+      const s = t.get(this.broadcast.name);
+      s ? this.setAttribute("name", s.toString()) : this.removeAttribute("name");
     }), this.signals.run((t) => {
-      t.get(this.audio.muted) ? this.setAttribute("muted", "") : this.removeAttribute("muted");
+      t.get(this.backend.audio.muted) ? this.setAttribute("muted", "") : this.removeAttribute("muted");
     }), this.signals.run((t) => {
-      t.get(this.paused) ? this.setAttribute("paused", "true") : this.removeAttribute("paused");
+      t.get(this.backend.paused) ? this.setAttribute("paused", "true") : this.removeAttribute("paused");
     }), this.signals.run((t) => {
-      const e = t.get(this.audio.volume);
-      this.setAttribute("volume", e.toString());
+      const s = t.get(this.backend.audio.volume);
+      this.setAttribute("volume", s.toString());
     }), this.signals.run((t) => {
-      const e = Math.floor(t.get(this.jitter));
-      this.setAttribute("jitter", e.toString());
+      const s = Math.floor(t.get(this.backend.jitter));
+      this.setAttribute("jitter", s.toString());
     });
   }
   // Annoyingly, we have to use these callbacks to figure out when the element is connected to the DOM.
   // This wouldn't be so bad if there was a destructor for web components to clean up our effects.
   connectedCallback() {
-    this.#e.set(!0), this.style.display = "block", this.style.position = "relative";
+    this.#t.set(!0), this.style.display = "block", this.style.position = "relative";
   }
   disconnectedCallback() {
-    this.#e.set(!1);
+    this.#t.set(!1);
   }
-  attributeChangedCallback(s, i, t) {
+  attributeChangedCallback(e, i, t) {
     if (i !== t)
-      if (s === "url")
-        this.url.set(t ? new URL(t) : void 0);
-      else if (s === "name" || s === "path")
-        this.path.set(t ? o.Path.from(t) : void 0);
-      else if (s === "paused")
-        this.paused.set(t !== null);
-      else if (s === "volume") {
-        const e = t ? Number.parseFloat(t) : 0.5;
-        this.audio.volume.set(e);
-      } else if (s === "muted")
-        this.audio.muted.set(t !== null);
-      else if (s === "reload")
+      if (e === "url")
+        this.connection.url.set(t ? new URL(t) : void 0);
+      else if (e === "name")
+        this.broadcast.name.set(t ? n.Path.from(t) : void 0);
+      else if (e === "paused")
+        this.backend.paused.set(t !== null);
+      else if (e === "volume") {
+        const s = t ? Number.parseFloat(t) : 0.5;
+        this.backend.audio.volume.set(s);
+      } else if (e === "muted")
+        this.backend.audio.muted.set(t !== null);
+      else if (e === "reload")
         this.broadcast.reload.set(t !== null);
-      else if (s === "jitter" || s === "latency")
-        this.jitter.set(t ? Number.parseFloat(t) : 100);
+      else if (e === "jitter")
+        this.backend.jitter.set(t ? Number.parseFloat(t) : 100);
       else {
-        const e = s;
-        throw new Error(`Invalid attribute: ${e}`);
+        const s = e;
+        throw new Error(`Invalid attribute: ${s}`);
       }
   }
   get url() {
-    return this.connection.url;
+    return this.connection.url.peek();
   }
-  get path() {
-    return this.broadcast.path;
+  set url(e) {
+    this.connection.url.set(e ? new URL(e) : void 0);
   }
-  get jitter() {
-    return this.#t.jitter;
+  get name() {
+    return this.broadcast.name.peek();
+  }
+  set name(e) {
+    this.broadcast.name.set(e ? n.Path.from(e) : void 0);
   }
   get paused() {
-    return this.#t.paused;
+    return this.backend.paused.peek();
   }
-  get audio() {
-    return this.#t.audio;
+  set paused(e) {
+    this.backend.paused.set(e);
+  }
+  get jitter() {
+    return this.backend.jitter.peek();
   }
-  get video() {
-    return this.#t.video;
+  set jitter(e) {
+    this.backend.jitter.set(e);
   }
 }
 customElements.define("moq-watch", b);

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 type * as Audio from \"./audio\";\nimport { type Backend, MultiBackend } from \"./backend\";\nimport { Broadcast } from \"./broadcast\";\nimport { Sync } from \"./sync\";\nimport type * as Video from \"./video\";\n\n// TODO remove name; replaced with path\n// TODO remove latency; replaced with buffer\nconst OBSERVED = [\"url\", \"name\", \"path\", \"paused\", \"volume\", \"muted\", \"reload\", \"jitter\", \"latency\"] 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 implements Backend {\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\t#backend: 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\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});\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.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 broadcast = effect.get(this.path);\n\t\t\tif (broadcast) {\n\t\t\t\tthis.setAttribute(\"path\", broadcast.toString());\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"path\");\n\t\t\t}\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst muted = effect.get(this.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.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.audio.volume);\n\t\t\tthis.setAttribute(\"volume\", volume.toString());\n\t\t});\n\n\t\tthis.signals.run((effect) => {\n\t\t\tconst jitter = Math.floor(effect.get(this.jitter));\n\t\t\tthis.setAttribute(\"jitter\", jitter.toString());\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\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.url.set(newValue ? new URL(newValue) : undefined);\n\t\t} else if (name === \"name\" || name === \"path\") {\n\t\t\tthis.path.set(newValue ? Moq.Path.from(newValue) : undefined);\n\t\t} else if (name === \"paused\") {\n\t\t\tthis.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.audio.volume.set(volume);\n\t\t} else if (name === \"muted\") {\n\t\t\tthis.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 === \"jitter\" || name === \"latency\") {\n\t\t\t// \"latency\" is a legacy alias for \"jitter\"\n\t\t\tthis.jitter.set((newValue ? Number.parseFloat(newValue) : 100) as Time.Milli);\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(): Signal<URL | undefined> {\n\t\treturn this.connection.url;\n\t}\n\n\tget path(): Signal<Moq.Path.Valid | undefined> {\n\t\treturn this.broadcast.path;\n\t}\n\n\tget jitter(): Signal<Time.Milli> {\n\t\treturn this.#backend.jitter;\n\t}\n\n\tget paused(): Signal<boolean> {\n\t\treturn this.#backend.paused;\n\t}\n\n\tget audio(): Audio.Backend {\n\t\treturn this.#backend.audio;\n\t}\n\n\tget video(): Video.Backend {\n\t\treturn this.#backend.video;\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","#backend","#enabled","Signal","Effect","Moq","Broadcast","MultiBackend","setElement","canvas","video","observer","effect","url","broadcast","volume","jitter","name","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 { Sync } from \"./sync\";\n\nconst OBSERVED = [\"url\", \"name\", \"paused\", \"volume\", \"muted\", \"reload\", \"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\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});\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\tif (name) {\n\t\t\t\tthis.setAttribute(\"name\", name.toString());\n\t\t\t} else {\n\t\t\t\tthis.removeAttribute(\"name\");\n\t\t\t}\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 jitter = Math.floor(effect.get(this.backend.jitter));\n\t\t\tthis.setAttribute(\"jitter\", jitter.toString());\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\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(newValue ? Moq.Path.from(newValue) : undefined);\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 === \"jitter\") {\n\t\t\tthis.backend.jitter.set((newValue ? Number.parseFloat(newValue) : 100) as Time.Milli);\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 | undefined {\n\t\treturn this.broadcast.name.peek();\n\t}\n\n\tset name(value: string | Moq.Path.Valid | undefined) {\n\t\tthis.broadcast.name.set(value ? Moq.Path.from(value) : undefined);\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 jitter(): Time.Milli {\n\t\treturn this.backend.jitter.peek();\n\t}\n\n\tset jitter(value: number) {\n\t\tthis.backend.jitter.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","MultiBackend","setElement","canvas","video","observer","effect","url","name","volume","jitter","oldValue","newValue","exhaustive","value"],"mappings":"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"}

package/index.js

@@ -1,5 +1,5 @@
-import { D as w, M as p, R as v, S as m, a as y, E as _, b as S, c as k, P as h, d as M, e as P, f } from "./broadcast-BFfLDq15.js";
-import { B as L, m as N, g as V, h as W, t as Y } from "./broadcast-BFfLDq15.js";
+import { D as w, M as p, R as v, S as m, a as y, E as _, b as S, c as k, P as h, d as M, e as P, f } from "./broadcast-DhcOJtcZ.js";
+import { B as L, m as N, g as V, h as W, t as Y } from "./broadcast-DhcOJtcZ.js";
 import { Signal as i, Effect as c } from "@moq/signals";
 const B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@moq/watch",
   "type": "module",
-  "version": "0.1.1",
-  "description": "Watch/subscribe to Media over QUIC streams",
+  "version": "0.2.0",
+  "description": "Watch Media over QUIC broadcasts",
   "license": "(MIT OR Apache-2.0)",
   "repository": "github:moq-dev/moq",
   "exports": {
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@moq/hang": "^0.2.0",
-    "@moq/lite": "^0.1.3",
+    "@moq/lite": "^0.1.4",
     "@moq/signals": "^0.1.3",
     "@moq/ui-core": "^0.1.0"
   }