feat(播放器): 添加播放进度同步功能

在播放器组件中添加了对播放进度的监听和同步功能，确保进度条与播放时间保持一致。同时，在播放队列存储中添加了`updatedCurrentTime`字段，用于更新播放时间。这些改动提升了用户体验，使播放进度控制更加直观和准确。

src/components/Player.vue

@@ -44,6 +44,12 @@ function setMetadata() {
 		playQueueStore.duration = player.value?.duration?? 0
 		playQueueStore.currentTime = player.value?.currentTime?? 0
 	}
+
+	watch(() => playQueueStore.updatedCurrentTime, (newValue) => {
+		if (!newValue) { return }
+		if (player.value) player.value.currentTime = newValue
+		playQueueStore.updatedCurrentTime = null
+	})
 }
 
 function playNext() {

src/pages/Playroom.vue

@@ -5,7 +5,7 @@ import gsap from 'gsap'
 import { Draggable } from "gsap/Draggable"
 import { onMounted } from 'vue'
 import { useTemplateRef } from 'vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 
 const playQueueStore = usePlayQueueStore()
 gsap.registerPlugin(Draggable)
@@ -18,7 +18,13 @@ const displayTimeLeft = ref(false)
 onMounted(() => {
 	Draggable.create(progressBarThumb.value, {
 		type: 'x',
-		bounds: progressBarContainer.value
+		bounds: progressBarContainer.value,
+		onDrag: function() {
+			const thumbPosition = this.x
+			const containerWidth = progressBarContainer.value?.clientWidth || 0
+			const newTime = (thumbPosition / containerWidth) * playQueueStore.duration
+			playQueueStore.updatedCurrentTime = newTime
+		}
 	})
 
 })
@@ -31,7 +37,14 @@ function timeFormatter(time: number) {
 	return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
 }
 
-
+// 监听播放进度，更新进度条
+watch(() => playQueueStore.currentTime, () => {
+	const progress = playQueueStore.currentTime / playQueueStore.duration
+	const containerWidth = progressBarContainer.value?.clientWidth || 0
+	const thumbWidth = progressBarThumb.value?.clientWidth || 0
+	const newPosition = (containerWidth - thumbWidth) * progress
+	gsap.to(progressBarThumb.value, { x: newPosition, duration: 0.1 })
+})
 </script>
 
 <template>

src/stores/usePlayQueueStore.ts

@@ -9,6 +9,7 @@ export const usePlayQueueStore = defineStore('queue', () =>{
 	const isBuffering = ref<boolean>(false)
 	const currentTime = ref<number>(0)
 	const duration = ref<number>(0)
+	const updatedCurrentTime = ref<number | null>(null)
 
-  return { list, currentIndex, isPlaying, queueReplaceLock, isBuffering, currentTime, duration }
+  return { list, currentIndex, isPlaying, queueReplaceLock, isBuffering, currentTime, duration, updatedCurrentTime }
 })