zsbqb-static 0.1.0 → 0.1.2

package/js/burst-preview-host.js

@@ -3,7 +3,35 @@
 
   const HOST_SELECTOR = "[data-burst-preview-host]";
   const instances = new Map();
-  let observer = null;
+  const previewPayloadCache = new Map();
+
+  function jsonScriptText(value) {
+    return JSON.stringify(value)
+      .replace(/</g, "\\u003C")
+      .replace(/>/g, "\\u003E")
+      .replace(/&/g, "\\u0026");
+  }
+
+  function loadSongPreviewPayload(apiUrl) {
+    const cached = previewPayloadCache.get(apiUrl);
+    if (cached) return cached;
+    const boot = window.__NOTE_PREVIEW_PAYLOAD__;
+    const bootUrl = window.__NOTE_PREVIEW_API_URL__ || "";
+    const useBoot = Boolean(boot) && (!bootUrl || bootUrl === apiUrl);
+    if (useBoot) window.__NOTE_PREVIEW_PAYLOAD__ = null;
+    const pending = (useBoot
+      ? Promise.resolve(boot)
+      : fetch(apiUrl, { credentials: "same-origin" }).then(function (res) {
+          if (!res.ok) throw new Error("fetch_failed");
+          return res.json();
+        }))
+      .catch(function (error) {
+        previewPayloadCache.delete(apiUrl);
+        throw error;
+      });
+    previewPayloadCache.set(apiUrl, pending);
+    return pending;
+  }
 
   function setStatus(host, message, state) {
     const status = host.querySelector("[data-burst-preview-status]");
@@ -21,70 +49,99 @@
     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 previewApiUrl() {
+    if (window.__NOTE_PREVIEW_API_URL__) return window.__NOTE_PREVIEW_API_URL__;
+    const pathParts = window.location.pathname.split("/").filter(Boolean);
+    if (pathParts.length < 4 || pathParts[0] !== "query") return "";
+    const family = pathParts[1];
+    const star = pathParts[2];
+    const title = decodeURIComponent(pathParts.slice(3).join("/"));
+    const mode = new URLSearchParams(window.location.search).get("mode") || "single";
+    const params = new URLSearchParams();
+    params.set("mode", mode);
+    return (
+      "/api/query/songs/" +
+      encodeURIComponent(family) +
+      "/" +
+      encodeURIComponent(star) +
+      "/" +
+      encodeURIComponent(title) +
+      "/?" +
+      params.toString()
+    );
   }
 
-  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 blobFromPayload(host, result) {
+    const mode = new URLSearchParams(window.location.search).get("mode") || "single";
+    const kind = host.getAttribute("data-burst-clip") === "2" ? "2" : "1";
+    const side = mode === "double" ? "doubles" : "singles";
+    const style = host.getAttribute("data-style") || "";
+    const rank = host.getAttribute("data-rank") || "";
+    const slots = (result && result.song && result.song[side]) || [];
+    const targetSlot = slots.find(function (s) {
+      return s.style === style && s.rank === rank;
+    }) || slots[0];
+    if (!targetSlot) return "";
+    return kind === "2" ? targetSlot.preview2 || targetSlot.preview || "" : targetSlot.preview || "";
   }
 
-  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 injectBlob(host, blob) {
+    if (!blob) return false;
+    if (host.querySelector('script[type="application/json"]')) return true;
+    const player = host.querySelector(".burst-preview__player");
+    if (!player) return false;
+    const scriptEl = document.createElement("script");
+    scriptEl.type = "application/json";
+    scriptEl.textContent = jsonScriptText(blob);
+    player.appendChild(scriptEl);
+    return true;
+  }
+
+  function applyPayloadToHosts(result) {
+    if (!result || !result.ok || !result.song) return false;
+    let injected = 0;
+    document.querySelectorAll(HOST_SELECTOR).forEach(function (host) {
+      const blob = blobFromPayload(host, result);
+      if (blob && injectBlob(host, blob)) injected += 1;
+    });
+    return injected > 0;
+  }
+
+  function prefetchAllPreviewPayloads() {
+    const apiUrl = previewApiUrl();
+    if (!apiUrl) return;
+    loadSongPreviewPayload(apiUrl)
+      .then(function (result) {
+        applyPayloadToHosts(result);
+        mountExpanded(document);
+      })
+      .catch(function () {
+        // 进页预取失败不打断爆点展示；展开时再报错。
+      });
   }
 
   function waitForPlayer(done) {
-    if (previewLibrary()) {
+    if (window.CkHua && typeof window.CkHua.gua_shang === "function") {
       done(true);
       return;
     }
+    var finished = false;
+    var finish = function (ok) {
+      if (finished) return;
+      finished = true;
+      window.removeEventListener("ckhua:ok", onReady);
+      window.clearInterval(timer);
+      done(ok);
+    };
+    var onReady = function () {
+      if (window.CkHua && typeof window.CkHua.gua_shang === "function") finish(true);
+    };
+    window.addEventListener("ckhua:ok", onReady);
     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);
-      }
+      if (window.CkHua && typeof window.CkHua.gua_shang === "function") finish(true);
+      else if (tries >= 80) finish(false);
     }, 50);
   }
 
