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

Refactor music player UI

This commit is contained in:
觉 2023-10-24 08:55:24 +08:00
parent 2c748b029b
commit 4519a6701e
1 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/music.js
View File

@ -38,19 +38,50 @@ export default class MusicList {
this.list = [] this.list = []
list.forEach(item => this.add(item)) // 列表逐一添加 list.forEach(item => this.add(item)) // 列表逐一添加
this.封面 = Img({ //this.封面 = Img({
src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7', // src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
// style: {
// width: '6rem',
// height: '6rem',
// borderRadius: '1rem',
// backgroundColor: '#eee',
// border: 'none',
// },
// onerror: event => {
// // img 标签错误时, 替换为1x1透明gif图片
// event.target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
// }
//})
this.封面 = createElement({
style: { style: {
width: '6rem', width: '6rem',
height: '6rem', height: '6rem',
borderRadius: '1rem',
backgroundColor: '#eee',
border: 'none', border: 'none',
borderRadius: '1rem',
backgroundImage: "url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')",
backgroundSize: 'cover',
position: 'relative'
}, },
onerror: event => { children: [
// img 标签错误时, 替换为1x1透明gif图片 createElement({
event.target.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' style: {
} width: '100%',
height: '100%',
borderRadius: '1rem',
backgroundColor: '#f8f8f8',
color: '#f2f2f2',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '4rem',
fontWeight: 'bold',
textShadow: 'rgb(255, 255, 255) 0px 2px 2px',
position: 'absolute',
zIndex: -1,
},
textContent: '♫',
}),
]
}) })
this.标题 = Span({ this.标题 = Span({
style: { style: {
@ -58,7 +89,7 @@ export default class MusicList {
fontWeight: 'bold', fontWeight: 'bold',
margin: '0 0 .5rem 0', margin: '0 0 .5rem 0',
}, },
textContent: '音乐名', textContent: '',
}) })
// 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间 // 收起到右上角, 音乐播放器基于浮窗定位, 不再占用页面空间
@ -364,8 +395,8 @@ export default class MusicList {
}) })
} }
} else { } else {
this.标题.textContent = item.name // 替换标题 this.标题.textContent = item.name // 替换标题
this.封面.src = item.picture // 替换封面图像 this.封面.style.backgroundImage = `url(${item.picture})` // 替换封面图像
// 替换浏览器媒体信息(使系统通知栏显示歌曲信息) // 替换浏览器媒体信息(使系统通知栏显示歌曲信息)
if ('mediaSession' in navigator) { if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({ navigator.mediaSession.metadata = new MediaMetadata({