94 lines
3.0 KiB
JavaScript
94 lines
3.0 KiB
JavaScript
// 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;
|