feat: hue adjustment slider

src/components/VideoEditor.tsx

@@ -599,27 +599,27 @@ export default function VideoEditor() {
                           className="w-full accent-film-600"
                         />
                       </div>
-                      {/* Sharpness */}
                       <div className="space-y-2">
                         <div className="flex items-center justify-between text-xs">
-                          <label htmlFor="sharpness-slider">Sharpness</label>
+                          <label htmlFor="hue-slider">Hue</label>
                           <button
                             type="button"
-                            onClick={() => updateRecipe({ sharpness: 0 })}
+                            onClick={() => updateRecipe({ hue: 0 })}
                             className="text-film-500 hover:underline"
+                            aria-label="reset-hue"
                           >
                             Reset
                           </button>
                         </div>
                         <input
-                          id="sharpness-slider"
+                          id="hue-slider"
                           type="range"
-                          min="0"
-                          max="3"
+                          min="-180"
+                          max="180"
                           step="1"
-                          value={recipe.sharpness}
-                          onChange={(e) => updateRecipe({ sharpness: Number(e.target.value) })}
-                          aria-label="Adjust sharpness"
+                          value={recipe.hue}
+                          onChange={(e) => updateRecipe({ hue: Number(e.target.value) })}
+                          aria-label="Adjust hue"
                           className="w-full accent-film-600"
                         />
                       </div>

src/lib/constants.ts

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

src/lib/ffmpeg.ts

@@ -422,11 +422,13 @@ export function buildVideoFilter(recipe: EditRecipe, targetW: number, targetH: n
   const needsEq =
     recipe.brightness !== 0 ||
     recipe.contrast !== 1 ||
-    recipe.saturation !== 1;
+    recipe.saturation !== 1 || 
+    recipe.hue != 0;
 
   if (needsEq) {
     filters.push(
-      `eq=brightness=${recipe.brightness}:contrast=${recipe.contrast}:saturation=${recipe.saturation}`
+      `eq=brightness=${recipe.brightness}:contrast=${recipe.contrast}:saturation=${recipe.saturation}`,
+      ...(recipe.hue !== 0 ? [`hue=h=${recipe.hue}`] : [])
     );
   }
 

src/lib/types.ts

@@ -34,6 +34,7 @@ export interface EditRecipe {
   brightness: number;
   contrast: number;
   saturation: number;
+  hue: number;
   soundOnCompletion: boolean;
   sharpness: number;
   textOverlays: TextOverlay[];
@@ -145,6 +146,7 @@ export function isValidRecipe(value: unknown): value is EditRecipe {
   if (typeof v.brightness !== "number" || !isFinite(v.brightness)) return false;
   if (typeof v.contrast !== "number" || !isFinite(v.contrast)) return false;
   if (typeof v.saturation !== "number" || !isFinite(v.saturation)) return false;
+  if (typeof v.hue !== "number" || !isFinite(v.hue)) return false;  
   if (typeof v.soundOnCompletion !== "boolean") return false;
   if (!Array.isArray(v.textOverlays)) return false;