From 5fedb8470b1521efeb08001da4087f727ba84519 Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Sun, 15 Jun 2025 20:36:04 +0800
Subject: [PATCH] Update

---
 .../editor/partials/canvas/video-editor.jsx   | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/resources/js/modules/editor/partials/canvas/video-editor.jsx b/resources/js/modules/editor/partials/canvas/video-editor.jsx
index 6203527..05c53b1 100644
--- a/resources/js/modules/editor/partials/canvas/video-editor.jsx
+++ b/resources/js/modules/editor/partials/canvas/video-editor.jsx
@@ -37,6 +37,8 @@ const VideoEditor = ({ width, height }) => {
 
     const { setVideoIsPlaying } = useVideoEditorStore();
 
+    const FPS_INTERVAL = 1000 / 30; // 30 FPS
+
     // 🔧 FIX: Keep ref synced with state
     useEffect(() => {
         timelineElementsRef.current = timelineElements;
@@ -322,7 +324,7 @@ const VideoEditor = ({ width, height }) => {
             return;
         }
 
-        let animationId;
+        let intervalId;
         let isRunning = true;
 
         const animateFrame = () => {
@@ -337,37 +339,31 @@ const VideoEditor = ({ width, height }) => {
                 return;
             }
 
-            if (newTime - lastUpdateRef.current >= 0.05) {
-                lastUpdateRef.current = newTime;
-                setCurrentTime(newTime);
-                updateVideoTimes(newTime);
+            lastUpdateRef.current = newTime;
+            setCurrentTime(newTime);
+            updateVideoTimes(newTime);
 
-                if (layerRef.current) {
-                    layerRef.current.batchDraw();
-                }
-            }
-
-            if (isRunning) {
-                animationId = requestAnimationFrame(animateFrame);
+            if (layerRef.current) {
+                layerRef.current.batchDraw();
             }
         };
 
         startTimeRef.current = Date.now() / 1000;
-        animationId = requestAnimationFrame(animateFrame);
+        intervalId = setInterval(animateFrame, FPS_INTERVAL);
 
         animationRef.current = {
             stop: () => {
                 isRunning = false;
-                if (animationId) {
-                    cancelAnimationFrame(animationId);
+                if (intervalId) {
+                    clearInterval(intervalId);
                 }
             },
         };
 
         return () => {
             isRunning = false;
-            if (animationId) {
-                cancelAnimationFrame(animationId);
+            if (intervalId) {
+                clearInterval(intervalId);
             }
         };
     }, [isPlaying, totalDuration, handlePause, updateVideoTimes]);