hackertube-zh 0.0.0-stage → 0.1.0

package/content/player.js

@@ -0,0 +1,215 @@
+// Isolated content script inside HackerTube's YouTube embed: receives the caption file from player-main.js,
+// regroups it into sentences, translates them a few minutes ahead of playback and draws the Chinese subtitles
+// over the video (inside the player element, so they also show in fullscreen).
+(() => {
+  const H = globalThis.HTZ;
+  const S = H.subtitles, R = H.runtime;
+
+  const anc = location.ancestorOrigins;
+  const origins = anc ? Array.from({ length: anc.length }, (_, i) => anc[i]) : [document.referrer];
+  const fromHackerTube = origins.some((o) => { try { return /(^|\.)hackertube\.org$/.test(new URL(o).hostname); } catch { return false; } });
+  // HTZ_ALLOW_ANY_HOST is only ever set by the local test harness (dev/), which loads this file as a page script
+  if (!fromHackerTube && !globalThis.HTZ_ALLOW_ANY_HOST) return;
+
+  const LOOKAHEAD_MS = 5 * 60 * 1000; // translate up to five minutes ahead: cost follows what is actually watched
+  const MAX_INFLIGHT = 2;
+
+  let settings = { ...R.DEFAULTS };
+  let vid = null, title = "";
+  let sentences = [], zh = [], st = []; // st: 0 = not sent, 1 = in flight, 2 = done, 3 = gave up
+  let gen = 0, inflight = 0, failures = 0, doneCount = 0;
+
+  const post = (type, data = {}) => window.postMessage({ source: "htz-iso", type, ...data }, "*");
+  const sendConfig = () => post("config", { enabled: settings.subMode !== "off" });
+  const player = () => document.getElementById("movie_player");
+  const video = () => document.querySelector("#movie_player video") || document.querySelector("video");
+
+  // ---------- overlay ----------
+  let overlay, zhLine, enLine, badge, badgeTimer, shown = "";
+  const ro = new ResizeObserver((entries) => {
+    for (const e of entries) e.target.style.setProperty("--htz-h", `${Math.round(e.contentRect.height)}px`);
+  });
+
+  function ensureOverlay() {
+    const p = player();
+    if (!p) return false;
+    if (overlay && overlay.isConnected && overlay.parentElement === p) return true;
+    overlay = document.createElement("div");
+    overlay.className = "htz-sub";
+    overlay.setAttribute("aria-hidden", "true");
+    zhLine = document.createElement("div"); zhLine.className = "htz-line htz-zh"; zhLine.lang = "zh-CN";
+    enLine = document.createElement("div"); enLine.className = "htz-line htz-en";
+    overlay.append(zhLine, enLine);
+    badge = document.createElement("div"); badge.className = "htz-badge";
+    p.append(overlay, badge);
+    ro.observe(p);
+    applyStyle();
+    return true;
+  }
+
+  function applyStyle() {
+    const p = player();
+    if (!p) return;
+    p.style.setProperty("--htz-scale", String(settings.subScale || 1));
+    p.style.setProperty("--htz-bottom", String(settings.subBottom ?? 8));
+    // our lines include the English, so YouTube's own captions would only duplicate them
+    p.classList.toggle("htz-hide-native", settings.subMode !== "off" && sentences.length > 0);
+  }
+
+  function say(msg, { ms = 4000, error = false } = {}) {
+    if (!ensureOverlay()) return;
+    clearTimeout(badgeTimer);
+    badge.textContent = msg;
+    badge.classList.toggle("err", error);
+    badge.classList.add("on");
+    if (ms) badgeTimer = setTimeout(() => badge.classList.remove("on"), ms);
+  }
+
+  function render() {
+    if (!overlay || !overlay.isConnected) { if (!sentences.length || !ensureOverlay()) return; }
+    const v = video();
+    const i = v && sentences.length && settings.subMode !== "off" ? S.findActive(sentences, v.currentTime * 1000) : -1;
+    let z = "", e = "";
+    if (i >= 0) {
+      const en = sentences[i].text, tr = zh[i];
+      if (settings.subMode === "zh") z = tr || en;
+      else { z = tr || ""; e = en; }
+    }
+    const key = `${z}\u0001${e}`;
+    if (key === shown) return;
+    shown = key;
+    zhLine.textContent = z;
+    enLine.textContent = e;
+    overlay.classList.toggle("on", !!(z || e));
+  }
+
+  let raf = 0;
+  function loop() {
+    raf = 0;
+    render();
+    const v = video();
+    if (v && !v.paused) raf = requestAnimationFrame(loop);
+  }
+  const kick = () => { if (!raf) raf = requestAnimationFrame(loop); };
+
+  // ---------- translation scheduling ----------
+  function progress() {
+    if (!sentences.length) return;
+    const total = sentences.length;
+    if (doneCount < total && inflight) say(`中文字幕 · 翻译中 ${doneCount}/${total}`, { ms: 0 });
+    else if (badge && badge.textContent.startsWith("中文字幕 · 翻译中")) say(`中文字幕 · 已就绪 ${doneCount}/${total}`, { ms: 1500 });
+  }
+
+  function pump() {
+    if (settings.subMode === "off" || !sentences.length) return;
+    const v = video();
+    const now = v ? v.currentTime * 1000 : 0;
+    while (inflight < MAX_INFLIGHT) {
+      let i = S.firstFrom(sentences, now - 2000);
+      while (i < sentences.length && st[i] !== 0) i++;
+      if (i >= sentences.length || sentences[i].start > now + LOOKAHEAD_MS) break;
+      // first request is small so the first subtitle appears within a second or two
+      const size = doneCount === 0 && inflight === 0 ? 6 : 25;
+      const idx = [];
+      for (let j = i; j < sentences.length && idx.length < size && st[j] === 0; j++) idx.push(j);
+      idx.forEach((k) => { st[k] = 1; });
+      inflight++;
+      const myGen = gen;
+      const previous = sentences.slice(Math.max(0, i - 3), i).map((s) => s.text);
+      R.translate(idx.map((k) => sentences[k].text), { kind: "subtitle", context: { title, previous } })
+        .then((res) => {
+          if (myGen !== gen) return;
+          failures = 0;
+          idx.forEach((k, n) => { zh[k] = res.translations[n]; st[k] = 2; });
+          doneCount += idx.length;
+          if (res.warning) say(res.warning, { error: true, ms: 6000 });
+        })
+        .catch((err) => {
+          if (myGen !== gen) return;
+          failures++;
+          const giveUp = failures >= 3;
+          idx.forEach((k) => { st[k] = giveUp ? 3 : 0; });
+          say(`字幕翻译失败：${err.message}`, { error: true, ms: 6000 });
+          if (!giveUp) setTimeout(pump, 2500 * failures);
+        })
+        .finally(() => {
+          if (myGen !== gen) return;
+          inflight--;
+          shown = "";
+          render();
+          progress();
+          if (failures < 3) pump();
+        });
+    }
+    progress();
+  }
+
+  function reset(newVid) {
+    gen++;
+    vid = newVid;
+    sentences = []; zh = []; st = [];
+    inflight = 0; failures = 0; doneCount = 0; shown = "";
+    if (overlay) { zhLine.textContent = ""; enLine.textContent = ""; overlay.classList.remove("on"); }
+    applyStyle();
+  }
+
+  function onCaptions(msg) {
+    if (msg.vid && msg.vid !== vid) reset(msg.vid);
+    if (msg.title) title = msg.title;
+    const list = S.buildSentences(S.parseTimedText(msg.body));
+    if (!list.length) return;
+    // a second copy of the same track (YouTube re-requests on seek or quality change) changes nothing
+    if (sentences.length === list.length && sentences.every((s, i) => s.text === list[i].text)) return;
+    reset(vid);
+    sentences = list;
+    zh = new Array(list.length);
+    st = new Array(list.length).fill(0);
+    ensureOverlay();
+    applyStyle();
+    if (settings.subMode !== "off") say(`中文字幕 · 已获取 ${list.length} 句${msg.kind === "asr" ? "（自动生成字幕）" : ""}`, { ms: 0 });
+    pump();
+    kick();
+  }
+
+  // ---------- wiring ----------
+  window.addEventListener("message", (e) => {
+    if (e.source !== window || !e.data || e.data.source !== "htz-main") return;
+    const m = e.data;
+    if (m.type === "hello") sendConfig();
+    else if (m.type === "video") { if (m.vid !== vid) reset(m.vid); title = m.title || title; }
+    else if (m.type === "captions" && typeof m.body === "string") onCaptions(m);
+    else if (m.type === "nocaptions" && m.vid === vid && settings.subMode !== "off") say("这个视频没有字幕，无法生成中文字幕", { ms: 6000 });
+    else if (m.type === "captionsfailed" && m.vid === vid && !sentences.length && settings.subMode !== "off") {
+      say("没拿到字幕：点一下播放器右下角的 CC 按钮即可重试", { ms: 8000 });
+    }
+  });
+
+  // media events don't bubble, but a capturing listener on the document still sees them
+  let lastPump = 0;
+  document.addEventListener("play", kick, true);
+  document.addEventListener("seeked", () => { shown = ""; render(); pump(); }, true);
+  document.addEventListener("pause", render, true);
+  document.addEventListener("timeupdate", () => {
+    render();
+    if (Date.now() - lastPump > 3000) { lastPump = Date.now(); pump(); }
+  }, true);
+
+  R.loadSettings().then((s) => { settings = s; sendConfig(); applyStyle(); });
+  R.onSettings((s) => {
+    const prev = settings;
+    settings = s;
+    sendConfig();
+    applyStyle();
+    const engineChanged = ["engine", "claudeModel", "openaiBaseUrl", "openaiModel"].some((k) => s[k] !== prev[k]);
+    if (engineChanged && sentences.length) {
+      const keep = sentences;
+      reset(vid);
+      sentences = keep;
+      zh = new Array(keep.length);
+      st = new Array(keep.length).fill(0);
+    }
+    shown = "";
+    render();
+    pump();
+  });
+})();

