@moq/watch 0.1.0

package/mse.d.ts

@@ -0,0 +1,19 @@
+import { type Getter, Signal } from "@moq/signals";
+import type { Sync } from "./sync";
+export type MuxerProps = {
+    element?: HTMLMediaElement | Signal<HTMLMediaElement | undefined>;
+    paused?: boolean | Signal<boolean>;
+};
+/**
+ * MSE-based video source for CMAF/fMP4 fragments.
+ * Uses Media Source Extensions to handle complete moof+mdat fragments.
+ */
+export declare class Muxer {
+    #private;
+    element: Signal<HTMLMediaElement | undefined>;
+    paused: Signal<boolean>;
+    readonly mediaSource: Getter<MediaSource | undefined>;
+    constructor(sync: Sync, props?: MuxerProps);
+    close(): void;
+}
+//# sourceMappingURL=mse.d.ts.map

package/mse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mse.d.ts","sourceRoot":"","sources":["../src/mse.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,MAAM,UAAU,GAAG;IACxB,OAAO,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,GAAG,SAAS,CAAC,CAAC;IAClE,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF;;;GAGG;AACH,qBAAa,KAAK;;IACjB,OAAO,EAAE,MAAM,CAAC,gBAAgB,GAAG,SAAS,CAAC,CAAC;IAE9C,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAKxB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,CAAqB;gBAI9D,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,UAAU;IA2H1C,KAAK,IAAI,IAAI;CAGb"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@moq/watch",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Watch/subscribe to Media over QUIC streams",
+  "license": "(MIT OR Apache-2.0)",
+  "repository": "github:moq-dev/moq",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./element": {
+      "types": "./element.d.ts",
+      "default": "./element.js"
+    },
+    "./ui": {
+      "types": "./ui/index.d.ts",
+      "default": "./ui/index.js"
+    },
+    "./support": {
+      "types": "./support/index.d.ts",
+      "default": "./support/index.js"
+    },
+    "./support/element": {
+      "types": "./support/element.d.ts",
+      "default": "./support/element.js"
+    }
+  },
+  "sideEffects": [
+    "./element.js",
+    "./ui/index.js",
+    "./support/element.js"
+  ],
+  "dependencies": {
+    "@moq/hang": "^0.1.3",
+    "@moq/lite": "^0.1.3",
+    "@moq/signals": "^0.1.2",
+    "@moq/ui-core": "^0.1.0"
+  }
+}

package/preview.d.ts

@@ -0,0 +1,23 @@
+import * as Catalog from "@moq/hang/catalog";
+import type * as Moq from "@moq/lite";
+import { Signal } from "@moq/signals";
+export interface PreviewProps {
+    enabled?: boolean | Signal<boolean>;
+}
+export declare class Preview {
+    #private;
+    broadcast: Signal<Moq.Broadcast | undefined>;
+    enabled: Signal<boolean>;
+    preview: Moq.Signals.Signal<{
+        name?: string | undefined;
+        avatar?: string | undefined;
+        audio?: boolean | undefined;
+        video?: boolean | undefined;
+        typing?: boolean | undefined;
+        chat?: boolean | undefined;
+        screen?: boolean | undefined;
+    } | undefined>;
+    constructor(broadcast: Signal<Moq.Broadcast | undefined>, catalog: Signal<Catalog.Root | undefined>, props?: PreviewProps);
+    close(): void;
+}
+//# sourceMappingURL=preview.d.ts.map

package/preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../src/preview.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,KAAK,GAAG,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAU,MAAM,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,YAAY;IAC5B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;CACpC;AAED,qBAAa,OAAO;;IACnB,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACzB,OAAO;;;;;;;;mBAAsD;gBAM5D,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC,EAC5C,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,EACzC,KAAK,CAAC,EAAE,YAAY;IAiCrB,KAAK;CAGL"}

package/support/element.d.ts

@@ -0,0 +1,22 @@
+declare const OBSERVED: readonly ["show", "details"];
+type Observed = (typeof OBSERVED)[number];
+export type Show = "always" | "warning" | "error" | "never";
+export default class MoqWatchSupport extends HTMLElement {
+    #private;
+    static observedAttributes: readonly ["show", "details"];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: Observed, _oldValue: string | null, newValue: string | null): void;
+    get show(): Show;
+    set show(show: Show);
+    get details(): boolean;
+    set details(details: boolean);
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "moq-watch-support": MoqWatchSupport;
+    }
+}
+export {};
+//# sourceMappingURL=element.d.ts.map

package/support/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../src/support/element.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,QAAQ,8BAA+B,CAAC;AAC9C,KAAK,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAO1C,MAAM,MAAM,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,WAAW;;IAQvD,MAAM,CAAC,kBAAkB,+BAAY;;IAUrC,iBAAiB;IAKjB,oBAAoB;IAKpB,wBAAwB,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAgB1F,IAAI,IAAI,IAAI,IAAI,CAEf;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,IAAI,EAElB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,EAE3B;CAgND;AAID,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,eAAe,CAAC;KACrC;CACD"}

package/support/element.js

