Merge pull request #2 from Nackapatz/claude/video-merger-migration-bw4wib

Add editing/export features, redesign UI, and add cross-platform scripts

Author: johannesWen

README.md

@@ -59,16 +59,31 @@ A browser-first MP4 merger built with Vite, React, TypeScript, `@dnd-kit`, and `
 
 ## Features
 
-- **Drag & Drop Upload** – Add multiple `.mp4` files via picker, drop zone, or paste.
+- **Drag & Drop Upload** – Add multiple video files (`.mp4`, `.mov`, `.webm`, `.mkv`) via picker, drop zone, or paste.
 - **Smart Auto-Sort** – Clips are automatically ordered by file modification time.
 - **Clip Inspector** – See duration, resolution, aspect ratio, and audio stream info per clip.
 - **Sortable Timeline** – Reorder clips with mouse or keyboard via `@dnd-kit`.
 - **Trim Segments** – Cut in/out points on any clip before merging.
-- **Flexible Output** – Choose from common output aspect ratios (16:9, 9:16, 1:1, 4:3, etc.).
+- **Split Clip** – Split a clip into two independent clips at the playhead.
+- **Duplicate & Rename** – Duplicate any clip, or double-click its name to rename it.
+- **Undo / Redo** – Step back and forward through timeline edits (`Ctrl/Cmd+Z`, `Ctrl/Cmd+Shift+Z`).
+- **Per-Clip Volume & Mute** – Adjust or silence individual clips.
+- **Per-Clip Speed** – Slow down or speed up a clip from 0.5x–2x.
+- **Fade In / Out** – Add audio+video fades per clip.
+- **Color Adjustment** – Brightness, contrast, and saturation per clip.
+- **Watermark Overlay** – Burn in a logo image at any corner or center, with adjustable opacity.
+- **Background Music** – Mix in a looping music track under the merged audio.
+- **GIF Export** – Convert the merged result to an animated GIF.
+- **Flexible Output** – Choose from common output aspect ratios (16:9, 9:16, 1:1) plus ready-made social presets (Instagram Reel, TikTok, YouTube Shorts, Instagram Story, Square Post).
 - **Aspect Ratio Fit** – Mismatched source frames are placed over a blurred background to fill the canvas.
 - **Audio Normalization** – Clips without audio receive a silent AAC track so mixed projects merge cleanly.
 - **Hybrid Engine** – Falls back to native backend FFmpeg for larger projects; browser FFmpeg for everything else.
-- **100% Private** – Files are processed locally in the browser. Nothing is uploaded to a server.
+- **Autosave & Restore** – Project settings are autosaved locally; reload the app and restore/relink clips.
+- **Live ETA** – See an estimated time remaining while merging.
+- **Error Log Export** – Download a text log of everything that went wrong during a session.
+- **Keyboard Shortcuts Cheat Sheet** – Press `?` for a quick reference.
+- **Light & Dark Theme** – Toggle from the toolbar; respects your OS preference by default.
+- **100% Private** – Files are processed locally in the browser by default. Nothing is uploaded to a server unless you opt into backend mode.
 - **Modern UI** – React 18 + Lucide icons, accessible keyboard interactions.
 
 ---
@@ -171,6 +186,18 @@ ffprobe -version
 
 ## Getting Started
 
+### Quick start scripts
+
+Cross-platform launcher and build scripts are included so you don't need to remember npm commands:
+
+| Platform        | Start dev servers | Build for production |
+| --------------- | ------------------ | --------------------- |
+| Windows         | `start.bat`         | `build.bat`            |
+| macOS           | `start.command`     | `build.command`        |
+| Linux / macOS   | `./start.sh`        | `./build.sh`           |
+
+Each script checks for Node.js, runs `npm install` if `node_modules` is missing, and then starts the dev servers or produces a production build in `dist/`.
+
 Start both the frontend and backend dev servers in one command:
 
 ```bash

build.bat

