From f1fb5330a9b90be51fd475417f283cc40b16eafc Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 31 Aug 2025 16:59:13 +1000
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=A9=20playroom=20=E7=8E=B0?=
 =?UTF-8?q?=E5=9C=A8=E6=9C=89=E4=B8=9C=E8=A5=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                |   3 +-
 src/pages/Playroom.vue     | 213 ++++++++++++++++---------------------
 src/stores/usePlayStore.ts |  43 +++++---
 3 files changed, 127 insertions(+), 132 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3763765..efb520e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@ import CorgIcon from './assets/icons/corg.vue'
 import { watch } from 'vue'
 
 import UpdatePopup from './components/UpdatePopup.vue'
+import MiniPlayer from './components/MiniPlayer.vue'
 
 const presentPreferencePanel = ref(false)
 
@@ -71,7 +72,7 @@ watch(() => presentPreferencePanel, (value) => {
 							@click="presentPreferencePanel = true">
 							<CorgIcon :size="4" />
 						</button>
-
+						<MiniPlayer />
 					</div>
 				</div>
 			</div>
diff --git a/src/pages/Playroom.vue b/src/pages/Playroom.vue
index 31e9ccd..56a62f7 100644
--- a/src/pages/Playroom.vue
+++ b/src/pages/Playroom.vue
@@ -179,8 +179,9 @@ function updateAudioVolume() {
 	}
 }
 
+// biome-ignore lint/correctness/noUnusedVariables: used in <template>
 function formatDetector() {
-	const format = playQueueStore.list[playQueueStore.currentIndex].song.sourceUrl?.split('.').pop()
+	const format = playStore.currentTrack?.url?.split('.').pop()
 	if (format === 'mp3') { return 'MP3' }
 	if (format === 'flac') { return 'FLAC' }
 	if (format === 'm4a') { return 'M4A' }
@@ -189,26 +190,6 @@ function formatDetector() {
 	return '未知格式'
 }
 
-function playNext() {
-	if (playQueueStore.currentIndex === playQueueStore.list.length - 1) {
-		console.log("at the bottom, pause")
-		playQueueStore.currentIndex = 0
-		playQueueStore.isPlaying = false
-	} else {
-		playQueueStore.currentIndex++
-		playQueueStore.isPlaying = true
-	}
-}
-
-function playPrevious() {
-	if (playQueueStore.currentTime < 5 && playQueueStore.currentIndex > 0) {
-		playQueueStore.currentIndex--
-		playQueueStore.isPlaying = true
-	} else {
-		playQueueStore.updatedCurrentTime = 0
-	}
-}
-
 function setupEntranceAnimations() {
 	if (controllerRef.value) {
 		gsap.fromTo(controllerRef.value.children,
@@ -309,14 +290,7 @@ function makePlayQueueListDismiss() {
 }
 
 function getCurrentTrack() {
-	if (playQueueStore.list.length === 0) {
-		return null
-	}
-	if (playQueueStore.playMode.shuffle) {
-		return playQueueStore.list[playQueueStore.shuffleList[playQueueStore.currentIndex]]
-	} else {
-		return playQueueStore.list[playQueueStore.currentIndex]
-	}
+	return playStore.currentTrack
 }
 
 function toggleMoreOptions() {
@@ -360,71 +334,72 @@ function toggleMoreOptions() {
 	}
 }
 
-watch(() => [preferences.presentLyrics, getCurrentTrack()?.song.lyricUrl], (newValue, oldValue) => {
-	if (!getCurrentTrack()) { return }
+// TODO: lyrics
+// watch(() => [preferences.presentLyrics, getCurrentTrack()?.song.lyricUrl], (newValue, oldValue) => {
+// 	if (!getCurrentTrack()) { return }
 
-	const [showLyrics, hasLyricUrl] = newValue
-	const [prevShowLyrics, _prevHasLyricUrl] = oldValue || [false, null]
+// 	const [showLyrics, hasLyricUrl] = newValue
+// 	const [prevShowLyrics, _prevHasLyricUrl] = oldValue || [false, null]
 
-	// Show lyrics when both conditions are met
-	if (showLyrics && hasLyricUrl) {
-		presentLyrics.value = true
-		nextTick(() => {
-			const tl = gsap.timeline()
-			tl.from(controllerRef.value, {
-				marginRight: '-40rem',
-			}).fromTo(lyricsSection.value,
-				{ opacity: 0, x: 50, scale: 0.95 },
-				{ opacity: 1, x: 0, scale: 1, duration: 0.5, ease: "power2.out" },
-				"-=0.3"
-			)
-		})
-	}
-	// Hide lyrics with different animations based on reason
-	else if (presentLyrics.value) {
-		let animationConfig
+// 	// Show lyrics when both conditions are met
+// 	if (showLyrics && hasLyricUrl) {
+// 		presentLyrics.value = true
+// 		nextTick(() => {
+// 			const tl = gsap.timeline()
+// 			tl.from(controllerRef.value, {
+// 				marginRight: '-40rem',
+// 			}).fromTo(lyricsSection.value,
+// 				{ opacity: 0, x: 50, scale: 0.95 },
+// 				{ opacity: 1, x: 0, scale: 1, duration: 0.5, ease: "power2.out" },
+// 				"-=0.3"
+// 			)
+// 		})
+// 	}
+// 	// Hide lyrics with different animations based on reason
+// 	else if (presentLyrics.value) {
+// 		let animationConfig
 
-		// If lyrics were toggled off
-		if (prevShowLyrics && !showLyrics) {
-			animationConfig = {
-				opacity: 0, x: -50, scale: 0.95,
-				duration: 0.3, ease: "power2.in"
-			}
-		}
-		// If no lyrics available (song changed)
-		else if (!hasLyricUrl) {
-			animationConfig = {
-				opacity: 0, y: -20, scale: 0.98,
-				duration: 0.3, ease: "power1.in"
-			}
-		}
-		// Default animation
-		else {
-			animationConfig = {
-				opacity: 0, x: -50,
-				duration: 0.3, ease: "power2.in"
-			}
-		}
+// 		// If lyrics were toggled off
+// 		if (prevShowLyrics && !showLyrics) {
+// 			animationConfig = {
+// 				opacity: 0, x: -50, scale: 0.95,
+// 				duration: 0.3, ease: "power2.in"
+// 			}
+// 		}
+// 		// If no lyrics available (song changed)
+// 		else if (!hasLyricUrl) {
+// 			animationConfig = {
+// 				opacity: 0, y: -20, scale: 0.98,
+// 				duration: 0.3, ease: "power1.in"
+// 			}
+// 		}
+// 		// Default animation
+// 		else {
+// 			animationConfig = {
+// 				opacity: 0, x: -50,
+// 				duration: 0.3, ease: "power2.in"
+// 			}
+// 		}
 
-		const tl = gsap.timeline({
-			onComplete: () => {
-				presentLyrics.value = false
-			}
-		})
+// 		const tl = gsap.timeline({
+// 			onComplete: () => {
+// 				presentLyrics.value = false
+// 			}
+// 		})
 
-		tl.to(controllerRef.value, {
-			marginLeft: '44rem',
-			duration: 0.3, ease: "power2.out"
-		})
-			.to(lyricsSection.value, animationConfig, '<')
-			.set(lyricsSection.value, {
-				opacity: 1, x: 0, y: 0, scale: 1 // Reset for next time
-			})
-			.set(controllerRef.value, {
-				marginLeft: '0rem' // Reset for next time
-			})
-	}
-}, { immediate: true })
+// 		tl.to(controllerRef.value, {
+// 			marginLeft: '44rem',
+// 			duration: 0.3, ease: "power2.out"
+// 		})
+// 			.to(lyricsSection.value, animationConfig, '<')
+// 			.set(lyricsSection.value, {
+// 				opacity: 1, x: 0, y: 0, scale: 1 // Reset for next time
+// 			})
+// 			.set(controllerRef.value, {
+// 				marginLeft: '0rem' // Reset for next time
+// 			})
+// 	}
+// }, { immediate: true })
 
 // 页面焦点处理函数变量声明
 let handleVisibilityChange: (() => void) | null = null
@@ -519,7 +494,7 @@ function resyncLyricsState() {
 }
 
 // New: Watch for track changes and animate
-watch(() => playQueueStore.currentIndex, () => {
+watch(() => playStore.currentTrack, () => {
 	if (albumCover.value) {
 		gsap.to(albumCover.value, {
 			scale: 0.95, opacity: 0.7, duration: 0.2,
@@ -539,11 +514,11 @@ watch(() => playQueueStore.currentIndex, () => {
 <template>
 	<div v-if="getCurrentTrack() !== null">
 		<!-- Background remains unchanged -->
-		<div class="z-0 absolute top-0 left-0 w-screen h-screen overflow-hidden"
+		<!-- <div class="z-0 absolute top-0 left-0 w-screen h-screen overflow-hidden"
 			v-if="getCurrentTrack()?.album?.coverDeUrl">
 			<img class="w-full h-full blur-2xl object-cover scale-110" :src="getCurrentTrack()?.album?.coverDeUrl" />
 			<div class="w-full h-full absolute top-0 left-0 bg-neutral-900/5" />
-		</div>
+		</div> -->
 
 		<!-- Main content area - new centered flex layout -->
 		<div class="absolute top-0 left-0 flex justify-center h-screen w-screen overflow-y-auto z-10 select-none">
@@ -553,9 +528,9 @@ watch(() => playQueueStore.currentIndex, () => {
 				<div class="flex flex-col w-96 gap-4" ref="controllerRef">
 					<!-- Album cover with enhanced hover effect -->
 					<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()?.metadata?.artwork?.[0].src" class="rounded-2xl shadow-2xl border border-white/20 w-96 h-96
 							transition-transform duration-300
-							" :class="playQueueStore.isPlaying ? 'scale-100' : 'scale-85'" />
+							" :class="playStore.isPlaying ? 'scale-100' : 'scale-85'" />
 					</div>
 
 					<!-- Song info with enhanced styling -->
@@ -564,26 +539,26 @@ watch(() => playQueueStore.currentIndex, () => {
 							<!-- ...existing song info code... -->
 							<div class="">
 								<div class="text-black/90 blur-lg text-lg font-medium truncate w-80">
-									{{ getCurrentTrack()?.song.name }}
+									{{ getCurrentTrack()?.metadata?.title }}
 								</div>
 								<div class="text-black/90 blur-lg text-base truncate w-80">
-									{{ getCurrentTrack()?.song.artists ?? [] }} —
-									{{ getCurrentTrack()?.album?.name ?? '未知专辑' }}
+									{{ getCurrentTrack()?.metadata?.artist}} —
+									{{ getCurrentTrack()?.metadata?.album ?? '未知专辑' }}
 								</div>
 							</div>
 
 							<div class="absolute top-0">
 								<div class="text-white text-lg font-medium truncate w-80">
-									{{ getCurrentTrack()?.song.name }}
+									{{ getCurrentTrack()?.metadata?.title }}
 								</div>
 								<div class="text-white/75 text-base truncate w-80">
-									{{ artistsOrganize(getCurrentTrack()?.song.artists ?? []) }} —
-									{{ getCurrentTrack()?.album?.name ?? '未知专辑' }}
+									{{ getCurrentTrack()?.metadata?.artist }} —
+									{{ getCurrentTrack()?.metadata?.album ?? '未知专辑' }}
 								</div>
 							</div>
 						</div>
 
-						<button
+						<!-- <button
 							class="h-10 w-10 flex justify-center items-center rounded-full backdrop-blur-3xl transition-all duration-200 hover:scale-110"
 							ref="favoriteButton"
 							@click="() => { const track = getCurrentTrack(); if (track !== null) favourites.toggleFavourite(track) }"
@@ -594,7 +569,7 @@ watch(() => playQueueStore.currentIndex, () => {
 									:size="6" />
 								<StarEmptyIcon v-else :size="6" />
 							</span>
-						</button>
+						</button> -->
 					</div>
 
 					<!-- Progress section -->
@@ -611,9 +586,9 @@ watch(() => playQueueStore.currentIndex, () => {
 							<!-- ...existing time display code... -->
 							<div class="font-medium flex-1 text-left text-xs relative">
 								<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(playStore.progress.currentTime)) }}</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(playStore.progress.currentTime)) }}</span>
 							</div>
 							<div class="text-xs text-center relative flex-1">
 								<span class="text-black blur-lg absolute top-0">{{ formatDetector() }}</span>
@@ -625,8 +600,8 @@ watch(() => playQueueStore.currentIndex, () => {
 									class="text-white/90 text-xs font-medium text-right relative transition-colors duration-200 hover:text-white"
 									@click="preferences.displayTimeLeft = !preferences.displayTimeLeft">
 									<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>
-									<span>{{ `${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(playStore.progress.duration) - Math.floor(playStore.progress.currentTime) : playStore.progress.duration)}` }}</span>
+									<span>{{ `${preferences.displayTimeLeft ? '-' : ''}${timeFormatter(preferences.displayTimeLeft ? Math.floor(playStore.progress.duration) - Math.floor(playStore.progress.currentTime) : playStore.progress.duration)}` }}</span>
 								</button>
 							</div>
 						</div>
@@ -688,16 +663,16 @@ watch(() => playQueueStore.currentIndex, () => {
 								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">
 								<!-- ...existing play/pause icon code... -->
-								<div v-if="playQueueStore.isPlaying">
-									<div v-if="playQueueStore.isBuffering" class="w-6 h-6 relative">
+								<div v-if="playStore.isPlaying">
+									<!-- <div v-if="playQueueStore.isBuffering" class="w-6 h-6 relative">
 										<span class="text-black/80 blur-lg absolute top-0 left-0">
 											<LoadingIndicator :size="6" />
 										</span>
 										<span class="text-white absolute top-0 left-0">
 											<LoadingIndicator :size="6" />
 										</span>
-									</div>
-									<div v-else class="w-8 h-8 relative">
+									</div> -->
+									<div class="w-8 h-8 relative">
 										<span class="text-black blur-md absolute top-0 left-0">
 											<PauseIcon :size="8" />
 										</span>
@@ -720,7 +695,7 @@ watch(() => playQueueStore.currentIndex, () => {
 
 							<button
 								class="text-white flex-1 h-10 flex justify-center items-center rounded-lg hover:bg-white/25 transition-all duration-200 hover:scale-105"
-								@click="playNext" ref="nextButton">
+								@click="playStore.skipToPrevious" ref="nextButton">
 								<div class="w-8 h-8 relative">
 									<span class="text-black/80 blur-lg absolute top-0 left-0">
 										<ForwardIcon :size="8" />
@@ -830,29 +805,29 @@ watch(() => playQueueStore.currentIndex, () => {
 				<div class="flex gap-2 mx-8 mb-4">
 					<button
 						class="flex-1 h-9 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center transition-all duration-200 hover:scale-105"
-						:class="playQueueStore.playMode.shuffle ? 'bg-[#ffffffaa] text-neutral-700' : 'text-white bg-neutral-800/80'"
+						:class="playStore.shuffle ? 'bg-[#ffffffaa] text-neutral-700' : 'text-white bg-neutral-800/80'"
 						@click="toggleShuffle">
 						<ShuffleIcon :size="4" />
 					</button>
 					<button
 						class="flex-1 h-9 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl flex justify-center items-center transition-all duration-200 hover:scale-105"
-						:class="playQueueStore.playMode.repeat === 'off' ? 'text-white bg-neutral-800/80' : 'bg-[#ffffffaa] text-neutral-700'"
+						:class="playStore.loop === 'off' ? 'text-white bg-neutral-800/80' : 'bg-[#ffffffaa] text-neutral-700'"
 						@click="toggleRepeat">
-						<CycleTwoArrowsIcon :size="4" v-if="playQueueStore.playMode.repeat !== 'single'" />
+						<CycleTwoArrowsIcon :size="4" v-if="playStore.loop !== 'single_track'" />
 						<CycleTwoArrowsWithNumOneIcon :size="4" v-else />
 					</button>
 				</div>
 
 				<hr class="border-[#ffffff39]" />
 
-				<div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-if="playQueueStore.playMode.shuffle">
-					<PlayQueueItem v-for="(oriIndex, shuffledIndex) in playQueueStore.shuffleList"
+				<div class="flex-auto h-0 overflow-y-auto px-4 flex flex-col gap-2" v-if="playStore.shuffle">
+					<!-- <PlayQueueItem v-for="(oriIndex, shuffledIndex) in playStore.shuffleList"
 						:queueItem="playQueueStore.list[oriIndex]" :isCurrent="playQueueStore.currentIndex === shuffledIndex"
-						:key="playQueueStore.list[oriIndex].song.cid" :index="shuffledIndex" />
+						:key="playQueueStore.list[oriIndex].song.cid" :index="shuffledIndex" /> -->
 				</div>
 				<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"
-						v-for="(track, index) in playQueueStore.list" :index="index" :key="track.song.cid" />
+					<!-- <PlayQueueItem :queueItem="track" :isCurrent="playQueueStore.currentIndex === index"
+						v-for="(track, index) in playQueueStore.list" :index="index" :key="track.song.cid" /> -->
 				</div>
 			</div>
 		</dialog>
diff --git a/src/stores/usePlayStore.ts b/src/stores/usePlayStore.ts
index fe4f7a3..88347ae 100644
--- a/src/stores/usePlayStore.ts
+++ b/src/stores/usePlayStore.ts
@@ -1,4 +1,5 @@
 import { Player } from '@astrian/music-surge-revolution'
+import type { QueueItem } from '@astrian/music-surge-revolution'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { artistsOrganize } from '../utils'
@@ -13,18 +14,11 @@ export const usePlayStore = defineStore('player', () => {
 		duration: 0,
 		percentage: 0
 	})
-	const currentTrack = ref<{
-		url: string
-		metadata?: {
-			title?: string
-			artist?: string
-			artwork?: {
-				src: string
-				sizes?: string
-				type?: string
-			}[]
-		}
-	}>()
+	const currentTrack = ref<QueueItem>()
+	const isPlaying = ref(false)
+	const queue = ref<QueueItem[]>([])
+	const shuffle = ref(false)
+	const loop = ref<"off" | "entire_queue" | "single_track">("off")
 
 	const replaceQueue = (queue: {
 		song: Song
@@ -78,10 +72,30 @@ export const usePlayStore = defineStore('player', () => {
 		currentTrack.value = params
 	})
 
+	player.value.onPlayStateChange(params => {
+		isPlaying.value = params
+	})
+
+	player.value.onQueueChange(params => {
+		queue.value = params
+	})
+
+	player.value.onShuffleChange(params => {
+		shuffle.value = params
+	})
+
+	player.value.onLoopChange(params => {
+		loop.value = params
+	})
+
 	const updateCurrentTime = (time: number) => {
 		player.value.seekTo(time)
 	}
 
+	const skipToPrevious = () => {
+		player.value.skipToPrevious()
+	}
+
 	return {
 		queueReplaceLock,
 		togglePlay,
@@ -90,6 +104,11 @@ export const usePlayStore = defineStore('player', () => {
 		progress,
 		currentTrack,
 		updateCurrentTime,
+		skipToPrevious,
+		isPlaying,
+		queue,
+		shuffle,
+		loop,
 		replaceQueue
 	}
 })
\ No newline at end of file