From f4dda3ae31315813fed988d076caa0cd147c1708 Mon Sep 17 00:00:00 2001
From: Devangee Jain <devangee20@gmail.com>
Date: Sun, 24 May 2026 21:54:59 +0530
Subject: [PATCH] feat: add video compression feature using ffmpeg.wasm

---
 next.config.ts                          |  15 ++-
 package.json                            |  12 +-
 src/app/layout.tsx                      |   2 +-
 src/components/ErrorBoundaryWrapper.tsx |   4 +
 src/components/ExportSettings.tsx       |  28 +++++
 src/components/VideoCompressor.tsx      | 159 ++++++++++++++++++++++++
 src/components/VideoEditor.tsx          |   8 +-
 7 files changed, 217 insertions(+), 11 deletions(-)
 create mode 100644 src/components/ErrorBoundaryWrapper.tsx
 create mode 100644 src/components/VideoCompressor.tsx

diff --git a/next.config.ts b/next.config.ts
index fb2f90ee..790b2c95 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,13 +1,22 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  output: "export",
-  // Required for ffmpeg.wasm to load WASM files correctly
-  // Without this, Next.js might try to process .wasm files and break them
+  // output: "export",  // ⚠️ Must disable this - static export doesn't support headers()
   webpack: (config) => {
     config.resolve.fallback = { fs: false };
     return config;
   },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
+          { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' },
+        ],
+      },
+    ];
+  },
 };
 
 export default nextConfig;
\ No newline at end of file
diff --git a/package.json b/package.json
index b503f760..ed5da9bf 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@ffmpeg/ffmpeg": "^0.12.10",
+    "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
     "clsx": "^2.1.1",
     "focus-trap-react": "^12.0.1",
@@ -25,6 +25,9 @@
     "wasm-feature-detect": "^1.8.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/bun": "^1.3.14",
     "@types/node": "^25",
     "@types/react": "^19",
@@ -32,13 +35,10 @@
     "eslint": "^9",
     "eslint-config-next": "^15.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
+    "jsdom": "^22.1.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.17",
     "typescript": "^5",
-    "vitest": "^4.1.6",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "jsdom": "^22.1.0",
-    "@testing-library/jest-dom": "^6.0.0"
+    "vitest": "^4.1.6"
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f17960b2..fa03832b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Bebas_Neue, Syne, DM_Sans } from "next/font/google";
-import ErrorBoundary from "@/components/ErrorBoundary";
+import ErrorBoundary from "@/components/ErrorBoundaryWrapper";
 import "./globals.css";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { ThemeToggle } from "@/components/ThemeToggle";
diff --git a/src/components/ErrorBoundaryWrapper.tsx b/src/components/ErrorBoundaryWrapper.tsx
new file mode 100644
index 00000000..2e4e8dd6
--- /dev/null
+++ b/src/components/ErrorBoundaryWrapper.tsx
@@ -0,0 +1,4 @@
+"use client";
+
+import ErrorBoundary from "@/components/ErrorBoundary";
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/src/components/ExportSettings.tsx b/src/components/ExportSettings.tsx
index 49f21bc9..f7b711fa 100644
--- a/src/components/ExportSettings.tsx
+++ b/src/components/ExportSettings.tsx
@@ -5,7 +5,10 @@ import { cn } from "@/lib/utils";
 import {
   SlidersHorizontal,
   Info as InfoIcon,
+  Zap,
 } from "lucide-react";
