React.js VideoEditor Integration

{
  "scripts": {
    "postinstall": "node scripts/copy-wasm.js"
  }
}

const fs = require('fs');
const path = require('path');

const files = [
  'MediaInfoModule.wasm',
  'worker.js',
  'const.js',
  'errors.js',
  'decode_worker.js',
  'encode_worker.js',
];

files.forEach(file => {
  const src = path.join(__dirname, '../node_modules/@distralabs/media-editor/dist', file);
  const dest = path.join(__dirname, '../public', file);
  fs.copyFileSync(src, dest);
  console.log(`✓ Copied ${file}`);
});

// Copy umd directory
const umdSrc = path.join(__dirname, '../node_modules/@distralabs/media-editor/dist/umd');
const umdDest = path.join(__dirname, '../public/umd');
fs.cpSync(umdSrc, umdDest, { recursive: true });
console.log('✓ Copied umd/ directory');

import React, { useState, useCallback, useRef } from 'react';
import { VideoEditor } from '@distralabs/media-editor';
import '@distralabs/media-editor/dist/index.css';

const videoTheme = {
  'background.primary': '#0f172a',
  'background.secondary': '#1e293b',
  'text.primary': '#ffffff',
  'accent.primary': '#3b82f6',
};

function VideoStudio() {
  const fileInputRef = useRef(null);
  const [selectedFile, setSelectedFile] = useState(null);
  const [showEditor, setShowEditor] = useState(false);
  const [exportedVideo, setExportedVideo] = useState(null);
  const [isExporting, setIsExporting] = useState(false);

  const handleFileSelect = (e) => {
    const file = e.target.files?.[0];
    if (file && file.type.startsWith('video/')) {
      setSelectedFile(file);
      setShowEditor(true);
    }
  };

  const handleExport = useCallback((result) => {
    setIsExporting(false);
    if (result.videoUrl) {
      setExportedVideo(result.videoUrl);
      setShowEditor(false);
    }
  }, []);

  const handleClose = () => {
    setShowEditor(false);
    setSelectedFile(null);
  };

  const handleDownload = () => {
    if (exportedVideo) {
      const link = document.createElement('a');
      link.href = exportedVideo;
      link.download = `edited-video-${Date.now()}.mp4`;
      link.click();
    }
  };

  return (
    <div className="video-studio">
      {!showEditor && (
        <input
          ref={fileInputRef}
          type="file"
          accept="video/*"
          onChange={handleFileSelect}
        />
      )}

      {showEditor && selectedFile && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 40 }}>
          <VideoEditor
            licenseKey="YOUR_LICENSE_KEY"
            apiUrl="https://localhost:3030/social"
            defaultVideo={selectedFile}
            onClose={handleClose}
            onExport={handleExport}
            theme={videoTheme}
            showThemeCreator={false}
          />
        </div>
      )}

      {isExporting && (
        <div className="loading-overlay">
          <p>Exporting your video...</p>
          <p>This may take a moment</p>
        </div>
      )}

      {exportedVideo && (
        <div className="preview">
          <video src={exportedVideo} controls />
          <button onClick={handleDownload}>Download</button>
        </div>
      )}
    </div>
  );
}

export default VideoStudio;