@@ -0,0 +1,184 @@
+import { Signal as u, Effect as b } from "@moq/signals";
+import { isSupported as m } from "./index.js";
+function d(h, e, ...t) {
+  const n = document.createElement(h);
+  if (!e) return n;
+  const { style: i, classList: a, dataset: o, attributes: l, ...s } = e;
+  return i && Object.assign(n.style, i), a && n.classList.add(...a), o && Object.entries(o).forEach(([r, c]) => {
+    n.dataset[r] = c;
+  }), l && Object.entries(l).forEach(([r, c]) => {
+    n.setAttribute(r, c);
+  }), t && t.forEach((r) => {
+    typeof r == "string" ? n.appendChild(document.createTextNode(r)) : n.appendChild(r);
+  }), Object.assign(n, s), n;
+}
+const f = navigator.userAgent.toLowerCase().includes("firefox"), C = ["show", "details"];
+class y extends HTMLElement {
+  #i = new u("warning");
+  #e = new u(!1);
+  #n = new u(void 0);
+  #r = new u(!1);
+  #t;
+  static observedAttributes = C;
+  constructor() {
+    super(), m().then((e) => this.#n.set(e)).catch((e) => console.error("Failed to detect watch support:", e));
+  }
+  connectedCallback() {
+    this.#t = new b(), this.#t.effect(this.#s.bind(this));
+  }
+  disconnectedCallback() {
+    this.#t?.close(), this.#t = void 0;
+  }
+  attributeChangedCallback(e, t, n) {
+    if (e === "show") {
+      const i = n ?? "warning";
+      if (i === "always" || i === "warning" || i === "error" || i === "never")
+        this.show = i;
+      else
+        throw new Error(`Invalid show: ${i}`);
+    } else if (e === "details")
+      this.details = n !== null;
+    else {
+      const i = e;
+      throw new Error(`Invalid attribute: ${i}`);
+    }
+  }
+  get show() {
+    return this.#i.peek();
+  }
+  set show(e) {
+    this.#i.set(e);
+  }
+  get details() {
+    return this.#e.peek();
+  }
+  set details(e) {
+    this.#e.set(e);
+  }
+  #o(e) {
+    return e.webtransport === "none" || !e.audio.decoding || !e.video.decoding || !e.audio.render || !e.video.render || !Object.values(e.audio.decoding).some((t) => t === !0 || t === "full" || t === "partial") || !Object.values(e.video.decoding).some((t) => t.software || t.hardware) ? "none" : !Object.values(e.audio.decoding).every((t) => t === !0 || t === "full") || !Object.values(e.video.decoding).every((t) => t.software || t.hardware) ? "partial" : "full";
+  }
+  #s(e) {
+    const t = e.get(this.#n);
+    if (!t || e.get(this.#r)) return;
+    const i = e.get(this.#i);
+    if (i === "never") return;
+    const a = this.#o(t);
+    if (i === "warning" && a === "full" || i === "error" && a !== "none") return;
+    const o = d("div", {
+      style: {
+        margin: "0 auto",
+        maxWidth: "28rem",
+        padding: "1rem"
+      }
+    });
+    this.appendChild(o), e.cleanup(() => this.removeChild(o)), this.#a(o, a, e), e.get(this.#e) && this.#d(o, t, e);
+  }
+  #a(e, t, n) {
+    const i = d("div", {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        gap: "1rem",
+        flexWrap: "wrap",
+        justifyContent: "space-between",
+        alignItems: "center"
+      }
+    }), a = d("div", {
+      style: { fontWeight: "bold" }
+    });
+    t === "full" ? a.textContent = "🟢 Full Browser Support" : t === "partial" ? a.textContent = "🟡 Partial Browser Support" : t === "none" && (a.textContent = "🔴 No Browser Support");
+    const o = d("button", {
+      type: "button",
+      style: { fontSize: "14px" }
+    });
+    n.event(o, "click", () => {
+      this.#e.update((s) => !s);
+    }), n.effect((s) => {
+      o.textContent = s.get(this.#e) ? "Details ➖" : "Details ➕";
+    });
+    const l = d(
+      "button",
+      {
+        type: "button",
+        style: { fontSize: "14px" }
+      },
+      "Close ❌"
+    );
+    n.event(l, "click", () => {
+      this.#r.set(!0);
+    }), i.appendChild(a), i.appendChild(o), i.appendChild(l), e.appendChild(i), n.cleanup(() => e.removeChild(i));
+  }
+  #d(e, t, n) {
+    const i = d("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr 1fr",
+        columnGap: "0.5rem",
+        rowGap: "0.2rem",
+        backgroundColor: "rgba(0, 0, 0, 0.6)",
+        borderRadius: "0.5rem",
+        padding: "1rem",
+        fontSize: "0.875rem"
+      }
+    }), a = (r) => r ? "🟢 Yes" : "🔴 No", o = (r) => r?.hardware ? "🟢 Hardware" : r?.software ? `🟡 Software${f ? "*" : ""}` : "🔴 No", l = (r) => r === "full" ? "🟢 Full" : r === "partial" ? "🟡 Polyfill" : "🔴 None", s = (r, c, g) => {
+      const p = d(
+        "div",
+        {
+          style: {
+            gridColumnStart: "1",
+            fontWeight: "bold",
+            textAlign: "right"
+          }
+        },
+        r
+      ), w = d(
+        "div",
+        {
+          style: {
+            gridColumnStart: "2",
+            textAlign: "center"
+          }
+        },
+        c
+      ), v = d(
+        "div",
+        {
+          style: { gridColumnStart: "3" }
+        },
+        g
+      );
+      i.appendChild(p), i.appendChild(w), i.appendChild(v);
+    };
+    if (s("WebTransport", "", l(t.webtransport)), s("Rendering", "Audio", a(t.audio.render)), s("", "Video", a(t.video.render)), s("Decoding", "Opus", l(t.audio.decoding.opus)), s("", "AAC", a(t.audio.decoding.aac)), s("", "AV1", o(t.video.decoding?.av1)), s("", "H.265", o(t.video.decoding?.h265)), s("", "H.264", o(t.video.decoding?.h264)), s("", "VP9", o(t.video.decoding?.vp9)), s("", "VP8", o(t.video.decoding?.vp8)), f) {
+      const r = d(
+        "div",
+        {
+          style: {
+            gridColumnStart: "1",
+            gridColumnEnd: "4",
+            textAlign: "center",
+            fontSize: "0.875rem",
+            fontStyle: "italic"
+          }
+        },
+        "Hardware acceleration is ",
+        d(
+          "a",
+          {
+            href: "https://github.com/w3c/webcodecs/issues/896"
+          },
+          "undetectable"
+        ),
+        " on Firefox."
+      );
+      i.appendChild(r);
+    }
+    e.appendChild(i), n.cleanup(() => e.removeChild(i));
+  }
+}
+customElements.define("moq-watch-support", y);
+export {
+  y as default
+};
+//# sourceMappingURL=element.js.map