package/content/site.css

@@ -0,0 +1,31 @@
+/* Bilingual: the original and its translation sit together as one pair, then the site's usual spacing. */
+html[data-htz-mode="bilingual"] .htz-src { margin-bottom: 2px !important; }
+html[data-htz-mode="bilingual"] .htz-tr { margin-top: 0 !important; }
+html[data-htz-mode="bilingual"] .htz-tr.vt,
+html[data-htz-mode="bilingual"] h1.htz-tr { opacity: .92; }
+
+/* Chinese only: hide the original, the translated copy already carries the original's classes */
+html[data-htz-mode="zh"] .htz-src { display: none !important; }
+
+.htz-pair { min-width: 0; }
+.htz-inline { margin-left: .4em; opacity: .75; }
+
+#htz-status {
+  position: fixed; right: 16px; bottom: 16px; z-index: 2147483000;
+  max-width: min(420px, calc(100vw - 32px)); padding: 6px 12px; border-radius: 999px;
+  background: var(--chip-on, #0f0f0f); color: var(--chip-on-text, #fff);
+  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
+  box-shadow: 0 2px 10px rgba(0,0,0,.2); pointer-events: none;
+  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
+}
+#htz-status.on { opacity: .92; transform: none; }
+#htz-status.err { background: #c62828; color: #fff; border-radius: 12px; }
+
+#htz-toast {
+  position: fixed; left: 50%; bottom: 24px; z-index: 2147483000; transform: translate(-50%, 8px);
+  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 8px;
+  background: var(--chip-on, #0f0f0f); color: var(--chip-on-text, #fff);
+  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
+  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
+}
+#htz-toast.on { opacity: 1; transform: translate(-50%, 0); }

