feat: GIF quality and compression preset

src/components/video-editor/ExportSettingsMenu.test.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vitest";
+import { I18nProvider } from "@/contexts/I18nContext";
+import { ExportSettingsMenu } from "./ExportSettingsMenu";
+
+vi.mock("motion/react", () => ({
+	LayoutGroup: ({ children }: { children: ReactNode }) => children ?? null,
+	motion: {
+		span: ({ children }: { children?: ReactNode }) => children ?? null,
+	},
+}));
+
+describe("ExportSettingsMenu", () => {
+	it("renders the three GIF quality options", () => {
+		const html = renderToStaticMarkup(
+			<I18nProvider>
+				<ExportSettingsMenu
+					exportFormat="gif"
+					exportQuality="source"
+					exportEncodingMode="balanced"
+					mp4FrameRate={30}
+					gifFrameRate={15}
+					gifLoop={true}
+					gifSizePreset="medium"
+					gifQualityPreset="balanced"
+					gifOutputDimensions={{ width: 1280, height: 720 }}
+				/>
+			</I18nProvider>,
+		);
+
+		expect(html).toContain("High");
+		expect(html).toContain("Balanced");
+		expect(html).toContain("Small file");
+	});
+});

src/components/video-editor/ExportSettingsMenu.tsx

@@ -11,9 +11,15 @@ import type {
 	ExportPipelineModel,
 	ExportQuality,
 	GifFrameRate,
+	GifQualityPreset,
 	GifSizePreset,
 } from "@/lib/exporter";
