@moq/watch 0.2.10 → 0.2.11

package/ui/index.js

@@ -1,4 +1,4 @@
-import { Button as ct, Icon as W, Stats as Nt } from "@moq/ui-core";
+import { Button as ct, Icon as L, Stats as Nt } from "@moq/ui-core";
 import { Signals as Ut } from "@moq/hang";
 const Kt = !1, Dt = (t, e) => t === e, Ht = /* @__PURE__ */ Symbol("solid-track"), rt = {
   equals: Dt
@@ -40,7 +40,7 @@ function T(t, e, n) {
   const a = kt(t, e, !1, B);
   X(a);
 }
-function Lt(t, e, n) {
+function Wt(t, e, n) {
   Mt = te;
   const a = kt(t, e, !1, B);
   a.user = !0, j ? j.push(a) : X(a);
@@ -60,8 +60,8 @@ function I(t) {
     v = e;
   }
 }
-function Wt(t) {
-  Lt(() => I(t));
+function Lt(t) {
+  Wt(() => I(t));
 }
 function ft(t) {
   return p === null || (p.cleanups === null ? p.cleanups = [t] : p.cleanups.push(t)), t;
@@ -715,17 +715,17 @@ function Ce(t) {
     timestamp: K,
     videoBuffered: D,
     audioBuffered: dt
-  }, V = t.moqWatch, L = new Ut.Effect();
-  L.run((b) => {
+  }, V = t.moqWatch, W = new Ut.Effect();
+  W.run((b) => {
     const M = b.get(V.connection.url), z = b.get(V.connection.status), k = b.get(V.broadcast.status);
     M ? z === "disconnected" ? n("disconnected") : z === "connecting" ? n("connecting") : k === "offline" ? n("offline") : k === "loading" ? n("loading") : k === "live" ? n("live") : z === "connected" && n("connected") : n("no-url");
-  }), L.run((b) => {
+  }), W.run((b) => {
     const M = b.get(V.backend.paused);
     r(!M);
-  }), L.run((b) => {
+  }), W.run((b) => {
     const M = b.get(V.backend.audio.volume);
     i(M * 100);
-  }), L.run((b) => {
+  }), W.run((b) => {
     const z = b.get(V.backend.video.source.catalog)?.renditions ?? {}, k = Object.entries(z).map(([tt, H]) => ({
       name: tt,
       width: H.codedWidth,
@@ -737,7 +737,7 @@ function Ce(t) {
   const ht = () => {
     $(!!document.fullscreenElement);
   };
-  return L.event(document, "fullscreenchange", ht), ft(() => L.close()), g(lt.Provider, {
+  return W.event(document, "fullscreenchange", ht), ft(() => W.close()), g(lt.Provider, {
     value: Y,
     get children() {
       return t.children;
@@ -810,12 +810,12 @@ function Pe(t) {
     const h = n(), d = e.timestamp(), _ = e.buffering();
     u && qt(u, e.videoBuffered(), d, h, _), f && qt(f, e.audioBuffered(), d, h, _), $ = requestAnimationFrame(m);
   };
-  return Wt(() => {
+  return Lt(() => {
     $ = requestAnimationFrame(m);
   }), ft(() => {
     $ !== void 0 && cancelAnimationFrame($), document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", y);
   }), (() => {
-    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;
+    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, W = V.firstChild, ht = W.firstChild;
     d.$$keydown = P, d.$$mousedown = x;
     var b = c;
     typeof b == "function" ? _t(b, d) : c = d, pt(d, "aria-valuemin", vt);
@@ -827,7 +827,7 @@ function Pe(t) {
       return () => k() && Ee();
     })(), null), T((k) => {
       var tt = `watch-ui__buffer-visualization ${a() ? "watch-ui__buffer-visualization--dragging" : ""}`, H = e.jitter(), Ct = n(), St = `${i()}%`;
-      return tt !== k.e && yt(d, k.e = tt), H !== k.t && pt(d, "aria-valuenow", k.t = H), Ct !== k.a && pt(d, "aria-valuemax", k.a = Ct), St !== k.o && ce(L, "left", k.o = St), k;
+      return tt !== k.e && yt(d, k.e = tt), H !== k.t && pt(d, "aria-valuenow", k.t = H), Ct !== k.a && pt(d, "aria-valuemax", k.a = Ct), St !== k.o && ce(W, "left", k.o = St), k;
     }, {
       e: void 0,
       t: void 0,
@@ -850,10 +850,10 @@ function qe() {
           return t.isFullscreen();
         },
         get fallback() {
-          return g(W.FullscreenEnter, {});
+          return g(L.FullscreenEnter, {});
         },
         get children() {
-          return g(W.FullscreenExit, {});
+          return g(L.FullscreenExit, {});
         }
       });
     }
@@ -875,17 +875,17 @@ function Me() {
           return t.isPlaying();
         },
         get fallback() {
-          return g(W.Play, {});
+          return g(L.Play, {});
         },
         get children() {
-          return g(W.Pause, {});
+          return g(L.Pause, {});
         }
       });
     }
   });
 }
-var Re = /* @__PURE__ */ R("<div class=watch-ui__quality-selector><label for=quality-select class=watch-ui__quality-label>Quality: </label><select id=quality-select class=watch-ui__quality-select><option value>Auto"), Le = /* @__PURE__ */ R("<option>");
-function We(t) {
+var Re = /* @__PURE__ */ R("<div class=watch-ui__quality-selector><label for=quality-select class=watch-ui__quality-label>Quality: </label><select id=quality-select class=watch-ui__quality-select><option value>Auto"), We = /* @__PURE__ */ R("<option>");
+function Le(t) {
   return t >= 1e6 ? `${(t / 1e6).toFixed(1)} Mbps` : t >= 1e3 ? `${(t / 1e3).toFixed(0)} kbps` : `${t} bps`;
 }
 function je() {
@@ -900,13 +900,13 @@ function je() {
         return t.availableRenditions() ?? [];
       },
       children: (o) => (() => {
-        var s = Le();
+        var s = We();
         return w(s, () => o.name, null), w(s, (() => {
           var i = mt(() => !!(o.width && o.height));
           return () => i() ? ` (${o.width}x${o.height})` : "";
         })(), null), w(s, (() => {
           var i = mt(() => !!o.bitrate);
-          return () => i() ? ` ${We(o.bitrate)}` : "";
+          return () => i() ? ` ${Le(o.bitrate)}` : "";
         })(), null), T(() => s.value = o.name), s;
       })()
     }), null), T(() => r.value = t.activeRendition() ?? ""), n;
@@ -922,18 +922,18 @@ function Te() {
       t.setIsStatsPanelVisible(!t.isStatsPanelVisible());
     },
     get children() {
-      return g(W.Stats, {});
+      return g(L.Stats, {});
     }
   });
 }
 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, {});
+const Ve = (t, e) => e || t === 0 ? g(L.Mute, {}) : t > 0 && t <= 33 ? g(L.VolumeLow, {}) : t > 33 && t <= 66 ? g(L.VolumeMedium, {}) : g(L.VolumeHigh, {});
 function ze() {
   const [t, e] = E(0), n = F(), a = (r) => {
     const o = r.currentTarget, s = parseFloat(o.value);
     n.setVolume(s);
   };
-  return Lt(() => {
+  return Wt(() => {
     const r = n.currentVolume() || 0;
     e(Math.round(r));
   }), (() => {
@@ -1028,7 +1028,14 @@ function Qe(t) {
             get children() {
               return g(Nt, {
                 context: lt,
-                getElement: (r) => r?.moqWatch.backend
+                getElement: (r) => {
+                  if (r)
+                    return {
+                      audio: r.moqWatch.backend.audio,
+                      video: r.moqWatch.backend.video,
+                      connection: r.moqWatch.connection.established
+                    };
+                }
               });
             }
           }) : null;
@@ -1041,7 +1048,7 @@ ke("moq-watch-ui", (t, {
   element: e
 }) => {
   const [n, a] = E();
-  return Wt(async () => {
+  return Lt(async () => {
     await customElements.whenDefined("moq-watch");
     const r = e.querySelector("moq-watch");
     a(r || void 0);