Update

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

@@ -0,0 +1,93 @@
+// Use minimal react-konva core to avoid Node.js dependencies
+import 'konva/lib/Animation';
+import 'konva/lib/shapes/Image';
+import 'konva/lib/shapes/Text';
+import { Image, Layer, Stage, Text } from 'react-konva/lib/ReactKonvaCore';
+
+const VideoPreview = ({
+    // Dimensions
+    dimensions,
+
+    // Timeline state
+    currentTime,
+    totalDuration,
+    isPlaying,
+    status,
+
+    // Export state
+    isExporting,
+    exportProgress,
+    exportStatus,
+
+    // Data
+    timelineElements,
+    activeElements,
+    videoElements,
+    loadedVideos,
+    videoStates,
+    ffmpegCommand,
+
+    // Event handlers
+    handlePlay,
+    handlePause,
+    handleReset,
+    handleSeek,
+    copyFFmpegCommand,
+    exportVideo,
+
+    // Refs
+    layerRef,
+}) => {
+    return (
+        <div>
+            <Stage width={dimensions.width} height={dimensions.height} className="">
+                <Layer ref={layerRef}>
+                    {activeElements.map((element) => {
+                        if (element.type === 'video' && videoElements[element.id]) {
+                            return (
+                                <Image
+                                    key={element.id}
+                                    image={videoElements[element.id]}
+                                    x={element.x}
+                                    y={element.y}
+                                    width={element.width}
+                                    height={element.height}
+                                    draggable
+                                />
+                            );
+                        } else if (element.type === 'text') {
+                            return (
+                                <Text
+                                    key={element.id}
+                                    text={element.text}
+                                    x={element.x}
+                                    y={element.y}
+                                    fontSize={element.fontSize}
+                                    fill={element.fill}
+                                    stroke={element.stroke}
+                                    strokeWidth={element.strokeWidth}
+                                    draggable
+                                />
+                            );
+                        } else if (element.type === 'image' && element.imageElement) {
+                            return (
+                                <Image
+                                    key={element.id}
+                                    image={element.imageElement}
+                                    x={element.x}
+                                    y={element.y}
+                                    width={element.width}
+                                    height={element.height}
+                                    draggable
+                                />
+                            );
+                        }
+                        return null;
+                    })}
+                </Layer>
+            </Stage>
+        </div>
+    );
+};
+
+export default VideoPreview;