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

交互: 播放防止误点

Browse Source
This commit is contained in:
觉 2023-10-02 21:59:43 +08:00
parent e616ebcec6
commit 22bd4ff2a2
2 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/music.js
View File

@ -1,4 +1,4 @@
import { Button, List, ListItem } from './weigets.js'
import { Text, Button, List, ListItem } from './weigets.js'
export default class MusicList {
constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
@ -39,10 +39,10 @@ export default class MusicList {
// 写入 css 样式到 head
const style = document.createElement('style')
style.innerText = `
ul.music-list > li {
ul.music-list > li > span {
cursor: pointer;
}
ul.music-list > li.play {
ul.music-list > li > span.play {
color: #02be08;
}
ul.music-list > li.cache::marker {
@ -86,21 +86,21 @@ export default class MusicList {
this.ul.appendChild(ListItem({
id: item.id,
classList: item.arrayBuffer ? ['cache'] : [],
innerText: `${item.name} - ${bytesToSize(item.size)}`,
onclick: event => {
event.stopPropagation()
if (event.target.dataset.play === 'play') {
event.target.dataset.play = 'stop'
event.target.classList.remove('play')
this.stop()
} else {
event.target.dataset.play = 'play'
this.ul.querySelectorAll('li.play').forEach(li => li.classList.remove('play'))
event.target.classList.add('play')
this.play(item)
}
},
children: [
Text({
innerText: `${item.name} - ${bytesToSize(item.size)}`,
onclick: event => {
event.stopPropagation()
if (!this.audio.paused) {
event.target.classList.remove('play')
this.stop(item)
} else {
this.ul.querySelectorAll('li span.play').forEach(span => span.classList.remove('play'))
event.target.classList.add('play')
this.play(item)
}
}
}),
Button({
innerText: item.arrayBuffer ? '移除' : '缓存',
onclick: event => {
@ -121,7 +121,7 @@ export default class MusicList {
}
async remove(item) {
this.ul.querySelector(`#${item.id}`)?.remove()
if (this.playing) this.stop() // 停止播放
if (this.audio.paused) this.stop() // 停止播放
this.event.onremove(item)
}
async load(item) {

37
public/weigets.js
View File

@ -11,24 +11,25 @@ export function List({ children = [] }) {
return ul
}
export function ListItem({ innerText, onclick, id, children = [], dataset, classList=[] }) {
const li = document.createElement('li')
classList.forEach(item => li.classList.add(item))
li.innerText = innerText
li.onclick = onclick
li.id = id
dataset && Object.keys(dataset).forEach(key => li.dataset[key] = dataset[key])
children.forEach(child => li.appendChild(child))
return li
export function ListItem({ innerText, onclick, children = [], dataset, classList = [], ...attributes }) {
const element = document.createElement('li')
for (const key in attributes) {
element.setAttribute(key, attributes[key])
}
classList.forEach(item => element.classList.add(item))
if (innerText) element.innerText = innerText
if (onclick) element.onclick = onclick
if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
if (children) children.forEach(child => element.appendChild(child))
return element
}
export function Text({ innerText, onclick, id, children = [], dataset, classList=[] }) {
const span = document.createElement('span')
classList.forEach(item => span.classList.add(item))
span.innerText = innerText
span.onclick = onclick
span.id = id
dataset && Object.keys(dataset).forEach(key => span.dataset[key] = dataset[key])
children.forEach(child => span.appendChild(child))
return span
export function Text({ innerText, onclick, children, dataset, classList, ...attributes }) {
const element = document.createElement('span')
if (classList) classList.forEach(item => element.classList.add(item))
if (innerText) element.innerText = innerText
if (onclick) element.onclick = onclick
if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
if (children) children.forEach(child => element.appendChild(child))
return element
}