dsh-plugin-animegarden 0.1.6 → 0.1.7

package/README.md

@@ -1,16 +1,23 @@
 # 🌸 Anime Garden for DeepSeek Harness
 
+[![version](https://img.shields.io/npm/v/dsh-plugin-animegarden?label=dsh-plugin-animegarden&logo=deepseek&logoColor=white&color=4D6BFE)](https://www.npmjs.com/package/dsh-plugin-animegarden)
+[![CI](https://github.com/yjl9903/AnimeGarden/actions/workflows/ci.yml/badge.svg)](https://github.com/yjl9903/AnimeGarden/actions/workflows/ci.yml)
+[![License](https://img.shields.io/npm/l/dsh-plugin-animegarden)](https://github.com/yjl9903/AnimeGarden/blob/main/LICENSE)
+
 在 DeepSeek Harness 里搜索 Anime Garden 的动画 BT 资源.
 
 - **会话搜索**：让 AI 能搜索 Anime Garden 资源
 - **搜索面板**：输入即搜, 可按字幕组和类型筛选动画资源
 - **新番周历**：查看当季新番动画, 快速筛选动画资源
+- **浮窗播放**：播放链接直接在 DSH 内以浮窗打开, 边看边聊
 
 ## 安装
 
 把下面这句发给你的 DeepSeek Harness:
 
-> 从 npm 安装最新版 dsh-plugin-animegarden 到当前运行的 DeepSeek Harness
+```text
+从 npm 安装最新版 dsh-plugin-animegarden 到当前运行的 DeepSeek Harness
+```
 
 也可以手动安装: **Plugins → Add plugin** 输入包名, 或执行 `dsh plugin add dsh-plugin-animegarden`.
 

package/dist/client.mjs

@@ -4339,6 +4339,29 @@ function AnimeGardenIcon({ size = 18, active = false }) {
   );
 }
 
+const playbackZh = {
+  playbackTitle: "\u64AD\u653E\u7A97\u53E3",
+  playbackLoading: "\u6B63\u5728\u52A0\u8F7D\u64AD\u653E\u9875\u2026",
+  playbackReload: "\u91CD\u65B0\u52A0\u8F7D",
+  playbackOpenExternal: "\u5728\u6D4F\u89C8\u5668\u6253\u5F00",
+  playbackClose: "\u5173\u95ED\u64AD\u653E\u7A97\u53E3",
+  playbackMinimize: "\u6700\u5C0F\u5316",
+  playbackRestore: "\u8FD8\u539F\u7A97\u53E3",
+  playbackActions: "\u64AD\u653E\u7A97\u53E3\u64CD\u4F5C",
+  playbackMore: "\u66F4\u591A\u64CD\u4F5C"
+};
+const playbackEn = {
+  playbackTitle: "Playback",
+  playbackLoading: "Loading playback page\u2026",
+  playbackReload: "Reload",
+  playbackOpenExternal: "Open in browser",
+  playbackClose: "Close player",
+  playbackMinimize: "Minimize",
+  playbackRestore: "Restore window",
+  playbackActions: "Playback window actions",
+  playbackMore: "More actions"
+};
+
 const NS = "animegarden";
 const zh = {
   panel: "Anime Garden",
@@ -4385,7 +4408,8 @@ const zh = {
   size: "\u5927\u5C0F",
   download: "\u4E0B\u8F7D",
   copyMagnetSuccess: "\u78C1\u529B\u94FE\u63A5\u5DF2\u590D\u5236",
-  copyMagnetFailed: "\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u590D\u5236\u78C1\u529B\u94FE\u63A5"
+  copyMagnetFailed: "\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u590D\u5236\u78C1\u529B\u94FE\u63A5",
+  ...playbackZh
 };
 const en = {
   panel: "Anime Garden",
@@ -4432,7 +4456,8 @@ const en = {
   size: "Size",
   download: "Download",
   copyMagnetSuccess: "Magnet link copied",
-  copyMagnetFailed: "Copy failed, copy the magnet link manually"
+  copyMagnetFailed: "Copy failed, copy the magnet link manually",
+  ...playbackEn
 };
 function registerLocale(ctx) {
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), "animegarden: dictionaries");
@@ -4530,7 +4555,7 @@ const ErrorIcon$1 = /*#__PURE__*/ lazyReact.createElement("svg", {
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
     clipRule: "evenodd"
 }));
-const CloseIcon = /*#__PURE__*/ lazyReact.createElement("svg", {
+const CloseIcon$1 = /*#__PURE__*/ lazyReact.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "12",
     height: "12",
@@ -5290,7 +5315,7 @@ const Toast = (props)=>{
             toast.onDismiss == null ? void 0 : toast.onDismiss.call(toast, toast);
         },
         className: cn(classNames == null ? void 0 : classNames.closeButton, toast == null ? void 0 : (_toast_classNames2 = toast.classNames) == null ? void 0 : _toast_classNames2.closeButton)
-    }, (_icons_close = icons == null ? void 0 : icons.close) != null ? _icons_close : CloseIcon) : null, (toastType || toast.icon || toast.promise) && toast.icon !== null && ((icons == null ? void 0 : icons[toastType]) !== null || toast.icon) ? /*#__PURE__*/ lazyReact.createElement("div", {
+    }, (_icons_close = icons == null ? void 0 : icons.close) != null ? _icons_close : CloseIcon$1) : null, (toastType || toast.icon || toast.promise) && toast.icon !== null && ((icons == null ? void 0 : icons[toastType]) !== null || toast.icon) ? /*#__PURE__*/ lazyReact.createElement("div", {
         "data-icon": "",
         className: cn(classNames == null ? void 0 : classNames.icon, toast == null ? void 0 : (_toast_classNames3 = toast.classNames) == null ? void 0 : _toast_classNames3.icon)
     }, toastType === 'loading' ? toast.icon || getLoadingIcon() : toast.promise ? getLoadingIcon() : null, toastType !== 'loading' ? icon : null) : null, /*#__PURE__*/ lazyReact.createElement("div", {
@@ -12491,6 +12516,7 @@ function ResourceRow({ t, resource, onRefineFansub, onCopyMagnet }) {
       href: resource.keepshareUrl,
       target: "_blank",
       rel: "noreferrer noopener",
+      "data-agp-playback-title": resource.title,
       onClick: () => track("pikpak", { resource: resourceKey, source: "title" })
     },
     resource.title
@@ -12524,6 +12550,7 @@ function ResourceRow({ t, resource, onRefineFansub, onCopyMagnet }) {
       rel: "noreferrer noopener",
       "aria-label": t("play"),
       title: t("play"),
+      "data-agp-playback-title": resource.title,
       onClick: () => track("pikpak", { resource: resourceKey, source: "play" })
     },
     /* @__PURE__ */ React.createElement(PlayIcon, { size: 18 })
@@ -13002,6 +13029,794 @@ function AnimeGardenPanelContent({ t: translate }) {
   ))), /* @__PURE__ */ React.createElement(Toaster, { position: "bottom-right", theme: "system" }));
 }
 
+const PLAYBACK_TITLE_ATTRIBUTE = "data-agp-playback-title";
+const PLAYBACK_IGNORE_ATTRIBUTE = "data-agp-playback-ignore";
+function isKeepShareHost(hostname) {
+  return hostname === "keepshare.cc" || hostname.endsWith(".keepshare.cc");
+}
+function parsePlaybackHref(href) {
+  try {
+    const url = new URL(href, window.location.href);
+    return url.protocol === "https:" && isKeepShareHost(url.hostname) ? url.toString() : null;
+  } catch {
+    return null;
+  }
+}
+const GENERIC_LABELS = /* @__PURE__ */ new Set(["\u64AD\u653E", "play", "watch", "view"]);
+function playbackTitle(anchor) {
+  const stamped = (anchor.getAttribute(PLAYBACK_TITLE_ATTRIBUTE) ?? "").trim();
+  if (stamped !== "") return stamped;
+  const attribute = (anchor.getAttribute("title") ?? "").trim();
+  if (attribute !== "") return attribute;
+  const text = (anchor.textContent ?? "").replace(/\s+/g, " ").replace(/^[▶►\s]+/, "").trim();
+  return GENERIC_LABELS.has(text.toLowerCase()) ? "" : text;
+}
+function playbackClickFromEvent(event) {
+  if (event.defaultPrevented || event.button !== 0) return null;
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return null;
+  const node = event.target instanceof Element ? event.target : null;
+  const anchor = node?.closest("a[href]");
+  if (!(anchor instanceof HTMLAnchorElement)) return null;
+  if (anchor.hasAttribute(PLAYBACK_IGNORE_ATTRIBUTE)) return null;
+  const url = parsePlaybackHref(anchor.getAttribute("href") ?? "");
+  if (url === null) return null;
+  return {
+    target: { url, title: playbackTitle(anchor) },
+    ownLink: anchor.hasAttribute(PLAYBACK_TITLE_ATTRIBUTE)
+  };
+}
+function installPlaybackLinkInterceptor(open) {
+  const onClick = (event) => {
+    const click = playbackClickFromEvent(event);
+    if (click === null) return;
+    event.preventDefault();
+    if (!click.ownLink) event.stopPropagation();
+    open(click.target);
+  };
+  document.addEventListener("click", onClick, true);
+  return () => document.removeEventListener("click", onClick, true);
+}
+
+const GEOMETRY_STORAGE_KEY = "animegarden.playback.geometry";
+const MIN_PLAYBACK_WIDTH = 360;
+const MIN_PLAYBACK_HEIGHT = 240;
+const MINIMIZED_HEIGHT = 40;
+const PLAYBACK_INSET = 8;
+const MINIMIZED_MARGIN = PLAYBACK_INSET * 2;
+function readViewportSize() {
+  return { width: window.innerWidth, height: window.innerHeight };
+}
+function clampGeometry(geometry, viewport) {
+  const maxWidth = Math.max(240, viewport.width - PLAYBACK_INSET * 2);
+  const maxHeight = Math.max(160, viewport.height - PLAYBACK_INSET * 2);
+  const width = Math.min(Math.max(MIN_PLAYBACK_WIDTH, geometry.width), maxWidth);
+  const height = Math.min(Math.max(MIN_PLAYBACK_HEIGHT, geometry.height), maxHeight);
+  const x = Math.min(Math.max(PLAYBACK_INSET, geometry.x), viewport.width - width - PLAYBACK_INSET);
+  const y = Math.min(
+    Math.max(PLAYBACK_INSET, geometry.y),
+    viewport.height - height - PLAYBACK_INSET
+  );
+  return {
+    x: Math.round(x),
+    y: Math.round(y),
+    width: Math.round(width),
+    height: Math.round(height)
+  };
+}
+function defaultGeometry(viewport) {
+  const width = Math.round(Math.min(1080, Math.max(560, viewport.width * 0.62)));
+  const height = Math.round(Math.min(760, Math.max(420, viewport.height * 0.72)));
+  return clampGeometry(
+    {
+      x: (viewport.width - width) / 2,
+      y: Math.max(PLAYBACK_INSET, (viewport.height - height) / 2 - 24),
+      width,
+      height
+    },
+    viewport
+  );
+}
+function minimizedGeometry(viewport, at) {
+  const maxWidth = Math.max(200, viewport.width - MINIMIZED_MARGIN * 2);
+  const width = Math.round(Math.min(380, Math.max(260, viewport.width * 0.28), maxWidth));
+  const height = MINIMIZED_HEIGHT;
+  const maxX = Math.max(MINIMIZED_MARGIN, viewport.width - width - MINIMIZED_MARGIN);
+  const maxY = Math.max(MINIMIZED_MARGIN, viewport.height - height - MINIMIZED_MARGIN);
+  const x = at === null ? maxX : Math.min(Math.max(MINIMIZED_MARGIN, at.x), maxX);
+  const y = at === null ? maxY : Math.min(Math.max(MINIMIZED_MARGIN, at.y), maxY);
+  return { x: Math.round(x), y: Math.round(y), width, height };
+}
+function resizeGeometry(origin, direction, dx, dy, viewport) {
+  const west = direction === "nw" || direction === "sw";
+  const north = direction === "nw" || direction === "ne";
+  let width;
+  let x;
+  if (west) {
+    const maxWidth = Math.max(MIN_PLAYBACK_WIDTH, origin.x + origin.width - PLAYBACK_INSET);
+    width = Math.min(Math.max(MIN_PLAYBACK_WIDTH, origin.width - dx), maxWidth);
+    x = origin.x + origin.width - width;
+  } else {
+    const maxWidth = Math.max(MIN_PLAYBACK_WIDTH, viewport.width - origin.x - PLAYBACK_INSET);
+    width = Math.min(Math.max(MIN_PLAYBACK_WIDTH, origin.width + dx), maxWidth);
+    x = origin.x;
+  }
+  let height;
+  let y;
+  if (north) {
+    const maxHeight = Math.max(MIN_PLAYBACK_HEIGHT, origin.y + origin.height - PLAYBACK_INSET);
+    height = Math.min(Math.max(MIN_PLAYBACK_HEIGHT, origin.height - dy), maxHeight);
+    y = origin.y + origin.height - height;
+  } else {
+    const maxHeight = Math.max(MIN_PLAYBACK_HEIGHT, viewport.height - origin.y - PLAYBACK_INSET);
+    height = Math.min(Math.max(MIN_PLAYBACK_HEIGHT, origin.height + dy), maxHeight);
+    y = origin.y;
+  }
+  return {
+    x: Math.round(x),
+    y: Math.round(y),
+    width: Math.round(width),
+    height: Math.round(height)
+  };
+}
+function loadGeometry() {
+  try {
+    const raw = window.localStorage.getItem(GEOMETRY_STORAGE_KEY);
+    if (raw === null) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed !== "object" || parsed === null) return null;
+    const value = parsed;
+    const fields = ["x", "y", "width", "height"];
+    if (!fields.every((field) => typeof value[field] === "number")) return null;
+    return {
+      x: value.x,
+      y: value.y,
+      width: value.width,
+      height: value.height
+    };
+  } catch {
+    return null;
+  }
+}
+function saveGeometry(geometry) {
+  try {
+    window.localStorage.setItem(GEOMETRY_STORAGE_KEY, JSON.stringify(geometry));
+  } catch {
+  }
+}
+function createPlaybackStore() {
+  const store = new Store({
+    target: null,
+    geometry: loadGeometry(),
+    minimized: false,
+    minimizedAt: null,
+    nonce: 0
+  });
+  return {
+    store,
+    /** Show one playback page, replacing whatever the window currently holds. */
+    open(target) {
+      store.setState((state) => ({
+        ...state,
+        target,
+        minimized: false,
+        nonce: state.nonce + 1
+      }));
+    },
+    /** Close the window; unmounting the iframe also stops playback. */
+    close() {
+      store.setState((state) => ({ ...state, target: null, minimized: false }));
+    },
+    /** Collapse to the title bar while the iframe keeps playing. */
+    minimize() {
+      store.setState((state) => ({ ...state, minimized: true }));
+    },
+    /** Expand back to the last floating rectangle. */
+    restore() {
+      store.setState((state) => ({ ...state, minimized: false }));
+    },
+    /** Remount the iframe with the same URL, matching a browser reload. */
+    reload() {
+      store.setState((state) => ({ ...state, target: state.target, nonce: state.nonce + 1 }));
+    },
+    /** Remember a user-chosen rectangle so the next open restores the placement. */
+    commitGeometry(geometry) {
+      const clamped = clampGeometry(geometry, readViewportSize());
+      store.setState((state) => ({ ...state, geometry: clamped }));
+      saveGeometry(clamped);
+    },
+    /** Remember where the user dragged the minimized title bar. */
+    commitMinimizedAt(point) {
+      const bar = minimizedGeometry(readViewportSize(), point);
+      store.setState((state) => ({ ...state, minimizedAt: { x: bar.x, y: bar.y } }));
+    }
+  };
+}
+
+const PLAYBACK_CSS = `
+.agp-play {
+  position: absolute;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  background: var(--dsw-alias-bg-overlay);
+  border: 0.5px solid var(--dsw-alias-border-l1);
+  border-radius: var(--dsw-radius-md, 10px);
+  box-shadow: var(--dsw-elevation-panel);
+  pointer-events: auto;
+  animation: agp-play-in 140ms ease-out;
+}
+.agp-play:focus {
+  outline: none;
+}
+.agp-play-head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 8px;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 0 6px 0 12px;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+  background: var(--dsw-alias-bg-layer-1);
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+  touch-action: none;
+}
+.agp-play-head-dragging {
+  cursor: grabbing;
+}
+.agp-play-mark {
+  flex: none;
+  font-size: 13px;
+  line-height: 1;
+}
+.agp-play-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agp-play-actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+}
+/* The overflow anchor keeps secondary actions out of the title row. */
+.agp-play-more {
+  position: relative;
+  display: inline-flex;
+  margin-right: 6px;
+}
+.agp-play-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 3;
+  box-sizing: border-box;
+  min-width: 168px;
+  padding: 4px;
+  background: var(--dsw-alias-bg-layer-1);
+  border: 0.5px solid var(--dsw-alias-border-l1);
+  border-radius: var(--dsw-radius-sm, 6px);
+  box-shadow: var(--dsw-elevation-panel);
+}
+.agp-play-menu-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 28px;
+  padding: 0 8px;
+  color: var(--dsw-alias-label-primary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: left;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--dsw-radius-sm, 6px);
+}
+.agp-play-menu-item:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+.agp-play-menu-item:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-brand-primary));
+  outline-offset: -1px;
+}
+.agp-play-action {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--dsw-radius-sm, 6px);
+}
+.agp-play-action:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+/* Close is the destructive window control: last, and tinted on hover. */
+.agp-play-action-close:hover {
+  color: var(--dsw-alias-state-error-primary);
+}
+.agp-play-action:focus-visible {
+  outline: var(--dsw-focus-ring-width, 2px) solid
+    var(--dsw-focus-ring-color, var(--dsw-alias-brand-primary));
+  outline-offset: 1px;
+}
+.agp-play-body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  background: var(--dsw-alias-bg-base);
+}
+.agp-play-frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--dsw-alias-bg-base);
+  border: 0;
+}
+.agp-play-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dsw-alias-bg-base);
+}
+/* Four invisible corner resize handles. The top two are L-clipped so the header's
+ * trailing controls keep their own pointer area; the directional resize cursor is
+ * the only affordance, so no corner marks are drawn. */
+.agp-play-corner {
+  position: absolute;
+  z-index: 2;
+  width: 16px;
+  height: 16px;
+  touch-action: none;
+}
+.agp-play-corner-nw {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+  clip-path: polygon(0 0, 100% 0, 100% 8px, 8px 8px, 8px 100%, 0 100%);
+}
+.agp-play-corner-ne {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 8px 8px, 0 8px);
+}
+.agp-play-corner-sw {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+}
+.agp-play-corner-se {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+}
+@keyframes agp-play-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.995);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+/* Minimized: only the title bar is visible. The body stays mounted (so the iframe
+ * keeps playing) and is hidden with display: none; the corner handles are unmounted
+ * by the component and this rule is a belt-and-braces guard. */
+.agp-play[data-minimized='true'] .agp-play-body,
+.agp-play[data-minimized='true'] .agp-play-corner {
+  display: none;
+}
+.agp-play[data-minimized='true'] .agp-play-head {
+  border-bottom: 0;
+}
+.agp-play[data-minimized='true'] .agp-play-title {
+  color: var(--dsw-alias-label-secondary);
+}
+@media (prefers-reduced-motion: reduce) {
+  .agp-play {
+    animation: none;
+  }
+}
+`;
+
+function CloseIcon({ size = 16 }) {
+  const React = getReact();
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M6 6l12 12M18 6L6 18",
+        stroke: "currentColor",
+        strokeWidth: 1.8,
+        strokeLinecap: "round"
+      }
+    )
+  );
+}
+function MinimizeIcon({ size = 16 }) {
+  const React = getReact();
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    /* @__PURE__ */ React.createElement("path", { d: "M5 12h14", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round" })
+  );
+}
+function RestoreIcon({ size = 16 }) {
+  const React = getReact();
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M6 14l6-6 6 6",
+        stroke: "currentColor",
+        strokeWidth: 1.8,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
+}
+function MoreIcon({ size = 16 }) {
+  const React = getReact();
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "5.5", cy: "12", r: "1.6" }),
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "1.6" }),
+    /* @__PURE__ */ React.createElement("circle", { cx: "18.5", cy: "12", r: "1.6" })
+  );
+}
+
+function usePlaybackState(store, selector) {
+  const React = getReact();
+  return React.useSyncExternalStore(
+    (onStoreChange) => {
+      const subscription = store.store.subscribe(onStoreChange);
+      return () => subscription.unsubscribe();
+    },
+    () => selector(store.store.state),
+    () => selector(store.store.state)
+  );
+}
+
+const RESIZE_DIRECTIONS = ["nw", "ne", "sw", "se"];
+const CLICK_SLOP = 4;
+const INTERACTIVE_SELECTOR = 'button, a, input, select, textarea, [role="button"], [role="menu"]';
+function createPlaybackWindow(playback, fallbackT) {
+  return function PlaybackWindow(props) {
+    const React = getReact();
+    const t = typeof props.t === "function" ? props.t : fallbackT;
+    const target = usePlaybackState(playback, (state) => state.target);
+    const storedGeometry = usePlaybackState(playback, (state) => state.geometry);
+    const minimized = usePlaybackState(playback, (state) => state.minimized);
+    const minimizedAt = usePlaybackState(playback, (state) => state.minimizedAt);
+    const nonce = usePlaybackState(playback, (state) => state.nonce);
+    const [viewport, setViewport] = React.useState(readViewportSize);
+    const [dragGeometry, setDragGeometry] = React.useState(null);
+    const [loaded, setLoaded] = React.useState(false);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const drag = React.useRef(null);
+    const root = React.useRef(null);
+    const more = React.useRef(null);
+    const menu = React.useRef(null);
+    React.useEffect(() => {
+      const onResize = () => setViewport(readViewportSize());
+      window.addEventListener("resize", onResize);
+      return () => window.removeEventListener("resize", onResize);
+    }, []);
+    React.useEffect(() => {
+      setLoaded(false);
+    }, [target, nonce]);
+    React.useEffect(() => {
+      if (target !== null) root.current?.focus();
+    }, [target]);
+    React.useEffect(() => {
+      setMenuOpen(false);
+    }, [target, nonce, minimized]);
+    React.useEffect(() => {
+      if (!menuOpen) return;
+      const onPointerDown = (event) => {
+        const node = event.target instanceof Node ? event.target : null;
+        if (node !== null && (menu.current?.contains(node) || more.current?.contains(node))) {
+          return;
+        }
+        setMenuOpen(false);
+      };
+      const onKeyDown = (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        setMenuOpen(false);
+      };
+      document.addEventListener("pointerdown", onPointerDown, true);
+      document.addEventListener("keydown", onKeyDown, true);
+      return () => {
+        document.removeEventListener("pointerdown", onPointerDown, true);
+        document.removeEventListener("keydown", onKeyDown, true);
+      };
+    }, [menuOpen]);
+    if (target === null) return null;
+    const expandedGeometry = clampGeometry(
+      dragGeometry ?? storedGeometry ?? defaultGeometry(viewport),
+      viewport
+    );
+    const geometry = minimized ? dragGeometry === null ? minimizedGeometry(viewport, minimizedAt) : minimizedGeometry(viewport, { x: dragGeometry.x, y: dragGeometry.y }) : expandedGeometry;
+    const title = target.title === "" ? t("playbackTitle") : target.title;
+    const beginDrag = (mode) => (event) => {
+      if (event.button !== 0) return;
+      const control = event.target instanceof Element ? event.target.closest(INTERACTIVE_SELECTOR) : null;
+      if (mode === "move" && control !== null) return;
+      drag.current = {
+        mode,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+        origin: geometry,
+        moved: false
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      event.preventDefault();
+    };
+    const onPointerMove = (event) => {
+      const session = drag.current;
+      if (session === null || session.pointerId !== event.pointerId) return;
+      if (minimized && session.mode !== "move") return;
+      const dx = event.clientX - session.startX;
+      const dy = event.clientY - session.startY;
+      if (!session.moved && Math.abs(dx) <= CLICK_SLOP && Math.abs(dy) <= CLICK_SLOP) return;
+      session.moved = true;
+      if (session.mode === "move") {
+        const next = { ...session.origin, x: session.origin.x + dx, y: session.origin.y + dy };
+        setDragGeometry(
+          minimized ? minimizedGeometry(viewport, next) : clampGeometry(next, viewport)
+        );
+        return;
+      }
+      setDragGeometry(resizeGeometry(session.origin, session.mode, dx, dy, viewport));
+    };
+    const endDrag = (event) => {
+      const session = drag.current;
+      if (session === null || session.pointerId !== event.pointerId) return;
+      drag.current = null;
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      const barClick = minimized && session.mode === "move" && !session.moved;
+      if (dragGeometry !== null) {
+        if (minimized) playback.commitMinimizedAt({ x: dragGeometry.x, y: dragGeometry.y });
+        else playback.commitGeometry(dragGeometry);
+      }
+      setDragGeometry(null);
+      if (barClick) playback.restore();
+    };
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: root,
+        className: "agp-play",
+        role: "dialog",
+        "aria-modal": "false",
+        "aria-label": title,
+        tabIndex: -1,
+        "data-minimized": minimized ? "true" : void 0,
+        style: {
+          left: `${geometry.x}px`,
+          top: `${geometry.y}px`,
+          width: `${geometry.width}px`,
+          height: `${geometry.height}px`
+        },
+        onKeyDown: (event) => {
+          if (event.key !== "Escape") return;
+          event.stopPropagation();
+          playback.close();
+        }
+      },
+      /* @__PURE__ */ React.createElement("style", null, PLAYBACK_CSS),
+      /* @__PURE__ */ React.createElement(
+        "header",
+        {
+          className: dragGeometry === null ? "agp-play-head" : "agp-play-head agp-play-head-dragging",
+          onPointerDown: beginDrag("move"),
+          onPointerMove,
+          onPointerUp: endDrag,
+          onPointerCancel: endDrag
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "agp-play-mark", "aria-hidden": "true" }, "\u{1F338}"),
+        /* @__PURE__ */ React.createElement("span", { className: "agp-play-title", title }, title),
+        /* @__PURE__ */ React.createElement("div", { className: "agp-play-actions", role: "toolbar", "aria-label": t("playbackActions") }, minimized ? null : /* @__PURE__ */ React.createElement("div", { className: "agp-play-more", ref: more }, /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "agp-play-action",
+            "aria-label": t("playbackMore"),
+            title: t("playbackMore"),
+            "aria-haspopup": "menu",
+            "aria-expanded": menuOpen,
+            onClick: () => setMenuOpen((open) => !open)
+          },
+          /* @__PURE__ */ React.createElement(MoreIcon, null)
+        ), menuOpen ? /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: "agp-play-menu",
+            role: "menu",
+            "aria-label": t("playbackActions"),
+            ref: menu
+          },
+          /* @__PURE__ */ React.createElement(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "agp-play-menu-item",
+              onClick: () => {
+                setMenuOpen(false);
+                playback.reload();
+              }
+            },
+            /* @__PURE__ */ React.createElement(RefreshIcon, null),
+            /* @__PURE__ */ React.createElement("span", null, t("playbackReload"))
+          ),
+          /* @__PURE__ */ React.createElement(
+            "a",
+            {
+              role: "menuitem",
+              className: "agp-play-menu-item",
+              href: target.url,
+              target: "_blank",
+              rel: "noreferrer noopener",
+              "data-agp-playback-ignore": "",
+              onClick: () => setMenuOpen(false)
+            },
+            /* @__PURE__ */ React.createElement(LaunchIcon, { size: 14 }),
+            /* @__PURE__ */ React.createElement("span", null, t("playbackOpenExternal"))
+          )
+        ) : null), minimized ? /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "agp-play-action",
+            "aria-label": t("playbackRestore"),
+            title: t("playbackRestore"),
+            onClick: () => playback.restore()
+          },
+          /* @__PURE__ */ React.createElement(RestoreIcon, null)
+        ) : /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "agp-play-action",
+            "aria-label": t("playbackMinimize"),
+            title: t("playbackMinimize"),
+            onClick: () => playback.minimize()
+          },
+          /* @__PURE__ */ React.createElement(MinimizeIcon, null)
+        ), /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            className: "agp-play-action agp-play-action-close",
+            "aria-label": t("playbackClose"),
+            title: t("playbackClose"),
+            onClick: () => playback.close()
+          },
+          /* @__PURE__ */ React.createElement(CloseIcon, null)
+        ))
+      ),
+      /* @__PURE__ */ React.createElement("div", { className: "agp-play-body" }, /* @__PURE__ */ React.createElement(
+        "iframe",
+        {
+          key: `${target.url}#${String(nonce)}`,
+          className: "agp-play-frame",
+          src: target.url,
+          title,
+          allow: "autoplay; fullscreen; picture-in-picture; clipboard-read; clipboard-write; encrypted-media",
+          allowFullScreen: true,
+          referrerPolicy: "no-referrer",
+          onLoad: () => setLoaded(true)
+        }
+      ), loaded ? null : /* @__PURE__ */ React.createElement("div", { className: "agp-play-loading" }, /* @__PURE__ */ React.createElement(LoadingStatus, { label: t("playbackLoading") }))),
+      minimized ? null : RESIZE_DIRECTIONS.map((direction) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: direction,
+          className: `agp-play-corner agp-play-corner-${direction}`,
+          "aria-hidden": "true",
+          onPointerDown: beginDrag(direction),
+          onPointerMove,
+          onPointerUp: endDrag,
+          onPointerCancel: endDrag
+        }
+      ))
+    );
+  };
+}
+
+const PLAYBACK_SLOT_ID = "animegarden.playback";
+function registerPlaybackFeature(ctx, t) {
+  const playback = createPlaybackStore();
+  const PlaybackWindow = createPlaybackWindow(playback, t);
+  ctx.effect(
+    () => installPlaybackLinkInterceptor((target) => playback.open(target)),
+    "animegarden: playback link interceptor"
+  );
+  ctx.slots.inject(
+    "shell.overlay",
+    () => ctx.slots.register(
+      {
+        name: "shell.overlay",
+        id: PLAYBACK_SLOT_ID,
+        order: 30,
+        locale: NS
+      },
+      PlaybackWindow
+    )
+  );
+}
+
 const PANEL_ID = "animegarden";
 function createPlugin(ReactRuntime) {
   setReact(ReactRuntime);
@@ -13019,6 +13834,7 @@ function createPlugin(ReactRuntime) {
     inject: ["slots", "locale"],
     apply(ctx) {
       const t = registerLocale(ctx);
+      registerPlaybackFeature(ctx, t);
       ctx.slots.inject(
         "sidebar.panellist",
         () => ctx.slots.register(

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Anime Garden",
-    "description": "Search anime torrent resources from 動漫花園, 蜜柑计划, 萌番组, and ANi through Anime Garden."
+    "description": "Anime Garden is an anime torrent aggregator that lets you search for anime resources from 動漫花園, 蜜柑计划, 萌番组, and ANi in one place."
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-animegarden",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Anime Garden 是一个动画 BT 资源聚合站, 你可以在这里聚合搜索来自動漫花園、蜜柑计划、萌番组和 ANi 的动画资源.",
   "keywords": [
     "anime",