Astrian/msr-mod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat(Playroom): 添加音频格式检测功能并优化背景图片布局

Browse Source 
添加 `formatDetector` 函数以动态检测并显示当前播放音频的格式。同时，优化背景图片布局，增加半透明遮罩层以提升视觉效果。
This commit is contained in:
Astrian Zheng 2025-05-25 14:14:47 +10:00
parent 257a33ec3d
commit 595caa0956
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/Playroom.vue
View File

@ -45,12 +45,24 @@ watch(() => playQueueStore.currentTime, () => {
const newPosition = (containerWidth - thumbWidth) * progress const newPosition = (containerWidth - thumbWidth) * progress
gsap.to(progressBarThumb.value, { x: newPosition, duration: 0.1 }) gsap.to(progressBarThumb.value, { x: newPosition, duration: 0.1 })
}) })
function formatDetector() {
const format = playQueueStore.list[playQueueStore.currentIndex].song.sourceUrl?.split('.').pop()
if (format === 'mp3') { return 'MP3' }
if (format === 'flac') { return 'FLAC' }
if (format === 'm4a') { return 'M4A' }
if (format === 'ape') { return 'APE' }
if (format === 'wav') { return 'WAV' }
return '未知格式'
}
</script> </script>
<template> <template>
<img class="z-0 absolute top-0 left-0 w-screen h-screen blur-2xl object-cover" <div class="z-0 absolute top-0 left-0 w-screen h-screen" v-if="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl">
:src="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl" <img class="w-full h-full blur-2xl object-cover"
v-if="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl" /> :src="playQueueStore.list[playQueueStore.currentIndex].album?.coverDeUrl" />
<div class="bg-gray-600/50 w-full h-full absolute top-0 left-0" />
</div>
<div class="w-full flex justify-center items-center my-auto gap-12 z-10 select-none"> <div class="w-full flex justify-center items-center my-auto gap-12 z-10 select-none">
<div class="flex flex-col text-center w-96 gap-4"> <div class="flex flex-col text-center w-96 gap-4">
@ -76,7 +88,7 @@ watch(() => playQueueStore.currentTime, () => {
<div class="text-white/75 font-light flex-1 text-left"> <div class="text-white/75 font-light flex-1 text-left">
{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }} {{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}
</div> </div>
<div class="text-white text-xs text-center">MP3</div> <div class="text-white text-xs text-center">{{ formatDetector() }}</div>
<button class="text-white/75 font-light flex-1 text-right" <button class="text-white/75 font-light flex-1 text-right"
@click="displayTimeLeft = !displayTimeLeft">{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</button> @click="displayTimeLeft = !displayTimeLeft">{{ `${displayTimeLeft ? '-' : ''}${timeFormatter(displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</button>
</div> </div>