Upload 45 files

.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+.next
+.git
+.env
+.env.local
+*.log
+Dockerfile
+docker-compose.yml
+README.md

.env

@@ -0,0 +1,48 @@
+# ─────────────────────────────────────────────────────────────────────────────
+# Copy this file to ".env" and fill it in:  cp .env.example .env
+# Only TMDB_API_KEY and APP_SECRET are required. Everything else is optional.
+# ─────────────────────────────────────────────────────────────────────────────
+
+# REQUIRED — your own TMDB (The Movie Database) API key.
+# Get one free at https://www.themoviedb.org/settings/api  (v3 auth "API Key")
+TMDB_API_KEY=1c9a2f152e729aecfec1c47b46aa9607
+
+
+# REQUIRED — a long random secret used to sign the internal stream-proxy URLs
+# so your server can't be abused as an open proxy. Generate one with:
+#   openssl rand -hex 32
+APP_SECRET=
+
+# Port the server listens on (default 3000).
+PORT=3000
+
+# ── Branding (safe to expose to the browser) ────────────────────────────────
+# Visible player / brand name (window title + metadata).
+PLAYER_NAME=Vidsuper
+# Short tagline shown alongside the name in the browser tab.
+PLAYER_TAGLINE=Video streaming player
+# Default accent colour (hex, with or without #). Override per-embed with ?color=
+ACCENT_COLOR=ef4444
+# Logo path served from /public. To rebrand, replace public/logo.svg (keep the
+# name) OR drop a new file in public/ and point this at it, e.g. /brand.png
+LOGO_SRC=/logo.svg
+
+# ── Source (server) display names — optional rename per source ───────────────
+# The player shows these in its "Server" menu. Uppercase the source id.
+# SOURCE_ONEROOM_NAME=Server 1
+# SOURCE_INSERTUNIT_NAME=Server 2
+# SOURCE_FLIXHQ_NAME=Server 3
+# SOURCE_CASTLE_NAME=Server 4
+# SOURCE_CINESU_NAME=Server 5
+# SOURCE_VIDNEST_NAME=Server 6
+# SOURCE_VIDROCK_NAME=Server 7
+# SOURCE_VIXSRC_NAME=Server 8
+
+# ── Subtitles — set to "false" to disable a provider (default: enabled) ──────
+SUBTITLES_OPENSUBTITLES=true
+SUBTITLES_VDRK=true
+
+# ── Skip intro/credits ───────────────────────────────────────────────────────
+# Skip-intro works out of the box via theintrodb.org (no key needed). This is
+# only here in case you have a key you want forwarded; leave it blank otherwise.
+INTRODB_API_KEY=

.gitignore

@@ -1,72 +1,24 @@
-```
-# Dependencies
-node_modules/
-.venv/
-venv/
-__pycache__/
-.mypy_cache/
-.pytest_cache/
-target/
-.gradle/
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Build artifacts
-dist/
-build/
-*.pyc
-*.class
-*.o
-*.exe
-*.dll
-*.so
-*.a
-*.obj
-*.out
+# next.js
+/.next/
+/out/
+next-env.d.ts
 
-# Environment files
+# production
+/build
+
+# env — never commit real secrets
 .env
 .env.local
-*.env.*
+.env*.local
 
-# Editor/IDE files
-.vscode/
-.idea/
-*.swp
-*.swo
-*.tmp
-
-# System files
+# misc
 .DS_Store
-Thumbs.db
-
-# Logs
 *.log
-
-# Coverage
-coverage/
-htmlcov/
-.coverage
-
-# Compressed files
-*.zip
-*.gz
-*.tar
-*.tgz
-*.bz2
-*.xz
-*.7z
-*.rar
-*.zst
-*.lz4
-*.lzh
-*.cab
-*.arj
-*.rpm
-*.deb
-*.Z
-*.lz
-*.lzo
-*.tar.gz
-*.tar.bz2
-*.tar.xz
-*.tar.zst
-```
+npm-debug.log*
+.vscode/
+.idea/

Dockerfile

@@ -1,17 +1,26 @@
-FROM python:3.11-slim
-
+# ---- deps ----
+FROM node:20-alpine AS deps
 WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci 2>/dev/null || npm install
 
-# Install dependencies
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Copy application code
-COPY api.py .
-
-# Expose the default FastAPI port
-EXPOSE 8000
+# ---- build ----
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+# Branding + keys are read at RUNTIME (not baked in), so no build args needed.
+RUN npm run build
 
-# Run the application with uvicorn
-# Koyeb sets PORT environment variable, so we use it with a default of 8000
-CMD ["sh", "-c", "uvicorn api:app --host 0.0.0.0 --port ${PORT:-8000}"]
+# ---- run ----
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+RUN addgroup -g 1001 -S nodejs && adduser -S nextjs -u 1001
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000 HOSTNAME=0.0.0.0
+CMD ["node", "server.js"]

app/api/cinesu/route.ts

@@ -0,0 +1,75 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  mintStreamToken,
+  verify,
+  StreamClaim,
+} from "@/lib/security/tokens";
+import {
+  cineSuVariants,
+  buildVariantM3u8,
+  stripPngWrapper,
+} from "@/lib/scraper/cinesu";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const UA =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36";
+
+// Two modes:
+//   ?seg=<token>           → de-wrap a PNG-polyglot segment into raw MPEG-TS
+//   ?m&t&s&e&v=<variant>   → build the variant's M3U8 (segments routed back here)
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const origin = new URL(req.url).origin;
+
+  // ---- segment mode: fetch the PNG-wrapped .ts and strip the wrapper ----
+  const segToken = searchParams.get("seg");
+  if (segToken) {
+    const claim = verify<StreamClaim>(segToken);
+    if (!claim || claim.k !== "stream") {
+      return new NextResponse("forbidden", { status: 403 });
+    }
+    try {
+      const r = await fetch(claim.url, {
+        headers: { "User-Agent": UA, Referer: "https://cine.su/" },
+        cache: "no-store",
+      });
+      if (!r.ok) return new NextResponse("not found", { status: 404 });
+      const ts = stripPngWrapper(Buffer.from(await r.arrayBuffer()));
+      return new NextResponse(new Uint8Array(ts), {
+        headers: {
+          "Content-Type": "video/mp2t",
+          "Cache-Control": "public, max-age=86400",
+          "Access-Control-Allow-Origin": "*",
+        },
+      });
+    } catch {
+      return new NextResponse("bad gateway", { status: 502 });
+    }
+  }
+
+  // ---- playlist mode ----
+  const isTv = searchParams.get("m") === "tv";
+  const t = parseInt(searchParams.get("t") || "0", 10);
+  const s = isTv ? parseInt(searchParams.get("s") || "0", 10) : 0;
+  const e = isTv ? parseInt(searchParams.get("e") || "0", 10) : 0;
+  const v = parseInt(searchParams.get("v") || "0", 10);
+  if (!t) return new NextResponse("bad request", { status: 400 });
+
+  const variants = await cineSuVariants(t, s, e).catch(() => []);
+  const variant = variants[v];
+  if (!variant) return new NextResponse("not found", { status: 404 });
+
+  const proxySeg = (url: string) =>
+    `${origin}/api/cinesu?seg=${encodeURIComponent(mintStreamToken(url))}`;
+  const m3u8 = buildVariantM3u8(variant, proxySeg);
+
+  return new NextResponse(m3u8, {
+    headers: {
+      "Content-Type": "application/vnd.apple.mpegurl",
+      "Cache-Control": "no-store",
+      "Access-Control-Allow-Origin": "*",
+    },
+  });
+}

app/api/dseg/[...slug]/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from "next/server";
+import { verify, DashBaseClaim } from "@/lib/security/tokens";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const UA =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36";
+
+// DASH segment proxy. The .mpd's <BaseURL> is rewritten to
+// /api/dseg/<base-token>/ so dash.js appends the segment path here; we
+// reconstruct the real URL (real CDN host + referer) and stream the bytes.
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ slug: string[] }> }
+) {
+  const { slug } = await params;
+  const [token, ...rest] = slug;
+  const claim = verify<DashBaseClaim>(token);
+  if (!claim || claim.k !== "dbase") {
+    return new NextResponse("forbidden", { status: 403 });
+  }
+
+  const search = new URL(req.url).search; // preserves segment query/tokens
+  const target = claim.url + rest.join("/") + search;
+
+  const headers: Record<string, string> = { "User-Agent": UA };
+  if (claim.ref) {
+    headers["Referer"] = claim.ref;
+    headers["Origin"] = new URL(claim.ref).origin;
+  }
+  const range = req.headers.get("range");
+  if (range) headers["Range"] = range;
+
+  let up: Response;
+  try {
+    up = await fetch(target, { headers, redirect: "follow", cache: "no-store" });
+  } catch {
+    return new NextResponse("bad gateway", { status: 502 });
+  }
+
+  const out = new Headers();
+  for (const h of [
+    "content-type",
+    "content-length",
+    "accept-ranges",
+    "content-range",
+  ]) {
+    const v = up.headers.get(h);
+    if (v) out.set(h, v);
+  }
+  out.set("Cache-Control", "no-store");
+  return new NextResponse(up.body, { status: up.status, headers: out });
+}

app/api/introdb/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+// Skip intro / credits timestamps via theintrodb.org. No API key required —
+// works out of the box. An optional INTRODB_API_KEY is forwarded if you set
+// one, but it isn't needed. The player only requests this when a title is
+// played with ?skip_intro=true.
+const INTRODB_KEY = process.env.INTRODB_API_KEY || "";
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const id = searchParams.get("id") || "";
+  const season = searchParams.get("season") || "";
+  const episode = searchParams.get("episode") || "";
+  const durationMs = searchParams.get("duration_ms") || "";
+  if (!id) return NextResponse.json({ error: "bad request" }, { status: 400 });
+
+  const qs = new URLSearchParams({ tmdb_id: id });
+  if (season) qs.set("season", season);
+  if (episode) qs.set("episode", episode);
+  if (durationMs) qs.set("duration_ms", durationMs);
+
+  try {
+    const headers: Record<string, string> = {};
+    if (INTRODB_KEY) {
+      headers["Authorization"] = INTRODB_KEY;
+      headers["X-API-Key"] = INTRODB_KEY;
+    }
+    const res = await fetch(`https://api.theintrodb.org/v3/media?${qs.toString()}`, {
+      headers,
+      cache: "no-store",
+    });
+    if (!res.ok) return NextResponse.json({ intro: [], recap: [], credits: [] });
+    const data = await res.json();
+    return NextResponse.json(
+      { intro: data.intro || [], recap: data.recap || [], credits: data.credits || [] },
+      { headers: { "Cache-Control": "no-store" } }
+    );
+  } catch {
+    return NextResponse.json({ intro: [], recap: [], credits: [] });
+  }
+}

app/api/sources/list/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+import { sourceList } from "@/lib/scraper";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+// Active source metadata (id/name/label) so the player builds its server list
+// from whatever's registered in lib/scraper.
+export async function GET() {
+  return NextResponse.json(
+    { sources: sourceList() },
+    { headers: { "Cache-Control": "no-store" } }
+  );
+}

app/api/sources/route.ts

@@ -0,0 +1,96 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSource } from "@/lib/scraper";
+import type { SourceContext } from "@/lib/scraper/types";
+import { mintStreamToken } from "@/lib/security/tokens";
+import { fetchOpenSubtitles } from "@/lib/subtitles/opensubtitles";
+import { fetchVdrkSubs } from "@/lib/subtitles/vdrk";
+
+// Subtitle sources are toggled via env (all enabled by default). Set
+// SUBTITLES_OPENSUBTITLES / SUBTITLES_VDRK to "false" (or "0"/"off"/"no").
+function subEnabled(name: string): boolean {
+  const v = (process.env[name] || "").toLowerCase().trim();
+  return v !== "false" && v !== "0" && v !== "off" && v !== "no";
+}
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+// Resolves playable sources for a title. Upstream stream + subtitle URLs are
+// wrapped in signed /api/stream + /api/sub proxy links so every byte flows
+// through this server (never a third-party CDN or worker), and the real URLs
+// stay server-side.
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const type = searchParams.get("type") || "";
+  const id = searchParams.get("id") || "";
+  const season = parseInt(searchParams.get("season") || "0", 10) || 0;
+  const episode = parseInt(searchParams.get("episode") || "0", 10) || 0;
+  const server = searchParams.get("server") || "";
+  const tmdbId = parseInt(id, 10);
+  if (!tmdbId) return NextResponse.json({ error: "bad id" }, { status: 400 });
+
+  const origin = new URL(req.url).origin;
+  const proxied = (url: string, ref?: string) =>
+    `${origin}/api/stream?t=${encodeURIComponent(mintStreamToken(url, ref))}`;
+  const proxiedSub = (url: string, ref?: string) =>
+    `${origin}/api/sub?t=${encodeURIComponent(mintStreamToken(url, ref))}`;
+
+  // Resolve the requested source from the registry (drop a file in lib/scraper
+  // to add a new one). Falls back to the first registered source.
+  const source = getSource(server);
+  if (!source) {
+    return NextResponse.json({ error: "bad server" }, { status: 400 });
+  }
+
+  const isEnglish = (lang?: string) =>
+    (lang || "").toLowerCase().startsWith("en");
+  const openSubtitlesOn = subEnabled("SUBTITLES_OPENSUBTITLES");
+  const vdrkOn = subEnabled("SUBTITLES_VDRK");
+  const subType = type === "tv" ? "tv" : "movie";
+  const [osRaw, vdrkRaw] = await Promise.all([
+    openSubtitlesOn
+      ? fetchOpenSubtitles(tmdbId, season, episode).catch(() => [])
+      : [],
+    vdrkOn ? fetchVdrkSubs(subType, tmdbId, season, episode).catch(() => []) : [],
+  ]);
+  // English first, then the rest — tracks proxied for same-origin WebVTT.
+  const openSubs = osRaw
+    .sort((a, b) => Number(isEnglish(b.language)) - Number(isEnglish(a.language)))
+    .map((s) => ({
+      url: proxiedSub(s.url),
+      display: s.display,
+      language: s.language,
+      source: "OpenSubtitles",
+    }));
+  const vdrkSubs = vdrkRaw
+    .sort((a, b) => Number(isEnglish(b.language)) - Number(isEnglish(a.language)))
+    .map((s) => ({
+      url: proxiedSub(s.file),
+      display: s.label,
+      language: s.language,
+      source: "vdrk",
+    }));
+
+  const ctx: SourceContext = {
+    tmdbId,
+    season,
+    episode,
+    origin,
+    proxyStream: proxied,
+    proxySub: proxiedSub,
+  };
+
+  const result = await source.fetch(ctx).catch(() => null);
+  if (!result || !result.streams.length) {
+    return NextResponse.json({ error: "no sources" }, { status: 404 });
+  }
+
+  return NextResponse.json(
+    {
+      sources: result.streams,
+      provider: source.name,
+      subtitles: [...openSubs, ...vdrkSubs, ...(result.subtitles || [])],
+    },
+    { headers: { "Cache-Control": "no-store" } }
+  );
+}

app/api/stream/route.ts

@@ -0,0 +1,159 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  verify,
+  mintStreamToken,
+  mintDashBase,
+  StreamClaim,
+} from "@/lib/security/tokens";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const UA =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36";
+
+// Rewrite every URI in an HLS manifest so child playlists, keys and segments
+// also flow back through this proxy (the real hosts are never exposed).
+function rewriteManifest(
+  text: string,
+  baseUrl: string,
+  origin: string,
+  ref?: string
+): string {
+  const base = new URL(baseUrl);
+  const wrap = (u: string) => {
+    let abs: string;
+    try {
+      abs = new URL(u, base).toString();
+    } catch {
+      return u;
+    }
+    return `${origin}/api/stream?t=${encodeURIComponent(
+      mintStreamToken(abs, ref)
+    )}`;
+  };
+  return text
+    .split("\n")
+    .map((line) => {
+      const t = line.trim();
+      if (!t) return line;
+      if (t.startsWith("#")) {
+        // rewrite URI="..." attributes (EXT-X-KEY / MAP / MEDIA / I-FRAME)
+        return line.replace(/URI="([^"]+)"/g, (_m, u) => `URI="${wrap(u)}"`);
+      }
+      return wrap(t); // bare segment / sub-playlist line
+    })
+    .join("\n");
+}
+
+// Rewrite a DASH .mpd so its <BaseURL> points at the segment proxy. The real
+// host is BaseURL[0]; "x-bc.interkh.com" placeholder bases are dropped.
+function rewriteMpd(
+  xml: string,
+  mpdUrl: string,
+  origin: string,
+  ref?: string
+): string {
+  const bases = [...xml.matchAll(/<BaseURL>([^<]+)<\/BaseURL>/g)].map((m) =>
+    m[1].trim()
+  );
+  let real = bases.find((u) => !u.includes("x-bc")) || bases[0];
+  if (!real) {
+    // no explicit BaseURL — derive from the manifest directory
+    real = mpdUrl.split("?")[0].replace(/[^/]*$/, "");
+  } else {
+    real = new URL(real, mpdUrl).toString();
+  }
+  if (!real.endsWith("/")) real += "/";
+
+  const proxied = `${origin}/api/dseg/${mintDashBase(real, ref)}/`;
+
+  let first = true;
+  let out = xml.replace(/<BaseURL>[^<]*<\/BaseURL>/g, () =>
+    first ? ((first = false), `<BaseURL>${proxied}</BaseURL>`) : ""
+  );
+  // if the manifest had no BaseURL at all, inject one after <MPD ...>
+  if (first) {
+    out = out.replace(/(<MPD\b[^>]*>)/, `$1<BaseURL>${proxied}</BaseURL>`);
+  }
+  return out;
+}
+
+export async function GET(req: NextRequest) {
+  const { searchParams, origin } = new URL(req.url);
+  const claim = verify<StreamClaim>(searchParams.get("t"));
+  if (!claim || claim.k !== "stream") {
+    return new NextResponse("forbidden", { status: 403 });
+  }
+
+  const target = claim.url;
+  const upstreamHeaders: Record<string, string> = { "User-Agent": UA };
+  if (claim.ref) {
+    upstreamHeaders["Referer"] = claim.ref;
+    upstreamHeaders["Origin"] = new URL(claim.ref).origin;
+  }
+  const range = req.headers.get("range");
+  if (range) upstreamHeaders["Range"] = range;
+
+  let upstream: Response;
+  try {
+    upstream = await fetch(target, {
+      headers: upstreamHeaders,
+      redirect: "follow",
+      cache: "no-store", // never serve a stale manifest (segment tokens rotate)
+    });
+  } catch {
+    return new NextResponse("bad gateway", { status: 502 });
+  }
+
+  const ct = (upstream.headers.get("content-type") || "").toLowerCase();
+  const path0 = target.split("?")[0].toLowerCase();
+  const isManifest = path0.endsWith(".m3u8") || ct.includes("mpegurl");
+  const isMpd = path0.endsWith(".mpd") || ct.includes("dash+xml");
+
+  if (isMpd) {
+    const xml = await upstream.text();
+    const finalUrl = (upstream as any).url || target;
+    const body = rewriteMpd(xml, finalUrl, origin, claim.ref);
+    return new NextResponse(body, {
+      status: upstream.status,
+      headers: {
+        "Content-Type": "application/dash+xml",
+        "Cache-Control": "no-store",
+      },
+    });
+  }
+
+  if (isManifest) {
+    const text = await upstream.text();
+    // upstream.url reflects any redirects, giving the correct base for relatives
+    const finalUrl = (upstream as any).url || target;
+    const body = rewriteManifest(text, finalUrl, origin, claim.ref);
+    return new NextResponse(body, {
+      status: upstream.status,
+      headers: {
+        "Content-Type": "application/vnd.apple.mpegurl",
+        "Cache-Control": "no-store",
+      },
+    });
+  }
+
+  // Binary passthrough for segments / mp4 (preserve range/seek headers)
+  const headers = new Headers();
+  for (const h of [
+    "content-type",
+    "content-length",
+    "accept-ranges",
+    "content-range",
+    "cache-control",
+  ]) {
+    const v = upstream.headers.get(h);
+    if (v) headers.set(h, v);
+  }
+  if (!headers.has("cache-control")) headers.set("Cache-Control", "no-store");
+
+  return new NextResponse(upstream.body, {
+    status: upstream.status,
+    headers,
+  });
+}

app/api/sub/route.ts

@@ -0,0 +1,117 @@
+import { NextRequest, NextResponse } from "next/server";
+import zlib from "zlib";
+import { verify, StreamClaim } from "@/lib/security/tokens";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+const UA =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36";
+
+// In-memory cache of converted WebVTT, keyed by upstream URL. Lets a track that
+// fetched successfully stay available without re-hitting rate-limited upstreams
+// (notably OpenSubtitles' throttled free download endpoint).
+const SUB_CACHE = new Map<string, { vtt: string; ts: number }>();
+const SUB_CACHE_TTL = 6 * 60 * 60 * 1000; // 6h
+const SUB_CACHE_MAX = 300;
+
+function cacheGet(url: string): string | null {
+  const hit = SUB_CACHE.get(url);
+  if (!hit) return null;
+  if (Date.now() - hit.ts > SUB_CACHE_TTL) {
+    SUB_CACHE.delete(url);
+    return null;
+  }
+  return hit.vtt;
+}
+
+function cacheSet(url: string, vtt: string) {
+  if (SUB_CACHE.size >= SUB_CACHE_MAX) {
+    const oldest = SUB_CACHE.keys().next().value;
+    if (oldest) SUB_CACHE.delete(oldest);
+  }
+  SUB_CACHE.set(url, { vtt, ts: Date.now() });
+}
+
+function vttResponse(out: string) {
+  return new NextResponse(out, {
+    headers: {
+      "Content-Type": "text/vtt; charset=utf-8",
+      "Cache-Control": "public, max-age=3600",
+      "Access-Control-Allow-Origin": "*",
+    },
+  });
+}
+
+// Minimal SRT → WebVTT conversion (comma decimals → dot, add header).
+function srtToVtt(input: string): string {
+  const body = input
+    .replace(/\r+/g, "")
+    .replace(/^/, "")
+    .replace(/(\d{2}:\d{2}:\d{2}),(\d{3})/g, "$1.$2");
+  return "WEBVTT\n\n" + body;
+}
+
+// Proxies a signed subtitle URL and always serves WebVTT, same-origin.
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const claim = verify<StreamClaim>(searchParams.get("t"));
+  if (!claim || claim.k !== "stream") {
+    return new NextResponse("forbidden", { status: 403 });
+  }
+
+  // Serve from cache when we've already fetched + converted this track.
+  const cached = cacheGet(claim.url);
+  if (cached) return vttResponse(cached);
+
+  const headers: Record<string, string> = { "User-Agent": UA };
+  if (claim.ref) headers["Referer"] = claim.ref;
+
+  const target = claim.url;
+
+  // Fail fast instead of hanging on slow/rate-limited upstreams (OpenSubtitles
+  // can stall for 10s+ when throttled).
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), 8000);
+
+  let text: string;
+  try {
+    const res = await fetch(target, {
+      headers,
+      cache: "no-store",
+      redirect: "follow",
+      signal: controller.signal,
+    });
+    if (!res.ok) return new NextResponse("not found", { status: 404 });
+    let buf = Buffer.from(await res.arrayBuffer());
+    // OpenSubtitles (and some others) serve a gzip-compressed body without a
+    // Content-Encoding header, so fetch doesn't auto-decompress. Detect the
+    // gzip magic bytes (1f 8b) and inflate ourselves.
+    if (buf.length > 2 && buf[0] === 0x1f && buf[1] === 0x8b) {
+      try {
+        buf = zlib.gunzipSync(buf);
+      } catch {}
+    }
+    text = buf.toString("utf8");
+  } catch {
+    return new NextResponse("bad gateway", { status: 502 });
+  } finally {
+    clearTimeout(timer);
+  }
+
+  // If we got an HTML error page (e.g. download-limit notice) it's not a
+  // subtitle — fail so the player can fall back to another track.
+  if (/^\s*<(?:!doctype|html)/i.test(text)) {
+    return new NextResponse("not a subtitle", { status: 502 });
+  }
+
+  const isVtt = text.trimStart().startsWith("WEBVTT");
+  let out = isVtt ? text : srtToVtt(text);
+
+  // Rebrand any source watermark/credit lines onto the serving domain.
+  const host = req.headers.get("host");
+  if (host) out = out.replace(/hoofoot\.ru/gi, host);
+
+  cacheSet(claim.url, out);
+  return vttResponse(out);
+}

app/api/tmdb/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  search,
+  getById,
+  getPopular,
+  getTvSeasons,
+  getSeasonEpisodes,
+} from "@/lib/tmdb";
+
+// Lightweight proxy so the player page can search / look up titles without
+// shipping the API key to the browser.
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const action = searchParams.get("action");
+  const type = (searchParams.get("type") || "movie") as "movie" | "tv";
+
+  try {
+    if (action === "popular") {
+      const data = await getPopular(type);
+      return NextResponse.json({ results: data.slice(0, 12) });
+    }
+    if (action === "search") {
+      const q = searchParams.get("q") || "";
+      const data = await search(type, q);
+      return NextResponse.json({ results: data.slice(0, 8) });
+    }
+    if (action === "lookup") {
+      const id = searchParams.get("id") || "";
+      const data = await getById(type, id);
+      return NextResponse.json({ result: data });
+    }
+    if (action === "seasons") {
+      const id = searchParams.get("id") || "";
+      const data = await getTvSeasons(id);
+      return NextResponse.json({ seasons: data });
+    }
+    if (action === "episodes") {
+      const id = searchParams.get("id") || "";
+      const season = parseInt(searchParams.get("season") || "1", 10) || 1;
+      const data = await getSeasonEpisodes(id, season);
+      return NextResponse.json({ episodes: data });
+    }
+    return NextResponse.json({ error: "unknown action" }, { status: 400 });
+  } catch (e) {
+    return NextResponse.json({ error: "tmdb error" }, { status: 502 });
+  }
+}

app/globals.css

@@ -0,0 +1,224 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg: #050208;
+  --brand: #f59ff1;
+  --brand-2: #c084fc;
+  --brand-3: #a855f7;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  background-color: var(--bg);
+  color: #fff;
+  min-height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-montserrat), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  position: relative;
+  overflow-x: hidden;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(139, 92, 246, 0.35);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(139, 92, 246, 0.6);
+  background-clip: padding-box;
+}
+
+.text-gradient-purple {
+  background-image: linear-gradient(to right, #c084fc, #d8b4fe, #e9d5ff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* Matches the logo "V" colour (#f59ff1), lightening toward the right */
+.text-gradient-logo {
+  background-image: linear-gradient(110deg, #f59ff1 0%, #f4a9f0 38%, #e9c7ff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* ───────────────────────────────────────────────────────────────────────
+   Scrolling movie-poster wall — cinematic page background. Columns drift up
+   and down at varied speeds behind a dark, brand-tinted veil for legibility.
+   ─────────────────────────────────────────────────────────────────────── */
+.movie-wall {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  background: var(--bg);
+}
+.movie-wall-track {
+  display: flex;
+  gap: 14px;
+  height: 100%;
+  padding: 14px;
+  /* size columns to their content (not stretched) so translateY(-50%) maps to
+     exactly one duplicated set — a seamless loop. */
+  align-items: flex-start;
+  opacity: 0.2;
+}
+.movie-wall-col {
+  flex: 0 0 clamp(120px, 13vw, 190px);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  will-change: transform;
+  /* longhand props so a missing duration in a shorthand can't reset it to 0s */
+  animation-name: wall-up;
+  animation-duration: var(--dur, 60s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.movie-wall-col.is-down {
+  animation-name: wall-down;
+}
+.movie-wall-col img {
+  width: 100%;
+  aspect-ratio: 2 / 3;
+  object-fit: cover;
+  border-radius: 12px;
+  display: block;
+}
+@keyframes wall-up {
+  from { transform: translateY(0); }
+  to { transform: translateY(-50%); }
+}
+@keyframes wall-down {
+  from { transform: translateY(-50%); }
+  to { transform: translateY(0); }
+}
+/* Dark, brand-tinted wash so foreground text stays readable over the wall. */
+.movie-wall-veil {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(5, 2, 8, 0.55), rgba(5, 2, 8, 0.93) 78%),
+    radial-gradient(circle at 12% 18%, rgba(168, 85, 247, 0.22), transparent 42%),
+    radial-gradient(circle at 88% 80%, rgba(245, 159, 241, 0.16), transparent 46%),
+    linear-gradient(to bottom, rgba(5, 2, 8, 0.86), rgba(5, 2, 8, 0.55) 32%, rgba(5, 2, 8, 0.92));
+}
+@media (prefers-reduced-motion: reduce) {
+  .movie-wall-col { animation: none !important; }
+}
+
+/* Glass card used across the marketing pages */
+.glass {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
+  border-radius: 20px;
+  backdrop-filter: blur(10px);
+  box-shadow:
+    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
+    0 24px 60px -28px rgba(0, 0, 0, 0.8);
+}
+
+/* Glass frame with corner brackets */
+.frame {
+  position: relative;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
+  box-shadow:
+    0 0 0 1px rgba(139, 92, 246, 0.06),
+    0 30px 80px -20px rgba(0, 0, 0, 0.7),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(2px);
+}
+.frame::before,
+.frame::after {
+  content: "";
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  border-color: rgba(216, 180, 254, 0.55);
+  pointer-events: none;
+}
+.frame-corner {
+  position: absolute;
+  width: 26px;
+  height: 26px;
+  pointer-events: none;
+}
+.frame-corner::before,
+.frame-corner::after {
+  content: "";
+  position: absolute;
+  background: rgba(216, 180, 254, 0.5);
+}
+.frame-corner::before {
+  width: 100%;
+  height: 1.5px;
+}
+.frame-corner::after {
+  width: 1.5px;
+  height: 100%;
+}
+.frame-corner.tl {
+  top: 18px;
+  left: 18px;
+}
+.frame-corner.tr {
+  top: 18px;
+  right: 18px;
+}
+.frame-corner.tr::before {
+  right: 0;
+}
+.frame-corner.tr::after {
+  right: 0;
+}
+.frame-corner.bl {
+  bottom: 18px;
+  left: 18px;
+}
+.frame-corner.bl::before {
+  bottom: 0;
+}
+.frame-corner.br {
+  bottom: 18px;
+  right: 18px;
+}
+.frame-corner.br::before {
+  bottom: 0;
+  right: 0;
+}
+.frame-corner.br::after {
+  bottom: 0;
+  right: 0;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Inter, Montserrat } from "next/font/google";
+import "./globals.css";
+import { PLAYER_NAME, PLAYER_TAGLINE, LOGO_SRC } from "@/lib/config";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  variable: "--font-montserrat",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: `${PLAYER_NAME} — ${PLAYER_TAGLINE}`,
+  description: PLAYER_TAGLINE,
+  icons: { icon: LOGO_SRC, shortcut: LOGO_SRC, apple: LOGO_SRC },
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" className={`${inter.variable} ${montserrat.variable}`}>
+      <body>{children}</body>
+    </html>
+  );
+}

app/movie/[id]/page.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import PlayerScreen from "@/components/player/PlayerScreen";
+import { getById } from "@/lib/tmdb";
+import { PLAYER_NAME } from "@/lib/config";
+
+export const revalidate = 3600;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const item = await getById("movie", id).catch(() => null);
+  return { title: item?.title ? `${item.title} — ${PLAYER_NAME}` : PLAYER_NAME };
+}
+
+// /movie/{tmdbId}
+export default async function MoviePlayerPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<Record<string, string | undefined>>;
+}) {
+  const { id } = await params;
+  const sp = await searchParams;
+  return (
+    <PlayerScreen
+      type="movie"
+      id={id}
+      color={sp.color}
+      src={sp.src}
+      server={sp.server}
+      progress={sp.progress}
+      overlay={sp.overlay}
+      skipIntro={sp.skip_intro}
+    />
+  );
+}

