Update

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

@@ -1,6 +1,7 @@
 import { useMitt } from '@/plugins/MittContext';
 import useVideoEditorStore from '@/stores/VideoEditorStore';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import sampleTimelineElements from './sample-timeline-data';
 import useVideoExport from './video-export';
 import VideoPreview from './video-preview';
 
@@ -10,84 +11,7 @@ const VideoEditor = ({ width, height }) => {
         height: height,
     });
 
-    const [timelineElements, setTimelineElements] = useState([
-        {
-            id: '1',
-            type: 'video',
-            source_webm: 'https://cdn.memeaigen.com/g1/webm/they-not-like-us-oiia-cat-version.webm',
-            source_mov: 'https://cdn.memeaigen.com/g1/mov/they-not-like-us-oiia-cat-version.mov',
-            poster: 'https://cdn.memeaigen.com/g1/webp/they-not-like-us-oiia-cat-version.webp',
-            name: 'They not like us cat',
-            startTime: 0,
-            layer: 0,
-            inPoint: 0,
-            duration: 5,
-            x: 50,
-            y: 50,
-            width: 300,
-            height: 200,
-        },
-        {
-            id: '2',
-            type: 'video',
-            source_webm: 'https://cdn.memeaigen.com/g1/webm/sad-cat.webm',
-            source_mov: 'https://cdn.memeaigen.com/g1/mov/sad-cat.mov',
-            poster: 'https://cdn.memeaigen.com/g1/webp/sad-cat.webp',
-            name: 'Sad cat meme',
-            startTime: 6,
-            layer: 0,
-            inPoint: 2,
-            duration: 4,
-            x: 100,
-            y: 100,
-            width: 250,
-            height: 150,
-        },
-        {
-            id: '3',
-            type: 'video',
-            source_webm: 'https://cdn.memeaigen.com/g1/webm/este-cat-dance.webm',
-            source_mov: 'https://cdn.memeaigen.com/g1/mov/este-cat-dance.mov',
-            poster: 'https://cdn.memeaigen.com/g1/webp/este-cat-dance.webp',
-            name: 'Este cat dance',
-            startTime: 2,
-            layer: 1,
-            inPoint: 1,
-            duration: 6,
-            x: 200,
-            y: 200,
-            width: 280,
-            height: 180,
-        },
-        {
-            id: '4',
-            type: 'text',
-            text: 'Welcome to the Timeline!',
-            startTime: 1,
-            layer: 2,
-            duration: 3,
-            x: 50,
-            y: 600,
-            fontSize: 24,
-            fill: 'white',
-            stroke: 'black',
-            strokeWidth: 1,
-        },
-        {
-            id: '5',
-            type: 'text',
-            text: 'Multiple videos playing!',
-            startTime: 3,
-            layer: 3,
-            duration: 4,
-            x: 50,
-            y: 650,
-            fontSize: 20,
-            fill: 'yellow',
-            stroke: 'red',
-            strokeWidth: 2,
-        },
-    ]);
+    const [timelineElements, setTimelineElements] = useState([]);
 
     const lastUpdateRef = useRef(0);
     const emitter = useMitt();
@@ -106,6 +30,10 @@ const VideoEditor = ({ width, height }) => {
 
     const { setVideoIsPlaying } = useVideoEditorStore();
 
+    useEffect(() => {
+        setTimeout(() => setTimelineElements(sampleTimelineElements), 1000);
+    }, []);
+
     useEffect(() => {
         setVideoIsPlaying(isPlaying);
     }, [isPlaying, setVideoIsPlaying]);