@@ -0,0 +1,31 @@
+@echo off
+setlocal
+cd /d "%~dp0"
+
+where node >nul 2>nul
+if errorlevel 1 (
+  echo Node.js is required but was not found on PATH. Install it from https://nodejs.org/ and try again.
+  pause
+  exit /b 1
+)
+
+if not exist "node_modules" (
+  echo Installing dependencies...
+  call npm install
+  if errorlevel 1 (
+    echo npm install failed.
+    pause
+    exit /b 1
+  )
+)
+
+echo Building Video Merger for production...
+call npm run build
+if errorlevel 1 (
+  echo Build failed.
+  pause
+  exit /b 1
+)
+
+echo Build complete. Output is in the "dist" folder.
+pause

build.command

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+cd "$(dirname "${BASH_SOURCE[0]}")"
+./build.sh

build.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+set -euo pipefail
+cd "$(dirname "${BASH_SOURCE[0]}")"
+
+if ! command -v node >/dev/null 2>&1; then
+  echo "Node.js is required but was not found on PATH. Install it from https://nodejs.org/ and try again."
+  exit 1
+fi
+
+if [ ! -d "node_modules" ]; then
+  echo "Installing dependencies..."
+  npm install
+fi
+
+echo "Building Video Merger for production..."
+npm run build
+
+echo "Build complete. Output is in the \"dist\" folder."

src/backend/ffmpegCommands.ts

@@ -1,4 +1,5 @@
-import type { ClipRotation, OutputSettings, TrimSegment, VideoMetadata } from "../shared/types";
+import type { ClipRotation, ColorAdjust, OutputSettings, TrimSegment, VideoMetadata } from "../shared/types";
+import { defaultColorAdjust } from "../shared/types";
 import {
   buildIndexedAudioFilter,
   createRemuxSegmentsArgs,
@@ -11,6 +12,73 @@ export interface BackendClip {
   metadata: VideoMetadata;
   rotation: ClipRotation;
   trimSegments?: TrimSegment[];
+  volume: number;
+  muted: boolean;
+  speed: number;
+  fadeIn: number;
+  fadeOut: number;
+  colorAdjust: ColorAdjust;
+}
+
+export interface ClipEffects {
+  volume: number;
+  muted: boolean;
+  speed: number;
+  fadeIn: number;
+  fadeOut: number;
+  colorAdjust: ColorAdjust;
+}
+
+export function parseClipEffects(rawEffects: unknown, length: number): ClipEffects[] {
+  const fallback = (): ClipEffects[] =>
+    Array.from({ length }, () => ({
+      volume: 1,
+      muted: false,
+      speed: 1,
+      fadeIn: 0,
+      fadeOut: 0,
+      colorAdjust: { ...defaultColorAdjust }
+    }));
+
+  if (typeof rawEffects !== "string" || length === 0) {
+    return fallback();
+  }
+
+  try {
+    const parsed = JSON.parse(rawEffects) as unknown;
+    if (!Array.isArray(parsed) || parsed.length !== length) {
+      return fallback();
+    }
+    return parsed.map((value) => normalizeClipEffects(value));
+  } catch {
+    return fallback();
+  }
+}
+
+function normalizeClipEffects(value: unknown): ClipEffects {
+  const entry = (value && typeof value === "object" ? value : {}) as Partial<ClipEffects>;
+  const colorAdjustRaw = (entry.colorAdjust ?? {}) as Partial<ColorAdjust>;
+
+  return {
+    volume: clampNumber(entry.volume, 0, 2, 1),
+    muted: entry.muted === true,
+    speed: clampNumber(entry.speed, 0.5, 2, 1),
+    fadeIn: clampNumber(entry.fadeIn, 0, 30, 0),
+    fadeOut: clampNumber(entry.fadeOut, 0, 30, 0),
+    colorAdjust: {
+      brightness: clampNumber(colorAdjustRaw.brightness, -1, 1, 0),
+      contrast: clampNumber(colorAdjustRaw.contrast, 0, 3, 1),
+      saturation: clampNumber(colorAdjustRaw.saturation, 0, 3, 1)
+    }
+  };
+}
+
+function clampNumber(value: unknown, min: number, max: number, fallback: number): number {
+  const numeric = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(numeric)) {
+    return fallback;
+  }
+  return Math.min(max, Math.max(min, numeric));
 }
 
 export { buildIndexedAudioFilter, createRemuxSegmentsArgs, createSegmentArgs, getVideoBitrate };