package/support/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sources":["../../../signals/src/dom.ts","../../src/support/element.ts"],"sourcesContent":["import type { Effect } from \".\";\n\nexport type CreateOptions<T extends HTMLElement> = {\n\tstyle?: Partial<CSSStyleDeclaration>;\n\tclassName?: string;\n\tclassList?: string[];\n\tid?: string;\n\tdataset?: Record<string, string>;\n\tattributes?: Record<string, string>;\n} & Partial<Omit<T, \"style\" | \"dataset\">>;\n\nexport function create<K extends keyof HTMLElementTagNameMap>(\n\ttagName: K,\n\toptions?: CreateOptions<HTMLElementTagNameMap[K] & HTMLElement>,\n\t...children: (HTMLElement | string)[]\n): HTMLElementTagNameMap[K] {\n\tconst element = document.createElement(tagName);\n\n\tif (!options) return element;\n\n\tconst { style, classList, dataset, attributes, ...props } = options;\n\n\t// Apply styles\n\tif (style) {\n\t\tObject.assign(element.style, style);\n\t}\n\n\t// Apply class list\n\tif (classList) {\n\t\telement.classList.add(...classList);\n\t}\n\n\t// Apply dataset\n\tif (dataset) {\n\t\tObject.entries(dataset).forEach(([key, value]) => {\n\t\t\telement.dataset[key] = value;\n\t\t});\n\t}\n\n\t// Apply attributes\n\tif (attributes) {\n\t\tObject.entries(attributes).forEach(([key, value]) => {\n\t\t\telement.setAttribute(key, value);\n\t\t});\n\t}\n\n\t// Append children\n\tif (children) {\n\t\tchildren.forEach((child) => {\n\t\t\tif (typeof child === \"string\") {\n\t\t\t\telement.appendChild(document.createTextNode(child));\n\t\t\t} else {\n\t\t\t\telement.appendChild(child);\n\t\t\t}\n\t\t});\n\t}\n\n\t// Apply other properties\n\tObject.assign(element, props);\n\n\treturn element;\n}\n\n// Matches solid.js's JSX.Element type.\nexport type Element = Node | ArrayElement | (string & {}) | number | boolean | null | undefined;\ninterface ArrayElement extends Array<Element> {}\n\nexport function render(effect: Effect, parent: Node, element: Element | ((effect: Effect) => Element)) {\n\tconst e = typeof element === \"function\" ? element(effect) : element;\n\tif (e === undefined || e === null) return;\n\n\tlet node: Node;\n\tif (e instanceof Node) {\n\t\tnode = e;\n\t} else if (Array.isArray(e)) {\n\t\tnode = document.createDocumentFragment();\n\t\tfor (const child of e) {\n\t\t\trender(effect, node, child);\n\t\t}\n\t} else if (typeof e === \"number\" || typeof e === \"boolean\" || typeof e === \"string\") {\n\t\tnode = document.createTextNode(e.toString());\n\t} else {\n\t\tconst exhaustive: never = e;\n\t\tthrow new Error(`Invalid element type: ${exhaustive}`);\n\t}\n\n\tparent.appendChild(node);\n\teffect.cleanup(() => parent.removeChild(node));\n}\n\nexport function setClass(effect: Effect, element: HTMLElement, ...classNames: string[]) {\n\tfor (const className of classNames) {\n\t\telement.classList.add(className);\n\t}\n\n\teffect.cleanup(() => {\n\t\tfor (const className of classNames) {\n\t\t\telement.classList.remove(className);\n\t\t}\n\t});\n}\n","import { Effect, Signal } from \"@moq/signals\";\nimport * as DOM from \"@moq/signals/dom\";\nimport { type Codec, type Full, isSupported, type Partial } from \"./\";\n\n// https://bugzilla.mozilla.org/show_bug.cgi?id=1967793\nconst isFirefox = navigator.userAgent.toLowerCase().includes(\"firefox\");\n\nconst OBSERVED = [\"show\", \"details\"] as const;\ntype Observed = (typeof OBSERVED)[number];\n\n// Whether to display the support banner.\n// - \"always\": Always display the banner.\n// - \"warning\": Display the banner if a required feature needs a polyfill/fallback.\n// - \"error\": Display the banner if a required feature is unsupported.\n// - \"never\": Never display the banner.\nexport type Show = \"always\" | \"warning\" | \"error\" | \"never\";\n\nexport default class MoqWatchSupport extends HTMLElement {\n\t#show = new Signal<Show>(\"warning\");\n\t#details = new Signal<boolean>(false);\n\t#support = new Signal<Full | undefined>(undefined);\n\t#close = new Signal<boolean>(false);\n\n\t#signals?: Effect;\n\n\tstatic observedAttributes = OBSERVED;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tisSupported()\n\t\t\t.then((s) => this.#support.set(s))\n\t\t\t.catch((err) => console.error(\"Failed to detect watch support:\", err));\n\t}\n\n\tconnectedCallback() {\n\t\tthis.#signals = new Effect();\n\t\tthis.#signals.effect(this.#render.bind(this));\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.#signals?.close();\n\t\tthis.#signals = undefined;\n\t}\n\n\tattributeChangedCallback(name: Observed, _oldValue: string | null, newValue: string | null) {\n\t\tif (name === \"show\") {\n\t\t\tconst show = newValue ?? \"warning\";\n\t\t\tif (show === \"always\" || show === \"warning\" || show === \"error\" || show === \"never\") {\n\t\t\t\tthis.show = show;\n\t\t\t} else {\n\t\t\t\tthrow new Error(`Invalid show: ${show}`);\n\t\t\t}\n\t\t} else if (name === \"details\") {\n\t\t\tthis.details = newValue !== null;\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 show(): Show {\n\t\treturn this.#show.peek();\n\t}\n\n\tset show(show: Show) {\n\t\tthis.#show.set(show);\n\t}\n\n\tget details(): boolean {\n\t\treturn this.#details.peek();\n\t}\n\n\tset details(details: boolean) {\n\t\tthis.#details.set(details);\n\t}\n\n\t#getSummary(support: Full): Partial {\n\t\tif (support.webtransport === \"none\") return \"none\";\n\n\t\tif (!support.audio.decoding || !support.video.decoding) return \"none\";\n\t\tif (!support.audio.render || !support.video.render) return \"none\";\n\n\t\tif (!Object.values(support.audio.decoding).some((v) => v === true || v === \"full\" || v === \"partial\"))\n\t\t\treturn \"none\";\n\t\tif (!Object.values(support.video.decoding).some((v) => v.software || v.hardware)) return \"none\";\n\n\t\tif (!Object.values(support.audio.decoding).every((v) => v === true || v === \"full\")) return \"partial\";\n\t\tif (!Object.values(support.video.decoding).every((v) => v.software || v.hardware)) return \"partial\";\n\n\t\treturn \"full\";\n\t}\n\n\t#render(effect: Effect) {\n\t\tconst support = effect.get(this.#support);\n\t\tif (!support) return;\n\n\t\tconst close = effect.get(this.#close);\n\t\tif (close) return;\n\n\t\tconst show = effect.get(this.#show);\n\t\tif (show === \"never\") return;\n\n\t\tconst summary = this.#getSummary(support);\n\n\t\t// Don't render the banner if we have full support and they only asked for warnings.\n\t\tif (show === \"warning\" && summary === \"full\") return;\n\n\t\t// Don't render the banner if we have at least partial support and they only asked for errors.\n\t\tif (show === \"error\" && summary !== \"none\") return;\n\n\t\tconst container = DOM.create(\"div\", {\n\t\t\tstyle: {\n\t\t\t\tmargin: \"0 auto\",\n\t\t\t\tmaxWidth: \"28rem\",\n\t\t\t\tpadding: \"1rem\",\n\t\t\t},\n\t\t});\n\n\t\tthis.appendChild(container);\n\t\teffect.cleanup(() => this.removeChild(container));\n\n\t\tthis.#renderHeader(container, summary, effect);\n\n\t\tif (effect.get(this.#details)) {\n\t\t\tthis.#renderDetails(container, support, effect);\n\t\t}\n\t}\n\n\t#renderHeader(parent: HTMLDivElement, summary: Partial, effect: Effect) {\n\t\tconst headerDiv = DOM.create(\"div\", {\n\t\t\tstyle: {\n\t\t\t\tdisplay: \"flex\",\n\t\t\t\tflexDirection: \"row\",\n\t\t\t\tgap: \"1rem\",\n\t\t\t\tflexWrap: \"wrap\",\n\t\t\t\tjustifyContent: \"space-between\",\n\t\t\t\talignItems: \"center\",\n\t\t\t},\n\t\t});\n\n\t\tconst statusDiv = DOM.create(\"div\", {\n\t\t\tstyle: { fontWeight: \"bold\" },\n\t\t});\n\n\t\tif (summary === \"full\") {\n\t\t\tstatusDiv.textContent = \"🟢 Full Browser Support\";\n\t\t} else if (summary === \"partial\") {\n\t\t\tstatusDiv.textContent = \"🟡 Partial Browser Support\";\n\t\t} else if (summary === \"none\") {\n\t\t\tstatusDiv.textContent = \"🔴 No Browser Support\";\n\t\t}\n\n\t\tconst detailsButton = DOM.create(\"button\", {\n\t\t\ttype: \"button\",\n\t\t\tstyle: { fontSize: \"14px\" },\n\t\t});\n\n\t\teffect.event(detailsButton, \"click\", () => {\n\t\t\tthis.#details.update((prev) => !prev);\n\t\t});\n\n\t\teffect.effect((effect) => {\n\t\t\tdetailsButton.textContent = effect.get(this.#details) ? \"Details ➖\" : \"Details ➕\";\n\t\t});\n\n\t\tconst closeButton = DOM.create(\n\t\t\t\"button\",\n\t\t\t{\n\t\t\t\ttype: \"button\",\n\t\t\t\tstyle: { fontSize: \"14px\" },\n\t\t\t},\n\t\t\t\"Close ❌\",\n\t\t);\n\n\t\teffect.event(closeButton, \"click\", () => {\n\t\t\tthis.#close.set(true);\n\t\t});\n\n\t\theaderDiv.appendChild(statusDiv);\n\t\theaderDiv.appendChild(detailsButton);\n\t\theaderDiv.appendChild(closeButton);\n\n\t\tparent.appendChild(headerDiv);\n\t\teffect.cleanup(() => parent.removeChild(headerDiv));\n\t}\n\n\t#renderDetails(parent: HTMLDivElement, support: Full, effect: Effect) {\n\t\tconst container = DOM.create(\"div\", {\n\t\t\tstyle: {\n\t\t\t\tdisplay: \"grid\",\n\t\t\t\tgridTemplateColumns: \"1fr 1fr 1fr\",\n\t\t\t\tcolumnGap: \"0.5rem\",\n\t\t\t\trowGap: \"0.2rem\",\n\t\t\t\tbackgroundColor: \"rgba(0, 0, 0, 0.6)\",\n\t\t\t\tborderRadius: \"0.5rem\",\n\t\t\t\tpadding: \"1rem\",\n\t\t\t\tfontSize: \"0.875rem\",\n\t\t\t},\n\t\t});\n\n\t\tconst binary = (value: boolean | undefined) => (value ? \"🟢 Yes\" : \"🔴 No\");\n\t\tconst hardware = (codec: Codec | undefined) =>\n\t\t\tcodec?.hardware ? \"🟢 Hardware\" : codec?.software ? `🟡 Software${isFirefox ? \"*\" : \"\"}` : \"🔴 No\";\n\t\tconst partial = (value: Partial | undefined) =>\n\t\t\tvalue === \"full\" ? \"🟢 Full\" : value === \"partial\" ? \"🟡 Polyfill\" : \"🔴 None\";\n\n\t\tconst addRow = (label: string, col2: string, col3: string) => {\n\t\t\tconst labelDiv = DOM.create(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tgridColumnStart: \"1\",\n\t\t\t\t\t\tfontWeight: \"bold\",\n\t\t\t\t\t\ttextAlign: \"right\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlabel,\n\t\t\t);\n\n\t\t\tconst col2Div = DOM.create(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tgridColumnStart: \"2\",\n\t\t\t\t\t\ttextAlign: \"center\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tcol2,\n\t\t\t);\n\n\t\t\tconst col3Div = DOM.create(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tstyle: { gridColumnStart: \"3\" },\n\t\t\t\t},\n\t\t\t\tcol3,\n\t\t\t);\n\n\t\t\tcontainer.appendChild(labelDiv);\n\t\t\tcontainer.appendChild(col2Div);\n\t\t\tcontainer.appendChild(col3Div);\n\t\t};\n\n\t\taddRow(\"WebTransport\", \"\", partial(support.webtransport));\n\t\taddRow(\"Rendering\", \"Audio\", binary(support.audio.render));\n\t\taddRow(\"\", \"Video\", binary(support.video.render));\n\t\taddRow(\"Decoding\", \"Opus\", partial(support.audio.decoding.opus));\n\t\taddRow(\"\", \"AAC\", binary(support.audio.decoding.aac));\n\t\taddRow(\"\", \"AV1\", hardware(support.video.decoding?.av1));\n\t\taddRow(\"\", \"H.265\", hardware(support.video.decoding?.h265));\n\t\taddRow(\"\", \"H.264\", hardware(support.video.decoding?.h264));\n\t\taddRow(\"\", \"VP9\", hardware(support.video.decoding?.vp9));\n\t\taddRow(\"\", \"VP8\", hardware(support.video.decoding?.vp8));\n\n\t\tif (isFirefox) {\n\t\t\tconst noteDiv = DOM.create(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\tgridColumnStart: \"1\",\n\t\t\t\t\t\tgridColumnEnd: \"4\",\n\t\t\t\t\t\ttextAlign: \"center\",\n\t\t\t\t\t\tfontSize: \"0.875rem\",\n\t\t\t\t\t\tfontStyle: \"italic\",\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t\"Hardware acceleration is \",\n\t\t\t\tDOM.create(\n\t\t\t\t\t\"a\",\n\t\t\t\t\t{\n\t\t\t\t\t\thref: \"https://github.com/w3c/webcodecs/issues/896\",\n\t\t\t\t\t},\n\t\t\t\t\t\"undetectable\",\n\t\t\t\t),\n\t\t\t\t\" on Firefox.\",\n\t\t\t);\n\t\t\tcontainer.appendChild(noteDiv);\n\t\t}\n\n\t\tparent.appendChild(container);\n\t\teffect.cleanup(() => parent.removeChild(container));\n\t}\n}\n\ncustomElements.define(\"moq-watch-support\", MoqWatchSupport);\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"moq-watch-support\": MoqWatchSupport;\n\t}\n}\n"],"names":["create","tagName","options","children","element","style","classList","dataset","attributes","props","key","value","child","isFirefox","OBSERVED","MoqWatchSupport","#show","Signal","#details","#support","#close","#signals","isSupported","s","err","Effect","#render","name","_oldValue","newValue","show","exhaustive","details","#getSummary","support","v","effect","summary","container","DOM.create","#renderHeader","#renderDetails","parent","headerDiv","statusDiv","detailsButton","prev","closeButton","binary","hardware","codec","partial","addRow","label","col2","col3","labelDiv","col2Div","col3Div","noteDiv"],"mappings":"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"}

