zsbqb-static 0.1.0

package/js/auth-shell-sync.js

@@ -0,0 +1,45 @@
+/**
+ * 游客静态页与已登录动态页共用同一 URL。
+ * 浏览器 HTTP 缓存 / bfcache 可能在登录后仍展示登录前的游客壳（或退出后仍展示用户壳）。
+ * sessionid 为 HttpOnly，不可读；用非敏感 cookie zsbqb_auth 与 data-auth-shell 比对。
+ * 不一致时强制重新拉取文档（每路径只重试一次，避免死循环）。
+ */
+(function () {
+  var AUTH_MARKER = "zsbqb_auth";
+
+  function hasAuthMarker() {
+    return document.cookie.split(";").some(function (part) {
+      return part.trim().indexOf(AUTH_MARKER + "=") === 0;
+    });
+  }
+
+  function shellMismatch() {
+    var shell = document.documentElement.getAttribute("data-auth-shell");
+    if (shell === "guest" && hasAuthMarker()) return true;
+    if (shell === "user" && !hasAuthMarker()) return true;
+    return false;
+  }
+
+  function syncAuthShell() {
+    if (!shellMismatch()) return;
+    var key = "auth-shell-reload:" + location.pathname;
+    try {
+      if (sessionStorage.getItem(key)) {
+        sessionStorage.removeItem(key);
+        return;
+      }
+      sessionStorage.setItem(key, "1");
+    } catch (err) {
+      /* private mode 等：仍尝试一次 reload */
+    }
+    location.reload();
+  }
+
+  window.addEventListener("pageshow", function (event) {
+    if (event.persisted || shellMismatch()) {
+      syncAuthShell();
+    }
+  });
+
+  syncAuthShell();
+})();

package/js/burst-preview-host.js