package/content/site.js

@@ -0,0 +1,283 @@
+// HackerTube pages: localize the interface instantly, translate titles / summaries / comments as they scroll
+// into view, and render the Chinese right under the original (or instead of it). HackerTube is a single-page
+// app that re-renders with innerHTML, so everything is driven by a MutationObserver.
+(() => {
+  const H = globalThis.HTZ;
+  const T = H.text, UI = H.uidict, R = H.runtime;
+
+  // Content written per video goes to the translation engine. "block": the translation is a copy of the element
+  // (same tag and classes, so it looks native) inserted right after it. "inline": a short label inside a link
+  // or chip, translated in place. "dict": try the local UI dictionary first (page headings like "Settings").
+  const RULES = [
+    { sel: ".vt", kind: "block" },
+    { sel: ".watch h1", kind: "block" },
+    { sel: ".snip", kind: "block" },
+    { sel: ".desc > p", kind: "block" },
+    { sel: ".cmt .body > p", kind: "block" },
+    { sel: ".plnote", kind: "block" },
+    { sel: ".plinfo h2", kind: "block" },
+    { sel: ".plinfo .intro", kind: "block" },
+    { sel: ".plcard p.sub", kind: "block" },
+    { sel: ".pagehead h2", kind: "block", dict: true },
+    { sel: ".setting b", kind: "block" },
+    { sel: ".setting p", kind: "block" },
+    { sel: ".about .lede", kind: "block" },
+    { sel: ".about > h2", kind: "block" },
+    { sel: ".about > p", kind: "block" },
+    { sel: ".about li", kind: "block" },
+    { sel: ".areaname", kind: "inline" },
+    { sel: ".cats a", kind: "inline" },
+    { sel: ".catwrap .chip", kind: "inline" },
+    { sel: ".tag.cat", kind: "inline" },
+  ];
+  const CONTENT_SEL = RULES.map((r) => r.sel).join(",");
+  const OURS = ".htz-tr, .htz-inline, .htz-pair, #htz-status, #htz-toast";
+  // never touched: our own nodes, code, the copyable agent prompt, hashtags, people's and channels' names
+  const SKIP_SEL = `${OURS}, script, style, pre, code, textarea, #agent-prompt, .tag:not(.cat), .chan, .who b, .cmt .meta b, .count, .dur`;
+
+  let settings = { ...R.DEFAULTS };
+  let mode = "off";
+  const memo = new Map();       // source text -> translation, for this page's lifetime
+  const waiting = new Map();    // source text -> elements waiting for it
+  const inflight = new Set();   // source texts currently being translated
+  const replaced = new Map();   // Text node -> original text, so "off" can restore the page exactly
+  let handled = new WeakSet();
+
+  // ---------- status pill + toast ----------
+  const status = (() => {
+    let el, timer;
+    return (msg, { error = false, ms = 0 } = {}) => {
+      if (!el) { el = document.createElement("div"); el.id = "htz-status"; document.body.append(el); }
+      clearTimeout(timer);
+      el.textContent = msg || "";
+      el.classList.toggle("on", !!msg);
+      el.classList.toggle("err", error);
+      if (msg && ms) timer = setTimeout(() => el.classList.remove("on"), ms);
+    };
+  })();
+  function toast(msg) {
+    let el = document.getElementById("htz-toast");
+    if (!el) { el = document.createElement("div"); el.id = "htz-toast"; document.body.append(el); }
+    el.textContent = msg;
+    el.classList.add("on");
+    clearTimeout(toast.t);
+    toast.t = setTimeout(() => el.classList.remove("on"), 3000);
+  }
+  function showProgress() {
+    if (inflight.size) status(`翻译中 · ${inflight.size} 条`);
+    else status("");
+  }
+
+  // ---------- text replacement that can be undone ----------
+  function replaceText(node, zh) {
+    if (!replaced.has(node)) replaced.set(node, node.data);
+    const orig = replaced.get(node);
+    const lead = orig.match(/^\s*/)[0], trail = orig.match(/\s*$/)[0];
+    node.data = lead + zh + trail;
+  }
+
+  function isChannelLine(el) {
+    // cards: <h3 class="vt">title</h3><div class="sub">channel</div><div class="sub">views • date</div>
+    if (!el.classList.contains("sub") || !el.closest(".vcard, .next")) return false;
+    const prev = el.previousElementSibling;
+    return !!prev && prev.classList.contains("vt");
+  }
+
+  // Interface strings: every text node outside content elements that the dictionary knows.
+  function localizeUi(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+      acceptNode(n) {
+        const p = n.parentElement;
+        if (!p || !n.data.trim()) return NodeFilter.FILTER_REJECT;
+        if (p.closest(SKIP_SEL)) return NodeFilter.FILTER_REJECT;
+        // the "▶ this video" / "link" pills inside comments are interface, though they sit in content
+        if (p.matches(".mk")) return NodeFilter.FILTER_ACCEPT;
+        if (p.closest(CONTENT_SEL) || isChannelLine(p)) return NodeFilter.FILTER_REJECT;
+        return NodeFilter.FILTER_ACCEPT;
+      },
+    });
+    const nodes = [];
+    while (walker.nextNode()) nodes.push(walker.currentNode);
+    for (const n of nodes) {
+      if (replaced.has(n)) continue;
+      const zh = UI.localize(n.data);
+      if (zh) replaceText(n, zh);
+    }
+  }
+
+  // ---------- content translation ----------
+  const ruleFor = (el) => RULES.find((r) => el.matches(r.sel));
+  const firstText = (el) => [...el.childNodes].find((n) => n.nodeType === 3 && n.data.trim());
+
+  function register(el) {
+    if (handled.has(el)) return;
+    handled.add(el);
+    const rule = ruleFor(el);
+    if (!rule) return;
+    const node = rule.kind === "inline" ? firstText(el) : null;
+    const text = T.normalize(rule.kind === "inline" ? node && node.data : el.textContent);
+    if (!text) return;
+    if (rule.dict) {
+      const zh = UI.localize(text);
+      if (zh) { const n = firstText(el); if (n) replaceText(n, zh); return; }
+    }
+    if (!T.needsTranslation(text) || T.hasCJK(text)) return;
+    el.__htz = { rule, node, text };
+    if (memo.has(text)) render(el);
+    else io.observe(el);
+  }
+
+  // Only what is on (or near) the screen gets translated: the home feed scrolls forever.
+  const io = new IntersectionObserver((entries) => {
+    for (const e of entries) {
+      if (!e.isIntersecting) continue;
+      io.unobserve(e.target);
+      enqueue(e.target);
+    }
+  }, { rootMargin: "800px 0px" });
+
+  function enqueue(el) {
+    const { text } = el.__htz;
+    if (memo.has(text)) return render(el);
+    if (!waiting.has(text)) waiting.set(text, []);
+    waiting.get(text).push(el);
+    clearTimeout(enqueue.t);
+    enqueue.t = setTimeout(flush, 60);
+  }
+
+  function flush() {
+    const texts = [...waiting.keys()].filter((t) => !inflight.has(t));
+    if (!texts.length) return;
+    for (const idx of T.chunk(texts, { maxItems: 40, maxChars: 5000 })) send(idx.map((i) => texts[i]));
+  }
+
+  async function send(texts) {
+    texts.forEach((t) => inflight.add(t));
+    showProgress();
+    const myMode = mode;
+    try {
+      const res = await R.translate(texts, { kind: "page" });
+      if (mode !== myMode) return;
+      texts.forEach((t, i) => memo.set(t, res.translations[i]));
+      for (const t of texts) for (const el of waiting.get(t) || []) if (el.isConnected) render(el);
+      if (res.warning) status(res.warning, { error: true, ms: 6000 });
+    } catch (e) {
+      status(`翻译失败：${e.message}`, { error: true, ms: 6000 });
+    } finally {
+      texts.forEach((t) => { inflight.delete(t); waiting.delete(t); });
+      if (!document.querySelector("#htz-status.err.on")) showProgress();
+    }
+  }
+
+  function render(el) {
+    if (mode === "off" || !el.__htz) return;
+    const { rule, node, text } = el.__htz;
+    const zh = memo.get(text);
+    if (!zh || T.normalize(zh) === text) return;
+    if (rule.kind === "inline") {
+      if (!node || !node.isConnected) return;
+      if (mode === "zh") return replaceText(node, zh);
+      if (node.parentElement && node.parentElement.classList.contains("htz-pair")) return;
+      // these labels sit in flex rows (name ... count): wrapping original + translation in one span keeps them
+      // a single flex item that flows as text, instead of two squeezed columns
+      const pair = document.createElement("span");
+      pair.className = "htz-pair";
+      const s = document.createElement("span");
+      s.className = "htz-inline";
+      s.lang = "zh-CN";
+      s.textContent = zh;
+      node.before(pair);
+      pair.append(node, s);
+      return;
+    }
+    if (el.nextElementSibling && el.nextElementSibling.classList.contains("htz-tr")) return;
+    // a copy with the same tag and classes picks up the site's own styling (title size, muted colour, clamp)
+    const tr = document.createElement(el.tagName === "LI" ? "div" : el.tagName);
+    tr.className = `${el.className} htz-tr`.trim();
+    tr.lang = "zh-CN";
+    tr.textContent = zh;
+    el.classList.add("htz-src");
+    el.after(tr);
+  }
+
+  // ---------- scanning ----------
+  function process(root) {
+    if (mode === "off" || !(root instanceof Element) || root.closest(OURS)) return;
+    const host = root.parentElement && root.parentElement.closest(CONTENT_SEL);
+    if (host) return register(host);
+    if (root.matches(CONTENT_SEL)) register(root);
+    root.querySelectorAll(CONTENT_SEL).forEach(register);
+    localizeUi(root);
+  }
+
+  const mo = new MutationObserver((muts) => {
+    if (mode === "off") return;
+    for (const m of muts) {
+      for (const n of m.addedNodes) {
+        if (n.nodeType === 1) process(n);
+        else if (n.nodeType === 3 && n.parentElement) process(n.parentElement);
+      }
+    }
+    if (replaced.size > 3000) for (const n of replaced.keys()) if (!n.isConnected) replaced.delete(n);
+  });
+
+  function revertAll() {
+    for (const [n, orig] of replaced) if (n.isConnected) n.data = orig;
+    replaced.clear();
+    document.querySelectorAll(".htz-pair").forEach((p) => p.replaceWith(...[...p.childNodes].filter((n) => n.nodeType === 3)));
+    document.querySelectorAll(".htz-tr, .htz-inline").forEach((n) => n.remove());
+    document.querySelectorAll(".htz-src").forEach((n) => n.classList.remove("htz-src"));
+    io.disconnect();
+    waiting.clear();
+    handled = new WeakSet();
+  }
+
+  function applyMode(next) {
+    revertAll();
+    mode = next;
+    document.documentElement.dataset.htzMode = mode;
+    const q = document.getElementById("q");
+    if (q) q.placeholder = mode === "off" ? "Search" : settings.searchTranslate ? "搜索（可直接输入中文）" : "搜索";
+    if (mode !== "off") process(document.body);
+    else status("");
+  }
+
+  // ---------- Chinese search: translate the query to English, then let the site search as usual ----------
+  // The site's semantic search embeds English text; a Chinese query finds little. We intercept the submit in the
+  // capture phase, swap the input's value for the English, and resubmit so the site's own handler runs.
+  let bypass = false;
+  document.addEventListener("submit", async (e) => {
+    const form = e.target;
+    if (bypass || mode === "off" || !settings.searchTranslate || !(form instanceof HTMLFormElement) || form.id !== "search") return;
+    const q = form.querySelector("#q");
+    const query = q && q.value.trim();
+    if (!query || !T.hasCJK(query)) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    status("正在把搜索词翻译成英文…");
+    try {
+      const res = await R.translate([query], { kind: "query", to: "en" });
+      const en = T.normalize(res.translations[0]);
+      if (en) { q.value = en; toast(`已将「${query}」译为 “${en}” 进行搜索`); }
+      status("");
+    } catch (err) {
+      status(`搜索词翻译失败，按原文搜索：${err.message}`, { error: true, ms: 5000 });
+    }
+    bypass = true;
+    try { form.requestSubmit(); } finally { bypass = false; }
+  }, true);
+
+  // ---------- start ----------
+  R.loadSettings().then((s) => {
+    settings = s;
+    applyMode(s.pageMode);
+    mo.observe(document.body, { childList: true, subtree: true });
+  });
+  R.onSettings((s) => {
+    const prev = settings;
+    settings = s;
+    const engineChanged = ["engine", "claudeModel", "openaiBaseUrl", "openaiModel"].some((k) => s[k] !== prev[k]);
+    if (engineChanged) memo.clear();
+    if (engineChanged || s.pageMode !== prev.pageMode || s.searchTranslate !== prev.searchTranslate) applyMode(s.pageMode);
+  });
+})();

