收起音乐列表

src/music.js

@@ -80,15 +80,30 @@ export default class MusicList {
             textContent: '',
         })
 
+        const upload = UploadMusic({
+            style: { height: '5rem', margin: '1rem 0' },
+            onchange: files => {
+                for (const file of files) {
+                    const id = 'music' + Date.now()
+                    const { name, size, type } = file
+                    const reader = new FileReader()
+                    reader.onload = async event => {
+                        const arrayBuffer = event.target.result
+                        this.add({ id, name, size, type, arrayBuffer })  // 添加到列表(默认并不存储)
+                        this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
+                    }
+                    reader.readAsArrayBuffer(file)
+                }
+            }
+        })
+
         // 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间
         const element = createElement({
             style: {
                 position: 'fixed', top: '5rem', right: '1rem',
                 backgroundColor: '#fff', padding: '.5rem',
                 borderRadius: '1rem', cursor: 'pointer',
-                width: '20rem', Height: '70vh',
-                minWidth: '20rem', minHeight: '13rem',
-                maxWidth: '80vw', maxHeight: '80vh',
+                width: '20rem', Height: '70vh', minWidth: '20rem', maxWidth: '80vw', maxHeight: '80vh',
                 overflow: 'hidden', boxShadow: '0 0 1rem #eee',
                 display: 'flex', flexDirection: 'column',
                 fontSize: '12px', userSelect: 'none',
@@ -131,6 +146,18 @@ export default class MusicList {
                         justifyContent: 'space-between', flexShrink: 0,
                         marginBottom: '.5rem',
                     },
+                    onclick: event => {
+                        // 点击隐藏列表和播放器
+                        if (this.ul.style.display === 'none') {
+                            this.ul.style.display = 'block'
+                            this.audio.style.display = 'block'
+                            upload.style.display = 'block'
+                        } else {
+                            this.ul.style.display = 'none'
+                            this.audio.style.display = 'none'
+                            upload.style.display = 'none'
+                        }
+                    },
                     children: [
                         this.封面,
                         createElement({
@@ -182,22 +209,7 @@ export default class MusicList {
                 }),
                 this.audio,
                 this.ul,
-                UploadMusic({
-                    style: { height: '5rem', margin: '1rem 0' },
-                    onchange: files => {
-                        for (const file of files) {
-                            const id = 'music' + Date.now()
-                            const { name, size, type } = file
-                            const reader = new FileReader()
-                            reader.onload = async event => {
-                                const arrayBuffer = event.target.result
-                                this.add({ id, name, size, type, arrayBuffer })  // 添加到列表(默认并不存储)
-                                this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
-                            }
-                            reader.readAsArrayBuffer(file)
-                        }
-                    }
-                })
+                upload,
             ]
         })
         document.body.appendChild(element)