dsh-music-player 0.1.1 → 0.1.3

package/README.md

@@ -1,17 +1,28 @@
 # dsh-music-player
 
+[![Awesome DSH Plugin](https://awesome-dsh-plugin.com/badge.svg)](https://awesome-dsh-plugin.com)
+
 DeepSeek Harness 本地音乐库播放器插件（bundle）。
 
-在 Host 进程里扫描本地音乐目录（默认 `~/Music`，可在面板里改），以 HTTP 流式（支持 Range/拖进度）给浏览器提供音频；浏览器侧给聊天输入区注入**正在播放条**，并提供一个浮动的**播放面板**（曲目列表 / 循环模式 / 音量 / 实时频谱 / 音乐目录设置）。同时注册 `music_play` 模型工具，让 agent 可以直接按关键词播放本地音乐。
+在 Host 进程里扫描本地音乐目录（默认 `~/Music`，可在面板里改），以 HTTP Range 流式（仅显示播放时间，暂无拖动跳转）给浏览器提供音频；浏览器侧给聊天输入区注入**正在播放条**（曲目信息、上一首/播放暂停/下一首/停止、顺序/单曲/乱序循环模式、音量、实时频谱），并提供一个浮动的**播放面板**（曲目列表 / 音乐目录选择与格式提示）。同时注册 `music_play` 模型工具，让 agent 可以直接按关键词播放本地音乐。
 
 ## 特性
 
-- 本地音频流式播放，支持 seek / 断点续播
+- 本地音频流式播放（HTTP Range），刷新后断点续播
 - 顺序播放、单曲循环、乱序播放三种模式
 - 实时 7 段频谱可视化（解码音频包络驱动）
+- 播放列表面板可自由拖动，位置跨刷新记忆
 - `music_play` 模型工具：agent 可按关键词让浏览器播放
 - 支持的格式：`mp3 / m4a / m4b / aac / flac / wav / ogg / opus / webm / aiff`（自动递归扫描子目录，上限 500 首）
 
+## 截图
+
+![播放条](assets/screenshot-bar.png)
+
+![实时频谱](assets/screenshot-spectrum.png)
+
+![播放面板](assets/screenshot-panel.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),
@@ -677,6 +739,7 @@ window.__ModuleLoader__.load({
       const [dirs, setDirs] = useState([]);
       const [curPath, setCurPath] = useState('');
       const [curName, setCurName] = useState('');
+      const [curUp, setCurUp] = useState(null);
       const [dirError, setDirError] = useState(null);
       return React.createElement('div', { className: 'dsh-music-settings' },
         React.createElement('div', { className: 'dsh-music-settings-row' },
@@ -724,20 +787,30 @@ window.__ModuleLoader__.load({
           if (data && data.error) { setDirError(data.error); return; }
           setCurPath(data.path || '');
           setCurName(data.name || '');
+          setCurUp(data.up || null);
           setDirs(data.dirs || []);
         } catch (err) {
           setDirError('读取目录失败：' + String((err && err.message) || err));
         }
       }
       function goUp() {
-        const p = curPath;
-        if (p === '' || p === '/') return;
-        const idx = p.lastIndexOf('/');
-        browse(idx <= 0 ? '/' : p.slice(0, idx));
+        // Prefer the parent path computed by the host (correct separators per OS).
+        // At a drive root the host reports the "__drives__" sentinel, so "up"
+        // jumps to the drive list and lets the user switch disks.
+        if (curUp === '__drives__') { browse('__drives__'); return; }
+        if (curUp !== null && curUp !== undefined && curUp !== '') { browse(curUp); return; }
+        // fallback: derive the parent locally when the host omitted `up`.
+        // Handle both "\" and "/" so Windows paths never dead-end (the old
+        // POSIX-only parse did nothing on backslash paths like C:\Users\x).
+        if (curPath === '' || curPath === '/' || /^[A-Za-z]:[\\/]?$/.test(curPath)) return;
+        const idx = Math.max(curPath.lastIndexOf('/'), curPath.lastIndexOf('\\'));
+        if (idx <= 0) return;
+        browse(curPath.slice(0, idx));
       }
       function pickCurrent() {
         const p = curPath;
-        if (p === '') return;
+        // The drive-list view ("__drives__") is not a real directory.
+        if (p === '' || p === '__drives__') return;
         setPickerOpen(false);
         saveRoot(p);
       }
@@ -824,6 +897,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/lib/index.js

@@ -28,8 +28,9 @@ function audioType(name) {
   return i > 0 ? (AUDIO_TYPES[name.slice(i + 1).toLowerCase()] || 'application/octet-stream') : 'application/octet-stream'
 }
 
-import { readFileSync, writeFileSync, mkdirSync } from 'node:fs'
-import { dirname } from 'node:path'
+import { readFileSync, writeFileSync, mkdirSync, existsSync, readdirSync, statSync } from 'node:fs'
+import { dirname, basename, parse as pathParse, join as pathJoin } from 'node:path'
+import * as os from 'node:os'
 
 export const name = 'dsh-music-player'
 export const inject = ['webServer', 'fs', 'shell', 'tools', 'systemPrompt']
@@ -43,6 +44,14 @@ export function apply(ctx) {
 
   const getHome = async () => {
     if (home !== null) return home
+    try {
+      // os.homedir() resolves the user's home cross-platform (Windows uses
+      // C:\Users\<name>; POSIX /Users/<name> or /home/<name>). The $HOME shell
+      // variable does not exist under cmd/powershell on Windows, so fall back
+      // to the shell only when os.homedir() is unusable.
+      const osHome = (typeof os !== 'undefined' && os.homedir) ? os.homedir() : ''
+      if (osHome !== '') { home = osHome; return home }
+    } catch { /* fall through to shell */ }
     try {
       const result = await ctx.shell.run(ctx.shell.resolve({ command: 'printf %s "$HOME"' }))
       const value = String((result.stdout && result.stdout.text) || '').trim()
@@ -100,21 +109,29 @@ export function apply(ctx) {
     const found = []
     const walk = async (dir, depth) => {
       if (depth > 4 || found.length >= 500) return
-      let entries = []
-      try { entries = await ctx.fs.listDir(dir) } catch { return }
+      // Tolerant listing (all entries, see listEntries): dsh-fs-local's listDir
+      // aborts on the first unreadable child, so scanning a drive root (or any
+      // dir with protected entries) would silently yield zero tracks.
+      const entries = listEntries(dir)
       for (const entry of entries) {
         if (found.length >= 500) return
-        if (entry.type === 'directory') { await walk(entry.target, depth + 1); continue }
-        if (entry.type !== 'file' || !isAudioName(entry.name)) continue
-        const abs = ctx.fs.processPath(entry.target)
-        const rel = abs.startsWith(rootStr) ? abs.slice(rootStr.length + 1) : entry.name
-        found.push({
-          name: rel, path: abs, size: entry.size || 0,
-          ext: entry.name.slice(entry.name.lastIndexOf('.') + 1).toLowerCase(),
-        })
+        const abs = pathJoin(dir, entry.name)
+        try {
+          if (entry.isDir) { await walk(abs, depth + 1); continue }
+          if (!isAudioName(entry.name)) continue
+          const st = statSync(abs)
+          if (!st.isFile()) continue
+          const rel = abs.startsWith(rootStr) ? abs.slice(rootStr.length + 1) : entry.name
+          found.push({
+            name: rel, path: abs, size: st.size || 0,
+            ext: entry.name.slice(entry.name.lastIndexOf('.') + 1).toLowerCase(),
+          })
+        } catch {
+          // unreadable entry: skip it, keep walking the rest
+        }
       }
     }
-    await walk(target, 0)
+    await walk(rootStr, 0)
     found.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
     return { rootPath: rootStr, found }
   }
@@ -129,7 +146,9 @@ export function apply(ctx) {
   }
   const init = async () => {
     const h = await getHome()
-    let root = h === null ? null : h + '/Music'
+    // Use path.join so the default root uses the platform separator; on Windows
+    // a bare h + '/Music' produced a mixed "C:\Users\x/Music" root.
+    let root = h === null ? null : pathJoin(h, 'Music')
     // Restore the user's last chosen directory; validate it so a deleted or
     // renamed directory falls back to the default instead of erroring.
     const stored = await loadStoredRoot()
@@ -153,6 +172,29 @@ export function apply(ctx) {
   }
   const ensureStarted = () => { if (startupPromise === null) startupPromise = init(); return startupPromise }
 
+  // Tolerant directory listing for the picker and the scan. dsh-fs-local's
+  // listDir is all-or-nothing: one unreadable child (pagefile.sys, System
+  // Volume Information, ...) aborts the entire listing, which made drive roots
+  // (and any dir containing protected entries) show up empty. Enumerate with
+  // node:fs instead, skip entries that cannot be stat'd, and report every
+  // entry with an isDir flag so callers can filter (picker: dirs only;
+  // scan: dirs to recurse + audio files to collect).
+  const listEntries = (dirPath) => {
+    let dirents = []
+    try { dirents = readdirSync(dirPath, { withFileTypes: true, encoding: 'utf8' }) } catch { return [] }
+    const out = []
+    for (const ent of dirents) {
+      try {
+        const isDir = ent.isDirectory() || (ent.isSymbolicLink() && statSync(pathJoin(dirPath, ent.name)).isDirectory())
+        out.push({ name: ent.name, isDir })
+      } catch {
+        // unreadable entry (EPERM/EBUSY/...): skip it, keep listing the rest
+      }
+    }
+    out.sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
+    return out
+  }
+
   // ---- shared HTTP helpers ----
   const writeJson = (res, value, status) => {
     res.writeHead(status || 200, { 'content-type': 'application/json; charset=utf-8' })
@@ -203,6 +245,24 @@ export function apply(ctx) {
         await ensureStarted()
         const raw = url.searchParams.get('path') || ''
         try {
+          // Windows has no single root that lists every drive, so expose a
+          // sentinel ("__drives__") that enumerates the available drive roots.
+          // Browsing "up" from a drive root (e.g. C:\) lands here so users can
+          // switch to another drive.
+          if (raw === '__drives__') {
+            const isWin = typeof process !== 'undefined' && process.platform === 'win32'
+            if (isWin) {
+              const roots = []
+              for (const letter of 'ABCDEFGHIJKLMNOPQRSTUVWXYZ') {
+                const root = letter + ':\\'
+                try { if (existsSync(root)) roots.push({ name: root, path: root }) } catch {}
+              }
+              writeJson(res, { path: '__drives__', name: '\u672c\u673a\u78c1\u76d8', up: null, dirs: roots })
+            } else {
+              writeJson(res, { path: '/', name: '/', up: null, dirs: [] })
+            }
+            return
+          }
           const base = raw === '' ? ((await getHome()) || '/') : raw
           const expanded = base.startsWith('~/') ? ((await getHome()) || '') + '/' + base.slice(2) : base
           const target = await ctx.fs.resolve(expanded)
@@ -212,13 +272,22 @@ export function apply(ctx) {
             return
           }
           const abs = ctx.fs.processPath(target)
-          let entries = []
-          try { entries = await ctx.fs.listDir(target) } catch { entries = [] }
-          const dirs = entries
-            .filter((e) => e.type === 'directory')
-            .map((e) => ({ name: e.name, path: ctx.fs.processPath(e.target) }))
-            .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
-          writeJson(res, { path: abs, name: abs.slice(abs.lastIndexOf('/') + 1) || abs, dirs })
+          // Parent / name computation must use the host filesystem's separators
+          // (Windows uses "\" and drive roots like C:\, POSIX uses "/"), so do it
+          // with node:path rather than guessing a separator in the browser.
+          const atRoot = pathParse(abs).dir === abs
+          // On Windows, "up" from a drive root goes to the drive-list sentinel so
+          // users can switch drives; at the POSIX root there is nowhere to go.
+          const up = atRoot
+            ? (process.platform === 'win32' ? '__drives__' : null)
+            : dirname(abs)
+          // Tolerant listing (see listEntries): skip unreadable entries so
+          // drive roots like C:\ still show their normal folders instead of an
+          // empty list. Only directories are offered by the picker.
+          const dirs = listEntries(abs)
+            .filter((e) => e.isDir)
+            .map((e) => ({ name: e.name, path: pathJoin(abs, e.name) }))
+          writeJson(res, { path: abs, name: basename(abs) || abs, up, dirs })
         } catch (err) {
           writeJson(res, { error: String((err && err.message) || err) }, 500)
         }

package/package.json

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