使用单独的状态标识音乐是否缓存

README.md

@@ -12,6 +12,7 @@ webrtc 实现的 p2p 信道
   - [x] 稳定通信
   - [x] 分片请求时立即播放
   - [ ] 上锁防止连续重复加载同一个造成分片混乱
+  - [x] 使用单独的状态标识音乐是否缓存
 - [ ] 集群分发
 - [ ] 下载加速
 - [ ] 即时通讯

public/index.html

@@ -29,10 +29,12 @@
             return tmp.buffer
         }
 
-        // 读取本地音乐列表(本地缓存)
+        // 读取本地音乐列表并标识为缓存状态(本地缓存)
         const database = new IndexedDB('musicDatabase', 1, 'musicObjectStore')
         await database.open()
-        const list = await database.getAll()
+        const list = (await database.getAll()).map(item => {
+            return { save: true, ...item }
+        })
 
         // 读取本地用户名(本地缓存)
         const name = localStorage.getItem('username') ?? '游客'
@@ -70,7 +72,7 @@
             onlike: (item, list) => {
                 console.log('喜欢音乐', item.name)
                 if (item.arrayBuffer) {
-                    database.add(item)
+                    database.add({ save:true, ...item })
                     clientList.send('base', JSON.stringify({
                         type: 'set_music_list',
                         list: list.map(({ id, name, size, type }) => ({ id, name, size, type }))

public/music.js

@@ -110,10 +110,10 @@ export default class MusicList {
                     }
                 }),
                 Button({
-                    textContent: item.arrayBuffer ? '移除' : '缓存',
+                    textContent: item.save ? '移除' : '缓存',
                     onclick: event => {
                         event.stopPropagation()
-                        if (item.arrayBuffer) {
+                        if (item.save) {
                             event.target.textContent = '缓存'
                             this.unlike(item)
                         } else {
@@ -137,7 +137,7 @@ export default class MusicList {
         await this.event.onload(item)
     }
     async play(item) {
-        if (!item.arrayBuffer) {
+        if (!item.save) {
             // 边加载边播放
             const mediaSource = new MediaSource()
             this.audio.src = URL.createObjectURL(mediaSource)