@@ -167,28 +224,31 @@
   function applyAudioPrefs(prefs) {
     if (!prefs) return;
     const muted = effectiveMuted(prefs);
+    const burstColor = burstColorOf(prefs);
     instances.forEach(function (instance) {
-      if (prefs.apply !== false && instance && typeof instance.setOutput === "function") {
-        instance.setOutput(prefs.volume, muted);
+      if (prefs.apply !== false && instance && typeof instance.xieYinLiang === "function") {
+        instance.xieYinLiang(prefs.volume, muted);
       }
-      if (instance && typeof instance.setHitsounds === "function") {
-        instance.setHitsounds(Boolean(prefs.hitsounds));
+      if (instance && typeof instance.xieAnJianYin === "function") {
+        instance.xieAnJianYin(Boolean(prefs.hitsounds));
+      }
+      if (instance && typeof instance.xieBaoSe === "function") {
+        instance.xieBaoSe(burstColor);
       }
     });
-    // 爆气色只影响之后挂载的播放器，避免切换偏好时立刻下载另一套贴图。
   }
 
   function bindInstancePersist(host, instance) {
-    if (instance && typeof instance.on === "function") {
+    if (instance && typeof instance.ting_zhe === "function") {
       try {
-        instance.on("volume", persistAudioPrefs);
+        instance.ting_zhe("volume", persistAudioPrefs);
       } catch (_error) {
         // Older players only support on("zone").
       }
     }
     const persistFromPlayer = function () {
-      if (instance && typeof instance.getOutput === "function") {
-        persistAudioPrefs(instance.getOutput());
+      if (instance && typeof instance.duYinLiang === "function") {
+        persistAudioPrefs(instance.duYinLiang());
       }
     };
     host.addEventListener("click", function (event) {
@@ -256,6 +316,68 @@
     return url + (url.indexOf("?") >= 0 ? "&" : "?") + "v=" + encodeURIComponent(ver);
   }
 
+  const warmedBgm = new Map();
+
+  function atlasPackName() {
+    const raw = String((window.__NOTE_PREVIEW_ATLAS_PACK__ || "")).trim().toLowerCase();
+    if (raw === "pinball" || raw === "bubble" || raw === "crescent") return raw;
+    return "idol";
+  }
+
+  function warmAudioUrl(url) {
+    url = (url || "").trim();
+    if (!url || warmedBgm.has(url) || typeof Audio === "undefined") return;
+    const audio = new Audio();
+    audio.autoplay = false;
+    audio.preload = "auto";
+    if (/^https?:/i.test(url)) audio.crossOrigin = "anonymous";
+    try {
+      audio.src = url;
+    } catch (_error) {
+      return;
+    }
+    try {
+      audio.load();
+    } catch (_error) {
+      // ignore
+    }
+    warmedBgm.set(url, audio);
+  }
+
+  function warmExpandedBgm() {
+    document.querySelectorAll(".burst-item.is-open " + HOST_SELECTOR).forEach(function (host) {
+      const urls = audioUrlsFor(host);
+      if (urls.audioUrl) warmAudioUrl(urls.audioUrl);
+    });
+  }
+
+  function preloadPlayerAssets() {
+    waitForPlayer(function (ready) {
+      if (!ready || !window.CkHua || typeof window.CkHua.yuJiaZai !== "function") {
+        return;
+      }
+      const prefs = readAudioPrefs();
+      window.CkHua.yuJiaZai({
+        assetBase: assetBaseFromPlayer(),
+        mode: atlasPackName(),
+        burstColor: burstColorOf(prefs),
+      });
+    });
+  }
+
+  function releaseWarmedBgm() {
+    warmedBgm.forEach(function (audio) {
+      try {
+        audio.pause();
+        audio.removeAttribute("src");
+        audio.load();
+      } catch (_error) {
+        // ignore
+      }
+    });
+    warmedBgm.clear();
+  }
+
   function hookPreviewAssetSrc(proto) {
     if (!proto) return;
     const desc = Object.getOwnPropertyDescriptor(proto, "src");
@@ -277,39 +399,34 @@
     hookPreviewAssetSrc(window.HTMLMediaElement && window.HTMLMediaElement.prototype);
   }
 
-  function songFromPayload(payload) {
-    if (!payload) return null;
-    return payload.song || payload;
-  }
+  let mountQueue = Promise.resolve();
 
-  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 anyInstancePlaying() {
+    let playing = false;
+    instances.forEach(function (instance) {
+      if (instance && typeof instance.zaiBoMe === "function" && instance.zaiBoMe()) {
+        playing = true;
+      }
+    });
+    return playing;
   }
 
-  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);
+  function runWhenPlayerIdle(fn) {
+    if (!anyInstancePlaying()) {
+      fn();
+      return;
     }
-    script.textContent = JSON.stringify(blob);
-    return script;
+    mountQueue = mountQueue.then(function () {
+      return new Promise(function (resolve) {
+        window.requestAnimationFrame(function () {
+          try {
+            fn();
+          } finally {
+            resolve();
+          }
+        });
+      });
+    });
   }
 
   function mount(host) {
@@ -318,153 +435,182 @@
     }
 
     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");
-          });
+    if (!canvas) return;
+
+    if (!data) {
+      if (host.dataset.previewFetching === "1") return;
+      host.dataset.previewFetching = "1";
+      setStatus(host, "正在加载谱面…", "loading");
+
+      const apiUrl = previewApiUrl();
+      if (!apiUrl) {
+        host.dataset.previewFetching = "";
+        setStatus(host, "谱面预览数据缺失。", "error");
         return;
       }
-      setStatus(host, "谱面预览数据缺失。", "error");
+
+      loadSongPreviewPayload(apiUrl)
+        .then(function (result) {
+          host.dataset.previewFetching = "";
+          if (!result || !result.ok || !result.song) {
+            setStatus(host, "谱面数据加载失败。", "error");
+            return;
+          }
+          applyPayloadToHosts(result);
+          if (!blobFromPayload(host, result)) {
+            setStatus(host, "该档位无谱面预览。", "ready");
+            return;
+          }
+          if (isExpanded(host)) mount(host);
+        })
+        .catch(function () {
+          host.dataset.previewFetching = "";
+          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);
+      runWhenPlayerIdle(function () {
+        try {
+          if (!host.isConnected || instances.has(host) || host.dataset.previewMounting !== "1") {
+            return;
+          }
+          if (!isExpanded(host)) {
+            return;
+          }
+          if (!ready) 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 leadRaw = Number(host.getAttribute("data-audio-lead-ms") || 0);
+          const instance = window.CkHua.gua_shang(canvas, {
+            snippet: snippet,
+            assetBase: assetBaseFromPlayer(),
+            audioUrl: audio.audioUrl || undefined,
+            audioFallbackUrl: audio.audioFallbackUrl || undefined,
+            audioLeadMs: Number.isFinite(leadRaw) ? leadRaw : 0,
+            startCombo: Number.isFinite(startCombo) ? startCombo : undefined,
+            hitsounds: Boolean(prefs.hitsounds),
+            burstColor: burstColorOf(prefs),
+            burstSfx: true,
+            volume: prefs.volume,
+            muted: muted,
+          });
+          if (instance && typeof instance.xieYinLiang === "function") {
+            instance.xieYinLiang(prefs.volume, muted);
+          }
+          if (instance && typeof instance.xieAnJianYin === "function") {
+            instance.xieAnJianYin(Boolean(prefs.hitsounds));
+          }
+          if (instance && typeof instance.xieBaoSe === "function") {
+            instance.xieBaoSe(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;
         }
-        setStatus(host, "谱面预览加载失败，请稍后重试。", "error");
-      } finally {
-        delete host.dataset.previewMounting;
-      }
+      });
     });
   }
 
+  function unmountHost(host) {
+    if (!host) return;
+    const instance = instances.get(host);
+    if (instance) {
+      try {
+        if (typeof instance.zanTingg === "function") instance.zanTingg();
+      } catch (_error) {
+        // ignore
+      }
+      try {
+        if (typeof instance.chai_diao === "function") instance.chai_diao();
+      } catch (_error) {
+        // ignore
+      }
+    }
+    instances.delete(host);
+    if (host.__notePreview) host.__notePreview = null;
+    if (window.__notePreview === instance) window.__notePreview = null;
+    delete host.dataset.previewMounting;
+    setStatus(host, "谱面预览加载中…", "loading");
+  }
+
+  function pauseHost(host) {
+    const instance = instances.get(host);
+    if (!instance || typeof instance.zanTingg !== "function") return;
+    if (typeof instance.zaiBoMe === "function" && !instance.zaiBoMe()) return;
+    try {
+      instance.zanTingg();
+    } catch (_error) {
+      // ignore
+    }
+  }
+
+  function pauseItem(item) {
+    if (!item) return;
+    item.querySelectorAll(HOST_SELECTOR).forEach(pauseHost);
+  }
+
   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);
+    scope.querySelectorAll(".burst-item").forEach(syncItem);
+    if (scope.classList && scope.classList.contains("burst-item")) syncItem(scope);
   }
 
-  function mountItem(item) {
-    if (!item || !item.classList.contains("is-open")) return;
+  function syncItem(item) {
+    if (!item) return;
+    if (!item.classList.contains("is-open")) {
+      // 收起只是 CSS 隐藏卡片：暂停即可，不要 destroy/重新挂载。
+      pauseItem(item);
+      return;
+    }
     item.querySelectorAll(HOST_SELECTOR).forEach(mount);
+    warmExpandedBgm();
+  }
+
+  function mountItem(item) {
+    syncItem(item);
   }
 
   function onAccordionChange(event) {
     const item = event.target.closest ? event.target.closest(".burst-item") : null;
-    mountItem(item);
+    syncItem(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();
+    Array.from(instances.keys()).forEach(unmountHost);
+    releaseWarmedBgm();
   }
 
   function init() {
     installPreviewAssetVersioning();
+    prefetchAllPreviewPayloads();
+    preloadPlayerAssets();
+    warmExpandedBgm();
     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);
@@ -472,15 +618,7 @@
 
     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 }
-      );
+      warmExpandedBgm();
     });
     window.addEventListener("pagehide", destroyAll, { once: true });
   }