app/not-found.tsx

@@ -0,0 +1,15 @@
+export default function NotFound() {
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        background: "#000",
+        color: "#fff",
+      }}
+    >
+      404 not found
+    </div>
+  );
+}

app/tv/[id]/[season]/[episode]/page.tsx

@@ -0,0 +1,46 @@
+import type { Metadata } from "next";
+import PlayerScreen from "@/components/player/PlayerScreen";
+import { getById } from "@/lib/tmdb";
+import { PLAYER_NAME } from "@/lib/config";
+
+export const revalidate = 3600;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string; season: string; episode: string }>;
+}): Promise<Metadata> {
+  const { id, season, episode } = await params;
+  const item = await getById("tv", id).catch(() => null);
+  if (!item?.title) return { title: PLAYER_NAME };
+  return { title: `${item.title} · S${season} E${episode} — ${PLAYER_NAME}` };
+}
+
+// /tv/{tmdbId}/{season}/{episode}
+export default async function TvPlayerPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string; season: string; episode: string }>;
+  searchParams: Promise<Record<string, string | undefined>>;
+}) {
+  const { id, season, episode } = await params;
+  const sp = await searchParams;
+  return (
+    <PlayerScreen
+      type="tv"
+      id={id}
+      season={season}
+      episode={episode}
+      color={sp.color}
+      src={sp.src}
+      server={sp.server}
+      progress={sp.progress}
+      nextEpisode={sp.nextEpisode}
+      episodeSelector={sp.episodeSelector}
+      autoplayNextEpisode={sp.autoplayNextEpisode}
+      overlay={sp.overlay}
+      skipIntro={sp.skip_intro}
+    />
+  );
+}

components/player/PlayerScreen.tsx

