From 956fef1d8a7193ab0d7a03ce44c22ee8b4ff7e10 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sun, 25 May 2025 00:10:23 +1000
Subject: [PATCH] =?UTF-8?q?feat(Player):=20=E6=B7=BB=E5=8A=A0=E7=BC=93?=
 =?UTF-8?q?=E5=86=B2=E7=8A=B6=E6=80=81=E6=8C=87=E7=A4=BA=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在播放器中添加了缓冲状态指示器，当音频缓冲时显示动画，提升用户体验
---
 src/components/Player.vue       | 25 +++++++++++++++++++------
 src/stores/usePlayQueueStore.ts |  3 ++-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 37cee9e..c9fbe4e 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -7,8 +7,8 @@ const playQueueStore = usePlayQueueStore()
 const player = useTemplateRef('playerRef')
 
 watch(() => playQueueStore.isPlaying, (newValue) => {
-	if (newValue) { 
-		player.value?.play() 
+	if (newValue) {
+		player.value?.play()
 		setMetadata()
 	}
 	else { player.value?.pause() }
@@ -16,6 +16,7 @@ watch(() => playQueueStore.isPlaying, (newValue) => {
 
 watch(() => playQueueStore.currentIndex, () => {
 	setMetadata()
+	playQueueStore.isBuffering = true
 })
 
 function artistsOrganize(list: string[]) {
@@ -53,9 +54,9 @@ function playNext() {
 
 function playPrevious() {
 	if (player.value && (player.value.currentTime ?? 0) < 5 && playQueueStore.currentIndex > 0) {
-		playQueueStore.currentIndex-- 
+		playQueueStore.currentIndex--
 		player.value?.play()
-	} else { 
+	} else {
 		if (player.value) { player.value.currentTime = 0 }
 	}
 }
@@ -65,7 +66,9 @@ function playPrevious() {
 	<div>
 		<audio
 			:src="playQueueStore.list[playQueueStore.currentIndex] ? playQueueStore.list[playQueueStore.currentIndex].song.sourceUrl : ''"
-			ref="playerRef" autoplay v-if="playQueueStore.list.length !== 0" @ended="playNext" @pause="playQueueStore.isPlaying = false" @play="playQueueStore.isPlaying = true">
+			ref="playerRef" autoplay v-if="playQueueStore.list.length !== 0" @ended="playNext"
+			@pause="playQueueStore.isPlaying = false" @play="playQueueStore.isPlaying = true"
+			@canplaythrough="playQueueStore.isBuffering = false" @waiting="playQueueStore.isBuffering = true">
 		</audio>
 
 		<div
@@ -79,7 +82,17 @@ function playPrevious() {
 				playQueueStore.isPlaying = !playQueueStore.isPlaying
 			}">
 				<div class="w-4 h-4" v-if="playQueueStore.isPlaying">
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" v-if="playQueueStore.isBuffering === true">
+						<circle fill="none" stroke-opacity="1" stroke="#FFFFFF" stroke-width=".5" cx="100" cy="100" r="0">
+							<animate attributeName="r" calcMode="spline" dur="2" values="1;80" keyTimes="0;1" keySplines="0 .2 .5 1"
+								repeatCount="indefinite"></animate>
+							<animate attributeName="stroke-width" calcMode="spline" dur="2" values="0;25" keyTimes="0;1"
+								keySplines="0 .2 .5 1" repeatCount="indefinite"></animate>
+							<animate attributeName="stroke-opacity" calcMode="spline" dur="2" values="1;0" keyTimes="0;1"
+								keySplines="0 .2 .5 1" repeatCount="indefinite"></animate>
+						</circle>
+					</svg>
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" v-else>
 						<path d="M6 5H8V19H6V5ZM16 5H18V19H16V5Z"></path>
 					</svg>
 				</div>
diff --git a/src/stores/usePlayQueueStore.ts b/src/stores/usePlayQueueStore.ts
index 323f50b..607e77f 100644
--- a/src/stores/usePlayQueueStore.ts
+++ b/src/stores/usePlayQueueStore.ts
@@ -6,6 +6,7 @@ export const usePlayQueueStore = defineStore('queue', () =>{
   const currentIndex = ref<number>(0)
 	const isPlaying = ref<boolean>(false)
 	const queueReplaceLock = ref<boolean>(false)
+	const isBuffering = ref<boolean>(false)
 
-  return { list, currentIndex, isPlaying, queueReplaceLock }
+  return { list, currentIndex, isPlaying, queueReplaceLock, isBuffering }
 })
\ No newline at end of file