dsh-music-panel 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.3.2
+
+### 变更
+
+- 播放顺序合并为三种互斥模式：顺序播放（播完停止）、随机播放（随机循环）、单曲循环；底栏、播放页、主面板 chips 三处按钮与图标同步
+- 播放队列标题显示当前播放模式
+- 旧状态归一化：升级后 `loop=all + order=list` 视为顺序播放
+
+## 0.3.1
+
+### 修复
+
+- 修复 0.3.0 注入样式表中 `.mu-search-history` 规则缺少结尾 `}`，导致该规则之后的大量插件样式被浏览器丢弃、界面错乱的问题。
+- 新增样式语法测试（`test/style.test.mjs`）：CI 会拦截括号/引号不平衡的 CSS，避免同类问题再次进包。
+
 ## 0.3.0
 
 ### 功能

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) {
@@ -4445,7 +4495,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,18 +4510,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',
             {
@@ -4663,7 +4701,7 @@ window.__ModuleLoader__.load({
                   title: loopLabel(),
                   onClick: cycleLoop,
                 },
-                icon(snap.loop === 'one' ? 'repeatOne' : 'repeat', 17),
+                icon(playModeIcon(playModeOf(snap)), 17),
               ),
               h(
                 'button',
@@ -4759,6 +4797,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',
@@ -5204,6 +5243,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)}',
@@ -5211,7 +5251,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-overlay,#202024);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}',
@@ -5506,34 +5546,39 @@ window.__ModuleLoader__.load({
         // the first tab holds the lock, later tabs queue for it and take over
         // when the leader closes (the same pattern web-player PWAs use).
         ctx.effect(function () {
-          if (
-            typeof navigator === 'undefined' ||
-            navigator.locks === undefined ||
-            typeof navigator.locks.request !== 'function'
-          ) {
-            return
-          }
-          if (window.__dshMusicLeaderBound === true) return
-          window.__dshMusicLeaderBound = true
-          var LOCK = 'dsh-music-panel.player'
-          function hold() {
-            // The lock is released when the page unloads.
-            return new Promise(function () {})
-          }
-          function becomeLeader() {
+          try {
+            if (
+              typeof navigator === 'undefined' ||
+              navigator.locks === undefined ||
+              typeof navigator.locks.request !== 'function'
+            ) {
+              return
+            }
+            if (window.__dshMusicLeaderBound === true) return
+            window.__dshMusicLeaderBound = true
+            var LOCK = 'dsh-music-panel.player'
+            function hold() {
+              // The lock is released when the page unloads.
+              return new Promise(function () {})
+            }
+            function becomeLeader() {
+              player.setLeader(true)
+              return hold()
+            }
+            navigator.locks
+              .request(LOCK, { mode: 'exclusive', ifAvailable: true }, function (lock) {
+                if (lock !== null && lock !== undefined) return becomeLeader()
+                // Another tab is playing: wait in the queue, then take over.
+                player.setLeader(false)
+                return navigator.locks.request(LOCK, becomeLeader)
+              })
+              .catch(function () {
+                player.setLeader(true)
+              })
+          } catch (error) {
+            // Cross-tab coordination must never break the plugin's UI.
             player.setLeader(true)
-            return hold()
           }
-          navigator.locks
-            .request(LOCK, { mode: 'exclusive', ifAvailable: true }, function (lock) {
-              if (lock !== null && lock !== undefined) return becomeLeader()
-              // Another tab is playing: wait in the queue, then take over.
-              player.setLeader(false)
-              return navigator.locks.request(LOCK, becomeLeader)
-            })
-            .catch(function () {
-              player.setLeader(true)
-            })
         })
 
         function mount(name, registration, component) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-music-panel",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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",
@@ -25,7 +25,7 @@
     "audio"
   ],
   "scripts": {
-    "test": "node test/config.test.mjs && node test/meta.test.mjs && node test/library.test.mjs && node test/routes.test.mjs && node test/lyrics.test.mjs && node test/lyrics-write.test.mjs && node test/playlists.test.mjs && node test/favorites.test.mjs && node test/stats.test.mjs && node test/playback.test.mjs && node test/client.smoke.test.mjs",
+    "test": "node test/config.test.mjs && node test/meta.test.mjs && node test/library.test.mjs && node test/routes.test.mjs && node test/lyrics.test.mjs && node test/lyrics-write.test.mjs && node test/playlists.test.mjs && node test/favorites.test.mjs && node test/stats.test.mjs && node test/playback.test.mjs && node test/style.test.mjs && node test/client.smoke.test.mjs",
     "check": "node --check index.js && node --check client.js && node --check lib/config.js && node --check lib/settings.js && node --check lib/meta.js && node --check lib/library.js && node --check lib/http.js && node --check lib/lyrics.js && node --check lib/lyrics-write.js && node --check lib/playlists.js && node --check lib/favorites.js && node --check lib/stats.js && node --check lib/playback.js && node --check lib/routes.js",
     "pack:check": "npm pack --dry-run"
   },