@@ -0,0 +1,493 @@
+(function () {
+  "use strict";
+
+  const HOST_SELECTOR = "[data-burst-preview-host]";
+  const instances = new Map();
+  let observer = null;
+
+  function setStatus(host, message, state) {
+    const status = host.querySelector("[data-burst-preview-status]");
+    host.dataset.previewState = state;
+    if (!status) return;
+    status.textContent = message;
+    const ready = state === "ready";
+    status.hidden = ready;
+    if (ready) status.setAttribute("hidden", "");
+    else status.removeAttribute("hidden");
+  }
+
+  function isExpanded(host) {
+    const item = host.closest(".burst-item");
+    return !item || item.classList.contains("is-open");
+  }
+
+  function previewLibrary() {
+    if (window.NotePreview && typeof window.NotePreview.mount === "function") {
+      return window.NotePreview;
+    }
+    const ck = window.CkHua;
+    if (ck && typeof ck.gua_shang === "function") {
+      return {
+        mount: function (el, opts) {
+          return englishPlayer(ck.gua_shang(el, opts));
+        },
+        preloadAssets: ck.yuJiaZai,
+      };
+    }
+    return null;
+  }
+
+  function bindFn(raw, english, chinese) {
+    if (!raw) return undefined;
+    if (typeof raw[english] === "function") return raw[english].bind(raw);
+    if (typeof raw[chinese] === "function") return raw[chinese].bind(raw);
+    return undefined;
+  }
+
+  function englishPlayer(raw) {
+    if (!raw) return raw;
+    if (typeof raw.getTime === "function" && typeof raw.play === "function") return raw;
+    return {
+      seek: bindFn(raw, "seek", "laJinTiao"),
+      play: bindFn(raw, "play", "kai_bo"),
+      pause: bindFn(raw, "pause", "zanTingg"),
+      isPlaying: bindFn(raw, "isPlaying", "zaiBoMe"),
+      getTime: bindFn(raw, "getTime", "kanShiJian"),
+      getOutput: bindFn(raw, "getOutput", "duYinLiang"),
+      setOutput: bindFn(raw, "setOutput", "xieYinLiang"),
+      getHitsounds: bindFn(raw, "getHitsounds", "duAnJianYin"),
+      setHitsounds: bindFn(raw, "setHitsounds", "xieAnJianYin"),
+      getRate: bindFn(raw, "getRate", "duBeiSu"),
+      setRate: bindFn(raw, "setRate", "xieBeiSu"),
+      getNoteSpeed: bindFn(raw, "getNoteSpeed", "duLiuSu"),
+      setNoteSpeed: bindFn(raw, "setNoteSpeed", "xieLiuSu"),
+      getBurstColor: bindFn(raw, "getBurstColor", "duBaoSe"),
+      setBurstColor: bindFn(raw, "setBurstColor", "xieBaoSe"),
+      on: bindFn(raw, "on", "ting_zhe"),
+      destroy: bindFn(raw, "destroy", "chai_diao"),
+      getSize: bindFn(raw, "getSize", "kanDaXiao"),
+      debugIdol: bindFn(raw, "debugIdol", "kanTiaoShi"),
+    };
+  }
+
+  function waitForPlayer(done) {
+    if (previewLibrary()) {
+      done(true);
+      return;
+    }
+    var tries = 0;
+    var timer = window.setInterval(function () {
+      tries += 1;
+      if (previewLibrary()) {
+        window.clearInterval(timer);
+        done(true);
+      } else if (tries >= 400) {
+        window.clearInterval(timer);
+        done(false);
+      }
+    }, 50);
+  }
+
+  function audioUrlsFor(host) {
+    const cdn = (host.getAttribute("data-audio-url") || "").trim();
+    const origin = (host.getAttribute("data-audio-fallback") || "").trim();
+    return {
+      audioUrl: cdn || origin,
+      audioFallbackUrl: cdn && origin && origin !== cdn ? origin : "",
+    };
+  }
+
+  const AUDIO_PREFS_KEY = "zsbqb.preview.audio";
+  const AUDIO_PREFS_EVENT = "zsbqb:preview-audio";
+
+  function fallbackAudioPrefs() {
+    try {
+      const raw = window.localStorage.getItem(AUDIO_PREFS_KEY);
+      if (!raw) return { volume: 1, muted: false, alwaysMute: false, hitsounds: false, burstColor: "pink" };
+      const parsed = JSON.parse(raw);
+      const volume = Number(parsed && parsed.volume);
+      const audible = Number.isFinite(volume) ? Math.min(1, Math.max(0, volume)) : 1;
+      return {
+        volume: audible > 0 ? audible : 1,
+        muted: Boolean(parsed && parsed.muted) || audible <= 0,
+        alwaysMute: Boolean(parsed && parsed.alwaysMute),
+        hitsounds: Boolean(parsed && parsed.hitsounds),
+        burstColor: parsed && parsed.burstColor === "red" ? "red" : "pink",
+      };
+    } catch (_error) {
+      return { volume: 1, muted: false, alwaysMute: false, hitsounds: false, burstColor: "pink" };
+    }
+  }
+
+  function readAudioPrefs() {
+    if (window.ZsbqbPreviewAudio && typeof window.ZsbqbPreviewAudio.read === "function") {
+      return window.ZsbqbPreviewAudio.read();
+    }
+    return fallbackAudioPrefs();
+  }
+
+  function effectiveMuted(prefs) {
+    return Boolean(prefs && (prefs.alwaysMute || prefs.muted));
+  }
+
+  function persistAudioPrefs(state) {
+    const current = readAudioPrefs();
+    const next = {
+      volume: state && state.volume,
+      muted: current.alwaysMute ? current.muted : Boolean(state && state.muted),
+      alwaysMute: current.alwaysMute,
+      hitsounds: current.hitsounds,
+      burstColor: current.burstColor === "red" ? "red" : "pink",
+    };
+    if (window.ZsbqbPreviewAudio && typeof window.ZsbqbPreviewAudio.write === "function") {
+      window.ZsbqbPreviewAudio.write(next, { apply: !current.alwaysMute });
+      return;
+    }
+    const prefs = {
+      volume: Math.min(1, Math.max(0, Number(next.volume) || 1)),
+      muted: Boolean(next.muted),
+      alwaysMute: Boolean(next.alwaysMute),
+      hitsounds: Boolean(next.hitsounds),
+      burstColor: next.burstColor === "red" ? "red" : "pink",
+    };
+    try {
+      window.localStorage.setItem(AUDIO_PREFS_KEY, JSON.stringify(prefs));
+    } catch (_error) {
+      // Private mode can reject localStorage writes.
+    }
+    if (!current.alwaysMute) {
+      window.dispatchEvent(new CustomEvent(AUDIO_PREFS_EVENT, { detail: prefs }));
+    }
+  }
+
+  function burstColorOf(prefs) {
+    return prefs && prefs.burstColor === "red" ? "red" : "pink";
+  }
+
+  function applyAudioPrefs(prefs) {
+    if (!prefs) return;
+    const muted = effectiveMuted(prefs);
+    instances.forEach(function (instance) {
+      if (prefs.apply !== false && instance && typeof instance.setOutput === "function") {
+        instance.setOutput(prefs.volume, muted);
+      }
+      if (instance && typeof instance.setHitsounds === "function") {
+        instance.setHitsounds(Boolean(prefs.hitsounds));
+      }
+    });
+    // 爆气色只影响之后挂载的播放器，避免切换偏好时立刻下载另一套贴图。
+  }
+
+  function bindInstancePersist(host, instance) {
+    if (instance && typeof instance.on === "function") {
+      try {
+        instance.on("volume", persistAudioPrefs);
+      } catch (_error) {
+        // Older players only support on("zone").
+      }
+    }
+    const persistFromPlayer = function () {
+      if (instance && typeof instance.getOutput === "function") {
+        persistAudioPrefs(instance.getOutput());
+      }
+    };
+    host.addEventListener("click", function (event) {
+      const target = event.target;
+      if (!target || !target.closest || !target.closest(".note-preview-speaker")) return;
+      window.setTimeout(persistFromPlayer, 0);
+    });
+    host.addEventListener("input", function (event) {
+      const target = event.target;
+      if (!target || !target.classList || !target.classList.contains("note-preview-volume__slider")) {
+        return;
+      }
+      persistFromPlayer();
+    });
+  }
+
+  function assetBaseFromPlayer() {
+    const configured = (
+      (typeof window !== "undefined" && window.__NOTE_PREVIEW_ASSET_BASE__) ||
+      ""
+    ).trim();
+    if (configured) {
+      return configured.charAt(configured.length - 1) === "/" ? configured : configured + "/";
+    }
+    const scripts = Array.prototype.slice.call(document.getElementsByTagName("script"));
+    const withSrc = scripts.filter(function (script) {
+      return Boolean(script.src);
+    });
+    const named = withSrc.filter(function (script) {
+      return script.src.indexOf("note-preview") !== -1;
+    });
+    const fallback = withSrc.filter(function (script) {
+      return script.src.indexOf("burst-preview-host") === -1;
+    });
+    const chosen = named[named.length - 1] || fallback[fallback.length - 1];
+    const src = chosen && chosen.src ? chosen.src : "";
+    const clean = src.split(/[?#]/)[0];
+    const slash = clean.lastIndexOf("/");
+    const dir = slash >= 0 ? clean.slice(0, slash + 1) : "./";
+    return dir + "assets/";
+  }
+
+  function stampPreviewAssetUrl(url) {
+    const ver = (
+      (typeof window !== "undefined" && window.__NOTE_PREVIEW_ASSET_VER__) ||
+      ""
+    ).trim();
+    const base = (
+      (typeof window !== "undefined" && window.__NOTE_PREVIEW_ASSET_BASE__) ||
+      ""
+    ).trim();
+    if (!ver || !url || typeof url !== "string") return url;
+    if (/[?&]v=/.test(url)) return url;
+    let absUrl = url;
+    let absBase = base;
+    try {
+      absUrl = new URL(url, window.location.href).href;
+      if (base) {
+        absBase = new URL(base.charAt(base.length - 1) === "/" ? base : base + "/", window.location.href).href;
+      }
+    } catch (_error) {
+      return url;
+    }
+    if (absBase && absUrl.indexOf(absBase) !== 0) return url;
+    return url + (url.indexOf("?") >= 0 ? "&" : "?") + "v=" + encodeURIComponent(ver);
+  }
+
+  function hookPreviewAssetSrc(proto) {
+    if (!proto) return;
+    const desc = Object.getOwnPropertyDescriptor(proto, "src");
+    if (!desc || typeof desc.set !== "function") return;
+    Object.defineProperty(proto, "src", {
+      configurable: true,
+      enumerable: desc.enumerable,
+      get: desc.get,
+      set: function (value) {
+        desc.set.call(this, stampPreviewAssetUrl(value));
+      },
+    });
+  }
+
+  function installPreviewAssetVersioning() {
+    if (typeof window === "undefined" || window.__NOTE_PREVIEW_ASSET_VER_HOOK__) return;
+    window.__NOTE_PREVIEW_ASSET_VER_HOOK__ = true;
+    hookPreviewAssetSrc(window.HTMLImageElement && window.HTMLImageElement.prototype);
+    hookPreviewAssetSrc(window.HTMLMediaElement && window.HTMLMediaElement.prototype);
+  }
+
+  function songFromPayload(payload) {
+    if (!payload) return null;
+    return payload.song || payload;
+  }
+
+  function blobFromSong(song, host) {
+    const item = host.closest(".burst-item");
+    const kind = item && item.getAttribute("data-burst-kind");
+    const slots = kind === "double" ? (song && song.doubles) || [] : (song && song.singles) || [];
+    const style = host.getAttribute("data-style") || "";
+    const rank = host.getAttribute("data-rank") || "";
+    const clip = host.getAttribute("data-burst-clip") || "1";
+    for (let i = 0; i < slots.length; i += 1) {
+      const slot = slots[i] || {};
+      if (String(slot.style || "") !== style) continue;
+      if (String(slot.rank || "") !== rank) continue;
+      const blob = clip === "2" ? slot.preview2 : slot.preview;
+      if (typeof blob === "string" && blob) return blob;
+    }
+    return "";
+  }
+
+  function writeSnippet(host, blob) {
+    const player = host.querySelector(".burst-preview__player") || host;
+    let script = host.querySelector('script[type="application/json"]');
+    if (!script) {
+      script = document.createElement("script");
+      script.type = "application/json";
+      const status = host.querySelector("[data-burst-preview-status]");
+      player.insertBefore(script, status || null);
+    }
+    script.textContent = JSON.stringify(blob);
+    return script;
+  }
+
+  function mount(host) {
+    if (instances.has(host) || host.dataset.previewMounting === "1" || !isExpanded(host)) {
+      return;
+    }
+
+    const canvas = host.querySelector("[data-burst-preview-canvas]");
+    if (!canvas) {
+      setStatus(host, "谱面预览数据缺失。", "error");
+      return;
+    }
+    let data = host.querySelector('script[type="application/json"]');
+    if (!data || !String(data.textContent || "").trim()) {
+      const pending = window.__NOTE_PREVIEW_PAYLOAD__;
+      if (pending && typeof pending.then === "function") {
+        host.dataset.previewMounting = "1";
+        setStatus(host, "谱面预览加载中…", "loading");
+        Promise.resolve(pending)
+          .then(function (payload) {
+            const blob = blobFromSong(songFromPayload(payload), host);
+            if (!blob) throw new Error("preview blob missing");
+            writeSnippet(host, blob);
+            delete host.dataset.previewMounting;
+            mount(host);
+          })
+          .catch(function (error) {
+            delete host.dataset.previewMounting;
+            if (typeof console !== "undefined" && console.error) {
+              console.error("谱面预览加载失败", error);
+            }
+            setStatus(host, "谱面预览数据缺失。", "error");
+          });
+        return;
+      }
+      setStatus(host, "谱面预览数据缺失。", "error");
+      return;
+    }
+
+    host.dataset.previewMounting = "1";
+    setStatus(host, "谱面预览加载中…", "loading");
+    waitForPlayer(function (ready) {
+      try {
+        const lib = previewLibrary();
+        if (!ready || !lib) throw new Error("preview player unavailable");
+        const snippet = JSON.parse(data.textContent);
+        if (typeof snippet !== "string" || !snippet) {
+          throw new Error("invalid preview snippet");
+        }
+        const startComboRaw = host.getAttribute("data-start-combo");
+        const startCombo = startComboRaw ? Number(startComboRaw) : NaN;
+        const prefs = readAudioPrefs();
+        const muted = effectiveMuted(prefs);
+        const audio = audioUrlsFor(host);
+        const instance = lib.mount(canvas, {
+          snippet: snippet,
+          assetBase: assetBaseFromPlayer(),
+          audioUrl: audio.audioUrl || undefined,
+          audioFallbackUrl: audio.audioFallbackUrl || undefined,
+          startCombo: Number.isFinite(startCombo) ? startCombo : undefined,
+          hitsounds: Boolean(prefs.hitsounds),
+          burstColor: burstColorOf(prefs),
+          burstSfx: true,
+          volume: prefs.volume,
+          muted: muted,
+        });
+        if (instance && typeof instance.setOutput === "function") {
+          instance.setOutput(prefs.volume, muted);
+        }
+        if (instance && typeof instance.setHitsounds === "function") {
+          instance.setHitsounds(Boolean(prefs.hitsounds));
+        }
+        if (instance && typeof instance.setBurstColor === "function") {
+          instance.setBurstColor(burstColorOf(prefs));
+        }
+        bindInstancePersist(host, instance);
+        instances.set(host, instance || null);
+        host.__notePreview = instance || null;
+        window.__notePreview = instance || null;
+        setStatus(host, "", "ready");
+      } catch (error) {
+        if (typeof console !== "undefined" && console.error) {
+          console.error("谱面预览加载失败", error);
+        }
+        setStatus(host, "谱面预览加载失败，请稍后重试。", "error");
+      } finally {
+        delete host.dataset.previewMounting;
+      }
+    });
+  }
+
+  function mountExpanded(root) {
+    const scope = root && root.querySelectorAll ? root : document;
+    scope.querySelectorAll(HOST_SELECTOR).forEach(mount);
+    if (scope.matches && scope.matches(HOST_SELECTOR)) mount(scope);
+  }
+
+  function mountItem(item) {
+    if (!item || !item.classList.contains("is-open")) return;
+    item.querySelectorAll(HOST_SELECTOR).forEach(mount);
+  }
+
+  function onAccordionChange(event) {
+    const item = event.target.closest ? event.target.closest(".burst-item") : null;
+    mountItem(item);
+  }
+
+  function destroyAll() {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+    instances.forEach(function (instance) {
+      if (instance && typeof instance.destroy === "function") {
+        try {
+          instance.destroy();
+        } catch (_error) {
+          // The page is leaving; one failed teardown must not block the others.
+        }
+      }
+    });
+    instances.clear();
+  }
+
+  function init() {
+    installPreviewAssetVersioning();
+    mountExpanded(document);
+
+    document.addEventListener("click", function (event) {
+      const toggle = event.target.closest ? event.target.closest("[data-burst-toggle]") : null;
+      if (!toggle) return;
+      window.setTimeout(function () {
+        mountItem(toggle.closest(".burst-item"));
+      }, 0);
+    });
+    document.addEventListener("burst:accordion-change", onAccordionChange);
+    document.addEventListener("burst-accordion:change", onAccordionChange);
+
+    observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "class" &&
+          mutation.target.classList.contains("burst-item")
+        ) {
+          mountItem(mutation.target);
+        }
+      });
+    });
+    observer.observe(document.body, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    window.addEventListener(AUDIO_PREFS_EVENT, function (event) {
+      const prefs = (event && event.detail) || readAudioPrefs();
+      applyAudioPrefs(prefs);
+    });
+
+    window.addEventListener("load", function () {
+      mountExpanded(document);
+    });
+    Array.prototype.slice.call(document.querySelectorAll('script[src*="note-preview"]')).forEach(function (el) {
+      el.addEventListener(
+        "load",
+        function () {
+          mountExpanded(document);
+        },
+        { once: true }
+      );
+    });
+    window.addEventListener("pagehide", destroyAll, { once: true });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init, { once: true });
+  } else {
+    init();
+  }
+})();