@sweet-player/core 0.2.1 → 0.4.0

package/dist/index.js

@@ -25,6 +25,25 @@ var EventEmitter = class {
 
 // src/core/media.ts
 import Hls from "hls.js";
+
+// src/logger.ts
+var MAX_ENTRIES = 2e3;
+var entries = [];
+function pad2(n) {
+  return n < 10 ? `0${n}` : String(n);
+}
+function formatTs(d) {
+  return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()} ${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+function log(category, message) {
+  if (entries.length >= MAX_ENTRIES) entries.shift();
+  entries.push({ time: /* @__PURE__ */ new Date(), category, message });
+}
+function getLogText() {
+  return entries.map((e) => `[${formatTs(e.time)}] [${e.category}]\uFF1A${e.message}`).join("\n");
+}
+
+// src/core/media.ts
 function isHlsSource(src) {
   return /\.m3u8($|\?)/i.test(src);
 }
@@ -41,10 +60,15 @@ var MediaController = class {
   load(src) {
     this.detachHls();
     this.currentSrc = src;
+    log("\u64AD\u653E\u5668", `\u52A0\u8F7D\u6E90: ${src}`);
     if (isHlsSource(src)) {
       if (Hls.isSupported()) {
         this.hls = new Hls(this.hlsConfig);
+        this.hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+          log("hls\u4E8B\u4EF6", "\u5A92\u4F53\u6210\u529F\u9644\u52A0\u5230\u64AD\u653E\u5668");
+        });
         this.hls.on(Hls.Events.ERROR, (_event, data) => {
+          log("hls\u4E8B\u4EF6", `${data.fatal ? "\u81F4\u547D" : ""}\u9519\u8BEF: ${data.type} - ${data.details}`);
           if (data.fatal) {
             switch (data.type) {
               case Hls.ErrorTypes.NETWORK_ERROR:
@@ -60,8 +84,17 @@ var MediaController = class {
           }
         });
         this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          log("hls\u4E8B\u4EF6", "\u64AD\u653E\u6E05\u5355\u89E3\u6790\u5B8C\u6BD5");
           this.notifyTracks();
         });
+        this.hls.on(Hls.Events.BUFFER_CREATED, () => {
+          log("hls\u4E8B\u4EF6", "\u7F13\u51B2\u533A\u521B\u5EFA");
+        });
+        this.hls.on(Hls.Events.LEVEL_SWITCHED, (_event, data) => {
+          const level = this.hls?.levels[data.level];
+          const label = level?.height ? `${level.height}P` : `Level ${data.level}`;
+          log("hls\u4E8B\u4EF6", `\u753B\u8D28\u6863\u4F4D\u5207\u6362: ${label}`);
+        });
         this.hls.loadSource(src);
         this.hls.attachMedia(this.video);
         return;
@@ -424,69 +457,14 @@ var icons = {
   ),
   audio: createSvgIcon(
     "M12 3a9 9 0 0 0-9 9v7c0 1.1.9 2 2 2h4v-8H5v-1c0-3.87 3.13-7 7-7s7 3.13 7 7v1h-4v8h4c1.1 0 2-.9 2-2v-7a9 9 0 0 0-9-9z"
-  )
+  ),
+  settings: createSvgIcon(
+    "M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65a.5.5 0 0 0 .12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.49.49 0 0 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65a.5.5 0 0 0-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46a.5.5 0 0 0-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+  ),
+  chevronRight: createSvgIcon("M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"),
+  chevronLeft: createSvgIcon("M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z")
 };
 
-// src/ui/components/menu.ts
-function createPopupMenu(opts) {
-  const root = createEl("div", { className: "sp-menu" });
-  const btn = createEl("button", {
-    className: "sp-btn sp-menu-btn",
-    html: opts.buttonHtml,
-    attrs: { type: "button", title: opts.title, "aria-label": opts.title },
-    parent: root
-  });
-  const panel = createEl("div", { className: "sp-menu-panel", parent: root });
-  let items = [];
-  let activeValue;
-  function render() {
-    panel.innerHTML = "";
-    if (items.length === 0) {
-      createEl("div", { className: "sp-menu-empty", text: opts.emptyText ?? "-", parent: panel });
-      return;
-    }
-    for (const item of items) {
-      const itemBtn = createEl("button", {
-        className: "sp-menu-item" + (item.value === activeValue ? " sp-active" : ""),
-        text: item.label,
-        attrs: { type: "button" },
-        parent: panel
-      });
-      itemBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        close();
-        opts.onSelect(item);
-      });
-    }
-  }
-  function close() {
-    root.classList.remove("sp-open");
-  }
-  btn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    const willOpen = !root.classList.contains("sp-open");
-    root.closest(".sp-controls")?.querySelectorAll(".sp-menu.sp-open").forEach((m) => m.classList.remove("sp-open"));
-    root.classList.toggle("sp-open", willOpen);
-  });
-  document.addEventListener("click", close);
-  render();
-  return {
-    el: root,
-    setItems(next) {
-      items = next;
-      render();
-    },
-    setActive(value) {
-      activeValue = value;
-      render();
-    },
-    setButtonContent(html) {
-      btn.innerHTML = html;
-    },
-    close
-  };
-}
-
 // src/ui/components/progressBar.ts
 function createProgressBar(video, onSeek) {
   const root = createEl("div", { className: "sp-progress" });
@@ -594,87 +572,299 @@ function createVolumeControl(opts) {
   };
 }
 
