dsh-music-player 0.3.1 → 0.3.2

package/README.md

@@ -14,7 +14,7 @@ DeepSeek Harness 本地音乐/小说播放插件。
 - 顺序播放、单曲循环、乱序播放三种模式
 - 实时 7 段频谱可视化（解码音频包络驱动）
 - 播放时申请屏幕唤醒锁，防止听歌时熄屏/休眠（支持 Wake Lock 的浏览器，如 Chrome/Edge）
-- 播放列表面板可自由拖动，位置跨刷新记忆
+- 播放列表面板可自由拖动，右下角可拖拽调整大小，位置与尺寸跨刷新记忆
 - AI 讲书：本地 `.txt` 小说经 MiMo TTS 合成朗读，自动识别**书名/前言/章节/尾声**结构，播放条带**章节目录**跳转、章节切歌，可选 4 种中文 AI 声音（默认白桦）
 - `music_play` 模型工具：agent 可按关键词播放本地音乐，也可按小说名启动 AI 讲书
 - 支持的格式：`mp3 / m4a / m4b / aac / flac / wav / ogg / opus / webm / aiff`（自动递归扫描子目录，上限 500 首）

package/lib/client.js

@@ -101,14 +101,24 @@ window.__ModuleLoader__.load({
       }
       return best;
     }
-    // Restore the playback-panel position ({x,y,h}) previously saved by dragging, if any.
+    // Playback-panel geometry: default CSS width (must match .dsh-music-panel),
+    // resize bounds, and the viewport-height fraction cap when user-resized.
+    const PANEL_W = 380;
+    const PANEL_MIN_W = 280;
+    const PANEL_MAX_W = 640;
+    const PANEL_MIN_H = 200;
+    const PANEL_MAX_H_VH = 0.8;
+    // Restore the playback-panel position ({x,y,w,h}) previously saved by
+    // dragging/resizing, if any. Old saves ({x,y,h}) migrate with a default width.
     function loadPanelPos() {
       const raw = loadPref(PREF_PANEL_POS);
       if (raw === null) return null;
       try {
         const p = JSON.parse(raw);
         if (p && typeof p.x === 'number' && typeof p.y === 'number'
-          && typeof p.h === 'number' && p.h > 0) return p;
+          && typeof p.h === 'number' && p.h > 0) {
+          return { x: p.x, y: p.y, w: (typeof p.w === 'number' && p.w > 0) ? p.w : PANEL_W, h: p.h };
+        }
       } catch (e) {}
       return null;
     }
