Update

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,7 +339,6 @@ const VideoEditor = ({ width, height }) => {
                 return;
             }
 
-            if (newTime - lastUpdateRef.current >= 0.05) {
             lastUpdateRef.current = newTime;
             setCurrentTime(newTime);
             updateVideoTimes(newTime);
@@ -345,29 +346,24 @@ const VideoEditor = ({ width, height }) => {
             if (layerRef.current) {
                 layerRef.current.batchDraw();
             }
-            }
-
-            if (isRunning) {
-                animationId = requestAnimationFrame(animateFrame);
-            }
         };
 
         startTimeRef.current = Date.now() / 1000;
-        animationId = requestAnimationFrame(animateFrame);
+        intervalId = setInterval(animateFrame, FPS_INTERVAL);
 
         animationRef.current = {
             stop: () => {
                 isRunning = false;
-                if (animationId) {
+                if (intervalId) {
-                    cancelAnimationFrame(animationId);
+                    clearInterval(intervalId);
                 }
             },
         };
 
         return () => {
             isRunning = false;
-            if (animationId) {
+            if (intervalId) {
-                cancelAnimationFrame(animationId);
+                clearInterval(intervalId);
             }
         };
     }, [isPlaying, totalDuration, handlePause, updateVideoTimes]);