package/support/index.d.ts

@@ -0,0 +1,29 @@
+export type Partial = "full" | "partial" | "none";
+export type Codec = {
+    hardware?: boolean;
+    software: boolean;
+};
+export type Audio = {
+    aac: boolean;
+    opus: Partial;
+};
+export type Video = {
+    h264: Codec;
+    h265: Codec;
+    vp8: Codec;
+    vp9: Codec;
+    av1: Codec;
+};
+export type Full = {
+    webtransport: Partial;
+    audio: {
+        decoding: Audio;
+        render: boolean;
+    };
+    video: {
+        decoding: Video | undefined;
+        render: boolean;
+    };
+};
+export declare function isSupported(): Promise<Full>;
+//# sourceMappingURL=index.d.ts.map

package/support/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/support/index.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAElD,MAAM,MAAM,KAAK,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IACnB,GAAG,EAAE,OAAO,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,KAAK,CAAC;IACX,GAAG,EAAE,KAAK,CAAC;IACX,GAAG,EAAE,KAAK,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,KAAK,EAAE;QACN,QAAQ,EAAE,KAAK,CAAC;QAChB,MAAM,EAAE,OAAO,CAAC;KAChB,CAAC;IACF,KAAK,EAAE;QACN,QAAQ,EAAE,KAAK,GAAG,SAAS,CAAC;QAC5B,MAAM,EAAE,OAAO,CAAC;KAChB,CAAC;CACF,CAAC;AA8CF,wBAAsB,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC,CAwBjD"}

