dsh-music-player 0.1.1 → 0.1.2

package/README.md

@@ -9,9 +9,18 @@ DeepSeek Harness 本地音乐库播放器插件（bundle）。
 - 本地音频流式播放，支持 seek / 断点续播
 - 顺序播放、单曲循环、乱序播放三种模式
 - 实时 7 段频谱可视化（解码音频包络驱动）
+- 播放列表面板可自由拖动，位置跨刷新记忆
 - `music_play` 模型工具：agent 可按关键词让浏览器播放
 - 支持的格式：`mp3 / m4a / m4b / aac / flac / wav / ogg / opus / webm / aiff`（自动递归扫描子目录，上限 500 首）
 
+## 截图
+
+![播放条](assets/screenshot-bar.png)
+
+![播放面板](assets/screenshot-panel.png)
+
+![实时频谱](assets/screenshot-spectrum.png)
+
 ## 安装
 
 需要已安装 `dsh` CLI。

package/lib/client.js

@@ -28,9 +28,21 @@ window.__ModuleLoader__.load({
     const PREF_VOL = 'dsh-music-volume';
     const PREF_PLAYBACK = 'dsh-music-playback';
     const PREF_ROOT = 'dsh-music-root';
+    const PREF_PANEL_POS = 'dsh-music-panel-pos';
     const loadPref = (k) => { try { return localStorage.getItem(k); } catch (e) { return null; } };
     const savePref = (k, v) => { try { localStorage.setItem(k, v); } catch (e) {} };
     const clearPref = (k) => { try { localStorage.removeItem(k); } catch (e) {} };
+    // Restore the playback-panel position ({x,y,h}) previously saved by dragging, if any.
+    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;
+      } catch (e) {}
+      return null;
+    }
     const jsonGet = (url) => fetch(url, { cache: 'no-store' }).then((r) => r.json());
 
     // ---- engine + shared store (React re-renders on set) ----
@@ -627,6 +639,52 @@ window.__ModuleLoader__.load({
       const s = useStore();
       const listRef = useRef(null);
       const panelRef = useRef(null);
+      // Draggable panel position ({x, y, h} left/top/height once dragged; null = default right/bottom)
+      const [pos, setPos] = useState(loadPanelPos);
+      const dragRef = useRef(null);
+
+      // 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 };
+
+      const onHeadDown = (e) => {
+        if (e.button !== undefined && e.button !== 0) return;
+        // don't start a drag from the close button
+        if (e.target.closest && e.target.closest('.dsh-music-icon-btn')) return;
+        const el = panelRef.current;
+        if (el === null) return;
+        const rect = el.getBoundingClientRect();
+        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 };
+        dragRef.current = {
+          startX: e.clientX, startY: e.clientY,
+          originX: next.x, originY: next.y, h,
+        };
+        setPos(next);
+        savePref(PREF_PANEL_POS, JSON.stringify(next));
+        e.currentTarget.setPointerCapture(e.pointerId);
+      };
+      const onHeadMove = (e) => {
+        const d = dragRef.current;
+        if (d === null) return;
+        let x = d.originX + (e.clientX - d.startX);
+        let y = d.originY + (e.clientY - d.startY);
+        const el = panelRef.current;
+        if (el !== null) {
+          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 };
+        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);
+      };
+
       useEffect(() => {
         if (!s.panelOpen) return;
         // Close the playlist panel when the user clicks outside it
@@ -658,8 +716,12 @@ window.__ModuleLoader__.load({
           React.createElement('span', { className: 'dsh-music-track-size' }, t.size ? Math.round(t.size / 1024 / 1024 * 10) / 10 + ' MB' : ''),
         );
       });
-      return React.createElement('div', { className: 'dsh-music-panel', ref: panelRef },
-        React.createElement('div', { className: 'dsh-music-panel-head' },
+      return React.createElement('div', { className: 'dsh-music-panel', ref: panelRef, style },
+        React.createElement('div', {
+          className: 'dsh-music-panel-head dsh-music-panel-drag',
+          onPointerDown: onHeadDown, onPointerMove: onHeadMove, onPointerUp: onHeadUp,
+        },
+          React.createElement('span', { className: 'dsh-music-panel-grip', 'aria-hidden': true }, '\u283f'),
           React.createElement('span', { className: 'dsh-music-panel-title' }, '\u64ad\u653e\u5217\u8868'),
           React.createElement('button', { className: 'dsh-music-icon-btn', title: '\u5173\u95ed', onClick: () => set({ panelOpen: false }) }, '\u2715')),
         React.createElement(DirectorySetting, null),
@@ -824,6 +886,8 @@ window.__ModuleLoader__.load({
       '.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-panel-head { display: flex; align-items: center; gap: 6px; }\n' +
+      '.dsh-music-panel-drag { cursor: move; touch-action: none; user-select: none; }\n' +
+      '.dsh-music-panel-grip { color: var(--dsw-alias-label-secondary, #8a8f98); font-size: 12px; letter-spacing: -1px; opacity: 0.7; }\n' +
       '.dsh-music-panel-title { font-weight: 600; margin-right: auto; }\n' +
       '.dsh-music-icon-btn { background: transparent; border: none; color: var(--dsw-alias-label-secondary, #8a8f98); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 6px; }\n' +
       '.dsh-music-icon-btn:hover { color: var(--dsw-alias-label-primary, #e6e6e6); background: var(--dsw-alias-bg-layer-2, rgba(255,255,255,0.06)); }\n' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-music-player",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "DeepSeek Harness 本地音乐库播放器：Host 扫描音乐目录并以 HTTP 流式提供音频，浏览器侧提供播放条/播放面板/设置页与实时频谱，并注册 music_play 模型工具",
   "type": "module",
   "main": "lib/index.js",