VideoEditor

'use client';

import dynamic from 'next/dynamic';

const VideoEditor = dynamic(
  () => import('@distralabs/media-editor').then(mod => ({ default: mod.VideoEditor })),
  { ssr: false }
);

public/
├── MediaInfoModule.wasm (2.3 MB)
├── worker.js
├── const.js
├── errors.js
├── decode_worker.js
├── encode_worker.js
└── umd/
    └── ffmpeg-core.wasm (31 MB)

async rewrites() {
  return [
    {
      source: '/studio/:path(MediaInfoModule.wasm|worker.js|const.js|errors.js|decode_worker.js|encode_worker.js)',
      destination: '/:path',
    },
    {
      source: '/studio/umd/:path*',
      destination: '/umd/:path*',
    },
  ];
}

'use client';

import { useState, useCallback, useRef } from 'react';
import dynamic from 'next/dynamic';

const VideoEditor = dynamic(
  () => import('@distralabs/media-editor').then(mod => ({ default: mod.VideoEditor })),
  { ssr: false }
);

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

export default function VideoStudioPage() {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [showEditor, setShowEditor] = useState(false);
  const [isExporting, setIsExporting] = useState(false);

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

  const handleExport = useCallback((result: any) => {
    setIsExporting(false);

    if (result.videoUrl) {
      // Download
      const link = document.createElement('a');
      link.href = result.videoUrl;
      link.download = `edited-${Date.now()}.mp4`;
      link.click();

      setShowEditor(false);
    }
  }, []);

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

  return (
    <div className="min-h-screen p-6">
      {!showEditor && (
        <div>
          <h1 className="text-3xl font-bold mb-4">Video Studio</h1>
          <input
            ref={fileInputRef}
            type="file"
            accept="video/*"
            onChange={handleFileSelect}
            className="hidden"
          />
          <button
            onClick={() => fileInputRef.current?.click()}
            className="px-6 py-3 bg-blue-500 text-white rounded-lg"
          >
            Choose Video
          </button>
        </div>
      )}

      {showEditor && selectedFile && (
        <div className="fixed inset-0 z-50">
          <VideoEditor
            licenseKey={process.env.NEXT_PUBLIC_LICENSE_KEY || ''}
            apiUrl="https://localhost:3030/social"
            defaultVideo={selectedFile}
            onClose={handleClose}
            onExport={handleExport}
            theme={customTheme}
            showThemeCreator={false}
          />
        </div>
      )}

      {/* Export Loading Overlay */}
      {isExporting && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90">
          <div className="text-center">
            <div className="animate-spin rounded-full h-16 w-16 border-4 border-blue-500 border-t-transparent mx-auto" />
            <p className="text-white mt-4 text-xl">Exporting video...</p>
            <p className="text-gray-400 text-sm">This may take 1-2 minutes</p>
          </div>
        </div>
      )}
    </div>
  );
}