package/support/index.js

@@ -0,0 +1,55 @@
+const d = navigator.userAgent.toLowerCase().includes("firefox"), r = {
+  aac: "mp4a.40.2",
+  opus: "opus",
+  av1: "av01.0.08M.08",
+  h264: "avc1.640028",
+  h265: "hev1.1.6.L93.B0",
+  vp9: "vp09.00.10.08",
+  vp8: "vp8"
+};
+async function t(o) {
+  return globalThis.AudioDecoder ? (await AudioDecoder.isConfigSupported({
+    codec: r[o],
+    numberOfChannels: 2,
+    sampleRate: 48e3
+  })).supported === !0 : !1;
+}
+async function e(o) {
+  const a = await VideoDecoder.isConfigSupported({
+    codec: r[o],
+    hardwareAcceleration: "prefer-software"
+  }), n = await VideoDecoder.isConfigSupported({
+    codec: r[o],
+    hardwareAcceleration: "prefer-hardware"
+  });
+  return {
+    hardware: d || n.config?.hardwareAcceleration !== "prefer-hardware" ? void 0 : n.supported === !0,
+    software: a.supported === !0
+  };
+}
+async function p() {
+  return {
+    webtransport: typeof WebTransport < "u" ? "full" : "partial",
+    audio: {
+      decoding: {
+        aac: await t("aac"),
+        opus: await t("opus") ? "full" : "partial"
+      },
+      render: typeof AudioContext < "u" && typeof AudioBufferSourceNode < "u"
+    },
+    video: {
+      decoding: typeof VideoDecoder < "u" ? {
+        h264: await e("h264"),
+        h265: await e("h265"),
+        vp8: await e("vp8"),
+        vp9: await e("vp9"),
+        av1: await e("av1")
+      } : void 0,
+      render: typeof OffscreenCanvas < "u" && typeof CanvasRenderingContext2D < "u"
+    }
+  };
+}
+export {
+  p as isSupported
+};
+//# sourceMappingURL=index.js.map

