Add maxWidth and ellipsis to music list item name

src/music.js

@@ -242,12 +242,25 @@ export default class MusicList {
         this.ul.appendChild(ListItem({
             id: item.id,
             classList: item.arrayBuffer ? ['cache'] : [],
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '.25rem',
+                maxWidth: '100%',
+            },
             children: [
                 ...(item.picture ? [Img({
                     src: item.picture,
                     style: { width: '2em', height: '2em', borderRadius: '.25em' }
                 })] : []),
                 Span({
+                    style: {
+                        flex: 1,
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflowX: 'hidden',
+                    },
                     title: `${item.name} - ${bytesToSize(item.size)} - ${item.type}`,
                     textContent: `${item.name} - ${bytesToSize(item.size)}`,
                     onclick: event => {
@@ -349,27 +362,6 @@ export default class MusicList {
         } else {
             this.标题.textContent = item.name // 替换标题
             this.封面.src = item.picture      // 替换封面图像
-
-            //// item.picture 是一个base64编码的图片, 获取图片的宽高和格式
-            //const [width, height, format] = (() => {
-            //    const [, base64] = item.picture.split(',')
-            //    const binary = atob(base64)
-            //    const bytes = new Uint8Array(binary.length)
-            //    for (let i = 0; i < binary.length; i++) {
-            //        bytes[i] = binary.charCodeAt(i)
-            //    }
-            //    const blob = new Blob([bytes.buffer], { type: item.type })
-            //    const url = URL.createObjectURL(blob)
-            //    const img = new Image()
-            //    img.src = url
-            //    return new Promise(resolve => {
-            //        img.onload = () => {
-            //            resolve([img.width, img.height, img.src.split('.').pop()])
-            //        }
-            //    })
-            //})
-            //console.log('封面信息:', width, height, format)
-
             // 替换浏览器媒体信息(使系统通知栏显示歌曲信息)
             if ('mediaSession' in navigator) {
                 navigator.mediaSession.metadata = new MediaMetadata({
@@ -377,9 +369,9 @@ export default class MusicList {
                     artist: '艺术家名',
                     album: '专辑名',
                     artwork: [
-                        { src: item.picture, sizes: '96x96', type: 'image/png' },
+                        { src: item.picture, sizes: '96x96', type: 'image/jpeg' },
                     ]
-                });
+                })
             }
             // 本地缓存直接播放
             this.audio.src = URL.createObjectURL(new Blob([item.arrayBuffer], { type: item.type }))