fix(export): size a GIF from the source, not the hidden MP4 tier

A GIF started from whatever MP4 quality tier was last picked, a control
the GIF settings do not show: a 640x360 clip gave an 852x480 README GIF
straight away and a 640x360 one after Studio. It now starts from the
"Source" size in both the export and the destination summary, so no
preset upscales and Original means the source size. MP4 is unchanged.

Author: EtienneLescot

src/components/ai-edition/ExportDialog.params.test.tsx

@@ -78,10 +78,16 @@ const DOC: AxcutDocument = {
 	legacyEditor: { aspectRatio: "16:9" },
 };
 
-function renderDialog() {
+/** A 640x360 recording: both fixed tiers, 720p and 1080p, are bigger than it. */
+const SMALL_SOURCE_DOC: AxcutDocument = {
+	...DOC,
+	assets: [{ ...DOC.assets[0], video: { codec: "h264", width: 640, height: 360, fps: 60 } }],
+};
+
+function renderDialog(document: AxcutDocument = DOC) {
 	render(
 		<I18nProvider>
-			<ExportDialog open={true} onClose={noop} document={DOC} />
+			<ExportDialog open={true} onClose={noop} document={document} />
 		</I18nProvider>,
 	);
 }
@@ -95,6 +101,15 @@ async function exportMp4() {
 	return params;
 }
 
+/** Same for a GIF, counting calls so a run of exports cannot read the previous one's params. */
+async function exportGif() {
+	const calls = vi.mocked(exportGifNative).mock.calls.length;
+	fireEvent.click(screen.getByRole("button", { name: /export gif/i }));
+	await waitFor(() => expect(exportGifNative).toHaveBeenCalledTimes(calls + 1));
+	await screen.findByTestId("export-show-in-folder");
+	return vi.mocked(exportGifNative).mock.calls[calls][3];
+}
+
 describe("ExportDialog MP4 params", () => {
 	beforeEach(() => {
 		window.electronAPI = {
@@ -190,4 +205,33 @@ describe("ExportDialog destinations", () => {
 			loopCount: 0,
 		});
 	});
+
+	it("sizes README GIF from the source, whatever MP4 tier was picked before", async () => {
+		// The report on #814: a 640x360 clip got an 852x480 GIF straight away, sized from the hidden
+		// 1080p tier the dialog opens on, and a 640x360 one after Studio, whose tier is "Source".
+		renderDialog(SMALL_SOURCE_DOC);
+		fireEvent.click(destination(/README GIF/));
+		expect(destination(/README GIF/)).toHaveTextContent("GIF · 640 × 360 · 15 fps");
+		const direct = await exportGif();
+		expect(direct).toMatchObject({ width: 640, height: 360 });
+
+		fireEvent.click(destination(/Studio/));
+		fireEvent.click(destination(/README GIF/));
+		expect(destination(/README GIF/)).toHaveTextContent("GIF · 640 × 360 · 15 fps");
+		expect(await exportGif()).toEqual(direct);
+	});
+
+	it("never exports a GIF bigger than its source, whatever the tier and size preset", async () => {
+		renderDialog(SMALL_SOURCE_DOC);
+		fireEvent.click(screen.getByRole("button", { name: "Advanced" }));
+		for (const tier of [/^720p/, /^1080p/, /^Source/]) {
+			fireEvent.click(screen.getByRole("button", { name: "MP4" }));
+			fireEvent.click(screen.getByRole("button", { name: tier }));
+			fireEvent.click(screen.getByRole("button", { name: "GIF" }));
+			for (const size of ["Small (480p)", "Medium (720p)", "Large (1080p)", "Original"]) {
+				fireEvent.click(screen.getByRole("button", { name: size }));
+				expect(await exportGif()).toMatchObject({ width: 640, height: 360 });
+			}
+		}
+	});
 });

src/components/ai-edition/ExportDialog.tsx

@@ -248,8 +248,8 @@ export function ExportDialog({ open, onClose, document }: ExportDialogProps) {
 	);
 	// (The "largest clip" pick lived here for the old renderer-side GIF path, which
 	// sized to the best available footage independently of the quality tier. GIF now
-	// goes through the same native exporter as MP4 and shares its sizing, so only the
-	// smallest-clip pick below is still needed.)
+	// goes through the same native exporter as MP4 and starts from its "Source" size, so
+	// only the smallest-clip pick below is still needed.)
 
 	// Smallest clip's true (cropped) footprint on the timeline — a multiclip timeline can mix
 	// crops/resolutions, so this is what "Source" quality actually targets: sizing to the
@@ -280,25 +280,6 @@ export function ExportDialog({ open, onClose, document }: ExportDialogProps) {
 	// quality actually uses these as its target size; 720p/1080p target a fixed short side
 	// regardless (`calculateDimensionsForShortSide`), so this only changes what "Source"
 	// resolves to.
-	// GIF is 8-bit indexed and grows fast with area, so the size preset caps the
-	// output height rather than following the quality tier. `original` keeps the
-	// tier's dims; the native side falls back to its own defaults when undefined.
-	const gifOutputDims = (
-		preset: GifSizePreset,
-		tierDims: { width: number; height: number } | null,
-	): { width?: number; height?: number } => {
-		if (!tierDims) return {};
-		const maxHeight = GIF_SIZE_PRESETS[preset].maxHeight;
-		if (!Number.isFinite(maxHeight) || tierDims.height <= maxHeight) {
-			return { width: tierDims.width, height: tierDims.height };
-		}
-		const scale = maxHeight / tierDims.height;
-		// Even dimensions: the compositor rasterises to this size and the readback
-		// assumes a tightly-packed RGBA buffer.
-		const even = (n: number) => Math.max(2, Math.round(n * scale) & ~1);
-		return { width: even(tierDims.width), height: even(tierDims.height) };
-	};
-
 	const tierOutputDims = (value: ExportQuality) =>
 		smallestSource
 			? calculateMp4ExportSettings({
@@ -310,6 +291,26 @@ export function ExportDialog({ open, onClose, document }: ExportDialogProps) {
 				})
 			: null;
 
+	// GIF is 8-bit indexed and grows fast with area, so the size preset caps the output
+	// height. It starts from the "Source" size, never from the quality tier: that control is
+	// MP4-only and hidden while GIF is picked, yet the tier an MP4 choice left behind used to
+	// size the GIF (a 640x360 clip gave 852x480 after Web / YouTube, 640x360 after Studio).
+	// So no preset upscales and `original` is the source size. The native side falls back
+	// to its own defaults when undefined.
+	const gifOutputDims = (preset: GifSizePreset): { width?: number; height?: number } => {
+		const source = tierOutputDims("source");
+		if (!source) return {};
+		const maxHeight = GIF_SIZE_PRESETS[preset].maxHeight;
+		if (source.height <= maxHeight) {
+			return { width: source.width, height: source.height };
+		}
+		const scale = maxHeight / source.height;
+		// Even dimensions: the compositor rasterises to this size and the readback
+		// assumes a tightly-packed RGBA buffer.
+		const even = (n: number) => Math.max(2, Math.round(n * scale) & ~1);
+		return { width: even(source.width), height: even(source.height) };
+	};
+
 	useEffect(() => {
 		if (!open) {
 			pickerGeneration.current += 1;
@@ -456,9 +457,7 @@ export function ExportDialog({ open, onClose, document }: ExportDialogProps) {
 								pickedPath,
 								sceneJson,
 								{
-									// GIF is 256-colour and grows fast; cap the long edge at the
-									// chosen preset rather than exporting at source size.
-									...gifOutputDims(gifSize, outDims),
+									...gifOutputDims(gifSize),
 									fps: gifFrameRate,
 									// 0 = infinite, the historical GIF default; 1 = play once.
 									loopCount: gifLoop ? 0 : 1,
@@ -536,12 +535,12 @@ export function ExportDialog({ open, onClose, document }: ExportDialogProps) {
 	};
 	/** What a destination produces, in the numbers the Advanced settings show. */
 	const destinationSummary = (set: Partial<ExportChoice>) => {
-		const dims = tierOutputDims(set.quality ?? quality);
 		if (set.format === "gif") {
-			const gif = gifOutputDims(set.gifSize ?? gifSize, dims);
+			const gif = gifOutputDims(set.gifSize ?? gifSize);
 			const size = gif.width ? `${gif.width} × ${gif.height} · ` : "";
 			return `GIF · ${size}${set.gifFrameRate ?? gifFrameRate} fps`;
 		}
+		const dims = tierOutputDims(set.quality ?? quality);
 		const size = dims ? `${dims.width} × ${dims.height} · ` : "";
 		return `MP4 · ${size}${set.fps ?? fps} fps`;
 	};