package/support/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/support/index.ts"],"sourcesContent":["// https://bugzilla.mozilla.org/show_bug.cgi?id=1967793\nconst isFirefox = navigator.userAgent.toLowerCase().includes(\"firefox\");\n\nexport type Partial = \"full\" | \"partial\" | \"none\";\n\nexport type Codec = {\n\thardware?: boolean; // undefined when we can't detect hardware acceleration\n\tsoftware: boolean;\n};\n\nexport type Audio = {\n\taac: boolean;\n\topus: Partial;\n};\n\nexport type Video = {\n\th264: Codec;\n\th265: Codec;\n\tvp8: Codec;\n\tvp9: Codec;\n\tav1: Codec;\n};\n\nexport type Full = {\n\twebtransport: Partial;\n\taudio: {\n\t\tdecoding: Audio;\n\t\trender: boolean;\n\t};\n\tvideo: {\n\t\tdecoding: Video | undefined;\n\t\trender: boolean;\n\t};\n};\n\n// Pick a codec string for each codec.\n// This is not strictly correct, as browsers may not support every profile or level.\nconst CODECS = {\n\taac: \"mp4a.40.2\",\n\topus: \"opus\",\n\tav1: \"av01.0.08M.08\",\n\th264: \"avc1.640028\",\n\th265: \"hev1.1.6.L93.B0\",\n\tvp9: \"vp09.00.10.08\",\n\tvp8: \"vp8\",\n};\n\nasync function audioDecoderSupported(codec: keyof typeof CODECS): Promise<boolean> {\n\tif (!globalThis.AudioDecoder) return false;\n\n\tconst res = await AudioDecoder.isConfigSupported({\n\t\tcodec: CODECS[codec],\n\t\tnumberOfChannels: 2,\n\t\tsampleRate: 48000,\n\t});\n\n\treturn res.supported === true;\n}\n\nasync function videoDecoderSupported(codec: keyof typeof CODECS): Promise<Codec> {\n\tconst software = await VideoDecoder.isConfigSupported({\n\t\tcodec: CODECS[codec],\n\t\thardwareAcceleration: \"prefer-software\",\n\t});\n\n\tconst hardware = await VideoDecoder.isConfigSupported({\n\t\tcodec: CODECS[codec],\n\t\thardwareAcceleration: \"prefer-hardware\",\n\t});\n\n\t// We can't reliably detect hardware encoding on Firefox: https://github.com/w3c/webcodecs/issues/896\n\tconst unknown = isFirefox || hardware.config?.hardwareAcceleration !== \"prefer-hardware\";\n\n\treturn {\n\t\thardware: unknown ? undefined : hardware.supported === true,\n\t\tsoftware: software.supported === true,\n\t};\n}\n\nexport async function isSupported(): Promise<Full> {\n\treturn {\n\t\twebtransport: typeof WebTransport !== \"undefined\" ? \"full\" : \"partial\",\n\t\taudio: {\n\t\t\tdecoding: {\n\t\t\t\taac: await audioDecoderSupported(\"aac\"),\n\t\t\t\topus: (await audioDecoderSupported(\"opus\")) ? \"full\" : \"partial\",\n\t\t\t},\n\t\t\trender: typeof AudioContext !== \"undefined\" && typeof AudioBufferSourceNode !== \"undefined\",\n\t\t},\n\t\tvideo: {\n\t\t\tdecoding:\n\t\t\t\ttypeof VideoDecoder !== \"undefined\"\n\t\t\t\t\t? {\n\t\t\t\t\t\t\th264: await videoDecoderSupported(\"h264\"),\n\t\t\t\t\t\t\th265: await videoDecoderSupported(\"h265\"),\n\t\t\t\t\t\t\tvp8: await videoDecoderSupported(\"vp8\"),\n\t\t\t\t\t\t\tvp9: await videoDecoderSupported(\"vp9\"),\n\t\t\t\t\t\t\tav1: await videoDecoderSupported(\"av1\"),\n\t\t\t\t\t\t}\n\t\t\t\t\t: undefined,\n\t\t\trender: typeof OffscreenCanvas !== \"undefined\" && typeof CanvasRenderingContext2D !== \"undefined\",\n\t\t},\n\t};\n}\n"],"names":["isFirefox","CODECS","audioDecoderSupported","codec","videoDecoderSupported","software","hardware","isSupported"],"mappings":"AACA,MAAMA,IAAY,UAAU,UAAU,YAAA,EAAc,SAAS,SAAS,GAoChEC,IAAS;AAAA,EACd,KAAK;AAAA,EACL,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AACN;AAEA,eAAeC,EAAsBC,GAA8C;AAClF,SAAK,WAAW,gBAEJ,MAAM,aAAa,kBAAkB;AAAA,IAChD,OAAOF,EAAOE,CAAK;AAAA,IACnB,kBAAkB;AAAA,IAClB,YAAY;AAAA,EAAA,CACZ,GAEU,cAAc,KARY;AAStC;AAEA,eAAeC,EAAsBD,GAA4C;AAChF,QAAME,IAAW,MAAM,aAAa,kBAAkB;AAAA,IACrD,OAAOJ,EAAOE,CAAK;AAAA,IACnB,sBAAsB;AAAA,EAAA,CACtB,GAEKG,IAAW,MAAM,aAAa,kBAAkB;AAAA,IACrD,OAAOL,EAAOE,CAAK;AAAA,IACnB,sBAAsB;AAAA,EAAA,CACtB;AAKD,SAAO;AAAA,IACN,UAHeH,KAAaM,EAAS,QAAQ,yBAAyB,oBAGlD,SAAYA,EAAS,cAAc;AAAA,IACvD,UAAUD,EAAS,cAAc;AAAA,EAAA;AAEnC;AAEA,eAAsBE,IAA6B;AAClD,SAAO;AAAA,IACN,cAAc,OAAO,eAAiB,MAAc,SAAS;AAAA,IAC7D,OAAO;AAAA,MACN,UAAU;AAAA,QACT,KAAK,MAAML,EAAsB,KAAK;AAAA,QACtC,MAAO,MAAMA,EAAsB,MAAM,IAAK,SAAS;AAAA,MAAA;AAAA,MAExD,QAAQ,OAAO,eAAiB,OAAe,OAAO,wBAA0B;AAAA,IAAA;AAAA,IAEjF,OAAO;AAAA,MACN,UACC,OAAO,eAAiB,MACrB;AAAA,QACA,MAAM,MAAME,EAAsB,MAAM;AAAA,QACxC,MAAM,MAAMA,EAAsB,MAAM;AAAA,QACxC,KAAK,MAAMA,EAAsB,KAAK;AAAA,QACtC,KAAK,MAAMA,EAAsB,KAAK;AAAA,QACtC,KAAK,MAAMA,EAAsB,KAAK;AAAA,MAAA,IAEtC;AAAA,MACJ,QAAQ,OAAO,kBAAoB,OAAe,OAAO,2BAA6B;AAAA,IAAA;AAAA,EACvF;AAEF;"}

