dsh-music-panel 0.3.3 → 0.3.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.3.5
+
+### 变更
+
+- 播放队列、设置面板、排序菜单、播放页设置、迷你播放器、搜索历史等浮层背景统一为 DSH 设置面板的 `--dsw-alias-bg-layer-1`
+- 移除播放队列头部的「清空队列」按钮（顶部「清空列表」按钮已在 0.3.3 移除）
+
+## 0.3.4
+
+### 变更
+
+- 随机播放时，播放队列（播放列表）按实际播放顺序（乱序）展示，从上往下播放；切回顺序播放恢复原顺序
+- 切换到随机播放时重新洗牌
+- 双击歌曲 / 播放全部时，入队范围是当前歌单的完整曲目（忽略搜索过滤），从双击的歌曲开始
+
 ## 0.3.3
 
 ### 变更

package/client.js

@@ -1609,6 +1609,10 @@ window.__ModuleLoader__.load({
         getTime: function () {
           return { currentTime: state.currentTime, duration: state.duration, buffered: state.buffered }
         },
+        /** Queue indices in the current playback order (random mode). */
+        getPlayOrder: function () {
+          return randomOrder.slice()
+        },
         /** Restore the last queue/position once (called by the resident host). */
         tryRestore: tryRestore,
         /** Flush statistics + resume state when the page is hidden/closed. */
@@ -1823,8 +1827,14 @@ window.__ModuleLoader__.load({
           emit()
         },
         setOrder: function (value) {
-          state = Object.assign({}, state, { order: value })
-          savePrefs({ order: value })
+          var next = value === 'random' ? 'random' : 'list'
+          if (next === 'random' && state.queue.length > 1) {
+            // Fresh shuffle whenever random is selected, so the queue panel's
+            // displayed order is the actual playback order.
+            randomOrder = randomOrderOf(state.queue.length)
+          }
+          state = Object.assign({}, state, { order: next })
+          savePrefs({ order: next })
           emit()
         },
         clear: function () {
@@ -3068,6 +3078,18 @@ window.__ModuleLoader__.load({
       var prefs = useRef(readPrefs()).current
       var [snap, setSnap] = useState(player.getSnapshot())
       var leaderNow = player.isLeader()
+      var playOrder = player.getPlayOrder()
+      // In random mode the queue panel lists songs in the order they will
+      // actually play ("from top to bottom"), while edits still target the
+      // original queue indices.
+      var queueView =
+        snap.order === 'random' && Array.isArray(playOrder) && playOrder.length === snap.queue.length
+          ? playOrder.map(function (originalIndex) {
+              return { track: snap.queue[originalIndex], originalIndex: originalIndex }
+            })
+          : snap.queue.map(function (track, originalIndex) {
+              return { track: track, originalIndex: originalIndex }
+            })
       var [config, setConfig] = useState(null)
       var [tracks, setTracks] = useState([])
       var [loading, setLoading] = useState(true)
@@ -3393,11 +3415,12 @@ window.__ModuleLoader__.load({
       }
 
       function activate(track) {
-        var at = visible.findIndex(function (item) {
+        var at = sortedCollection.findIndex(function (item) {
           return item.path === track.path
         })
         if (at < 0) return
-        player.select(visible, at)
+        // Queue the whole playlist (ignores the search filter), starting here.
+        player.playList(sortedCollection, at)
       }
 
       function clearList() {
@@ -3521,6 +3544,39 @@ window.__ModuleLoader__.load({
         [deleteConfirm],
       )
 
+      // Full collection in display order (search is a filter on top of it).
+      // Double-clicking a song queues this whole playlist, not just the
+      // filtered results, which is what desktop players do.
+      var sortedCollection = useMemo(
+        function () {
+          // "Liked" is ordered by when it was liked (newest first) unless the
+          // user picks another sort, matching NetEase/Spotify liked songs.
+          if (view === 'favorites' && sortBy === 'title' && sortDir === 'asc') {
+            return collectionTracks
+          }
+          var direction = sortDir === 'desc' ? -1 : 1
+          var keyed = collectionTracks.map(function (track, position) {
+            return { track: track, position: position }
+          })
+          keyed.sort(function (left, right) {
+            var a = left.track
+            var b = right.track
+            var aValue = sortValueOf(a, sortBy)
+            var bValue = sortValueOf(b, sortBy)
+            var compared =
+              typeof aValue === 'number' && typeof bValue === 'number'
+                ? aValue - bValue
+                : String(aValue).localeCompare(String(bValue), LANG)
+            if (compared === 0) compared = left.position - right.position
+            return compared * direction
+          })
+          return keyed.map(function (entry) {
+            return entry.track
+          })
+        },
+        [collectionTracks, sortBy, sortDir, view],
+      )
+
       var visible = useMemo(
         function () {
           var needles = query
@@ -3528,8 +3584,8 @@ window.__ModuleLoader__.load({
             .toLowerCase()
             .split(/\s+/)
             .filter(Boolean)
-          var list = collectionTracks.filter(function (track) {
-            if (needles.length === 0) return true
+          if (needles.length === 0) return sortedCollection
+          return sortedCollection.filter(function (track) {
             // Search across metadata, folder/path and pinyin (full + initials),
             // the way desktop players let you type "zhoujielun" / "zjl".
             var haystack = [
@@ -3550,32 +3606,8 @@ window.__ModuleLoader__.load({
               return haystack.indexOf(needle) >= 0
             })
           })
-          // "Liked" is ordered by when it was liked (newest first) unless the
-          // user picks another sort, matching NetEase/Spotify liked songs.
-          if (view === 'favorites' && sortBy === 'title' && sortDir === 'asc') {
-            return list
-          }
-          var direction = sortDir === 'desc' ? -1 : 1
-          var keyed = list.map(function (track, position) {
-            return { track: track, position: position }
-          })
-          keyed.sort(function (left, right) {
-            var a = left.track
-            var b = right.track
-            var aValue = sortValueOf(a, sortBy)
-            var bValue = sortValueOf(b, sortBy)
-            var compared =
-              typeof aValue === 'number' && typeof bValue === 'number'
-                ? aValue - bValue
-                : String(aValue).localeCompare(String(bValue), LANG)
-            if (compared === 0) compared = left.position - right.position
-            return compared * direction
-          })
-          return keyed.map(function (entry) {
-            return entry.track
-          })
         },
-        [collectionTracks, query, sortBy, sortDir, view],
+        [sortedCollection, query],
       )
 
       var selectedSet = useMemo(function () {
@@ -4512,7 +4544,7 @@ window.__ModuleLoader__.load({
               type: 'button',
               className: 'mu-chip',
               onClick: function () {
-                if (visible.length > 0) player.playList(visible, 0)
+                if (sortedCollection.length > 0) player.playList(sortedCollection, 0)
               },
             },
             icon('play', 13),
@@ -4796,19 +4828,6 @@ window.__ModuleLoader__.load({
                 { className: 'mu-pop-head' },
                 h('span', null, t('page.queue')),
                 h('span', { className: 'mu-queue-mode' }, loopLabel()),
-                snap.queue.length > 0
-                  ? h(
-                      'button',
-                      {
-                        type: 'button',
-                        className: 'mu-chip mu-chip-sm',
-                        onClick: function () {
-                          player.clearQueue()
-                        },
-                      },
-                      t('page.clearQueue'),
-                    )
-                  : null,
                 h(
                   'button',
                   {
@@ -4826,20 +4845,23 @@ window.__ModuleLoader__.load({
                 { className: 'mu-pop-body' },
                 snap.queue.length === 0
                   ? h('div', { className: 'mu-state-sub' }, t('page.queueEmpty'))
-                  : snap.queue.map(function (track, position) {
+                  : queueView.map(function (entry, position) {
+                      var track = entry.track
+                      var originalIndex = entry.originalIndex
+                      var visibleCurrent = originalIndex === snap.index
                       return h(
                         'div',
                         {
                           key: position + ':' + track.path,
-                          className: 'mu-queue-row' + (position === snap.index ? ' is-current' : ''),
+                          className: 'mu-queue-row' + (visibleCurrent ? ' is-current' : ''),
                           onClick: function () {
-                            player.select(snap.queue, position)
+                            player.select(snap.queue, originalIndex)
                           },
                         },
                         h(
                           'span',
                           { className: 'mu-queue-index' },
-                          position === snap.index && snap.playing ? '▶' : String(position + 1),
+                          visibleCurrent && snap.playing ? '▶' : String(position + 1),
                         ),
                         h('span', { className: 'mu-ellipsis' }, track.title),
                         h('span', { className: 'mu-queue-artist mu-ellipsis' }, track.artist || ''),
@@ -4852,10 +4874,10 @@ window.__ModuleLoader__.load({
                               type: 'button',
                               className: 'mu-queue-btn',
                               title: t('page.moveUp'),
-                              disabled: position === 0,
+                              disabled: originalIndex === 0,
                               onClick: function (event) {
                                 event.stopPropagation()
-                                player.moveQueue(position, position - 1)
+                                player.moveQueue(originalIndex, originalIndex - 1)
                               },
                             },
                             '↑',
@@ -4866,10 +4888,10 @@ window.__ModuleLoader__.load({
                               type: 'button',
                               className: 'mu-queue-btn',
                               title: t('page.moveDown'),
-                              disabled: position === snap.queue.length - 1,
+                              disabled: originalIndex === snap.queue.length - 1,
                               onClick: function (event) {
                                 event.stopPropagation()
-                                player.moveQueue(position, position + 1)
+                                player.moveQueue(originalIndex, originalIndex + 1)
                               },
                             },
                             '↓',
@@ -4882,7 +4904,7 @@ window.__ModuleLoader__.load({
                               title: t('page.removeTrack'),
                               onClick: function (event) {
                                 event.stopPropagation()
-                                player.removeQueueAt(position)
+                                player.removeQueueAt(originalIndex)
                               },
                             },
                             '×',
@@ -5142,10 +5164,10 @@ window.__ModuleLoader__.load({
       '.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-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-2,var(--dsw-alias-bg-layer-1,#1b1b1e));box-shadow:var(--dsw-elevation-panel,0 16px 40px rgba(0,0,0,.5))}',
+      '.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))}',
       '.mu-prefs-tab{flex:1;height:28px;border:0;border-radius:var(--dsw-radius-sm,8px);background:transparent;color:var(--dsw-alias-label-secondary,#a1a1aa);font-size:12px;cursor:pointer}',
-      '.mu-prefs-tab.is-on{background:var(--dsw-alias-bg-overlay,#202024);color:var(--dsw-alias-label-primary,#f4f4f5);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.35)}',
+      '.mu-prefs-tab.is-on{background:var(--dsw-alias-bg-layer-2,#2a2a2e);color:var(--dsw-alias-label-primary,#f4f4f5);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.35)}',
       '.mu-prefs-body{display:flex;flex-direction:column}',
       '.mu-prefs-body .mu-set-item:last-child{border-bottom:0;padding-bottom:0}',
       '.mu-prefs-hint{margin:0 0 8px;font-size:12px;color:var(--dsw-alias-label-tertiary,#8a8a93)}',
@@ -5214,7 +5236,7 @@ window.__ModuleLoader__.load({
       '.mu-spinner{width:20px;height:20px;border-radius:50%;border:2px solid var(--dsw-alias-border-l2,rgba(255,255,255,.18));border-top-color:var(--dsw-alias-brand-primary,#f4f4f5);animation:mu-spin .8s linear infinite}',
       '@keyframes mu-spin{to{transform:rotate(360deg)}}',
       '.mu-warn{padding:4px 24px 8px;font-size:12px;color:var(--dsw-alias-state-warn-label,#e0a030)}',
-      '.mu-menu{position:absolute;top:56px;right:24px;z-index:50;min-width:160px;max-height:70vh;overflow-y:auto;padding:4px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:var(--dsw-radius-md,8px);background:var(--dsw-alias-bg-overlay,#202024);box-shadow:var(--dsw-elevation-prominent,0 12px 32px rgba(0,0,0,.4))}',
+      '.mu-menu{position:absolute;top:56px;right:24px;z-index:50;min-width:160px;max-height:70vh;overflow-y:auto;padding:4px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:var(--dsw-radius-md,8px);background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 12px 32px rgba(0,0,0,.4))}',
       '.mu-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:4px 7px;border:0;border-radius:var(--dsw-radius-md,8px);background:transparent;color:var(--dsw-alias-label-primary,#e4e4e7);font-size:12px;text-align:left;cursor:pointer}',
       '.mu-menu-item:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.07))}',
       '.mu-menu-item.is-on{color:var(--dsw-alias-brand-primary,#f4f4f5)}',
@@ -5246,7 +5268,7 @@ window.__ModuleLoader__.load({
       '.mu-play-btn:hover{background:var(--dsw-alias-button-primary-hover,#e4e4e7)}',
       '.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-overlay,#202024);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-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-pop-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;font-size:12px;font-weight:600}',
       '.mu-pop-body{overflow-y:auto;padding:0 6px 8px}',
       '.mu-queue-row{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,70px) auto;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--dsw-radius-sm,6px);font-size:12px;cursor:pointer}',
@@ -5258,7 +5280,7 @@ window.__ModuleLoader__.load({
       '.mu-fav.is-on{color:var(--dsw-alias-brand-primary,#f4f4f5)}',
       '.mu-fav.is-on svg{fill:currentColor}',
       '.mu-chip-sm{height:24px;padding:0 8px;font-size:11px}',
-      '.mu-search-history{position:absolute;top:34px;right:0;z-index:20;display:flex;flex-wrap:wrap;gap:4px;max-width:320px;padding:6px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.12));border-radius:8px;background:var(--dsw-alias-bg-overlay,#202024);box-shadow:var(--dsw-elevation-prominent,0 8px 24px rgba(0,0,0,.35))}',
+      '.mu-search-history{position:absolute;top:34px;right:0;z-index:20;display:flex;flex-wrap:wrap;gap:4px;max-width:320px;padding:6px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.12));border-radius:8px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 8px 24px rgba(0,0,0,.35))}',
       '.mu-queue-row:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06))}',
       '.mu-queue-row.is-current{color:var(--dsw-alias-brand-primary,#f4f4f5);background:var(--dsw-alias-interactive-bg-active,rgba(255,255,255,.08))}',
       '.mu-queue-index{font-size:12px;color:var(--dsw-alias-label-tertiary,#a1a1aa);font-variant-numeric:tabular-nums}',
@@ -5325,7 +5347,7 @@ window.__ModuleLoader__.load({
       '.mu-set-note{font-size:12px;color:var(--dsw-alias-label-tertiary,#73737d);margin:6px 0 0}',
       '.mu-scrim{position:absolute;inset:0 0 80px 0;z-index:35}',
       '.mu-set{display:flex;flex-direction:column;gap:10px;max-width:640px;user-select:none}',
-      '.mu-mini{position:fixed;right:20px;bottom:84px;z-index:60;display:flex;align-items:center;gap:10px;width:260px;padding:8px 10px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.12));border-radius:12px;background:var(--dsw-alias-bg-overlay,#202024);box-shadow:var(--dsw-elevation-prominent,0 12px 32px rgba(0,0,0,.45));cursor:grab;touch-action:none;user-select:none}',
+      '.mu-mini{position:fixed;right:20px;bottom:84px;z-index:60;display:flex;align-items:center;gap:10px;width:260px;padding:8px 10px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.12));border-radius:12px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 12px 32px rgba(0,0,0,.45));cursor:grab;touch-action:none;user-select:none}',
       '.mu-mini.is-corner{right:20px;bottom:84px}',
       '.mu-mini-info{flex:1;min-width:0}',
       '.mu-mini-title{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
@@ -5383,7 +5405,7 @@ window.__ModuleLoader__.load({
       '.mu-np.is-blur .mu-np-line:not(.is-active){opacity:.42;filter:blur(1px)}',
       '.mu-np-head-actions{margin-left:auto;display:flex;align-items:center;gap:6px}',
       '.mu-trans-toggle{width:auto;padding:0 8px;font-size:12px;font-weight:600;line-height:1}',
-      '.mu-np-settings{position:absolute;top:52px;right:20px;z-index:6;width:320px;max-width:calc(100% - 40px);padding:14px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:10px;background:var(--dsw-alias-bg-overlay,#202024);box-shadow:var(--dsw-elevation-prominent,0 12px 32px rgba(0,0,0,.45))}',
+      '.mu-np-settings{position:absolute;top:52px;right:20px;z-index:6;width:320px;max-width:calc(100% - 40px);padding:14px;border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.1));border-radius:10px;background:var(--dsw-alias-bg-layer-1,#1a1a1e);box-shadow:var(--dsw-elevation-prominent,0 12px 32px rgba(0,0,0,.45))}',
       '.mu-np-offset-actions{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}',
       '.mu-np-setting-hint{font-size:11px;color:var(--dsw-alias-label-tertiary,#8a8a93);margin-top:6px;line-height:1.5}',
       '.mu-np-setting-error{font-size:11px;color:var(--dsw-alias-state-error,#e5484d);margin-top:4px;word-break:break-word}',

package/package.json

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