From 75888cc69d092cd9eab932fc78e2ed039a2a4775 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Sun, 22 Oct 2023 02:07:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=8E=E6=95=B0=E6=8D=AE=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=B0=81=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md      | 18 ++++++++++++++++++
 package.json   |  9 ++++++++-
 src/main.js    | 20 ++++++++++++++++++--
 src/music.js   |  7 +++++--
 src/weigets.js |  4 ++++
 5 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 451394b..733fd8f 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,7 @@ export default class 插件名 {
 - [ ] 对方撤回的并不删除, 但不再分发
 - [ ] 阅后既焚开关, 全频道不保留也不分发记录
 - [ ] mark 标记的记录保留, 其它自动丢弃
+- [ ] 非活跃状态下提示音
 
 音乐频道
 - [x] 每个设备存储自己的列表
@@ -99,6 +100,23 @@ export default class 插件名 {
 - https://www.npmjs.com/package/vite
 
 备用代码片段
+
+```javascript
+//import jsmediatags from 'jsmediatags/dist/jsmediatags.min.js'
+//list.forEach(async item => {
+//  const blob = new Blob([item.arrayBuffer], { type: item.type })
+//  jsmediatags.read(blob, {
+//    onSuccess: function (tag) {
+//      console.log(tag)
+//      console.log(tag.tags.title)
+//    },
+//    onError: function (error) {
+//      console.log(error);
+//    }
+//  })
+//})
+```
+
 ```html
     <script type="module">
 
diff --git a/package.json b/package.json
index 097d044..f71aa86 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,16 @@
     "windicss": "^3.5.6"
   },
   "dependencies": {
+    "buffer": "^6.0.3",
     "express": "^4.18.2",
     "express-ws": "^5.0.2",
+    "iconv-lite": "^0.6.3",
+    "iconv-lite-umd": "^0.6.10",
     "idb-keyval": "^6.2.1",
-    "node-turn": "^0.0.6"
+    "jsmediatags": "^3.9.7",
+    "music-metadata": "^8.1.4",
+    "music-metadata-browser": "^2.5.10",
+    "node-turn": "^0.0.6",
+    "process": "^0.11.10"
   }
 }
diff --git a/src/main.js b/src/main.js
index 3631f5c..10d20e4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,12 @@ import MusicList from './music.js'
 import ClientList from './client.js'
 import Chat from './chat.js'
 
+import { Buffer } from "buffer"
+import process from "process"
+window.Buffer = Buffer
+window.process = process
+import { parseBlob } from 'music-metadata-browser'
+
 // 缓冲分片发送
 const CHUNK_SIZE = 1024 * 64  // 默认每个块的大小为128KB
 const THRESHOLD = 1024 * 1024 // 默认缓冲区的阈值为1MB
@@ -23,9 +29,19 @@ const database = new IndexedDB('musicDatabase', 1)
 await database.store('musicObjectStore') // 音乐(为什么会用这么丑的格式呢)
 
 // 读取本地音乐列表并标识为缓存状态(本地缓存)
-const list = (await database.getAll('musicObjectStore')).map(item => {
+const list = await Promise.all((await database.getAll('musicObjectStore')).map(async item => {
+  if (!item.picture) {
+    const blob = new Blob([item.arrayBuffer], { type: item.type })
+    const metadata = await parseBlob(blob)
+    const picture = metadata.common.picture?.[0]
+    if (picture) {
+      const format = picture.format
+      const data = picture.data
+      item.picture = `data:${format};base64,${Buffer.from(data).toString('base64')}`
+    }
+  }
   return { save: true, ...item }
-})
+}))
 
 // 读取本地用户名(本地缓存)
 const name = localStorage.getItem('username') ?? '匿'
diff --git a/src/music.js b/src/music.js
index 819c306..640e3b0 100644
--- a/src/music.js
+++ b/src/music.js
@@ -1,4 +1,4 @@
-import { Span, Button, List, ListItem, UploadMusic, createElement } from './weigets.js'
+import { Img, Span, Button, List, ListItem, UploadMusic, createElement } from './weigets.js'
 
 export default class MusicList {
     constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
@@ -21,7 +21,6 @@ export default class MusicList {
         //this.audio.addEventListener('error', event => {
         //    console.error('音乐播放器错误:', event)
         //})
-
         this.ul = List({
             classList: ['music-list'],
             style: {
@@ -152,6 +151,10 @@ export default class MusicList {
             id: item.id,
             classList: item.arrayBuffer ? ['cache'] : [],
             children: [
+                ...(item.picture ? [Img({
+                    src: item.picture,
+                    style: { width: '2em', height: '2em', borderRadius: '.25em' }
+                })] : []),
                 Span({
                     title: `${item.name} - ${bytesToSize(item.size)} - ${item.type}`,
                     textContent: `${item.name} - ${bytesToSize(item.size)}`,
diff --git a/src/weigets.js b/src/weigets.js
index 1aa355c..5b05a17 100644
--- a/src/weigets.js
+++ b/src/weigets.js
@@ -37,6 +37,10 @@ export function Button(options) {
     }, 'button')
 }
 
+export function Img(options) {
+    return createElement(options, 'img')
+}
+
 export function Input(options) {
     return createElement(options, 'input')
 }