package/sync.d.ts

@@ -0,0 +1,21 @@
+import { Time } from "@moq/lite";
+import { Effect, Signal } from "@moq/signals";
+export interface SyncProps {
+    jitter?: Time.Milli | Signal<Time.Milli>;
+    audio?: Time.Milli | Signal<Time.Milli | undefined>;
+    video?: Time.Milli | Signal<Time.Milli | undefined>;
+}
+export declare class Sync {
+    #private;
+    readonly reference: Signal<Time.Milli | undefined>;
+    jitter: Signal<Time.Milli>;
+    audio: Signal<Time.Milli | undefined>;
+    video: Signal<Time.Milli | undefined>;
+    readonly latency: Signal<Time.Milli>;
+    signals: Effect;
+    constructor(props?: SyncProps);
+    received(timestamp: Time.Milli): void;
+    wait(timestamp: Time.Milli): Promise<void>;
+    close(): void;
+}
+//# sourceMappingURL=sync.d.ts.map

package/sync.d.ts.map

@@ -0,0 +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,MAAM,WAAW,SAAS;IACzB,MAAM,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,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;;IAKhB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAmB;IAGrE,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,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAiB;IAOrD,OAAO,SAAgB;gBAEX,KAAK,CAAC,EAAE,SAAS;IA4B7B,QAAQ,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI;IAgB/B,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAwBhD,KAAK;CAGL"}

package/ui/components/BufferControl.d.ts

@@ -0,0 +1,8 @@
+import { Moq } from "@moq/hang";
+type BufferControlProps = {
+    /** Maximum buffer range in milliseconds (default: 5000ms = 5s) */
+    max?: Moq.Time.Milli;
+};
+export default function BufferControl(props: BufferControlProps): import("solid-js").JSX.Element;
+export {};
+//# sourceMappingURL=BufferControl.d.ts.map

package/ui/components/BufferControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BufferControl.d.ts","sourceRoot":"","sources":["../../../src/ui/components/BufferControl.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAQhC,KAAK,kBAAkB,GAAG;IACzB,kEAAkE;IAClE,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;CACrB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,kBAAkB,kCAsJ9D"}

package/ui/components/BufferingIndicator.d.ts

@@ -0,0 +1,2 @@
+export default function BufferingIndicator(): import("solid-js").JSX.Element;
+//# sourceMappingURL=BufferingIndicator.d.ts.map

package/ui/components/BufferingIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BufferingIndicator.d.ts","sourceRoot":"","sources":["../../../src/ui/components/BufferingIndicator.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,kBAAkB,mCAUzC"}

package/ui/components/FullscreenButton.d.ts

@@ -0,0 +1,2 @@
+export default function FullscreenButton(): import("solid-js").JSX.Element;
+//# sourceMappingURL=FullscreenButton.d.ts.map

