dsh-music-panel 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.3.3
+
+### 变更
+
+- 移除主面板顶部「清空列表」按钮
+- 正在播放行：品牌色高亮、3px 左侧竖条、标题品牌色加粗、播放均衡器动画（暂停时静止），封面遮罩常显暂停/播放图标
+
+## 0.3.2
+
+### 变更
+
+- 播放顺序合并为三种互斥模式：顺序播放（播完停止）、随机播放（随机循环）、单曲循环；底栏、播放页、主面板 chips 三处按钮与图标同步
+- 播放队列标题显示当前播放模式
+- 旧状态归一化：升级后 `loop=all + order=list` 视为顺序播放
+
 ## 0.3.1
 
 ### 修复

package/client.js

@@ -80,6 +80,9 @@ window.__ModuleLoader__.load({
         'page.done': '完成',
         'page.clear': '清空列表',
         'page.loopAll': '列表循环',
+        'page.modeSequence': '顺序播放',
+        'page.modeRandom': '随机播放',
+        'page.modeOne': '单曲循环',
         'page.loopOne': '单曲循环',
         'page.loopNone': '不循环',
         'page.shuffle': '随机播放',
@@ -251,6 +254,9 @@ window.__ModuleLoader__.load({
         'page.done': 'Done',
         'page.clear': 'Clear list',
         'page.loopAll': 'Repeat all',
+        'page.modeSequence': 'Play in order',
+        'page.modeRandom': 'Shuffle',
+        'page.modeOne': 'Repeat one',
         'page.loopOne': 'Repeat one',
         'page.loopNone': 'No repeat',
         'page.shuffle': 'Shuffle',
@@ -996,6 +1002,50 @@ window.__ModuleLoader__.load({
       return order
     }
 
+    // Three playback modes, mapped onto the engine's loop/order pair:
+    //   sequence → in order, stop at the end
+    //   random   → shuffled, looping
+    //   one      → repeat the current track
+    var PLAY_MODES = ['sequence', 'random', 'one']
+
+    function playModeOf(snap) {
+      if (snap.loop === 'one') return 'one'
+      if (snap.order === 'random') return 'random'
+      return 'sequence'
+    }
+
+    function playModeLabel(mode) {
+      return mode === 'one'
+        ? t('page.modeOne')
+        : mode === 'random'
+          ? t('page.modeRandom')
+          : t('page.modeSequence')
+    }
+
+    function playModeIcon(mode) {
+      return mode === 'one' ? 'repeatOne' : mode === 'random' ? 'shuffle' : 'list'
+    }
+
+    function applyPlayMode(mode) {
+      if (mode === 'one') {
+        player.setLoop('one')
+        player.setOrder('list')
+        return
+      }
+      if (mode === 'random') {
+        player.setLoop('all')
+        player.setOrder('random')
+        return
+      }
+      player.setLoop('none')
+      player.setOrder('list')
+    }
+
+    function cyclePlayMode(snap) {
+      var current = playModeOf(snap)
+      applyPlayMode(PLAY_MODES[(PLAY_MODES.indexOf(current) + 1) % PLAY_MODES.length])
+    }
+
     function nextIndexOf(index, order, size, randomOrder) {
       if (size <= 1) return 0
       if (order === 'random') {
@@ -1059,8 +1109,8 @@ window.__ModuleLoader__.load({
         queue: [],
         index: -1,
         playing: false,
-        loop: prefs.loop === 'one' || prefs.loop === 'none' ? prefs.loop : 'all',
-        order: prefs.order === 'random' ? 'random' : 'list',
+        loop: prefs.loop === 'one' ? 'one' : 'none',
+        order: prefs.order === 'random' && prefs.loop !== 'one' ? 'random' : 'list',
         // Volume follows the system mixer: the plugin no longer exposes its own.
         volume: 1,
         muted: false,
@@ -1221,8 +1271,8 @@ window.__ModuleLoader__.load({
         state = Object.assign({}, state, {
           queue: queue,
           index: index,
-          loop: saved.loop === 'one' || saved.loop === 'none' ? saved.loop : 'all',
-          order: saved.order === 'random' ? 'random' : 'list',
+          loop: saved.loop === 'one' ? 'one' : saved.order === 'random' ? 'all' : 'none',
+          order: saved.order === 'random' && saved.loop !== 'one' ? 'random' : 'list',
           currentTime: saved.positionSec > 0 ? saved.positionSec : 0,
           duration: saved.durationSec > 0 ? saved.durationSec : 0,
           playing: false,
@@ -2306,11 +2356,11 @@ window.__ModuleLoader__.load({
       )
 
       function cycleLoop() {
-        player.setLoop(snap.loop === 'all' ? 'one' : snap.loop === 'one' ? 'none' : 'all')
+        cyclePlayMode(snap)
       }
 
       function loopLabel() {
-        return snap.loop === 'one' ? t('page.loopOne') : snap.loop === 'none' ? t('page.loopNone') : t('page.loopAll')
+        return playModeLabel(playModeOf(snap))
       }
 
       return h(
@@ -2623,7 +2673,7 @@ window.__ModuleLoader__.load({
               h(
                 'button',
                 { type: 'button', className: 'mu-icon-btn', title: loopLabel(), onClick: cycleLoop },
-                icon(snap.loop === 'one' ? 'repeatOne' : 'repeat', 18),
+                icon(playModeIcon(playModeOf(snap)), 18),
               ),
               h(
                 'button',
@@ -3324,11 +3374,11 @@ window.__ModuleLoader__.load({
       )
 
       function cycleLoop() {
-        player.setLoop(snap.loop === 'all' ? 'one' : snap.loop === 'one' ? 'none' : 'all')
+        cyclePlayMode(snap)
       }
 
       function loopLabel() {
-        return snap.loop === 'one' ? t('page.loopOne') : snap.loop === 'none' ? t('page.loopNone') : t('page.loopAll')
+        return playModeLabel(playModeOf(snap))
       }
 
       function toggleSelect(track) {
@@ -3591,8 +3641,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',
@@ -4445,7 +4503,7 @@ window.__ModuleLoader__.load({
           h(
             'button',
             { type: 'button', className: 'mu-chip', title: loopLabel(), onClick: cycleLoop },
-            icon(snap.loop === 'one' ? 'repeatOne' : 'repeat', 15),
+            icon(playModeIcon(playModeOf(snap)), 15),
             h('span', null, loopLabel()),
           ),
           h(
@@ -4460,28 +4518,6 @@ window.__ModuleLoader__.load({
             icon('play', 13),
             h('span', null, t('page.playAll')),
           ),
-          h(
-            'button',
-            {
-              type: 'button',
-              className: 'mu-chip mu-chip-round' + (snap.order === 'random' ? ' is-on' : ''),
-              title: t('page.shuffle'),
-              onClick: function () {
-                player.setOrder(snap.order === 'random' ? 'list' : 'random')
-              },
-            },
-            icon('shuffle', 15),
-          ),
-          h(
-            'button',
-            {
-              type: 'button',
-              className: 'mu-chip mu-chip-round',
-              title: t('page.clear'),
-              onClick: clearList,
-            },
-            icon('x', 15),
-          ),
           selected.length > 0
             ? h(
                 'span',
@@ -4663,7 +4699,7 @@ window.__ModuleLoader__.load({
                   title: loopLabel(),
                   onClick: cycleLoop,
                 },
-                icon(snap.loop === 'one' ? 'repeatOne' : 'repeat', 17),
+                icon(playModeIcon(playModeOf(snap)), 17),
               ),
               h(
                 'button',
@@ -4759,6 +4795,7 @@ window.__ModuleLoader__.load({
                 'div',
                 { className: 'mu-pop-head' },
                 h('span', null, t('page.queue')),
+                h('span', { className: 'mu-queue-mode' }, loopLabel()),
                 snap.queue.length > 0
                   ? h(
                       'button',
@@ -5141,12 +5178,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}',
@@ -5156,7 +5197,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}',
@@ -5204,6 +5250,7 @@ window.__ModuleLoader__.load({
       '.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}',
+      '.mu-queue-mode{font-size:11px;color:var(--dsw-alias-label-tertiary,#8a8a93);padding:1px 6px;border-radius:999px;background:var(--dsw-alias-bg-layer-3,rgba(255,255,255,.06));white-space:nowrap}',
       '.mu-queue-actions{display:inline-flex;align-items:center;gap:2px;justify-self:end}',
       '.mu-queue-btn{width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--dsw-alias-label-tertiary,#8a8a93);font-size:12px;line-height:20px;cursor:pointer}',
       '.mu-queue-btn:hover:not(:disabled){background:var(--dsw-alias-interactive-bg-hover,rgba(255,255,255,.06));color:var(--dsw-alias-label-primary,#f4f4f5)}',

package/package.json

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