dsh-music-panel 0.3.2 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.3.4
+
+### 变更
+
+- 随机播放时，播放队列（播放列表）按实际播放顺序（乱序）展示，从上往下播放；切回顺序播放恢复原顺序
+- 切换到随机播放时重新洗牌
+- 双击歌曲 / 播放全部时，入队范围是当前歌单的完整曲目（忽略搜索过滤），从双击的歌曲开始
+
+## 0.3.3
+
+### 变更
+
+- 移除主面板顶部「清空列表」按钮
+- 正在播放行：品牌色高亮、3px 左侧竖条、标题品牌色加粗、播放均衡器动画（暂停时静止），封面遮罩常显暂停/播放图标
+
 ## 0.3.2
 
 ### 变更

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 () {
@@ -3641,8 +3673,16 @@ window.__ModuleLoader__.load({
             h(
               'div',
               { className: 'mu-row-title' },
+              isCurrent
+                ? h(
+                    'span',
+                    { className: 'mu-eq' + (snap.playing ? ' is-playing' : ''), 'aria-hidden': 'true' },
+                    h('i', null),
+                    h('i', null),
+                    h('i', null),
+                  )
+                : null,
               track.title,
-              isCurrent ? h('span', { className: 'mu-playing-dot' }) : null,
             ),
             h(
               'div',
@@ -4504,22 +4544,12 @@ 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),
             h('span', null, t('page.playAll')),
           ),
-          h(
-            'button',
-            {
-              type: 'button',
-              className: 'mu-chip mu-chip-round',
-              title: t('page.clear'),
-              onClick: clearList,
-            },
-            icon('x', 15),
-          ),
           selected.length > 0
             ? h(
                 'span',
@@ -4828,20 +4858,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 || ''),
@@ -4854,10 +4887,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)
                               },
                             },
                             '↑',
@@ -4868,10 +4901,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)
                               },
                             },
                             '↓',
@@ -4884,7 +4917,7 @@ window.__ModuleLoader__.load({
                               title: t('page.removeTrack'),
                               onClick: function (event) {
                                 event.stopPropagation()
-                                player.removeQueueAt(position)
+                                player.removeQueueAt(originalIndex)
                               },
                             },
                             '×',
@@ -5180,12 +5213,16 @@ 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,.1);background:color-mix(in srgb,var(--dsw-alias-brand-primary,#f4f4f5) 10%,transparent);box-shadow:inset 2px 0 0 var(--dsw-alias-brand-primary,#f4f4f5)}',
-      '.mu-row.is-current .mu-row-title{font-weight:600}',
+      '.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 .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-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}',
@@ -5195,7 +5232,12 @@ window.__ModuleLoader__.load({
       '.mu-cover img{width:100%;height:100%;object-fit:cover;display:block}',
       '.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-playing-dot{width:6px;height:6px;border-radius:50%;background:var(--dsw-alias-brand-primary,#f4f4f5);flex:none}',
+      '.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.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}',
+      '@keyframes mu-eq-bounce{0%,100%{height:4px}50%{height:12px}}',
       '.mu-row-sub{display:flex;align-items:center;gap:6px;margin-top:1px;font-size:12px;color:var(--dsw-alias-label-secondary,#a1a1aa);min-width:0}',
       '.mu-cd{flex:none;padding:0 4px;border-radius:var(--dsw-radius-xs,4px);border:.5px solid var(--dsw-alias-border-l2,rgba(255,255,255,.2));color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:9px;font-weight:600;line-height:13px;letter-spacing:.4px}',
       '.mu-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',

package/package.json

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