@hadoku/watchparty-ui 0.0.0-stage → 0.43.16

package/dist/chunks/MediaDrawer-BzR_DusQ.js

@@ -0,0 +1,715 @@
+import { jsxs as u, jsx as a, Fragment as j } from "react/jsx-runtime";
+import { useState as x, useEffect as D, useRef as ce, useMemo as ke, useCallback as Se } from "react";
+import { g as K, as as Y, d as A, ai as Fe, w as q, R as Q, at as Be, au as De, h as se, v as Oe, F as Ce, av as Pe } from "./index-CwuV6ab3.js";
+import { D as $e, a as ae, u as Ge, s as je, b as qe } from "./Room-CPV26zAk.js";
+import { s as Ee, a as W, g as ue, f as He, b as pe, h as Ve, u as We, c as ze, e as Ye, d as Je, i as Ke, j as Qe, k as Xe } from "./submissionsApi-CqGsgEg5.js";
+import { Icon as re } from "@wolffm/themes";
+import { b as Ze } from "./cover-AUIrlUMF.js";
+const ne = /* @__PURE__ */ new Map(), Z = /* @__PURE__ */ new Map(), et = 6e4;
+async function J(e = "") {
+  const r = Date.now(), t = ne.get(e);
+  if (t && r - t.ts < et) return t.data;
+  const l = Z.get(e);
+  if (l) return l;
+  const o = (async () => {
+    const p = `${K()}/api/catalog${e ? `?prefix=${encodeURIComponent(e)}` : ""}`, c = await fetch(p, { cache: "no-store" });
+    if (!c.ok) throw new Error(`catalog_http_${c.status}`);
+    const y = await c.json();
+    return Y() && A("catalog", "Catalog fetched", { prefix: e, dirs: y.dirs?.length, files: y.files?.length }), ne.set(e, { ts: r, data: y }), y;
+  })();
+  Z.set(e, o);
+  try {
+    return await o;
+  } finally {
+    Z.delete(e);
+  }
+}
+function tt(e) {
+  ne.clear();
+}
+async function at() {
+  if (Y())
+    try {
+      const e = ["output/fmp4/anime", "output/fmp4/movie", "output/fmp4/tv"];
+      for (const r of e) {
+        const t = await J(r);
+        A("catalog", "[probe] catalog " + r, { dirs: t.dirs.length, files: t.files.length });
+        const l = t.files[0];
+        if (l) {
+          const o = rt(), i = `${o}/${l.id}/index.json`.replace(/\\/g, "/"), p = `${o}/${l.id}/${Fe}`.replace(/\\/g, "/");
+          await me(i, "index"), await me(p, "fragment", { headers: { Range: "bytes=0-1023" } });
+        }
+      }
+    } catch (e) {
+      q("catalog", "[probe] error", { error: e instanceof Error ? e.message : String(e) });
+    }
+}
+function rt() {
+  return "/media";
+}
+async function me(e, r, t) {
+  const l = performance.now(), o = await fetch(e, t), i = Math.round(performance.now() - l);
+  return A("catalog", "[probe] " + r, { url: e, status: o.status, ms: i, bytes: o.headers.get("content-length") }), o;
+}
+const nt = [
+  "yuuna",
+  "gushingovermagicalgirls",
+  "immoralguild",
+  "ingokudanchi",
+  "isekaionsenparadise"
+], ge = (e) => e.toLowerCase().replace(/[^a-z0-9]/g, "");
+function st(e, r) {
+  return new Set(r.map(ge)).has(ge(e));
+}
+function it(e) {
+  return st(e, nt);
+}
+function fe(e, r) {
+  const t = /* @__PURE__ */ new Map();
+  for (const l of e) {
+    const o = /* @__PURE__ */ new Map();
+    for (const i of r(l))
+      o.set(i.name, i.expanded === !0);
+    t.set(l.name, { expanded: l.expanded === !0, children: o });
+  }
+  return t;
+}
+function he(e, r, t, l) {
+  return e.map((o) => {
+    const i = r.get(o.name);
+    if (!i) return o;
+    const c = t(o).map((v) => {
+      const f = i.children.get(v.name);
+      return f === void 0 ? v : { ...v, expanded: f };
+    });
+    return l({ ...o, expanded: i.expanded }, c);
+  });
+}
+const lt = "Anime";
+function z(e) {
+  return e === lt;
+}
+function ot(e, r, t) {
+  return e.map(
+    (l) => t(
+      { ...l, expanded: z(l.name) },
+      r(l).map((o) => ({ ...o, expanded: !1 }))
+    )
+  );
+}
+const be = "output/fmp4", xe = [
+  { key: "anime", label: "Anime" },
+  { key: "movie", label: "Movie" },
+  { key: "tv", label: "TV" }
+];
+async function ee(e, r) {
+  try {
+    return await e(r);
+  } catch (t) {
+    return q("catalog", "Fetch failed", { prefix: r, ...Q(t) }), null;
+  }
+}
+async function ye(e) {
+  const [r, t] = await Promise.all([
+    Promise.all(xe.map((c) => ee(e, `${be}/${c.key}`))),
+    ee(e, `${be}/playlists`)
+  ]), l = await Promise.all(r.map((c) => Promise.all((c?.dirs ?? []).map(async (y) => {
+    const f = ((await ee(e, y.path))?.files ?? []).map(($) => ({ type: "episode", name: $.title, mediaId: $.id }));
+    return f.length ? { type: "series", name: y.name, episodes: f, expanded: !1 } : null;
+  })))), o = [], i = [];
+  xe.forEach((c, y) => {
+    const v = [];
+    for (const f of l[y])
+      f && (c.key === "anime" && it(f.name) ? i.push(f) : v.push(f));
+    v.length && o.push({ type: "category", name: c.label, series: v, expanded: z(c.label) });
+  });
+  const p = (t?.dirs ?? []).map((c) => ({ type: "playlist", name: c.name, playlistId: c.name }));
+  return p.length && o.push({ type: "playlist_category", name: "Playlists", playlists: p, expanded: z("Playlists") }), i.length && o.push({ type: "category", name: "Ecchi", series: i, expanded: z("Ecchi") }), o;
+}
+const dt = /^(?:https?|magnet):/i;
+function Ae(e) {
+  const r = e.trim();
+  return r.length >= Be && r.length <= De && !dt.test(r);
+}
+function ve(e) {
+  return e ? `${K()}${e}` : null;
+}
+function ct(e) {
+  if (e === null || !Number.isFinite(e) || e < 0) return "";
+  const r = Math.floor(e % 60), t = Math.floor(e / 60) % 60, l = Math.floor(e / 3600), o = String(r).padStart(2, "0");
+  return l > 0 ? `${l}:${String(t).padStart(2, "0")}:${o}` : `${t}:${o}`;
+}
+async function Me(e, r) {
+  try {
+    const t = await fetch(`${K()}${e}`, { signal: r });
+    return t.ok ? { ok: !0, value: await t.json() } : { ok: !1, status: t.status };
+  } catch (t) {
+    return r.aborted ? { ok: !1, status: "aborted" } : (q("search", "Search request threw", Q(t)), { ok: !1, status: "network" });
+  }
+}
+function ut(e, r) {
+  return Me(`/api/search/shows?q=${encodeURIComponent(e.trim())}`, r);
+}
+function pt(e, r) {
+  return Me(`/api/search/youtube?q=${encodeURIComponent(e.trim())}`, r);
+}
+async function mt(e, r) {
+  try {
+    const t = await fetch(`${K()}/api/watchlist`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ source: e, id: r })
+    });
+    if (t.status === 201) {
+      const l = await t.json();
+      return A("search", "Added to watch list", { source: e, id: r, series: l.series }), { ok: !0, value: l };
+    }
+    return { ok: !1, code: t.status === 409 ? "exists" : "failed", status: t.status };
+  } catch (t) {
+    return q("search", "Watch-list add threw", Q(t)), { ok: !1, code: "failed", status: "network" };
+  }
+}
+const gt = 350;
+function ft({ query: e, onSubmitted: r }) {
+  const t = e.trim(), l = Ae(t), [o, i] = x(null), [p, c] = x(null), [y, v] = x({});
+  if (D(() => {
+    if (!l) return;
+    const d = new AbortController(), N = setTimeout(() => {
+      ut(t, d.signal).then((m) => {
+        d.signal.aborted || i({ q: t, outcome: m.ok ? { ok: !0, value: m.value.results } : m });
+      }), pt(t, d.signal).then((m) => {
+        d.signal.aborted || c({ q: t, outcome: m.ok ? { ok: !0, value: m.value.results } : m });
+      });
+    }, gt);
+    return () => {
+      clearTimeout(N), d.abort();
+    };
+  }, [t, l]), !l) return null;
+  const f = o?.q === t ? o.outcome : null, $ = p?.q === t ? p.outcome : null;
+  async function M(d) {
+    const N = `${d.source}:${d.id}`;
+    v((S) => ({ ...S, [N]: "adding" }));
+    const m = await mt(d.source, d.id);
+    v((S) => ({ ...S, [N]: m.ok || m.code === "exists" ? "added" : `error ${m.status}` }));
+  }
+  async function L(d) {
+    const N = `yt:${d.id}`;
+    v((S) => ({ ...S, [N]: "adding" }));
+    const m = await Ee(d.url, d.title);
+    m.ok ? (v((S) => ({ ...S, [N]: "added" })), r(m.value)) : v((S) => ({ ...S, [N]: W(m.failure) }));
+  }
+  const _ = f?.ok && $?.ok && f.value.length === 0 && $.value.length === 0;
+  return /* @__PURE__ */ u("div", { className: "border-b border-border", "data-testid": "media-search", children: [
+    _ && /* @__PURE__ */ a("div", { className: "px-3 py-2 text-[11px] text-text-muted", children: "no results" }),
+    /* @__PURE__ */ a(we, { label: "Shows", answer: f, testId: "search-shows", children: f?.ok && f.value.map((d) => {
+      const N = `${d.source}:${d.id}`, m = d.onWatchlist ? "added" : y[N];
+      return /* @__PURE__ */ a(
+        Ne,
+        {
+          testId: `show-${N}`,
+          image: ve(d.poster),
+          imageClass: "w-8 h-11",
+          title: d.title,
+          meta: [d.year, d.format, d.episodes ? `${d.episodes} ep` : null],
+          state: m,
+          canAdd: d.addable,
+          addLabel: `Add ${d.title} to watch list`,
+          onAdd: () => {
+            M(d);
+          }
+        },
+        N
+      );
+    }) }),
+    /* @__PURE__ */ a(we, { label: "YouTube", answer: $, testId: "search-youtube", children: $?.ok && $.value.map((d) => /* @__PURE__ */ a(
+      Ne,
+      {
+        testId: `video-${d.id}`,
+        image: ve(d.thumb),
+        imageClass: "w-16 h-9",
+        title: d.title,
+        meta: [d.channel, ct(d.durationS)],
+        state: y[`yt:${d.id}`],
+        canAdd: !0,
+        addLabel: `Request ${d.title}`,
+        onAdd: () => {
+          L(d);
+        }
+      },
+      d.id
+    )) })
+  ] });
+}
+function we({ label: e, answer: r, testId: t, children: l }) {
+  if (r?.ok && r.value.length === 0) return null;
+  const o = r && !r.ok && r.status !== "aborted";
+  return /* @__PURE__ */ u("div", { "data-testid": t, "data-loaded": r ? "true" : "false", children: [
+    /* @__PURE__ */ u("div", { className: "px-3 pt-2 pb-1 flex items-center gap-2 text-[10px] uppercase tracking-wider text-text-muted", children: [
+      /* @__PURE__ */ a("span", { children: e }),
+      !r && /* @__PURE__ */ a("span", { className: "text-text-tertiary", children: "…" }),
+      o && /* @__PURE__ */ a("span", { className: "bg-danger-bg text-on-danger-bg px-1 rounded normal-case", children: "unavailable" })
+    ] }),
+    l
+  ] });
+}
+function Ne({ testId: e, image: r, imageClass: t, title: l, meta: o, state: i, canAdd: p, addLabel: c, onAdd: y }) {
+  const v = o.filter((f) => f !== null && f !== "").join(" · ");
+  return /* @__PURE__ */ u("div", { className: "px-3 py-1 flex items-center gap-2", "data-testid": e, "data-state": i ?? "", children: [
+    r ? /* @__PURE__ */ a("img", { src: r, alt: "", loading: "lazy", className: `${t} object-cover rounded shrink-0 bg-bg-alt` }) : /* @__PURE__ */ a("div", { className: `${t} rounded shrink-0 bg-bg-alt` }),
+    /* @__PURE__ */ u("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ a("div", { className: "text-[11px] text-text truncate", title: l, children: l }),
+      v && /* @__PURE__ */ a("div", { className: "text-[10px] text-text-muted truncate", children: v })
+    ] }),
+    i === "added" ? /* @__PURE__ */ a(re, { name: "check", variant: "tint", family: "success", round: !0, className: "shrink-0" }) : i && i !== "adding" ? /* @__PURE__ */ a("span", { className: "text-[10px] bg-danger-bg text-on-danger-bg px-1 rounded shrink-0", children: i }) : p && /* @__PURE__ */ a(
+      "button",
+      {
+        onClick: y,
+        disabled: i === "adding",
+        "aria-label": c,
+        className: "drawer-btn shrink-0",
+        children: /* @__PURE__ */ a(re, { name: "plus" })
+      }
+    )
+  ] });
+}
+const ht = 4e3, bt = {
+  pending: "bg-neutral-bg text-on-neutral-bg",
+  approved: "bg-primary-bg text-on-primary-bg",
+  fetching: "bg-primary-bg text-on-primary-bg",
+  ingesting: "bg-primary-bg text-on-primary-bg",
+  ready: "bg-success-bg text-on-success-bg",
+  rejected: "bg-danger-bg text-on-danger-bg",
+  failed: "bg-danger-bg text-on-danger-bg"
+};
+function xt({ item: e }) {
+  const r = e, t = e.title || e.source;
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: "px-3 py-1.5 border-b border-border/50 flex items-center gap-2",
+      "data-submission-id": e.id,
+      "data-submission-state": e.state,
+      "data-submission-kind": e.kind,
+      "data-submission-series": r.series ?? "",
+      children: [
+        /* @__PURE__ */ a("span", { className: "text-[10px] uppercase tracking-wider text-text-muted shrink-0", children: e.kind }),
+        /* @__PURE__ */ a("span", { className: "text-[11px] text-text-tertiary truncate flex-1", title: e.source, children: r.series ? `${r.series} — ${t}` : t }),
+        /* @__PURE__ */ a("span", { className: `text-[10px] uppercase tracking-wider px-1 rounded ${bt[e.state] ?? "text-text-muted"}`, children: e.state }),
+        e.error && /* @__PURE__ */ a("span", { className: "text-[10px] bg-danger-bg text-on-danger-bg px-1 rounded truncate max-w-[10rem]", children: e.error })
+      ]
+    }
+  );
+}
+function yt({ open: e, onClose: r }) {
+  const [t, l] = x(""), [o, i] = x(""), [p, c] = x(""), [y, v] = x(!1), [f, $] = x([]), [M, L] = x(!1), [_, d] = x(null), [N, m] = x(null), [S, H] = x(null), [R, V] = x(null), [T, O] = x(null), [U, n] = x(!1), [h, g] = x(null), [b, k] = x(null), E = ce(null), P = ce(!1), F = ke(() => ue(t), [t]) === "magnet" && t.trim().length > 0, ie = Ae(t), B = Se(async () => {
+    const s = await He();
+    P.current && (s.ok ? (m(s.value), H(null)) : H(s.failure));
+  }, []);
+  D(() => {
+    if (!e) return;
+    P.current = !0, B();
+    const s = setInterval(() => {
+      B();
+    }, ht);
+    return () => {
+      P.current = !1, clearInterval(s);
+    };
+  }, [e, B]), D(() => {
+    if (!e) return;
+    let s = !0;
+    return pe().then((w) => {
+      s && w.ok && V(w.value);
+    }), () => {
+      s = !1;
+    };
+  }, [e]), D(() => {
+    if (!e) return;
+    let s = !0;
+    return J("output/fmp4/anime").then((w) => {
+      s && $(w.dirs.map((C) => C.name));
+    }).catch(() => {
+    }), () => {
+      s = !1;
+    };
+  }, [e]);
+  function Re(s) {
+    if (l(s), ue(s) === "magnet" && s.trim().length > 0 && !y) {
+      const C = Ye(s);
+      C && c(C);
+    }
+  }
+  function Le() {
+    l(""), i(""), c(""), v(!1);
+  }
+  const le = !F || o.trim().length > 0 && Ve(p);
+  async function oe() {
+    const s = t.trim();
+    if (!s || M || ie || F && !le) return;
+    L(!0), d(null);
+    const w = F ? await Je(s, { title: p.trim() || void 0, series: o.trim() }) : await Ee(s);
+    if (L(!1), !w.ok) {
+      d(w.failure);
+      return;
+    }
+    A("submissions", "Submit accepted", { id: w.value.id, state: w.value.state }), Le(), m((C) => [w.value, ...(C ?? []).filter((I) => I.id !== w.value.id)]), B();
+  }
+  function Te(s) {
+    const w = s.target.files?.[0] ?? null;
+    if (k(null), w && R && w.size > R.maxBytes) {
+      O(null), k({ code: "too_large", maxBytes: R.maxBytes }), E.current && (E.current.value = "");
+      return;
+    }
+    O(w);
+  }
+  async function _e() {
+    if (!T || U) return;
+    n(!0), k(null);
+    let s = R;
+    if (!s) {
+      const I = await pe();
+      if (!I.ok) {
+        n(!1), k(I.failure);
+        return;
+      }
+      s = I.value, V(s);
+    }
+    if (T.size > s.maxBytes) {
+      n(!1), k({ code: "too_large", maxBytes: s.maxBytes });
+      return;
+    }
+    const w = await Ke(T, s, (I, X, Ue) => {
+      g({ sent: I, total: X, phase: Ue });
+    });
+    if (!w.ok) {
+      n(!1), g(null), k(w.failure);
+      return;
+    }
+    const C = await Qe(w.value.fileId, T.name);
+    if (n(!1), g(null), !C.ok) {
+      k(C.failure);
+      return;
+    }
+    A("submissions", "Upload accepted", { id: C.value.id }), O(null), E.current && (E.current.value = ""), m((I) => [C.value, ...(I ?? []).filter((X) => X.id !== C.value.id)]), B();
+  }
+  const de = b ? "maxBytes" in b || b.code === "target_unavailable" || b.code === "upload_failed" ? We(b) : W(b) : null;
+  return /* @__PURE__ */ u(
+    $e,
+    {
+      open: e,
+      onClose: r,
+      header: /* @__PURE__ */ u(j, { children: [
+        /* @__PURE__ */ a("span", { className: "text-xs uppercase tracking-wider text-text-muted", children: "Add media" }),
+        /* @__PURE__ */ a(
+          "button",
+          {
+            onClick: () => {
+              B();
+            },
+            "aria-label": "Refresh submissions",
+            className: `${ae} ml-auto`,
+            children: /* @__PURE__ */ a(re, { name: "refresh" })
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ u("div", { className: "p-3 border-b border-border flex flex-col gap-2", children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              value: t,
+              onChange: (s) => Re(s.target.value),
+              onKeyDown: (s) => {
+                s.key === "Enter" && !F && oe();
+              },
+              "aria-label": "Media link",
+              placeholder: "search, https:// or magnet:",
+              className: "w-full bg-bg-alt border border-border focus:border-border-light outline-none px-2 py-1 rounded text-xs"
+            }
+          ),
+          F && /* @__PURE__ */ u("div", { className: "flex flex-col gap-1.5", "data-testid": "magnet-fields", children: [
+            /* @__PURE__ */ a(
+              "input",
+              {
+                value: o,
+                onChange: (s) => i(s.target.value),
+                list: "add-media-series-options",
+                "aria-label": "Series",
+                placeholder: "series",
+                className: "w-full bg-bg-alt border border-border focus:border-border-light outline-none px-2 py-1 rounded text-xs"
+              }
+            ),
+            /* @__PURE__ */ a("datalist", { id: "add-media-series-options", children: f.map((s) => /* @__PURE__ */ a("option", { value: s }, s)) }),
+            /* @__PURE__ */ a(
+              "input",
+              {
+                value: p,
+                onChange: (s) => {
+                  v(!0), c(s.target.value);
+                },
+                "aria-label": "Title",
+                placeholder: "title (SxxExx)",
+                className: "w-full bg-bg-alt border border-border focus:border-border-light outline-none px-2 py-1 rounded text-xs"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ a(
+              "button",
+              {
+                onClick: () => {
+                  oe();
+                },
+                disabled: M || !t.trim() || ie || F && !le,
+                "aria-label": "Submit media",
+                className: "drawer-btn drawer-btn-primary",
+                children: M ? "Submitting…" : "Submit"
+              }
+            ),
+            _ && /* @__PURE__ */ a("span", { "data-testid": "submit-failure", className: "text-[11px] bg-danger-bg text-on-danger-bg px-1.5 py-0.5 rounded", children: W(_) })
+          ] })
+        ] }),
+        /* @__PURE__ */ a(
+          ft,
+          {
+            query: t,
+            onSubmitted: (s) => m((w) => [s, ...(w ?? []).filter((C) => C.id !== s.id)])
+          }
+        ),
+        /* @__PURE__ */ u("div", { className: "p-3 border-b border-border flex flex-col gap-2", children: [
+          /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ a(
+              "input",
+              {
+                ref: E,
+                type: "file",
+                onChange: Te,
+                "aria-label": "Upload file",
+                className: "text-[11px] flex-1 min-w-0"
+              }
+            ),
+            /* @__PURE__ */ a(
+              "button",
+              {
+                onClick: () => {
+                  _e();
+                },
+                disabled: !T || U,
+                "aria-label": "Upload",
+                className: "drawer-btn drawer-btn-primary",
+                children: U ? h?.phase === "assembling" ? "Assembling…" : "Uploading…" : "Upload"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a("span", { className: "text-[10px] text-text-muted", "data-testid": "upload-cap", children: R ? `cap ${ze(R.maxBytes)}` : "" }),
+          de && /* @__PURE__ */ a("span", { "data-testid": "upload-failure", className: "text-[11px] bg-danger-bg text-on-danger-bg px-1.5 py-0.5 rounded", children: de })
+        ] }),
+        /* @__PURE__ */ u("div", { className: "flex-1 overflow-auto", "data-testid": "my-submissions", children: [
+          S && /* @__PURE__ */ a("div", { className: "mx-3 my-2 px-3 py-2 text-[11px] bg-danger-bg text-on-danger-bg rounded", children: W(S) }),
+          N?.map((s) => /* @__PURE__ */ a(xt, { item: s }, s.id))
+        ] })
+      ]
+    }
+  );
+}
+const vt = { bomberman: Ze };
+function Ie() {
+  Ce(null), A("game", "game_select", { gameId: null });
+}
+function wt({ onDone: e }) {
+  const r = se((i) => i.activeGameId), t = Oe();
+  function l(i) {
+    Ce(i), A("game", "game_select", { gameId: i }), e();
+  }
+  function o() {
+    Ie(), e();
+  }
+  return /* @__PURE__ */ a("div", { className: "flex-1 overflow-auto p-3", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-3", children: t.map((i) => {
+    const p = r === i.id, c = i.cover ?? vt[i.id];
+    return /* @__PURE__ */ u(
+      "button",
+      {
+        onClick: () => p ? o() : l(i.id),
+        className: `group relative aspect-square overflow-hidden rounded-lg border-2 transition-all cursor-pointer ${p ? "border-primary shadow-lg shadow-primary/30" : "border-border hover:border-primary"}`,
+        title: p ? `Stop ${i.name}` : `Start ${i.name}`,
+        children: [
+          c ? /* @__PURE__ */ a(
+            "img",
+            {
+              src: c,
+              alt: i.name,
+              className: "absolute inset-0 w-full h-full object-cover transition-transform group-hover:scale-105"
+            }
+          ) : /* @__PURE__ */ a("div", { className: "absolute inset-0 bg-bg-alt" }),
+          /* @__PURE__ */ a("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/40 to-transparent px-2 pt-6 pb-2", children: /* @__PURE__ */ a("div", { className: "text-sm font-medium text-white leading-tight", children: i.name }) }),
+          p && /* @__PURE__ */ a("span", { className: "absolute top-2 left-2 px-1.5 py-0.5 bg-primary text-[10px] uppercase tracking-wide rounded text-white", children: "Active" })
+        ]
+      },
+      i.id
+    );
+  }) }) });
+}
+function Nt({ onDone: e }) {
+  return se((t) => t.activeGameId) ? /* @__PURE__ */ a("button", { onClick: () => {
+    Ie(), e();
+  }, className: "drawer-btn drawer-btn-danger ml-auto", children: "Stop game" }) : null;
+}
+const G = (e) => e.type === "category" ? e.series : [], te = (e, r) => e.type === "category" ? { ...e, series: r } : e;
+function Rt({ open: e, onClose: r }) {
+  const [t, l] = x(!1), [o, i] = x(null), [p, c] = x([]), [y, v] = x(""), [f, $] = x(!1), [M, L] = x("watch"), _ = se((n) => n.snapshot.mediaId), d = Xe(), N = Se(async () => {
+    l(!0), i(null);
+    try {
+      const n = await ye(J);
+      c((h) => he(n, fe(h, G), G, te)), Y() && at();
+    } catch (n) {
+      i(n.message || "catalog_error");
+    } finally {
+      l(!1);
+    }
+  }, []), m = Ge();
+  D(() => {
+    if (!m) return;
+    let n = !0;
+    return ye(J).then(
+      (h) => {
+        n && c((g) => he(h, fe(g, G), G, te));
+      },
+      (h) => q("catalog", "Catalog prefetch failed", Q(h))
+    ), () => {
+      n = !1;
+    };
+  }, [m]), D(() => {
+    e && (L("watch"), c((n) => ot(n, G, te)), N());
+  }, [e, N]);
+  function S(n) {
+    je(n), A("catalog", "control_load", { mediaId: n }), r();
+  }
+  function H(n) {
+    Pe(n), A("catalog", "playlist_load", { playlistId: n }), r();
+  }
+  function R() {
+    qe(), A("controls", "Unload media clicked (media drawer)"), r();
+  }
+  function V(n, h) {
+    c((g) => g.map((b, k) => k !== n || !("series" in b) ? b : { ...b, series: b.series.map((E, P) => P !== h ? E : { ...E, expanded: !E.expanded }) }));
+  }
+  function T(n) {
+    c((h) => h.map((g, b) => b !== n ? g : { ...g, expanded: !g.expanded }));
+  }
+  function O() {
+    tt(), N();
+  }
+  const U = ke(() => {
+    if (!y.trim()) return p;
+    const n = y.toLowerCase();
+    return p.map((h) => {
+      if (h.type === "playlist_category") {
+        const b = h.playlists.filter((k) => k.name.toLowerCase().includes(n));
+        return b.length ? { ...h, playlists: b, expanded: !0 } : h.name.toLowerCase().includes(n) ? { ...h, expanded: !0 } : null;
+      }
+      const g = h.series.map((b) => {
+        const k = b.episodes.filter((E) => E.name.toLowerCase().includes(n));
+        return k.length ? { ...b, episodes: k, expanded: !0 } : b.name.toLowerCase().includes(n) ? { ...b, expanded: !0 } : null;
+      }).filter(Boolean);
+      return g.length ? { ...h, series: g, expanded: !0 } : h.name.toLowerCase().includes(n) ? { ...h, expanded: !0 } : null;
+    }).filter(Boolean);
+  }, [p, y]);
+  return /* @__PURE__ */ u(j, { children: [
+    /* @__PURE__ */ a(yt, { open: f, onClose: () => $(!1) }),
+    /* @__PURE__ */ a(
+      $e,
+      {
+        open: e && !f,
+        onClose: r,
+        header: /* @__PURE__ */ u(j, { children: [
+          /* @__PURE__ */ a("div", { className: "tl-tabs", role: "tablist", "aria-label": "Media drawer", children: ["watch", "play"].map((n) => /* @__PURE__ */ a(
+            "button",
+            {
+              role: "tab",
+              "aria-selected": M === n,
+              onClick: () => L(n),
+              className: "tl-tab",
+              children: n === "watch" ? "Watch" : "Play"
+            },
+            n
+          )) }),
+          M === "play" && /* @__PURE__ */ a(Nt, { onDone: r }),
+          M === "watch" && /* @__PURE__ */ u(j, { children: [
+            d && /* @__PURE__ */ a(
+              "button",
+              {
+                onClick: () => $(!0),
+                "aria-label": "Add Media",
+                className: ae,
+                children: "Add"
+              }
+            ),
+            _ && /* @__PURE__ */ a(
+              "button",
+              {
+                onClick: R,
+                title: "Unload the current media for everyone in the room",
+                className: "drawer-btn drawer-btn-primary",
+                children: "Unload"
+              }
+            ),
+            /* @__PURE__ */ u("button", { onClick: O, disabled: t, className: `${ae} inline-flex items-center gap-1.5`, children: [
+              t && /* @__PURE__ */ a("span", { className: "inline-block w-3 h-3 border-2 border-text-muted border-t-transparent rounded-full animate-spin" }),
+              t ? "Reloading…" : "Reload"
+            ] }),
+            /* @__PURE__ */ a("input", { value: y, onChange: (n) => v(n.target.value), placeholder: "search", className: "ml-auto bg-bg-alt border border-border focus:border-border-light outline-none px-2 py-1 rounded text-xs" })
+          ] })
+        ] }),
+        footer: Y() ? /* @__PURE__ */ a("div", { className: "p-2 text-[10px] text-text-muted border-t border-border flex justify-end", children: /* @__PURE__ */ a("span", { className: "opacity-70", children: "verbose" }) }) : void 0,
+        children: M === "play" ? /* @__PURE__ */ a(wt, { onDone: r }) : /* @__PURE__ */ u(j, { children: [
+          t && !p.length && /* @__PURE__ */ a("div", { className: "px-4 py-2 text-xs text-text-muted", children: "Loading catalog…" }),
+          o && /* @__PURE__ */ a("div", { className: "mx-3 px-3 py-2 text-xs bg-danger-bg text-on-danger-bg rounded", children: o }),
+          /* @__PURE__ */ u("div", { className: "flex-1 overflow-auto text-sm py-2", children: [
+            U.map((n, h) => /* @__PURE__ */ u("div", { className: "px-3 pb-3", children: [
+              /* @__PURE__ */ u(
+                "div",
+                {
+                  className: "flex items-center gap-2 cursor-pointer select-none group",
+                  "data-category": n.name,
+                  "data-expanded": n.expanded ? "true" : "false",
+                  onClick: () => T(h),
+                  children: [
+                    /* @__PURE__ */ a("span", { className: "text-xs uppercase tracking-wider text-text-muted group-hover:text-text-secondary", children: n.name }),
+                    /* @__PURE__ */ a("span", { className: "text-[10px] opacity-50", children: n.expanded ? "−" : "+" })
+                  ]
+                }
+              ),
+              n.expanded && n.type === "playlist_category" && /* @__PURE__ */ u("div", { className: "mt-2 space-y-1", children: [
+                n.playlists.map((g) => /* @__PURE__ */ u("button", { onClick: () => H(g.playlistId), className: "w-full text-left px-2 py-1 rounded hover:bg-bg-alt flex items-center gap-2 group", children: [
+                  /* @__PURE__ */ a("span", { className: "text-[11px] text-text-tertiary group-hover:text-text-secondary truncate", children: g.name }),
+                  /* @__PURE__ */ a("span", { className: "ml-auto text-[10px] text-text underline decoration-primary underline-offset-2 opacity-0 group-hover:opacity-100 transition-opacity", children: "Load" })
+                ] }, g.playlistId)),
+                n.playlists.length === 0 && /* @__PURE__ */ a("div", { className: "text-[11px] text-text-muted italic", children: "(no playlists)" })
+              ] }),
+              n.expanded && n.type === "category" && /* @__PURE__ */ u("div", { className: "mt-2 space-y-2", children: [
+                n.series.map((g, b) => /* @__PURE__ */ u("div", { children: [
+                  /* @__PURE__ */ u("div", { className: "flex items-center gap-2 cursor-pointer text-text-secondary hover:text-text", onClick: () => V(h, b), children: [
+                    /* @__PURE__ */ a("span", { className: "text-xs font-medium", children: g.name }),
+                    /* @__PURE__ */ a("span", { className: "text-[10px] opacity-40", children: g.expanded ? "−" : "+" })
+                  ] }),
+                  g.expanded && /* @__PURE__ */ u("div", { className: "mt-1 ml-3 border-l border-border pl-3 space-y-1", children: [
+                    g.episodes.map((k) => /* @__PURE__ */ u("button", { onClick: () => S(k.mediaId), className: "w-full text-left px-2 py-1 rounded hover:bg-bg-alt flex items-center gap-2 group", children: [
+                      /* @__PURE__ */ a("span", { className: "text-[11px] text-text-tertiary group-hover:text-text-secondary truncate", children: k.name }),
+                      /* @__PURE__ */ a("span", { className: "ml-auto text-[10px] text-text underline decoration-primary underline-offset-2 opacity-0 group-hover:opacity-100 transition-opacity", children: "Load" })
+                    ] }, k.mediaId)),
+                    g.episodes.length === 0 && /* @__PURE__ */ a("div", { className: "text-[11px] text-text-muted italic", children: "(no episodes)" })
+                  ] })
+                ] }, g.name)),
+                n.series.length === 0 && /* @__PURE__ */ a("div", { className: "text-[11px] text-text-muted italic", children: "(empty)" })
+              ] })
+            ] }, n.name)),
+            !t && !U.length && /* @__PURE__ */ a("div", { className: "px-4 py-6 text-center text-xs text-text-muted", children: "No matches" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  Rt as default
+};
+//# sourceMappingURL=MediaDrawer-BzR_DusQ.js.map