@@ -0,0 +1,95 @@
+import VideoPlayer from "@/components/player/VideoPlayer";
+import { getById, getLogo, getSeasonEpisodes, img } from "@/lib/tmdb";
+import { DEFAULT_ACCENT } from "@/lib/config";
+
+/**
+ * Full-screen player screen — /{type}/{id}. Renders TMDB metadata and plays the
+ * resolved stream (HLS / DASH / MP4). Supports `?src=` to play an arbitrary
+ * URL and `?color=` for the accent hex.
+ */
+export default async function PlayerScreen({
+  type,
+  id,
+  season,
+  episode,
+  color,
+  src,
+  server,
+  progress,
+  nextEpisode,
+  episodeSelector,
+  autoplayNextEpisode,
+  overlay,
+  skipIntro,
+}: {
+  type: "movie" | "tv";
+  id: string;
+  season?: string;
+  episode?: string;
+  color?: string;
+  src?: string;
+  server?: string;
+  progress?: string;
+  nextEpisode?: string;
+  episodeSelector?: string;
+  autoplayNextEpisode?: string;
+  overlay?: string;
+  skipIntro?: string;
+}) {
+  const truthy = (v?: string) => v === "true" || v === "1" || v === "yes";
+  const item = await getById(type === "tv" ? "tv" : "movie", id).catch(
+    () => null
+  );
+
+  const accent = (color || DEFAULT_ACCENT).replace("#", "");
+
+  const title = item?.title || `${type === "tv" ? "Show" : "Movie"} #${id}`;
+  const subtitle =
+    type === "tv" && season && episode ? `S${season} · E${episode}` : item?.year;
+
+  // Extra metadata for the idle overlay.
+  const logo = item ? await getLogo(type, id).catch(() => null) : null;
+  let runtime: number | undefined = item?.runtime ?? undefined;
+  let episodeTitle: string | undefined;
+  let overview = item?.overview;
+  if (type === "tv" && season && episode) {
+    const eps = await getSeasonEpisodes(id, parseInt(season, 10)).catch(() => []);
+    const ep = eps.find((e) => e.episode === parseInt(episode, 10));
+    if (ep) {
+      episodeTitle = ep.name;
+      runtime = ep.runtime ?? runtime;
+      if (ep.overview) overview = ep.overview;
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-[100] bg-black">
+      <VideoPlayer
+        src={src}
+        initialServer={server}
+        season={season}
+        episode={episode}
+        title={title}
+        year={subtitle}
+        overview={overview}
+        rating={item?.rating}
+        logo={logo}
+        runtime={runtime}
+        episodeTitle={episodeTitle}
+        poster={
+          img.backdrop(item?.backdrop ?? null, "original") ||
+          img.poster(item?.poster ?? null, "original")
+        }
+        color={accent}
+        type={type}
+        contentId={id}
+        startTime={progress ? parseInt(progress, 10) || 0 : 0}
+        nextEpisode={truthy(nextEpisode)}
+        episodeSelector={truthy(episodeSelector)}
+        autoplayNext={truthy(autoplayNextEpisode)}
+        overlay={truthy(overlay)}
+        skipIntro={truthy(skipIntro)}
+      />
+    </div>
+  );
+}

components/player/VideoPlayer.tsx

@@ -0,0 +1,2598 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { detectStreamKind } from "@/lib/constants";
+import { flagUrl } from "@/lib/subtitles/flags";
+import {
+  PlayIcon,
+  PauseIcon,
+  Rewind10Icon,
+  Forward10Icon,
+  VolumeHighIcon,
+  VolumeMutedIcon,
+  SubtitlesIcon,
+  SettingsIcon,
+  CloudIcon,
+  FullscreenIcon,
+  FullscreenExitIcon,
+  HeartIcon,
+  CheckIcon,
+  UploadIcon,
+  SlidersIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  NextEpisodeIcon,
+  ListIcon,
+  WarnIcon,
+  StarIcon,
+} from "./icons";
+
+export interface PlayerProps {
+  /** Direct stream URL (demo mode). Omit to resolve via the protected API. */
+  src?: string;
+  title?: string;
+  year?: string;
+  poster?: string | null;
+  /** hex without the leading # — matches the vidsuper ?color= param */
+  color?: string;
+  type?: "movie" | "tv";
+  contentId?: string | number;
+  autoPlay?: boolean;
+  season?: string | number;
+  episode?: string | number;
+  /** Provider to resolve first (defaults to "oneroom"). */
+  initialServer?: string;
+  overview?: string;
+  /** Start playback at this many seconds (?progress=). */
+  startTime?: number;
+  /** Show the next-episode button (?nextEpisode=). */
+  nextEpisode?: boolean;
+  /** Enable the season/episode picker (?episodeSelector=). */
+  episodeSelector?: boolean;
+  /** Auto-advance to the next episode on finish (?autoplayNextEpisode=). */
+  autoplayNext?: boolean;
+  /** Netflix-style overlay after 5s paused (?overlay=). */
+  overlay?: boolean;
+  /** Show a Skip Intro button over intro/recap segments (?skip_intro=). */
+  skipIntro?: boolean;
+  /** TMDB rating (0–10) shown on the idle overlay. */
+  rating?: number;
+  /** Title logo image (transparent PNG) shown on the idle overlay. */
+  logo?: string | null;
+  /** Runtime in minutes, shown on the idle overlay. */
+  runtime?: number;
+  /** Episode title (TV), shown on the idle overlay. */
+  episodeTitle?: string;
+}
+
+type Tab = "Quality" | "Subs" | "Servers" | "Speed";
+type Panel = Tab | "CaptionStyle" | "Episodes" | "SubSources";
+
+// ---- Subtitle appearance (persisted) --------------------------------------
+interface SubStyle {
+  size: number; // px
+  color: string;
+  opacity: number; // text opacity 0..1
+  bg: string; // background color, "none" to disable
+  bgOpacity: number; // 0..1
+  font: string; // css font-family stack
+  bold: boolean;
+  edge: "none" | "shadow" | "outline" | "glow";
+  position: number; // distance from bottom, % of player height (when controls hidden)
+}
+
+const MONTSERRAT_STACK =
+  'var(--font-montserrat), Montserrat, system-ui, "Segoe UI", sans-serif';
+
+const DEFAULT_SUB_STYLE: SubStyle = {
+  size: 28,
+  color: "#ffffff",
+  opacity: 1,
+  bg: "#000000",
+  bgOpacity: 0, // no background by default
+  font: MONTSERRAT_STACK,
+  bold: false,
+  edge: "shadow",
+  position: 8,
+};
+
+const SUB_FONTS: { label: string; value: string }[] = [
+  { label: "Montserrat", value: MONTSERRAT_STACK },
+  { label: "Sans", value: 'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif' },
+  { label: "Serif", value: 'Georgia, "Times New Roman", serif' },
+  { label: "Mono", value: '"SF Mono", "Roboto Mono", Menlo, Consolas, monospace' },
+  { label: "Rounded", value: '"Trebuchet MS", "Segoe UI", system-ui, sans-serif' },
+];
+
+const SUB_COLORS = ["#ffffff", "#ffe600", "#00e5ff", "#7CFC00", "#ff6b6b", "#ff8a3d", "#c77dff"];
+
+// Build the CSS for the rendered caption text from a SubStyle.
+function captionTextStyle(s: SubStyle): React.CSSProperties {
+  const edge: Record<SubStyle["edge"], string> = {
+    none: "none",
+    shadow: "0 2px 4px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7)",
+    outline:
+      "-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000",
+    glow: "0 0 8px rgba(0,0,0,1), 0 0 14px var(--accent)",
+  };
+  return {
+    fontSize: `${s.size}px`,
+    lineHeight: 1.3,
+    color: s.color,
+    opacity: s.opacity,
+    fontFamily: s.font,
+    fontWeight: s.bold ? 800 : 500,
+    textShadow: edge[s.edge],
+    backgroundColor:
+      s.bg === "none" ? "transparent" : hexWithAlpha(s.bg, s.bgOpacity),
+    padding: s.bg === "none" ? 0 : "0.1em 0.4em",
+    borderRadius: 6,
+    whiteSpace: "pre-line",
+    boxDecorationBreak: "clone",
+    WebkitBoxDecorationBreak: "clone",
+  } as React.CSSProperties;
+}
+
+function hexWithAlpha(hex: string, alpha: number): string {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.slice(0, 2), 16) || 0;
+  const g = parseInt(h.slice(2, 4), 16) || 0;
+  const b = parseInt(h.slice(4, 6), 16) || 0;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// Source providers are discovered at runtime from /api/sources/list, which is
+// driven by the lib/scraper registry — so adding a scraper file automatically
+// adds a server here.
+type Provider = {
+  id: string;
+  name: string;
+  label: string;
+  children?: { id: string; name: string }[];
+};
+
+const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+// Quality labels are usually a height ("1080") — show "1080p". Anything else
+// (a sub-source name like "MovieBox") is shown as-is.
+function qualityLabel(label: string): string {
+  return /^\d{3,4}$/.test(label) ? `${label}p` : label;
+}
+// Display name for a (possibly "parent:child") server id, using the loaded list.
+function serverName(id: string, providers: Provider[]): string {
+  const [pid, cid] = id.split(":");
+  const p = providers.find((x) => x.id === pid);
+  if (!p) return id;
+  if (!cid) return p.name;
+  const c = p.children?.find((x) => x.id === cid);
+  return c ? `${p.name} · ${c.name}` : p.name;
+}
+
+function fmt(t: number) {
+  if (!isFinite(t) || t < 0) t = 0;
+  const h = Math.floor(t / 3600);
+  const m = Math.floor((t % 3600) / 60);
+  const s = Math.floor(t % 60);
+  const mm = h > 0 ? String(m).padStart(2, "0") : String(m);
+  return `${h > 0 ? h + ":" : ""}${mm}:${String(s).padStart(2, "0")}`;
+}
+
+// Minutes -> "1h 23m" / "23m" for the idle overlay meta line.
+function fmtRuntime(min?: number | null) {
+  if (!min || min <= 0) return "";
+  const h = Math.floor(min / 60);
+  const m = min % 60;
+  return h > 0 ? `${h}h ${m}m` : `${m}m`;
+}
+
+function qualityBadge(height: number) {
+  if (height >= 2160) return "4K";
+  if (height >= 1080) return "Full HD";
+  if (height >= 720) return "HD";
+  return "";
+}
+
+// "en" + "English" -> "English - English", matching the player's subtitle list
+function subLabel(lang: string | undefined, name: string | undefined) {
+  let langName = "";
+  if (lang) {
+    try {
+      langName =
+        new Intl.DisplayNames(["en"], { type: "language" }).of(lang) || lang;
+    } catch {
+      langName = lang;
+    }
+  }
+  const clean = (name || "").trim();
+  if (langName && clean && langName.toLowerCase() !== clean.toLowerCase())
+    return `${langName} - ${clean}`;
+  return clean || langName || "Subtitle";
+}
+
+export default function VideoPlayer({
+  src,
+  title,
+  year,
+  poster,
+  color = "ef4444",
+  type = "movie",
+  contentId,
+  autoPlay = false,
+  season,
+  episode,
+  initialServer,
+  overview,
+  startTime = 0,
+  nextEpisode = false,
+  episodeSelector = false,
+  autoplayNext = false,
+  overlay = false,
+  skipIntro = false,
+  rating,
+  logo,
+  runtime,
+  episodeTitle,
+}: PlayerProps) {
+  const accent = `#${color.replace("#", "")}`;
+
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const hlsRef = useRef<any>(null);
+  const dashRef = useRef<any>(null);
+  const engineRef = useRef<"hls" | "dash" | "native">("native");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const [started, setStarted] = useState(autoPlay);
+  const [playing, setPlaying] = useState(false);
+  const [buffering, setBuffering] = useState(false);
+  const [current, setCurrent] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [buffered, setBuffered] = useState(0);
+  const [volume, setVolume] = useState(1);
+  const [muted, setMuted] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [controlsVisible, setControlsVisible] = useState(true);
+  const [panel, setPanel] = useState<Panel | null>(null);
+  const [hoverTime, setHoverTime] = useState<{ x: number; t: number } | null>(
+    null
+  );
+  const [skipFlash, setSkipFlash] = useState<"fwd" | "back" | null>(null);
+
+  // episodes / next-episode (TV)
+  const isSeries = type === "tv";
+  const curSeason = parseInt(String(season ?? "0"), 10) || 0;
+  const curEpisode = parseInt(String(episode ?? "0"), 10) || 0;
+  const [seasonsInfo, setSeasonsInfo] = useState<
+    { season: number; episodeCount: number; name: string }[]
+  >([]);
+  const [pickerSeason, setPickerSeason] = useState(curSeason || 1);
+  const [pickerEpisodes, setPickerEpisodes] = useState<
+    { episode: number; name: string; still: string | null; overview: string }[]
+  >([]);
+  // Netflix-style idle overlay
+  const [showOverlay, setShowOverlay] = useState(false);
+  const overlayTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const didInitialSeekRef = useRef(false);
+  // Always points at the latest armOverlay (poke is defined before it).
+  const armOverlayRef = useRef<() => void>(() => {});
+
+  // skip intro / recap (?skip_intro=)
+  type SkipSeg = { start: number; end: number; label: string };
+  const [skipSegments, setSkipSegments] = useState<SkipSeg[]>([]);
+  const [activeSkip, setActiveSkip] = useState<SkipSeg | null>(null);
+
+  // source switching: show a loading curtain + remember which servers failed.
+  const [switching, setSwitching] = useState(false);
+  const [failedServers, setFailedServers] = useState<string[]>([]);
+
+  // selections
+  const [levels, setLevels] = useState<{ height: number; index: number }[]>([]);
+  const [currentLevel, setCurrentLevel] = useState(-1); // -1 = auto
+  const [speed, setSpeed] = useState(1);
+  const [serverId, setServerId] = useState(initialServer || "oneroom");
+  const [audioTracks, setAudioTracks] = useState<
+    { id: number; name: string }[]
+  >([]);
+  const [currentAudio, setCurrentAudio] = useState(0);
+  // Source providers, discovered from the lib/scraper registry at runtime.
+  const [providers, setProviders] = useState<Provider[]>([]);
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/sources/list")
+      .then((r) => r.json())
+      .then((d) => {
+        if (!cancelled && Array.isArray(d.sources)) setProviders(d.sources);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  // Which parent source's sub-sources are shown (in the SubSources sub-panel).
+  const [subSourceParent, setSubSourceParent] = useState<string | null>(null);
+  // Favorited servers (persisted) — these take priority when resolving sources.
+  const [favorites, setFavorites] = useState<string[]>([]);
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem("vc-fav-servers");
+      if (raw) setFavorites(JSON.parse(raw));
+    } catch {}
+  }, []);
+  const [subsOn, setSubsOn] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [subTracks, setSubTracks] = useState<
+    { id: number; label: string; builtIn: boolean }[]
+  >([]);
+  const [activeSub, setActiveSub] = useState(-1); // -1 = off
+
+  // Custom subtitle rendering: we keep the active track in "hidden" mode (so the
+  // browser parses cues but doesn't draw them) and render them ourselves into a
+  // floating overlay that sits above the controls and is fully styleable.
+  const [cueText, setCueText] = useState("");
+  const [subStyle, setSubStyle] = useState<SubStyle>(DEFAULT_SUB_STYLE);
+  const cueTrackRef = useRef<TextTrack | null>(null);
+  // Subtitle delay (seconds): positive = subs appear later, negative = earlier.
+  const [subDelay, setSubDelay] = useState(0);
+  const subDelayRef = useRef(0);
+  useEffect(() => {
+    subDelayRef.current = subDelay;
+  }, [subDelay]);
+
+  // Load persisted caption style once on mount.
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem("vc-sub-style");
+      if (raw) setSubStyle({ ...DEFAULT_SUB_STYLE, ...JSON.parse(raw) });
+    } catch {}
+  }, []);
+  const updateSubStyle = (patch: Partial<SubStyle>) =>
+    setSubStyle((prev) => {
+      const next = { ...prev, ...patch };
+      try {
+        localStorage.setItem("vc-sub-style", JSON.stringify(next));
+      } catch {}
+      return next;
+    });
+
+  // source resolution
+  const [resolvedSrc, setResolvedSrc] = useState<string | null>(null);
+  const [resolvedKind, setResolvedKind] = useState<
+    "hls" | "dash" | "native" | null
+  >(null);
+  const [resolving, setResolving] = useState(false);
+  const activeSrc = src || resolvedSrc;
+
+  // all sources from the API (for multi-quality switching) + Wyzie subtitles
+  type ApiSource = { file: string; label: string; type: string };
+  type ApiSub = {
+    url: string;
+    display: string;
+    language: string;
+    hi?: boolean;
+    source?: string;
+    /** Flag image URL supplied by the source (Wyzie); else derived. */
+    flag?: string;
+  };
+  const [resolvedSources, setResolvedSources] = useState<ApiSource[]>([]);
+  const [qualityIndex, setQualityIndex] = useState(0);
+  const [apiSubs, setApiSubs] = useState<ApiSub[]>([]);
+  const [activeApiSub, setActiveApiSub] = useState(-1);
+  // Once the user picks/clears a subtitle, stop auto-loading the default one.
+  const userPickedSubRef = useRef(false);
+  const pendingSeekRef = useRef<number | null>(null);
+  const wasPlayingRef = useRef(false);
+  // Set when the user has asked to play — the source effect starts playback as
+  // soon as the stream is ready (regardless of autoPlay).
+  const wantPlayRef = useRef(false);
+  // Servers already attempted for this title, so failover doesn't loop forever.
+  const triedServersRef = useRef<Set<string>>(new Set());
+  // Always points at the latest failover handler (the source effect captures a
+  // stale closure otherwise).
+  const failoverRef = useRef<() => void>(() => {});
+  // Resolution order: favorited servers first (in provider order), then the
+  // rest. Drives both the initial pick and the failover sequence. Falls back to
+  // the initial server until the provider list has loaded.
+  const serverOrder = useMemo(() => {
+    const ids = providers.map((p) => p.id);
+    if (!ids.length) return initialServer ? [initialServer] : [];
+    const favs = ids.filter((id) => favorites.includes(id));
+    const rest = ids.filter((id) => !favorites.includes(id));
+    return [...favs, ...rest];
+  }, [providers, favorites, initialServer]);
+
+  /* ---------------- source loading (HLS / DASH / MP4) ---------------- */
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !started || !activeSrc) return;
+    const src = activeSrc;
+    let destroyed = false;
+    const kind = resolvedKind || detectStreamKind(src);
+    engineRef.current = kind;
+    setLoadError(null);
+
+    // Begin playback once ready if autoPlay is set or the user pressed play.
+    const playIfWanted = () => {
+      if (autoPlay || wantPlayRef.current) {
+        wantPlayRef.current = false;
+        video!.play().catch(() => {});
+      }
+    };
+
+    const dedupeByHeight = (
+      arr: { height: number; index: number }[]
+    ) => {
+      const byHeight = new Map<number, number>();
+      arr.forEach(({ height, index }) => {
+        if (height && !byHeight.has(height)) byHeight.set(height, index);
+      });
+      return Array.from(byHeight, ([height, index]) => ({ height, index })).sort(
+        (a, b) => b.height - a.height
+      );
+    };
+
+    async function setupHls() {
+      // Prefer hls.js when supported — it gives us quality, ABR and subtitle
+      // track control. Only fall back to native HLS (Safari / iOS) otherwise.
+      // NOTE: some Chrome builds report canPlayType("…mpegurl") === "maybe",
+      // so we must check Hls.isSupported() first rather than trusting that.
+      const Hls = (await import("hls.js")).default;
+      if (destroyed) return;
+      if (!Hls.isSupported()) {
+        if (video!.canPlayType("application/vnd.apple.mpegurl")) {
+          video!.src = src;
+          video!.addEventListener("loadedmetadata", readNativeTextTracks);
+          video!.textTracks.addEventListener?.("addtrack", readNativeTextTracks);
+          video!.addEventListener("canplay", playIfWanted, { once: true });
+          video!.addEventListener("error", () => failoverRef.current());
+          return;
+        }
+        setLoadError("HLS is not supported in this browser.");
+        return;
+      }
+      const hls = new Hls({ enableWorker: true, lowLatencyMode: true });
+      hlsRef.current = hls;
+      hls.loadSource(src);
+      hls.attachMedia(video!);
+      const readSubs = (tracks: any[]) => {
+        setSubTracks(
+          (tracks || []).map((t: any, id: number) => ({
+            id,
+            label: subLabel(t.lang || t.language, t.name),
+            builtIn: true,
+          }))
+        );
+      };
+      hls.on(Hls.Events.MANIFEST_PARSED, (_e: any, data: any) => {
+        setLevels(
+          dedupeByHeight(hls.levels.map((l, index) => ({ height: l.height, index })))
+        );
+        // The parsed manifest carries the full alternate-track lists.
+        readSubs(data?.subtitleTracks || hls.subtitleTracks);
+        playIfWanted();
+      });
+      hls.on(Hls.Events.LEVEL_SWITCHED, (_e, d) =>
+        setCurrentLevel(hls.autoLevelEnabled ? -1 : d.level)
+      );
+      hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (_e: any, data: any) =>
+        readSubs(data?.subtitleTracks || hls.subtitleTracks)
+      );
+      const readAudio = () => {
+        const tracks = (hls.audioTracks || []).map((t: any, id: number) => ({
+          id,
+          name: t.name || t.lang || `Audio ${id + 1}`,
+        }));
+        setAudioTracks(tracks.length > 1 ? tracks : []);
+        setCurrentAudio(hls.audioTrack ?? 0);
+      };
+      hls.on(Hls.Events.MANIFEST_PARSED, readAudio);
+      hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, readAudio);
+      hls.on(Hls.Events.AUDIO_TRACK_SWITCHED, (_e: any, d: any) =>
+        setCurrentAudio(d.id)
+      );
+      // hls.js renders its own subtitle track; keep its display off by default
+      hls.subtitleDisplay = false;
+      let netRetries = 0;
+      hls.on(Hls.Events.ERROR, (_e, data) => {
+        if (data.fatal) {
+          if (data.type === "networkError" && netRetries++ < 2) hls.startLoad();
+          else if (data.type === "mediaError") hls.recoverMediaError();
+          // Unrecoverable — give up on this server and fail over to the next.
+          else failoverRef.current();
+        }
+      });
+    }
+
+    async function setupDash() {
+      const dashjs = await import("dashjs");
+      if (destroyed) return;
+      const player = dashjs.MediaPlayer().create();
+      dashRef.current = player;
+      player.initialize(video!, src, autoPlay || wantPlayRef.current);
+      if (wantPlayRef.current) wantPlayRef.current = false;
+      player.on("streamInitialized", () => {
+        try {
+          const list = player.getBitrateInfoListFor("video") || [];
+          setLevels(
+            dedupeByHeight(
+              list.map((b: any) => ({ height: b.height, index: b.qualityIndex }))
+            )
+          );
+        } catch {}
+        // dash.js exposes subtitle tracks on the media element
+        setTimeout(() => {
+          const tt = video!.textTracks;
+          const out: { id: number; label: string; builtIn: boolean }[] = [];
+          for (let i = 0; i < tt.length; i++) {
+            const t = tt[i];
+            if (t.kind === "subtitles" || t.kind === "captions") {
+              out.push({ id: i, label: subLabel(t.language, t.label), builtIn: true });
+              t.mode = "disabled";
+            }
+          }
+          setSubTracks(out);
+          // multi-audio (dub) tracks
+          try {
+            const at = player.getTracksFor("audio") || [];
+            const audio = at.map((t: any, i: number) => ({
+              id: typeof t.index === "number" ? t.index : i,
+              name:
+                (t.labels && t.labels[0]?.text) ||
+                t.lang ||
+                `Audio ${i + 1}`,
+            }));
+            setAudioTracks(audio.length > 1 ? audio : []);
+          } catch {}
+        }, 300);
+      });
+      player.on("error", () => failoverRef.current());
+    }
+
+    function readNativeTextTracks() {
+      const tt = video!.textTracks;
+      const list: { id: number; label: string; builtIn: boolean }[] = [];
+      for (let i = 0; i < tt.length; i++) {
+        const t = tt[i];
+        if (t.kind === "subtitles" || t.kind === "captions") {
+          list.push({
+            id: i,
+            label: subLabel(t.language, t.label),
+            builtIn: true,
+          });
+          t.mode = "disabled";
+        }
+      }
+      setSubTracks(list);
+    }
+
+    function setupNative() {
+      // Progressive MP4 / WebM / etc.
+      video!.src = src;
+      const onErr = () => failoverRef.current();
+      video!.addEventListener("error", onErr);
+      video!.textTracks.addEventListener?.("addtrack", readNativeTextTracks);
+      video!.addEventListener("loadedmetadata", readNativeTextTracks);
+      video!.addEventListener("canplay", playIfWanted, { once: true });
+    }
+
+    (async () => {
+      try {
+        if (kind === "hls") await setupHls();
+        else if (kind === "dash") await setupDash();
+        else setupNative();
+      } catch (e) {
+        if (!destroyed) setLoadError("Failed to load the player.");
+      }
+    })();
+
+    return () => {
+      destroyed = true;
+      try {
+        hlsRef.current?.destroy?.();
+      } catch {}
+      try {
+        dashRef.current?.reset?.();
+      } catch {}
+      hlsRef.current = null;
+      dashRef.current = null;
+    };
+  }, [activeSrc, resolvedKind, started, autoPlay]);
+
+  /* ---------------- episodes / next-episode ---------------- */
+  // Navigate the iframe to another episode, preserving every query param so the
+  // host's feature flags (color, nextEpisode, etc.) carry over.
+  const goToEpisode = useCallback(
+    (s: number, e: number) => {
+      if (typeof window === "undefined" || contentId == null) return;
+      const qs = window.location.search;
+      window.location.href = `/tv/${contentId}/${s}/${e}${qs}`;
+    },
+    [contentId]
+  );
+
+  // Compute the next episode (rolls into the next season for TV when known).
+  const nextEpisodeTarget = useMemo((): { s: number; e: number } | null => {
+    if (!isSeries || !curEpisode) return null;
+    const info = seasonsInfo.find((x) => x.season === curSeason);
+    if (info && curEpisode >= info.episodeCount) {
+      const hasNextSeason = seasonsInfo.some((x) => x.season === curSeason + 1);
+      if (hasNextSeason) return { s: curSeason + 1, e: 1 };
+      return null; // series finished
+    }
+    return { s: curSeason, e: curEpisode + 1 };
+  }, [isSeries, type, curSeason, curEpisode, seasonsInfo]);
+
+  // Fetch the TV season list when episode features are on.
+  useEffect(() => {
+    if (type !== "tv" || contentId == null) return;
+    if (!nextEpisode && !episodeSelector && !autoplayNext) return;
+    let cancelled = false;
+    fetch(`/api/tmdb?action=seasons&type=tv&id=${contentId}`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (!cancelled) setSeasonsInfo(d.seasons || []);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [type, contentId, nextEpisode, episodeSelector, autoplayNext]);
+
+  // Lazy-load the episode list for the picker's selected season.
+  useEffect(() => {
+    if (panel !== "Episodes" || type !== "tv" || contentId == null) return;
+    let cancelled = false;
+    setPickerEpisodes([]);
+    fetch(`/api/tmdb?action=episodes&type=tv&id=${contentId}&season=${pickerSeason}`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (!cancelled) setPickerEpisodes(d.episodes || []);
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [panel, pickerSeason, type, contentId]);
+
+  /* ---------------- parent-window progress events ---------------- */
+  // Posts playback events to the embedding page (documented postMessage API).
+  const postEvent = useCallback(
+    (eventType: string) => {
+      if (typeof window === "undefined" || window.parent === window) return;
+      const v = videoRef.current;
+      if (!v) return;
+      try {
+        window.parent.postMessage(
+          JSON.stringify({
+            type: eventType,
+            id: contentId,
+            mediaType: type,
+            progress: Math.floor(v.currentTime || 0),
+            duration: Math.floor(v.duration || 0),
+            timestamp: Date.now(),
+            season: curSeason || undefined,
+            episode: curEpisode || undefined,
+          }),
+          "*"
+        );
+      } catch {}
+    },
+    [contentId, type, curSeason, curEpisode]
+  );
+
+  /* ---------------- idle overlay (?overlay=) ---------------- */
+  // Show the overlay instantly whenever playback is paused; hide it otherwise.
+  const armOverlay = useCallback(() => {
+    if (!overlay) return;
+    clearTimeout(overlayTimer.current);
+    const v = videoRef.current;
+    setShowOverlay(!!v && v.paused && started);
+  }, [overlay, started]);
+  armOverlayRef.current = armOverlay;
+
+  /* ---------------- skip intro / recap (?skip_intro=) ---------------- */
+  useEffect(() => {
+    if (!skipIntro || contentId == null || !duration) return;
+    let cancelled = false;
+    const qs = new URLSearchParams({
+      id: String(contentId),
+      duration_ms: String(Math.floor(duration * 1000)),
+    });
+    if (isSeries) {
+      if (curSeason) qs.set("season", String(curSeason));
+      if (curEpisode) qs.set("episode", String(curEpisode));
+    }
+    fetch(`/api/introdb?${qs.toString()}`)
+      .then((r) => r.json())
+      .then((d) => {
+        if (cancelled) return;
+        const segs: SkipSeg[] = [];
+        const add = (arr: any[], label: string) =>
+          (arr || []).forEach((x) =>
+            segs.push({
+              start: (x.start_ms ?? 0) / 1000,
+              // Credits often have a null end (runs to the finish) — fall back
+              // to the video duration so the segment is valid.
+              end: x.end_ms == null ? duration : x.end_ms / 1000,
+              label,
+            })
+          );
+        add(d.intro, "Skip Intro");
+        add(d.recap, "Skip Recap");
+        add(d.credits, "Skip Credits");
+        setSkipSegments(segs.filter((s) => s.end > s.start));
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, [skipIntro, contentId, duration, isSeries, curSeason, curEpisode]);
+
+  // Which skip segment (if any) the playhead is currently inside.
+  useEffect(() => {
+    if (!skipSegments.length) {
+      setActiveSkip(null);
+      return;
+    }
+    const seg = skipSegments.find(
+      (s) => current >= s.start && current < s.end - 0.3
+    );
+    setActiveSkip(seg || null);
+  }, [current, skipSegments]);
+
+  /* ---------------- video events ---------------- */
+  useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    const onTime = () => {
+      setCurrent(v.currentTime);
+      // hls.js can disable foreign text tracks during setup; keep the bound
+      // caption track in "hidden" mode and mirror its cues into our overlay.
+      const tr = cueTrackRef.current;
+      if (tr) {
+        if (tr.mode === "disabled") tr.mode = "hidden";
+        renderCues();
+      }
+    };
+    const onDur = () => setDuration(v.duration || 0);
+    const onMeta = () => {
+      setDuration(v.duration || 0);
+      // ?progress= — start at the given second (once, on first load).
+      if (
+        !didInitialSeekRef.current &&
+        startTime > 0 &&
+        isFinite(v.duration) &&
+        pendingSeekRef.current == null
+      ) {
+        try {
+          v.currentTime = Math.min(startTime, v.duration - 1);
+        } catch {}
+        didInitialSeekRef.current = true;
+      }
+      // restore position after a quality switch
+      if (pendingSeekRef.current != null) {
+        try {
+          v.currentTime = pendingSeekRef.current;
+        } catch {}
+        pendingSeekRef.current = null;
+        if (wasPlayingRef.current) v.play().catch(() => {});
+      }
+    };
+    const onPlay = () => setPlaying(true);
+    const onPause = () => setPlaying(false);
+    const onWaiting = () => setBuffering(true);
+    const onPlaying = () => setBuffering(false);
+    const onProgress = () => {
+      if (v.buffered.length) setBuffered(v.buffered.end(v.buffered.length - 1));
+    };
+    const onVol = () => {
+      setVolume(v.volume);
+      setMuted(v.muted);
+    };
+    v.addEventListener("timeupdate", onTime);
+    v.addEventListener("durationchange", onDur);
+    v.addEventListener("loadedmetadata", onMeta);
+    v.addEventListener("play", onPlay);
+    v.addEventListener("pause", onPause);
+    v.addEventListener("waiting", onWaiting);
+    v.addEventListener("playing", onPlaying);
+    v.addEventListener("progress", onProgress);
+    v.addEventListener("volumechange", onVol);
+    return () => {
+      v.removeEventListener("timeupdate", onTime);
+      v.removeEventListener("durationchange", onDur);
+      v.removeEventListener("loadedmetadata", onMeta);
+      v.removeEventListener("play", onPlay);
+      v.removeEventListener("pause", onPause);
+      v.removeEventListener("waiting", onWaiting);
+      v.removeEventListener("playing", onPlaying);
+      v.removeEventListener("progress", onProgress);
+      v.removeEventListener("volumechange", onVol);
+    };
+  }, [started]);
+
+  /* playback events: parent postMessage + idle overlay + autoplay-next */
+  useEffect(() => {
+    const v = videoRef.current;
+    if (!v || !started) return;
+    let lastPost = 0;
+    const onTimePost = () => {
+      const now = Date.now();
+      if (now - lastPost > 2000) {
+        lastPost = now;
+        postEvent("timeupdate");
+      }
+    };
+    const onPlay = () => {
+      postEvent("play");
+      setShowOverlay(false);
+      clearTimeout(overlayTimer.current);
+    };
+    const onPause = () => {
+      postEvent("pause");
+      armOverlay();
+    };
+    const onEnded = () => {
+      postEvent("ended");
+      if (autoplayNext && nextEpisodeTarget) {
+        goToEpisode(nextEpisodeTarget.s, nextEpisodeTarget.e);
+      }
+    };
+    v.addEventListener("timeupdate", onTimePost);
+    v.addEventListener("play", onPlay);
+    v.addEventListener("pause", onPause);
+    v.addEventListener("ended", onEnded);
+    return () => {
+      v.removeEventListener("timeupdate", onTimePost);
+      v.removeEventListener("play", onPlay);
+      v.removeEventListener("pause", onPause);
+      v.removeEventListener("ended", onEnded);
+      clearTimeout(overlayTimer.current);
+    };
+  }, [started, postEvent, armOverlay, autoplayNext, nextEpisodeTarget, goToEpisode]);
+
+  /* ---------------- fullscreen ---------------- */
+  useEffect(() => {
+    const onFs = () => setFullscreen(!!document.fullscreenElement);
+    document.addEventListener("fullscreenchange", onFs);
+    return () => document.removeEventListener("fullscreenchange", onFs);
+  }, []);
+
+  const toggleFullscreen = useCallback(() => {
+    if (document.fullscreenElement) document.exitFullscreen();
+    else wrapRef.current?.requestFullscreen?.().catch(() => {});
+  }, []);
+
+  /* ---------------- controls ---------------- */
+  // Single attempt against one server. Returns true only if it yields a
+  // playable source. Records the server so failover can skip it next time.
+  const attemptResolve = useCallback(
+    async (sv: string): Promise<boolean> => {
+      if (contentId == null) return false;
+      triedServersRef.current.add(sv);
+      setResolving(true);
+      try {
+        const qs = new URLSearchParams({ type, id: String(contentId), server: sv });
+        if (season) qs.set("season", String(season));
+        if (episode) qs.set("episode", String(episode));
+
+        const res = await fetch(`/api/sources?${qs.toString()}`);
+        if (!res.ok) throw new Error(String(res.status));
+        const json = await res.json();
+        const list: ApiSource[] = json.sources || [];
+        const best = list[0];
+        if (!best?.file) throw new Error("no sources");
+        setAudioTracks([]);
+        setCurrentAudio(0);
+        setResolvedSources(list);
+        setQualityIndex(0);
+        setApiSubs(json.subtitles || []);
+        setResolvedSrc(best.file);
+        setResolvedKind(best.type === "mp4" ? "native" : (best.type as any));
+        setFailedServers((f) => f.filter((x) => x !== sv)); // recovered
+        return true;
+      } catch {
+        setFailedServers((f) => (f.includes(sv) ? f : [...f, sv]));
+        return false;
+      } finally {
+        setResolving(false);
+      }
+    },
+    [contentId, type, season, episode]
+  );
+
+  // Resolve `sv`, and if it fails, auto-advance through the remaining servers
+  // until one works or all are exhausted.
+  const resolveSources = useCallback(
+    async (sv: string = serverId, force = false): Promise<boolean> => {
+      if (resolvedSrc && !force) return true;
+      if (contentId == null) return false;
+      setLoadError(null);
+      let cur = sv;
+      for (;;) {
+        if (await attemptResolve(cur)) {
+          setServerId(cur);
+          return true;
+        }
+        const next = serverOrder.find((s) => !triedServersRef.current.has(s));
+        if (!next) {
+          setLoadError("Couldn't find a playable source on any server.");
+          return false;
+        }
+        cur = next;
+      }
+    },
+    [serverId, resolvedSrc, contentId, attemptResolve, serverOrder]
+  );
+
+  // Called when a resolved stream fails to actually play — drop it and fail
+  // over to the next untried server, preserving the user's intent to play.
+  const handlePlaybackFailure = useCallback(() => {
+    // The current stream failed to play — flag this server in the menu.
+    setFailedServers((f) => (f.includes(serverId) ? f : [...f, serverId]));
+    const next = serverOrder.find((s) => !triedServersRef.current.has(s));
+    if (!next) {
+      setLoadError("This stream could not be played.");
+      return;
+    }
+    const v = videoRef.current;
+    if (v) {
+      pendingSeekRef.current = v.currentTime;
+      wasPlayingRef.current = !v.paused;
+      try {
+        v.pause();
+      } catch {}
+    }
+    wantPlayRef.current = true;
+    setSwitching(true);
+    setServerId(next);
+    setResolvedSrc(null);
+    void resolveSources(next, true).finally(() => setSwitching(false));
+  }, [resolveSources, serverOrder, serverId]);
+  failoverRef.current = handlePlaybackFailure;
+
+  // Switch source provider — pause, show a loading curtain, then re-resolve and
+  // keep the playback position.
+  const switchServer = (id: string) => {
+    if (id === serverId) {
+      setPanel(null);
+      return;
+    }
+    const v = videoRef.current;
+    if (v) {
+      pendingSeekRef.current = v.currentTime;
+      wasPlayingRef.current = !v.paused;
+      wantPlayRef.current = !v.paused;
+      try {
+        v.pause();
+      } catch {}
+    }
+    setServerId(id);
+    setPanel(null);
+    setSwitching(true);
+    // Manual switch starts a fresh failover cycle from the chosen server.
+    triedServersRef.current = new Set();
+    void resolveSources(id, true).finally(() => setSwitching(false));
+  };
+
+  // Switch the embedded audio track (multi-dub streams).
+  const switchAudio = (id: number) => {
+    if (engineRef.current === "hls" && hlsRef.current) {
+      hlsRef.current.audioTrack = id;
+    } else if (engineRef.current === "dash" && dashRef.current) {
+      try {
+        const tracks = dashRef.current.getTracksFor("audio") || [];
+        const t = tracks.find((x: any) => x.index === id) || tracks[id];
+        if (t) dashRef.current.setCurrentTrack(t);
+      } catch {}
+    }
+    setCurrentAudio(id);
+  };
+
+  const start = useCallback(async () => {
+    if (started) return;
+    // User pressed play — begin playback as soon as the source is ready.
+    wantPlayRef.current = true;
+    if (src || resolvedSrc) {
+      setStarted(true);
+      return;
+    }
+    // Start from the highest-priority server (favorited first).
+    if (await resolveSources(serverOrder[0])) setStarted(true);
+    else wantPlayRef.current = false;
+  }, [started, src, resolvedSrc, resolveSources, serverOrder]);
+
+  const togglePlay = useCallback(() => {
+    const v = videoRef.current;
+    if (!started) {
+      void start();
+      return;
+    }
+    if (!v) return;
+    if (v.paused) v.play().catch(() => {});
+    else v.pause();
+  }, [started, start]);
+
+  const skip = useCallback((sec: number) => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.currentTime = Math.min(
+      Math.max(0, v.currentTime + sec),
+      v.duration || Infinity
+    );
+    setSkipFlash(sec > 0 ? "fwd" : "back");
+    setTimeout(() => setSkipFlash(null), 450);
+  }, []);
+
+  const toggleMute = useCallback(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.muted = !v.muted;
+  }, []);
+
+  const onSeek = useCallback(
+    (clientX: number, el: HTMLElement) => {
+      const v = videoRef.current;
+      if (!v || !duration) return;
+      const rect = el.getBoundingClientRect();
+      const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+      v.currentTime = ratio * duration;
+    },
+    [duration]
+  );
+
+  /* auto-hide controls */
+  const poke = useCallback(() => {
+    setControlsVisible(true);
+    clearTimeout(hideTimer.current);
+    if (playing && !panel) {
+      hideTimer.current = setTimeout(() => setControlsVisible(false), 3000);
+    }
+    // Reset the idle-overlay countdown on any activity.
+    armOverlayRef.current();
+  }, [playing, panel]);
+
+  useEffect(() => {
+    poke();
+  }, [playing, panel, poke]);
+
+  /* keyboard */
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (!started) return;
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      switch (e.key) {
+        case " ":
+        case "k":
+          e.preventDefault();
+          togglePlay();
+          break;
+        case "ArrowLeft":
+          skip(-10);
+          break;
+        case "ArrowRight":
+          skip(10);
+          break;
+        case "ArrowUp": {
+          const v = videoRef.current;
+          if (v) v.volume = Math.min(1, v.volume + 0.1);
+          break;
+        }
+        case "ArrowDown": {
+          const v = videoRef.current;
+          if (v) v.volume = Math.max(0, v.volume - 0.1);
+          break;
+        }
+        case "f":
+          toggleFullscreen();
+          break;
+        case "m":
+          toggleMute();
+          break;
+        case "Escape":
+          setPanel(null);
+          break;
+      }
+      poke();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [started, togglePlay, skip, toggleFullscreen, toggleMute, poke]);
+
+  const applyLevel = (idx: number) => {
+    if (engineRef.current === "hls" && hlsRef.current) {
+      hlsRef.current.currentLevel = idx; // -1 = auto
+    } else if (engineRef.current === "dash" && dashRef.current) {
+      const player = dashRef.current;
+      if (idx === -1) {
+        player.updateSettings({
+          streaming: { abr: { autoSwitchBitrate: { video: true } } },
+        });
+      } else {
+        player.updateSettings({
+          streaming: { abr: { autoSwitchBitrate: { video: false } } },
+        });
+        player.setQualityFor("video", idx);
+      }
+    }
+    setCurrentLevel(idx);
+  };
+
+  const applySpeed = (s: number) => {
+    if (videoRef.current) videoRef.current.playbackRate = s;
+    setSpeed(s);
+  };
+
+  // Swap to a different quality file, preserving playback position + state.
+  const switchQuality = (i: number) => {
+    const s = resolvedSources[i];
+    if (!s) return;
+    const v = videoRef.current;
+    if (v) {
+      pendingSeekRef.current = v.currentTime;
+      wasPlayingRef.current = !v.paused;
+    }
+    setQualityIndex(i);
+    setResolvedKind(s.type === "mp4" ? "native" : (s.type as any));
+    setResolvedSrc(s.file); // triggers the source-loading effect
+    setPanel(null);
+  };
+
+  // ---- custom cue rendering ----
+  // Read the active cues off the bound track into our overlay. Stable across
+  // renders (reads the ref), so it can be added/removed as an event listener.
+  const renderCues = useCallback(() => {
+    const tr = cueTrackRef.current;
+    if (!tr) {
+      setCueText("");
+      return;
+    }
+    const delay = subDelayRef.current;
+    // With no delay, the browser's activeCues are authoritative (cheap). With a
+    // delay we scan all cues against (currentTime − delay) ourselves.
+    let active: (TextTrackCue | VTTCue)[] = [];
+    if (delay !== 0 && tr.cues) {
+      const t = (videoRef.current?.currentTime || 0) - delay;
+      for (let i = 0; i < tr.cues.length; i++) {
+        const c = tr.cues[i];
+        if (c.startTime <= t && t <= c.endTime) active.push(c);
+      }
+    } else if (tr.activeCues) {
+      active = Array.from(tr.activeCues);
+    }
+    if (active.length === 0) {
+      setCueText("");
+      return;
+    }
+    let txt = "";
+    for (let i = 0; i < active.length; i++) {
+      const c = active[i] as VTTCue;
+      txt += (i ? "\n" : "") + (c.text || "");
+    }
+    // strip simple VTT/SRT tags; keep the text + line breaks.
+    setCueText(txt.replace(/<[^>]+>/g, ""));
+  }, []);
+
+  // Bind a TextTrack for custom rendering: keep it "hidden" (parsed, not drawn
+  // natively) and mirror its cues into our overlay.
+  const bindTrack = useCallback(
+    (track: TextTrack | null) => {
+      if (cueTrackRef.current && cueTrackRef.current !== track) {
+        cueTrackRef.current.removeEventListener("cuechange", renderCues);
+      }
+      cueTrackRef.current = track;
+      if (track) {
+        track.mode = "hidden";
+        track.removeEventListener("cuechange", renderCues);
+        track.addEventListener("cuechange", renderCues);
+      }
+      renderCues();
+    },
+    [renderCues]
+  );
+
+  // Safety net: while subtitles are on, keep the bound track in "hidden" mode
+  // (some engines flip it back to "disabled") and mirror its cues into our
+  // overlay on a short interval. This guarantees captions render even when
+  // paused or when a `cuechange`/`timeupdate` event is missed.
+  useEffect(() => {
+    if (!subsOn) return;
+    const sync = () => {
+      const tr = cueTrackRef.current;
+      if (tr && tr.mode === "disabled") tr.mode = "hidden";
+      renderCues();
+    };
+    sync();
+    const interval = setInterval(sync, 300);
+    return () => clearInterval(interval);
+  }, [subsOn, activeApiSub, activeSub, subDelay, renderCues]);
+
+  const subsOff = () => {
+    const v = videoRef.current;
+    if (engineRef.current === "hls" && hlsRef.current) {
+      hlsRef.current.subtitleDisplay = false;
+      hlsRef.current.subtitleTrack = -1;
+    }
+    if (v) {
+      for (let i = 0; i < v.textTracks.length; i++) v.textTracks[i].mode = "disabled";
+      v.querySelectorAll("track[data-api]").forEach((t) => t.remove());
+    }
+    bindTrack(null);
+    setActiveSub(-1);
+    setActiveApiSub(-1);
+    setSubsOn(false);
+    userPickedSubRef.current = true;
+  };
+
+  // Built-in track (HLS/DASH/native manifest subtitle).
+  const selectSub = (id: number) => {
+    const v = videoRef.current;
+    if (!v) return;
+    v.querySelectorAll("track[data-api]").forEach((t) => t.remove());
+    if (engineRef.current === "hls" && hlsRef.current) {
+      // Let hls fetch the cues but render them ourselves.
+      hlsRef.current.subtitleDisplay = false;
+      hlsRef.current.subtitleTrack = id;
+      // hls sets the matching text track to "hidden"; grab it once ready.
+      setTimeout(() => {
+        let chosen: TextTrack | null = null;
+        for (let i = 0; i < v.textTracks.length; i++) {
+          const t = v.textTracks[i];
+          if (t.mode !== "disabled") chosen = t;
+          else t.mode = "disabled";
+        }
+        bindTrack(chosen);
+      }, 60);
+    } else {
+      const tt = v.textTracks[id] || null;
+      for (let i = 0; i < v.textTracks.length; i++)
+        v.textTracks[i].mode = "disabled";
+      bindTrack(tt);
+    }
+    setActiveSub(id);
+    setActiveApiSub(-1);
+    setSubsOn(true);
+    userPickedSubRef.current = true;
+  };
+
+  // Create a same-origin WebVTT <track> for an external subtitle URL and render
+  // it through the custom cue overlay.
+  const loadSubTrack = (url: string, display: string, language: string) => {
+    const v = videoRef.current;
+    if (!v) return;
+    if (engineRef.current === "hls" && hlsRef.current) {
+      hlsRef.current.subtitleDisplay = false;
+      hlsRef.current.subtitleTrack = -1;
+    }
+    for (let k = 0; k < v.textTracks.length; k++) v.textTracks[k].mode = "disabled";
+    v.querySelectorAll("track[data-api]").forEach((t) => t.remove());
+
+    const track = document.createElement("track");
+    track.kind = "subtitles";
+    track.label = display;
+    track.srclang = language || "en";
+    track.src = url;
+    track.setAttribute("data-api", "1");
+    v.appendChild(track);
+    // The TextTrack appears asynchronously; bind once cues start parsing.
+    const trySelect = (attempt = 0) => {
+      const tt = track.track;
+      if (tt) bindTrack(tt);
+      else if (attempt < 10) setTimeout(() => trySelect(attempt + 1), 60);
+    };
+    trySelect();
+    setSubsOn(true);
+  };
+
+  // Load a Wyzie subtitle and render it.
+  const selectApiSub = (i: number, auto = false) => {
+    const sub = apiSubs[i];
+    if (!sub) return;
+    loadSubTrack(sub.url, sub.display, sub.language);
+    setActiveApiSub(i);
+    setActiveSub(-1);
+    if (!auto) userPickedSubRef.current = true;
+  };
+
+  // Picks the best default Wyzie track: English, non-hearing-impaired first.
+  const defaultSubIndex = (subs: ApiSub[]): number => {
+    const en = (s: ApiSub) =>
+      (s.language || "").toLowerCase().startsWith("en") ||
+      /english/i.test(s.display || "");
+    let idx = subs.findIndex((s) => en(s) && !s.hi);
+    if (idx < 0) idx = subs.findIndex((s) => en(s));
+    return idx;
+  };
+
+  // Auto-load the default subtitle once sources resolve (unless the user has
+  // already made a choice). Wyzie is the default source for every server.
+  useEffect(() => {
+    if (!started || userPickedSubRef.current) return;
+    if (activeApiSub !== -1 || activeSub !== -1) return;
+    if (!apiSubs.length) return;
+    const idx = defaultSubIndex(apiSubs);
+    if (idx >= 0) {
+      // Wait a tick so the <video> element and current source are mounted.
+      const t = setTimeout(() => selectApiSub(idx, true), 200);
+      return () => clearTimeout(t);
+    }
+  }, [apiSubs, started]);
+
+  const onUploadSubs = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    const v = videoRef.current;
+    if (!file || !v) return;
+    const url = URL.createObjectURL(file);
+    // remove existing custom tracks
+    if (engineRef.current === "hls" && hlsRef.current) {
+      hlsRef.current.subtitleDisplay = false;
+      hlsRef.current.subtitleTrack = -1;
+    }
+    [...v.querySelectorAll("track")].forEach((t) => t.remove());
+    for (let k = 0; k < v.textTracks.length; k++) v.textTracks[k].mode = "disabled";
+    const track = document.createElement("track");
+    track.kind = "subtitles";
+    track.label = "Custom";
+    track.srclang = "en";
+    track.src = url;
+    track.setAttribute("data-api", "1");
+    v.appendChild(track);
+    const trySelect = (attempt = 0) => {
+      if (track.track) bindTrack(track.track);
+      else if (attempt < 10) setTimeout(() => trySelect(attempt + 1), 60);
+    };
+    trySelect();
+    setActiveApiSub(-1);
+    setActiveSub(-1);
+    setSubsOn(true);
+    setPanel(null);
+    userPickedSubRef.current = true;
+  };
+
+  const pct = duration ? (current / duration) * 100 : 0;
+  const bufPct = duration ? (buffered / duration) * 100 : 0;
+
+  const toggleFav = (name: string) =>
+    setFavorites((f) => {
+      const next = f.includes(name) ? f.filter((x) => x !== name) : [...f, name];
+      try {
+        localStorage.setItem("vc-fav-servers", JSON.stringify(next));
+      } catch {}
+      return next;
+    });
+
+  /* CSS var for accent so child styles can reference it */
+  const accentStyle = { ["--accent" as any]: accent } as React.CSSProperties;
+
+  return (
+    <div
+      ref={wrapRef}
+      style={accentStyle}
+      className="group relative h-full w-full select-none overflow-hidden bg-black"
+      onMouseMove={poke}
+      onMouseLeave={() => playing && !panel && setControlsVisible(false)}
+    >
+      {/* video */}
+      <video
+        ref={videoRef}
+        className="absolute inset-0 h-full w-full bg-black"
+        playsInline
+        onClick={() => {
+          if (panel) setPanel(null);
+          else togglePlay();
+        }}
+        onDoubleClick={toggleFullscreen}
+        poster={poster || undefined}
+      />
+
+      {/* poster / start overlay */}
+      {!started && (
+        <button
+          onClick={togglePlay}
+          disabled={resolving}
+          className="absolute inset-0 z-20 flex flex-col items-center justify-center"
+        >
+          {poster && (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            <img
+              src={poster}
+              alt={title || ""}
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+          )}
+          <span className="absolute inset-0 bg-black/40" />
+          <span className="relative flex h-16 w-16 items-center justify-center rounded-full bg-white text-black shadow-2xl transition-transform hover:scale-110">
+            {resolving ? (
+              <span
+                className="h-7 w-7 animate-spin rounded-full border-[3px] border-black/20"
+                style={{ borderTopColor: "#000" }}
+              />
+            ) : (
+              <PlayIcon className="ml-1 h-7 w-7" />
+            )}
+          </span>
+          {title && (
+            <span className="relative mt-4 text-center">
+              <span className="block text-lg font-bold text-white drop-shadow">
+                {title}
+              </span>
+              {year && (
+                <span className="block text-sm text-white/70">{year}</span>
+              )}
+            </span>
+          )}
+        </button>
+      )}
+
+      {/* buffering spinner */}
+      {started && buffering && !switching && (
+        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
+          <span
+            className="h-12 w-12 animate-spin rounded-full border-[3px] border-white/25"
+            style={{ borderTopColor: "#fff" }}
+          />
+        </div>
+      )}
+
+      {/* source-switching curtain */}
+      {started && switching && (
+        <div className="absolute inset-0 z-30 flex flex-col items-center justify-center gap-4 bg-black/80 text-center">
+          <span
+            className="h-12 w-12 animate-spin rounded-full border-[3px] border-white/25"
+            style={{ borderTopColor: accent }}
+          />
+          <div>
+            <p className="text-sm font-semibold text-white/90">
+              Loading new source…
+            </p>
+            <p className="mt-1 text-xs text-white/50">
+              Switching to {serverName(serverId, providers)}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* skip intro / recap button — z-40 so it sits above the controls bar */}
+      {started && skipIntro && activeSkip && !switching && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            const v = videoRef.current;
+            const target = activeSkip;
+            if (v && target) {
+              const dest = Math.max(0, target.end);
+              const seekTo = () => {
+                try {
+                  v.currentTime = dest;
+                } catch {}
+              };
+              seekTo();
+              // HLS may clamp a forward seek until the manifest is seekable;
+              // retry once on the next tick.
+              if (Math.abs(v.currentTime - dest) > 1) {
+                setTimeout(seekTo, 120);
+              }
+              v.play().catch(() => {});
+            }
+            setActiveSkip(null);
+          }}
+          className="absolute bottom-28 right-4 z-40 flex items-center gap-2 rounded-lg border border-white/20 bg-black/75 px-5 py-2.5 text-sm font-bold text-white shadow-xl backdrop-blur transition hover:bg-black/95 sm:bottom-32 sm:right-6"
+        >
+          {activeSkip.label}
+          <ChevronRightIcon className="h-4 w-4" />
+        </button>
+      )}
+
+      {/* load error */}
+      {started && loadError && (
+        <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-3 bg-black/70 px-6 text-center">
+          <p className="text-sm text-white/80">{loadError}</p>
+          <button
+            onClick={() => {
+              // Fresh failover cycle from the first server.
+              triedServersRef.current = new Set();
+              wantPlayRef.current = true;
+              setLoadError(null);
+              setResolvedSrc(null);
+              void resolveSources(serverOrder[0], true);
+            }}
+            className="rounded-full px-4 py-2 text-sm font-semibold text-white"
+            style={{ backgroundColor: accent }}
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      {/* skip flash */}
+      {skipFlash && (
+        <div
+          className={`pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 ${
+            skipFlash === "fwd" ? "right-[22%]" : "left-[22%]"
+          } flex h-20 w-20 items-center justify-center rounded-full bg-white/10 text-white animate-fade-in-slow`}
+        >
+          {skipFlash === "fwd" ? (
+            <Forward10Icon className="h-9 w-9" />
+          ) : (
+            <Rewind10Icon className="h-9 w-9" />
+          )}
+        </div>
+      )}
+
+      {/* floating subtitles — rendered above the controls/progress bar */}
+      {started && cueText && (
+        <div
+          className="pointer-events-none absolute inset-x-0 z-20 flex justify-center px-[6%] text-center transition-[bottom] duration-200"
+          style={{
+            // The position slider always applies; when the controls/panel are
+            // visible we lift the subs by the control-bar height so they clear it.
+            bottom:
+              controlsVisible || panel
+                ? `calc(${subStyle.position}% + 4.25rem)`
+                : `${subStyle.position}%`,
+          }}
+        >
+          <span style={captionTextStyle(subStyle)}>{cueText}</span>
+        </div>
+      )}
+
+      {/* Netflix-style idle overlay (?overlay=) — appears instantly on pause */}
+      {started && showOverlay && overlay && !panel && (
+        <div
+          className="absolute inset-0 z-30 flex flex-col justify-end bg-gradient-to-r from-black/95 via-black/70 to-transparent px-8 pb-24 pt-8 sm:px-12 sm:pb-28"
+          onClick={() => {
+            setShowOverlay(false);
+            videoRef.current?.play().catch(() => {});
+          }}
+        >
+          <p className="text-xs font-semibold uppercase tracking-widest text-white/50">
+            You're watching
+          </p>
+
+          {/* title logo image, falling back to plain title text */}
+          {logo ? (
+            /* eslint-disable-next-line @next/next/no-img-element */
+            <img
+              src={logo}
+              alt={title || ""}
+              className="mt-2 max-h-24 w-auto max-w-[60%] object-contain object-left drop-shadow-lg"
+            />
+          ) : (
+            title && (
+              <h2 className="mt-1 max-w-xl text-3xl font-black text-white sm:text-4xl">
+                {title}
+              </h2>
+            )
+          )}
+
+          {/* meta line: golden star + rating · season/episode · runtime */}
+          <div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm font-medium text-white/70">
+            {rating != null && rating > 0 && (
+              <span className="flex items-center gap-1">
+                <StarIcon className="h-4 w-4" style={{ color: "#f5c518" }} />
+                <span className="text-white/90">{rating.toFixed(1)}</span>
+              </span>
+            )}
+            {isSeries && curSeason > 0 && curEpisode > 0 && (
+              <>
+                {rating != null && rating > 0 && <span className="text-white/30">·</span>}
+                <span>
+                  Season {curSeason} · Episode {curEpisode}
+                </span>
+              </>
+            )}
+            {!isSeries && year && (
+              <>
+                {rating != null && rating > 0 && <span className="text-white/30">·</span>}
+                <span>{year}</span>
+              </>
+            )}
+            {fmtRuntime(runtime) && (
+              <>
+                <span className="text-white/30">·</span>
+                <span>{fmtRuntime(runtime)}</span>
+              </>
+            )}
+          </div>
+
+          {episodeTitle && (
+            <h3 className="mt-2 max-w-xl text-xl font-bold text-white">
+              {episodeTitle}
+            </h3>
+          )}
+          {overview && (
+            <p className="mt-2 line-clamp-3 max-w-xl text-sm leading-relaxed text-white/70">
+              {overview}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* dim when panel open */}
+      {panel && panel !== "CaptionStyle" && (
+        <div
+          className="absolute inset-0 z-20 bg-black/50"
+          onClick={() => setPanel(null)}
+        />
+      )}
+
+      {/* ---------------- Controls ---------------- */}
+      {started && (
+        <div
+          className={`absolute inset-x-0 bottom-0 z-30 bg-gradient-to-t from-black/90 via-black/40 to-transparent px-3 pb-3 pt-16 transition-opacity duration-300 sm:px-5 sm:pb-4 ${
+            controlsVisible || panel ? "opacity-100" : "pointer-events-none opacity-0"
+          }`}
+        >
+          {/* progress bar */}
+          <div className="mb-2 flex items-center gap-3">
+            <div
+              className="group/seek relative h-4 flex-1 cursor-pointer"
+              onClick={(e) => onSeek(e.clientX, e.currentTarget)}
+              onMouseMove={(e) => {
+                if (!duration) return;
+                const rect = e.currentTarget.getBoundingClientRect();
+                const ratio = Math.min(
+                  1,
+                  Math.max(0, (e.clientX - rect.left) / rect.width)
+                );
+                setHoverTime({ x: e.clientX - rect.left, t: ratio * duration });
+              }}
+              onMouseLeave={() => setHoverTime(null)}
+            >
+              <div className="absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-white/25 transition-all group-hover/seek:h-1.5">
+                <div
+                  className="absolute inset-y-0 left-0 rounded-full bg-white/30"
+                  style={{ width: `${bufPct}%` }}
+                />
+                <div
+                  className="absolute inset-y-0 left-0 rounded-full"
+                  style={{ width: `${pct}%`, backgroundColor: accent }}
+                />
+                <div
+                  className="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 scale-0 rounded-full bg-white shadow transition-transform group-hover/seek:scale-100"
+                  style={{ left: `${pct}%` }}
+                />
+              </div>
+              {hoverTime && (
+                <div
+                  className="pointer-events-none absolute bottom-5 -translate-x-1/2 rounded bg-black/90 px-1.5 py-0.5 font-sans text-xs font-medium text-white"
+                  style={{ left: hoverTime.x }}
+                >
+                  {fmt(hoverTime.t)}
+                </div>
+              )}
+            </div>
+            <span className="shrink-0 font-sans text-[13px] font-medium tabular-nums text-white/90 sm:text-sm">
+              {fmt(current)} / {fmt(duration)}
+            </span>
+          </div>
+
+          {/* buttons row */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-1 sm:gap-2">
+              <CtrlBtn onClick={togglePlay} label={playing ? "Pause" : "Play"}>
+                {playing ? (
+                  <PauseIcon className="h-6 w-6" />
+                ) : (
+                  <PlayIcon className="h-6 w-6" />
+                )}
+              </CtrlBtn>
+              <CtrlBtn onClick={() => skip(-10)} label="Rewind 10s">
+                <Rewind10Icon className="h-7 w-7" />
+              </CtrlBtn>
+              <CtrlBtn onClick={() => skip(10)} label="Forward 10s">
+                <Forward10Icon className="h-7 w-7" />
+              </CtrlBtn>
+              <div className="group/vol flex items-center">
+                <CtrlBtn onClick={toggleMute} label="Mute">
+                  {muted || volume === 0 ? (
+                    <VolumeMutedIcon className="h-7 w-7" />
+                  ) : (
+                    <VolumeHighIcon className="h-7 w-7" />
+                  )}
+                </CtrlBtn>
+                <input
+                  type="range"
+                  min={0}
+                  max={1}
+                  step={0.05}
+                  value={muted ? 0 : volume}
+                  onChange={(e) => {
+                    const v = videoRef.current;
+                    if (!v) return;
+                    v.volume = Number(e.target.value);
+                    v.muted = Number(e.target.value) === 0;
+                  }}
+                  className="w-0 cursor-pointer opacity-0 transition-all duration-200 group-hover/vol:ml-1 group-hover/vol:w-16 group-hover/vol:opacity-100"
+                  style={{ accentColor: accent }}
+                  aria-label="Volume"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center gap-1 sm:gap-2">
+              {nextEpisode && nextEpisodeTarget && (
+                <CtrlBtn
+                  onClick={() =>
+                    goToEpisode(nextEpisodeTarget.s, nextEpisodeTarget.e)
+                  }
+                  label="Next episode"
+                >
+                  <NextEpisodeIcon className="h-6 w-6" />
+                </CtrlBtn>
+              )}
+              {episodeSelector && type === "tv" && (
+                <CtrlBtn
+                  onClick={() =>
+                    setPanel(panel === "Episodes" ? null : "Episodes")
+                  }
+                  label="Episodes"
+                >
+                  <ListIcon className="h-7 w-7" />
+                </CtrlBtn>
+              )}
+              <CtrlBtn
+                onClick={() => setPanel(panel === "Subs" ? null : "Subs")}
+                label="Subtitles"
+                active={subsOn}
+              >
+                <SubtitlesIcon className="h-7 w-7" />
+              </CtrlBtn>
+              <CtrlBtn
+                onClick={() => setPanel(panel === "Quality" ? null : "Quality")}
+                label="Settings"
+              >
+                <SettingsIcon className="h-7 w-7" />
+              </CtrlBtn>
+              <CtrlBtn
+                onClick={() => setPanel(panel === "Servers" ? null : "Servers")}
+                label="Servers"
+              >
+                <CloudIcon className="h-7 w-7" />
+              </CtrlBtn>
+              <CtrlBtn onClick={toggleFullscreen} label="Fullscreen">
+                {fullscreen ? (
+                  <FullscreenExitIcon className="h-6 w-6" />
+                ) : (
+                  <FullscreenIcon className="h-6 w-6" />
+                )}
+              </CtrlBtn>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ---------------- Settings panel ---------------- */}
+      {panel && (
+        <div className="absolute bottom-[4.5rem] right-3 z-40 flex max-h-[calc(100%-6rem)] w-[min(92vw,360px)] flex-col sm:bottom-20 sm:right-5">
+          {/* tabs */}
+          <div className="mb-3 flex shrink-0 items-center justify-end gap-1">
+            {panel === "CaptionStyle" ? (
+              <button
+                onClick={() => setPanel("Subs")}
+                className="flex items-center gap-1.5 rounded-full bg-black/50 py-1 pl-2 pr-3 text-[13px] font-medium text-white/85 backdrop-blur transition hover:text-white"
+              >
+                <ChevronRightIcon className="h-4 w-4 rotate-180" />
+                Caption style
+              </button>
+            ) : panel === "Episodes" ? (
+              <span className="rounded-full bg-black/50 px-3 py-1.5 text-[13px] font-medium text-white/85 backdrop-blur">
+                Episodes
+              </span>
+            ) : panel === "SubSources" ? (
+              <button
+                onClick={() => setPanel("Servers")}
+                className="flex items-center gap-1.5 rounded-full bg-black/50 py-1 pl-2 pr-3 text-[13px] font-medium text-white/85 backdrop-blur transition hover:text-white"
+              >
+                <ChevronRightIcon className="h-4 w-4 rotate-180" />
+                {providers.find((p) => p.id === subSourceParent)?.name || "Sources"}
+              </button>
+            ) : (
+              <div className="flex items-center gap-0.5 rounded-full bg-black/50 p-1 backdrop-blur">
+                {(["Quality", "Subs", "Servers", "Speed"] as Tab[]).map((t) => (
+                  <button
+                    key={t}
+                    onClick={() => setPanel(t)}
+                    className={`rounded-full px-2.5 py-1 text-[13px] font-medium transition ${
+                      panel === t
+                        ? "bg-white/15 text-white"
+                        : "text-white/60 hover:text-white"
+                    }`}
+                  >
+                    {t}
+                  </button>
+                ))}
+              </div>
+            )}
+            <button
+              onClick={() => setPanel(null)}
+              className="flex h-7 w-7 items-center justify-center rounded-full bg-black/50 text-white/70 backdrop-blur transition hover:text-white"
+            >
+              <CloseIcon className="h-4 w-4" />
+            </button>
+          </div>
+
+          {/* content */}
+          <div className="no-scrollbar min-h-0 flex-1 overflow-y-auto rounded-2xl border border-white/10 bg-[#0c0a14]/95 p-2 backdrop-blur-xl">
+            {panel === "Quality" && (
+              <Rows>
+                {resolvedSources.length > 1 ? (
+                  // Multi-file qualities from the sources API
+                  resolvedSources.map((s, i) => {
+                    const h = parseInt(s.label, 10) || 0;
+                    return (
+                      <Row
+                        key={`${s.label}-${i}`}
+                        selected={qualityIndex === i}
+                        accent={accent}
+                        onClick={() => switchQuality(i)}
+                        left={qualityLabel(s.label)}
+                        right={
+                          qualityBadge(h) ? (
+                            <Badge accent={accent}>{qualityBadge(h)}</Badge>
+                          ) : null
+                        }
+                      />
+                    );
+                  })
+                ) : (
+                  // Adaptive (single HLS) — use the stream's own levels
+                  <>
+                    <Row
+                      selected={currentLevel === -1}
+                      accent={accent}
+                      onClick={() => applyLevel(-1)}
+                      left="Auto"
+                      right={<Badge accent={accent}>Adaptive</Badge>}
+                    />
+                    {levels.map((l) => (
+                      <Row
+                        key={l.index}
+                        selected={currentLevel === l.index}
+                        accent={accent}
+                        onClick={() => applyLevel(l.index)}
+                        left={`${l.height}p`}
+                        right={
+                          qualityBadge(l.height) ? (
+                            <Badge accent={accent}>{qualityBadge(l.height)}</Badge>
+                          ) : null
+                        }
+                      />
+                    ))}
+                    {levels.length === 0 && (
+                      <p className="px-3 py-3 text-sm text-white/40">
+                        Loading qualities…
+                      </p>
+                    )}
+                  </>
+                )}
+              </Rows>
+            )}
+
+            {panel === "Subs" && (
+              <div className="flex flex-col">
+                {/* subtitle menu header with the appearance/settings cog */}
+                <div className="mb-1 flex items-center justify-between px-2 pt-1">
+                  <span className="text-xs font-semibold uppercase tracking-wide text-white/40">
+                    Subtitles
+                  </span>
+                  <button
+                    onClick={() => setPanel("CaptionStyle")}
+                    aria-label="Subtitle settings"
+                    title="Subtitle settings"
+                    className="flex h-7 w-7 items-center justify-center rounded-full text-white/60 transition hover:bg-white/10 hover:text-white"
+                  >
+                    <SettingsIcon className="h-4 w-4" />
+                  </button>
+                </div>
+                <Rows>
+                  <Row
+                    selected={!subsOn}
+                    accent={accent}
+                    onClick={subsOff}
+                    left="Off"
+                    right={
+                      <span className="text-xs text-white/45">No subtitles</span>
+                    }
+                  />
+                  <button
+                    onClick={() => fileInputRef.current?.click()}
+                    className="flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left text-white/85 transition hover:bg-white/5"
+                  >
+                    <UploadIcon className="h-5 w-5 text-white/70" />
+                    Upload subtitles
+                  </button>
+                  {apiSubs.map((s, i) => (
+                    <Row
+                      key={`api-${i}`}
+                      selected={subsOn && activeApiSub === i}
+                      accent={accent}
+                      onClick={() => selectApiSub(i)}
+                      left={
+                        <span className="flex items-center gap-2">
+                          <Flag src={s.flag} language={s.language} />
+                          {s.display}
+                          {s.hi && (
+                            <span className="rounded bg-white/10 px-1 text-[10px] font-semibold text-white/60">
+                              HI
+                            </span>
+                          )}
+                        </span>
+                      }
+                      right={
+                        <span className="text-xs capitalize text-white/40">
+                          {s.source || "OpenSubtitles"}
+                        </span>
+                      }
+                    />
+                  ))}
+                  {subTracks.map((t) => (
+                    <Row
+                      key={t.id}
+                      selected={subsOn && activeSub === t.id}
+                      accent={accent}
+                      onClick={() => selectSub(t.id)}
+                      left={t.label}
+                      right={
+                        t.builtIn ? (
+                          <Badge accent={accent}>Built-in</Badge>
+                        ) : null
+                      }
+                    />
+                  ))}
+                </Rows>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".vtt,.srt"
+                  hidden
+                  onChange={onUploadSubs}
+                />
+              </div>
+            )}
+
+            {panel === "Servers" && (
+              <Rows>
+                {providers.map((p) => {
+                  const hasKids = !!p.children?.length;
+                  // Parent is "active" when it (or one of its children) is the
+                  // current server.
+                  const active =
+                    serverId === p.id || serverId.startsWith(`${p.id}:`);
+                  const onClick = () => {
+                    if (hasKids) {
+                      setSubSourceParent(p.id);
+                      setPanel("SubSources");
+                    } else {
+                      switchServer(p.id);
+                    }
+                  };
+                  return (
+                    <div
+                      key={p.id}
+                      onClick={onClick}
+                      className={`flex cursor-pointer items-center gap-3 rounded-xl border px-3 py-3 transition ${
+                        active
+                          ? "border-transparent"
+                          : "border-transparent hover:bg-white/5"
+                      }`}
+                      style={
+                        active
+                          ? {
+                              backgroundColor: `${accent}33`,
+                              borderColor: `${accent}55`,
+                            }
+                          : undefined
+                      }
+                    >
+                      {/* English source — US flag next to every server. */}
+                      <Flag
+                        language="en-US"
+                        size={48}
+                        className="h-6 w-auto shrink-0 rounded-[3px]"
+                      />
+                      <span className="min-w-0 flex-1">
+                        <span
+                          className="block text-sm font-semibold"
+                          style={{ color: active ? accent : "#fff" }}
+                        >
+                          {p.name}
+                        </span>
+                        <span className="block text-xs text-white/45">
+                          {p.label}
+                        </span>
+                      </span>
+                      {failedServers.includes(p.id) && (
+                        <span title="This source failed">
+                          <WarnIcon className="h-4 w-4 text-red-500" />
+                        </span>
+                      )}
+                      {active && !hasKids && !failedServers.includes(p.id) && (
+                        <CheckIcon className="h-4 w-4" style={{ color: accent }} />
+                      )}
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleFav(p.id);
+                        }}
+                        className="text-white/50 transition hover:text-white"
+                      >
+                        <HeartIcon
+                          filled={favorites.includes(p.id)}
+                          className="h-4 w-4"
+                          style={
+                            favorites.includes(p.id)
+                              ? { color: accent }
+                              : undefined
+                          }
+                        />
+                      </button>
+                      {hasKids && (
+                        <ChevronRightIcon className="h-4 w-4 text-white/40" />
+                      )}
+                    </div>
+                  );
+                })}
+
+                {audioTracks.length > 1 && (
+                  <>
+                    <p className="px-1 pb-1 pt-3 text-xs font-medium uppercase tracking-wide text-white/40">
+                      Audio
+                    </p>
+                    {audioTracks.map((a) => (
+                      <Row
+                        key={`audio-${a.id}`}
+                        selected={currentAudio === a.id}
+                        accent={accent}
+                        onClick={() => switchAudio(a.id)}
+                        left={a.name}
+                      />
+                    ))}
+                  </>
+                )}
+              </Rows>
+            )}
+
+            {panel === "SubSources" &&
+              (() => {
+                const parent = providers.find((p) => p.id === subSourceParent);
+                if (!parent) return null;
+                const items = [
+                  { id: parent.id, name: "Auto · try all", auto: true },
+                  ...(parent.children || []).map((c) => ({
+                    id: `${parent.id}:${c.id}`,
+                    name: c.name,
+                    auto: false,
+                  })),
+                ];
+                return (
+                  <Rows>
+                    {items.map((c) => {
+                      const csel = serverId === c.id;
+                      const cfail = failedServers.includes(c.id);
+                      return (
+                        <Row
+                          key={c.id}
+                          selected={csel}
+                          accent={accent}
+                          onClick={() => switchServer(c.id)}
+                          left={c.name}
+                          right={
+                            cfail ? (
+                              <span title="This source failed">
+                                <WarnIcon className="h-4 w-4 text-red-500" />
+                              </span>
+                            ) : c.auto ? (
+                              <Badge accent={accent}>auto</Badge>
+                            ) : null
+                          }
+                        />
+                      );
+                    })}
+                  </Rows>
+                );
+              })()}
+
+            {panel === "Speed" && (
+              <Rows>
+                {SPEEDS.map((s) => (
+                  <Row
+                    key={s}
+                    selected={speed === s}
+                    accent={accent}
+                    onClick={() => applySpeed(s)}
+                    left={s === 1 ? "1x (Normal)" : `${s}x`}
+                    right={
+                      speed === s ? (
+                        <span
+                          className="h-2.5 w-2.5 rounded-full"
+                          style={{ backgroundColor: accent }}
+                        />
+                      ) : null
+                    }
+                  />
+                ))}
+              </Rows>
+            )}
+
+            {panel === "Episodes" && (
+              <div className="flex flex-col">
+                {/* season selector */}
+                {seasonsInfo.length > 1 && (
+                  <div className="no-scrollbar mb-2 flex gap-1.5 overflow-x-auto pb-1">
+                    {seasonsInfo.map((s) => (
+                      <button
+                        key={s.season}
+                        onClick={() => setPickerSeason(s.season)}
+                        className="shrink-0 rounded-lg border px-3 py-1.5 text-[13px] font-medium transition"
+                        style={
+                          pickerSeason === s.season
+                            ? {
+                                backgroundColor: `${accent}33`,
+                                borderColor: `${accent}77`,
+                                color: "#fff",
+                              }
+                            : {
+                                backgroundColor: "rgba(255,255,255,0.05)",
+                                borderColor: "transparent",
+                                color: "rgba(255,255,255,0.7)",
+                              }
+                        }
+                      >
+                        S{s.season}
+                      </button>
+                    ))}
+                  </div>
+                )}
+                <Rows>
+                  {pickerEpisodes.length === 0 && (
+                    <p className="px-3 py-3 text-sm text-white/40">
+                      Loading episodes…
+                    </p>
+                  )}
+                  {pickerEpisodes.map((ep) => {
+                    const isCurrent =
+                      pickerSeason === curSeason && ep.episode === curEpisode;
+                    return (
+                      <button
+                        key={ep.episode}
+                        onClick={() => goToEpisode(pickerSeason, ep.episode)}
+                        className={`flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition ${
+                          isCurrent
+                            ? "border-transparent"
+                            : "border-transparent hover:bg-white/5"
+                        }`}
+                        style={
+                          isCurrent
+                            ? {
+                                backgroundColor: `${accent}33`,
+                                borderColor: `${accent}55`,
+                              }
+                            : undefined
+                        }
+                      >
+                        <span
+                          className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md text-xs font-bold"
+                          style={{
+                            backgroundColor: isCurrent
+                              ? accent
+                              : "rgba(255,255,255,0.08)",
+                            color: isCurrent ? "#fff" : "rgba(255,255,255,0.7)",
+                          }}
+                        >
+                          {ep.episode}
+                        </span>
+                        <span className="min-w-0 flex-1">
+                          <span
+                            className="block truncate text-sm font-medium"
+                            style={{ color: isCurrent ? accent : "#fff" }}
+                          >
+                            {ep.name}
+                          </span>
+                        </span>
+                      </button>
+                    );
+                  })}
+                </Rows>
+              </div>
+            )}
+
+            {panel === "CaptionStyle" && (
+              <div className="space-y-4 px-1 pb-1">
+                {/* live preview */}
+                <div className="relative flex h-24 items-end justify-center overflow-hidden rounded-xl border border-white/10 bg-[radial-gradient(circle_at_30%_20%,#3a3550,#0b0a12)]">
+                  <div
+                    className="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center px-3 text-center"
+                  >
+                    <span style={captionTextStyle(subStyle)}>
+                      {cueText || "The quick brown fox"}
+                    </span>
+                  </div>
+                </div>
+
+                <StyleControl label="Text size">
+                  <input
+                    type="range"
+                    min={16}
+                    max={64}
+                    step={1}
+                    value={subStyle.size}
+                    onChange={(e) =>
+                      updateSubStyle({ size: Number(e.target.value) })
+                    }
+                    className="w-full cursor-pointer"
+                    style={{ accentColor: accent }}
+                  />
+                </StyleControl>
+
+                <StyleControl label="Text color">
+                  <div className="flex flex-wrap gap-2">
+                    {SUB_COLORS.map((c) => (
+                      <Swatch
+                        key={c}
+                        color={c}
+                        selected={subStyle.color.toLowerCase() === c.toLowerCase()}
+                        accent={accent}
+                        onClick={() => updateSubStyle({ color: c })}
+                      />
+                    ))}
+                  </div>
+                </StyleControl>
+
+                <StyleControl label="Font">
+                  <div className="flex flex-wrap gap-1.5">
+                    {SUB_FONTS.map((f) => (
+                      <Chip
+                        key={f.label}
+                        selected={subStyle.font === f.value}
+                        accent={accent}
+                        onClick={() => updateSubStyle({ font: f.value })}
+                      >
+                        <span style={{ fontFamily: f.value }}>{f.label}</span>
+                      </Chip>
+                    ))}
+                    <Chip
+                      selected={subStyle.bold}
+                      accent={accent}
+                      onClick={() => updateSubStyle({ bold: !subStyle.bold })}
+                    >
+                      <span className="font-extrabold">Bold</span>
+                    </Chip>
+                  </div>
+                </StyleControl>
+
+                <StyleControl label="Edge style">
+                  <div className="flex flex-wrap gap-1.5">
+                    {(
+                      [
+                        ["none", "None"],
+                        ["shadow", "Shadow"],
+                        ["outline", "Outline"],
+                        ["glow", "Glow"],
+                      ] as [SubStyle["edge"], string][]
+                    ).map(([val, lbl]) => (
+                      <Chip
+                        key={val}
+                        selected={subStyle.edge === val}
+                        accent={accent}
+                        onClick={() => updateSubStyle({ edge: val })}
+                      >
+                        {lbl}
+                      </Chip>
+                    ))}
+                  </div>
+                </StyleControl>
+
+                <StyleControl label="Background">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Chip
+                      selected={subStyle.bg === "none"}
+                      accent={accent}
+                      onClick={() => updateSubStyle({ bg: "none" })}
+                    >
+                      Off
+                    </Chip>
+                    {["#000000", "#ffffff"].map((c) => (
+                      <Swatch
+                        key={c}
+                        color={c}
+                        selected={subStyle.bg.toLowerCase() === c}
+                        accent={accent}
+                        onClick={() => updateSubStyle({ bg: c })}
+                      />
+                    ))}
+                  </div>
+                </StyleControl>
+
+                <StyleControl
+                  label={`Background opacity · ${Math.round(
+                    subStyle.bgOpacity * 100
+                  )}%`}
+                >
+                  <input
+                    type="range"
+                    min={0}
+                    max={1}
+                    step={0.05}
+                    disabled={subStyle.bg === "none"}
+                    value={subStyle.bgOpacity}
+                    onChange={(e) =>
+                      updateSubStyle({ bgOpacity: Number(e.target.value) })
+                    }
+                    className="w-full cursor-pointer disabled:opacity-30"
+                    style={{ accentColor: accent }}
+                    aria-label="Background opacity"
+                  />
+                </StyleControl>
+
+                <StyleControl label={`Vertical position · ${subStyle.position}%`}>
+                  <input
+                    type="range"
+                    min={2}
+                    max={40}
+                    step={1}
+                    value={subStyle.position}
+                    onChange={(e) =>
+                      updateSubStyle({ position: Number(e.target.value) })
+                    }
+                    className="w-full cursor-pointer"
+                    style={{ accentColor: accent }}
+                  />
+                </StyleControl>
+
+                <StyleControl label="Subtitle delay">
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() =>
+                        setSubDelay((d) => Math.round((d - 0.1) * 10) / 10)
+                      }
+                      aria-label="Subtitles earlier"
+                      className="flex h-9 w-10 items-center justify-center rounded-lg border border-white/10 bg-white/5 text-lg font-semibold text-white/80 transition hover:bg-white/10 hover:text-white"
+                    >
+                      −
+                    </button>
+                    <div className="relative flex-1">
+                      <input
+                        type="number"
+                        step={0.1}
+                        value={subDelay}
+                        onChange={(e) => {
+                          const n = parseFloat(e.target.value);
+                          setSubDelay(isNaN(n) ? 0 : Math.round(n * 10) / 10);
+                        }}
+                        className="w-full rounded-lg border border-white/10 bg-black/40 px-3 py-2 text-center text-sm tabular-nums text-white outline-none transition focus:border-white/30"
+                        aria-label="Subtitle delay in seconds"
+                      />
+                      <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-white/40">
+                        s
+                      </span>
+                    </div>
+                    <button
+                      onClick={() =>
+                        setSubDelay((d) => Math.round((d + 0.1) * 10) / 10)
+                      }
+                      aria-label="Subtitles later"
+                      className="flex h-9 w-10 items-center justify-center rounded-lg border border-white/10 bg-white/5 text-lg font-semibold text-white/80 transition hover:bg-white/10 hover:text-white"
+                    >
+                      +
+                    </button>
+                  </div>
+                  <p className="mt-1.5 text-[11px] text-white/35">
+                    {subDelay > 0
+                      ? "Subtitles appear later"
+                      : subDelay < 0
+                      ? "Subtitles appear earlier"
+                      : "In sync"}{" "}
+                    · ± steps by 0.1s
+                  </p>
+                </StyleControl>
+
+                <button
+                  onClick={() => {
+                    updateSubStyle(DEFAULT_SUB_STYLE);
+                    setSubDelay(0);
+                  }}
+                  className="w-full rounded-xl border border-white/10 bg-white/5 py-2.5 text-sm font-medium text-white/70 transition hover:bg-white/10 hover:text-white"
+                >
+                  Reset to default
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ---------------- small building blocks ---------------- */
+
+// Country flag for a subtitle: prefers a flag URL supplied by the source
+// (Wyzie returns one per subtitle), otherwise derives one from the language
+// via flagsapi.com. Renders nothing if neither is available or it fails to load.
+function Flag({
+  src,
+  language,
+  size = 24,
+  className = "h-3.5 w-auto shrink-0 rounded-[2px]",
+}: {
+  src?: string;
+  language?: string;
+  size?: 16 | 24 | 32 | 48 | 64;
+  className?: string;
+}) {
+  const url = src || flagUrl(language, size);
+  if (!url) return null;
+  return (
+    /* eslint-disable-next-line @next/next/no-img-element */
+    <img
+      src={url}
+      alt={language || ""}
+      loading="lazy"
+      className={className}
+      onError={(e) => {
+        (e.currentTarget as HTMLImageElement).style.display = "none";
+      }}
+    />
+  );
+}
+
+function CtrlBtn({
+  children,
+  onClick,
+  label,
+  active,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  label: string;
+  active?: boolean;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      aria-label={label}
+      title={label}
+      className={`flex h-10 w-10 items-center justify-center rounded-full transition hover:bg-white/10 ${
+        active ? "text-white" : "text-white/90 hover:text-white"
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Rows({ children }: { children: React.ReactNode }) {
+  return <div className="space-y-1">{children}</div>;
+}
+
+function Row({
+  left,
+  right,
+  selected,
+  accent,
+  onClick,
+}: {
+  left: React.ReactNode;
+  right?: React.ReactNode;
+  selected?: boolean;
+  accent: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`flex w-full items-center justify-between rounded-xl border px-3 py-3 text-left transition ${
+        selected ? "border-transparent" : "border-transparent hover:bg-white/5"
+      }`}
+      style={
+        selected
+          ? { backgroundColor: `${accent}33`, borderColor: `${accent}55` }
+          : undefined
+      }
+    >
+      <span
+        className="text-sm font-medium"
+        style={{ color: selected ? accent : "#fff" }}
+      >
+        {left}
+      </span>
+      {right}
+    </button>
+  );
+}
+
+function Badge({
+  children,
+  accent,
+}: {
+  children: React.ReactNode;
+  accent: string;
+}) {
+  return (
+    <span
+      className="rounded-md px-2 py-0.5 text-xs font-semibold"
+      style={{ backgroundColor: `${accent}33`, color: accent }}
+    >
+      {children}
+    </span>
+  );
+}
+
+function StyleControl({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <p className="mb-1.5 text-xs font-medium text-white/50">{label}</p>
+      {children}
+    </div>
+  );
+}
+
+function Swatch({
+  color,
+  selected,
+  accent,
+  onClick,
+}: {
+  color: string;
+  selected?: boolean;
+  accent: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      aria-label={color}
+      className="h-7 w-7 rounded-full border transition hover:scale-110"
+      style={{
+        backgroundColor: color,
+        borderColor: selected ? accent : "rgba(255,255,255,0.25)",
+        boxShadow: selected ? `0 0 0 2px ${accent}` : undefined,
+      }}
+    />
+  );
+}
+
+function Chip({
+  children,
+  selected,
+  accent,
+  onClick,
+}: {
+  children: React.ReactNode;
+  selected?: boolean;
+  accent: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="rounded-lg border px-3 py-1.5 text-[13px] font-medium transition"
+      style={
+        selected
+          ? { backgroundColor: `${accent}33`, borderColor: `${accent}77`, color: "#fff" }
+          : {
+              backgroundColor: "rgba(255,255,255,0.05)",
+              borderColor: "transparent",
+              color: "rgba(255,255,255,0.7)",
+            }
+      }
+    >
+      {children}
+    </button>
+  );
+}
+

components/player/icons.tsx

@@ -0,0 +1,246 @@
+/* Player control icons — recreated to match the vidsuper player. */
+import { SVGProps } from "react";
+
+type P = SVGProps<SVGSVGElement>;
+
+export const PlayIcon = (p: P) => (
+  <svg viewBox="0 0 384 512" fill="currentColor" {...p}>
+    <path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z" />
+  </svg>
+);
+
+export const PauseIcon = (p: P) => (
+  <svg viewBox="0 0 320 512" fill="currentColor" {...p}>
+    <path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z" />
+  </svg>
+);
+
+/* Rewind 10s — p-stream skip-backward (curved arrow with baked-in "10") */
+export const Rewind10Icon = (p: P) => (
+  <svg viewBox="0 0 25 24" fill="none" {...p}>
+    <path
+      d="M13.6667 12.3333L9 7.66667M9 7.66667L13.6667 3M9 7.66667H18.3333C19.571 7.66667 20.758 8.15833 21.6332 9.0335C22.5083 9.90867 23 11.0957 23 12.3333C23 13.571 22.5083 14.758 21.6332 15.6332C20.758 16.5083 19.571 17 18.3333 17H16"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4.50426 14.2727V23H2.65909V16.0241H2.60795L0.609375 17.277V15.6406L2.76989 14.2727H4.50426ZM10.0004 23.1918C9.2674 23.1889 8.63672 23.0085 8.10831 22.6506C7.58274 22.2926 7.17791 21.7741 6.89382 21.0952C6.61257 20.4162 6.47337 19.5994 6.47621 18.6449C6.47621 17.6932 6.61683 16.8821 6.89808 16.2116C7.18217 15.5412 7.587 15.0312 8.11257 14.6818C8.64098 14.3295 9.27024 14.1534 10.0004 14.1534C10.7305 14.1534 11.3583 14.3295 11.8839 14.6818C12.4123 15.0341 12.8185 15.5455 13.1026 16.2159C13.3867 16.8835 13.5273 17.6932 13.5245 18.6449C13.5245 19.6023 13.3825 20.4205 13.0984 21.0994C12.8171 21.7784 12.4137 22.2969 11.8881 22.6548C11.3626 23.0128 10.7333 23.1918 10.0004 23.1918ZM10.0004 21.6619C10.5004 21.6619 10.8995 21.4105 11.1978 20.9077C11.4961 20.4048 11.6438 19.6506 11.641 18.6449C11.641 17.983 11.5728 17.4318 11.4364 16.9915C11.3029 16.5511 11.1126 16.2202 10.8654 15.9986C10.6211 15.777 10.3327 15.6662 10.0004 15.6662C9.5032 15.6662 9.10547 15.9148 8.80717 16.4119C8.50888 16.9091 8.35831 17.6534 8.35547 18.6449C8.35547 19.3153 8.42223 19.875 8.55575 20.3239C8.69212 20.7699 8.88388 21.1051 9.13104 21.3295C9.3782 21.5511 9.66797 21.6619 10.0004 21.6619Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+/* Forward 10s — p-stream skip-forward (curved arrow with baked-in "10") */
+export const Forward10Icon = (p: P) => (
+  <svg viewBox="0 0 26 24" fill="none" {...p}>
+    <path
+      d="M11.3333 12.3333L16 7.66667M16 7.66667L11.3333 3M16 7.66667H6.66667C5.42899 7.66667 4.242 8.15833 3.36684 9.0335C2.49167 9.90867 2 11.0957 2 12.3333C2 13.571 2.49167 14.758 3.36684 15.6332C4.242 16.5083 5.42899 17 6.66667 17H9"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.5043 14.2727V23H14.6591V16.0241H14.608L12.6094 17.277V15.6406L14.7699 14.2727H16.5043ZM22.0004 23.1918C21.2674 23.1889 20.6367 23.0085 20.1083 22.6506C19.5827 22.2926 19.1779 21.7741 18.8938 21.0952C18.6126 20.4162 18.4734 19.5994 18.4762 18.6449C18.4762 17.6932 18.6168 16.8821 18.8981 16.2116C19.1822 15.5412 19.587 15.0312 20.1126 14.6818C20.641 14.3295 21.2702 14.1534 22.0004 14.1534C22.7305 14.1534 23.3583 14.3295 23.8839 14.6818C24.4123 15.0341 24.8185 15.5455 25.1026 16.2159C25.3867 16.8835 25.5273 17.6932 25.5245 18.6449C25.5245 19.6023 25.3825 20.4205 25.0984 21.0994C24.8171 21.7784 24.4137 22.2969 23.8881 22.6548C23.3626 23.0128 22.7333 23.1918 22.0004 23.1918ZM22.0004 21.6619C22.5004 21.6619 22.8995 21.4105 23.1978 20.9077C23.4961 20.4048 23.6438 19.6506 23.641 18.6449C23.641 17.983 23.5728 17.4318 23.4364 16.9915C23.3029 16.5511 23.1126 16.2202 22.8654 15.9986C22.6211 15.777 22.3327 15.6662 22.0004 15.6662C21.5032 15.6662 21.1055 15.9148 20.8072 16.4119C20.5089 16.9091 20.3583 17.6534 20.3555 18.6449C20.3555 19.3153 20.4222 19.875 20.5558 20.3239C20.6921 20.7699 20.8839 21.1051 21.131 21.3295C21.3782 21.5511 21.668 21.6619 22.0004 21.6619Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+/* Volume (high) — FontAwesome volume-high, p-stream's player volume icon */
+export const VolumeHighIcon = (p: P) => (
+  <svg viewBox="0 0 640 512" {...p}>
+    <path
+      fill="currentColor"
+      d="M533.6 32.5C598.5 85.3 640 165.8 640 256s-41.5 170.8-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z"
+    />
+  </svg>
+);
+
+/* Volume muted — FontAwesome volume-xmark (pairs with volume-high) */
+export const VolumeMutedIcon = (p: P) => (
+  <svg viewBox="0 0 576 512" {...p}>
+    <path
+      fill="currentColor"
+      d="M301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3zM425 167l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"
+    />
+  </svg>
+);
+
+/* Subtitles / closed captions — p-stream captions icon */
+export const SubtitlesIcon = (p: P) => (
+  <svg viewBox="0 0 25 20" {...p}>
+    <path
+      transform="translate(-3 -6)"
+      d="M25.5,6H5.5A2.507,2.507,0,0,0,3,8.5v15A2.507,2.507,0,0,0,5.5,26h20A2.507,2.507,0,0,0,28,23.5V8.5A2.507,2.507,0,0,0,25.5,6ZM5.5,16h5v2.5h-5ZM18,23.5H5.5V21H18Zm7.5,0h-5V21h5Zm0-5H13V16H25.5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+/* Settings — p-stream gear icon */
+export const SettingsIcon = (p: P) => (
+  <svg viewBox="0 0 48.4 48.4" fill="currentColor" {...p}>
+    <path d="M48.4,24.2c0-1.8-1.297-3.719-2.896-4.285s-3.149-1.952-3.6-3.045c-0.451-1.093-0.334-3.173,0.396-4.705 c0.729-1.532,0.287-3.807-0.986-5.08c-1.272-1.273-3.547-1.714-5.08-0.985c-1.532,0.729-3.609,0.848-4.699,0.397 s-2.477-2.003-3.045-3.602C27.921,1.296,26,0,24.2,0c-1.8,0-3.721,1.296-4.29,2.895c-0.569,1.599-1.955,3.151-3.045,3.602 c-1.09,0.451-3.168,0.332-4.7-0.397c-1.532-0.729-3.807-0.288-5.08,0.985c-1.273,1.273-1.714,3.547-0.985,5.08 c0.729,1.533,0.845,3.611,0.392,4.703c-0.453,1.092-1.998,2.481-3.597,3.047S0,22.4,0,24.2s1.296,3.721,2.895,4.29 c1.599,0.568,3.146,1.957,3.599,3.047c0.453,1.089,0.335,3.166-0.394,4.698s-0.288,3.807,0.985,5.08 c1.273,1.272,3.547,1.714,5.08,0.985c1.533-0.729,3.61-0.847,4.7-0.395c1.091,0.452,2.476,2.008,3.045,3.604 c0.569,1.596,2.49,2.891,4.29,2.891c1.8,0,3.721-1.295,4.29-2.891c0.568-1.596,1.953-3.15,3.043-3.604 c1.09-0.453,3.17-0.334,4.701,0.396c1.533,0.729,3.808,0.287,5.08-0.985c1.273-1.273,1.715-3.548,0.986-5.08 c-0.729-1.533-0.849-3.61-0.398-4.7c0.451-1.09,2.004-2.477,3.603-3.045C47.104,27.921,48.4,26,48.4,24.2z M24.2,33.08 c-4.91,0-8.88-3.97-8.88-8.87c0-4.91,3.97-8.88,8.88-8.88c4.899,0,8.87,3.97,8.87,8.88C33.07,29.11,29.1,33.08,24.2,33.08z" />
+  </svg>
+);
+
+/* Cloud — server selector (solid, FontAwesome cloud) */
+export const CloudIcon = (p: P) => (
+  <svg viewBox="0 0 640 512" {...p}>
+    <path
+      fill="currentColor"
+      d="M0 336c0 79.5 64.5 144 144 144H512c70.7 0 128-57.3 128-128c0-61.9-44-113.6-102.4-125.4c4.1-10.7 6.4-22.4 6.4-34.6c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192c0 2.7 .1 5.4 .2 8.1C40.2 219.8 0 273.2 0 336z"
+    />
+  </svg>
+);
+
+/* Fullscreen — FontAwesome expand (p-stream) */
+export const FullscreenIcon = (p: P) => (
+  <svg viewBox="0 0 448 512" {...p}>
+    <path
+      fill="currentColor"
+      d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
+    />
+  </svg>
+);
+
+/* Fullscreen exit — FontAwesome compress (p-stream) */
+export const FullscreenExitIcon = (p: P) => (
+  <svg viewBox="0 0 448 512" {...p}>
+    <path
+      fill="currentColor"
+      d="M160 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V64zM32 320c-17.7 0-32 14.3-32 32s14.3 32 32 32H96v64c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32H32zM352 64c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V64zM320 320c-17.7 0-32 14.3-32 32v96c0 17.7 14.3 32 32 32s32-14.3 32-32V384h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z"
+    />
+  </svg>
+);
+
+export const HeartIcon = ({ filled, ...p }: P & { filled?: boolean }) => (
+  <svg viewBox="0 0 24 24" fill={filled ? "currentColor" : "none"} {...p}>
+    <path
+      d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+/* Filled star — used for the rating badge on the idle overlay */
+export const StarIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
+    <path d="M12 2.5l2.9 5.88 6.49.94-4.7 4.58 1.11 6.46L12 17.77l-5.8 3.05 1.1-6.46-4.69-4.58 6.49-.94L12 2.5z" />
+  </svg>
+);
+
+export const CheckIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <path
+      d="M20 6L9 17l-5-5"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const UploadIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <path
+      d="M12 16V4m0 0L7 9m5-5l5 5M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const SearchIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="2" />
+    <path d="m21 21-4.3-4.3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+  </svg>
+);
+
+export const SlidersIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <path
+      d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const ChevronRightIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <path
+      d="M9 6l6 6-6 6"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const CloseIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <path
+      d="M18 6L6 18M6 6l12 12"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+/* Skip to next episode — play with a trailing bar */
+export const NextEpisodeIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <path d="M5 5l10 7-10 7V5z" fill="currentColor" />
+    <path
+      d="M19 5v14"
+      stroke="currentColor"
+      strokeWidth="2.2"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+/* Episode list */
+export const ListIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <path
+      d="M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+/* Warning triangle — failed source */
+export const WarnIcon = (p: P) => (
+  <svg viewBox="0 0 24 24" fill="none" {...p}>
+    <path
+      d="M12 3.2 1.6 21h20.8L12 3.2z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12 9.5v5M12 17.6v.01"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+);

docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  vidsuper:
+    build: .
+    # Or pull a prebuilt image instead of building:
+    # image: ghcr.io/YOUR_USERNAME/vidsuper:latest
+    restart: unless-stopped
+    ports:
+      - "3000:3000"
+    env_file:
+      - .env

lib/config.ts

@@ -0,0 +1,18 @@
+// Server-side branding config. Read at runtime from the environment, so
+// changing these in .env and restarting is enough — no rebuild required.
+// (These are threaded into the player via server components / props, never
+// referenced from client code, so they don't need the NEXT_PUBLIC_ prefix.)
+
+export const PLAYER_NAME = process.env.PLAYER_NAME || "Vidsuper";
+
+export const PLAYER_TAGLINE =
+  process.env.PLAYER_TAGLINE || "Video streaming player";
+
+/** Default accent colour (hex, no leading #). Overridable per-request via ?color= */
+export const DEFAULT_ACCENT = (process.env.ACCENT_COLOR || "ef4444").replace(
+  /^#/,
+  ""
+);
+
+/** Logo path served from /public. Replace public/logo.svg to rebrand. */
+export const LOGO_SRC = process.env.LOGO_SRC || "/logo.svg";

lib/constants.ts

@@ -0,0 +1,9 @@
+export type StreamKind = "hls" | "dash" | "native";
+
+/** Detect the streaming engine to use from a source URL. */
+export function detectStreamKind(src: string): StreamKind {
+  const path = src.split("?")[0].toLowerCase();
+  if (path.endsWith(".m3u8")) return "hls";
+  if (path.endsWith(".mpd")) return "dash";
+  return "native"; // mp4, webm, ogg, mov, …
+}

lib/scraper/castle.ts

@@ -0,0 +1,480 @@
+import crypto from "crypto";
+
+// Server-only Castle source resolver (api.hlowb.com). Resolves a TMDB title to
+// a Castle movieId, walks seasons/episodes, and pulls per-language (v1) or
+// shared (v2) HLS streams. All API payloads are AES-CBC encrypted with a key
+// derived from a fetched security key + a fixed suffix (key doubles as IV).
+//
+// The resulting streams play directly (no proxying required).
+
+const TMDB_BASE_URL = "https://api.themoviedb.org/3";
+const CASTLE_BASE = "https://api.hlowb.com";
+const PKG = "com.external.castle";
+const CHANNEL = "IndiaA";
+const CLIENT = "1";
+const LANG = "en-US";
+const SUFFIX = "T!BgJB";
+const APK_SIGN_KEY = "ED0955EB04E67A1D9F3305B95454FED485261475";
+
+const WORKING_HEADERS: Record<string, string> = {
+  "User-Agent": "okhttp/4.9.3",
+  Accept: "application/json",
+  "Accept-Language": "en-US,en;q=0.9",
+  Connection: "Keep-Alive",
+  Referer: CASTLE_BASE,
+};
+
+// Headers the stream host expects for direct playback.
+export const CASTLE_PLAYBACK_HEADERS: Record<string, string> = {
+  "User-Agent":
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36",
+  Accept:
+    "video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5",
+  "Accept-Language": "en-US,en;q=0.9",
+  "Accept-Encoding": "identity",
+  Connection: "keep-alive",
+  "Sec-Fetch-Dest": "video",
+  "Sec-Fetch-Mode": "no-cors",
+  "Sec-Fetch-Site": "cross-site",
+  DNT: "1",
+};
+
+export interface CastleStream {
+  name: string;
+  title: string;
+  url: string;
+  quality: string;
+  size: string;
+  provider: string;
+}
+
+interface TmdbInfo {
+  title: string;
+  year: number | null;
+  tmdbId: number;
+}
+
+const QUALITY_MAP: Record<number, string> = { 1: "480p", 2: "720p", 3: "1080p" };
+
+// Castle ids (movieId/episodeId/id) are 16+ digit integers that overflow JS's
+// safe integer range, so JSON.parse silently corrupts them. Quote any integer
+// literal with 16+ digits as a value so it survives parsing as a string.
+function safeJsonParse(text: string): any {
+  const safe = text.replace(/:(\s*)(-?\d{16,})(\s*[,}\]])/g, ':$1"$2"$3');
+  return JSON.parse(safe);
+}
+
+export class CastleScraper {
+  private tmdbKey =
+    process.env.CASTLE_TMDB_API_KEY ||
+    process.env.TMDB_API_KEY ||
+    "439c478a771f35c05022f9feabcca01c";
+  private securityKey: string | null = null;
+
+  // ---- AES-CBC (key derived from security key + suffix, key == IV) -------
+
+  private deriveKey(apiKeyB64: string): Buffer {
+    const apiKeyBytes = Buffer.from(apiKeyB64, "base64");
+    let keyMaterial = Buffer.concat([apiKeyBytes, Buffer.from(SUFFIX, "ascii")]);
+    if (keyMaterial.length < 16) {
+      keyMaterial = Buffer.concat([
+        keyMaterial,
+        Buffer.alloc(16 - keyMaterial.length),
+      ]);
+    } else if (keyMaterial.length > 16) {
+      keyMaterial = keyMaterial.subarray(0, 16);
+    }
+    return keyMaterial;
+  }
+
+  private decryptCastle(encryptedB64: string, securityKeyB64: string): string {
+    const aesKey = this.deriveKey(securityKeyB64);
+    const iv = aesKey; // key doubles as IV
+    const encrypted = Buffer.from(encryptedB64, "base64");
+    const decipher = crypto.createDecipheriv("aes-128-cbc", aesKey, iv);
+    decipher.setAutoPadding(true); // PKCS#7
+    return Buffer.concat([
+      decipher.update(encrypted),
+      decipher.final(),
+    ]).toString("utf-8");
+  }
+
+  // ---- HTTP -------------------------------------------------------------
+
+  private async request(
+    url: string,
+    init?: RequestInit & { headers?: Record<string, string> }
+  ): Promise<Response> {
+    const r = await fetch(url, {
+      ...init,
+      headers: { ...WORKING_HEADERS, ...(init?.headers || {}) },
+    });
+    if (!r.ok) throw new Error(`Castle request failed ${r.status} for ${url}`);
+    return r;
+  }
+
+  // Response is either {data: "<cipher>"} or a raw cipher string.
+  private async extractCipher(response: Response): Promise<string> {
+    const text = (await response.text()).trim();
+    if (!text) throw new Error("Empty response");
+    try {
+      const j = JSON.parse(text);
+      if (j && typeof j.data === "string") return j.data.trim();
+    } catch {
+      /* not JSON — raw cipher */
+    }
+    return text;
+  }
+
+  private async decryptedJson(response: Response, securityKey: string): Promise<any> {
+    const cipher = await this.extractCipher(response);
+    return safeJsonParse(this.decryptCastle(cipher, securityKey));
+  }
+
+  // ---- Castle API -------------------------------------------------------
+
+  private async getSecurityKey(): Promise<string> {
+    if (this.securityKey) return this.securityKey;
+    const url = `${CASTLE_BASE}/v0.1/system/getSecurityKey/1?channel=${CHANNEL}&clientType=${CLIENT}&lang=${LANG}`;
+    const r = await this.request(url);
+    const data = await r.json();
+    if (data.code !== 200 || !data.data) {
+      throw new Error(`Security key API error: ${JSON.stringify(data)}`);
+    }
+    this.securityKey = data.data as string;
+    return this.securityKey;
+  }
+
+  private async searchCastle(
+    securityKey: string,
+    keyword: string,
+    page = 1,
+    size = 30
+  ): Promise<any> {
+    const params = new URLSearchParams({
+      channel: CHANNEL,
+      clientType: CLIENT,
+      keyword,
+      lang: LANG,
+      mode: "1",
+      packageName: PKG,
+      page: String(page),
+      size: String(size),
+    });
+    const url = `${CASTLE_BASE}/film-api/v1.1.0/movie/searchByKeyword?${params}`;
+    return this.decryptedJson(await this.request(url), securityKey);
+  }
+
+  private async getDetails(securityKey: string, movieId: string): Promise<any> {
+    const url = `${CASTLE_BASE}/film-api/v1.1/movie?channel=${CHANNEL}&clientType=${CLIENT}&lang=${LANG}&movieId=${movieId}&packageName=${PKG}`;
+    return this.decryptedJson(await this.request(url), securityKey);
+  }
+
+  private async getVideo2(
+    securityKey: string,
+    movieId: string,
+    episodeId: string,
+    resolution = 2
+  ): Promise<any> {
+    const url = `${CASTLE_BASE}/film-api/v2.0.1/movie/getVideo2?clientType=${CLIENT}&packageName=${PKG}&channel=${CHANNEL}&lang=${LANG}`;
+    const body = {
+      mode: "1",
+      appMarket: "GuanWang",
+      clientType: "1",
+      woolUser: "false",
+      apkSignKey: APK_SIGN_KEY,
+      androidVersion: "13",
+      movieId: String(movieId),
+      episodeId: String(episodeId),
+      isNewUser: "true",
+      resolution: String(resolution),
+      packageName: PKG,
+    };
+    const r = await this.request(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    return this.decryptedJson(r, securityKey);
+  }
+
+  private async getVideoV1(
+    securityKey: string,
+    movieId: string,
+    episodeId: string,
+    languageId: string,
+    resolution = 2
+  ): Promise<any> {
+    const params = new URLSearchParams({
+      apkSignKey: APK_SIGN_KEY,
+      channel: CHANNEL,
+      clientType: CLIENT,
+      episodeId: String(episodeId),
+      lang: LANG,
+      languageId: String(languageId),
+      mode: "1",
+      movieId: String(movieId),
+      packageName: PKG,
+      resolution: String(resolution),
+    });
+    const url = `${CASTLE_BASE}/film-api/v1.9.1/movie/getVideo?${params}`;
+    return this.decryptedJson(await this.request(url), securityKey);
+  }
+
+  // ---- helpers ----------------------------------------------------------
+
+  private extractDataBlock(obj: any): any {
+    if (obj && typeof obj.data === "object" && obj.data) return obj.data;
+    return obj && typeof obj === "object" ? obj : {};
+  }
+
+  private qualityValue(quality?: string): number {
+    if (!quality) return 0;
+    let q = String(quality).toLowerCase();
+    q = q.replace(/^(sd|hd|fhd|uhd|4k)\s*/, "").replace(/p$/, "").trim();
+    if (q === "4k" || q === "2160") return 2160;
+    const known = [1440, 1080, 720, 480, 360, 240];
+    const n = parseInt(q, 10);
+    if (known.includes(n)) return n;
+    return n > 0 ? n : 0;
+  }
+
+  private formatSize(size: any): string {
+    if (typeof size === "number" && size > 0) {
+      return size > 1_000_000_000
+        ? `${(size / 1_000_000_000).toFixed(2)} GB`
+        : `${Math.round(size / 1_000_000)} MB`;
+    }
+    return "Unknown";
+  }
+
+  private async getTmdbDetails(
+    tmdbId: number,
+    mediaType: "movie" | "tv"
+  ): Promise<TmdbInfo> {
+    const endpoint = mediaType === "tv" ? "tv" : "movie";
+    const url = `${TMDB_BASE_URL}/${endpoint}/${tmdbId}?api_key=${this.tmdbKey}&append_to_response=external_ids`;
+    const r = await this.request(url);
+    const data = await r.json();
+    const title = mediaType === "tv" ? data.name : data.title;
+    const releaseDate =
+      mediaType === "tv" ? data.first_air_date : data.release_date;
+    const year = releaseDate ? parseInt(String(releaseDate).split("-")[0], 10) : null;
+    return { title, year, tmdbId };
+  }
+
+  private findMovieId(searchResult: any, tmdbInfo: TmdbInfo): string {
+    const data = this.extractDataBlock(searchResult);
+    const rows: any[] = data.rows || [];
+    if (!rows.length) throw new Error("No search results found");
+    const searchTitle = (tmdbInfo.title || "").toLowerCase();
+
+    for (const item of rows) {
+      const itemTitle = String(item.title || item.name || "").toLowerCase();
+      if (
+        itemTitle &&
+        (itemTitle.includes(searchTitle) || searchTitle.includes(itemTitle))
+      ) {
+        const id = item.id || item.redirectId || item.redirectIdStr;
+        if (id) return String(id);
+      }
+    }
+    const first = rows[0];
+    const id = first.id || first.redirectId || first.redirectIdStr;
+    if (id) return String(id);
+    throw new Error("Could not extract movie ID from search results");
+  }
+
+  private processVideoResponse(
+    videoData: any,
+    media: TmdbInfo,
+    season: number,
+    episode: number,
+    resolution: number,
+    languageInfo: string
+  ): CastleStream[] {
+    const streams: CastleStream[] = [];
+    const data = this.extractDataBlock(videoData);
+    const videoUrl: string | undefined = data.videoUrl;
+    if (!videoUrl) return streams;
+
+    let mediaTitle = media.title || "Unknown";
+    if (media.year) mediaTitle += ` (${media.year})`;
+    if (season && episode) {
+      mediaTitle = `${media.title} S${String(season).padStart(2, "0")}E${String(
+        episode
+      ).padStart(2, "0")}`;
+    }
+
+    const quality = QUALITY_MAP[resolution] || `${resolution}p`;
+
+    if (Array.isArray(data.videos)) {
+      for (const video of data.videos) {
+        let q = String(
+          video.resolutionDescription || video.resolution || quality
+        ).replace(/^(SD|HD|FHD)\s+/i, "");
+        const name = languageInfo
+          ? `Castle ${languageInfo} - ${q}`
+          : `Castle - ${q}`;
+        streams.push({
+          name,
+          title: mediaTitle,
+          url: video.url || videoUrl,
+          quality: q,
+          size: this.formatSize(video.size),
+          provider: "castle",
+        });
+      }
+    } else {
+      const name = languageInfo
+        ? `Castle ${languageInfo} - ${quality}`
+        : `Castle - ${quality}`;
+      streams.push({
+        name,
+        title: mediaTitle,
+        url: videoUrl,
+        quality,
+        size: this.formatSize(data.size),
+        provider: "castle",
+      });
+    }
+    return streams;
+  }
+
+  async fetchSources(
+    tmdbId: number,
+    season = 0,
+    episode = 0
+  ): Promise<CastleStream[]> {
+    const mediaType: "movie" | "tv" = season && episode ? "tv" : "movie";
+    try {
+      const tmdbInfo = await this.getTmdbDetails(tmdbId, mediaType);
+      const securityKey = await this.getSecurityKey();
+
+      const searchTerm = tmdbInfo.year
+        ? `${tmdbInfo.title} ${tmdbInfo.year}`
+        : tmdbInfo.title;
+      const searchResult = await this.searchCastle(securityKey, searchTerm);
+      let movieId = this.findMovieId(searchResult, tmdbInfo);
+
+      let details = await this.getDetails(securityKey, movieId);
+
+      if (mediaType === "tv") {
+        const data = this.extractDataBlock(details);
+        const seasons: any[] = data.seasons || [];
+        const s = seasons.find((x) => x.number === season);
+        if (s && s.movieId && String(s.movieId) !== movieId) {
+          movieId = String(s.movieId);
+          details = await this.getDetails(securityKey, movieId);
+        }
+      }
+
+      const data = this.extractDataBlock(details);
+      const episodes: any[] = data.episodes || [];
+
+      let episodeId: string | null = null;
+      if (mediaType === "tv") {
+        const ep = episodes.find((e) => e.number === episode);
+        if (ep && ep.id) episodeId = String(ep.id);
+      } else if (episodes.length) {
+        episodeId = String(episodes[0].id);
+      }
+      if (!episodeId) throw new Error("Could not find episode ID");
+
+      const epObj = episodes.find((e) => String(e.id) === episodeId);
+      const tracks: any[] = epObj?.tracks || [];
+
+      const resolution = 2;
+      let allStreams: CastleStream[] = [];
+
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        const langName =
+          track.languageName || track.abbreviate || `Lang${i + 1}`;
+        if (track.existIndividualVideo && track.languageId) {
+          try {
+            const videoData = await this.getVideoV1(
+              securityKey,
+              movieId,
+              episodeId,
+              String(track.languageId),
+              resolution
+            );
+            const langStreams = this.processVideoResponse(
+              videoData,
+              tmdbInfo,
+              season,
+              episode,
+              resolution,
+              `[${langName}]`
+            );
+            allStreams.push(...langStreams);
+          } catch (e: any) {
+            console.error(`[Castle] ${langName}: v1 failed - ${e?.message || e}`);
+          }
+        }
+      }
+
+      if (!allStreams.length) {
+        const videoData = await this.getVideo2(
+          securityKey,
+          movieId,
+          episodeId,
+          resolution
+        );
+        allStreams = this.processVideoResponse(
+          videoData,
+          tmdbInfo,
+          season,
+          episode,
+          resolution,
+          "[Shared]"
+        );
+      }
+
+      allStreams.sort(
+        (a, b) => this.qualityValue(b.quality) - this.qualityValue(a.quality)
+      );
+      return allStreams;
+    } catch (e: any) {
+      console.error(`[Castle] Error: ${e?.message || e}`);
+      return [];
+    }
+  }
+}
+
+import type { SourceModule } from "./types";
+
+const _castle = new CastleScraper();
+
+// hlowb.com HLS streams play directly. De-dupe by url (the qualities often share
+// one master playlist) and keep the highest first.
+export const castle: SourceModule = {
+  id: "castle",
+  name: "Steve",
+  label: "HLS · multi-language",
+  active: true,
+  rank: 5,
+  async fetch(ctx) {
+    const streams = await _castle
+      .fetchSources(ctx.tmdbId, ctx.season, ctx.episode)
+      .catch(() => []);
+    if (!streams.length) return null;
+    const seen = new Set<string>();
+    const out = [];
+    for (const s of streams) {
+      if (seen.has(s.url)) continue;
+      seen.add(s.url);
+      out.push({
+        file: s.url,
+        label: s.quality.replace(/p$/i, ""),
+        type: (s.url.includes(".m3u8")
+          ? "hls"
+          : s.url.includes(".mpd")
+          ? "dash"
+          : "mp4") as "hls" | "dash" | "mp4",
+      });
+    }
+    return { streams: out };
+  },
+};

lib/scraper/cinesu.ts

@@ -0,0 +1,276 @@
+import crypto from "crypto";
+import type { SourceModule, SourceStream } from "./types";
+
+// Server-only CineSu resolver (cine.su). Fetches an encrypted octet-stream,
+// decrypts it with a salted-SHA256 keystream + per-byte mask, and rebuilds each
+// HLS variant. The /v1/s path token rotates per site build, so it's scraped out
+// of the page JS automatically (see getApiToken).
+
+const BASE_URL = "https://cine.su";
+// Last-known credentials, used only as a fallback if live extraction fails.
+const FALLBACK_TOKEN = "4f069b6a3007";
+const FALLBACK_SALT =
+  "ac99adcd819fb92558bbc706dc13d74ed73971fc3619056e56a63a08d1496099";
+const UA =
+  "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36";
+
+// ---- Rotating credential extraction ------------------------------------
+// Two per-build secrets live in a Next.js chunk and rotate on every deploy:
+//   • the path token — `…="<12 hex>"`, used as `/v1/s/${token}/m/…`
+//   • the hash salt  — `` `<64 hex>:${e}` `` inside the salted-hash function
+// The chunk, variable, and both values rotate, so we scrape them live + cache.
+interface CineSuCreds {
+  token: string;
+  salt: string;
+}
+let credsCache: { creds: CineSuCreds; at: number } | null = null;
+const CREDS_TTL = 6 * 60 * 60 * 1000; // 6h
+
+function credsFromJs(js: string): CineSuCreds | null {
+  if (!js.includes("/v1/s/")) return null;
+  // token: the variable used in `/v1/s/${VAR}/m/`, then its literal.
+  let token: string | null = null;
+  const vm = js.match(/\/v1\/s\/\$\{(\w+)\}\/m\//);
+  if (vm) {
+    const t = js.match(new RegExp(`\\b${vm[1]}\\s*=\\s*["']([0-9a-f]{12})["']`));
+    if (t) token = t[1];
+  }
+  if (!token) {
+    const g = js.match(/["']([0-9a-f]{12})["']/); // lone 12-hex literal
+    if (g) token = g[1];
+  }
+  // salt: the 64-hex literal at the head of the `<salt>:${...}` template.
+  const sm = js.match(/([0-9a-f]{64}):\$\{/);
+  const salt = sm ? sm[1] : null;
+  if (token && salt) return { token, salt };
+  return null;
+}
+
+async function extractCreds(): Promise<CineSuCreds | null> {
+  const headers = { "User-Agent": UA };
+  const page = await fetch(`${BASE_URL}/en/watch-movie/1339713`, {
+    headers,
+    cache: "no-store",
+  });
+  if (!page.ok) return null;
+  const html = await page.text();
+  const chunks = [
+    ...new Set(
+      [...html.matchAll(/\/_next\/static\/chunks\/[a-z0-9]+\.js/g)].map(
+        (x) => x[0]
+      )
+    ),
+  ];
+  const bodies = await Promise.all(
+    chunks.map((p) =>
+      fetch(`${BASE_URL}${p}`, { headers, cache: "no-store" })
+        .then((r) => (r.ok ? r.text() : null))
+        .catch(() => null)
+    )
+  );
+  for (const js of bodies) {
+    const c = js && credsFromJs(js);
+    if (c) return c;
+  }
+  return null;
+}
+
+async function getApiCreds(force = false): Promise<CineSuCreds> {
+  if (!force && credsCache && Date.now() - credsCache.at < CREDS_TTL) {
+    return credsCache.creds;
+  }
+  const c = await extractCreds().catch(() => null);
+  if (c) {
+    credsCache = { creds: c, at: Date.now() };
+    return c;
+  }
+  return credsCache?.creds ?? { token: FALLBACK_TOKEN, salt: FALLBACK_SALT };
+}
+
+function sha256(buf: Buffer): Buffer {
+  return crypto.createHash("sha256").update(buf).digest();
+}
+
+// Salted SHA-256 (salt rotates per build).
+function hs(text: string, salt: string): Buffer {
+  return sha256(Buffer.concat([Buffer.from(`${salt}:`), Buffer.from(text, "utf-8")]));
+}
+
+// Keystream: SHA-256(baseHash || counter) blocks concatenated to `length`.
+function hr(text: string, length: number, salt: string): Buffer {
+  const baseHash = hs(text, salt);
+  const out = Buffer.alloc(length);
+  let s = 0;
+  let a = 0;
+  while (s < length) {
+    const counter = Buffer.alloc(4);
+    counter.writeUInt32BE(a >>> 0, 0);
+    const h = sha256(Buffer.concat([baseHash, counter]));
+    const take = Math.min(h.length, length - s);
+    h.copy(out, s, 0, take);
+    s += h.length; // advance a full block even on the final partial copy
+    a += 1;
+  }
+  return out;
+}
+
+// Decrypt the octet-stream: subtract the rolling mask, then XOR the keystream.
+function hi(data: Buffer, tStr: string, salt: string): Buffer {
+  const iStream = hr(tStr, data.length, salt);
+  const rHash = hs(`mask:${tStr}`, salt);
+  const rLen = rHash.length;
+  const out = Buffer.alloc(data.length);
+  for (let t = 0; t < data.length; t++) {
+    const mask = (17 * t + rHash[t % rLen]) & 255;
+    let val = (data[t] - mask) & 255;
+    val = (val ^ iStream[t]) & 255;
+    out[t] = val;
+  }
+  return out;
+}
+
+export interface CineSuVariant {
+  label: string;
+  base: string;
+  init?: string;
+  target: number;
+  segs: { n: string; d?: number; x?: boolean }[];
+}
+
+// Fetch + decrypt the artifact and return the raw HLS variants. Exported so the
+// /api/cinesu playlist route can rebuild the M3U8 (the segments are PNG-wrapped
+// MPEG-TS, so they must be proxied + de-wrapped — see that route).
+export async function cineSuVariants(
+  tmdbId: number,
+  season: number,
+  episode: number
+): Promise<CineSuVariant[]> {
+  const isMovie = !season || !episode;
+  const mType = isMovie ? "movie" : "tv";
+  const sVal = isMovie ? 0 : season;
+  const eVal = isMovie ? 0 : episode;
+
+  const payload = { m: mType, t: tmdbId, s: sVal, e: eVal };
+  const blob = Buffer.from(JSON.stringify(payload)).toString("base64url");
+  const referer = `${BASE_URL}/en/watch-${mType}/${tmdbId}`;
+  const tStr = `artifact:${payload.m}:${payload.t}:${payload.s}:${payload.e}`;
+
+  const attempt = (apiToken: string) =>
+    fetch(`${BASE_URL}/v1/s/${apiToken}/m/${blob}`, {
+      headers: {
+        "User-Agent": UA,
+        accept: "application/octet-stream,*/*",
+        "accept-language": "en-GB,en;q=0.5",
+        Referer: referer,
+      },
+      cache: "no-store",
+    });
+
+  let creds = await getApiCreds();
+  let res = await attempt(creds.token);
+  // A 404 usually means the cached creds went stale (site redeployed) — scrape
+  // fresh ones and retry once.
+  if (res.status === 404) {
+    const fresh = await getApiCreds(true);
+    if (fresh.token !== creds.token) {
+      creds = fresh;
+      res = await attempt(creds.token);
+    }
+  }
+  if (!res.ok) return [];
+
+  const encData = Buffer.from(await res.arrayBuffer());
+  const decrypted = hi(encData, tStr, creds.salt);
+
+  let data: any;
+  try {
+    data = JSON.parse(decrypted.toString("utf-8"));
+  } catch {
+    return [];
+  }
+  // The decrypted payload echoes the token back as `tag`.
+  if (data.tag !== creds.token || !Array.isArray(data.variants)) return [];
+
+  return data.variants.map((v: any) => ({
+    label: cleanLabel(v.label),
+    base: v.base || "",
+    init: v.init || "",
+    target: v.target || 6,
+    segs: v.segs || [],
+  }));
+}
+
+// Strip the PNG-polyglot wrapper to expose the embedded MPEG-TS. The real TS
+// starts right after the PNG IEND chunk (IEND + its 4-byte CRC).
+export function stripPngWrapper(buf: Buffer): Buffer {
+  const i = buf.indexOf("IEND");
+  if (i >= 0) {
+    const ts = buf.subarray(i + 8);
+    if (ts[0] === 0x47) return ts; // valid TS sync byte
+  }
+  return buf;
+}
+
+// Build the M3U8 for one variant, routing each PNG-wrapped segment through a
+// proxy that de-wraps it. `proxySeg(url)` returns a same-origin TS url.
+export function buildVariantM3u8(
+  variant: CineSuVariant,
+  proxySeg: (url: string) => string
+): string {
+  const { base, init, target, segs } = variant;
+  const lines = [
+    "#EXTM3U",
+    "#EXT-X-VERSION:6",
+    `#EXT-X-TARGETDURATION:${Math.round(target)}`,
+    "#EXT-X-PLAYLIST-TYPE:VOD",
+    "#EXT-X-MEDIA-SEQUENCE:1",
+  ];
+  if (init) lines.push(`#EXT-X-MAP:URI="${proxySeg(base + init)}"`);
+  for (const seg of segs) {
+    if (seg.x) continue;
+    const dur = seg.d && seg.d > 0 ? seg.d : target;
+    lines.push(`#EXTINF:${dur.toFixed(3)},`);
+    lines.push(proxySeg(base + (seg.n || "")));
+  }
+  lines.push("#EXT-X-ENDLIST");
+  return lines.join("\n") + "\n";
+}
+
+// "1920x1080" -> "1080", "720p" -> "720", else the raw label (or "auto").
+function cleanLabel(label: any): string {
+  const s = String(label || "auto");
+  const wxh = s.match(/\d+\s*[x×]\s*(\d+)/i);
+  if (wxh) return wxh[1];
+  return s.replace(/p$/i, "");
+}
+
+export const cinesu: SourceModule = {
+  id: "cinesu",
+  name: "Alex",
+  label: "HLS · reconstructed",
+  active: true,
+  rank: 3,
+  async fetch(ctx) {
+    const variants = await cineSuVariants(
+      ctx.tmdbId,
+      ctx.season,
+      ctx.episode
+    ).catch(() => []);
+    if (!variants.length) return null;
+    // Each variant's playlist (and its PNG-wrapped segments) is served by the
+    // /api/cinesu route, so the encrypted sources payload stays small.
+    const qs = (v: number) =>
+      `m=${ctx.season && ctx.episode ? "tv" : "movie"}&t=${ctx.tmdbId}&s=${
+        ctx.season || 0
+      }&e=${ctx.episode || 0}&v=${v}`;
+    const streams: SourceStream[] = variants.map((variant, i) => ({
+      file: `${ctx.origin}/api/cinesu?${qs(i)}`,
+      label: variant.label,
+      type: "hls" as const,
+    }));
+    streams.sort(
+      (a, b) => (parseInt(b.label, 10) || 0) - (parseInt(a.label, 10) || 0)
+    );
+    return { streams };
+  },
+};

lib/scraper/flixhq.ts

@@ -0,0 +1,692 @@
+import crypto from "crypto";
+
+// Server-only FlixHQ source resolver. Searches flixhq.one for a TMDB title,
+// locates the watch page (and episode for TV), picks a non-videasy/vidking
+// server embed, then runs the megacloud/rabbitstream access flow
+// (challenge → attest → captcha PoW → playback) and AES-GCM-decrypts the
+// playback payload to recover the master HLS url + caption tracks.
+//
+// The resulting stream plays directly (no proxying required).
+
+const MAIN_URL = "https://flixhq.one";
+const UA =
+  "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36";
+
+export interface FlixHqSource {
+  file: string;
+  label: string;
+  type: string;
+}
+
+export interface FlixHqSub {
+  url: string;
+  label: string;
+  language: string;
+}
+
+export interface FlixHqResult {
+  sources: FlixHqSource[];
+  subtitles: FlixHqSub[];
+  provider: string;
+}
+
+interface TmdbInfo {
+  title: string;
+  mediaType: "movie" | "tv";
+  year: number | null;
+  runtime: number | null;
+  season: number;
+  episode: number;
+}
+
+interface SearchResult {
+  title: string;
+  link: string;
+  year: number;
+  runtime: number;
+  mediaType: string;
+}
+
+// ---------------------------------------------------------------------------
+// base64url helpers
+// ---------------------------------------------------------------------------
+function decodeB64Url(s: string): Buffer {
+  return Buffer.from(s, "base64url");
+}
+function encodeB64Url(b: Buffer): string {
+  return b.toString("base64url");
+}
+
+// ---------------------------------------------------------------------------
+// Proof-of-work hash (port of the megacloud captcha solver)
+// ---------------------------------------------------------------------------
+const BE = 512;
+const LT = 511;
+const DR = 2;
+const LR = 2654435761;
+const HR = 2246822519;
+
+function yeFast(t: number[]): void {
+  t[0] = (t[0] + t[1]) >>> 0;
+  let x = (t[3] ^ t[0]) >>> 0;
+  t[3] = ((x << 16) | (x >>> 16)) >>> 0;
+  t[2] = (t[2] + t[3]) >>> 0;
+  x = (t[1] ^ t[2]) >>> 0;
+  t[1] = ((x << 12) | (x >>> 20)) >>> 0;
+  t[0] = (t[0] + t[1]) >>> 0;
+  x = (t[3] ^ t[0]) >>> 0;
+  t[3] = ((x << 8) | (x >>> 24)) >>> 0;
+  t[2] = (t[2] + t[3]) >>> 0;
+  x = (t[1] ^ t[2]) >>> 0;
+  t[1] = ((x << 7) | (x >>> 25)) >>> 0;
+}
+
+function gr(input: Buffer): number[] {
+  const e = [1779033703, 3144134277, 1013904242, 2773480762];
+  for (const b of input) {
+    e[0] = (e[0] + b) >>> 0;
+    e[0] = ((e[0] << 7) | (e[0] >>> 25)) >>> 0;
+    yeFast(e);
+  }
+  for (let i = 0; i < 8; i++) yeFast(e);
+
+  const r = new Array<number>(BE);
+  for (let i = 0; i < BE; i++) {
+    yeFast(e);
+    r[i] = (e[0] ^ e[2]) >>> 0;
+  }
+
+  for (let d = 0; d < DR; d++) {
+    for (let s = 0; s < BE; s++) {
+      const a = r[s] & LT;
+      let c = (r[s] + r[a]) >>> 0;
+      c = ((c << 13) | (c >>> 19)) >>> 0;
+      c = (c ^ (Math.imul(r[(s + 1) & LT], LR) >>> 0)) >>> 0;
+      r[s] = c;
+      e[0] = (e[0] ^ c) >>> 0;
+      yeFast(e);
+    }
+  }
+
+  const n = new Array<number>(8);
+  const o = BE / 8;
+  for (let i = 0; i < 8; i++) {
+    yeFast(e);
+    let sVal = e[0] >>> 0;
+    const a = i * o;
+    for (let c = 0; c < o; c++) {
+      const d = r[a + c];
+      sVal = (sVal + d) >>> 0;
+      sVal = ((sVal << 5) | (sVal >>> 27)) >>> 0;
+      sVal = (sVal ^ (Math.imul(d, HR) >>> 0)) >>> 0;
+    }
+    n[i] = (sVal ^ e[2]) >>> 0;
+  }
+  return n;
+}
+
+// Count leading zero bits across the 8-word digest (difficulty check).
+function wr(t: number[]): number {
+  let eVal = 0;
+  for (const n of t) {
+    if (n === 0) eVal += 32;
+    else return eVal + Math.clz32(n);
+  }
+  return eVal;
+}
+
+// ---------------------------------------------------------------------------
+// Lightweight string similarity (Jaro-Winkler) for title scoring.
+// ---------------------------------------------------------------------------
+function jaro(a: string, b: string): number {
+  if (a === b) return 1;
+  const la = a.length;
+  const lb = b.length;
+  if (la === 0 || lb === 0) return 0;
+  const range = Math.max(0, Math.floor(Math.max(la, lb) / 2) - 1);
+  const aMatch = new Array<boolean>(la).fill(false);
+  const bMatch = new Array<boolean>(lb).fill(false);
+  let matches = 0;
+  for (let i = 0; i < la; i++) {
+    const start = Math.max(0, i - range);
+    const end = Math.min(i + range + 1, lb);
+    for (let j = start; j < end; j++) {
+      if (bMatch[j] || a[i] !== b[j]) continue;
+      aMatch[i] = true;
+      bMatch[j] = true;
+      matches++;
+      break;
+    }
+  }
+  if (matches === 0) return 0;
+  let t = 0;
+  let k = 0;
+  for (let i = 0; i < la; i++) {
+    if (!aMatch[i]) continue;
+    while (!bMatch[k]) k++;
+    if (a[i] !== b[k]) t++;
+    k++;
+  }
+  t /= 2;
+  return (matches / la + matches / lb + (matches - t) / matches) / 3;
+}
+
+function jaroWinkler(a: string, b: string): number {
+  const j = jaro(a, b);
+  let prefix = 0;
+  for (let i = 0; i < Math.min(4, a.length, b.length); i++) {
+    if (a[i] === b[i]) prefix++;
+    else break;
+  }
+  return j + prefix * 0.1 * (1 - j);
+}
+
+// ---------------------------------------------------------------------------
+// Best-effort 2-letter language code from a caption track label.
+// ---------------------------------------------------------------------------
+function guessLang(label: string): string {
+  const n = (label || "").toLowerCase();
+  if (n.includes("english")) return "en";
+  if (n.includes("spanish") || n.includes("español")) return "es";
+  if (n.includes("french") || n.includes("français")) return "fr";
+  if (n.includes("german") || n.includes("deutsch")) return "de";
+  if (n.includes("portuguese") || n.includes("português")) return "pt";
+  if (n.includes("italian")) return "it";
+  if (n.includes("arabic")) return "ar";
+  if (n.includes("russian")) return "ru";
+  if (n.includes("japanese")) return "ja";
+  if (n.includes("korean")) return "ko";
+  if (n.includes("chinese") || n.includes("mandarin")) return "zh";
+  if (n.includes("hindi")) return "hi";
+  return "";
+}
+
+export class FlixHqScraper {
+  private tmdbKey =
+    process.env.TMDB_API_KEY || "";
+
+  async fetchSources(
+    tmdbId: number,
+    season = 0,
+    episode = 0
+  ): Promise<FlixHqResult | null> {
+    try {
+      const mediaType: "movie" | "tv" =
+        season > 0 && episode > 0 ? "tv" : "movie";
+
+      const tmdb = await this.fetchTmdbInfo(tmdbId, mediaType, season, episode);
+      const results = await this.search(tmdb.title);
+      const scored = this.scoreResults(tmdb, results);
+      if (!scored.length) return null;
+
+      let watchUrl = scored[0].link;
+
+      if (mediaType === "tv") {
+        const ep = await this.extractEpisodeLink(watchUrl, season, episode);
+        if (!ep) return null;
+        watchUrl = ep;
+      }
+
+      const servers = await this.getServers(watchUrl, mediaType === "tv");
+      let embed: string | null = null;
+      for (const srv of servers) {
+        const name = String(srv?.name || "").toLowerCase();
+        if (!name.includes("videasy") && !name.includes("vidking")) {
+          embed = srv?.link || null;
+          if (embed) break;
+        }
+      }
+      if (!embed) return null;
+
+      return await this.extractRabbitstream(embed);
+    } catch (e: any) {
+      console.error("FlixHqScraper Error:", e?.message || e);
+      return null;
+    }
+  }
+
+  // ---- internals -------------------------------------------------------
+
+  private async httpGet(url: string, init?: RequestInit): Promise<string> {
+    for (let i = 0; i < 2; i++) {
+      try {
+        const r = await fetch(url, {
+          ...init,
+          headers: { "User-Agent": UA, ...(init?.headers || {}) },
+        });
+        if (r.ok) return await r.text();
+      } catch {
+        /* retry */
+      }
+      await new Promise((res) => setTimeout(res, 500));
+    }
+    throw new Error(`Failed to fetch ${url}`);
+  }
+
+  private async fetchTmdbInfo(
+    tmdbId: number,
+    mediaType: "movie" | "tv",
+    season: number,
+    episode: number
+  ): Promise<TmdbInfo> {
+    const r = await fetch(
+      `https://api.themoviedb.org/3/${mediaType}/${tmdbId}?api_key=${this.tmdbKey}&language=en-US`
+    );
+    if (!r.ok) throw new Error("Failed to fetch data from TMDB.");
+    const d = await r.json();
+    const title: string = d.title || d.name || "";
+    const dateStr: string = d.release_date || d.first_air_date || "";
+    const year = dateStr.length >= 4 ? parseInt(dateStr.slice(0, 4), 10) : null;
+    const runtime =
+      mediaType === "movie"
+        ? d.runtime ?? null
+        : Array.isArray(d.episode_run_time)
+        ? d.episode_run_time[0] ?? null
+        : null;
+    return { title, mediaType, year, runtime, season, episode };
+  }
+
+  private async search(query: string): Promise<SearchResult[]> {
+    const html = await this.httpGet(
+      `${MAIN_URL}/search?keyword=${encodeURIComponent(query)}`
+    );
+    const results: SearchResult[] = [];
+
+    // Each result lives in a .flw-item block; split on the class marker.
+    const chunks = html.split("flw-item");
+    for (let i = 1; i < chunks.length; i++) {
+      const chunk = chunks[i];
+      const nameMatch = chunk.match(
+        /class="film-name"[^>]*>\s*<a\s+href="([^"]+)"[^>]*title="([^"]*)"/
+      );
+      if (!nameMatch) continue;
+      let link = nameMatch[1];
+      const title = decodeEntities(nameMatch[2]).trim();
+      if (!link.startsWith("http")) link = `${MAIN_URL}${link}`;
+
+      let year = 0;
+      let runtime = 0;
+      const infoRe = /class="fdi-item[^"]*"[^>]*>\s*([^<]+?)\s*</g;
+      let m: RegExpExecArray | null;
+      while ((m = infoRe.exec(chunk))) {
+        const txt = m[1].trim();
+        if (/^\d{4}$/.test(txt)) year = parseInt(txt, 10);
+        else if (/^\d+m$/.test(txt)) runtime = parseInt(txt.slice(0, -1), 10);
+      }
+
+      const typeMatch = chunk.match(/class="fdi-type"[^>]*>\s*([^<]+?)\s*</);
+      const mediaType = typeMatch ? typeMatch[1].trim().toLowerCase() : "movie";
+
+      results.push({ title, link, year, runtime, mediaType });
+    }
+    return results;
+  }
+
+  private scoreResults(tmdb: TmdbInfo, results: SearchResult[]): SearchResult[] {
+    const dur = tmdb.runtime || 0;
+    const scored: { score: number; res: SearchResult }[] = [];
+    results.forEach((res, idx) => {
+      if (
+        tmdb.mediaType === "movie" &&
+        dur > 0 &&
+        res.runtime > 0 &&
+        Math.abs(dur - res.runtime) > 60
+      ) {
+        return;
+      }
+      let score =
+        jaroWinkler(tmdb.title.toLowerCase(), res.title.toLowerCase()) * 2000;
+      if (tmdb.mediaType === res.mediaType) score += 500;
+      score += 100 - Math.min(idx, 50);
+      if (tmdb.year && res.year > 0) {
+        if (tmdb.year === res.year) score += 800;
+        else if (Math.abs(tmdb.year - res.year) <= 1) score += 300;
+      }
+      if (
+        tmdb.mediaType === "movie" &&
+        dur > 0 &&
+        res.runtime > 0 &&
+        Math.abs(dur - res.runtime) <= 10
+      ) {
+        score += 1000;
+      }
+      scored.push({ score, res });
+    });
+    scored.sort((a, b) => b.score - a.score);
+    return scored.map((s) => s.res);
+  }
+
+  private async extractEpisodeLink(
+    seriesUrl: string,
+    season: number,
+    episode: number
+  ): Promise<string | null> {
+    const html = await this.httpGet(seriesUrl);
+    const target = `s${String(season).padStart(2, "0")}-e${String(
+      episode
+    ).padStart(2, "0")}`;
+    const re = /class="eps-item[^"]*"[^>]*href="([^"]+)"|href="([^"]+)"[^>]*class="eps-item/g;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(html))) {
+      const link = m[1] || m[2];
+      if (link && link.includes(target)) {
+        return link.startsWith("http") ? link : `${MAIN_URL}${link}`;
+      }
+    }
+    return null;
+  }
+
+  private async getServers(
+    watchUrl: string,
+    isTv: boolean
+  ): Promise<any[]> {
+    const html = await this.httpGet(watchUrl);
+
+    let token: string | null = null;
+    const sel = isTv ? "series-player" : "main-wrapper";
+    const selMatch = html.match(
+      new RegExp(`id="${sel}"[^>]*data-token="([^"]+)"`)
+    );
+    if (selMatch) token = selMatch[1];
+    if (!token) {
+      const generic = html.match(/data-token=["']([^"']+)["']/);
+      if (generic) token = generic[1];
+    }
+    if (!token) throw new Error("No data-token found.");
+
+    const body = new URLSearchParams();
+    body.set(isTv ? "players_show" : "players", token);
+
+    const r = await fetch(`${MAIN_URL}/ajax/ajax.php`, {
+      method: "POST",
+      headers: {
+        "User-Agent": UA,
+        "X-Requested-With": "XMLHttpRequest",
+        Referer: watchUrl,
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: body.toString(),
+    });
+    const data = await r.json();
+    return Array.isArray(data) ? data : [data];
+  }
+
+  private async extractRabbitstream(
+    embedUrl: string
+  ): Promise<FlixHqResult | null> {
+    const parsed = new URL(embedUrl);
+    const baseApi = `${parsed.protocol}//${parsed.host}`;
+    const idMatch = embedUrl.match(/\/e\/([a-zA-Z0-9_-]+)/);
+    if (!idMatch) throw new Error("No video id in embed url");
+    const videoId = idMatch[1];
+
+    // 1. Challenge
+    const r1 = await fetch(`${baseApi}/api/videos/access/challenge`, {
+      method: "POST",
+      headers: {
+        "User-Agent": UA,
+        Referer: embedUrl,
+        "X-Requested-With": "XMLHttpRequest",
+        "Content-Type": "application/json",
+      },
+    });
+    const j1 = await r1.json();
+    const nonce: string = j1.nonce || "";
+    const challengeId: string = j1.challenge_id || "";
+
+    // 2. Attest — ECDSA P-256 signature over the nonce + JWK public key.
+    const { privateKey, publicKey } = crypto.generateKeyPairSync("ec", {
+      namedCurve: "P-256",
+    });
+    const sigB64 = encodeB64Url(
+      crypto.sign("sha256", Buffer.from(nonce), privateKey)
+    );
+    const pubJwk = publicKey.export({ format: "jwk" }) as {
+      x: string;
+      y: string;
+    };
+    const jwk = {
+      crv: "P-256",
+      ext: true,
+      key_ops: ["verify"],
+      kty: "EC",
+      x: pubJwk.x,
+      y: pubJwk.y,
+    };
+
+    const ua = UA;
+    const clientPayload = {
+      user_agent: ua,
+      architecture: "x86",
+      bitness: "64",
+      platform: "Windows",
+      platform_version: "10.0.0",
+      model: "",
+      ua_full_version: "124.0.0.0",
+      brand_full_versions: [{ brand: "Chromium", version: "124.0.0.0" }],
+      pixel_ratio: 1,
+      screen_width: 1920,
+      screen_height: 1080,
+      color_depth: 24,
+      languages: ["en-US"],
+      timezone: "UTC",
+      hardware_concurrency: 8,
+      device_memory: 8,
+      touch_points: 0,
+      webgl_vendor: "Google Inc. (Google)",
+      webgl_renderer:
+        "ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE)), SwiftShader driver)",
+      canvas_hash: "_xjcrc8La-Vnxpr6a6vNFOOdnRcHHQ0tzgT_V3atRqo",
+      audio_hash: "RyBmlOc4cA7XhqmvkyO40eo8sOa5q-CFlrTnf70qADY",
+      pointer_type: "fine,hover",
+      extra: { vendor: "Google Inc." },
+    };
+
+    const vId = crypto.randomUUID().replace(/-/g, "");
+    const dId = crypto.randomUUID().replace(/-/g, "");
+
+    const r2 = await fetch(`${baseApi}/api/videos/access/attest`, {
+      method: "POST",
+      headers: {
+        "User-Agent": ua,
+        Referer: embedUrl,
+        "X-Requested-With": "XMLHttpRequest",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        viewer_id: vId,
+        device_id: dId,
+        challenge_id: challengeId,
+        nonce,
+        signature: sigB64,
+        public_key: jwk,
+        client: clientPayload,
+        storage: {},
+        attributes: { entropy: "high" },
+      }),
+    });
+    const att = await r2.json();
+    const token: string = att.token || "";
+    const conf: number = att.confidence ?? 0;
+    const avId: string = att.viewer_id || "";
+    const adId: string = att.device_id || "";
+
+    // 3. Captcha — solve the proof-of-work challenge if present.
+    const sessionId = crypto.randomUUID().replace(/-/g, "");
+    const capHeaders = {
+      "User-Agent": ua,
+      Origin: baseApi,
+      Referer: embedUrl,
+      "X-Requested-With": "XMLHttpRequest",
+      "X-Playback-Session-Id": sessionId,
+      "Content-Type": "application/json",
+    };
+    const rCap = await fetch(
+      `${baseApi}/api/videos/${videoId}/embed/captcha`,
+      {
+        method: "POST",
+        headers: capHeaders,
+        body: JSON.stringify({
+          fingerprint: {
+            token,
+            viewer_id: vId,
+            device_id: dId,
+            confidence: conf,
+          },
+        }),
+      }
+    );
+    const cap = await rCap.json();
+
+    let newToken = token;
+    if (cap.pow_nonce && cap.pow_token) {
+      const difficulty = cap.pow_difficulty ?? 2;
+      let solution = 0;
+      while (wr(gr(Buffer.from(`${cap.pow_nonce}:${solution}`))) < difficulty) {
+        solution++;
+      }
+      const rVer = await fetch(
+        `${baseApi}/api/videos/${videoId}/embed/captcha/verify`,
+        {
+          method: "POST",
+          headers: capHeaders,
+          body: JSON.stringify({
+            pow_token: cap.pow_token,
+            solution: String(solution),
+            fingerprint: {
+              token,
+              viewer_id: avId,
+              device_id: adId,
+              confidence: conf,
+            },
+          }),
+        }
+      );
+      const ver = await rVer.json();
+      newToken = ver.token || token;
+    }
+
+    // 4. Playback
+    const pbHeaders: Record<string, string> = {
+      "User-Agent": ua,
+      Origin: baseApi,
+      Referer: embedUrl,
+      "X-Requested-With": "XMLHttpRequest",
+      "X-Playback-Session-Id": sessionId,
+      "Content-Type": "application/json",
+    };
+    if (newToken !== token) pbHeaders["X-Captcha-Token"] = newToken;
+
+    const r3 = await fetch(
+      `${baseApi}/api/videos/${videoId}/embed/playback`,
+      {
+        method: "POST",
+        headers: pbHeaders,
+        body: JSON.stringify({
+          fingerprint: {
+            token,
+            viewer_id: avId,
+            device_id: adId,
+            confidence: conf,
+          },
+        }),
+      }
+    );
+    const j3 = await r3.json();
+    const playback = j3.playback;
+    if (!playback) throw new Error("No playback in response");
+
+    // 5. Decrypt the AES-GCM payload.
+    const kParts: string[] = playback.key_parts || [];
+    const vStr = String(playback.version ?? "").trim();
+    let keyBytes: Buffer;
+    if (/^\d+$/.test(vStr) && kParts.length) {
+      const v = parseInt(vStr, 10);
+      if (v >= 1 && v <= kParts.length && 31 - v >= 1 && 31 - v <= kParts.length) {
+        keyBytes = Buffer.concat([
+          decodeB64Url(kParts[v - 1]),
+          decodeB64Url(kParts[31 - v - 1]),
+        ]);
+      } else {
+        keyBytes = Buffer.concat(kParts.map(decodeB64Url));
+      }
+    } else {
+      keyBytes = Buffer.concat(kParts.map(decodeB64Url));
+    }
+
+    const iv = decodeB64Url(playback.iv || "");
+    const payload = decodeB64Url(playback.payload || "");
+    const tag = payload.subarray(payload.length - 16);
+    const ciphertext = payload.subarray(0, payload.length - 16);
+
+    const decipher = crypto.createDecipheriv("aes-256-gcm", keyBytes, iv);
+    decipher.setAuthTag(tag);
+    const decrypted = Buffer.concat([
+      decipher.update(ciphertext),
+      decipher.final(),
+    ]);
+    const data = JSON.parse(decrypted.toString("utf-8"));
+
+    const masterUrl: string | undefined = data?.sources?.[0]?.url;
+    if (!masterUrl) throw new Error("No stream url in decrypted payload");
+
+    const type = masterUrl.includes(".m3u8")
+      ? "hls"
+      : masterUrl.includes(".mpd")
+      ? "dash"
+      : "mp4";
+
+    const subtitles: FlixHqSub[] = (data.tracks || [])
+      .filter((t: any) => t.kind === "captions" && t.file)
+      .map((t: any) => ({
+        url: t.file,
+        label: t.label || "",
+        language: guessLang(t.label || ""),
+      }));
+
+    return {
+      sources: [{ file: masterUrl, label: "auto", type }],
+      subtitles,
+      provider: "FlixHQ",
+    };
+  }
+}
+
+// Minimal HTML entity decode for titles pulled from attributes.
+function decodeEntities(s: string): string {
+  return s
+    .replace(/&amp;/g, "&")
+    .replace(/&#039;/g, "'")
+    .replace(/&#39;/g, "'")
+    .replace(/&quot;/g, '"')
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">");
+}
+
+import type { SourceModule } from "./types";
+
+const _flixhq = new FlixHqScraper();
+
+// megacloud/rabbitstream streams + captions play directly (no proxy needed).
+export const flixhq: SourceModule = {
+  id: "flixhq",
+  name: "Efe",
+  label: "HLS · built-in subs",
+  active: true,
+  rank: 6,
+  async fetch(ctx) {
+    const r = await _flixhq
+      .fetchSources(ctx.tmdbId, ctx.season, ctx.episode)
+      .catch(() => null);
+    if (!r || !r.sources.length) return null;
+    return {
+      streams: r.sources as any,
+      subtitles: r.subtitles.map((s) => ({
+        url: s.url,
+        display: s.label,
+        language: s.language,
+        source: "Efe",
+      })),
+    };
+  },
+};

lib/scraper/index.ts

@@ -0,0 +1,80 @@
+// ─────────────────────────────────────────────────────────────────────────
+// Source registry
+//
+// To add a source: create a file here that exports a `SourceModule` (id, name,
+// label, active, rank, fetch), then add one import + one array entry below.
+// Everything else (the /api/sources route, the player's server list, failover)
+// is driven off this list.
+//
+// Display names are overridable per-source via env, e.g.
+//   SOURCE_ONEROOM_NAME="Server 1"   SOURCE_FLIXHQ_NAME="Server 2"
+// (uppercase the source id). Handy for rebranding without touching code.
+// ─────────────────────────────────────────────────────────────────────────
+
+import type { SourceModule, SourceMeta } from "./types";
+import { oneroom } from "./oneroom";
+import { insertunit } from "./insertunit";
+import { flixhq } from "./flixhq";
+import { castle } from "./castle";
+import { cinesu } from "./cinesu";
+import { vidnest } from "./vidnest";
+import { vidrock } from "./vidrock";
+import { vixsrc } from "./vixsrc";
+
+const REGISTERED: SourceModule[] = [
+  oneroom,
+  insertunit,
+  flixhq,
+  castle,
+  cinesu,
+  vidnest,
+  vidrock,
+  vixsrc,
+];
+
+/** Env display-name override for a source id (SOURCE_<ID>_NAME). */
+function nameFor(id: string, fallback: string): string {
+  return process.env[`SOURCE_${id.toUpperCase().replace(/[^A-Z0-9]/g, "_")}_NAME`] || fallback;
+}
+
+const byRank = (a: SourceModule, b: SourceModule) =>
+  (a.rank ?? 100) - (b.rank ?? 100);
+
+/** All active sources, ordered by rank (used for failover + default order). */
+export function activeSources(): SourceModule[] {
+  return REGISTERED.filter((s) => s.active).sort(byRank);
+}
+
+/**
+ * Resolve a source by id. Accepts a plain id ("oneroom"), a parent id, or a
+ * "parent:child" id. The returned module's name honours any env override.
+ */
+export function getSource(id: string): SourceModule | undefined {
+  const wanted = id || activeSources()[0]?.id;
+  if (!wanted) return undefined;
+  const [parentId, childId] = wanted.split(":");
+  const parent = REGISTERED.find((s) => s.id === parentId && s.active);
+  if (!parent) return undefined;
+  if (!childId) {
+    return { ...parent, name: nameFor(parent.id, parent.name) };
+  }
+  const child = parent.children?.find((c) => c.id === childId);
+  if (!child) return undefined;
+  return {
+    id: wanted,
+    name: `${nameFor(parent.id, parent.name)} · ${child.name}`,
+    label: parent.label,
+    active: true,
+    fetch: child.fetch,
+  };
+}
+
+/** Client-safe metadata for building the player's server list. */
+export function sourceList(): SourceMeta[] {
+  return activeSources().map((s) => ({
+    id: s.id,
+    name: nameFor(s.id, s.name),
+    label: s.label,
+    children: s.children?.map((c) => ({ id: c.id, name: c.name })),
+  }));
+}

lib/scraper/insertunit.ts

@@ -0,0 +1,216 @@
+// Server-only Insertunit source resolver (api.insertunit.ws). Resolves a TMDB
+// id to an IMDB id, scrapes the embed HTML, and extracts the dash/hls streams,
+// audio-track names and cc (subtitle) list. Streams live on interkh.com and
+// require the insertunit Referer, so they must be proxied.
+
+export interface InsertunitResult {
+  dash: string | null;
+  dasha: string | null;
+  hls: string | null;
+  audio: { names: string[]; order: number[] } | null;
+  cc: { url: string; name: string }[] | null;
+}
+
+const HEADERS: Record<string, string> = {
+  accept:
+    "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8",
+  "accept-language": "en-GB,en;q=0.9",
+  "cache-control": "max-age=0",
+  "sec-ch-ua":
+    '"Chromium";v="148", "Brave";v="148", "Not/A)Brand";v="99"',
+  "sec-ch-ua-mobile": "?0",
+  "sec-ch-ua-platform": '"macOS"',
+  "sec-fetch-dest": "document",
+  "sec-fetch-mode": "navigate",
+  "sec-fetch-site": "none",
+  "sec-fetch-user": "?1",
+  "upgrade-insecure-requests": "1",
+};
+
+export const INSERTUNIT_REFERER = "https://api.insertunit.ws/";
+
+function safeJsonLoad<T = any>(s: string): T | null {
+  try {
+    return JSON.parse(s) as T;
+  } catch {
+    // strip trailing commas from sloppy JS objects, retry
+    const clean = s.replace(/,\s*}/g, "}").replace(/,\s*\]/g, "]");
+    try {
+      return JSON.parse(clean) as T;
+    } catch {
+      return null;
+    }
+  }
+}
+
+export class InsertunitScraper {
+  private tmdbKey =
+    process.env.TMDB_API_KEY || "";
+
+  private async getImdbId(tmdbId: number, isTv: boolean): Promise<string | null> {
+    const mt = isTv ? "tv" : "movie";
+    try {
+      const r = await fetch(
+        `https://api.themoviedb.org/3/${mt}/${tmdbId}/external_ids?api_key=${this.tmdbKey}`
+      );
+      if (!r.ok) return null;
+      const d = await r.json();
+      return d.imdb_id || null;
+    } catch {
+      return null;
+    }
+  }
+
+  // Finds the dynamic token suffix appended to media URLs to bypass 403s.
+  private extractDynamicToken(html: string): string {
+    const varMatch = html.match(
+      /o\[k\]\s*\+=\s*'&'\s*\+\s*([a-zA-Z0-9_]+);/
+    );
+    if (!varMatch) return "";
+    const name = varMatch[1];
+    const valMatch = html.match(
+      new RegExp(`${name}\\s*=\\s*"([^"]+)"`)
+    );
+    if (!valMatch) return "";
+    return `&${valMatch[1]}`;
+  }
+
+  async fetchSources(
+    tmdbId: number,
+    season = 0,
+    episode = 0
+  ): Promise<InsertunitResult | null> {
+    const isTv = !!(season && episode);
+    const imdb = await this.getImdbId(tmdbId, isTv);
+    if (!imdb) return null;
+
+    let html: string;
+    try {
+      const r = await fetch(`https://api.insertunit.ws/embed/imdb/${imdb}`, {
+        headers: HEADERS,
+        cache: "no-store", // fresh tokens each resolve
+      });
+      if (!r.ok) return null;
+      html = await r.text();
+    } catch {
+      return null;
+    }
+
+    return isTv
+      ? this.parseTv(html, season, episode)
+      : this.parseMovie(html);
+  }
+
+  private parseMovie(html: string): InsertunitResult | null {
+    const m = html.match(/source:\s*({[\s\S]*?})/);
+    if (!m) return null;
+    const src = m[1];
+    const tok = this.extractDynamicToken(html);
+
+    const dash = src.match(/dash:\s*"(.*?)"/);
+    const dasha = src.match(/dasha:\s*"(.*?)"/);
+    const hls = src.match(/hls:\s*"(.*?)"/);
+    const audio = src.match(/audio:\s*({[\s\S]*?})/);
+    const cc = src.match(/cc:\s*(\[[\s\S]*?\])/);
+
+    return {
+      dash: dash ? dash[1] + tok : null,
+      dasha: dasha ? dasha[1] + tok : null,
+      hls: hls ? hls[1] + tok : null,
+      audio: audio ? safeJsonLoad(audio[1]) : null,
+      cc: cc ? safeJsonLoad(cc[1]) : null,
+    };
+  }
+
+  private parseTv(
+    html: string,
+    season: number,
+    episode: number
+  ): InsertunitResult | null {
+    // Isolate the season block to avoid cross-season episode mismatches.
+    const seasonRe = new RegExp(
+      `"season":\\s*${season}\\s*,\\s*"blocked"[\\s\\S]*?(?="season":\\s*\\d+\\s*,|$)`
+    );
+    const sm = html.match(seasonRe);
+    if (!sm) return null;
+    const seasonHtml = sm[0];
+
+    const epRe = new RegExp(
+      `"episode":\\s*"${episode}"[\\s\\S]*?(?="episode":\\s*"\\d+"|$)`
+    );
+    const em = seasonHtml.match(epRe);
+    if (!em) return null;
+    const eh = em[0];
+    const tok = this.extractDynamicToken(html);
+
+    const dash = eh.match(/"dash":\s*"(.*?)"/);
+    const dasha = eh.match(/"dasha":\s*"(.*?)"/);
+    const hls = eh.match(/"hls":\s*"(.*?)"/);
+    const audio = eh.match(/"audio":\s*({[\s\S]*?})/);
+    const cc = eh.match(/"cc":\s*(\[[\s\S]*?\])/);
+
+    return {
+      dash: dash ? dash[1] + tok : null,
+      dasha: dasha ? dasha[1] + tok : null,
+      hls: hls ? hls[1] + tok : null,
+      audio: audio ? safeJsonLoad(audio[1]) : null,
+      cc: cc ? safeJsonLoad(cc[1]) : null,
+    };
+  }
+}
+
+import type { SourceModule } from "./types";
+
+// Best-effort language code from an Insertunit cc track name.
+function guessLang(name: string): string {
+  const n = (name || "").toLowerCase();
+  if (n.includes("eng") || n.includes("english")) return "en";
+  if (n.includes("рус") || n.includes("rus")) return "ru";
+  if (n.includes("укр") || n.includes("ukr")) return "uk";
+  if (n.includes("span") || n.includes("esp")) return "es";
+  if (n.includes("fr")) return "fr";
+  if (n.includes("de") || n.includes("ger")) return "de";
+  return "";
+}
+
+const _insertunit = new InsertunitScraper();
+
+// interkh streams need the insertunit Referer, so both streams and cc subs are
+// proxied. Prefer DASH (its <BaseURL>[0] is a real CDN host; the HLS variant
+// uses an "x-bc" placeholder host that 410s).
+export const insertunit: SourceModule = {
+  id: "insertunit",
+  name: "Ari",
+  label: "Multi-audio · built-in subs",
+  active: true,
+  rank: 2,
+  async fetch(ctx) {
+    const r = await _insertunit
+      .fetchSources(ctx.tmdbId, ctx.season, ctx.episode)
+      .catch(() => null);
+    if (!r) return null;
+    const ref = INSERTUNIT_REFERER;
+    const streams = [];
+    if (r.dash) {
+      streams.push({
+        file: ctx.proxyStream(r.dash, ref),
+        label: "auto",
+        type: "dash" as const,
+      });
+    } else if (r.hls) {
+      streams.push({
+        file: ctx.proxyStream(r.hls, ref),
+        label: "auto",
+        type: "hls" as const,
+      });
+    }
+    if (!streams.length) return null;
+    const subtitles = (r.cc || []).map((c) => ({
+      url: ctx.proxySub(c.url, ref),
+      display: c.name,
+      language: guessLang(c.name),
+      source: "Ari",
+    }));
+    return { streams, subtitles };
+  },
+};

lib/scraper/oneroom.ts

@@ -0,0 +1,151 @@
+import type { SourceModule } from "./types";
+
+// Server-only source resolver (MovieBox / aoneroom backend). The real stream
+// URLs are hotlink-locked to a themoviebox.org referer, so they're routed
+// through this app's own /api/stream proxy (ctx.proxyStream) — everything flows
+// through your VPS, no third-party proxy or worker.
+const MAIN_URL = "https://themoviebox.org";
+const API_BASE = "https://h5-api.aoneroom.com";
+const REFERER = "https://themoviebox.org/";
+const TMDB_KEY = process.env.TMDB_API_KEY || "";
+
+let bearerToken: string | null = null;
+
+function clientTimeToken(): string {
+  const crypto = require("crypto") as typeof import("crypto");
+  const ts = Math.floor(Date.now() / 1000);
+  const rev = ts.toString().split("").reverse().join("");
+  const md5 = crypto.createHash("md5").update(rev).digest("hex");
+  return `${ts},${md5}`;
+}
+
+function baseHeaders() {
+  return {
+    Accept: "application/json",
+    "User-Agent":
+      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36",
+    "X-Client-Info": JSON.stringify({ timezone: "Asia/Jakarta" }),
+    "Content-Type": "application/json",
+  };
+}
+
+async function getBearerToken(): Promise<string> {
+  if (bearerToken) return bearerToken;
+  try {
+    const resp = await fetch(
+      `${API_BASE}/wefeed-h5api-bff/home?host=themoviebox.org`,
+      {
+        headers: {
+          ...baseHeaders(),
+          Authorization: "",
+          "X-Request-Lang": "en",
+          "X-Client-Token": clientTimeToken(),
+          Referer: `${MAIN_URL}/`,
+        },
+      }
+    );
+    const xUser = resp.headers.get("x-user");
+    if (xUser) {
+      const userData = JSON.parse(xUser);
+      if (userData.token) {
+        bearerToken = userData.token;
+        return bearerToken!;
+      }
+    }
+  } catch {
+    /* ignore */
+  }
+  return "";
+}
+
+async function fetchSources(tmdbId: number, season = 0, episode = 0) {
+  const isTv = season > 0;
+  const mediaType = isTv ? "tv" : "movie";
+  const tmdbResp = await fetch(
+    `https://api.themoviedb.org/3/${mediaType}/${tmdbId}?api_key=${TMDB_KEY}`
+  );
+  const tmdbData = await tmdbResp.json();
+  const title = tmdbData.title || tmdbData.name;
+  if (!title) return null;
+
+  const token = await getBearerToken();
+  const searchResp = await fetch(
+    `${API_BASE}/wefeed-h5api-bff/subject/search`,
+    {
+      method: "POST",
+      headers: {
+        ...baseHeaders(),
+        Authorization: token ? `Bearer ${token}` : "",
+        "X-Request-Lang": "en",
+        "X-Client-Token": clientTimeToken(),
+        Referer: `${MAIN_URL}/`,
+      },
+      body: JSON.stringify({ keyword: title, page: 1, perPage: 28, subjectType: 0 }),
+    }
+  );
+  const searchData = await searchResp.json();
+  const items = searchData?.data?.items || [];
+
+  const targetType = isTv ? [2, 3] : [1];
+  const match = items.find(
+    (item: any) =>
+      targetType.includes(parseInt(item.subjectType)) &&
+      item.title.toLowerCase().includes(title.toLowerCase())
+  );
+  if (!match) return null;
+
+  const detailPath = match.detailPath;
+  const playResp = await fetch(
+    `${API_BASE}/wefeed-h5api-bff/subject/play?subjectId=${match.subjectId}&se=${season}&ep=${episode}&detailPath=${detailPath}`,
+    {
+      headers: {
+        ...baseHeaders(),
+        "X-Request-Lang": "en",
+        "X-Client-Token": clientTimeToken(),
+        Referer: `${MAIN_URL}/movies/${detailPath}`,
+      },
+    }
+  );
+  const playData = await playResp.json();
+  if (!playData?.data?.hasResource) return null;
+
+  const streams = [
+    ...(playData.data.streams || []),
+    ...(playData.data.hls || []),
+    ...(playData.data.dash || []),
+  ];
+
+  return streams
+    .filter((s: any) => s.url?.startsWith("http"))
+    .map((item: any) => {
+      const res = item.resolutions || "720";
+      const url: string = item.url;
+      return {
+        url, // raw upstream URL — proxied through /api/stream below
+        label: res.toString().replace("p", ""),
+        type: url.includes(".m3u8") ? "hls" : url.includes(".mpd") ? "dash" : "mp4",
+      };
+    })
+    .sort((a: any, b: any) => parseInt(b.label) - parseInt(a.label));
+}
+
+export const oneroom: SourceModule = {
+  id: "oneroom",
+  name: "Sunny",
+  label: "Multi-quality",
+  active: true,
+  rank: 1,
+  async fetch(ctx) {
+    const raw = await fetchSources(ctx.tmdbId, ctx.season, ctx.episode).catch(
+      () => null
+    );
+    if (!raw || !raw.length) return null;
+    // Route every stream through the VPS proxy with the required referer.
+    const streams = raw.map((s: any) => ({
+      file: ctx.proxyStream(s.url, REFERER),
+      label: s.label,
+      type: s.type,
+    }));
+    return { streams };
+  },
+};

lib/scraper/types.ts

@@ -0,0 +1,76 @@
+// Standard contract every source in this folder implements. Drop a new file
+// that exports a `SourceModule`, register it in ./index.ts, and it shows up in
+// the player automatically — no route or UI changes needed.
+
+export interface SourceStream {
+  file: string;
+  /** Quality label, e.g. "1080", "720", or "auto". */
+  label: string;
+  type: "hls" | "dash" | "mp4";
+}
+
+export interface SourceSubtitle {
+  url: string;
+  display: string;
+  language: string;
+  hi?: boolean;
+  source?: string;
+}
+
+export interface SourceResult {
+  streams: SourceStream[];
+  /** The source's OWN built-in subtitles. Wyzie is added as a default on top
+   *  by the route, so most sources can leave this empty. */
+  subtitles?: SourceSubtitle[];
+}
+
+export interface SourceContext {
+  tmdbId: number;
+  /** 0 for movies. */
+  season: number;
+  /** 0 for movies. */
+  episode: number;
+  /** This deployment's origin, e.g. "https://host" — for sources that need to
+   *  point at their own custom proxy route. */
+  origin: string;
+  /** Wrap an upstream stream URL so it's fetched via our /api/stream proxy
+   *  (use when the CDN needs a Referer or hides behind hotlink protection). */
+  proxyStream(url: string, referer?: string): string;
+  /** Wrap an upstream subtitle URL so it's served WebVTT via our /api/sub proxy. */
+  proxySub(url: string, referer?: string): string;
+}
+
+// A sub-provider inside a parent source (e.g. one of VidNest's upstreams).
+export interface SubSource {
+  /** Stable id within the parent, e.g. "klikxxi". */
+  id: string;
+  name: string;
+  fetch(ctx: SourceContext): Promise<SourceResult | null>;
+}
+
+export interface SourceModule {
+  /** Stable id used in URLs + persistence, e.g. "oneroom". */
+  id: string;
+  /** Display name shown in the player, e.g. "MovieBox". */
+  name: string;
+  /** Short line under the name in the server list. */
+  label: string;
+  /** Flip to false to hide a source without deleting the file. */
+  active: boolean;
+  /** Lower = listed first and tried first during failover. Defaults to 100. */
+  rank?: number;
+  /** Resolve playable streams (+ optional built-in subs) for a title. For a
+   *  parent source this aggregates/tries its children. */
+  fetch(ctx: SourceContext): Promise<SourceResult | null>;
+  /** Present on "parent" sources — selectable sub-providers. The parent's own
+   *  fetch tries them all; children can also be picked individually. */
+  children?: SubSource[];
+}
+
+// Lightweight metadata sent to the client to build the server list.
+export interface SourceMeta {
+  id: string;
+  name: string;
+  label: string;
+  children?: { id: string; name: string }[];
+}

lib/scraper/vidnest.ts

@@ -0,0 +1,230 @@
+import type { SourceModule, SubSource, SourceContext, SourceStream, SourceSubtitle } from "./types";
+
+// Server-only VidNest resolver (vidnest.fun). VidNest is a *parent* source: it
+// proxies ~11 upstream providers, each with its own JSON schema. Each provider
+// is exposed as a sub-source; the parent tries them all (concurrently) and
+// aggregates whatever resolves.
+
+const BASE_URL = "https://vidnest.fun";
+const API_BASE = "https://new.vidnest.fun";
+
+const HEADERS: Record<string, string> = {
+  "User-Agent":
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/150 Safari/537.36",
+  Accept: "application/json, text/javascript, */*; q=0.01",
+  "Accept-Language": "en-US,en;q=0.9",
+  Referer: `${BASE_URL}/`,
+  Origin: BASE_URL,
+};
+
+// VidNest scrambles its base64 with a custom alphabet.
+const VIDNEST_ALPHABET =
+  "RB0fpH8ZEyVLkv7c2i6MAJ5u3IKFDxlS1NTsnGaqmXYdUrtzjwObCgQP94hoeW+/";
+const STANDARD_ALPHABET =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+const TRANSLATE = new Map<string, string>();
+for (let i = 0; i < VIDNEST_ALPHABET.length; i++) {
+  TRANSLATE.set(VIDNEST_ALPHABET[i], STANDARD_ALPHABET[i]);
+}
+
+interface ServerDef {
+  path: string;
+  name: string;
+  query: string;
+  audio?: string;
+}
+
+// Upstream providers wrapped by VidNest.
+const SERVERS: ServerDef[] = [
+  { path: "moviebox", name: "MovieBox", query: "" },
+  { path: "allmovies", name: "AllMovies", query: "" },
+  { path: "catflix", name: "CatFlix", query: "" },
+  { path: "purstream", name: "PurStream", query: "", audio: "French" },
+  { path: "hollymoviehd", name: "HollyMovieHD", query: "" },
+  { path: "lamda", name: "Lamda", query: "" },
+  { path: "flixhq", name: "FlixHQ", query: "" },
+  { path: "vidlink", name: "VidLink", query: "" },
+  { path: "onehd", name: "OneHD", query: "?server=upcloud" },
+  { path: "klikxxi", name: "KlikXXI", query: "" },
+  { path: "delta", name: "Delta", query: "" },
+];
+
+function decodePayload(payload: string): any {
+  let p = payload;
+  const pad = p.length % 4;
+  if (pad) p += "=".repeat(4 - pad);
+  let std = "";
+  for (const ch of p) std += TRANSLATE.get(ch) ?? ch;
+  const json = Buffer.from(std, "base64").toString("utf-8");
+  return JSON.parse(json);
+}
+
+// Wrap a raw stream URL in VidNest's omss proxy (carries the required headers).
+function proxyUrl(url: string): string {
+  if (!url) return url;
+  const data = encodeURIComponent(
+    JSON.stringify({ url, headers: HEADERS })
+  );
+  return `https://omss.fstream.app/v1/proxy?data=${data}`;
+}
+
+function inferType(typeStr: string, url: string): SourceStream["type"] {
+  const t = String(typeStr || "").toLowerCase();
+  const u = (url || "").toLowerCase();
+  if (t === "hls" || u.includes(".m3u8")) return "hls";
+  if (t === "dash" || u.includes(".mpd")) return "dash";
+  if (u.includes(".mp4")) return "mp4";
+  return "hls";
+}
+
+function inferSubFmt(url: string): string {
+  const u = (url || "").toLowerCase();
+  if (u.includes(".srt")) return "srt";
+  if (u.includes(".ass")) return "ass";
+  return "vtt";
+}
+
+interface RawSource {
+  url: string;
+  type: string;
+  quality: string;
+  audio: string;
+}
+
+// Map a decrypted provider payload to a normalized {sources, subtitles} using
+// that provider's specific schema (ported from the reference scraper).
+function mapServer(path: string, data: any): {
+  sources: RawSource[];
+  subtitles: { url: string; lang: string }[];
+} {
+  const sources: RawSource[] = [];
+  const subtitles: { url: string; lang: string }[] = [];
+  try {
+    if (path === "klikxxi") {
+      for (const s of data.sources || [])
+        sources.push({ url: s.url, type: inferType(s.type, s.url), quality: s.quality || "Auto", audio: "English" });
+    } else if (path === "allmovies" || path === "delta") {
+      for (const s of data.streams || [])
+        sources.push({ url: s.url, type: inferType(s.type, s.url), quality: "Auto", audio: s.language || "Unknown" });
+    } else if (path === "onehd") {
+      if (data.url) sources.push({ url: data.url, type: inferType("", data.url), quality: "Auto", audio: "English" });
+      for (const sub of data.subtitles || []) subtitles.push({ url: sub.url, lang: sub.lang });
+    } else if (path === "hollymoviehd") {
+      for (const s of data.sources || [])
+        sources.push({ url: s.file, type: inferType(s.type, s.file), quality: s.label || "Auto", audio: "English" });
+    } else if (path === "vidlink") {
+      const stream = data?.data?.stream || {};
+      if (stream.playlist)
+        sources.push({ url: stream.playlist, type: inferType(stream.type, stream.playlist), quality: "Auto", audio: "English" });
+      for (const cap of stream.captions || []) subtitles.push({ url: cap.url, lang: cap.language });
+    } else if (path === "purstream") {
+      for (const s of data.sources || [])
+        sources.push({ url: s.url, type: inferType(s.format, s.url), quality: s.name || "Auto", audio: "French" });
+    } else if (path === "moviebox") {
+      for (const u of data.url || [])
+        sources.push({ url: u.link, type: inferType(u.type, u.link), quality: "Auto", audio: u.lang || "Unknown" });
+    } else if (path === "catflix" || path === "lamda" || path === "flixhq") {
+      // Generic shapes seen across the simpler providers.
+      const list = data.sources || data.streams || [];
+      for (const s of list)
+        sources.push({
+          url: s.url || s.file || s.link,
+          type: inferType(s.type || s.format, s.url || s.file || s.link || ""),
+          quality: s.quality || s.label || s.name || "Auto",
+          audio: s.language || s.lang || "Unknown",
+        });
+    }
+  } catch {
+    /* unexpected payload shape — skip */
+  }
+  return { sources: sources.filter((s) => s.url), subtitles: subtitles.filter((s) => s.url) };
+}
+
+async function fetchProvider(
+  def: ServerDef,
+  ctx: SourceContext
+): Promise<{ sources: RawSource[]; subtitles: { url: string; lang: string }[] }> {
+  const isMovie = !ctx.season || !ctx.episode;
+  const path = isMovie
+    ? `${API_BASE}/${def.path}/movie/${ctx.tmdbId}${def.query}`
+    : `${API_BASE}/${def.path}/tv/${ctx.tmdbId}/${ctx.season}/${ctx.episode}${def.query}`;
+  try {
+    const res = await fetch(path, {
+      headers: HEADERS,
+      cache: "no-store",
+      signal: AbortSignal.timeout(8000),
+    });
+    if (!res.ok) return { sources: [], subtitles: [] };
+    const json = await res.json();
+    if (!json?.data) return { sources: [], subtitles: [] };
+    return mapServer(def.path, decodePayload(json.data));
+  } catch {
+    return { sources: [], subtitles: [] };
+  }
+}
+
+function toResult(
+  raw: { sources: RawSource[]; subtitles: { url: string; lang: string }[] },
+  label: (s: RawSource, i: number) => string,
+  serverName: string
+): { streams: SourceStream[]; subtitles: SourceSubtitle[] } {
+  const streams: SourceStream[] = raw.sources.map((s, i) => ({
+    file: proxyUrl(s.url),
+    label: label(s, i),
+    type: s.type as SourceStream["type"],
+  }));
+  const subtitles: SourceSubtitle[] = raw.subtitles.map((s) => ({
+    url: proxyUrl(s.url),
+    display: s.lang || "Subtitle",
+    language: (s.lang || "").slice(0, 2).toLowerCase(),
+    source: serverName,
+  }));
+  return { streams, subtitles };
+}
+
+// A meaningful per-stream label for a single provider's result.
+function childLabel(s: RawSource, i: number): string {
+  if (/\d{3,4}/.test(s.quality)) return s.quality.replace(/p$/i, "");
+  if (s.audio && s.audio !== "Unknown") return s.audio;
+  return s.quality && s.quality !== "Auto" ? s.quality : `Source ${i + 1}`;
+}
+
+// Each provider becomes a selectable sub-source.
+const children: SubSource[] = SERVERS.map((def) => ({
+  id: def.path,
+  name: def.name,
+  async fetch(ctx) {
+    const raw = await fetchProvider(def, ctx);
+    if (!raw.sources.length) return null;
+    return toResult(raw, childLabel, def.name);
+  },
+}));
+
+export const vidnest: SourceModule = {
+  id: "vidnest",
+  name: "Makena",
+  label: "11 providers · auto-pick",
+  active: true,
+  rank: 4,
+  children,
+  // Parent: query every provider concurrently and aggregate. Each stream is
+  // labelled by its provider so the quality menu doubles as a source picker.
+  async fetch(ctx) {
+    const results = await Promise.all(
+      SERVERS.map(async (def) => {
+        const raw = await fetchProvider(def, ctx);
+        return raw.sources.length ? { def, raw } : null;
+      })
+    );
+    const streams: SourceStream[] = [];
+    const subtitles: SourceSubtitle[] = [];
+    for (const r of results) {
+      if (!r) continue;
+      const mapped = toResult(r.raw, () => r.def.name, r.def.name);
+      streams.push(...mapped.streams);
+      subtitles.push(...mapped.subtitles);
+    }
+    if (!streams.length) return null;
+    return { streams, subtitles };
+  },
+};

lib/scraper/vidrock.ts

@@ -0,0 +1,179 @@
+import crypto from "crypto";
+import type { SourceModule, SourceStream, SourceSubtitle } from "./types";
+
+// Server-only VidRock resolver (vidrock.net). The item id is AES-CBC encrypted
+// (key + IV derived from a fixed passphrase) to build the API path; streams are
+// then wrapped in VidRock's omss proxy. Some entries point at a CDN-selector
+// (hls2.vdrk.site) that has to be expanded into per-resolution streams.
+
+const BASE_URL = "https://vidrock.net/";
+const SUB_BASE = "https://sub.vdrk.site";
+const PROXY_PREFIX = "https://proxy.vidrock.store/";
+const PASSPHRASE = "x7k9mPqT2rWvY8zA5bC3nF6hJ2lK4mN9"; // 32 bytes → AES-256
+
+const HEADERS: Record<string, string> = {
+  "User-Agent":
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150 Safari/537.36",
+  Accept: "application/json, text/javascript, */*; q=0.01",
+  "Accept-Language": "en-US,en;q=0.9",
+  Referer: BASE_URL,
+  Origin: BASE_URL.replace(/\/$/, ""),
+};
+
+function encryptItemId(itemId: string): string {
+  const key = Buffer.from(PASSPHRASE, "utf-8");
+  const iv = key.subarray(0, 16);
+  const cipher = crypto.createCipheriv("aes-256-cbc", key, iv); // PKCS7 default
+  const enc = Buffer.concat([cipher.update(itemId, "utf-8"), cipher.final()]);
+  return enc.toString("base64url"); // url-safe, no padding
+}
+
+// VidRock plays through its own omss proxy (carries the required headers).
+function proxyUrl(url: string): string {
+  if (!url) return url;
+  const data = encodeURIComponent(JSON.stringify({ url, headers: HEADERS }));
+  return `https://omss.fstream.app/v1/proxy?data=${data}`;
+}
+
+interface RawSource {
+  url: string;
+  type: SourceStream["type"];
+  quality: string;
+  audio: string;
+}
+
+async function resolve(
+  tmdbId: number,
+  season: number,
+  episode: number
+): Promise<{ sources: RawSource[]; subs: { file: string; label: string }[] }> {
+  const isMovie = !season || !episode;
+  const itemId = isMovie ? `${tmdbId}` : `${tmdbId}_${season}_${episode}`;
+  const mediaType = isMovie ? "movie" : "tv";
+  const apiUrl = `${BASE_URL}api/${mediaType}/${encryptItemId(itemId)}`;
+
+  const sources: RawSource[] = [];
+  const subs = await fetchSubs(tmdbId, season, episode);
+
+  let data: any;
+  try {
+    const res = await fetch(apiUrl, {
+      headers: HEADERS,
+      cache: "no-store",
+      signal: AbortSignal.timeout(10000),
+    });
+    if (!res.ok) return { sources, subs };
+    data = await res.json();
+  } catch {
+    return { sources, subs };
+  }
+
+  for (const stream of Object.values<any>(data || {})) {
+    if (!stream || typeof stream !== "object") continue;
+    const streamUrl = stream.url;
+    if (!streamUrl) continue;
+    const audio = stream.language === "English" ? "eng" : stream.language || "Unknown";
+
+    if (String(streamUrl).includes("hls2.vdrk.site")) {
+      // CDN selector — expand into one stream per resolution.
+      try {
+        const cdnRes = await fetch(streamUrl, {
+          headers: HEADERS,
+          cache: "no-store",
+          signal: AbortSignal.timeout(8000),
+        });
+        if (!cdnRes.ok) continue;
+        const cdnData = await cdnRes.json();
+        for (const obj of cdnData || []) {
+          let finalUrl: string = obj.url || "";
+          if (finalUrl.startsWith(PROXY_PREFIX)) {
+            finalUrl = decodeURIComponent(
+              finalUrl.slice(PROXY_PREFIX.length).replace(/^\/+/, "")
+            );
+          }
+          if (!finalUrl) continue;
+          sources.push({
+            url: finalUrl,
+            type: finalUrl.toLowerCase().includes(".mp4") ? "mp4" : "hls",
+            quality: `${obj.resolution || "Unknown"}`,
+            audio,
+          });
+        }
+      } catch {
+        continue;
+      }
+    } else {
+      sources.push({ url: streamUrl, type: "hls", quality: "1080", audio });
+    }
+  }
+
+  return { sources, subs };
+}
+
+async function fetchSubs(
+  tmdbId: number,
+  season: number,
+  episode: number
+): Promise<{ file: string; label: string }[]> {
+  const isMovie = !season || !episode;
+  const url = isMovie
+    ? `${SUB_BASE}/v2/movie/${tmdbId}`
+    : `${SUB_BASE}/v2/tv/${tmdbId}/${season}/${episode}`;
+  try {
+    const res = await fetch(url, {
+      headers: HEADERS,
+      cache: "no-store",
+      signal: AbortSignal.timeout(8000),
+    });
+    if (!res.ok) return [];
+    const data = await res.json();
+    return (Array.isArray(data) ? data : [])
+      .filter((s: any) => s.file && s.label)
+      .map((s: any) => ({ file: s.file, label: s.label }));
+  } catch {
+    return [];
+  }
+}
+
+function langCode(label: string): string {
+  const map: Record<string, string> = {
+    english: "en", arabic: "ar", bengali: "bn", filipino: "tl", french: "fr",
+    indonesian: "id", malay: "ms", portuguese: "pt", russian: "ru", spanish: "es",
+    german: "de", italian: "it", turkish: "tr", hindi: "hi", korean: "ko",
+    japanese: "ja", chinese: "zh", dutch: "nl", polish: "pl", thai: "th",
+    vietnamese: "vi",
+  };
+  return map[label.toLowerCase()] || label.slice(0, 2).toLowerCase();
+}
+
+export const vidrock: SourceModule = {
+  id: "vidrock",
+  name: "Kai",
+  label: "Multi-CDN · built-in subs",
+  active: true,
+  rank: 7,
+  async fetch(ctx) {
+    const { sources, subs } = await resolve(
+      ctx.tmdbId,
+      ctx.season,
+      ctx.episode
+    );
+    if (!sources.length) return null;
+    const streams: SourceStream[] = sources.map((s) => ({
+      file: proxyUrl(s.url),
+      label: /^\d{3,4}$/.test(s.quality) ? s.quality : "auto",
+      type: s.type,
+    }));
+    // De-dupe by resolution, keep highest first.
+    streams.sort(
+      (a, b) => (parseInt(b.label, 10) || 0) - (parseInt(a.label, 10) || 0)
+    );
+    const subtitles: SourceSubtitle[] = subs.map((s) => ({
+      url: ctx.proxySub(s.file),
+      display: s.label,
+      language: langCode(s.label),
+      source: "Kai",
+    }));
+    return { streams, subtitles };
+  },
+};

lib/scraper/vixsrc.ts

@@ -0,0 +1,124 @@
+import type { SourceModule, SourceStream } from "./types";
+
+// Server-only VixSrc resolver (vixsrc.to). Hits the JSON API for a TMDB title to
+// get the embed iframe path, scrapes a short-lived token/expires/playlist out of
+// the embed HTML, then builds the signed master playlist URL. The master playlist
+// is parsed for the best resolution and its CDN needs a Referer, so it's wrapped
+// in our /api/stream proxy for playback.
+
+const BASE_URL = "https://vixsrc.to";
+
+const HEADERS: Record<string, string> = {
+  "User-Agent":
+    "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150 Safari/537.36",
+  Accept: "application/json, text/javascript, */*; q=0.01",
+  "Accept-Language": "en-US,en;q=0.9",
+  Referer: BASE_URL,
+  Origin: BASE_URL,
+};
+
+interface TokenData {
+  token: string;
+  expires: string;
+  playlist: string;
+}
+
+// JS Date.now() works in ms; VixSrc's `expires` is a unix-seconds string.
+function isTokenExpired(expires: string): boolean {
+  const expiration = parseInt(expires, 10);
+  if (!Number.isFinite(expiration)) return true;
+  return expiration * 1000 - 60000 < Date.now();
+}
+
+function extractTokenData(html: string): TokenData | null {
+  const token = html.match(/token["']\s*:\s*["']([^"']+)/)?.[1];
+  const expires = html.match(/expires["']\s*:\s*["']([^"']+)/)?.[1];
+  const playlist = html.match(/url\s*:\s*["']([^"']+)/)?.[1];
+
+  if (!token || !expires || !playlist) return null;
+  if (isTokenExpired(expires)) return null;
+
+  return { token, expires, playlist };
+}
+
+// Pull the highest RESOLUTION=NxH variant out of the HLS master manifest.
+function bestResolution(manifest: string): number | null {
+  let best: number | null = null;
+  const re = /#EXT-X-STREAM-INF:[^\n]*RESOLUTION=\d+x(\d+)/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(manifest))) {
+    const h = parseInt(m[1], 10);
+    if (Number.isFinite(h) && (best === null || h > best)) best = h;
+  }
+  return best;
+}
+
+async function resolveMaster(
+  tmdbId: number,
+  season: number,
+  episode: number
+): Promise<{ masterUrl: string; referer: string; height: number | null } | null> {
+  const isMovie = !season || !episode;
+  const apiUrl = isMovie
+    ? `${BASE_URL}/api/movie/${tmdbId}`
+    : `${BASE_URL}/api/tv/${tmdbId}/${season}/${episode}`;
+
+  const get = (url: string, headers: Record<string, string> = HEADERS) =>
+    fetch(url, {
+      headers,
+      cache: "no-store",
+      signal: AbortSignal.timeout(8000),
+    });
+
+  // 1. API → embed iframe path.
+  const apiRes = await get(apiUrl);
+  if (!apiRes.ok) return null;
+  const apiData = await apiRes.json().catch(() => null);
+  const sublink: string | undefined = apiData?.src;
+  if (!sublink) return null;
+
+  // 2. Embed HTML → token/expires/playlist.
+  const embedUrl = BASE_URL + sublink;
+  const htmlRes = await get(embedUrl);
+  if (!htmlRes.ok) return null;
+  const tokenData = extractTokenData(await htmlRes.text());
+  if (!tokenData) return null;
+
+  // 3. Build the signed master playlist URL.
+  const sep = tokenData.playlist.includes("?") ? "&" : "?";
+  const masterUrl = `${tokenData.playlist}${sep}token=${tokenData.token}&expires=${tokenData.expires}&h=1`;
+
+  // 4. Fetch the master to confirm it resolves + pick the best resolution.
+  const playlistRes = await get(masterUrl, { ...HEADERS, Referer: apiUrl });
+  if (!playlistRes.ok) return null;
+  const height = bestResolution(await playlistRes.text());
+  if (height === null) return null;
+
+  return { masterUrl, referer: apiUrl, height };
+}
+
+// VixSrc's CDN requires the Referer used to mint the playlist, so playback goes
+// through our /api/stream proxy. Subtitles are broken upstream, so we lean on the
+// route's default Wyzie/OpenSubtitles layer instead.
+export const vixsrc: SourceModule = {
+  id: "vixsrc",
+  name: "Noor",
+  label: "HLS · proxied",
+  active: true,
+  rank: 8,
+  async fetch(ctx) {
+    const resolved = await resolveMaster(
+      ctx.tmdbId,
+      ctx.season,
+      ctx.episode
+    ).catch(() => null);
+    if (!resolved) return null;
+
+    const stream: SourceStream = {
+      file: ctx.proxyStream(resolved.masterUrl, resolved.referer),
+      label: resolved.height ? String(resolved.height) : "auto",
+      type: "hls",
+    };
+    return { streams: [stream] };
+  },
+};

lib/security/tokens.ts

@@ -0,0 +1,75 @@
+import crypto from "crypto";
+
+/**
+ * Server-side signing for the stream/subtitle proxy. Upstream URLs are wrapped
+ * in a short-lived HMAC-signed token so /api/stream only ever proxies URLs this
+ * server itself minted — it can't be abused as an open proxy. The secret
+ * (APP_SECRET) never leaves the server.
+ */
+const SECRET =
+  process.env.APP_SECRET ||
+  "dev-only-insecure-secret-change-me-please-0123456789";
+
+function b64url(buf: Buffer): string {
+  return buf.toString("base64").replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function b64urlToBuf(s: string): Buffer {
+  const pad = s.length % 4 === 0 ? "" : "=".repeat(4 - (s.length % 4));
+  return Buffer.from(s.replace(/-/g, "+").replace(/_/g, "/") + pad, "base64");
+}
+function hmac(data: string): string {
+  return b64url(crypto.createHmac("sha256", SECRET).update(data).digest());
+}
+
+export function sign(payload: Record<string, unknown>, ttlSeconds: number): string {
+  const body = { ...payload, exp: Math.floor(Date.now() / 1000) + ttlSeconds };
+  const p = b64url(Buffer.from(JSON.stringify(body)));
+  return `${p}.${hmac(p)}`;
+}
+
+export function verify<T = Record<string, any>>(token: string | null): T | null {
+  if (!token || token.indexOf(".") < 0) return null;
+  const [p, sig] = token.split(".");
+  if (!p || !sig) return null;
+  const expected = hmac(p);
+  if (
+    sig.length !== expected.length ||
+    !crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(expected))
+  ) {
+    return null;
+  }
+  let body: any;
+  try {
+    body = JSON.parse(b64urlToBuf(p).toString("utf8"));
+  } catch {
+    return null;
+  }
+  if (typeof body.exp !== "number" || body.exp < Math.floor(Date.now() / 1000)) {
+    return null;
+  }
+  return body as T;
+}
+
+export interface StreamClaim {
+  k: "stream";
+  url: string;
+  ref?: string; // Referer to send upstream (some CDNs hotlink-lock manifests)
+  exp: number;
+}
+
+/** Wrap a real upstream stream/subtitle URL so it's proxied, not exposed. */
+export function mintStreamToken(url: string, ref?: string): string {
+  return sign({ k: "stream", url, ...(ref ? { ref } : {}) }, 60 * 60 * 3); // 3h
+}
+
+export interface DashBaseClaim {
+  k: "dbase";
+  url: string; // the real DASH <BaseURL>, ending in "/"
+  ref?: string;
+  exp: number;
+}
+
+/** Wrap a DASH BaseURL so segment paths can be appended and proxied. */
+export function mintDashBase(base: string, ref?: string): string {
+  return sign({ k: "dbase", url: base, ...(ref ? { ref } : {}) }, 60 * 60 * 3);
+}

lib/subtitles/flags.ts

@@ -0,0 +1,32 @@
+// Maps a subtitle language code (ISO 639-1, optionally with a region suffix
+// like "pt-BR" / "en_US") to a country flag image served by flagsapi.com.
+
+const LANG_TO_COUNTRY: Record<string, string> = {
+  en: "GB", es: "ES", pt: "PT", fr: "FR", de: "DE", it: "IT", ru: "RU",
+  ja: "JP", ko: "KR", zh: "CN", ar: "SA", nl: "NL", sv: "SE", no: "NO",
+  nb: "NO", nn: "NO", da: "DK", fi: "FI", pl: "PL", tr: "TR", el: "GR",
+  cs: "CZ", hu: "HU", ro: "RO", th: "TH", vi: "VN", id: "ID", he: "IL",
+  iw: "IL", hi: "IN", uk: "UA", sr: "RS", hr: "HR", sk: "SK", sl: "SI",
+  bg: "BG", is: "IS", et: "EE", lv: "LV", lt: "LT", fa: "IR", ms: "MY",
+  tl: "PH", fil: "PH", ca: "ES", eu: "ES", gl: "ES", ga: "IE", cy: "GB",
+  sq: "AL", mk: "MK", bs: "BA", be: "BY", ka: "GE", hy: "AM", az: "AZ",
+  kk: "KZ", uz: "UZ", mn: "MN", ne: "NP", si: "LK", ta: "IN", te: "IN",
+  ml: "IN", kn: "IN", bn: "BD", ur: "PK", pa: "IN", mr: "IN", gu: "IN",
+  af: "ZA", sw: "KE", am: "ET", zu: "ZA", la: "VA",
+};
+
+export type FlagSize = 16 | 24 | 32 | 48 | 64;
+
+export function flagUrl(
+  language?: string | null,
+  size: FlagSize = 24
+): string | null {
+  if (!language) return null;
+  const lc = language.toLowerCase().trim();
+  // Explicit region suffix wins, e.g. "pt-br" -> BR, "en_us" -> US.
+  const m = lc.match(/[-_]([a-z]{2})$/);
+  let cc = m ? m[1].toUpperCase() : undefined;
+  if (!cc) cc = LANG_TO_COUNTRY[lc.slice(0, 2)];
+  if (!cc) return null;
+  return `https://flagsapi.com/${cc}/flat/${size}.png`;
+}

lib/subtitles/opensubtitles.ts

@@ -0,0 +1,88 @@
+// Stremio OpenSubtitles v3 add-on. Keyed by IMDB id, so we first resolve the
+// TMDB id to an IMDB id. Returned as a shared subtitle layer (merged with Wyzie
+// in /api/sources) — these are the "built-in" OpenSubtitles tracks.
+
+const TMDB_KEY = process.env.TMDB_API_KEY || "";
+
+export interface OsSub {
+  url: string;
+  display: string;
+  language: string; // 2-letter best-effort
+  source: string;
+}
+
+async function tmdbToImdb(
+  tmdbId: number,
+  isTv: boolean
+): Promise<string | null> {
+  try {
+    const mt = isTv ? "tv" : "movie";
+    const r = await fetch(
+      `https://api.themoviedb.org/3/${mt}/${tmdbId}/external_ids?api_key=${TMDB_KEY}`,
+      { cache: "no-store" }
+    );
+    if (!r.ok) return null;
+    const d = await r.json();
+    return d.imdb_id || null;
+  } catch {
+    return null;
+  }
+}
+
+// 3-letter (ISO 639-2) → 2-letter (ISO 639-1), best effort.
+const THREE_TO_TWO: Record<string, string> = {
+  eng: "en", spa: "es", spl: "es", por: "pt", pob: "pt", fre: "fr", fra: "fr",
+  ger: "de", deu: "de", ita: "it", rus: "ru", ara: "ar", jpn: "ja", kor: "ko",
+  zho: "zh", chi: "zh", dut: "nl", nld: "nl", pol: "pl", tur: "tr", swe: "sv",
+  nor: "no", dan: "da", fin: "fi", hun: "hu", ron: "ro", rum: "ro", ell: "el",
+  ukr: "uk", bul: "bg", hrv: "hr", srp: "sr", slv: "sl", slo: "sk", slk: "sk",
+  cze: "cs", ces: "cs", heb: "he", hin: "hi", tha: "th", vie: "vi", ind: "id",
+  may: "ms", msa: "ms", fil: "tl", per: "fa", fas: "fa", est: "et", bos: "bs",
+  mac: "mk", mkd: "mk", alb: "sq", sqi: "sq", ben: "bn", sin: "si", khm: "km",
+};
+
+function langName(code2: string): string {
+  try {
+    return (
+      new Intl.DisplayNames(["en"], { type: "language" }).of(code2) || code2
+    );
+  } catch {
+    return code2;
+  }
+}
+
+export async function fetchOpenSubtitles(
+  tmdbId: number,
+  season?: number,
+  episode?: number
+): Promise<{ url: string; display: string; language: string }[]> {
+  const isTv = !!(season && episode);
+  const imdb = await tmdbToImdb(tmdbId, isTv);
+  if (!imdb) return [];
+
+  const url = isTv
+    ? `https://opensubtitles-v3.strem.io/subtitles/series/${imdb}:${season}:${episode}.json`
+    : `https://opensubtitles-v3.strem.io/subtitles/movie/${imdb}.json`;
+
+  try {
+    const r = await fetch(url, {
+      cache: "no-store",
+      signal: AbortSignal.timeout(8000),
+    });
+    if (!r.ok) return [];
+    const data = await r.json();
+    const list: any[] = data?.subtitles || [];
+    return list
+      .filter((s) => s.url && s.lang)
+      .map((s) => {
+        const two = THREE_TO_TWO[String(s.lang).toLowerCase()] || s.lang;
+        return {
+          url: s.url as string,
+          display: langName(two),
+          language: two,
+        };
+      });
+  } catch {
+    return [];
+  }
+}

lib/subtitles/vdrk.ts

@@ -0,0 +1,83 @@
+// Server-side subtitle lookup via sub.vdrk.site (keyed by TMDB id). Returns the
+// raw upstream .vtt/.srt URLs; the caller is responsible for proxying them.
+export interface VdrkSub {
+  label: string;
+  language: string;
+  file: string;
+}
+
+export async function fetchVdrkSubs(
+  type: "movie" | "tv",
+  tmdbId: number,
+  season = 0,
+  episode = 0
+): Promise<VdrkSub[]> {
+  const upstream =
+    type === "tv"
+      ? `https://sub.vdrk.site/v1/tv/${tmdbId}/${season || 1}/${episode || 1}`
+      : `https://sub.vdrk.site/v1/movie/${tmdbId}`;
+
+  try {
+    const res = await fetch(upstream, { cache: "no-store" });
+    if (!res.ok) return [];
+    const data = await res.json();
+    if (!Array.isArray(data)) return [];
+    return data
+      .filter((s: any) => s && s.file && s.label)
+      .map((s: any) => ({
+        label: s.label,
+        language: guessLang(s.label),
+        file: s.file,
+      }));
+  } catch {
+    return [];
+  }
+}
+
+// Best-effort language code (optionally with a region, e.g. "pt-BR") from a
+// vdrk subtitle label. Region suffixes drive the flag shown in the player.
+function guessLang(label: string): string {
+  const n = (label || "").toLowerCase();
+  if (n.includes("brazil")) return "pt-BR";
+  if (n.includes("english")) return "en";
+  if (n.includes("spanish") || n.includes("español") || n.includes("castilian"))
+    return "es";
+  if (n.includes("latino") || n.includes("latin")) return "es-MX";
+  if (n.includes("portuguese") || n.includes("português")) return "pt";
+  if (n.includes("french") || n.includes("français")) return "fr";
+  if (n.includes("german") || n.includes("deutsch")) return "de";
+  if (n.includes("italian")) return "it";
+  if (n.includes("russian")) return "ru";
+  if (n.includes("dutch")) return "nl";
+  if (n.includes("polish")) return "pl";
+  if (n.includes("turkish")) return "tr";
+  if (n.includes("arabic")) return "ar";
+  if (n.includes("chinese") || n.includes("mandarin")) return "zh";
+  if (n.includes("japanese")) return "ja";
+  if (n.includes("korean")) return "ko";
+  if (n.includes("hebrew")) return "he";
+  if (n.includes("hindi")) return "hi";
+  if (n.includes("thai")) return "th";
+  if (n.includes("vietnamese")) return "vi";
+  if (n.includes("indonesian")) return "id";
+  if (n.includes("persian") || n.includes("farsi")) return "fa";
+  if (n.includes("hungarian")) return "hu";
+  if (n.includes("romanian")) return "ro";
+  if (n.includes("ukrainian")) return "uk";
+  if (n.includes("bulgarian")) return "bg";
+  if (n.includes("croatian")) return "hr";
+  if (n.includes("slovak")) return "sk";
+  if (n.includes("danish")) return "da";
+  if (n.includes("swedish")) return "sv";
+  if (n.includes("norwegian")) return "no";
+  if (n.includes("finnish")) return "fi";
+  if (n.includes("greek")) return "el";
+  if (n.includes("czech")) return "cs";
+  if (n.includes("serbian")) return "sr";
+  if (n.includes("slovenian")) return "sl";
+  if (n.includes("icelandic")) return "is";
+  if (n.includes("estonian")) return "et";
+  if (n.includes("latvian")) return "lv";
+  if (n.includes("lithuanian")) return "lt";
+  return "";
+}

lib/tmdb.ts

@@ -0,0 +1,146 @@
+// TMDB helper. The API key is read server-side from env, with a fallback to the
+// key provided for this demo so the player page works out of the box.
+const TMDB_KEY =
+  process.env.TMDB_API_KEY || "";
+
+const BASE = "https://api.themoviedb.org/3";
+
+export const img = {
+  poster: (
+    path: string | null,
+    size: "w185" | "w342" | "w500" | "w780" | "original" = "w342"
+  ) => (path ? `https://image.tmdb.org/t/p/${size}${path}` : null),
+  backdrop: (path: string | null, size: "w780" | "w1280" | "original" = "w1280") =>
+    path ? `https://image.tmdb.org/t/p/${size}${path}` : null,
+};
+
+export type MediaType = "movie" | "tv";
+
+export interface TmdbItem {
+  id: number;
+  title: string;
+  year: string;
+  poster: string | null;
+  backdrop: string | null;
+  overview: string;
+  rating: number;
+  runtime: number | null;
+}
+
+function normalize(r: any): TmdbItem {
+  const date = r.release_date || r.first_air_date || "";
+  return {
+    id: r.id,
+    title: r.title || r.name || "Untitled",
+    year: date ? date.slice(0, 4) : "",
+    poster: r.poster_path,
+    backdrop: r.backdrop_path,
+    overview: r.overview || "",
+    rating: r.vote_average || 0,
+    runtime: r.runtime ?? (Array.isArray(r.episode_run_time) ? r.episode_run_time[0] : null) ?? null,
+  };
+}
+
+// Title logo (transparent PNG) for the player overlay. Prefers an English logo.
+export async function getLogo(
+  type: "movie" | "tv",
+  id: string
+): Promise<string | null> {
+  try {
+    const data = await tmdb(`/${type}/${id}/images`, {
+      include_image_language: "en,null",
+    });
+    const logos: any[] = data.logos || [];
+    const pick =
+      logos.find((l) => l.iso_639_1 === "en") || logos[0] || null;
+    return pick?.file_path
+      ? `https://image.tmdb.org/t/p/w500${pick.file_path}`
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+async function tmdb(path: string, params: Record<string, string> = {}) {
+  const url = new URL(BASE + path);
+  url.searchParams.set("api_key", TMDB_KEY);
+  Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
+  const res = await fetch(url.toString(), { next: { revalidate: 3600 } });
+  if (!res.ok) throw new Error(`TMDB ${res.status}`);
+  return res.json();
+}
+
+export async function getPopular(type: "movie" | "tv"): Promise<TmdbItem[]> {
+  const data = await tmdb(`/${type}/popular`);
+  return (data.results || []).map(normalize);
+}
+
+export async function getById(
+  type: "movie" | "tv",
+  id: string
+): Promise<TmdbItem | null> {
+  try {
+    const data = await tmdb(`/${type}/${id}`);
+    return normalize(data);
+  } catch {
+    return null;
+  }
+}
+
+export async function search(
+  type: "movie" | "tv",
+  query: string
+): Promise<TmdbItem[]> {
+  if (!query.trim()) return [];
+  const data = await tmdb(`/search/${type}`, { query });
+  return (data.results || []).map(normalize);
+}
+
+export interface TvSeasonInfo {
+  season: number;
+  episodeCount: number;
+  name: string;
+}
+
+// Season list for a TV show (used by the next-episode + episode-selector
+// features). Excludes specials (season 0).
+export async function getTvSeasons(id: string): Promise<TvSeasonInfo[]> {
+  try {
+    const data = await tmdb(`/tv/${id}`);
+    return (data.seasons || [])
+      .filter((s: any) => s.season_number >= 1 && s.episode_count > 0)
+      .map((s: any) => ({
+        season: s.season_number,
+        episodeCount: s.episode_count,
+        name: s.name || `Season ${s.season_number}`,
+      }));
+  } catch {
+    return [];
+  }
+}
+
+export interface TvEpisode {
+  episode: number;
+  name: string;
+  still: string | null;
+  overview: string;
+  runtime: number | null;
+}
+
+export async function getSeasonEpisodes(
+  id: string,
+  season: number
+): Promise<TvEpisode[]> {
+  try {
+    const data = await tmdb(`/tv/${id}/season/${season}`);
+    return (data.episodes || []).map((e: any) => ({
+      episode: e.episode_number,
+      name: e.name || `Episode ${e.episode_number}`,
+      still: e.still_path,
+      overview: e.overview || "",
+      runtime: e.runtime ?? null,
+    }));
+  } catch {
+    return [];
+  }
+}

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  // Lean, self-contained output for Docker / simple VPS deploys.
+  output: "standalone",
+  images: {
+    remotePatterns: [{ protocol: "https", hostname: "image.tmdb.org" }],
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vidsuper",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "dashjs": "^4.7.4",
+    "hls.js": "^1.5.13",
+    "next": "^16.2.9",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.6",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,59 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: [
+          "var(--font-montserrat)",
+          "var(--font-inter)",
+          "ui-sans-serif",
+          "system-ui",
+          "sans-serif",
+        ],
+      },
+      colors: {
+        brand: {
+          pink: "#f59ff1",
+          purple: "#8b5cf6",
+          violet: "#a855f7",
+        },
+      },
+      keyframes: {
+        "fade-in": {
+          "0%": { opacity: "0", transform: "translateY(12px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        "fade-in-slow": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+        float: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(-8px)" },
+        },
+        "pulse-glow": {
+          "0%, 100%": { opacity: "0.5" },
+          "50%": { opacity: "0.9" },
+        },
+        shimmer: {
+          "100%": { transform: "translateX(100%)" },
+        },
+      },
+      animation: {
+        "fade-in": "fade-in 0.7s ease-out both",
+        "fade-in-slow": "fade-in-slow 1s ease-out both",
+        float: "float 6s ease-in-out infinite",
+        "pulse-glow": "pulse-glow 4s ease-in-out infinite",
+        shimmer: "shimmer 2s infinite",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "downlevelIteration": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "wasm"
+  ]
+}