+import React, { useState } from "react";
+import VideoCompressor from "@/components/VideoCompressor";
 
 import {
   estimateExportSize,
@@ -13,6 +16,7 @@ import {
 } from "@/lib/exportEstimate";
 
 interface Props {
+  videoFile: File | null;
   recipe: EditRecipe;
   duration: number;
   onChange: (
@@ -23,6 +27,7 @@ interface Props {
 export default function ExportSettings({
   recipe,
   duration,
+  videoFile,
   onChange,
 }: Props) {
   const label =
@@ -41,6 +46,7 @@ export default function ExportSettings({
         duration
       )
     );
+    const [isCompressEnabled, setIsCompressEnabled] = useState(false);
 
   return (
     <>
@@ -141,6 +147,28 @@ export default function ExportSettings({
         )}
       </div>
 
+ <div className="mt-6 pt-6 border-t border-gray-700">
+  <div className="flex items-center justify-between mb-4">
+    <label className="text-sm font-heading font-semibold uppercase tracking-wider text-[var(--muted)] flex items-center gap-2">
+      <Zap size={14} className="text-yellow-400" />
+      Compress Video
+    </label>
+    <input
+      type="checkbox"
+      checked={isCompressEnabled}
+      onChange={(e) => setIsCompressEnabled(e.target.checked)}
+      className="accent-film-600 cursor-pointer"
+    />
+  </div>
+
+  {isCompressEnabled && (
+    <div className="mt-2 mb-4">
+      <VideoCompressor videoFile={videoFile} />
+    </div>
+  )}
+</div>
+      
+
       <div>
         <div className="flex items-center justify-between mb-1">
           <label
diff --git a/src/components/VideoCompressor.tsx b/src/components/VideoCompressor.tsx
new file mode 100644
index 00000000..e189d069
--- /dev/null
+++ b/src/components/VideoCompressor.tsx
@@ -0,0 +1,159 @@
+"use client";
+import React, { useState, useRef, useEffect } from 'react';
+import { Download, Settings2, Zap } from 'lucide-react';
+
+interface VideoCompressorProps {
+  videoFile: File | null;
+}
+
+const VideoCompressor: React.FC<VideoCompressorProps> = ({ videoFile }) => {
+  const [isCompressing, setIsCompressing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [status, setStatus] = useState('Loading FFmpeg...');
+  const [compressedBlob, setCompressedBlob] = useState<Blob | null>(null);
+  const [showSettings, setShowSettings] = useState(false);
+  const [preset, setPreset] = useState<'balanced' | 'small'>('balanced');
+  const ffmpegRef = useRef<any>(null);
+
+  useEffect(() => {
+    const loadScript = (src: string): Promise<void> =>
+      new Promise((resolve, reject) => {
+        if (document.querySelector(`script[src="${src}"]`)) return resolve();
+        const s = document.createElement('script');
+        s.src = src;
+        s.onload = () => resolve();
+        s.onerror = () => reject(new Error(`Failed to load ${src}`));
+        document.body.appendChild(s);
+      });
+
+    const init = async () => {
+      try {
+        // ✅ v0.11.x - no SharedArrayBuffer, no Worker CORS issues
+        await loadScript('https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js');
+        setStatus('Ready');
+      } catch (err) {
+        setStatus('Failed to load FFmpeg');
+        console.error(err);
+      }
+    };
+    init();
+  }, []);
+
+  const compressVideo = async () => {
+    if (!videoFile) return;
+
+    const { createFFmpeg, fetchFile } = (window as any).FFmpeg;
+
+    if (!createFFmpeg) {
+      setStatus('FFmpeg not loaded yet.');
+      return;
+    }
+
+    setIsCompressing(true);
+    setProgress(0);
+
+    try {
+      // ✅ corePath points to v0.11.x core - no worker spawning
+      const ffmpeg = createFFmpeg({
+        corePath: 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.10.0/dist/ffmpeg-core.js',
+        progress: ({ ratio }: { ratio: number }) => {
+          setProgress(Math.min(99, Math.round(ratio * 100)));
+        },
+        log: false,
+      });
+
+      ffmpegRef.current = ffmpeg;
+
+      setStatus('Loading FFmpeg core...');
+      await ffmpeg.load();
+
+      setStatus('Writing file...');
+      ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(videoFile));
+
+      setStatus('Compressing...');
+      const args = preset === 'small'
+        ? ['-i', 'input.mp4', '-vcodec', 'libx264', '-crf', '28', '-preset', 'veryfast', '-acodec', 'aac', 'output.mp4']
+        : ['-i', 'input.mp4', '-vcodec', 'libx264', '-crf', '23', '-preset', 'medium', '-acodec', 'aac', 'output.mp4'];
+
+      await ffmpeg.run(...args);
+
+      setStatus('Finalizing...');
+      const data = ffmpeg.FS('readFile', 'output.mp4');
+      const blob = new Blob([data.buffer], { type: 'video/mp4' });
+
+      setCompressedBlob(blob);
+      setProgress(100);
+      setStatus('Done!');
+    } catch (err) {
+      console.error(err);
+      setStatus(`Error: ${(err as Error).message}`);
+    } finally {
+      setIsCompressing(false);
+    }
+  };
+
+  return (
+    <div className="p-4 bg-gray-900 text-white rounded-xl border border-gray-700 shadow-xl max-w-sm">
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="font-semibold flex items-center gap-2">
+          <Zap className="text-yellow-400" /> Compression Tool
+        </h3>
+        <button onClick={() => setShowSettings(!showSettings)} className="p-2 hover:bg-gray-800 rounded-full">
+          <Settings2 size={18} />
+        </button>
+      </div>
+
+      {showSettings && (
+        <div className="mb-4 bg-gray-800 p-3 rounded-lg text-sm">
+          <label className="block mb-2 text-gray-400">Choose Preset</label>
+          <select
+            value={preset}
+            onChange={(e) => setPreset(e.target.value as 'balanced' | 'small')}
+            className="w-full bg-gray-900 border border-gray-700 rounded p-2"
+          >
+            <option value="balanced">Balanced (Recommended)</option>
+            <option value="small">Smallest Size</option>
+          </select>
+        </div>
+      )}
+
+      <p className="text-xs text-gray-400 mb-3">Status: {status}</p>
+
+      {!isCompressing && !compressedBlob && (
+        <button
+          onClick={compressVideo}
+          disabled={status !== 'Ready'}
+          className="w-full bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed py-2 rounded-lg font-medium transition"
+        >
+          Export & Compress
+        </button>
+      )}
+
+      {isCompressing && (
+        <div className="space-y-2">
+          <div className="flex justify-between text-xs text-gray-400">
+            <span>{status}</span>
+            <span>{progress}%</span>
+          </div>
+          <div className="w-full bg-gray-700 h-2 rounded-full overflow-hidden">
+            <div className="bg-indigo-500 h-full transition-all" style={{ width: `${progress}%` }} />
+          </div>
+        </div>
+      )}
+      
+      {compressedBlob && (
+       <a 
+          href={URL.createObjectURL(compressedBlob)}
+          download="compressed_video.mp4"
+          className="w-full flex items-center justify-center gap-2 bg-green-600 py-2 rounded-lg font-medium hover:bg-green-500 transition"
+        >
+          <Download size={18} /> Download Video
+        </a>
+      )}
+
+    </div>  
+  );        
+};          
+
+
+export default VideoCompressor;
\ No newline at end of file
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 8e7164cd..99d7345b 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -377,7 +377,13 @@ export default function VideoEditor() {
                     <FormatSelector recipe={recipe} onChange={updateRecipe} />
                   </Section>
                   <Section icon={<SlidersHorizontal size={12} />} title="Export quality" delay={200}>
-                    <ExportSettings recipe={recipe} duration={duration} onChange={updateRecipe} />
+                   
+                    <ExportSettings
+  recipe={recipe}
+  duration={duration}
+  videoFile={file}
+  onChange={updateRecipe}
+/>
                   </Section>
                   <Section icon={<Layers size={12} />} title="Image overlay" delay={120}>
                     <ImageOverlay