dsh-music-panel 0.3.9 → 0.3.11

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.3.11
+
+### 变更
+
+- 播放列表面板支持拖动移动位置：拖动顶部正在播放条/标题区即可，位置记在偏好里，下次打开恢复
+- 播放列表面板内禁用文本框选（`user-select: none`）
+
+## 0.3.10
+
+### 变更
+
+- 正在播放行改用 DSH 品牌蓝 `--dsw-static-deepseek-450`：歌曲名蓝色加粗、播放均衡器蓝色
+- 高亮改为淡蓝底 + 左侧圆角蓝条 + 10px 圆角，替换原来的灰白块 + 生硬内阴影
+
 ## 0.3.9
 
 ### 修复

package/client.js

@@ -33,6 +33,7 @@ window.__ModuleLoader__.load({
     /** Defaults for every appearance / lyric preference. */
     var PREF_DEFAULTS = {
       miniPlayer: true,
+      queuePos: null,
       composerQueueButton: true,
       circularCover: true,
       vinylRing: false,
@@ -2124,6 +2125,12 @@ window.__ModuleLoader__.load({
     function QueueOverlay() {
       var [open, setOpen] = useState(queueOverlaySnapshot())
       var [snap, setSnap] = useState(player.getSnapshot())
+      var [pos, setPos] = useState(function () {
+        var saved = readPrefs().queuePos
+        if (saved === null || typeof saved !== 'object') return null
+        if (!isFinite(saved.x) || !isFinite(saved.y)) return null
+        return { x: Number(saved.x), y: Number(saved.y) }
+      })
       // Drag state lives entirely in refs/DOM classes so React never
       // re-renders the dragged row mid-drag (Chromium cancels that).
       var dragFromRef = useRef(null)
@@ -2245,6 +2252,73 @@ window.__ModuleLoader__.load({
         document.addEventListener('pointercancel', onUp)
       }
 
+      // Drag the whole panel by its header strip (buttons and queue rows keep
+      // their own gestures). Position is remembered in prefs.
+      function startPanelDrag(event) {
+        if (event.button !== undefined && event.button !== 0) return
+        var target = event.target
+        if (target === null || target === undefined || typeof target.closest !== 'function') return
+        if (target.closest('button, .mu-queue-row, .mu-queue-grip') !== null) return
+        if (target.closest('.mu-qoverlay-now, .mu-qoverlay-head') === null) return
+        var el = ref.current
+        if (el === null) return
+        var rect = el.getBoundingClientRect()
+        var start = {
+          x: event.clientX,
+          y: event.clientY,
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+          height: rect.height,
+          moved: false,
+        }
+        event.preventDefault()
+        document.body.style.userSelect = 'none'
+        document.body.style.cursor = 'grabbing'
+        el.classList.add('is-dragging-panel')
+
+        function clamp(value, min, max) {
+          return Math.max(min, Math.min(max, value))
+        }
+
+        function onMove(moveEvent) {
+          start.moved = true
+          var x = clamp(
+            start.left + (moveEvent.clientX - start.x),
+            8,
+            Math.max(8, window.innerWidth - start.width - 8),
+          )
+          var y = clamp(
+            start.top + (moveEvent.clientY - start.y),
+            8,
+            Math.max(8, window.innerHeight - start.height - 8),
+          )
+          el.style.left = x + 'px'
+          el.style.top = y + 'px'
+          el.style.right = 'auto'
+          el.style.bottom = 'auto'
+        }
+
+        function onUp() {
+          document.removeEventListener('pointermove', onMove)
+          document.removeEventListener('pointerup', onUp)
+          document.removeEventListener('pointercancel', onUp)
+          document.body.style.userSelect = ''
+          document.body.style.cursor = ''
+          el.classList.remove('is-dragging-panel')
+          if (start.moved) {
+            var next = el.getBoundingClientRect()
+            var position = { x: Math.round(next.left), y: Math.round(next.top) }
+            setPos(position)
+            savePrefs({ queuePos: position })
+          }
+        }
+
+        document.addEventListener('pointermove', onMove)
+        document.addEventListener('pointerup', onUp)
+        document.addEventListener('pointercancel', onUp)
+      }
+
       var rows = queueView.map(function (entry, position) {
         var track = entry.track
         var originalIndex = entry.originalIndex
@@ -2299,7 +2373,17 @@ window.__ModuleLoader__.load({
 
       return h(
         'div',
-        { className: 'mu-qoverlay', ref: ref },
+        {
+          className: 'mu-qoverlay',
+          ref: ref,
+          style:
+            pos !== null
+              ? { left: pos.x + 'px', top: pos.y + 'px', right: 'auto', bottom: 'auto' }
+              : undefined,
+          onPointerDown: function (event) {
+            startPanelDrag(event)
+          },
+        },
         h(QueueNowPlaying, null),
         h(
           'div',
@@ -5419,7 +5503,7 @@ window.__ModuleLoader__.load({
       '.mu-list{flex:1;min-height:0;overflow-y:auto;scrollbar-gutter:stable;padding:0 16px 12px}',
       '.mu-vlist-inner{position:relative}',
       '.mu-vlist-row{position:absolute;left:0;right:0}',
-      '.mu-row{display:grid;grid-template-columns:calc(var(--mu-row-size,55px) + 4px) minmax(0,1.15fr) minmax(0,.85fr) 56px auto;align-items:center;gap:12px;padding:6px 10px;border-radius:var(--dsw-radius-md,8px);height:67px;box-sizing:border-box}',
+      '.mu-row{display:grid;grid-template-columns:calc(var(--mu-row-size,55px) + 4px) minmax(0,1.15fr) minmax(0,.85fr) 56px auto;align-items:center;gap:12px;padding:6px 10px;border-radius:var(--dsw-radius-md,8px);height:67px;box-sizing:border-box;position:relative}',
       '.mu-prefs{min-width:240px;padding:12px}',
       '.mu-prefs-panel{position:absolute;top:56px;right:24px;z-index:50;width:360px;max-width:calc(100% - 48px);max-height:70vh;overflow-y:auto;padding:14px;border:1px solid var(--dsw-alias-border-l2,rgba(255,255,255,.12));border-radius:var(--dsw-radius-xl,20px);background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-panel,0 16px 40px rgba(0,0,0,.5))}',
       '.mu-prefs-tabs{display:flex;gap:2px;padding:3px;margin-bottom:12px;border-radius:9px;background:var(--dsw-alias-bg-layer-3,rgba(255,255,255,.06))}',
@@ -5457,16 +5541,17 @@ window.__ModuleLoader__.load({
       '.mu-btn-danger{background:var(--dsw-alias-state-error-primary,#c0392b);color:var(--dsw-alias-label-primary-foreground,#fff);border-color:transparent}',
       '.mu-btn-danger:hover{opacity:.9}',
       '.mu-row:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.05))}',
-      '.mu-row.is-current{background:rgba(244,244,245,.12);background:color-mix(in srgb,var(--dsw-alias-brand-primary,#f4f4f5) 12%,transparent);box-shadow:inset 3px 0 0 var(--dsw-alias-brand-primary,#f4f4f5);border-radius:var(--dsw-radius-md,8px)}',
-      '.mu-row.is-current:hover{background:rgba(244,244,245,.16);background:color-mix(in srgb,var(--dsw-alias-brand-primary,#f4f4f5) 16%,transparent)}',
-      '.mu-row.is-current .mu-row-title{color:var(--dsw-alias-brand-primary,#f4f4f5);font-weight:600}',
+      '.mu-row.is-current{background:color-mix(in srgb,var(--dsw-static-deepseek-450,#5686fe) 8%,transparent);border-radius:10px;position:relative}',
+      '.mu-row.is-current::before{content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:2px;background:var(--dsw-static-deepseek-450,#5686fe)}',
+      '.mu-row.is-current:hover{background:color-mix(in srgb,var(--dsw-static-deepseek-450,#5686fe) 12%,transparent)}',
+      '.mu-row.is-current .mu-row-title{color:var(--dsw-static-deepseek-450,#5686fe);font-weight:600}',
       '.mu-row.is-current .mu-row-sub,.mu-row.is-current .mu-row-album,.mu-row.is-current .mu-row-dur{color:var(--dsw-alias-label-secondary,#a1a1aa)}',
       '.mu-row-play{position:relative;width:var(--mu-row-size,55px);height:var(--mu-row-size,55px);border:0;padding:0;background:transparent;cursor:pointer;border-radius:var(--dsw-radius-sm,6px);display:flex;align-items:center;justify-content:center}',
       '.mu-row-playmask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:var(--dsw-radius-sm,6px);background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .12s ease}',
       '.mu-row-play:hover .mu-row-playmask,.mu-row.is-current .mu-row-playmask{opacity:1}',
       '.mu-row.is-current .mu-row-playmask{background:rgba(0,0,0,.35)}',
       '.mu-row.is-selected{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.05))}',
-      '.mu-row.is-current.is-selected{background:rgba(244,244,245,.12);background:color-mix(in srgb,var(--dsw-alias-brand-primary,#f4f4f5) 12%,transparent);box-shadow:inset 3px 0 0 var(--dsw-alias-brand-primary,#f4f4f5)}',
+      '.mu-row.is-current.is-selected{background:color-mix(in srgb,var(--dsw-static-deepseek-450,#5686fe) 8%,transparent)}',
       '.mu-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}',
       '.mu-check{width:20px;height:20px;margin:0;padding:0;border:1.5px solid var(--dsw-alias-border-l3,rgba(255,255,255,.24));border-radius:50%;background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;opacity:0;transition:opacity .12s ease}',
       '.mu-row:hover .mu-check,.mu-row.is-selected .mu-check,.mu-check:focus-visible{opacity:1}',
@@ -5477,7 +5562,7 @@ window.__ModuleLoader__.load({
       '.mu-row-main{min-width:0}',
       '.mu-row-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
       '.mu-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;margin-right:8px;flex:none}',
-      '.mu-eq i{display:block;width:2px;height:4px;border-radius:1px;background:var(--dsw-alias-brand-primary,#f4f4f5);opacity:.9}',
+      '.mu-eq i{display:block;width:2px;height:4px;border-radius:1px;background:var(--dsw-static-deepseek-450,#5686fe);opacity:.95}',
       '.mu-eq.is-playing i{animation:mu-eq-bounce .9s ease-in-out infinite}',
       '.mu-eq.is-playing i:nth-child(2){animation-delay:.15s}',
       '.mu-eq.is-playing i:nth-child(3){animation-delay:.3s}',
@@ -5526,7 +5611,10 @@ window.__ModuleLoader__.load({
       '.mu-bar-right{display:flex;align-items:center;gap:6px;justify-self:end}',
       '.mu-quality{font-size:12px;color:var(--dsw-alias-label-tertiary,#a1a1aa);font-variant-numeric:tabular-nums;white-space:nowrap}',
       '.mu-pop{position:absolute;right:16px;bottom:84px;z-index:40;width:330px;max-height:58%;display:flex;flex-direction:column;border-radius:var(--dsw-radius-md,8px);background:var(--dsw-alias-bg-layer-1,#1a1a1e);border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));box-shadow:var(--dsw-elevation-prominent,0 16px 48px rgba(0,0,0,.5));overflow:hidden}',
-      '.mu-qoverlay{position:fixed;right:24px;bottom:96px;z-index:70;width:360px;max-width:calc(100vw - 48px);max-height:62vh;display:flex;flex-direction:column;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:14px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 16px 48px rgba(0,0,0,.5));overflow:hidden}',
+      '.mu-qoverlay{position:fixed;right:24px;bottom:96px;z-index:70;width:360px;max-width:calc(100vw - 48px);max-height:62vh;display:flex;flex-direction:column;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:14px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 16px 48px rgba(0,0,0,.5));overflow:hidden;user-select:none}',
+      '.mu-qoverlay.is-dragging-panel{cursor:grabbing}',
+      '.mu-qoverlay-now,.mu-qoverlay-head{cursor:grab}',
+      '.mu-qoverlay-now:active,.mu-qoverlay-head:active{cursor:grabbing}',
       '.mu-qoverlay-now{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:.5px solid var(--dsw-alias-border-l1,rgba(255,255,255,.08))}',
       '.mu-qoverlay-now.is-empty{padding:14px 12px;color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:12px}',
       '.mu-qoverlay-now-main{flex:1;min-width:0}',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-music-panel",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "type": "module",
   "description": "Local music library for DeepSeek Harness: scan a folder, browse tracks with cover art and tags, and play through a sidebar-panel player with loop, shuffle and volume. · DSH 本地音乐插件：扫描音乐目录、读取封面与标签、侧栏入口 + 全屏播放器。",
   "license": "MIT",