+// src/ui/components/settingsPanel.ts
+function createSettingsPanel(opts) {
+  const root = createEl("div", { className: "sp-menu sp-settings" });
+  const btn = createEl("button", {
+    className: "sp-btn",
+    html: icons.settings,
+    attrs: { type: "button", title: opts.buttonTitle, "aria-label": opts.buttonTitle },
+    parent: root
+  });
+  const panel = createEl("div", { className: "sp-settings-panel", parent: root });
+  const mainView = createEl("div", { className: "sp-settings-main", parent: panel });
+  const subView = createEl("div", { className: "sp-settings-sub", parent: panel });
+  let sections = opts.sections;
+  let activeSub = null;
+  function renderMain() {
+    mainView.innerHTML = "";
+    for (const sec of sections) {
+      if (sec.toggle) {
+        const row2 = createEl("div", {
+          className: "sp-settings-row sp-settings-toggle-row",
+          attrs: { "data-key": sec.key },
+          parent: mainView
+        });
+        createEl("span", { className: "sp-settings-label", text: sec.label, parent: row2 });
+        const track = createEl("div", {
+          className: "sp-toggle" + (sec.toggle.checked ? " sp-on" : ""),
+          attrs: { role: "switch", "aria-checked": String(sec.toggle.checked), tabindex: "0" },
+          parent: row2
+        });
+        createEl("span", { className: "sp-toggle-thumb", parent: track });
+        const handler = (e) => {
+          e.stopPropagation();
+          sec.toggle.onToggle();
+        };
+        row2.addEventListener("click", handler);
+        track.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handler(e);
+          }
+        });
+        continue;
+      }
+      if (sec.items.length === 0) continue;
+      const row = createEl("button", {
+        className: "sp-settings-row",
+        attrs: { type: "button", "data-key": sec.key },
+        parent: mainView
+      });
+      createEl("span", { className: "sp-settings-label", text: sec.label, parent: row });
+      createEl("span", { className: "sp-settings-value", text: sec.currentValue, parent: row });
+      const arrow = createEl("span", { className: "sp-settings-arrow", parent: row });
+      arrow.innerHTML = icons.chevronRight;
+      row.addEventListener("click", (e) => {
+        e.stopPropagation();
+        showSub(sec.key);
+      });
+    }
+  }
+  function renderSub(key) {
+    subView.innerHTML = "";
+    const sec = sections.find((s) => s.key === key);
+    if (!sec) return;
+    const back = createEl("button", {
+      className: "sp-settings-back",
+      attrs: { type: "button" },
+      parent: subView
+    });
+    const backArrow = createEl("span", { className: "sp-settings-back-arrow", parent: back });
+    backArrow.innerHTML = icons.chevronLeft;
+    createEl("span", { text: sec.label, parent: back });
+    back.addEventListener("click", (e) => {
+      e.stopPropagation();
+      showMain();
+    });
+    for (const item of sec.items) {
+      const itemBtn = createEl("button", {
+        className: "sp-menu-item" + (item.value === sec.activeValue ? " sp-active" : ""),
+        text: item.label,
+        attrs: { type: "button" },
+        parent: subView
+      });
+      itemBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        close();
+        sec.onSelect(item);
+      });
+    }
+  }
+  function showSub(key) {
+    activeSub = key;
+    renderSub(key);
+    mainView.style.display = "none";
+    subView.style.display = "";
+  }
+  function showMain() {
+    activeSub = null;
+    mainView.style.display = "";
+    subView.style.display = "none";
+  }
+  function close() {
+    root.classList.remove("sp-open");
+    showMain();
+  }
+  btn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const willOpen = !root.classList.contains("sp-open");
+    root.closest(".sp-controls")?.querySelectorAll(".sp-menu.sp-open").forEach((m) => m.classList.remove("sp-open"));
+    if (willOpen) {
+      renderMain();
+      showMain();
+    }
+    root.classList.toggle("sp-open", willOpen);
+  });
+  const onDocClick = () => close();
+  document.addEventListener("click", onDocClick);
+  panel.addEventListener("click", (e) => e.stopPropagation());
+  renderMain();
+  showMain();
+  return {
+    el: root,
+    updateSection(key, patch) {
+      const sec = sections.find((s) => s.key === key);
+      if (!sec) return;
+      if (patch.items !== void 0) sec.items = patch.items;
+      if (patch.currentValue !== void 0) sec.currentValue = patch.currentValue;
+      if (patch.activeValue !== void 0) sec.activeValue = patch.activeValue;
+      if (patch.toggle) {
+        if (sec.toggle) {
+          sec.toggle.checked = patch.toggle.checked;
+          if (patch.toggle.onToggle) sec.toggle.onToggle = patch.toggle.onToggle;
+        } else {
+          sec.toggle = { checked: patch.toggle.checked, onToggle: patch.toggle.onToggle ?? (() => {
+          }) };
+        }
+      }
+      if (sec.toggle) {
+        if (!activeSub) renderMain();
+        return;
+      }
+      if (activeSub === key) renderSub(key);
+      if (!activeSub) renderMain();
+    },
+    close,
+    destroy() {
+      document.removeEventListener("click", onDocClick);
+      root.remove();
+    }
+  };
+}
+
 // src/ui/controls.ts
 function createControls(ctx) {
-  const { video, actions, i18n } = ctx;
+  const { video, actions, i18n, hidden } = ctx;
+  const show = (name) => !hidden.has(name);
   const topEl = createEl("div", { className: "sp-top" });
-  const titleEl = createEl("div", { className: "sp-title", text: ctx.title, parent: topEl });
-  titleEl.addEventListener("click", actions.onTitleClick);
+  if (show("title")) createEl("div", { className: "sp-title", text: ctx.title, parent: topEl });
   const bottomEl = createEl("div", { className: "sp-bottom" });
   const progress = createProgressBar(video, (t) => {
     video.currentTime = t;
   });
-  bottomEl.appendChild(progress.el);
+  if (show("progress")) bottomEl.appendChild(progress.el);
   const row = createEl("div", { className: "sp-controls", parent: bottomEl });
-  const button = (html, title, onClick, disabled = false) => {
+  const button = (html, title, onClick, disabled = false, visible = true) => {
     const btn = createEl("button", {
       className: "sp-btn",
       html,
       attrs: { type: "button", title, "aria-label": title },
-      parent: row
+      parent: visible ? row : void 0
     });
     btn.disabled = disabled;
     btn.addEventListener("click", onClick);
     return btn;
   };
-  button(icons.prev, i18n.t("prev"), () => actions.onPrev?.(), !actions.onPrev);
-  button(icons.seekBack, i18n.t("seekBack", { n: ctx.seekStep }), () => actions.seekBy(-ctx.seekStep));
-  const playBtn = button(icons.play, i18n.t("playPause"), actions.togglePlay);
-  button(icons.seekForward, i18n.t("seekForward", { n: ctx.seekStep }), () => actions.seekBy(ctx.seekStep));
-  button(icons.next, i18n.t("next"), () => actions.onNext?.(), !actions.onNext);
-  const timeEl = createEl("span", { className: "sp-time", text: "0:00 / 0:00", parent: row });
-  createEl("div", { className: "sp-controls-spacer", parent: row });
-  const rateMenu = createPopupMenu({
-    buttonHtml: "1x",
-    title: i18n.t("speed"),
-    emptyText: i18n.t("empty"),
-    onSelect: (item) => actions.setRate(item.value)
+  button(icons.prev, i18n.t("prev"), () => actions.onPrev?.(), !actions.onPrev, show("prev"));
+  button(icons.seekBack, i18n.t("seekBack", { n: ctx.seekStep }), () => actions.seekBy(-ctx.seekStep), false, show("seekBack"));
+  const playBtn = button(icons.play, i18n.t("playPause"), actions.togglePlay, false, show("play"));
+  button(icons.seekForward, i18n.t("seekForward", { n: ctx.seekStep }), () => actions.seekBy(ctx.seekStep), false, show("seekForward"));
+  button(icons.next, i18n.t("next"), () => actions.onNext?.(), !actions.onNext, show("next"));
+  const timeEl = createEl("span", {
+    className: "sp-time",
+    text: "0:00 / 0:00",
+    parent: show("time") ? row : void 0
   });
-  rateMenu.setItems(ctx.playbackRates.map((r) => ({ label: `${r}x`, value: r })));
-  rateMenu.setActive(video.playbackRate);
-  row.appendChild(rateMenu.el);
-  const qualityMenu = createPopupMenu({
-    buttonHtml: i18n.t("quality"),
-    title: i18n.t("quality"),
-    emptyText: i18n.t("empty"),
-    onSelect: (item) => actions.selectQuality(item.value)
-  });
-  row.appendChild(qualityMenu.el);
-  const ratioMenu = createPopupMenu({
-    buttonHtml: i18n.t("aspectRatio"),
-    title: i18n.t("aspectRatio"),
-    emptyText: i18n.t("empty"),
-    onSelect: (item) => actions.setAspectRatio(item.value)
-  });
-  ratioMenu.setItems(
-    ctx.aspectRatios.map((r) => ({ label: r === "original" ? i18n.t("ratioOriginal") : r, value: r }))
-  );
-  ratioMenu.setActive("original");
-  row.appendChild(ratioMenu.el);
-  const audioMenu = createPopupMenu({
-    buttonHtml: icons.audio,
-    title: i18n.t("audioTrack"),
-    emptyText: i18n.t("empty"),
-    onSelect: (item) => actions.selectAudioTrack(item.value)
-  });
-  row.appendChild(audioMenu.el);
+  createEl("div", { className: "sp-controls-spacer", parent: row });
   const volume = createVolumeControl({
     muteTitle: i18n.t("mute"),
     onVolumeChange: actions.setVolume,
     onToggleMute: actions.toggleMute
   });
-  row.appendChild(volume.el);
-  if (document.pictureInPictureEnabled) {
-    button(icons.pip, i18n.t("pip"), actions.togglePip);
-  }
-  const fsBtn = button(icons.fullscreen, i18n.t("fullscreen"), actions.toggleFullscreen);
+  if (show("volume")) row.appendChild(volume.el);
+  let currentRate = video.playbackRate;
+  let qualityItems = [];
+  let activeQuality;
+  let audioItems = [];
+  let activeAudio;
+  const settingsPanel = createSettingsPanel({
+    buttonTitle: i18n.t("settings"),
+    sections: [
+      ...show("rate") ? [{
+        key: "rate",
+        label: i18n.t("speed"),
+        currentValue: `${currentRate}x`,
+        items: ctx.playbackRates.map((r) => ({ label: `${r}x`, value: r })),
+        activeValue: currentRate,
+        onSelect: (item) => actions.setRate(item.value)
+      }] : [],
+      ...show("quality") ? [{
+        key: "quality",
+        label: i18n.t("quality"),
+        currentValue: i18n.t("qualityAuto"),
+        items: qualityItems,
+        activeValue: activeQuality,
+        onSelect: (item) => actions.selectQuality(item.value)
+      }] : [],
+      ...show("ratio") ? [{
+        key: "ratio",
+        label: i18n.t("aspectRatio"),
+        currentValue: i18n.t("ratioOriginal"),
+        items: ctx.aspectRatios.map((r) => ({
+          label: r === "original" ? i18n.t("ratioOriginal") : r,
+          value: r
+        })),
+        activeValue: "original",
+        onSelect: (item) => actions.setAspectRatio(item.value)
+      }] : [],
+      ...show("audioTrack") ? [{
+        key: "audioTrack",
+        label: i18n.t("audioTrack"),
+        currentValue: "-",
+        items: audioItems,
+        activeValue: activeAudio,
+        onSelect: (item) => actions.selectAudioTrack(item.value)
+      }] : [],
+      ...show("pip") && document.pictureInPictureEnabled ? [{
+        key: "pip",
+        label: i18n.t("pip"),
+        currentValue: "",
+        items: [],
+        activeValue: void 0,
+        onSelect: () => {
+        },
+        toggle: {
+          checked: false,
+          onToggle: () => actions.togglePip()
+        }
+      }] : []
+    ]
+  });
+  if (show("settings")) row.appendChild(settingsPanel.el);
+  const fsBtn = button(icons.fullscreen, i18n.t("fullscreen"), actions.toggleFullscreen, false, show("fullscreen"));
+  const qualityMenuAdapter = {
+    el: document.createElement("div"),
+    setItems(items) {
+      qualityItems = items;
+      const cur = activeQuality ? items.find((i) => i.value === activeQuality)?.label : i18n.t("qualityAuto");
+      settingsPanel.updateSection("quality", { items, currentValue: cur ?? i18n.t("qualityAuto") });
+    },
+    setActive(value) {
+      activeQuality = value;
+      const label = qualityItems.find((i) => i.value === value)?.label ?? i18n.t("qualityAuto");
+      settingsPanel.updateSection("quality", { activeValue: value, currentValue: label });
+    },
+    setButtonContent() {
+    },
+    close() {
+    }
+  };
+  const audioMenuAdapter = {
+    el: document.createElement("div"),
+    setItems(items) {
+      audioItems = items;
+      const cur = activeAudio ? items.find((i) => i.value === activeAudio)?.label : "-";
+      settingsPanel.updateSection("audioTrack", { items, currentValue: cur ?? "-" });
+    },
+    setActive(value) {
+      activeAudio = value;
+      const label = audioItems.find((i) => i.value === value)?.label ?? "-";
+      settingsPanel.updateSection("audioTrack", { activeValue: value, currentValue: label });
+    },
+    setButtonContent() {
+    },
+    close() {
+    }
+  };
   return {
     topEl,
     bottomEl,
     progress,
     volume,
-    qualityMenu,
-    audioMenu,
+    qualityMenu: qualityMenuAdapter,
+    audioMenu: audioMenuAdapter,
+    settingsPanel,
     updatePlayState(playing) {
       playBtn.innerHTML = playing ? icons.pause : icons.play;
     },
@@ -683,16 +873,21 @@ function createControls(ctx) {
       progress.update();
     },
     updateRate(rate) {
-      rateMenu.setButtonContent(`${rate}x`);
-      rateMenu.setActive(rate);
+      currentRate = rate;
+      settingsPanel.updateSection("rate", { activeValue: rate, currentValue: `${rate}x` });
     },
     updateFullscreen(fs) {
       fsBtn.innerHTML = fs ? icons.fullscreenExit : icons.fullscreen;
     },
+    updatePip(pip) {
+      settingsPanel.updateSection("pip", { toggle: { checked: pip } });
+    },
     updateRatio(ratio) {
-      ratioMenu.setActive(ratio);
+      const label = ratio === "original" ? i18n.t("ratioOriginal") : ratio;
+      settingsPanel.updateSection("ratio", { activeValue: ratio, currentValue: label });
     },
     destroy() {
+      settingsPanel.destroy();
       topEl.remove();
       bottomEl.remove();
     }
@@ -725,6 +920,94 @@ function createOsd() {
   };
 }
 
+// src/ui/components/contextMenu.ts
+function createContextMenu(container, items) {
+  const menu = createEl("div", { className: "sp-context-menu", parent: container });
+  for (const item of items) {
+    const btn = createEl("button", {
+      className: "sp-context-item",
+      text: item.label,
+      attrs: { type: "button" },
+      parent: menu
+    });
+    btn.addEventListener("click", () => {
+      hide();
+      item.onClick();
+    });
+  }
+  function show(clientX, clientY) {
+    menu.classList.add("sp-visible");
+    const rect = container.getBoundingClientRect();
+    const x = Math.max(4, Math.min(clientX - rect.left, rect.width - menu.offsetWidth - 4));
+    const y = Math.max(4, Math.min(clientY - rect.top, rect.height - menu.offsetHeight - 4));
+    menu.style.left = `${x}px`;
+    menu.style.top = `${y}px`;
+  }
+  function hide() {
+    menu.classList.remove("sp-visible");
+  }
+  const onContextMenu = (e) => {
+    e.preventDefault();
+    show(e.clientX, e.clientY);
+  };
+  const onPointerDown = (e) => {
+    if (!menu.contains(e.target)) hide();
+  };
+  container.addEventListener("contextmenu", onContextMenu);
+  document.addEventListener("pointerdown", onPointerDown, true);
+  return {
+    hide,
+    destroy() {
+      container.removeEventListener("contextmenu", onContextMenu);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      menu.remove();
+    }
+  };
+}
+
+// src/ui/components/shortcutsOverlay.ts
+function createShortcutsOverlay(container, i18n, seekStep) {
+  let root = null;
+  function show() {
+    if (root) return;
+    root = createEl("div", { className: "sp-shortcuts", parent: container });
+    const closeBtn = createEl("button", {
+      className: "sp-shortcuts-close",
+      text: "\u2715",
+      attrs: { type: "button", "aria-label": i18n.t("close") },
+      parent: root
+    });
+    closeBtn.addEventListener("click", hide);
+    createEl("div", { className: "sp-shortcuts-title", text: i18n.t("shortcuts"), parent: root });
+    const dl = createEl("dl", { className: "sp-shortcuts-body", parent: root });
+    const rows = [
+      [i18n.t("scKeySpace"), i18n.t("scPlayPause")],
+      ["\u2190 / \u2192", i18n.t("scSeek", { n: seekStep })],
+      [i18n.t("scKeyHold"), i18n.t("scLongSeek")],
+      ["\u2191 / \u2193", i18n.t("scVolume")],
+      ["F", i18n.t("scFullscreen")],
+      ["M", i18n.t("scMute")]
+    ];
+    for (const [key, action] of rows) {
+      const row = createEl("div", { className: "sp-shortcuts-row", parent: dl });
+      const dt = createEl("dt", { parent: row });
+      createEl("span", { className: "sp-kbd", text: key, parent: dt });
+      createEl("dd", { text: action, parent: row });
+    }
+  }
+  function hide() {
+    root?.remove();
+    root = null;
+  }
+  return {
+    toggle() {
+      root ? hide() : show();
+    },
+    hide,
+    destroy: hide
+  };
+}
+
 // src/ui/components/statsOverlay.ts
 function createStatsOverlay(container, video, media, i18n) {
   let root = null;
@@ -763,11 +1046,31 @@ function createStatsOverlay(container, video, media, i18n) {
   function show() {
     if (root) return;
     root = createEl("div", { className: "sp-stats", parent: container });
+    const header = createEl("div", { className: "sp-stats-header", parent: root });
+    const copyBtn = createEl("button", {
+      className: "sp-stats-copy",
+      text: i18n.t("copyLog"),
+      attrs: { type: "button" },
+      parent: header
+    });
+    copyBtn.addEventListener("click", () => {
+      const text = getLogText();
+      void navigator.clipboard.writeText(text || "(empty)").then(
+        () => {
+          copyBtn.textContent = i18n.t("logCopied");
+          setTimeout(() => {
+            copyBtn.textContent = i18n.t("copyLog");
+          }, 1500);
+        },
+        () => {
+        }
+      );
+    });
     const closeBtn = createEl("button", {
       className: "sp-stats-close",
       text: "\u2715",
       attrs: { type: "button", "aria-label": i18n.t("closeStats") },
-      parent: root
+      parent: header
     });
     closeBtn.addEventListener("click", hide);
     createEl("dl", { className: "sp-stats-body", parent: root });
@@ -932,7 +1235,22 @@ var zhCN = {
   autoNextIn: "{n} \u79D2\u540E\u64AD\u653E\u4E0B\u4E00\u4E2A",
   cancel: "\u53D6\u6D88",
   loadError: "\u89C6\u9891\u52A0\u8F7D\u5931\u8D25",
-  retry: "\u91CD\u8BD5"
+  retry: "\u91CD\u8BD5",
+  changelog: "\u66F4\u65B0\u8BB0\u5F55",
+  videoInfo: "\u89C6\u9891\u4FE1\u606F",
+  shortcuts: "\u5FEB\u6377\u952E",
+  close: "\u5173\u95ED",
+  scKeySpace: "\u7A7A\u683C",
+  scKeyHold: "\u2190 / \u2192 \u957F\u6309",
+  scPlayPause: "\u64AD\u653E / \u6682\u505C",
+  scSeek: "\u5FEB\u9000 / \u5FEB\u8FDB {n} \u79D2",
+  scLongSeek: "\u9636\u68AF\u7D2F\u8BA1\u5FEB\u8FDB\u5FEB\u9000\uFF0C\u677E\u5F00\u6267\u884C",
+  scVolume: "\u97F3\u91CF \xB15",
+  scFullscreen: "\u5168\u5C4F\u5207\u6362",
+  scMute: "\u9759\u97F3\u5207\u6362",
+  settings: "\u8BBE\u7F6E",
+  copyLog: "\u590D\u5236\u65E5\u5FD7",
+  logCopied: "\u5DF2\u590D\u5236"
 };
 var en = {
   play: "Play",
@@ -961,7 +1279,22 @@ var en = {
   autoNextIn: "Playing next in {n}s",
   cancel: "Cancel",
   loadError: "Failed to load video",
-  retry: "Retry"
+  retry: "Retry",
+  changelog: "Changelog",
+  videoInfo: "Video info",
+  shortcuts: "Shortcuts",
+  close: "Close",
+  scKeySpace: "Space",
+  scKeyHold: "Hold \u2190 / \u2192",
+  scPlayPause: "Play / Pause",
+  scSeek: "Rewind / forward {n}s",
+  scLongSeek: "Accelerating seek, release to apply",
+  scVolume: "Volume \xB15",
+  scFullscreen: "Toggle fullscreen",
+  scMute: "Toggle mute",
+  settings: "Settings",
+  copyLog: "Copy log",
+  logCopied: "Copied"
 };
 var locales = { "zh-CN": zhCN, en };
 var I18n = class {
@@ -1034,8 +1367,11 @@ function clearProgress(id) {
   }
 }
 
+// src/version.ts
+var VERSION = true ? "0.4.0" : "dev";
+
 // src/styles/player.css
-var player_default = ".sweet-player {\n  --sp-accent: #ff4d6d;\n  --sp-bg: #000;\n  --sp-text: #fff;\n  --sp-bar-height: 4px;\n  --sp-bar-hover-height: 6px;\n  --sp-control-size: 36px;\n  --sp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--sp-bg);\n  color: var(--sp-text);\n  font-family: var(--sp-font);\n  font-size: 13px;\n  overflow: hidden;\n  user-select: none;\n  -webkit-user-select: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sweet-player *,\n.sweet-player *::before,\n.sweet-player *::after {\n  box-sizing: border-box;\n}\n\n.sp-video {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n}\n\n/* \u5F3A\u5236\u753B\u9762\u6BD4\u4F8B\uFF1Avideo \u5C45\u4E2D\u3001\u6309\u6BD4\u4F8B\u9650\u5236\u5C3A\u5BF8\u5E76\u62C9\u4F38\u586B\u5145 */\n.sweet-player[data-ratio]:not([data-ratio='original']) .sp-video {\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  aspect-ratio: var(--sp-forced-ratio);\n  object-fit: fill;\n}\n\n/* ---------- \u9876\u90E8\u6807\u9898\u533A ---------- */\n.sp-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 12px 16px 28px;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);\n  transition: opacity 0.25s ease;\n  pointer-events: none;\n}\n\n.sp-title {\n  display: inline-block;\n  max-width: 70%;\n  font-size: 15px;\n  font-weight: 500;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  pointer-events: auto;\n  cursor: default;\n}\n\n/* ---------- \u7EDF\u8BA1\u4FE1\u606F\u8499\u5C42 ---------- */\n.sp-stats {\n  position: absolute;\n  top: 12px;\n  left: 12px;\n  z-index: 30;\n  min-width: 300px;\n  max-width: calc(100% - 24px);\n  padding: 10px 14px;\n  background: rgba(0, 0, 0, 0.75);\n  border-radius: 6px;\n  font-size: 12px;\n  line-height: 1.7;\n  font-family: 'SFMono-Regular', Consolas, monospace;\n  pointer-events: auto;\n}\n\n.sp-stats-close {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  opacity: 0.7;\n  font-size: 16px;\n  line-height: 1;\n}\n\n.sp-stats-close:hover {\n  opacity: 1;\n}\n\n.sp-stats-row {\n  display: flex;\n  gap: 12px;\n}\n\n.sp-stats-row dt {\n  flex: 0 0 110px;\n  opacity: 0.65;\n  margin: 0;\n}\n\n.sp-stats-row dd {\n  margin: 0;\n  word-break: break-all;\n}\n\n/* ---------- \u4E2D\u592E OSD \u53CD\u9988 ---------- */\n.sp-osd {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 20;\n  padding: 10px 18px;\n  background: rgba(0, 0, 0, 0.65);\n  border-radius: 6px;\n  font-size: 16px;\n  font-weight: 500;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.sp-osd.sp-visible {\n  opacity: 1;\n}\n\n/* ---------- \u5E95\u90E8\u63A7\u5236\u533A ---------- */\n.sp-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 24px 12px 6px;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);\n  transition: opacity 0.25s ease;\n  z-index: 10;\n}\n\n.sweet-player.sp-controls-hidden .sp-bottom,\n.sweet-player.sp-controls-hidden .sp-top {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.sweet-player.sp-controls-hidden {\n  cursor: none;\n}\n\n/* ---------- \u8FDB\u5EA6\u6761 ---------- */\n.sp-progress {\n  position: relative;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin-bottom: 4px;\n}\n\n.sp-progress-track {\n  position: relative;\n  width: 100%;\n  height: var(--sp-bar-height);\n  background: rgba(255, 255, 255, 0.25);\n  border-radius: 2px;\n  overflow: visible;\n  transition: height 0.1s ease;\n}\n\n.sp-progress:hover .sp-progress-track {\n  height: var(--sp-bar-hover-height);\n}\n\n.sp-progress-buffered,\n.sp-progress-played {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: 2px;\n}\n\n.sp-progress-buffered {\n  background: rgba(255, 255, 255, 0.35);\n}\n\n.sp-progress-played {\n  background: var(--sp-accent);\n}\n\n.sp-progress-thumb {\n  position: absolute;\n  top: 50%;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--sp-accent);\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.1s ease;\n  pointer-events: none;\n}\n\n.sp-progress:hover .sp-progress-thumb,\n.sp-progress.sp-dragging .sp-progress-thumb {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n.sp-progress-tooltip {\n  position: absolute;\n  bottom: 18px;\n  transform: translateX(-50%);\n  padding: 2px 6px;\n  background: rgba(0, 0, 0, 0.8);\n  border-radius: 3px;\n  font-size: 12px;\n  display: none;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.sp-progress:hover .sp-progress-tooltip {\n  display: block;\n}\n\n/* ---------- \u63A7\u5236\u6309\u94AE\u884C ---------- */\n.sp-controls {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.sp-controls-spacer {\n  flex: 1;\n}\n\n.sp-btn {\n  width: var(--sp-control-size);\n  height: var(--sp-control-size);\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  padding: 0;\n  opacity: 0.9;\n  transition: opacity 0.1s ease, background 0.1s ease;\n}\n\n.sp-btn:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.sp-btn svg {\n  width: 22px;\n  height: 22px;\n}\n\n.sp-btn:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.sp-time {\n  padding: 0 8px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  opacity: 0.95;\n}\n\n/* ---------- \u5F39\u51FA\u83DC\u5355 ---------- */\n.sp-menu {\n  position: relative;\n}\n\n.sp-menu-btn {\n  min-width: var(--sp-control-size);\n  width: auto;\n  padding: 0 8px;\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.sp-menu-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  min-width: 80px;\n  max-height: 220px;\n  overflow-y: auto;\n  background: rgba(28, 28, 28, 0.95);\n  border-radius: 6px;\n  padding: 4px 0;\n  display: none;\n  z-index: 25;\n}\n\n.sp-menu.sp-open .sp-menu-panel {\n  display: block;\n}\n\n.sp-menu-item {\n  display: block;\n  width: 100%;\n  padding: 7px 16px;\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  text-align: center;\n  cursor: pointer;\n  font-size: 13px;\n  white-space: nowrap;\n}\n\n.sp-menu-item:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n.sp-menu-item.sp-active {\n  color: var(--sp-accent);\n  font-weight: 600;\n}\n\n.sp-menu-empty {\n  padding: 7px 16px;\n  opacity: 0.5;\n  white-space: nowrap;\n}\n\n/* ---------- \u72B6\u6001\u8499\u5C42\uFF1Aloading / \u9519\u8BEF / \u7ED3\u675F ---------- */\n.sp-state {\n  position: absolute;\n  inset: 0;\n  z-index: 15;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.sp-spinner {\n  opacity: 0;\n  transition: opacity 0.2s ease 0.3s; /* \u5EF6\u8FDF\u51FA\u73B0\uFF0C\u907F\u514D\u77ED\u6682 seek \u95EA\u70C1 */\n}\n\n.sp-state.sp-loading .sp-spinner {\n  opacity: 1;\n}\n\n.sp-spinner-ring {\n  width: 44px;\n  height: 44px;\n  border: 4px solid rgba(255, 255, 255, 0.25);\n  border-top-color: var(--sp-accent);\n  border-radius: 50%;\n  animation: sp-spin 0.8s linear infinite;\n}\n\n@keyframes sp-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.sp-state-panel {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  background: rgba(0, 0, 0, 0.55);\n  pointer-events: auto;\n}\n\n.sp-state-message {\n  font-size: 15px;\n  opacity: 0.95;\n}\n\n.sp-state-actions {\n  display: flex;\n  gap: 12px;\n}\n\n.sp-state-btn {\n  padding: 8px 22px;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  border-radius: 18px;\n  background: transparent;\n  color: var(--sp-text);\n  font-size: 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-state-btn:hover {\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.sp-state-btn-primary {\n  background: var(--sp-accent);\n  border-color: var(--sp-accent);\n}\n\n.sp-state-btn-primary:hover {\n  background: var(--sp-accent);\n  filter: brightness(1.1);\n}\n\n.sp-state-countdown {\n  font-size: 13px;\n  opacity: 0.85;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sp-state-cancel {\n  border: none;\n  background: transparent;\n  color: var(--sp-accent);\n  cursor: pointer;\n  font-size: 13px;\n  padding: 2px 6px;\n}\n\n/* ---------- \u97F3\u91CF ---------- */\n.sp-volume {\n  display: flex;\n  align-items: center;\n}\n\n.sp-volume-slider {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.15s ease;\n  display: flex;\n  align-items: center;\n}\n\n.sp-volume:hover .sp-volume-slider,\n.sp-volume.sp-dragging .sp-volume-slider {\n  width: 64px;\n}\n\n.sp-volume-track {\n  position: relative;\n  width: 56px;\n  height: var(--sp-bar-height);\n  margin: 0 4px;\n  background: rgba(255, 255, 255, 0.25);\n  border-radius: 2px;\n  cursor: pointer;\n}\n\n.sp-volume-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-text);\n  border-radius: 2px;\n}\n\n.sp-volume-thumb {\n  position: absolute;\n  top: 50%;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--sp-text);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n";
+var player_default = ".sweet-player {\n  --sp-accent: #ff4d6d;\n  --sp-bg: #000;\n  --sp-text: #fff;\n  --sp-bar-height: 4px;\n  --sp-bar-hover-height: 6px;\n  --sp-control-size: 36px;\n  --sp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: var(--sp-bg);\n  color: var(--sp-text);\n  font-family: var(--sp-font);\n  font-size: 13px;\n  overflow: hidden;\n  user-select: none;\n  -webkit-user-select: none;\n  outline: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sweet-player *,\n.sweet-player *::before,\n.sweet-player *::after {\n  box-sizing: border-box;\n}\n\n.sp-video {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  display: block;\n}\n\n/* \u5F3A\u5236\u753B\u9762\u6BD4\u4F8B\uFF1Avideo \u5C45\u4E2D\u3001\u6309\u6BD4\u4F8B\u9650\u5236\u5C3A\u5BF8\u5E76\u62C9\u4F38\u586B\u5145 */\n.sweet-player[data-ratio]:not([data-ratio='original']) .sp-video {\n  width: auto;\n  height: auto;\n  max-width: 100%;\n  max-height: 100%;\n  aspect-ratio: var(--sp-forced-ratio);\n  object-fit: fill;\n}\n\n/* ---------- \u9876\u90E8\u6807\u9898\u533A ---------- */\n.sp-top {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  padding: 12px 16px 28px;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);\n  transition: opacity 0.25s ease;\n  pointer-events: none;\n}\n\n.sp-title {\n  display: inline-block;\n  max-width: 70%;\n  font-size: 15px;\n  font-weight: 500;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  pointer-events: auto;\n  cursor: default;\n}\n\n/* ---------- \u7EDF\u8BA1\u4FE1\u606F\u8499\u5C42 ---------- */\n.sp-stats {\n  position: absolute;\n  top: 12px;\n  left: 12px;\n  z-index: 30;\n  min-width: 300px;\n  max-width: calc(100% - 24px);\n  padding: 10px 14px;\n  background: rgba(0, 0, 0, 0.75);\n  border-radius: 6px;\n  font-size: 12px;\n  line-height: 1.7;\n  font-family: 'SFMono-Regular', Consolas, monospace;\n  pointer-events: auto;\n}\n\n.sp-stats-header {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 4px;\n  margin: -4px -6px 4px 0;\n}\n\n.sp-stats-copy {\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  opacity: 0.7;\n  font-size: 12px;\n  line-height: 22px;\n  padding: 0 6px;\n  border-radius: 3px;\n  white-space: nowrap;\n}\n\n.sp-stats-copy:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.sp-stats-close {\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  opacity: 0.7;\n  font-size: 16px;\n  line-height: 1;\n  flex-shrink: 0;\n}\n\n.sp-stats-close:hover {\n  opacity: 1;\n}\n\n.sp-stats-row {\n  display: flex;\n  gap: 12px;\n}\n\n.sp-stats-row dt {\n  flex: 0 0 110px;\n  opacity: 0.65;\n  margin: 0;\n}\n\n.sp-stats-row dd {\n  margin: 0;\n  word-break: break-all;\n}\n\n/* ---------- \u5FEB\u6377\u952E\u9762\u677F ---------- */\n.sp-shortcuts {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 30;\n  min-width: 280px;\n  max-width: calc(100% - 24px);\n  max-height: calc(100% - 24px);\n  overflow-y: auto;\n  padding: 14px 20px 14px;\n  background: rgba(0, 0, 0, 0.8);\n  border-radius: 8px;\n  font-size: 13px;\n  line-height: 2.1;\n  pointer-events: auto;\n}\n\n.sp-shortcuts-title {\n  font-size: 14px;\n  font-weight: 600;\n  margin-bottom: 6px;\n}\n\n.sp-shortcuts-body {\n  margin: 0;\n}\n\n.sp-shortcuts-row {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.sp-shortcuts-row dt {\n  flex: 0 0 100px;\n  margin: 0;\n}\n\n.sp-shortcuts-row dd {\n  margin: 0;\n  opacity: 0.85;\n}\n\n.sp-kbd {\n  display: inline-block;\n  padding: 0 7px;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  font-family: 'SFMono-Regular', Consolas, monospace;\n  font-size: 12px;\n  line-height: 20px;\n  white-space: nowrap;\n}\n\n.sp-shortcuts-close {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  opacity: 0.7;\n  font-size: 16px;\n  line-height: 1;\n}\n\n.sp-shortcuts-close:hover {\n  opacity: 1;\n}\n\n/* ---------- \u53F3\u952E\u83DC\u5355 ---------- */\n.sp-context-menu {\n  position: absolute;\n  z-index: 40;\n  min-width: 150px;\n  padding: 4px 0;\n  background: rgba(28, 28, 28, 0.95);\n  border-radius: 6px;\n  display: none;\n}\n\n.sp-context-menu.sp-visible {\n  display: block;\n}\n\n.sp-context-item {\n  display: block;\n  width: 100%;\n  padding: 8px 16px;\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  text-align: left;\n  cursor: pointer;\n  font-size: 13px;\n  white-space: nowrap;\n}\n\n.sp-context-item:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n/* ---------- \u4E2D\u592E OSD \u53CD\u9988 ---------- */\n.sp-osd {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 20;\n  padding: 10px 18px;\n  background: rgba(0, 0, 0, 0.65);\n  border-radius: 6px;\n  font-size: 16px;\n  font-weight: 500;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.sp-osd.sp-visible {\n  opacity: 1;\n}\n\n/* ---------- \u5E95\u90E8\u63A7\u5236\u533A ---------- */\n.sp-bottom {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 24px 12px 6px;\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);\n  transition: opacity 0.25s ease;\n  z-index: 10;\n}\n\n.sweet-player.sp-controls-hidden .sp-bottom,\n.sweet-player.sp-controls-hidden .sp-top {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.sweet-player.sp-controls-hidden {\n  cursor: none;\n}\n\n/* ---------- \u8FDB\u5EA6\u6761 ---------- */\n.sp-progress {\n  position: relative;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  margin-bottom: 4px;\n}\n\n.sp-progress-track {\n  position: relative;\n  width: 100%;\n  height: var(--sp-bar-height);\n  background: rgba(255, 255, 255, 0.25);\n  border-radius: 2px;\n  overflow: visible;\n  transition: height 0.1s ease;\n}\n\n.sp-progress:hover .sp-progress-track {\n  height: var(--sp-bar-hover-height);\n}\n\n.sp-progress-buffered,\n.sp-progress-played {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: 2px;\n}\n\n.sp-progress-buffered {\n  background: rgba(255, 255, 255, 0.35);\n}\n\n.sp-progress-played {\n  background: var(--sp-accent);\n}\n\n.sp-progress-thumb {\n  position: absolute;\n  top: 50%;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: var(--sp-accent);\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.1s ease;\n  pointer-events: none;\n}\n\n.sp-progress:hover .sp-progress-thumb,\n.sp-progress.sp-dragging .sp-progress-thumb {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n.sp-progress-tooltip {\n  position: absolute;\n  bottom: 18px;\n  transform: translateX(-50%);\n  padding: 2px 6px;\n  background: rgba(0, 0, 0, 0.8);\n  border-radius: 3px;\n  font-size: 12px;\n  display: none;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.sp-progress:hover .sp-progress-tooltip {\n  display: block;\n}\n\n/* ---------- \u63A7\u5236\u6309\u94AE\u884C ---------- */\n.sp-controls {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.sp-controls-spacer {\n  flex: 1;\n}\n\n.sp-btn {\n  width: var(--sp-control-size);\n  height: var(--sp-control-size);\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  padding: 0;\n  opacity: 0.9;\n  transition: opacity 0.1s ease, background 0.1s ease;\n}\n\n.sp-btn:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.sp-btn svg {\n  width: 22px;\n  height: 22px;\n}\n\n.sp-btn:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.sp-time {\n  padding: 0 8px;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  opacity: 0.95;\n}\n\n/* ---------- \u5F39\u51FA\u83DC\u5355 ---------- */\n.sp-menu {\n  position: relative;\n}\n\n.sp-menu-btn {\n  min-width: var(--sp-control-size);\n  width: auto;\n  padding: 0 8px;\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.sp-menu-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  min-width: 80px;\n  max-height: 220px;\n  overflow-y: auto;\n  background: rgba(28, 28, 28, 0.95);\n  border-radius: 6px;\n  padding: 4px 0;\n  display: none;\n  z-index: 25;\n}\n\n.sp-menu.sp-open .sp-menu-panel {\n  display: block;\n}\n\n.sp-menu-item {\n  display: block;\n  width: 100%;\n  padding: 7px 16px;\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  text-align: center;\n  cursor: pointer;\n  font-size: 13px;\n  white-space: nowrap;\n}\n\n.sp-menu-item:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n.sp-menu-item.sp-active {\n  color: var(--sp-accent);\n  font-weight: 600;\n}\n\n.sp-menu-empty {\n  padding: 7px 16px;\n  opacity: 0.5;\n  white-space: nowrap;\n}\n\n/* ---------- \u72B6\u6001\u8499\u5C42\uFF1Aloading / \u9519\u8BEF / \u7ED3\u675F ---------- */\n.sp-state {\n  position: absolute;\n  inset: 0;\n  z-index: 15;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.sp-spinner {\n  opacity: 0;\n  transition: opacity 0.2s ease 0.3s; /* \u5EF6\u8FDF\u51FA\u73B0\uFF0C\u907F\u514D\u77ED\u6682 seek \u95EA\u70C1 */\n}\n\n.sp-state.sp-loading .sp-spinner {\n  opacity: 1;\n}\n\n.sp-spinner-ring {\n  width: 44px;\n  height: 44px;\n  border: 4px solid rgba(255, 255, 255, 0.25);\n  border-top-color: var(--sp-accent);\n  border-radius: 50%;\n  animation: sp-spin 0.8s linear infinite;\n}\n\n@keyframes sp-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.sp-state-panel {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  background: rgba(0, 0, 0, 0.55);\n  pointer-events: auto;\n}\n\n.sp-state-message {\n  font-size: 15px;\n  opacity: 0.95;\n}\n\n.sp-state-actions {\n  display: flex;\n  gap: 12px;\n}\n\n.sp-state-btn {\n  padding: 8px 22px;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  border-radius: 18px;\n  background: transparent;\n  color: var(--sp-text);\n  font-size: 14px;\n  cursor: pointer;\n  transition: background 0.1s ease;\n}\n\n.sp-state-btn:hover {\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.sp-state-btn-primary {\n  background: var(--sp-accent);\n  border-color: var(--sp-accent);\n}\n\n.sp-state-btn-primary:hover {\n  background: var(--sp-accent);\n  filter: brightness(1.1);\n}\n\n.sp-state-countdown {\n  font-size: 13px;\n  opacity: 0.85;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.sp-state-cancel {\n  border: none;\n  background: transparent;\n  color: var(--sp-accent);\n  cursor: pointer;\n  font-size: 13px;\n  padding: 2px 6px;\n}\n\n/* ---------- \u8BBE\u7F6E\u9762\u677F ---------- */\n.sp-settings-panel {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  right: 0;\n  width: 180px;\n  background: rgba(28, 28, 28, 0.95);\n  border-radius: 6px;\n  padding: 4px 0;\n  display: none;\n  z-index: 25;\n}\n\n.sp-settings.sp-open .sp-settings-panel {\n  display: block;\n}\n\n.sp-settings-row {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 7px 12px;\n  border: none;\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  font-size: 13px;\n  white-space: nowrap;\n  gap: 4px;\n}\n\n.sp-settings-row:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n.sp-settings-label {\n  flex: 1;\n  text-align: left;\n}\n\n.sp-settings-value {\n  opacity: 0.6;\n  font-size: 12px;\n}\n\n.sp-settings-arrow {\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.5;\n}\n\n.sp-settings-arrow svg {\n  width: 16px;\n  height: 16px;\n}\n\n.sp-settings-back {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 7px 12px;\n  border: none;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  background: transparent;\n  color: var(--sp-text);\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  gap: 2px;\n  margin-bottom: 2px;\n}\n\n.sp-settings-back:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.sp-settings-back-arrow {\n  display: inline-flex;\n  align-items: center;\n  opacity: 0.7;\n}\n\n.sp-settings-back-arrow svg {\n  width: 18px;\n  height: 18px;\n}\n\n.sp-settings-sub .sp-menu-item {\n  text-align: left;\n  padding: 7px 16px;\n}\n\n/* ---------- \u884C\u5185\u5F00\u5173 ---------- */\n.sp-settings-toggle-row {\n  cursor: pointer;\n}\n\n.sp-toggle {\n  position: relative;\n  width: 30px;\n  height: 17px;\n  background: rgba(255, 255, 255, 0.25);\n  border-radius: 9px;\n  flex-shrink: 0;\n  transition: background 0.15s ease;\n  outline: none;\n}\n\n.sp-toggle:focus-visible {\n  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);\n}\n\n.sp-toggle.sp-on {\n  background: var(--sp-accent);\n}\n\n.sp-toggle-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 13px;\n  height: 13px;\n  background: #fff;\n  border-radius: 50%;\n  transition: transform 0.15s ease;\n}\n\n.sp-toggle.sp-on .sp-toggle-thumb {\n  transform: translateX(13px);\n}\n\n/* ---------- \u97F3\u91CF ---------- */\n.sp-volume {\n  display: flex;\n  align-items: center;\n}\n\n.sp-volume-slider {\n  width: 0;\n  overflow: hidden;\n  transition: width 0.15s ease;\n  display: flex;\n  align-items: center;\n}\n\n.sp-volume:hover .sp-volume-slider,\n.sp-volume.sp-dragging .sp-volume-slider {\n  width: 64px;\n}\n\n.sp-volume-track {\n  position: relative;\n  width: 56px;\n  height: var(--sp-bar-height);\n  margin: 0 4px;\n  background: rgba(255, 255, 255, 0.25);\n  border-radius: 2px;\n  cursor: pointer;\n}\n\n.sp-volume-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  background: var(--sp-text);\n  border-radius: 2px;\n}\n\n.sp-volume-thumb {\n  position: absolute;\n  top: 50%;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: var(--sp-text);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n";
 
 // src/player.ts
 var DEFAULT_RATES = [0.5, 1, 1.5, 2];
@@ -1044,19 +1380,17 @@ var DEFAULT_LONG_SEEK_STEPS = [10, 30, 60];
 var DEFAULT_STEP_UP_INTERVAL = 2e3;
 var DEFAULT_AUTO_NEXT_SECONDS = 5;
 var CONTROLS_HIDE_DELAY = 3e3;
-var TITLE_CLICK_COUNT = 10;
-var TITLE_CLICK_WINDOW = 1500;
 var SINGLE_CLICK_DELAY = 250;
+var NPM_URL = "https://www.npmjs.com/package/@sweet-player/core";
 var PROGRESS_SAVE_INTERVAL = 5e3;
 var PROGRESS_END_GUARD = 10;
 var SweetPlayer = class {
   constructor(options) {
     this.emitter = new EventEmitter();
+    this.contextMenu = null;
     this.hideTimer = null;
     this.clickTimer = null;
     this.progressTimer = null;
-    this.titleClicks = 0;
-    this.lastTitleClick = 0;
     this.currentRatio = "original";
     /** 画质/音轨菜单当前是否由 hls.js 自动接管（业务 setQualities 会关闭） */
     this.hlsManagedQuality = false;
@@ -1089,9 +1423,27 @@ var SweetPlayer = class {
       onLevels: autoQuality && !options.qualities?.length ? (levels) => this.applyHlsLevels(levels) : void 0,
       onAudioTracks: autoQuality && !options.audioTracks?.length ? (tracks) => this.applyHlsAudioTracks(tracks) : void 0
     });
+    const hidden = new Set(options.hiddenControls ?? []);
     this.osd = createOsd();
     this.stats = createStatsOverlay(this.container, this.video, this.media, this.i18n);
+    this.shortcutsPanel = createShortcutsOverlay(this.container, this.i18n, options.seekStep ?? 10);
     this.state = createStateOverlay(this.i18n);
+    if (!hidden.has("contextMenu")) {
+      this.contextMenu = createContextMenu(this.container, [
+        {
+          label: `${this.i18n.t("changelog")}: v${VERSION}`,
+          onClick: () => window.open(NPM_URL, "_blank", "noopener")
+        },
+        {
+          label: this.i18n.t("videoInfo"),
+          onClick: () => this.stats.toggle()
+        },
+        {
+          label: this.i18n.t("shortcuts"),
+          onClick: () => this.shortcutsPanel.toggle()
+        }
+      ]);
+    }
     this.controls = createControls({
       video: this.video,
       title: options.title ?? "",
@@ -1099,6 +1451,7 @@ var SweetPlayer = class {
       playbackRates: options.playbackRates ?? DEFAULT_RATES,
       aspectRatios: options.aspectRatios ?? DEFAULT_RATIOS,
       seekStep: options.seekStep ?? 10,
+      hidden,
       actions: {
         togglePlay: () => this.toggle(),
         seekBy: (d) => this.seekBy(d),
@@ -1111,8 +1464,7 @@ var SweetPlayer = class {
         selectQuality: (q) => this.handleQualitySelect(q),
         selectAudioTrack: (t) => this.handleAudioTrackSelect(t),
         onPrev: options.onPrev,
-        onNext: options.onNext,
-        onTitleClick: () => this.handleTitleClick()
+        onNext: options.onNext
       }
     });
     this.container.appendChild(this.controls.topEl);
@@ -1168,6 +1520,7 @@ var SweetPlayer = class {
     this.bindActivityTracking();
     this.disposers.push(
       onFullscreenChange(this.container, (fs) => {
+        log("\u64AD\u653E\u5668", fs ? "\u8FDB\u5165\u5168\u5C4F" : "\u9000\u51FA\u5168\u5C4F");
         this.controls.updateFullscreen(fs);
         this.emitter.emit("fullscreenchange", fs);
       })
@@ -1203,6 +1556,7 @@ var SweetPlayer = class {
     if (showOsd) this.osd.flash(`${delta > 0 ? "+" : ""}${delta} ${this.i18n.t("seconds")}`);
   }
   setRate(rate) {
+    log("\u64AD\u653E\u5668", `\u500D\u901F\u5207\u6362: ${rate}x`);
     this.video.playbackRate = rate;
   }
   /** 0-100 */
@@ -1289,7 +1643,9 @@ var SweetPlayer = class {
     this.keyboard.destroy();
     this.gestures.destroy();
     this.stats.destroy();
+    this.shortcutsPanel.destroy();
     this.state.destroy();
+    this.contextMenu?.destroy();
     this.controls.destroy();
     this.disposers.forEach((d) => d());
     if (this.hideTimer) clearTimeout(this.hideTimer);
@@ -1312,6 +1668,7 @@ var SweetPlayer = class {
     this.hlsManagedAudio = true;
   }
   handleQualitySelect(quality) {
+    log("\u64AD\u653E\u5668", `\u5207\u6362\u753B\u8D28: ${quality.label}`);
     this.controls.qualityMenu.setActive(quality);
     if (this.hlsManagedQuality && typeof quality.value === "number") {
       this.media.setLevel(quality.value);
@@ -1324,6 +1681,7 @@ var SweetPlayer = class {
     this.emitter.emit("qualitychange", quality);
   }
   handleAudioTrackSelect(track) {
+    log("\u64AD\u653E\u5668", `\u5207\u6362\u97F3\u8F68: ${track.label}`);
     this.controls.audioMenu.setActive(track);
     if (this.hlsManagedAudio && typeof track.value === "number") {
       this.media.setAudioTrack(track.value);
@@ -1364,15 +1722,6 @@ var SweetPlayer = class {
     }
   }
   // ---------- 内部：交互 ----------
-  handleTitleClick() {
-    const now = Date.now();
-    this.titleClicks = now - this.lastTitleClick <= TITLE_CLICK_WINDOW ? this.titleClicks + 1 : 1;
-    this.lastTitleClick = now;
-    if (this.titleClicks >= TITLE_CLICK_COUNT) {
-      this.titleClicks = 0;
-      this.stats.toggle();
-    }
-  }
   bindMediaEvents() {
     const v = this.video;
     const listen = (event, fn) => {
@@ -1380,6 +1729,7 @@ var SweetPlayer = class {
       this.disposers.push(() => v.removeEventListener(event, fn));
     };
     listen("loadedmetadata", () => {
+      log("\u539F\u751F\u4E8B\u4EF6", `\u83B7\u53D6\u5143\u6570\u636E (${v.videoWidth}x${v.videoHeight})`);
       this.controls.updateTime();
       this.emitter.emit("ready", void 0);
     });
@@ -1395,6 +1745,7 @@ var SweetPlayer = class {
       this.emitter.emit("pause", void 0);
     });
     listen("ended", () => {
+      log("\u539F\u751F\u4E8B\u4EF6", "\u64AD\u653E\u7ED3\u675F");
       this.saveProgressNow();
       this.showControls();
       const onNext = this.options.onNext;
@@ -1424,23 +1775,49 @@ var SweetPlayer = class {
       this.controls.volume.update(volume, v.muted);
       this.emitter.emit("volumechange", { volume, muted: v.muted });
     });
-    listen("waiting", () => this.state.showLoading());
-    listen("stalled", () => this.state.showLoading());
-    listen("seeking", () => this.state.showLoading());
-    listen("canplay", () => this.state.hideLoading());
+    listen("waiting", () => {
+      log("\u539F\u751F\u4E8B\u4EF6", "\u7B49\u5F85\u7F13\u51B2\u4E2D");
+      this.state.showLoading();
+    });
+    listen("stalled", () => {
+      log("\u539F\u751F\u4E8B\u4EF6", "\u6570\u636E\u52A0\u8F7D\u505C\u6EDE");
+      this.state.showLoading();
+    });
+    listen("seeking", () => {
+      log("\u539F\u751F\u4E8B\u4EF6", "\u5F00\u59CB\u8DF3\u8F6C");
+      this.state.showLoading();
+    });
+    listen("canplay", () => {
+      log("\u539F\u751F\u4E8B\u4EF6", "\u51C6\u5907\u597D\u5F00\u59CB\u64AD\u653E");
+      this.state.hideLoading();
+    });
     listen("playing", () => {
       this.state.hideLoading();
       this.state.hideError();
     });
-    listen("seeked", () => this.state.hideLoading());
-    listen("error", () => this.showErrorState({ type: "media", detail: v.error }));
+    listen("seeked", () => {
+      log("\u539F\u751F\u4E8B\u4EF6", "\u8DF3\u8F6C\u5B8C\u6210");
+      this.state.hideLoading();
+    });
+    listen("error", () => {
+      log("\u539F\u751F\u4E8B\u4EF6", `\u64AD\u653E\u9519\u8BEF: ${v.error?.message ?? "\u672A\u77E5\u9519\u8BEF"}`);
+      this.showErrorState({ type: "media", detail: v.error });
+    });
     this.disposers.push(
       this.emitter.on("error", (payload) => {
         if (payload.type.startsWith("hls-")) this.showErrorStateUi();
       })
     );
-    listen("enterpictureinpicture", () => this.emitter.emit("pipchange", true));
-    listen("leavepictureinpicture", () => this.emitter.emit("pipchange", false));
+    listen("enterpictureinpicture", () => {
+      log("\u64AD\u653E\u5668", "\u8FDB\u5165\u753B\u4E2D\u753B");
+      this.controls.updatePip(true);
+      this.emitter.emit("pipchange", true);
+    });
+    listen("leavepictureinpicture", () => {
+      log("\u64AD\u653E\u5668", "\u9000\u51FA\u753B\u4E2D\u753B");
+      this.controls.updatePip(false);
+      this.emitter.emit("pipchange", false);
+    });
     const onVideoClick = (e) => {
       if (e.target !== this.video || e.pointerType === "touch") return;
       if (this.clickTimer) return;
@@ -1507,7 +1884,9 @@ var SweetPlayer = class {
     });
   }
 };
+SweetPlayer.version = VERSION;
 export {
   SweetPlayer,
+  VERSION,
   registerLocale
 };