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

与既有 Playroom 绑定播放状态

Browse Source
This commit is contained in:
Astrian Zheng 2025-08-22 20:30:02 +10:00
parent ea8d31a49d
commit c9113d7f81
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
2 changed files with 48 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/Debug.vue
View File

@ -18,7 +18,6 @@ async function playTheList() {
} }
} }
playQueue.replaceQueue(newQueue) playQueue.replaceQueue(newQueue)
playState.togglePlay(true)
} }
async function pauseOrResume() { async function pauseOrResume() {

94
src/pages/Playroom.vue
View File

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { usePlayQueueStore } from '../stores/usePlayQueueStore' import { usePlayQueueStore } from '../stores/usePlayQueueStore'
import { usePlayState } from '../stores/usePlayState'
import { artistsOrganize } from '../utils' import { artistsOrganize } from '../utils'
import gsap from 'gsap' import gsap from 'gsap'
import { Draggable } from 'gsap/Draggable' import { Draggable } from 'gsap/Draggable'
@ -32,6 +33,7 @@ import MuscialNoteSparklingIcon from '../assets/icons/musicalnotesparkling.vue'
import CastEmptyIcon from '../assets/icons/castempty.vue' import CastEmptyIcon from '../assets/icons/castempty.vue'
const playQueueStore = usePlayQueueStore() const playQueueStore = usePlayQueueStore()
const playState = usePlayState()
const preferences = usePreferences() const preferences = usePreferences()
const favourites = useFavourites() const favourites = useFavourites()
@ -67,8 +69,8 @@ onMounted(async () => {
onDrag: function () { onDrag: function () {
const thumbPosition = this.x const thumbPosition = this.x
const containerWidth = progressBarContainer.value?.clientWidth || 0 const containerWidth = progressBarContainer.value?.clientWidth || 0
const newTime = (thumbPosition / containerWidth) * playQueueStore.duration // const newTime = (thumbPosition / containerWidth) * playQueueStore.duration
playQueueStore.updatedCurrentTime = newTime // playState.reportPlayProgress
}, },
}) })
@ -104,14 +106,14 @@ function timeFormatter(time: number) {
// 监听播放进度，更新进度条 // 监听播放进度，更新进度条
watch( watch(
() => playQueueStore.currentTime, () => playState.playProgress,
() => { () => {
thumbUpdate() thumbUpdate()
}, },
) )
function thumbUpdate() { function thumbUpdate() {
const progress = playQueueStore.currentTime / playQueueStore.duration const progress = playState.playProgressPercent
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
@ -187,33 +189,33 @@ function updateAudioVolume() {
} }
function formatDetector() { function formatDetector() {
/* const format = playQueueStore.list[playQueueStore.currentIndex].sourceUrl?.split('.').pop() const format = playQueueStore.currentTrack.sourceUrl?.split('.').pop()
if (format === 'mp3') { return 'MP3' } if (format === 'mp3') { return 'MP3' }
if (format === 'flac') { return 'FLAC' } if (format === 'flac') { return 'FLAC' }
if (format === 'm4a') { return 'M4A' } if (format === 'm4a') { return 'M4A' }
if (format === 'ape') { return 'APE' } if (format === 'ape') { return 'APE' }
if (format === 'wav') { return 'WAV' } */ if (format === 'wav') { return 'WAV' }
return '未知格式' return '未知格式'
} }
function playNext() { function playNext() {
if (playQueueStore.currentIndex === playQueueStore.list.length - 1) { // if (playQueueStore.currentIndex === playQueueStore.list.length - 1) {
debugPlayroom('到达播放队列末尾，暂停') // debugPlayroom('到达播放队列末尾，暂停')
playQueueStore.currentIndex = 0 // playQueueStore.currentIndex = 0
playQueueStore.isPlaying = false // playQueueStore.isPlaying = false
} else { // } else {
playQueueStore.currentIndex++ // playQueueStore.currentIndex++
playQueueStore.isPlaying = true // playQueueStore.isPlaying = true
} // }
} }
function playPrevious() { function playPrevious() {
if (playQueueStore.currentTime < 5 && playQueueStore.currentIndex > 0) { // if (playQueueStore.currentTime < 5 && playQueueStore.currentIndex > 0) {
playQueueStore.currentIndex-- // playQueueStore.currentIndex--
playQueueStore.isPlaying = true // playQueueStore.isPlaying = true
} else { // } else {
playQueueStore.updatedCurrentTime = 0 // playQueueStore.updatedCurrentTime = 0
} // }
} }
function setupEntranceAnimations() { function setupEntranceAnimations() {
@ -250,31 +252,31 @@ function handlePlayPause() {
repeat: 1, repeat: 1,
ease: 'power2.inOut', ease: 'power2.inOut',
onComplete: () => { onComplete: () => {
playQueueStore.isPlaying = !playQueueStore.isPlaying playState.togglePlay()
}, },
}) })
} else { } else {
playQueueStore.isPlaying = !playQueueStore.isPlaying playState.togglePlay()
} }
} }
function toggleShuffle() { function toggleShuffle() {
playQueueStore.playMode.shuffle = !playQueueStore.playMode.shuffle // playQueueStore.playMode.shuffle = !playQueueStore.playMode.shuffle
playQueueStore.shuffleCurrent = false // playQueueStore.shuffleCurrent = false
} }
function toggleRepeat() { function toggleRepeat() {
switch (playQueueStore.playMode.repeat) { // switch (playQueueStore.playMode.repeat) {
case 'off': // case 'off':
playQueueStore.playMode.repeat = 'all' // playQueueStore.playMode.repeat = 'all'
break // break
case 'all': // case 'all':
playQueueStore.playMode.repeat = 'single' // playQueueStore.playMode.repeat = 'single'
break // break
case 'single': // case 'single':
playQueueStore.playMode.repeat = 'off' // playQueueStore.playMode.repeat = 'off'
break // break
} // }
} }
function makePlayQueueListPresent() { function makePlayQueueListPresent() {
@ -648,7 +650,7 @@ watch(
<div ref="albumCover" class="relative"> <div ref="albumCover" class="relative">
<img :src="getCurrentTrack()?.album?.coverUrl" class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96 <img :src="getCurrentTrack()?.album?.coverUrl" class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96
transition-transform duration-300 transition-transform duration-300
" :class="playQueueStore.isPlaying ? 'scale-100' : 'scale-85'" /> " :class="playState.actualPlaying ? 'scale-100' : 'scale-85'" />
</div> </div>
<!-- Song info with enhanced styling --> <!-- Song info with enhanced styling -->
@ -704,9 +706,9 @@ watch(
<!-- ...existing time display code... --> <!-- ...existing time display code... -->
<div class="font-medium flex-1 text-left text-xs relative"> <div class="font-medium flex-1 text-left text-xs relative">
<span <span
class="text-black blur-lg absolute top-0 text-xs">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span> class="text-black blur-lg absolute top-0 text-xs">{{ timeFormatter(Math.floor(playState.playProgress)) }}</span>
<span <span
class="text-white/90 absolute top-0">{{ timeFormatter(Math.floor(playQueueStore.currentTime)) }}</span> class="text-white/90 absolute top-0">{{ timeFormatter(Math.floor(playState.playProgress)) }}</span>
</div> </div>
<div class="text-xs text-center relative flex-1"> <div class="text-xs text-center relative flex-1">
<span class="text-black blur-lg absolute top-0">{{ formatDetector() }}</span> <span class="text-black blur-lg absolute top-0">{{ formatDetector() }}</span>
@ -718,8 +720,8 @@ watch(
class="text-white/90 text-xs font-medium text-right relative transition-colors duration-200 hover:text-white" class="text-white/90 text-xs font-medium text-right relative transition-colors duration-200 hover:text-white"
@click="preferences.displayTimeLeft = !preferences.displayTimeLeft"> @click="preferences.displayTimeLeft = !preferences.displayTimeLeft">
<span <span
class="text-black blur-lg absolute top-0">{{ `${preferences.displayTimeLeft ? '-' : ''}${timeFormatter(preferences.displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</span> class="text-black blur-lg absolute top-0">{{ `${preferences.displayTimeLeft ? '-' : ''}${timeFormatter(preferences.displayTimeLeft ? Math.floor(playState.trackDuration) - Math.floor(playState.playProgress) : playState.trackDuration)}` }}</span>
<span>{{ `${preferences.displayTimeLeft ? '-' : ''}${timeFormatter(preferences.displayTimeLeft ? Math.floor(playQueueStore.duration) - Math.floor(playQueueStore.currentTime) : playQueueStore.duration)}` }}</span> <span>{{ `${preferences.displayTimeLeft ? '-' : ''}${timeFormatter(preferences.displayTimeLeft ? Math.floor(playState.trackDuration) - Math.floor(playState.playProgress) : playState.trackDuration)}` }}</span>
</button> </button>
</div> </div>
</div> </div>
@ -781,8 +783,8 @@ watch(
class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25 transition-all duration-200" class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25 transition-all duration-200"
@click="handlePlayPause" ref="playButton"> @click="handlePlayPause" ref="playButton">
<!-- ...existing play/pause icon code... --> <!-- ...existing play/pause icon code... -->
<div v-if="playQueueStore.isPlaying"> <div v-if="playState.isPlaying">
<div v-if="playQueueStore.isBuffering" class="w-6 h-6 relative"> <div v-if="false" class="w-6 h-6 relative"> <!-- 原本是检测缓冲状态的 -->
<span class="text-black/80 blur-lg absolute top-0 left-0"> <span class="text-black/80 blur-lg absolute top-0 left-0">
<LoadingIndicator :size="6" /> <LoadingIndicator :size="6" />
</span> </span>
@ -939,13 +941,13 @@ watch(
<hr class="border-[#ffffff39]" /> <hr class="border-[#ffffff39]" />
<div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-if="playQueueStore.isShuffle"> <div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-if="playQueueStore.isShuffle">
<PlayQueueItem v-for="(oriIndex, shuffledIndex) in playQueueStore.shuffleList" <!--PlayQueueItem v-for="(oriIndex, shuffledIndex) in playQueueStore.isShuffle"
:queueItem="playQueueStore.list[oriIndex]" :isCurrent="playQueueStore.currentIndex === shuffledIndex" :queueItem="playQueueStore.queue[oriIndex]" :isCurrent="playQueueStore.currentIndex === shuffledIndex"
:key="playQueueStore.list[oriIndex].song.cid" :index="shuffledIndex" /> :key="playQueueStore.queue[oriIndex].song.cid" :index="shuffledIndex" /-->
</div> </div>
<div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-else> <div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-else>
<PlayQueueItem :queueItem="track" :isCurrent="playQueueStore.currentIndex === index" <PlayQueueItem :queueItem="track" :isCurrent="playQueueStore.currentIndex === index"
v-for="(track, index) in playQueueStore.list" :index="index" :key="track.song.cid" /> v-for="(track, index) in playQueueStore.queue" :index="index" :key="track.song.cid" />
</div> </div>
</div> </div>
</dialog> </dialog>