LaniakeaSupercluster/webrtc
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

收起音乐列表

Browse Source
This commit is contained in:
觉 2023-11-01 16:42:06 +08:00
parent 2629f262ef
commit 5915c717a0
1 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/music.js
View File

@ -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)