dsh-music-panel 0.3.8 → 0.3.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.3.10
+
+### 变更
+
+- 正在播放行改用 DSH 品牌蓝 `--dsw-static-deepseek-450`：歌曲名蓝色加粗、播放均衡器蓝色
+- 高亮改为淡蓝底 + 左侧圆角蓝条 + 10px 圆角，替换原来的灰白块 + 生硬内阴影
+
+## 0.3.9
+
+### 修复
+
+- 播放队列拖拽改为 Pointer Events 实现（参考 DSH 侧栏行拖拽的落点语义 + SortableJS 的 pointer 方案）：此前 HTML5 dragstart 在 composer 宿主浮层内不触发，导致松手后顺序不变
+- 按住行左侧 `⋮⋮` 手柄拖动即可；拖拽中目标行显示插入线，松手立即重排；拖拽后不会误触发行的点击跳转
+
 ## 0.3.8
 
 ### 修复

package/client.js

@@ -2124,12 +2124,13 @@ window.__ModuleLoader__.load({
     function QueueOverlay() {
       var [open, setOpen] = useState(queueOverlaySnapshot())
       var [snap, setSnap] = useState(player.getSnapshot())
-      var [dragOver, setDragOver] = useState(null)
-      // Keep the source index in a ref: calling setState from dragstart makes
-      // React re-render the dragged node synchronously, which cancels the
-      // browser's drag in Chromium.
+      // 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)
+      var dragOverRef = useRef(null)
+      var suppressClickRef = useRef(0)
       var ref = useRef(null)
+      var listRef = useRef(null)
 
       useEffect(function () {
         return subscribeQueueOverlay(function () {
@@ -2160,6 +2161,90 @@ window.__ModuleLoader__.load({
 
       if (!open) return null
       var queueView = buildQueueView(snap, player.getPlayOrder())
+
+      function clearDragMarks() {
+        var list = listRef.current
+        if (list === null) return
+        var rowEls = list.querySelectorAll('.mu-queue-row')
+        for (var i = 0; i < rowEls.length; i += 1) {
+          rowEls[i].classList.remove('is-dragging', 'is-drop-target')
+        }
+      }
+
+      function moveRow(from, to) {
+        if (from === null || from === to || from < 0 || to < 0) return
+        if (from >= queueView.length || to >= queueView.length) return
+        var order = queueView.map(function (item) {
+          return item.originalIndex
+        })
+        var moved = order.splice(from, 1)[0]
+        order.splice(to, 0, moved)
+        player.reorderQueue(order)
+      }
+
+      // Pointer-driven reorder (SortableJS' approach). The harness hosts this
+      // overlay inside the composer area, where HTML5 dragstart is unreliable;
+      // DSH's sidebar rows use HTML5 DnD with a custom drag preview, so this
+      // keeps the same before/after marker semantics but with pointer events.
+      var dragMoved = false
+      function startDrag(event, position) {
+        if (event.button !== undefined && event.button !== 0) return
+        event.preventDefault()
+        event.stopPropagation()
+        var list = listRef.current
+        if (list === null) return
+        dragFromRef.current = position
+        dragOverRef.current = position
+        dragMoved = false
+        var sourceRow = event.currentTarget.closest('.mu-queue-row')
+        if (sourceRow !== null) sourceRow.classList.add('is-dragging')
+        document.body.style.userSelect = 'none'
+
+        function mark(target) {
+          dragOverRef.current = target
+          var rowEls = list.querySelectorAll('.mu-queue-row')
+          for (var i = 0; i < rowEls.length; i += 1) {
+            rowEls[i].classList.toggle('is-drop-target', i === target)
+          }
+        }
+
+        function onMove(moveEvent) {
+          dragMoved = true
+          var rowEls = list.querySelectorAll('.mu-queue-row')
+          if (rowEls.length === 0) return
+          var target = rowEls.length - 1
+          for (var i = 0; i < rowEls.length; i += 1) {
+            var rect = rowEls[i].getBoundingClientRect()
+            if (moveEvent.clientY < rect.top + rect.height / 2) {
+              target = i
+              break
+            }
+            target = i
+          }
+          mark(target)
+        }
+
+        function onUp() {
+          document.removeEventListener('pointermove', onMove)
+          document.removeEventListener('pointerup', onUp)
+          document.removeEventListener('pointercancel', onUp)
+          document.body.style.userSelect = ''
+          var from = dragFromRef.current
+          var to = dragOverRef.current
+          dragFromRef.current = null
+          dragOverRef.current = null
+          clearDragMarks()
+          if (dragMoved && from !== null && to !== null) {
+            suppressClickRef.current = Date.now() + 250
+            moveRow(from, to)
+          }
+        }
+
+        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
@@ -2168,57 +2253,23 @@ window.__ModuleLoader__.load({
           'div',
           {
             key: position + ':' + track.path,
-            className:
-              'mu-queue-row' +
-              (visibleCurrent ? ' is-current' : '') +
-              (dragOver === position ? ' is-drop-target' : ''),
-            draggable: true,
+            className: 'mu-queue-row' + (visibleCurrent ? ' is-current' : ''),
             onClick: function () {
+              if (Date.now() < suppressClickRef.current) return
               player.select(snap.queue, originalIndex)
             },
-            onDragStart: function (event) {
-              dragFromRef.current = position
-              setDragOver(position)
-              if (event.dataTransfer !== null && event.dataTransfer !== undefined) {
-                event.dataTransfer.effectAllowed = 'move'
-                try {
-                  event.dataTransfer.setData('text/plain', String(position))
-                } catch (error) {
-                  // ignore
-                }
-              }
-            },
-            onDragOver: function (event) {
-              event.preventDefault()
-              if (event.dataTransfer !== null && event.dataTransfer !== undefined) {
-                event.dataTransfer.dropEffect = 'move'
-              }
-              if (dragOver !== position) setDragOver(position)
-            },
-            onDragLeave: function () {
-              if (dragOver === position) setDragOver(null)
-            },
-            onDrop: function (event) {
-              event.preventDefault()
-              event.stopPropagation()
-              var from = dragFromRef.current
-              if (from !== null && from !== position) {
-                var order = queueView.map(function (item) {
-                  return item.originalIndex
-                })
-                var moved = order.splice(from, 1)[0]
-                order.splice(position, 0, moved)
-                player.reorderQueue(order)
-              }
-              dragFromRef.current = null
-              setDragOver(null)
-            },
-            onDragEnd: function () {
-              dragFromRef.current = null
-              setDragOver(null)
-            },
           },
-          h('span', { className: 'mu-queue-grip', title: t('page.dragSort') }, '⋮⋮'),
+          h(
+            'span',
+            {
+              className: 'mu-queue-grip',
+              title: t('page.dragSort'),
+              onPointerDown: function (event) {
+                startDrag(event, position)
+              },
+            },
+            '⋮⋮',
+          ),
           h(
             'span',
             { className: 'mu-queue-index' },
@@ -2265,39 +2316,7 @@ window.__ModuleLoader__.load({
           'div',
           {
             className: 'mu-qoverlay-list',
-            onDragOver: function (event) {
-              event.preventDefault()
-              if (event.dataTransfer !== null && event.dataTransfer !== undefined) {
-                event.dataTransfer.dropEffect = 'move'
-              }
-            },
-            // Dropping in the gap between rows (no row handles it) still
-            // reorders: pick the row under the pointer.
-            onDrop: function (event) {
-              event.preventDefault()
-              var from = dragFromRef.current
-              if (from === null) return
-              var rowEls = event.currentTarget.querySelectorAll('.mu-queue-row')
-              var target = queueView.length - 1
-              for (var i = 0; i < rowEls.length; i += 1) {
-                var rect = rowEls[i].getBoundingClientRect()
-                if (event.clientY < rect.top + rect.height / 2) {
-                  target = i
-                  break
-                }
-                target = i
-              }
-              if (target !== from) {
-                var order = queueView.map(function (item) {
-                  return item.originalIndex
-                })
-                var moved = order.splice(from, 1)[0]
-                order.splice(target, 0, moved)
-                player.reorderQueue(order)
-              }
-              dragFromRef.current = null
-              setDragOver(null)
-            },
+            ref: listRef,
           },
           snap.queue.length === 0 ? h('div', { className: 'mu-state-sub' }, t('page.queueEmpty')) : rows,
         ),
@@ -5400,7 +5419,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))}',
@@ -5438,16 +5457,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}',
@@ -5458,7 +5478,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}',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-music-panel",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "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",