@sweet-player/core 0.2.1 → 0.3.0

package/README.md

@@ -58,7 +58,8 @@ player.destroy();
 - **i18n**：内置 zh-CN/en，支持自定义语言
 - **插件机制**：`plugins` 选项或 `player.use(plugin)` 运行时安装
 - **主题定制**：CSS 变量覆盖，如 `--sp-accent`
-- **统计信息**：标题 10 连击弹出 YouTube 风格统计面板
+- **右键菜单**：屏蔽原生菜单，内置"更新记录（当前版本，跳转 npm）"、"视频信息（YouTube 风格统计面板）"、"快捷键（键位说明面板）"
+- **按需隐藏**：`hiddenControls: ['ratio', 'audioTrack', ...]` 收集不显示的功能，默认全显示（只影响 UI，不影响 API 与快捷键）
 
 ## 画质 / 音轨
 
@@ -84,23 +85,40 @@ new SweetPlayer({ ..., plugins: [myPlugin] });
 
 ### 接入 sweet-subtitle 字幕
 
+插件工厂持有字幕实例并对外暴露切换 API，运行时换字幕无需重建播放器：
+
 ```ts
 import { SweetSubtitle } from 'sweet-subtitle';
 import type { SweetPlayerPlugin } from '@sweet-player/core';
 
-function subtitlePlugin(src: string): SweetPlayerPlugin {
-  return {
+function createSubtitlePlugin(src?: string) {
+  let sub: SweetSubtitle | null = null;
+  const plugin: SweetPlayerPlugin = {
     name: 'sweet-subtitle',
     apply(player) {
-      const sub = new SweetSubtitle(player.video, { src });
-      return () => sub.destroy?.();
+      sub = new SweetSubtitle(player.video, src ? { src } : {});
+      return () => { sub?.destroy(); sub = null; };  // 播放器 destroy 时自动清理
     },
   };
+  return {
+    plugin,
+    load: (url: string) => sub?.loadFromUrl(url),   // 切换字幕
+    show: () => sub?.show(),
+    hide: () => sub?.hide(),
+    setOffset: (s: number) => sub?.setOffset(s),
+  };
 }
 
-new SweetPlayer({ ..., plugins: [subtitlePlugin('/subs/ep-01.ass')] });
+const subtitle = createSubtitlePlugin('/subs/ep-01.ass');
+const player = new SweetPlayer({ ..., plugins: [subtitle.plugin] });
+
+// 随时换字幕 / 关字幕，播放器不动
+await subtitle.load('/subs/ep-02.ass');
+subtitle.hide();
 ```
 
+不想用插件的话也可以完全独立管理：`new SweetSubtitle(player.video, ...)` 拿到实例自己持有，只需在销毁播放器前调用 `sub.destroy()`。
+
 ## 实例 API
 
 `play()` `pause()` `toggle()` `seek(t)` `seekBy(±s)` `setRate(r)` `setVolume(0-100)` `setMuted(b)` `setAspectRatio(r)` `setQualities(list)` `setAudioTracks(list)` `toggleFullscreen()` `togglePip()` `load(src)` `setTitle(s)` `use(plugin)` `on/off(event, fn)` `destroy()`

package/dist/index.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   SweetPlayer: () => SweetPlayer,
+  VERSION: () => VERSION,
   registerLocale: () => registerLocale
 });
 module.exports = __toCommonJS(src_exports);
@@ -62,6 +63,25 @@ var EventEmitter = class {
 
 // src/core/media.ts
 var import_hls = __toESM(require("hls.js"), 1);
+
+// 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);
 }
