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

feat(Playroom): 添加播放队列列表对话框

Browse Source 
引入播放队列列表对话框，支持显示和隐藏功能。通过点击按钮触发对话框的动画效果，提升用户体验。
This commit is contained in:
Astrian Zheng 2025-05-25 18:25:18 +10:00
parent a40268e134
commit 01c2e1caa0
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 53 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/Playroom.vue
View File

@ -22,8 +22,11 @@ gsap.registerPlugin(Draggable)
const progressBarThumb = useTemplateRef('progressBarThumb')
const progressBarContainer = useTemplateRef('progressBarContainer')
const playQueueDialogContainer = useTemplateRef('playQueueDialogContainer')
const playQueueDialog = useTemplateRef('playQueueDialog')
const displayTimeLeft = ref(false)
const presentQueueListDialog = ref(false)
onMounted(() => {
Draggable.create(progressBarThumb.value, {
@ -90,6 +93,43 @@ function playPrevious() {
playQueueStore.updatedCurrentTime = 0
}
}
function makePlayQueueListPresent() {
presentQueueListDialog.value = true
const tl = gsap.timeline()
tl.from(playQueueDialog.value, {
marginLeft: '-24rem',
duration: 0.2,
ease: 'power2.out'
}).from(playQueueDialogContainer.value, {
backgroundColor: 'transparent',
duration: 0.2,
ease: 'power2.out'
}, '<')
}
function makePlayQueueListDismiss() {
const tl = gsap.timeline({
onComplete: () => {
presentQueueListDialog.value = false
}
})
tl.to(playQueueDialog.value, {
marginLeft: '-24rem',
duration: 0.2,
ease: 'power2.out'
}).to(playQueueDialogContainer.value, {
backgroundColor: 'transparent',
duration: 0.2,
ease: 'power2.out'
}).set(playQueueDialogContainer.value, {
backgroundColor: '#17171780',
ease: 'power2.out'
}).set(playQueueDialog.value, {
marginLeft: '0rem',
ease: 'power2.out'
})
}
</script>
<template>
@ -137,7 +177,7 @@ function playPrevious() {
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
<StarEmptyIcon :size="4" />
</button>
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25">
<button class="text-white h-6 w-6 flex justify-center items-center rounded-full hover:bg-white/25" @click="makePlayQueueListPresent">
<MusicListIcon :size="4" />
</button>
</div>
@ -176,4 +216,16 @@ function playPrevious() {
</div>
</div>
</div>
<!-- Queue list -->
<dialog :open="presentQueueListDialog" class="z-20 w-screen h-screen" @click="makePlayQueueListDismiss" ref="playQueueDialogContainer" style="background-color: #17171780;">
<div class="w-96 h-screen bg-neutral-900/80 shadow-[0_0_16px_0_rgba(0,0,0,0.5)] backdrop-blur-2xl p-8 flex flex-col" @click.stop ref="playQueueDialog">
<div class="flex justify-between">
<div class="text-white font-medium text-2xl">待播清单</div>
<button class="text-white" @click="makePlayQueueListDismiss">
</button>
</div>
</div>
</dialog>
</template>