From af80bb2d0bfea4e033f7d925ffec417428c2e22e Mon Sep 17 00:00:00 2001
From: XiaoZhuo <zhu0@vip.qq.com>
Date: Sun, 22 Oct 2023 12:17:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=99=A8=E5=8F=AF=E8=87=AA?=
 =?UTF-8?q?=E7=94=B1=E6=8B=96=E5=8A=A8=E6=89=A9=E5=B1=95=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/music.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/music.js b/src/music.js
index 92d32b0..6a60278 100644
--- a/src/music.js
+++ b/src/music.js
@@ -8,6 +8,7 @@ export default class MusicList {
         this.audio = new Audio()
         this.audio.autoplay = true
         this.audio.controls = true
+        this.audio.style.margin = '0 auto'
         this.audio.style.flexShrink = 0 // 防止在flex中被挤压变形
         this.audio.addEventListener('play', () => {
             this.event.onplay(this.playing)
@@ -43,18 +44,29 @@ export default class MusicList {
                 position: 'fixed', top: '5rem', right: '1rem',
                 backgroundColor: '#fff', padding: '.5rem',
                 borderRadius: '1rem', cursor: 'pointer',
-                maxWidth: '20rem', maxHeight: '70vh',
+                minWidth: '20rem', minHeight: '13rem',
+                maxWidth: '80vw', maxHeight: '80vh',
                 overflow: 'hidden', boxShadow: '0 0 1rem #eee',
                 display: 'flex', flexDirection: 'column',
                 fontSize: '12px', userSelect: 'none',
-                zIndex: '10',
+                zIndex: '10', resize: 'auto',
             },
-            onclick: event => {
+            onclick() {
                 this.ul.classList.toggle('disable')
             },
-            onmousedown({ srcElement: dom, clientX, clientY }) {
+            onmousedown({ srcElement: dom, clientX, clientY, offsetX, offsetY }) {
                 if (dom !== element) return
-                const [w, h] = [innerWidth - dom.offsetWidth, innerWidth - dom.offsetHeight]
+                if (offsetX > dom.clientWidth - 20 && offsetY > dom.clientHeight - 20) {
+                    document.onmouseup = () => {
+                        const [w, h] = [innerWidth - dom.clientWidth, innerHeight - dom.clientHeight]
+                        if (dom.offsetLeft > w) dom.style.width = innerWidth - dom.offsetLeft + 'px'
+                        if (dom.offsetTop > h) dom.style.height = innerHeight - dom.offsetTop + 'px'
+                        document.onmouseup = null
+                        localStorage.setItem('playerWH', dom.style.width + ',' + dom.style.height)
+                    }
+                    return
+                }
+                const [w, h] = [innerWidth - dom.clientWidth, innerHeight - dom.clientHeight]
                 document.onmouseup = () => {
                     if (dom.offsetLeft < 0) dom.style.left = '0px'
                     if (dom.offsetTop < 0) dom.style.top = '0px'