-import { GIF_FRAME_RATES, GIF_SIZE_PRESETS, MP4_FRAME_RATES } from "@/lib/exporter";
+import {
+	GIF_FRAME_RATES,
+	GIF_QUALITY_PRESETS,
+	GIF_SIZE_PRESETS,
+	MP4_FRAME_RATES,
+} from "@/lib/exporter";
 
 interface ExportSettingsMenuProps {
 	exportFormat: ExportFormat;
@@ -38,6 +44,8 @@ interface ExportSettingsMenuProps {
 	onGifLoopChange?: (loop: boolean) => void;
 	gifSizePreset: GifSizePreset;
 	onGifSizePresetChange?: (preset: GifSizePreset) => void;
+	gifQualityPreset: GifQualityPreset;
+	onGifQualityPresetChange?: (preset: GifQualityPreset) => void;
 	gifOutputDimensions: { width: number; height: number };
 	onExport?: () => void;
 	className?: string;
@@ -119,6 +127,8 @@ export function ExportSettingsMenu({
 	onGifLoopChange,
 	gifSizePreset,
 	onGifSizePresetChange,
+	gifQualityPreset,
+	onGifQualityPresetChange,
 	gifOutputDimensions,
 	onExport,
 	className,
@@ -257,6 +267,20 @@ export function ExportSettingsMenu({
 								label: preset.label,
 							}))}
 						/>
+						<Choices
+							label={tSettings("export.gifQuality", "Quality")}
+							value={gifQualityPreset}
+							onChange={onGifQualityPresetChange}
+							options={Object.entries(GIF_QUALITY_PRESETS).map(([key, preset]) => ({
+								value: key as GifQualityPreset,
+								label:
+									key === "high"
+										? tSettings("export.gifQualityHigh", preset.label)
+										: key === "balanced"
+											? tSettings("export.gifQualityBalanced", preset.label)
+											: tSettings("export.gifQualitySmall", preset.label),
+							}))}
+						/>
 						<Description>
 							{gifOutputDimensions.width} × {gifOutputDimensions.height}px
 						</Description>

src/components/video-editor/editorPreferences.test.ts

@@ -110,6 +110,20 @@ describe("editorPreferences", () => {
 		expect(DEFAULT_EDITOR_PREFERENCES.exportQuality).toBe("source");
 	});
 
+	it("defaults GIF quality to balanced and clamps invalid stored presets", () => {
+		vi.stubGlobal(
+			"localStorage",
+			createStorageMock({
+				[EDITOR_PREFERENCES_STORAGE_KEY]: JSON.stringify({
+					gifQualityPreset: "tiny",
+				}),
+			}),
+		);
+
+		expect(DEFAULT_EDITOR_PREFERENCES.gifQualityPreset).toBe("balanced");
+		expect(loadEditorPreferences().gifQualityPreset).toBe("balanced");
+	});
+
 	it("defaults cursor preferences to Tahoe at 2.5x with gentler sway", () => {
 		expect(DEFAULT_EDITOR_PREFERENCES.cursorStyle).toBe("tahoe");
 		expect(DEFAULT_EDITOR_PREFERENCES.cursorSize).toBe(2.5);
@@ -192,6 +206,7 @@ describe("editorPreferences", () => {
 					exportFormat: "gif",
 					gifFrameRate: 30,
 					gifLoop: false,
+					gifQualityPreset: "small",
 					customAspectWidth: "21",
 					customAspectHeight: "9",
 					customWallpapers: ["data:image/jpeg;base64,abc"],
@@ -209,6 +224,7 @@ describe("editorPreferences", () => {
 			exportFormat: "gif",
 			gifFrameRate: 30,
 			gifLoop: false,
+			gifQualityPreset: "small",
 			customAspectWidth: "21",
 			customAspectHeight: "9",
 			customWallpapers: ["data:image/jpeg;base64,abc"],
@@ -305,6 +321,7 @@ describe("editorPreferences", () => {
 			gifFrameRate: 20,
 			gifLoop: false,
 			gifSizePreset: "large",
+			gifQualityPreset: "small",
 			customAspectWidth: "4",
 			customAspectHeight: "5",
 			customWallpapers: ["data:image/jpeg;base64,abc", "data:image/jpeg;base64,abc"],
@@ -335,6 +352,7 @@ describe("editorPreferences", () => {
 			gifFrameRate: 20,
 			gifLoop: false,
 			gifSizePreset: "large",
+			gifQualityPreset: "small",
 			customAspectWidth: "4",
 			customAspectHeight: "5",
 			customWallpapers: ["data:image/jpeg;base64,abc"],

src/components/video-editor/export/useExportDialogActions.ts

@@ -79,6 +79,7 @@ export function useExportDialogActions({
 				gifFrameRate: settings.gifFrameRate,
 				gifLoop: settings.gifLoop,
 				gifSizePreset: settings.gifSizePreset,
+				gifQualityPreset: settings.gifQualityPreset,
 			});
 		},
 		[videoPath, videoPlaybackRef, hasCaptionsForSidecar, settings],

src/components/video-editor/export/useExportRunner.ts

@@ -139,6 +139,7 @@ export function useExportRunner(input: ExportRunnerInput) {
 						frameRate: settings.gifConfig.frameRate,
 						loop: settings.gifConfig.loop,
 						sizePreset: settings.gifConfig.sizePreset,
+						qualityPreset: settings.gifConfig.qualityPreset,
 						...buildExportRenderOptions({
 							appearance,
 							timeline,

src/components/video-editor/export/useExportSettings.ts

@@ -7,6 +7,7 @@ import type {
 	ExportPipelineModel,
 	ExportQuality,
 	GifFrameRate,
+	GifQualityPreset,
 	GifSizePreset,
 } from "@/lib/exporter";
 import { projectCaptionCues } from "../captionTimeline";
@@ -41,6 +42,9 @@ export function useExportSettings(
 	const [gifFrameRate, setGifFrameRate] = useState<GifFrameRate>(preferences.gifFrameRate);
 	const [gifLoop, setGifLoop] = useState(preferences.gifLoop);
 	const [gifSizePreset, setGifSizePreset] = useState<GifSizePreset>(preferences.gifSizePreset);
+	const [gifQualityPreset, setGifQualityPreset] = useState<GifQualityPreset>(
+		preferences.gifQualityPreset,
+	);
 	useEffect(() => {
 		saveEditorPreferences({
 			publishDestination,
@@ -54,6 +58,7 @@ export function useExportSettings(
 			gifFrameRate,
 			gifLoop,
 			gifSizePreset,
+			gifQualityPreset,
 		});
 	}, [
 		publishDestination,
@@ -67,6 +72,7 @@ export function useExportSettings(
 		gifFrameRate,
 		gifLoop,
 		gifSizePreset,
+		gifQualityPreset,
 	]);
 
 	const captionSidecarCues = useMemo(
@@ -107,6 +113,8 @@ export function useExportSettings(
 		setGifLoop,
 		gifSizePreset,
 		setGifSizePreset,
+		gifQualityPreset,
+		setGifQualityPreset,
 		captionSidecarCues,
 	};
 }

src/components/video-editor/exportPreferences.ts

@@ -6,9 +6,10 @@ import type {
 	ExportPipelineModel,
 	ExportQuality,
 	GifFrameRate,
+	GifQualityPreset,
 	GifSizePreset,
 } from "@/lib/exporter";
-import { isValidMp4FrameRate } from "@/lib/exporter/types";
+import { isValidGifQualityPreset, isValidMp4FrameRate } from "@/lib/exporter/types";
 
 export interface ExportPreferences {
 	exportEncodingMode: ExportEncodingMode;
@@ -20,6 +21,7 @@ export interface ExportPreferences {
 	gifFrameRate: GifFrameRate;
 	gifLoop: boolean;
 	gifSizePreset: GifSizePreset;
+	gifQualityPreset: GifQualityPreset;
 	publishDestination: "link" | "local";
 	includeCaptionSidecar: boolean;
 }
@@ -78,6 +80,9 @@ export function normalizeExportPreferences(raw: Partial<ExportPreferences>): Exp
 			raw.gifSizePreset === "original"
 				? raw.gifSizePreset
 				: "medium",
+		gifQualityPreset: isValidGifQualityPreset(raw.gifQualityPreset)
+			? raw.gifQualityPreset
+			: "balanced",
 		publishDestination: raw.publishDestination === "local" ? "local" : "link",
 		includeCaptionSidecar: raw.includeCaptionSidecar === true,
 	};

src/components/video-editor/exportStartSettings.test.ts

@@ -14,6 +14,7 @@ const baseOptions = {
 	gifFrameRate: 20 as const,
 	gifLoop: true,
 	gifSizePreset: "medium" as const,
+	gifQualityPreset: "balanced" as const,
 };
 
 describe("resolveExportStartSettings", () => {
@@ -53,6 +54,7 @@ describe("resolveExportStartSettings", () => {
 				frameRate: 15,
 				loop: false,
 				sizePreset: "medium",
+				qualityPreset: "balanced",
 				width: 1280,
 				height: 720,
 			},
@@ -70,6 +72,7 @@ describe("resolveExportStartSettings", () => {
 			}).gifConfig,
 		).toMatchObject({
 			sizePreset: "original",
+			qualityPreset: "balanced",
 			width: 1234,
 			height: 678,
 		});

src/components/video-editor/exportStartSettings.ts

@@ -9,6 +9,7 @@ import {
 	type ExportSettings,
 	GIF_SIZE_PRESETS,
 	type GifFrameRate,
+	type GifQualityPreset,
 	type GifSizePreset,
 } from "@/lib/exporter";
 
@@ -25,6 +26,7 @@ export function resolveExportStartSettings({
 	gifFrameRate,
 	gifLoop,
 	gifSizePreset,
+	gifQualityPreset,
 }: {
 	sourceWidth: number;
 	sourceHeight: number;
@@ -38,6 +40,7 @@ export function resolveExportStartSettings({
 	gifFrameRate: GifFrameRate;
 	gifLoop: boolean;
 	gifSizePreset: GifSizePreset;
+	gifQualityPreset: GifQualityPreset;
 }): ExportSettings {
 	const gifDimensions =
 		exportFormat === "gif"
@@ -58,6 +61,7 @@ export function resolveExportStartSettings({
 						frameRate: gifFrameRate,
 						loop: gifLoop,
 						sizePreset: gifSizePreset,
+						qualityPreset: gifQualityPreset,
 						width: gifDimensions.width,
 						height: gifDimensions.height,
 					}

src/components/video-editor/layout/EditorExportMenu.tsx

@@ -104,6 +104,8 @@ export function EditorExportMenu(props: Props) {
 		setGifLoop,
 		gifSizePreset,
 		setGifSizePreset,
+		gifQualityPreset,
+		setGifQualityPreset,
 		includeCaptionSidecar,
 		setIncludeCaptionSidecar,
 	} = exportSettings;
@@ -151,6 +153,8 @@ export function EditorExportMenu(props: Props) {
 			onGifLoopChange={setGifLoop}
 			gifSizePreset={gifSizePreset}
 			onGifSizePresetChange={setGifSizePreset}
+			gifQualityPreset={gifQualityPreset}
+			onGifQualityPresetChange={setGifQualityPreset}
 			showCaptionSidecarOption={hasCaptionsForSidecar && exportFormat === "mp4"}
 			includeCaptionSidecar={includeCaptionSidecar}
 			onIncludeCaptionSidecarChange={setIncludeCaptionSidecar}

src/i18n/locales/de/settings.json

@@ -232,6 +232,10 @@
 		},
 		"fpsTitle": "FPS",
 		"loop": "Wiederholen",
+		"gifQuality": "Qualität",
+		"gifQualityHigh": "Hoch",
+		"gifQualityBalanced": "Ausgewogen",
+		"gifQualitySmall": "Kleine Datei",
 		"outputDimensions": "Ausgabe: {{dimensions}}px",
 		"sizePresetOriginalShort": "Orig",
 		"sizePresetMediumShort": "Med",

src/i18n/locales/en/settings.json

@@ -238,6 +238,10 @@
 		},
 		"fpsTitle": "FPS",
 		"loop": "Loop",
+		"gifQuality": "Quality",
+		"gifQualityHigh": "High",
+		"gifQualityBalanced": "Balanced",
+		"gifQualitySmall": "Small file",
 		"outputDimensions": "Output: {{dimensions}}px",
 		"sizePresetOriginalShort": "Orig",
 		"sizePresetMediumShort": "Med",

src/i18n/locales/es/settings.json

@@ -232,6 +232,10 @@
 		},
 		"fpsTitle": "FPS",
 		"loop": "Bucle",
+		"gifQuality": "Calidad",
+		"gifQualityHigh": "Alta",
+		"gifQualityBalanced": "Equilibrada",
+		"gifQualitySmall": "Archivo pequeño",
 		"outputDimensions": "Salida: {{dimensions}}px",
 		"sizePresetOriginalShort": "Orig",
 		"sizePresetMediumShort": "Med",

src/i18n/locales/fr/settings.json

@@ -232,6 +232,10 @@
 		},
 		"fpsTitle": "IPS",
 		"loop": "Boucle",
+		"gifQuality": "Qualité",
+		"gifQualityHigh": "Élevée",
+		"gifQualityBalanced": "Équilibrée",
+		"gifQualitySmall": "Petit fichier",
 		"outputDimensions": "Sortie : {{dimensions}} px",
 		"sizePresetOriginalShort": "Orig",
 		"sizePresetMediumShort": "Moy",

src/i18n/locales/it/settings.json

@@ -232,6 +232,10 @@
 		},
 		"fpsTitle": "FPS",
 		"loop": "Loop",
+		"gifQuality": "Qualità",
+		"gifQualityHigh": "Alta",
+		"gifQualityBalanced": "Bilanciata",
+		"gifQualitySmall": "File piccolo",
 		"outputDimensions": "Output: {{dimensions}}px",
 		"sizePresetOriginalShort": "Orig",
 		"sizePresetMediumShort": "Med",

src/i18n/locales/ko/settings.json

@@ -232,6 +232,10 @@
 		},
 		"fpsTitle": "FPS",
 		"loop": "반복",
+		"gifQuality": "품질",
+		"gifQualityHigh": "높음",
+		"gifQualityBalanced": "균형",
+		"gifQualitySmall": "작은 파일",
 		"outputDimensions": "출력: {{dimensions}}px",
 		"sizePresetOriginalShort": "원본",
 		"sizePresetMediumShort": "중간",

src/i18n/locales/nl/settings.json

@@ -232,6 +232,10 @@
 		},
 		"fpsTitle": "FPS",
 		"loop": "Herhalen",
+		"gifQuality": "Kwaliteit",
+		"gifQualityHigh": "Hoog",
+		"gifQualityBalanced": "Gebalanceerd",
+		"gifQualitySmall": "Klein bestand",
 		"outputDimensions": "Uitvoer: {{dimensions}}px",
 		"sizePresetOriginalShort": "Orig",
 		"sizePresetMediumShort": "Gem",

src/i18n/locales/pt-BR/settings.json

@@ -232,6 +232,10 @@
 		},
 		"fpsTitle": "FPS",
 		"loop": "Repetir",
+		"gifQuality": "Qualidade",
+		"gifQualityHigh": "Alta",
+		"gifQualityBalanced": "Equilibrada",
+		"gifQualitySmall": "Arquivo pequeno",
 		"outputDimensions": "Saída: {{dimensions}}px",
 		"sizePresetOriginalShort": "Orig",
 		"sizePresetMediumShort": "Med",