From d9e756412c7721e5f44a833f6bd581f4ba4ee7cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Mon, 2 Oct 2023 07:07:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md       |  2 ++
 public/music.js | 53 ++++++++++++++++++-------------------------------
 2 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/README.md b/README.md
index 3899879..3a942ad 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,8 @@ webrtc 实现的 p2p 信道
 - [x] 音乐播放
   - [x] 请求到单个目标防止接收到重复分片数据
     - [x] 主机记录各自曲目列表以供查询
+  - [x] 播放时高亮显示
+  - [x] 合并操作按钮
 - [ ] 集群分发
 - [ ] 下载加速
 - [ ] 即时通讯
diff --git a/public/music.js b/public/music.js
index 9e59cf7..5189fbb 100644
--- a/public/music.js
+++ b/public/music.js
@@ -56,7 +56,11 @@ export default class MusicList {
             ul.music-list > li > button {
                 margin-left: 10px;
                 border: none;
+                border-radius: 1em;
                 cursor: pointer;
+                font-size: .5rem;
+                padding: 0 .5rem;
+                color: #555555;
             }
             ul.music-list > li > button:hover {
                 background-color: #ccc;
@@ -83,31 +87,26 @@ export default class MusicList {
             id: item.id,
             classList: item.arrayBuffer ? ['cache'] : [],
             innerText: `${item.name} - ${bytesToSize(item.size)}`,
+            onclick: event => {
+                event.stopPropagation()
+                if (event.target.dataset.play === 'play') {
+                    event.target.dataset.play = 'stop'
+                    event.target.classList.remove('play')
+                    this.stop()
+                } else {
+                    event.target.dataset.play = 'play'
+                    this.ul.querySelectorAll('li.play').forEach(li => li.classList.remove('play'))
+                    event.target.classList.add('play')
+                    this.play(item)
+                }
+            },
             children: [
                 Button({
-                    innerText: '播放',
-                    onclick: event => {
-                        event.stopPropagation()
-                        if (event.target.dataset.play === 'play') {
-                            event.target.dataset.play = 'stop'
-                            event.target.innerText = '播放'
-                            this.ul.querySelector(`#${item.id}`).classList.remove('play')
-                            this.stop()
-                        } else {
-                            event.target.dataset.play = 'play'
-                            event.target.innerText = '停止'
-                            this.ul.querySelectorAll('li.play').forEach(li => li.classList.remove('play'))
-                            this.ul.querySelector(`#${item.id}`).classList.add('play')
-                            this.play(item)
-                        }
-                    }
-                }),
-                Button({
-                    innerText: item.arrayBuffer ? '移除' : '喜欢',
+                    innerText: item.arrayBuffer ? '移除' : '缓存',
                     onclick: event => {
                         event.stopPropagation()
                         if (item.arrayBuffer) {
-                            event.target.innerText = '喜欢'
+                            event.target.innerText = '缓存'
                             this.unlike(item)
                         } else {
                             event.target.innerText = '移除'
@@ -115,20 +114,6 @@ export default class MusicList {
                             this.like(item)
                         }
                     }
-                }),
-                Button({
-                    innerText: '禁止',
-                    onclick: event => {
-                        event.stopPropagation()
-                        if (event.target.dataset.ban === 'ban') {
-                            event.target.dataset.ban = 'unban'
-                            event.target.innerText = '禁止'
-                        } else {
-                            event.target.dataset.ban = 'ban'
-                            event.target.innerText = '解禁'
-                            this.stop()
-                        }
-                    }
                 })
             ]
         }))