package/ui/components/FullscreenButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullscreenButton.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FullscreenButton.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,gBAAgB,mCAcvC"}

package/ui/components/LatencySlider.d.ts

@@ -0,0 +1,2 @@
+export default function LatencySlider(): import("solid-js").JSX.Element;
+//# sourceMappingURL=LatencySlider.d.ts.map

package/ui/components/LatencySlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LatencySlider.d.ts","sourceRoot":"","sources":["../../../src/ui/components/LatencySlider.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,aAAa,mCA0BpC"}

package/ui/components/PlayPauseButton.d.ts

@@ -0,0 +1,2 @@
+export default function PlayPauseButton(): import("solid-js").JSX.Element;
+//# sourceMappingURL=PlayPauseButton.d.ts.map

package/ui/components/PlayPauseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayPauseButton.d.ts","sourceRoot":"","sources":["../../../src/ui/components/PlayPauseButton.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,eAAe,mCAatC"}

package/ui/components/QualitySelector.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from "solid-js";
+export default function QualitySelector(): JSX.Element;
+//# sourceMappingURL=QualitySelector.d.ts.map

package/ui/components/QualitySelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QualitySelector.d.ts","sourceRoot":"","sources":["../../../src/ui/components/QualitySelector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAGzC,MAAM,CAAC,OAAO,UAAU,eAAe,gBA+BtC"}

package/ui/components/StatsButton.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Toggle button for showing/hiding stats panel
+ */
+export default function StatsButton(): import("solid-js").JSX.Element;
+//# sourceMappingURL=StatsButton.d.ts.map

package/ui/components/StatsButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatsButton.d.ts","sourceRoot":"","sources":["../../../src/ui/components/StatsButton.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,mCAYlC"}

package/ui/components/VolumeSlider.d.ts

@@ -0,0 +1,2 @@
+export default function VolumeSlider(): import("solid-js").JSX.Element;
+//# sourceMappingURL=VolumeSlider.d.ts.map

package/ui/components/VolumeSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeSlider.d.ts","sourceRoot":"","sources":["../../../src/ui/components/VolumeSlider.tsx"],"names":[],"mappings":"AAgBA,MAAM,CAAC,OAAO,UAAU,YAAY,mCAwBnC"}

package/ui/components/WatchControls.d.ts

@@ -0,0 +1,2 @@
+export default function WatchControls(): import("solid-js").JSX.Element;
+//# sourceMappingURL=WatchControls.d.ts.map

package/ui/components/WatchControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WatchControls.d.ts","sourceRoot":"","sources":["../../../src/ui/components/WatchControls.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,aAAa,mCAgBpC"}

package/ui/components/WatchStatusIndicator.d.ts

@@ -0,0 +1,2 @@
+export default function WatchStatusIndicator(): import("solid-js").JSX.Element;
+//# sourceMappingURL=WatchStatusIndicator.d.ts.map

package/ui/components/WatchStatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WatchStatusIndicator.d.ts","sourceRoot":"","sources":["../../../src/ui/components/WatchStatusIndicator.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,oBAAoB,mCAgB3C"}

package/ui/context.d.ts

@@ -0,0 +1,41 @@
+import { type Moq } from "@moq/hang";
+import type { JSX } from "solid-js";
+import type { BufferedRanges } from "..";
+import type MoqWatch from "../element";
+type WatchUIContextProviderProps = {
+    moqWatch: MoqWatch;
+    children: JSX.Element;
+};
+type WatchStatus = "no-url" | "disconnected" | "connecting" | "offline" | "loading" | "live" | "connected";
+export type Rendition = {
+    name: string;
+    width?: number;
+    height?: number;
+};
+export type WatchUIContextValues = {
+    moqWatch: MoqWatch;
+    watchStatus: () => WatchStatus;
+    isPlaying: () => boolean;
+    isMuted: () => boolean;
+    setVolume: (vol: number) => void;
+    currentVolume: () => number;
+    togglePlayback: () => void;
+    toggleMuted: () => void;
+    buffering: () => boolean;
+    jitter: () => Moq.Time.Milli;
+    setJitter: (value: Moq.Time.Milli) => void;
+    availableRenditions: () => Rendition[];
+    activeRendition: () => string | undefined;
+    setActiveRendition: (name: string | undefined) => void;
+    isStatsPanelVisible: () => boolean;
+    setIsStatsPanelVisible: (visible: boolean) => void;
+    isFullscreen: () => boolean;
+    toggleFullscreen: () => void;
+    timestamp: () => Moq.Time.Milli | undefined;
+    videoBuffered: () => BufferedRanges;
+    audioBuffered: () => BufferedRanges;
+};
+export declare const WatchUIContext: import("solid-js").Context<WatchUIContextValues | undefined>;
+export default function WatchUIContextProvider(props: WatchUIContextProviderProps): JSX.Element;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/ui/context.d.ts.map

@@ -0,0 +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;AAEvC,KAAK,2BAA2B,GAAG;IAClC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC;AAE3G,MAAM,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB,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,MAAM,EAAE,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;IAC7B,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC;IAC3C,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,eAoJhF"}

package/ui/element.d.ts

@@ -0,0 +1,5 @@
+import type MoqWatch from "../element";
+export declare function WatchUI(props: {
+    watch: MoqWatch;
+}): import("solid-js").JSX.Element;
+//# sourceMappingURL=element.d.ts.map

package/ui/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../src/ui/element.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAC;AAOvC,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,QAAQ,CAAA;CAAE,kCAyBjD"}

package/ui/hooks/use-watch-ui.d.ts

@@ -0,0 +1,3 @@
+import { type WatchUIContextValues } from "../context";
+export default function useWatchUIContext(): WatchUIContextValues;
+//# sourceMappingURL=use-watch-ui.d.ts.map