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

播放器可自由拖动大小

Browse Source
This commit is contained in:
XiaoZhuo 2023-10-22 12:30:31 +08:00
parent f688f6e1b1
commit 277e2dd5b9
1 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/music.js
View File

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