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

refactor(Playroom): 将进度条更新逻辑提取到单独函数中

Browse Source 
将进度条更新的逻辑提取到 `thumbUpdate` 函数中，以便在多个地方复用，提升代码的可维护性
This commit is contained in:
Astrian Zheng 2025-05-25 15:52:52 +10:00
parent 3074950226
commit 3608b02c4d
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/Playroom.vue
View File

@ -26,7 +26,7 @@ onMounted(() => {
playQueueStore.updatedCurrentTime = newTime playQueueStore.updatedCurrentTime = newTime
} }
}) })
thumbUpdate()
}) })
function timeFormatter(time: number) { function timeFormatter(time: number) {
@ -40,12 +40,16 @@ function timeFormatter(time: number) {
// 监听播放进度，更新进度条 // 监听播放进度，更新进度条
watch(() => playQueueStore.currentTime, () => { watch(() => playQueueStore.currentTime, () => {
thumbUpdate()
})
function thumbUpdate() {
const progress = playQueueStore.currentTime / playQueueStore.duration const progress = playQueueStore.currentTime / playQueueStore.duration
const containerWidth = progressBarContainer.value?.clientWidth || 0 const containerWidth = progressBarContainer.value?.clientWidth || 0
const thumbWidth = progressBarThumb.value?.clientWidth || 0 const thumbWidth = progressBarThumb.value?.clientWidth || 0
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() { function formatDetector() {
const format = playQueueStore.list[playQueueStore.currentIndex].song.sourceUrl?.split('.').pop() const format = playQueueStore.list[playQueueStore.currentIndex].song.sourceUrl?.split('.').pop()