@sweet-player/core 0.3.0 → 0.4.0

package/README.md

@@ -83,7 +83,11 @@ new SweetPlayer({ ..., plugins: [myPlugin] });
 // 或运行时：player.use(myPlugin);
 ```
 
-### 接入 sweet-subtitle 字幕
+### 接入 [sweet-subtitle](https://github.com/leuvi/sweet-subtitle) 字幕
+
+```bash
+npm install sweet-subtitle
+```
 
 插件工厂持有字幕实例并对外暴露切换 API，运行时换字幕无需重建播放器：
 

package/dist/index.cjs

@@ -495,69 +495,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" });
@@ -665,6 +610,157 @@ 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, hidden } = ctx;
@@ -699,57 +795,114 @@ function createControls(ctx) {
     parent: show("time") ? row : void 0
   });
   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)
-  });
-  rateMenu.setItems(ctx.playbackRates.map((r) => ({ label: `${r}x`, value: r })));
-  rateMenu.setActive(video.playbackRate);
-  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)
-  });
-  if (show("quality")) 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");
-  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)
-  });
-  if (show("audioTrack")) row.appendChild(audioMenu.el);
   const volume = createVolumeControl({
     muteTitle: i18n.t("mute"),
     onVolumeChange: actions.setVolume,
     onToggleMute: actions.toggleMute
   });
   if (show("volume")) row.appendChild(volume.el);
-  if (show("pip") && document.pictureInPictureEnabled) {
-    button(icons.pip, i18n.t("pip"), actions.togglePip);
-  }
+  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;
     },
@@ -758,16 +911,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();
     }
@@ -1128,6 +1286,7 @@ var zhCN = {
   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"
 };
@@ -1171,6 +1330,7 @@ var en = {
   scVolume: "Volume \xB15",
   scFullscreen: "Toggle fullscreen",
   scMute: "Toggle mute",
+  settings: "Settings",
   copyLog: "Copy log",
   logCopied: "Copied"
 };
@@ -1246,10 +1406,10 @@ function clearProgress(id) {
 }
 
 // src/version.ts
-var VERSION = true ? "0.3.0" : "dev";
+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-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";
+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];
@@ -1688,10 +1848,12 @@ var SweetPlayer = class {
     );
     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) => {

package/dist/index.d.cts

@@ -18,7 +18,7 @@ interface LongSeekOptions {
     stepUpInterval?: number;
 }
 /** 可通过 hiddenControls 隐藏的 UI 功能名（只影响显示，不影响 API 与快捷键） */
-type ControlName = 'prev' | 'seekBack' | 'play' | 'seekForward' | 'next' | 'time' | 'rate' | 'quality' | 'ratio' | 'audioTrack' | 'volume' | 'pip' | 'fullscreen' | 'title' | 'progress' | 'contextMenu';
+type ControlName = 'prev' | 'seekBack' | 'play' | 'seekForward' | 'next' | 'time' | 'rate' | 'quality' | 'ratio' | 'audioTrack' | 'volume' | 'pip' | 'fullscreen' | 'settings' | 'title' | 'progress' | 'contextMenu';
 /** 播放器插件：apply 在实例化末尾调用，可返回清理函数（destroy 时执行） */
 interface SweetPlayerPlugin {
     name: string;
@@ -221,6 +221,7 @@ interface LocaleStrings {
     scVolume: string;
     scFullscreen: string;
     scMute: string;
+    settings: string;
     copyLog: string;
     logCopied: string;
 }

package/dist/index.d.ts

@@ -18,7 +18,7 @@ interface LongSeekOptions {
     stepUpInterval?: number;
 }
 /** 可通过 hiddenControls 隐藏的 UI 功能名（只影响显示，不影响 API 与快捷键） */
-type ControlName = 'prev' | 'seekBack' | 'play' | 'seekForward' | 'next' | 'time' | 'rate' | 'quality' | 'ratio' | 'audioTrack' | 'volume' | 'pip' | 'fullscreen' | 'title' | 'progress' | 'contextMenu';
+type ControlName = 'prev' | 'seekBack' | 'play' | 'seekForward' | 'next' | 'time' | 'rate' | 'quality' | 'ratio' | 'audioTrack' | 'volume' | 'pip' | 'fullscreen' | 'settings' | 'title' | 'progress' | 'contextMenu';
 /** 播放器插件：apply 在实例化末尾调用，可返回清理函数（destroy 时执行） */
 interface SweetPlayerPlugin {
     name: string;
@@ -221,6 +221,7 @@ interface LocaleStrings {
     scVolume: string;
     scFullscreen: string;
     scMute: string;
+    settings: string;
     copyLog: string;
     logCopied: string;
 }