@hadoku/watchparty-ui 0.45.3 → 0.45.5

package/dist/chunks/{PlaylistPanel-2V6H_3Gw.js → PlaylistPanel-bXAhBcTK.js}

@@ -1,69 +1,69 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import P, { useState as y, useEffect as _ } from "react";
-import { h as v, s as O, j as L, O as T, aN as D, aO as I, aP as C, aL as A, d as R, aQ as V, am as B, aR as U, U as W, aS as F, aD as j, aB as K } from "./index-HIbKUgoo.js";
-import { d as $, S as M } from "./Room-DleCsQL0.js";
-const z = 3e3, G = {
+import L, { useState as N, useEffect as T, useEffectEvent as D } from "react";
+import { h as f, s as R, j as A, O as B, aN as U, aO as O, aP as V, aL as W, d as j, aQ as E, am as F, aR as K, U as z, aS as G, aD as $, aB as q } from "./index-lPWsskGR.js";
+import { d as P, S as _ } from "./Room-DMSh2z9X.js";
+const H = 3e3, Q = {
   super_upvote: 4,
   upvote: 3,
   mid: 2,
   downvote: 1
-}, q = {
+}, Y = {
   // Bigger than the other marks on purpose: a super-upvote is the strongest
   // vote and was the hardest to see (a 10px star under the avatar).
-  super_upvote: { icon: /* @__PURE__ */ e(M, { className: "w-4 h-4" }), color: "bg-warning-bg text-on-warning-bg rounded" },
+  super_upvote: { icon: /* @__PURE__ */ e(_, { className: "w-4 h-4" }), color: "bg-warning-bg text-on-warning-bg rounded" },
   upvote: { icon: "▲", color: "bg-success-bg text-on-success-bg rounded px-0.5" },
   mid: { icon: "─", color: "text-text-secondary" },
   downvote: { icon: "▼", color: "bg-danger-bg text-on-danger-bg rounded px-0.5" }
 };
-function H(o) {
-  const { playlist: a, votes: u } = o;
-  return a.videos.map((l) => {
+function J(a) {
+  const { playlist: o, votes: m } = a;
+  return o.videos.map((l) => {
     let c = 0, r = 0;
-    for (const d of Object.values(u)) {
-      const f = d[l.mediaId];
-      f && (c += G[f], r++);
+    for (const d of Object.values(m)) {
+      const b = d[l.mediaId];
+      b && (c += Q[b], r++);
     }
-    const h = r > 0 ? c / r : 0;
-    return { video: l, avgScore: h, voterCount: r };
+    const p = r > 0 ? c / r : 0;
+    return { video: l, avgScore: p, voterCount: r };
   }).sort((l, c) => c.avgScore - l.avgScore);
 }
-function Q({ results: o, onClose: a }) {
-  const u = v((s) => s.roster), l = $(), c = H(o), [r, h] = y(null);
-  _(() => {
+function X({ results: a, onClose: o }) {
+  const m = f((s) => s.roster), l = P(), c = J(a), [r, p] = N(null);
+  T(() => {
     if (!r) return;
-    const s = setTimeout(() => h(null), z);
+    const s = setTimeout(() => p(null), H);
     return () => clearTimeout(s);
   }, [r]);
-  const d = Object.keys(o.votes).filter(
-    (s) => Object.keys(o.votes[s]).length > 0
-  ), f = (s) => {
-    const x = u[s]?.sprite ?? o.sprites?.[s];
-    return T(x) ? x : void 0;
+  const d = Object.keys(a.votes).filter(
+    (s) => Object.keys(a.votes[s]).length > 0
+  ), b = (s) => {
+    const h = m[s]?.sprite ?? a.sprites?.[s];
+    return B(h) ? h : void 0;
   };
-  function k(s) {
+  function I(s) {
     if (r !== s) {
-      h(s);
+      p(s);
       return;
     }
-    h(null), D(s);
+    p(null), U(s);
   }
   return /* @__PURE__ */ e(
     "div",
     {
       className: "fixed inset-0 bg-black/70 flex items-center justify-center z-50",
       onClick: (s) => {
-        s.target === s.currentTarget && a();
+        s.target === s.currentTarget && o();
       },
       children: /* @__PURE__ */ i("div", { "data-testid": "reveal-popup", className: "bg-bg-card border border-border rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col mx-4", children: [
         /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border shrink-0", children: [
           /* @__PURE__ */ i("h2", { className: "text-sm font-semibold text-text", children: [
-            o.playlist.name,
+            a.playlist.name,
             " — Results"
           ] }),
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: a,
+              onClick: o,
               "aria-label": "Close results",
               className: "p-1 text-text-muted hover:text-text transition-colors cursor-pointer",
               children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
@@ -71,62 +71,62 @@ function Q({ results: o, onClose: a }) {
           )
         ] }),
         d.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-1.5 px-4 py-2 border-b border-border shrink-0", children: d.map((s) => {
-          const x = f(s);
+          const h = b(s);
           return /* @__PURE__ */ i("span", { className: "reveal-voter", children: [
-            x ? /* @__PURE__ */ e("img", { src: O(x), alt: "", crossOrigin: "anonymous", className: "w-4 h-4 rounded-full object-cover" }) : /* @__PURE__ */ e("span", { className: "w-4 h-4 rounded-full bg-bg-alt" }),
-            /* @__PURE__ */ e("span", { className: "text-xs text-text truncate max-w-[8rem]", children: o.names[s] || s }),
+            h ? /* @__PURE__ */ e("img", { src: R(h), alt: "", crossOrigin: "anonymous", className: "w-4 h-4 rounded-full object-cover" }) : /* @__PURE__ */ e("span", { className: "w-4 h-4 rounded-full bg-bg-alt" }),
+            /* @__PURE__ */ e("span", { className: "text-xs text-text truncate max-w-[8rem]", children: a.names[s] || s }),
             l && /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
                 className: "reveal-voter-remove",
                 "data-armed": r === s ? "" : void 0,
-                onClick: () => k(s),
-                "aria-label": `Remove ${o.names[s] || s}'s votes`,
-                title: r === s ? "Click again to remove" : `Remove ${o.names[s] || s}'s votes`,
+                onClick: () => I(s),
+                "aria-label": `Remove ${a.names[s] || s}'s votes`,
+                title: r === s ? "Click again to remove" : `Remove ${a.names[s] || s}'s votes`,
                 children: r === s ? "remove?" : "✕"
               }
             )
           ] }, s);
         }) }),
-        /* @__PURE__ */ e("div", { className: "overflow-y-auto flex-1 py-1", children: c.map(({ video: s, avgScore: x, voterCount: S }, w) => /* @__PURE__ */ i(
+        /* @__PURE__ */ e("div", { className: "overflow-y-auto flex-1 py-1", children: c.map(({ video: s, avgScore: h, voterCount: C }, y) => /* @__PURE__ */ i(
           "div",
           {
-            className: `flex items-center gap-3 px-4 py-2 ${w % 2 === 0 ? "" : "bg-bg-alt/20"}`,
+            className: `flex items-center gap-3 px-4 py-2 ${y % 2 === 0 ? "" : "bg-bg-alt/20"}`,
             children: [
-              /* @__PURE__ */ e("span", { className: "text-xs text-text-muted w-5 shrink-0 text-right", children: w + 1 }),
+              /* @__PURE__ */ e("span", { className: "text-xs text-text-muted w-5 shrink-0 text-right", children: y + 1 }),
               /* @__PURE__ */ e("span", { className: "text-xs text-text truncate flex-1 min-w-0", children: s.displayName }),
               /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 shrink-0", children: [
-                d.map((t) => {
-                  const n = o.votes[t]?.[s.mediaId];
-                  if (!n) return null;
-                  const m = f(t), p = q[n], b = L(m ?? null);
+                d.map((x) => {
+                  const w = a.votes[x]?.[s.mediaId];
+                  if (!w) return null;
+                  const t = b(x), n = Y[w], u = A(t ?? null);
                   return /* @__PURE__ */ i("div", { className: "flex flex-col items-center gap-0.5", children: [
-                    /* @__PURE__ */ e("div", { className: "relative w-6 h-6 shrink-0", children: m ? /* @__PURE__ */ e(
+                    /* @__PURE__ */ e("div", { className: "relative w-6 h-6 shrink-0", children: t ? /* @__PURE__ */ e(
                       "img",
                       {
-                        src: O(m),
-                        alt: o.names[t] || t,
+                        src: R(t),
+                        alt: a.names[x] || x,
                         crossOrigin: "anonymous",
                         className: "w-6 h-6 rounded-full object-cover",
-                        style: { border: `1.5px solid ${b}` }
+                        style: { border: `1.5px solid ${u}` }
                       }
                     ) : /* @__PURE__ */ e(
                       "div",
                       {
                         className: "w-6 h-6 rounded-full bg-bg-alt",
-                        style: { border: `1.5px solid ${b}` }
+                        style: { border: `1.5px solid ${u}` }
                       }
                     ) }),
-                    /* @__PURE__ */ e("span", { className: `text-[9px] leading-none font-bold ${p.color}`, children: p.icon })
-                  ] }, t);
+                    /* @__PURE__ */ e("span", { className: `text-[9px] leading-none font-bold ${n.color}`, children: n.icon })
+                  ] }, x);
                 }),
-                d.map((t) => o.votes[t]?.[s.mediaId] ? null : /* @__PURE__ */ i("div", { className: "flex flex-col items-center gap-0.5 opacity-20", children: [
+                d.map((x) => a.votes[x]?.[s.mediaId] ? null : /* @__PURE__ */ i("div", { className: "flex flex-col items-center gap-0.5 opacity-20", children: [
                   /* @__PURE__ */ e("div", { className: "w-6 h-6 rounded-full bg-bg-alt border border-border" }),
                   /* @__PURE__ */ e("span", { className: "text-[9px] leading-none text-text-muted", children: "·" })
-                ] }, `no-${t}`))
+                ] }, `no-${x}`))
               ] }),
-              /* @__PURE__ */ e("span", { className: "text-xs text-text-secondary w-8 text-right shrink-0 font-medium", children: S > 0 ? x.toFixed(1) : "—" })
+              /* @__PURE__ */ e("span", { className: "text-xs text-text-secondary w-8 text-right shrink-0 font-medium", children: C > 0 ? h.toFixed(1) : "—" })
             ]
           },
           s.mediaId
@@ -135,29 +135,29 @@ function Q({ results: o, onClose: a }) {
     }
   );
 }
-function Y() {
+function Z() {
   return /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ e("polyline", { points: "18 15 12 9 6 15" }) });
 }
-function J() {
+function ee() {
   return /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ e("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) });
 }
-function X() {
+function te() {
   return /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" }) });
 }
-const E = [
-  { value: "super_upvote", icon: /* @__PURE__ */ e(M, { className: "w-4 h-4" }), label: "Super" },
-  { value: "upvote", icon: /* @__PURE__ */ e(Y, {}), label: "Up" },
-  { value: "mid", icon: /* @__PURE__ */ e(J, {}), label: "Mid" },
-  { value: "downvote", icon: /* @__PURE__ */ e(X, {}), label: "Down" }
+const M = [
+  { value: "super_upvote", icon: /* @__PURE__ */ e(_, { className: "w-4 h-4" }), label: "Super" },
+  { value: "upvote", icon: /* @__PURE__ */ e(Z, {}), label: "Up" },
+  { value: "mid", icon: /* @__PURE__ */ e(ee, {}), label: "Mid" },
+  { value: "downvote", icon: /* @__PURE__ */ e(te, {}), label: "Down" }
 ];
-function Z(o) {
-  const a = Math.round(o / 1e3), u = Math.floor(a / 3600), l = Math.floor(a % 3600 / 60), c = a % 60;
-  return u > 0 ? `${u}:${String(l).padStart(2, "0")}:${String(c).padStart(2, "0")}` : `${l}:${String(c).padStart(2, "0")}`;
+function se(a) {
+  const o = Math.round(a / 1e3), m = Math.floor(o / 3600), l = Math.floor(o % 3600 / 60), c = o % 60;
+  return m > 0 ? `${m}:${String(l).padStart(2, "0")}:${String(c).padStart(2, "0")}` : `${l}:${String(c).padStart(2, "0")}`;
 }
-function ee() {
-  const [o, a] = y(""), [u, l] = y(!1), [c, r] = y(null), h = () => {
-    const d = o.trim();
-    d && (l(!0), r(null), K(d), setTimeout(() => l(!1), 1500));
+function oe() {
+  const [a, o] = N(""), [m, l] = N(!1), [c, r] = N(null), p = () => {
+    const d = a.trim();
+    d && (l(!0), r(null), q(d), setTimeout(() => l(!1), 1500));
   };
   return /* @__PURE__ */ i("div", { className: "p-4 flex flex-col gap-3", children: [
     /* @__PURE__ */ e("p", { className: "text-xs text-text-muted", children: "Enter a playlist ID to load it for the room." }),
@@ -166,19 +166,19 @@ function ee() {
         "input",
         {
           type: "text",
-          value: o,
-          onChange: (d) => a(d.target.value),
-          onKeyDown: (d) => d.key === "Enter" && h(),
+          value: a,
+          onChange: (d) => o(d.target.value),
+          onKeyDown: (d) => d.key === "Enter" && p(),
           placeholder: "Playlist ID (e.g. april-4)",
           className: "modal-input flex-1 text-xs px-2 py-1.5",
-          disabled: u
+          disabled: m
         }
       ),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: h,
-          disabled: u || !o.trim(),
+          onClick: p,
+          disabled: m || !a.trim(),
           className: "modal-btn-update text-xs px-3 py-1.5 rounded disabled:opacity-50 disabled:cursor-not-allowed",
           children: "Load"
         }
@@ -187,59 +187,63 @@ function ee() {
     c && /* @__PURE__ */ e("p", { className: "text-xs bg-danger-bg text-on-danger-bg px-2 py-1 rounded", children: c })
   ] });
 }
-function te() {
+function ae() {
   return /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center p-4", children: /* @__PURE__ */ e("p", { className: "text-xs text-text-muted text-center", children: "No playlist loaded yet." }) });
 }
-function ne() {
-  const o = $(), a = v((t) => t.playlist), u = v((t) => t.activePlaylistIndex), l = v((t) => t.myVotes), c = v((t) => t.voteProgress), r = v((t) => t.playlistResults), h = v((t) => t.snapshot.mediaId), [d, f] = y(() => !!r && !r.update), [k, s] = y(r);
-  if (r !== k && (s(r), r && !r.update && f(!0)), P.useEffect(() => {
-    if (!a || a.type !== "vote") return;
+function ce() {
+  const a = P(), o = f((t) => t.playlist), m = f((t) => t.activePlaylistIndex), l = f((t) => t.myVotes), c = f((t) => t.voteProgress), r = f((t) => t.playlistResults), p = f((t) => t.snapshot.mediaId), [d, b] = N(() => !!r && !r.update), [I, s] = N(r);
+  r !== I && (s(r), r && !r.update && b(!0));
+  const h = D(() => {
+    if (!o || o.type !== "vote") return;
     const t = {};
-    for (const n of a.videos) {
-      const m = I.voteKey(C(), a.id, n.mediaId), p = A(m);
-      p && E.some((b) => b.value === p) && (t[n.mediaId] = p);
+    for (const n of o.videos) {
+      const u = O.voteKey(V(), o.id, n.mediaId), v = W(u);
+      v && M.some((k) => k.value === v) && (t[n.mediaId] = v);
     }
-    if (R("playlist", "Checked localStorage votes", { playlistId: a.id, found: Object.keys(t).length }), Object.keys(t).length !== 0) {
-      v.getState().applyPlaylistState({ playlist: a, activeIndex: u, myVotes: { ...l, ...t } });
-      for (const [n, m] of Object.entries(t))
-        V(a.id, n, m);
+    if (j("playlist", "Checked localStorage votes", { playlistId: o.id, found: Object.keys(t).length }), Object.keys(t).length !== 0) {
+      f.getState().applyPlaylistState({ playlist: o, activeIndex: m, myVotes: { ...l, ...t } });
+      for (const [n, u] of Object.entries(t))
+        E(o.id, n, u);
     }
-  }, [a?.id]), !a)
-    return o ? /* @__PURE__ */ e(ee, {}) : /* @__PURE__ */ e(te, {});
-  const x = a.type === "vote", S = c.length, w = (t, n) => {
-    V(a.id, t, n), R("playlist", "Vote emitted", { playlistId: a.id, mediaId: t, vote: n }), j(I.voteKey(C(), a.id, t), n);
-    const m = { ...l, [t]: n };
+  }), C = o?.id;
+  if (L.useEffect(() => {
+    h();
+  }, [C]), !o)
+    return a ? /* @__PURE__ */ e(oe, {}) : /* @__PURE__ */ e(ae, {});
+  const y = o.type === "vote", x = c.length, w = (t, n) => {
+    E(o.id, t, n), j("playlist", "Vote emitted", { playlistId: o.id, mediaId: t, vote: n }), $(O.voteKey(V(), o.id, t), n);
+    const u = { ...l, [t]: n };
     if (n === "super_upvote")
-      for (const [p, b] of Object.entries(m))
-        p !== t && b === "super_upvote" && (m[p] = "upvote", j(I.voteKey(C(), a.id, p), "upvote"));
-    v.getState().applyPlaylistState({
-      playlist: a,
-      activeIndex: u,
-      myVotes: m
+      for (const [v, k] of Object.entries(u))
+        v !== t && k === "super_upvote" && (u[v] = "upvote", $(O.voteKey(V(), o.id, v), "upvote"));
+    f.getState().applyPlaylistState({
+      playlist: o,
+      activeIndex: m,
+      myVotes: u
     });
   };
   return /* @__PURE__ */ i("div", { className: "flex flex-col flex-1 min-h-0", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border shrink-0", children: [
-      a.cover && /* @__PURE__ */ e(
+      o.cover && /* @__PURE__ */ e(
         "img",
         {
-          src: B(a.cover),
+          src: F(o.cover),
           alt: "",
           className: "w-8 h-8 object-cover rounded shrink-0 bg-bg-alt"
         }
       ),
-      /* @__PURE__ */ e("span", { className: "text-xs font-medium text-text truncate flex-1", children: a.name }),
-      o && x && /* @__PURE__ */ e(
+      /* @__PURE__ */ e("span", { className: "text-xs font-medium text-text truncate flex-1", children: o.name }),
+      a && y && /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => U(),
+          onClick: () => K(),
           className: "text-xs text-text-muted hover:text-text transition-colors cursor-pointer shrink-0",
           title: "Reveal votes to all",
           children: "Reveal"
         }
       )
     ] }),
-    o && x && S > 0 && /* @__PURE__ */ e("div", { className: "px-3 py-1.5 border-b border-border shrink-0", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
+    a && y && x > 0 && /* @__PURE__ */ e("div", { className: "px-3 py-1.5 border-b border-border shrink-0", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5", children: [
       /* @__PURE__ */ e("span", { className: "text-[10px] text-text-muted shrink-0", children: "Votes:" }),
       /* @__PURE__ */ e("div", { className: "flex gap-1 flex-wrap flex-1", children: c.map((t) => /* @__PURE__ */ i("span", { className: "text-[10px] text-text-secondary", children: [
         t.name,
@@ -249,42 +253,42 @@ function ne() {
         t.totalVideos
       ] }, t.clientId)) })
     ] }) }),
-    /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto", children: a.videos.map((t, n) => {
-      const m = u === n, p = l[t.mediaId], b = h === t.mediaId;
+    /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto", children: o.videos.map((t, n) => {
+      const u = m === n, v = l[t.mediaId], k = p === t.mediaId;
       return /* @__PURE__ */ i(
         "div",
         {
-          className: `flex items-center gap-2 px-3 py-2 border-b border-border/50 group ${m ? "bg-primary/10" : "hover:bg-bg-alt/50"}`,
+          className: `flex items-center gap-2 px-3 py-2 border-b border-border/50 group ${u ? "bg-primary/10" : "hover:bg-bg-alt/50"}`,
           children: [
-            /* @__PURE__ */ e("div", { className: "w-3.5 shrink-0 text-text-muted", children: b ? /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5 text-text", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("polygon", { points: "5 3 19 12 5 21 5 3" }) }) : /* @__PURE__ */ e("span", { className: "text-[10px] text-text-muted", children: n + 1 }) }),
+            /* @__PURE__ */ e("div", { className: "w-3.5 shrink-0 text-text-muted", children: k ? /* @__PURE__ */ e("svg", { className: "w-3.5 h-3.5 text-text", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ e("polygon", { points: "5 3 19 12 5 21 5 3" }) }) : /* @__PURE__ */ e("span", { className: "text-[10px] text-text-muted", children: n + 1 }) }),
             /* @__PURE__ */ i("div", { className: "relative shrink-0", children: [
               /* @__PURE__ */ e(
                 "img",
                 {
-                  src: W(t.mediaId, t.thumbnail),
+                  src: z(t.mediaId, t.thumbnail),
                   alt: "",
                   loading: "lazy",
                   onError: (g) => {
-                    const N = g.currentTarget;
-                    (N.parentElement ?? N).style.display = "none";
+                    const S = g.currentTarget;
+                    (S.parentElement ?? S).style.display = "none";
                   },
                   className: "w-14 h-10 object-cover rounded bg-bg-alt"
                 }
               ),
-              t.durationMs ? /* @__PURE__ */ e("span", { className: "absolute bottom-0 right-0 px-1 text-[9px] leading-tight rounded-tl rounded-br bg-bg-card/90 text-text-secondary", children: Z(t.durationMs) }) : null
+              t.durationMs ? /* @__PURE__ */ e("span", { className: "absolute bottom-0 right-0 px-1 text-[9px] leading-tight rounded-tl rounded-br bg-bg-card/90 text-text-secondary", children: se(t.durationMs) }) : null
             ] }),
             /* @__PURE__ */ e(
               "button",
               {
-                className: `flex-1 text-left text-xs truncate cursor-pointer transition-colors min-w-0 ${o ? "hover:text-text text-text-secondary" : "text-text-secondary cursor-default"} ${m ? "text-text font-medium" : ""}`,
-                onClick: o ? () => F(n) : void 0,
-                title: o ? `Play: ${t.displayName}` : t.displayName,
-                disabled: !o,
+                className: `flex-1 text-left text-xs truncate cursor-pointer transition-colors min-w-0 ${a ? "hover:text-text text-text-secondary" : "text-text-secondary cursor-default"} ${u ? "text-text font-medium" : ""}`,
+                onClick: a ? () => G(n) : void 0,
+                title: a ? `Play: ${t.displayName}` : t.displayName,
+                disabled: !a,
                 children: t.displayName
               }
             ),
-            x && /* @__PURE__ */ e("div", { className: "flex gap-0.5 shrink-0", children: E.map((g) => {
-              const N = p === g.value;
+            y && /* @__PURE__ */ e("div", { className: "flex gap-0.5 shrink-0", children: M.map((g) => {
+              const S = v === g.value;
               return /* @__PURE__ */ e(
                 "button",
                 {
@@ -292,8 +296,8 @@ function ne() {
                   title: g.label,
                   className: "vote-btn",
                   "data-vote": g.value,
-                  "data-selected": N ? "" : void 0,
-                  "aria-pressed": N,
+                  "data-selected": S ? "" : void 0,
+                  "aria-pressed": S,
                   children: g.icon
                 },
                 g.value
@@ -304,16 +308,16 @@ function ne() {
         t.mediaId
       );
     }) }),
-    x && d && r && /* @__PURE__ */ e(
-      Q,
+    y && d && r && /* @__PURE__ */ e(
+      X,
       {
         results: r,
-        onClose: () => f(!1)
+        onClose: () => b(!1)
       }
     )
   ] });
 }
 export {
-  ne as default
+  ce as default
 };
-//# sourceMappingURL=PlaylistPanel-2V6H_3Gw.js.map
+//# sourceMappingURL=PlaylistPanel-bXAhBcTK.js.map

package/dist/chunks/PlaylistPanel-bXAhBcTK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaylistPanel-bXAhBcTK.js","sources":["../../src/components/PlaylistRevealPopup.tsx","../../src/components/PlaylistPanel.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react';\nimport type { TPlaylistResultsOut, TVoteValue } from '@watchparty/shared';\nimport { useAppStore } from '../lib/store';\nimport { spriteUrlFor, colorForSprite, isCharacterId } from '../lib/characters';\nimport { StarIcon } from './controls/Icons';\nimport { useIsLeader } from '../hooks/useStoreSelectors';\nimport { emitVoteRemove } from '../lib/socket';\n\n/** How long the ✕ stays armed after the first click before it disarms. */\nconst REMOVE_ARM_MS = 3000;\n\ninterface Props {\n  results: TPlaylistResultsOut;\n  onClose: () => void;\n}\n\nconst VOTE_WEIGHTS: Record<TVoteValue, number> = {\n  super_upvote: 4,\n  upvote: 3,\n  mid: 2,\n  downvote: 1,\n};\n\nconst VOTE_ICONS: Record<TVoteValue, { icon: ReactNode; color: string }> = {\n  // Bigger than the other marks on purpose: a super-upvote is the strongest\n  // vote and was the hardest to see (a 10px star under the avatar).\n  super_upvote: { icon: <StarIcon className=\"w-4 h-4\" />, color: 'bg-warning-bg text-on-warning-bg rounded' },\n  upvote:       { icon: '▲', color: 'bg-success-bg text-on-success-bg rounded px-0.5' },\n  mid:          { icon: '─', color: 'text-text-secondary' },\n  downvote:     { icon: '▼', color: 'bg-danger-bg text-on-danger-bg rounded px-0.5' },\n};\n\nfunction computeScores(results: TPlaylistResultsOut) {\n  const { playlist, votes } = results;\n  return playlist.videos.map(video => {\n    let totalScore = 0;\n    let voterCount = 0;\n    for (const clientVotes of Object.values(votes)) {\n      const v = clientVotes[video.mediaId] as TVoteValue | undefined;\n      if (v) { totalScore += VOTE_WEIGHTS[v]; voterCount++; }\n    }\n    const avgScore = voterCount > 0 ? totalScore / voterCount : 0;\n    return { video, avgScore, voterCount };\n  }).sort((a, b) => b.avgScore - a.avgScore);\n}\n\nexport default function PlaylistRevealPopup({ results, onClose }: Props) {\n  const roster = useAppStore(s => s.roster);\n  const isLeader = useIsLeader();\n  const scored = computeScores(results);\n  // Two clicks to remove: the first arms the ✕, the second sends. A stray\n  // click mid-party must not silently drop someone's ballot.\n  const [armed, setArmed] = useState<string | null>(null);\n  useEffect(() => {\n    if (!armed) return;\n    const t = setTimeout(() => setArmed(null), REMOVE_ARM_MS);\n    return () => clearTimeout(t);\n  }, [armed]);\n\n  // Ordered list of clients who voted\n  const voters = Object.keys(results.votes).filter(\n    id => Object.keys(results.votes[id]).length > 0\n  );\n  // Frozen at reveal by the server, so someone who has since LEFT (and is\n  // gone from the live roster) still has an avatar.\n  const spriteOf = (id: string) => {\n    const sprite = roster[id]?.sprite ?? results.sprites?.[id];\n    return isCharacterId(sprite) ? sprite : undefined;\n  };\n\n  function onRemove(voterKey: string) {\n    if (armed !== voterKey) { setArmed(voterKey); return; }\n    setArmed(null);\n    emitVoteRemove(voterKey);\n  }\n\n  return (\n    <div\n      className=\"fixed inset-0 bg-black/70 flex items-center justify-center z-50\"\n      onClick={e => { if (e.target === e.currentTarget) onClose(); }}\n    >\n      <div data-testid=\"reveal-popup\" className=\"bg-bg-card border border-border rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col mx-4\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-4 py-3 border-b border-border shrink-0\">\n          <h2 className=\"text-sm font-semibold text-text\">\n            {results.playlist.name} — Results\n          </h2>\n          <button\n            onClick={onClose}\n            aria-label=\"Close results\"\n            className=\"p-1 text-text-muted hover:text-text transition-colors cursor-pointer\"\n          >\n            <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n\n        {/* Voters — the leader can drop one; the table regenerates for everyone */}\n        {voters.length > 0 && (\n          <div className=\"flex flex-wrap items-center gap-1.5 px-4 py-2 border-b border-border shrink-0\">\n            {voters.map(id => {\n              const spriteId = spriteOf(id);\n              return (\n                <span key={id} className=\"reveal-voter\">\n                  {spriteId\n                    ? <img src={spriteUrlFor(spriteId)} alt=\"\" crossOrigin=\"anonymous\" className=\"w-4 h-4 rounded-full object-cover\" />\n                    : <span className=\"w-4 h-4 rounded-full bg-bg-alt\" />}\n                  <span className=\"text-xs text-text truncate max-w-[8rem]\">{results.names[id] || id}</span>\n                  {isLeader && (\n                    <button\n                      type=\"button\"\n                      className=\"reveal-voter-remove\"\n                      data-armed={armed === id ? '' : undefined}\n                      onClick={() => onRemove(id)}\n                      aria-label={`Remove ${results.names[id] || id}'s votes`}\n                      title={armed === id ? 'Click again to remove' : `Remove ${results.names[id] || id}'s votes`}\n                    >\n                      {armed === id ? 'remove?' : '✕'}\n                    </button>\n                  )}\n                </span>\n              );\n            })}\n          </div>\n        )}\n\n        {/* Results list */}\n        <div className=\"overflow-y-auto flex-1 py-1\">\n          {scored.map(({ video, avgScore, voterCount }, rank) => (\n            <div\n              key={video.mediaId}\n              className={`flex items-center gap-3 px-4 py-2 ${rank % 2 === 0 ? '' : 'bg-bg-alt/20'}`}\n            >\n              {/* Rank */}\n              <span className=\"text-xs text-text-muted w-5 shrink-0 text-right\">{rank + 1}</span>\n\n              {/* Video name */}\n              <span className=\"text-xs text-text truncate flex-1 min-w-0\">\n                {video.displayName}\n              </span>\n\n              {/* Per-voter avatars + vote icon */}\n              <div className=\"flex items-center gap-1.5 shrink-0\">\n                {voters.map(clientId => {\n                  const vote = results.votes[clientId]?.[video.mediaId] as TVoteValue | undefined;\n                  if (!vote) return null;\n                  const spriteId = spriteOf(clientId);\n                  const voteStyle = VOTE_ICONS[vote];\n                  const borderColor = colorForSprite(spriteId ?? null);\n\n                  return (\n                    <div key={clientId} className=\"flex flex-col items-center gap-0.5\">\n                      {/* Avatar */}\n                      <div className=\"relative w-6 h-6 shrink-0\">\n                        {spriteId ? (\n                          <img\n                            src={spriteUrlFor(spriteId)}\n                            alt={results.names[clientId] || clientId}\n                            crossOrigin=\"anonymous\"\n                            className=\"w-6 h-6 rounded-full object-cover\"\n                            style={{ border: `1.5px solid ${borderColor}` }}\n                          />\n                        ) : (\n                          <div\n                            className=\"w-6 h-6 rounded-full bg-bg-alt\"\n                            style={{ border: `1.5px solid ${borderColor}` }}\n                          />\n                        )}\n                      </div>\n                      {/* Vote icon */}\n                      <span className={`text-[9px] leading-none font-bold ${voteStyle.color}`}>\n                        {voteStyle.icon}\n                      </span>\n                    </div>\n                  );\n                })}\n                {/* Show dashes for non-voters */}\n                {voters.map(clientId => {\n                  const voted = !!results.votes[clientId]?.[video.mediaId];\n                  if (voted) return null;\n                  return (\n                    <div key={`no-${clientId}`} className=\"flex flex-col items-center gap-0.5 opacity-20\">\n                      <div className=\"w-6 h-6 rounded-full bg-bg-alt border border-border\" />\n                      <span className=\"text-[9px] leading-none text-text-muted\">·</span>\n                    </div>\n                  );\n                })}\n              </div>\n\n              {/* Avg score */}\n              <span className=\"text-xs text-text-secondary w-8 text-right shrink-0 font-medium\">\n                {voterCount > 0 ? avgScore.toFixed(1) : '—'}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n","import React, { useEffectEvent, useState } from 'react';\nimport { useAppStore } from '../lib/store';\nimport { useIsLeader } from '../hooks/useStoreSelectors';\nimport { emitPlaylistLoad, emitPlaylistSelect, emitVoteUpdate, emitRevealRequest } from '../lib/socket';\nimport { resolveMediaAsset, resolveCardImage } from '../lib/mediaUrls';\nimport { debug } from '../lib/debug';\nimport { STORAGE_KEYS } from '../lib/storageKeys';\nimport { voteOwnerScope } from '../lib/auth';\nimport type { TVoteValue } from '@watchparty/shared';\nimport PlaylistRevealPopup from './PlaylistRevealPopup';\nimport { StarIcon } from './controls/Icons';\nimport { readStored, writeStored } from '../lib/browserStorage';\n\n// ── Vote icons ────────────────────────────────────────────────────────────────\n\n\nfunction UpvoteIcon() {\n  return (\n    <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5}>\n      <polyline points=\"18 15 12 9 6 15\" />\n    </svg>\n  );\n}\n\nfunction MidIcon() {\n  return (\n    <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5}>\n      <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n    </svg>\n  );\n}\n\nfunction DownvoteIcon() {\n  return (\n    <svg className=\"w-3.5 h-3.5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5}>\n      <polyline points=\"6 9 12 15 18 9\" />\n    </svg>\n  );\n}\n\n// Colours live in `.vote-btn` (styles.css), keyed by `data-vote`: a <button>'s\n// colour/background utilities are discarded by the unlayered `button` reset, so\n// the per-vote `text-*` classes these carried never rendered — every vote icon\n// was the same white, selected or not.\nconst VOTE_OPTIONS: { value: TVoteValue; icon: React.ReactNode; label: string }[] = [\n  { value: 'super_upvote', icon: <StarIcon className=\"w-4 h-4\" />, label: 'Super' },\n  { value: 'upvote',       icon: <UpvoteIcon />, label: 'Up' },\n  { value: 'mid',          icon: <MidIcon />,    label: 'Mid' },\n  { value: 'downvote',     icon: <DownvoteIcon />, label: 'Down' },\n];\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\nfunction formatDuration(ms: number): string {\n  const total = Math.round(ms / 1000);\n  const h = Math.floor(total / 3600);\n  const m = Math.floor((total % 3600) / 60);\n  const s = total % 60;\n  return h > 0\n    ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`\n    : `${m}:${String(s).padStart(2, '0')}`;\n}\n\n// ── Load form (leader, no playlist loaded) ────────────────────────────────────\n\nfunction LoadForm() {\n  const [input, setInput] = useState('');\n  const [loading, setLoading] = useState(false);\n  const [err, setErr] = useState<string | null>(null);\n\n  const handleLoad = () => {\n    const id = input.trim();\n    if (!id) return;\n    setLoading(true);\n    setErr(null);\n    emitPlaylistLoad(id);\n    // Error will arrive via the 'error' socket event and show as a toast.\n    // Reset loading state after a short delay.\n    setTimeout(() => setLoading(false), 1500);\n  };\n\n  return (\n    <div className=\"p-4 flex flex-col gap-3\">\n      <p className=\"text-xs text-text-muted\">Enter a playlist ID to load it for the room.</p>\n      <div className=\"flex gap-2\">\n        <input\n          type=\"text\"\n          value={input}\n          onChange={e => setInput(e.target.value)}\n          onKeyDown={e => e.key === 'Enter' && handleLoad()}\n          placeholder=\"Playlist ID (e.g. april-4)\"\n          className=\"modal-input flex-1 text-xs px-2 py-1.5\"\n          disabled={loading}\n        />\n        <button\n          onClick={handleLoad}\n          disabled={loading || !input.trim()}\n          className=\"modal-btn-update text-xs px-3 py-1.5 rounded disabled:opacity-50 disabled:cursor-not-allowed\"\n        >\n          Load\n        </button>\n      </div>\n      {err && <p className=\"text-xs bg-danger-bg text-on-danger-bg px-2 py-1 rounded\">{err}</p>}\n    </div>\n  );\n}\n\n// ── Empty state (viewer, no playlist) ─────────────────────────────────────────\n\nfunction EmptyState() {\n  return (\n    <div className=\"flex-1 flex items-center justify-center p-4\">\n      <p className=\"text-xs text-text-muted text-center\">No playlist loaded yet.</p>\n    </div>\n  );\n}\n\n// ── Main panel ────────────────────────────────────────────────────────────────\n\nexport default function PlaylistPanel() {\n  const isLeader = useIsLeader();\n  const playlist = useAppStore(s => s.playlist);\n  const activeIndex = useAppStore(s => s.activePlaylistIndex);\n  const myVotes = useAppStore(s => s.myVotes);\n  const voteProgress = useAppStore(s => s.voteProgress);\n  const results = useAppStore(s => s.playlistResults);\n  const currentMediaId = useAppStore(s => s.snapshot.mediaId);\n\n  // Show results popup when a reveal arrives. NOT on an `update` (a voter was\n  // removed): that re-sends the table to everyone, and reopening it would put\n  // the popup back in front of people who had already closed it.\n  const [showResults, setShowResults] = useState(() => !!results && !results.update);\n  const [seenResults, setSeenResults] = useState(results);\n  if (results !== seenResults) {\n    setSeenResults(results);\n    if (results && !results.update) setShowResults(true);\n  }\n\n  // Restore votes from localStorage when a playlist is first loaded. The body\n  // reads the current playlist, index and votes; only a new playlist id runs it.\n  const restoreVotes = useEffectEvent(() => {\n    if (!playlist || playlist.type !== 'vote') return;\n    const savedVotes: Record<string, TVoteValue> = {};\n    for (const video of playlist.videos) {\n      const key = STORAGE_KEYS.voteKey(voteOwnerScope(), playlist.id, video.mediaId);\n      const saved = readStored(key) as TVoteValue | null;\n      if (saved && VOTE_OPTIONS.some(o => o.value === saved)) {\n        savedVotes[video.mediaId] = saved;\n      }\n    }\n    debug('playlist', 'Checked localStorage votes', { playlistId: playlist.id, found: Object.keys(savedVotes).length });\n    if (Object.keys(savedVotes).length === 0) return;\n    useAppStore.getState().applyPlaylistState({ playlist, activeIndex, myVotes: { ...myVotes, ...savedVotes } });\n    for (const [mediaId, vote] of Object.entries(savedVotes)) {\n      emitVoteUpdate(playlist.id, mediaId, vote);\n    }\n  });\n  const playlistId = playlist?.id;\n  React.useEffect(() => { restoreVotes(); }, [playlistId]);\n\n  if (!playlist) {\n    return isLeader ? <LoadForm /> : <EmptyState />;\n  }\n\n  // `basic` playlists are a plain watch-through — no vote buttons, progress,\n  // or reveal. Only `vote` playlists show the rating mechanic.\n  const isVoting = playlist.type === 'vote';\n  const totalUsers = voteProgress.length;\n\n  const handleVote = (mediaId: string, vote: TVoteValue) => {\n    emitVoteUpdate(playlist.id, mediaId, vote);\n    debug('playlist', 'Vote emitted', { playlistId: playlist.id, mediaId, vote });\n    writeStored(STORAGE_KEYS.voteKey(voteOwnerScope(), playlist.id, mediaId), vote);\n\n    // Mirror the server's super_upvote exclusivity rule: if this vote is a star,\n    // downgrade any other video's star to upvote so the visual ring updates immediately.\n    const updatedVotes = { ...myVotes, [mediaId]: vote };\n    if (vote === 'super_upvote') {\n      for (const [otherId, otherVote] of Object.entries(updatedVotes)) {\n        if (otherId !== mediaId && otherVote === 'super_upvote') {\n          updatedVotes[otherId] = 'upvote';\n          writeStored(STORAGE_KEYS.voteKey(voteOwnerScope(), playlist.id, otherId), 'upvote');\n        }\n      }\n    }\n\n    useAppStore.getState().applyPlaylistState({\n      playlist,\n      activeIndex,\n      myVotes: updatedVotes,\n    });\n  };\n\n  return (\n    <div className=\"flex flex-col flex-1 min-h-0\">\n      {/* Header */}\n      <div className=\"flex items-center gap-2 px-3 py-2 border-b border-border shrink-0\">\n        {playlist.cover && (\n          <img\n            src={resolveMediaAsset(playlist.cover)}\n            alt=\"\"\n            className=\"w-8 h-8 object-cover rounded shrink-0 bg-bg-alt\"\n          />\n        )}\n        <span className=\"text-xs font-medium text-text truncate flex-1\">\n          {playlist.name}\n        </span>\n        {isLeader && isVoting && (\n          <button\n            onClick={() => emitRevealRequest()}\n            className=\"text-xs text-text-muted hover:text-text transition-colors cursor-pointer shrink-0\"\n            title=\"Reveal votes to all\"\n          >\n            Reveal\n          </button>\n        )}\n      </div>\n\n      {/* Vote progress bar (leader only, vote playlists only) */}\n      {isLeader && isVoting && totalUsers > 0 && (\n        <div className=\"px-3 py-1.5 border-b border-border shrink-0\">\n          <div className=\"flex items-center gap-1.5\">\n            <span className=\"text-[10px] text-text-muted shrink-0\">Votes:</span>\n            <div className=\"flex gap-1 flex-wrap flex-1\">\n              {voteProgress.map(p => (\n                <span key={p.clientId} className=\"text-[10px] text-text-secondary\">\n                  {p.name} {p.votedCount}/{p.totalVideos}\n                </span>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* Video list */}\n      <div className=\"flex-1 overflow-y-auto\">\n        {playlist.videos.map((video, i) => {\n          const isActive = activeIndex === i;\n          const myVote = myVotes[video.mediaId] as TVoteValue | undefined;\n          const isCurrentMedia = currentMediaId === video.mediaId;\n\n          return (\n            <div\n              key={video.mediaId}\n              className={`flex items-center gap-2 px-3 py-2 border-b border-border/50 group ${\n                isActive ? 'bg-primary/10' : 'hover:bg-bg-alt/50'\n              }`}\n            >\n              {/* Play indicator */}\n              <div className=\"w-3.5 shrink-0 text-text-muted\">\n                {isCurrentMedia ? (\n                  <svg className=\"w-3.5 h-3.5 text-text\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                    <polygon points=\"5 3 19 12 5 21 5 3\" />\n                  </svg>\n                ) : (\n                  <span className=\"text-[10px] text-text-muted\">{i + 1}</span>\n                )}\n              </div>\n\n              {/* Thumbnail. No longer flat-playlist-only: `poster.jpg` is\n                  derived by convention when a clip carries no explicit\n                  thumbnail (see resolveCardImage), and a 404 hides the image. */}\n              <div className=\"relative shrink-0\">\n                  <img\n                    src={resolveCardImage(video.mediaId, video.thumbnail)}\n                    alt=\"\"\n                    loading=\"lazy\"\n                    onError={e => {\n                      const el = e.currentTarget as HTMLImageElement;\n                      // Hide the whole slot, not just the img — the duration\n                      // badge is positioned against it.\n                      (el.parentElement ?? el).style.display = 'none';\n                    }}\n                    className=\"w-14 h-10 object-cover rounded bg-bg-alt\"\n                  />\n                  {video.durationMs ? (\n                    <span className=\"absolute bottom-0 right-0 px-1 text-[9px] leading-tight rounded-tl rounded-br bg-bg-card/90 text-text-secondary\">\n                      {formatDuration(video.durationMs)}\n                    </span>\n                  ) : null}\n              </div>\n\n              {/* Video name — leader can click to select */}\n              <button\n                className={`flex-1 text-left text-xs truncate cursor-pointer transition-colors min-w-0 ${\n                  isLeader\n                    ? 'hover:text-text text-text-secondary'\n                    : 'text-text-secondary cursor-default'\n                } ${isActive ? 'text-text font-medium' : ''}`}\n                onClick={isLeader ? () => emitPlaylistSelect(i) : undefined}\n                title={isLeader ? `Play: ${video.displayName}` : video.displayName}\n                disabled={!isLeader}\n              >\n                {video.displayName}\n              </button>\n\n              {/* Vote buttons (vote playlists only) */}\n              {isVoting && (\n                <div className=\"flex gap-0.5 shrink-0\">\n                  {VOTE_OPTIONS.map(opt => {\n                    const isSelected = myVote === opt.value;\n                    return (\n                      <button\n                        key={opt.value}\n                        onClick={() => handleVote(video.mediaId, opt.value)}\n                        title={opt.label}\n                        className=\"vote-btn\"\n                        data-vote={opt.value}\n                        data-selected={isSelected ? '' : undefined}\n                        aria-pressed={isSelected}\n                      >\n                        {opt.icon}\n                      </button>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Results popup (vote playlists only) */}\n      {isVoting && showResults && results && (\n        <PlaylistRevealPopup\n          results={results}\n          onClose={() => setShowResults(false)}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["REMOVE_ARM_MS","VOTE_WEIGHTS","VOTE_ICONS","jsx","StarIcon","computeScores","results","playlist","votes","video","totalScore","voterCount","clientVotes","v","avgScore","a","b","PlaylistRevealPopup","onClose","roster","useAppStore","isLeader","useIsLeader","scored","armed","setArmed","useState","useEffect","t","voters","id","spriteOf","sprite","isCharacterId","onRemove","voterKey","emitVoteRemove","e","jsxs","spriteId","spriteUrlFor","rank","clientId","vote","voteStyle","borderColor","colorForSprite","UpvoteIcon","MidIcon","DownvoteIcon","VOTE_OPTIONS","formatDuration","ms","total","h","m","s","LoadForm","input","setInput","loading","setLoading","err","setErr","handleLoad","emitPlaylistLoad","EmptyState","PlaylistPanel","activeIndex","myVotes","voteProgress","currentMediaId","showResults","setShowResults","seenResults","setSeenResults","restoreVotes","useEffectEvent","savedVotes","key","STORAGE_KEYS","voteOwnerScope","saved","readStored","o","debug","mediaId","emitVoteUpdate","playlistId","React","isVoting","totalUsers","handleVote","writeStored","updatedVotes","otherId","otherVote","resolveMediaAsset","emitRevealRequest","p","i","isActive","myVote","isCurrentMedia","resolveCardImage","el","emitPlaylistSelect","opt","isSelected"],"mappings":"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"}