@@ -1631,9 +1641,11 @@ window.__ModuleLoader__.load({
       const isBook = s.currentId !== null && String(s.currentId).startsWith('book:');
       const listRef = useRef(null);
       const panelRef = useRef(null);
-      // Draggable panel position ({x, y, h} left/top/height once dragged; null = default right/bottom)
+      // Draggable panel position + size ({x, y, w, h} left/top/width/height once
+      // dragged or resized; null = default right/bottom, 380px, auto height).
       const [pos, setPos] = useState(loadPanelPos);
-      const dragRef = useRef(null);
+      const dragRef = useRef(null);   // head-drag state
+      const resizeRef = useRef(null); // corner-resize state
       // 曲库每行「＋」打开的「加入歌单」菜单：{track, x, y}（锚点=按钮右上角视口坐标）。
       const [addMenu, setAddMenu] = useState(null);
       const openAddMenu = (track, e) => {
@@ -1641,11 +1653,11 @@ window.__ModuleLoader__.load({
         setAddMenu({ track, x: r.right, y: r.top });
       };
 
-      // Once the panel is dragged we switch from CSS right/bottom anchoring to an
-      // explicit left/top/height. Locking the height matters: with only top+left set
-      // and no height, a fixed element whose CSS also sets bottom collapses to fit
-      // the leftover space, so the panel's height jumps while dragging.
-      const style = pos === null ? null : { left: pos.x, top: pos.y, height: pos.h };
+      // Once the panel is dragged/resized we switch from CSS right/bottom anchoring
+      // to explicit left/top/width/height. Locking height and clearing max-height
+      // matters: with only top+left and the CSS max-height:72vh still applying, a
+      // fixed element whose CSS also sets bottom would collapse/clamp while dragging.
+      const style = pos === null ? null : { left: pos.x, top: pos.y, width: pos.w, height: pos.h, maxHeight: 'none' };
 
       const onHeadDown = (e) => {
         if (e.button !== undefined && e.button !== 0) return;
@@ -1654,15 +1666,16 @@ window.__ModuleLoader__.load({
         const el = panelRef.current;
         if (el === null) return;
         const rect = el.getBoundingClientRect();
+        const w = pos !== null ? pos.w : PANEL_W;
         const h = pos !== null ? pos.h : rect.height;
-        const next = { x: pos !== null ? pos.x : rect.left, y: pos !== null ? pos.y : rect.top, h };
+        const next = { x: pos !== null ? pos.x : rect.left, y: pos !== null ? pos.y : rect.top, w, h };
         dragRef.current = {
           startX: e.clientX, startY: e.clientY,
-          originX: next.x, originY: next.y, h,
+          originX: next.x, originY: next.y, w, h,
         };
         setPos(next);
         savePref(PREF_PANEL_POS, JSON.stringify(next));
-        e.currentTarget.setPointerCapture(e.pointerId);
+        if (typeof e.currentTarget.setPointerCapture === 'function') e.currentTarget.setPointerCapture(e.pointerId);
       };
       const onHeadMove = (e) => {
         const d = dragRef.current;
@@ -1674,13 +1687,56 @@ window.__ModuleLoader__.load({
           x = Math.max(0, Math.min(x, window.innerWidth - el.offsetWidth));
           y = Math.max(0, Math.min(y, window.innerHeight - el.offsetHeight));
         }
-        const next = { x, y, h: d.h };
+        const next = { x, y, w: d.w, h: d.h };
         setPos(next);
         savePref(PREF_PANEL_POS, JSON.stringify(next));
       };
       const onHeadUp = (e) => {
         dragRef.current = null;
-        if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+        if (typeof e.currentTarget.releasePointerCapture === 'function'
+          && typeof e.currentTarget.hasPointerCapture === 'function'
+          && e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
+      };
+
+      // Corner drag-to-resize: grow/shrink width & height from the bottom-right
+      // handle, clamped to [min, max] and kept inside the viewport. The panel's
+      // top-left (x/y) is untouched by a resize.
+      const onResizeDown = (e) => {
+        if (e.button !== undefined && e.button !== 0) return;
+        const el = panelRef.current;
+        if (el === null) return;
+        const rect = el.getBoundingClientRect();
+        const cur = {
+          x: pos !== null ? pos.x : rect.left,
+          y: pos !== null ? pos.y : rect.top,
+          w: pos !== null ? pos.w : PANEL_W,
+          h: pos !== null ? pos.h : rect.height,
+        };
+        resizeRef.current = { startX: e.clientX, startY: e.clientY, originW: cur.w, originH: cur.h };
+        setPos(cur);
+        savePref(PREF_PANEL_POS, JSON.stringify(cur));
+        if (typeof e.currentTarget.setPointerCapture === 'function') e.currentTarget.setPointerCapture(e.pointerId);
+      };
+      const onResizeMove = (e) => {
+        const d = resizeRef.current;
+        if (d === null) return;
+        const el = panelRef.current;
+        const x = pos !== null ? pos.x : (el !== null ? el.getBoundingClientRect().left : 0);
+        const y = pos !== null ? pos.y : (el !== null ? el.getBoundingClientRect().top : 0);
+        const vw = window.innerWidth, vh = window.innerHeight;
+        const maxW = Math.min(PANEL_MAX_W, Math.max(PANEL_MIN_W, vw - x));
+        const maxH = Math.min(Math.floor(vh * PANEL_MAX_H_VH), Math.max(PANEL_MIN_H, vh - y));
+        const w = Math.max(PANEL_MIN_W, Math.min(d.originW + (e.clientX - d.startX), maxW));
+        const h = Math.max(PANEL_MIN_H, Math.min(d.originH + (e.clientY - d.startY), maxH));
+        const next = { x, y, w, h };
+        setPos(next);
+        savePref(PREF_PANEL_POS, JSON.stringify(next));
+      };
+      const onResizeUp = (e) => {
+        resizeRef.current = null;
+        if (typeof e.currentTarget.releasePointerCapture === 'function'
+          && typeof e.currentTarget.hasPointerCapture === 'function'
+          && e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
       };
 
       useEffect(() => {
@@ -1782,7 +1838,8 @@ window.__ModuleLoader__.load({
         // panel (novel status shows on the playback bar instead).
         !isBook && s.error ? React.createElement('div', { className: 'dsh-music-error' }, s.error) : null,
         !isBook && s.loading ? React.createElement('div', { className: 'dsh-music-loading' }, '\u626b\u63cf\u4e2d\u2026') : null,
-        React.createElement('div', { className: 'dsh-music-list', ref: (el) => { listRef.current = el; } }, listBody),
+        React.createElement('div', { className: 'dsh-music-list', style: pos === null ? null : { maxHeight: 'none' }, ref: (el) => { listRef.current = el; } }, listBody),
+        React.createElement('div', { className: 'dsh-music-resize', title: '拖动调整面板大小', onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp }),
         addMenu ? React.createElement(AddToPlaylistMenu, {
           track: addMenu.track, anchor: { x: addMenu.x, y: addMenu.y },
           onClose: () => setAddMenu(null),
@@ -2188,6 +2245,9 @@ window.__ModuleLoader__.load({
       '.dsh-music-bar .dsh-music-mode-trigger svg { flex: none; }\n' +
       '.dsh-music-bar .dsh-music-mode-menu { align-self: center; }\n' +
       '.dsh-music-panel { position: fixed; right: 24px; bottom: 84px; width: 380px; max-height: 72vh; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--dsw-alias-bg-overlay, #1e1f22); border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.35)); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); color: var(--dsw-alias-label-primary, #e6e6e6); font-size: 13px; z-index: 1000; pointer-events: auto; overflow: hidden; }\n' +
+      '.dsh-music-resize { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none; z-index: 5; }\n' +
+      '.dsh-music-resize::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 5px; height: 5px; border-right: 2px solid var(--dsw-alias-label-secondary, #8a8f98); border-bottom: 2px solid var(--dsw-alias-label-secondary, #8a8f98); opacity: 0.7; }\n' +
+      '.dsh-music-resize:hover::after { opacity: 1; }\n' +
       '.dsh-music-panel-head { display: flex; align-items: center; gap: 6px; }\n' +
       '.dsh-music-tabs { display: flex; gap: 4px; }\n' +
       '.dsh-music-tab { flex: 1; padding: 5px 0; border: none; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-secondary, #8a8f98); cursor: pointer; font-size: 12px; }\n' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-music-player",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "DeepSeek Harness 本地音乐 + AI 讲书插件：Host 扫描音乐目录并以 HTTP 流式提供音频、解析 .txt 小说结构并经 MiMo TTS 合成朗读，浏览器侧提供播放条/播放面板/章节目录跳转/多声音选择/实时频谱，并注册 music_play 模型工具",
   "type": "module",
   "main": "lib/index.js",