@@ -78,10 +98,15 @@ var MediaController = class {
   load(src) {
     this.detachHls();
     this.currentSrc = src;
+    log("\u64AD\u653E\u5668", `\u52A0\u8F7D\u6E90: ${src}`);
     if (isHlsSource(src)) {
       if (import_hls.default.isSupported()) {
         this.hls = new import_hls.default(this.hlsConfig);
+        this.hls.on(import_hls.default.Events.MEDIA_ATTACHED, () => {
+          log("hls\u4E8B\u4EF6", "\u5A92\u4F53\u6210\u529F\u9644\u52A0\u5230\u64AD\u653E\u5668");
+        });
         this.hls.on(import_hls.default.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 import_hls.default.ErrorTypes.NETWORK_ERROR:
@@ -97,8 +122,17 @@ var MediaController = class {
           }
         });
         this.hls.on(import_hls.default.Events.MANIFEST_PARSED, () => {
+          log("hls\u4E8B\u4EF6", "\u64AD\u653E\u6E05\u5355\u89E3\u6790\u5B8C\u6BD5");
           this.notifyTracks();
         });
+        this.hls.on(import_hls.default.Events.BUFFER_CREATED, () => {
+          log("hls\u4E8B\u4EF6", "\u7F13\u51B2\u533A\u521B\u5EFA");
+        });
+        this.hls.on(import_hls.default.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;
@@ -633,33 +667,37 @@ function createVolumeControl(opts) {
 
 // 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 });
+  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
+  });
   createEl("div", { className: "sp-controls-spacer", parent: row });
   const rateMenu = createPopupMenu({
     buttonHtml: "1x",
@@ -669,14 +707,14 @@ function createControls(ctx) {
   });
   rateMenu.setItems(ctx.playbackRates.map((r) => ({ label: `${r}x`, value: r })));
   rateMenu.setActive(video.playbackRate);
-  row.appendChild(rateMenu.el);
+  if (show("rate")) 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);
+  if (show("quality")) row.appendChild(qualityMenu.el);
   const ratioMenu = createPopupMenu({
     buttonHtml: i18n.t("aspectRatio"),
     title: i18n.t("aspectRatio"),
@@ -687,24 +725,24 @@ function createControls(ctx) {
     ctx.aspectRatios.map((r) => ({ label: r === "original" ? i18n.t("ratioOriginal") : r, value: r }))
   );
   ratioMenu.setActive("original");
-  row.appendChild(ratioMenu.el);
+  if (show("ratio")) 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);
+  if (show("audioTrack")) row.appendChild(audioMenu.el);
   const volume = createVolumeControl({
     muteTitle: i18n.t("mute"),
     onVolumeChange: actions.setVolume,
     onToggleMute: actions.toggleMute
   });
-  row.appendChild(volume.el);
-  if (document.pictureInPictureEnabled) {
+  if (show("volume")) row.appendChild(volume.el);
+  if (show("pip") && document.pictureInPictureEnabled) {
     button(icons.pip, i18n.t("pip"), actions.togglePip);
   }
-  const fsBtn = button(icons.fullscreen, i18n.t("fullscreen"), actions.toggleFullscreen);
+  const fsBtn = button(icons.fullscreen, i18n.t("fullscreen"), actions.toggleFullscreen, false, show("fullscreen"));
   return {
     topEl,
     bottomEl,
@@ -762,6 +800,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;
@@ -800,11 +926,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 });
@@ -969,7 +1115,21 @@ 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",
+  copyLog: "\u590D\u5236\u65E5\u5FD7",
+  logCopied: "\u5DF2\u590D\u5236"
 };
 var en = {
   play: "Play",
@@ -998,7 +1158,21 @@ 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",
+  copyLog: "Copy log",
+  logCopied: "Copied"
 };
 var locales = { "zh-CN": zhCN, en };
 var I18n = class {
@@ -1071,8 +1245,11 @@ function clearProgress(id) {
   }
 }
 
+// src/version.ts
+var VERSION = true ? "0.3.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/* ---------- \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];
@@ -1081,19 +1258,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;
@@ -1126,9 +1301,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 ?? "",
@@ -1136,6 +1329,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),
@@ -1148,8 +1342,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);
@@ -1205,6 +1398,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);
       })
@@ -1240,6 +1434,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 */
@@ -1326,7 +1521,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);
@@ -1349,6 +1546,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);
@@ -1361,6 +1559,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);
@@ -1401,15 +1600,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) => {
@@ -1417,6 +1607,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);
     });
@@ -1432,6 +1623,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;
@@ -1461,23 +1653,47 @@ 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.emitter.emit("pipchange", true);
+    });
+    listen("leavepictureinpicture", () => {
+      log("\u64AD\u653E\u5668", "\u9000\u51FA\u753B\u4E2D\u753B");
+      this.emitter.emit("pipchange", false);
+    });
     const onVideoClick = (e) => {
       if (e.target !== this.video || e.pointerType === "touch") return;
       if (this.clickTimer) return;
@@ -1544,8 +1760,10 @@ var SweetPlayer = class {
     });
   }
 };
+SweetPlayer.version = VERSION;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SweetPlayer,
+  VERSION,
   registerLocale
 });