feat: add video reverse playback option (closes #122)

src/components/VideoEditor.tsx

@@ -441,6 +441,32 @@ export default function VideoEditor() {
                     delay={100}
                   >
                     <RotateControl recipe={recipe} onChange={updateRecipe} />
+                    <div className="flex items-center justify-between pt-2">
+                        <label htmlFor="reverse-toggle" className="text-xs text-[var(--muted)] cursor-pointer">
+                            Reverse video
+                            {recipe.reverse && file && file.size > 100 * 1024 * 1024 && (
+                                <span className="ml-2 text-[var(--warning)]">⚠️ Large file — may be slow</span>
+                            )}
+                        </label>
+                        <button
+                            id="reverse-toggle"
+                            type="button"
+                            role="switch"
+                            aria-checked={recipe.reverse}
+                            onClick={() => updateRecipe({ reverse: !recipe.reverse })}
+                            className={cn(
+                                "relative inline-flex h-5 w-9 items-center rounded-full transition-colors duration-200",
+                                recipe.reverse ? "bg-film-600" : "bg-[var(--border)]"
+                            )}
+                        >
+                            <span
+                                className={cn(
+                                    "inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow transition-transform duration-200",
+                                    recipe.reverse ? "translate-x-4" : "translate-x-1"
+                                )}
+                            />
+                        </button>
+                    </div>
                   </AccordionSection>
 
                   <AccordionSection

src/lib/constants.ts

@@ -19,6 +19,7 @@ export const DEFAULT_RECIPE: EditRecipe = {
   contrast: 1,
   saturation: 1,
   stabilization: false,
+  reverse: false,
   denoise: false,
   soundOnCompletion: false,
   normalizeAudio: false,

src/lib/ffmpeg.ts

@@ -162,13 +162,19 @@ export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: n
     filters.push(buildTextFilter(overlay, targetW, targetH));
   });
 
+  if (recipe.reverse) {
+    filters.push("reverse");
+  }
+
   return filters.join(",");
 }
 
-export function buildAudioFilter(speed: number, normalizeAudio: boolean): string {
+export function buildAudioFilter(speed: number, normalizeAudio: boolean, reverse = false): string {
   if (speed <= 0) return "";
   const filters: string[] = [];
 
+  if (reverse) filters.push("areverse");
+
   let remaining = speed;
   while (remaining < 0.5) {
     filters.push("atempo=0.5");
@@ -213,7 +219,7 @@ function buildArguments(
 ): string[] {
   const vf = buildVideoFilter(recipe, targetW, targetH);
   const audioTrim = hasOriginalAudio ? buildAudioTrimFilter(recipe) : "";
-  const audioSpeed = hasOriginalAudio ? buildAudioFilter(recipe.speed, recipe.normalizeAudio ?? false) : "";
+  const audioSpeed = hasOriginalAudio ? buildAudioFilter(recipe.speed, recipe.normalizeAudio ?? false, recipe.reverse) : "";
   const afParts = [audioTrim, audioSpeed].filter(Boolean);
   const af = afParts.join(",");
 

src/lib/types.ts

@@ -27,6 +27,7 @@ export interface EditRecipe {
   quality: number;
   format: "mp4" | "webm" | "mkv" | "gif";
   stabilization: boolean;
+  reverse: boolean;
   denoise: boolean;
   brightness: number;
   contrast: number;
@@ -102,6 +103,7 @@ export function isValidRecipe(value: unknown): value is EditRecipe {
   if (typeof v.saturation !== "number" || !isFinite(v.saturation)) return false;
   if (typeof v.soundOnCompletion !== "boolean") return false;
   if (!Array.isArray(v.textOverlays)) return false;
+  if (typeof v.reverse !== "boolean") return false;
 
   return true;
 }