package/lib/embedlogin.js

@@ -0,0 +1,32 @@
+// "Play with my YouTube login": HackerTube embeds videos from youtube-nocookie.com, which never sees the user's
+// youtube.com login cookies, so a network YouTube distrusts gets "Sign in to confirm you're not a bot" even after
+// signing in. This declarativeNetRequest rule sends HackerTube's embed frames to www.youtube.com/embed instead
+// (HackerTube's CSP allows that origin), where the login applies. The rest of the URL, including ?autoplay=1, is kept.
+(function (root, factory) {
+  const api = factory();
+  if (typeof module === "object" && module.exports) module.exports = api;
+  else (root.HTZ = root.HTZ || {}).embedlogin = api;
+})(globalThis, function () {
+  const RULE_ID = 1;
+
+  function rule() {
+    return {
+      id: RULE_ID,
+      priority: 1,
+      action: { type: "redirect", redirect: { regexSubstitution: "https://www.youtube.com/embed/\\1" } },
+      condition: {
+        regexFilter: "^https://www\\.youtube-nocookie\\.com/embed/(.*)$",
+        resourceTypes: ["sub_frame"],
+        // only frames that HackerTube itself loads (also matches www.hackertube.org)
+        initiatorDomains: ["hackertube.org"],
+      },
+    };
+  }
+
+  // Add or remove the rule to match the setting. Dynamic rules persist across browser restarts and updates.
+  async function sync(enabled, dnr = chrome.declarativeNetRequest) {
+    await dnr.updateDynamicRules({ removeRuleIds: [RULE_ID], addRules: enabled ? [rule()] : [] });
+  }
+
+  return { RULE_ID, rule, sync };
+});