Update

resources/js/modules/editor/partials/canvas/video-editor.jsx

@@ -46,16 +46,34 @@ const VideoEditor = ({ width, height }) => {
 
     // ✅ FIX 1: Use useEffect to automatically setup videos when timeline loads
     useEffect(() => {
-        setTimeout(() => {
-            setTimelineElements(sampleTimelineElements);
-            showConsoleLogs && console.log('Loaded sample timeline');
-
-            setTimeout(() => {
-                setupVideos();
-            }, 1000);
-        }, 1000);
+        initTimeline();
     }, []);
 
+    const timelineUpdateResolverRef = useRef(null);
+
+    const setTimelineElementsAsync = useCallback((newElements) => {
+        return new Promise((resolve) => {
+            timelineUpdateResolverRef.current = resolve;
+            setTimelineElements(newElements);
+        });
+    }, []);
+
+    // Add this useEffect to resolve the promise when timeline updates
+    useEffect(() => {
+        if (timelineUpdateResolverRef.current && timelineElements.length > 0) {
+            timelineUpdateResolverRef.current();
+            timelineUpdateResolverRef.current = null;
+        }
+    }, [timelineElements]);
+
+    const initTimeline = () => {
+        cleanupVideos();
+        setTimelineElementsAsync(sampleTimelineElements).then(() => {
+            showConsoleLogs && console.log('Loaded sample timeline');
+
+            setupVideos();
+        });
+    };
     // ✅ FIX 3: Auto-update status when videos load
     useEffect(() => {
         setupVideoStatus();