From 58e0726a7f8d8d8ee7c54fab976d17f7ee6813a8 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Thu, 9 Oct 2025 10:01:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=E6=92=AD=E6=94=BE=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E5=99=A8=E4=B8=AD=E6=B7=BB=E5=8A=A0=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E5=B8=A7=E5=AE=9A=E6=97=B6=E5=99=A8=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=92=AD=E6=94=BE=E6=97=B6=E9=97=B4=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=92=8C=E8=87=AA=E5=8A=A8=E6=9A=82=E5=81=9C=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PlaybackController.vue | 56 ++++++++++++++++++++++++++-
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/src/components/PlaybackController.vue b/src/components/PlaybackController.vue
index 2679c85..357f0ef 100644
--- a/src/components/PlaybackController.vue
+++ b/src/components/PlaybackController.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, onUnmounted } from 'vue';
 
 import { useTimelineTicks } from '../hooks/useTimelineTicks';
 
@@ -35,14 +35,66 @@ const { ticks } = useTimelineTicks(viewStartTime, viewEndTime);
 watch(
   () => props.currentTime,
   (newValue) => {
-    internalCurrentTime.value = newValue;
+    // Only update from prop if not playing
+    if (!props.isPlaying) {
+      internalCurrentTime.value = newValue;
+    }
     const newHour = Math.floor(newValue / HOUR_IN_MS);
     if (newHour !== selectedHour.value) {
       selectedHour.value = newHour;
     }
   },
+  { immediate: true },
 );
 
+// --- Animation Frame Timer for Playback ---
+let animationFrameId: number | null = null;
+let lastTimestamp: number | null = null;
+
+const animationLoop = (timestamp: number) => {
+  if (!lastTimestamp) {
+    lastTimestamp = timestamp;
+  }
+  const deltaTime = timestamp - lastTimestamp;
+  lastTimestamp = timestamp;
+
+  // Ensure we don't jump too far ahead if the tab was inactive
+  const clampedDelta = Math.min(deltaTime, 1000); // Max 1-second jump
+
+  const newTime = internalCurrentTime.value + clampedDelta;
+
+  if (newTime < props.totalDuration) {
+    internalCurrentTime.value = newTime;
+    // No need to emit timeupdate as per user decision
+    // emit('timeupdate', newTime);
+    animationFrameId = requestAnimationFrame(animationLoop);
+  } else {
+    internalCurrentTime.value = props.totalDuration;
+    emit('pause'); // Auto-pause at the end
+  }
+};
+
+watch(
+  () => props.isPlaying,
+  (isPlaying) => {
+    if (isPlaying) {
+      lastTimestamp = null; // Reset timestamp on play
+      animationFrameId = requestAnimationFrame(animationLoop);
+    } else {
+      if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+    }
+  },
+);
+
+onUnmounted(() => {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId);
+  }
+});
+
 // --- Computed properties for display and binding ---
 const formatTime = (ms: number): string => {
   if (isNaN(ms) || ms < 0) return '00:00:00';