From bf16f051dd0316f070f4a5be221b8819a6777f70 Mon Sep 17 00:00:00 2001 From: wiiiii123 Date: Fri, 22 May 2026 22:21:51 +0700 Subject: [PATCH] refactor(editor): extract export start settings --- src/components/video-editor/VideoEditor.tsx | 33 +++------ .../video-editor/exportStartSettings.test.ts | 74 +++++++++++++++++++ .../video-editor/exportStartSettings.ts | 63 ++++++++++++++++ 3 files changed, 148 insertions(+), 22 deletions(-) create mode 100644 src/components/video-editor/exportStartSettings.test.ts create mode 100644 src/components/video-editor/exportStartSettings.ts diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx index 29c14bef..0b8b3ca9 100644 --- a/src/components/video-editor/VideoEditor.tsx +++ b/src/components/video-editor/VideoEditor.tsx @@ -88,6 +88,7 @@ import { } from "@/utils/aspectRatioUtils"; import { ExtensionIcon } from "./ExtensionIcon"; import { calculateMp4ExportDimensions, calculateMp4SourceDimensions } from "./exportDimensions"; +import { resolveExportStartSettings } from "./exportStartSettings"; import { resolveExportStatusModel } from "./exportStatusModel"; import { resolveMp4ExportRouting } from "./mp4ExportRouting"; import { resolveMp4ExportSettings } from "./mp4ExportSettings"; @@ -4666,31 +4667,19 @@ export default function VideoEditor() { const sourceWidth = video.videoWidth || 1920; const sourceHeight = video.videoHeight || 1080; - const gifDimensions = calculateOutputDimensions( + const settings = resolveExportStartSettings({ sourceWidth, sourceHeight, + exportFormat, + exportEncodingMode, + exportQuality, + mp4FrameRate, + exportBackendPreference, + exportPipelineModel, + gifFrameRate, + gifLoop, gifSizePreset, - GIF_SIZE_PRESETS, - ); - - const settings: ExportSettings = { - format: exportFormat, - encodingMode: exportFormat === "mp4" ? exportEncodingMode : undefined, - mp4FrameRate: exportFormat === "mp4" ? mp4FrameRate : undefined, - backendPreference: exportFormat === "mp4" ? exportBackendPreference : undefined, - pipelineModel: exportFormat === "mp4" ? exportPipelineModel : undefined, - quality: exportFormat === "mp4" ? exportQuality : undefined, - gifConfig: - exportFormat === "gif" - ? { - frameRate: gifFrameRate, - loop: gifLoop, - sizePreset: gifSizePreset, - width: gifDimensions.width, - height: gifDimensions.height, - } - : undefined, - }; + }); setExportError(null); setExportedFilePath(undefined); diff --git a/src/components/video-editor/exportStartSettings.test.ts b/src/components/video-editor/exportStartSettings.test.ts new file mode 100644 index 00000000..357e7fb3 --- /dev/null +++ b/src/components/video-editor/exportStartSettings.test.ts @@ -0,0 +1,74 @@ +import { describe, expect, it } from "vitest"; +import { resolveExportStartSettings } from "./exportStartSettings"; + +const baseOptions = { + sourceWidth: 1920, + sourceHeight: 1080, + exportFormat: "mp4" as const, + exportEncodingMode: "balanced" as const, + exportQuality: "good" as const, + mp4FrameRate: 30 as const, + exportBackendPreference: "auto" as const, + exportPipelineModel: "modern" as const, + gifFrameRate: 20 as const, + gifLoop: true, + gifSizePreset: "medium" as const, +}; + +describe("resolveExportStartSettings", () => { + it("preserves MP4 dropdown settings", () => { + expect(resolveExportStartSettings(baseOptions)).toEqual({ + format: "mp4", + encodingMode: "balanced", + mp4FrameRate: 30, + backendPreference: "auto", + pipelineModel: "modern", + quality: "good", + gifConfig: undefined, + }); + }); + + it("omits MP4-only fields and resolves GIF dimensions for GIF exports", () => { + expect( + resolveExportStartSettings({ + ...baseOptions, + sourceWidth: 2560, + sourceHeight: 1440, + exportFormat: "gif", + gifFrameRate: 15, + gifLoop: false, + gifSizePreset: "medium", + }), + ).toEqual({ + format: "gif", + encodingMode: undefined, + mp4FrameRate: undefined, + backendPreference: undefined, + pipelineModel: undefined, + quality: undefined, + gifConfig: { + frameRate: 15, + loop: false, + sizePreset: "medium", + width: 1280, + height: 720, + }, + }); + }); + + it("keeps original GIF dimensions when the original preset is selected", () => { + expect( + resolveExportStartSettings({ + ...baseOptions, + sourceWidth: 1234, + sourceHeight: 678, + exportFormat: "gif", + gifSizePreset: "original", + }).gifConfig, + ).toMatchObject({ + sizePreset: "original", + width: 1234, + height: 678, + }); + }); +}); diff --git a/src/components/video-editor/exportStartSettings.ts b/src/components/video-editor/exportStartSettings.ts new file mode 100644 index 00000000..6b57268a --- /dev/null +++ b/src/components/video-editor/exportStartSettings.ts @@ -0,0 +1,63 @@ +import { + calculateOutputDimensions, + type ExportBackendPreference, + type ExportEncodingMode, + type ExportFormat, + type ExportMp4FrameRate, + type ExportPipelineModel, + type ExportQuality, + type ExportSettings, + GIF_SIZE_PRESETS, + type GifFrameRate, + type GifSizePreset, +} from "@/lib/exporter"; + +export function resolveExportStartSettings({ + sourceWidth, + sourceHeight, + exportFormat, + exportEncodingMode, + exportQuality, + mp4FrameRate, + exportBackendPreference, + exportPipelineModel, + gifFrameRate, + gifLoop, + gifSizePreset, +}: { + sourceWidth: number; + sourceHeight: number; + exportFormat: ExportFormat; + exportEncodingMode: ExportEncodingMode; + exportQuality: ExportQuality; + mp4FrameRate: ExportMp4FrameRate; + exportBackendPreference: ExportBackendPreference; + exportPipelineModel: ExportPipelineModel; + gifFrameRate: GifFrameRate; + gifLoop: boolean; + gifSizePreset: GifSizePreset; +}): ExportSettings { + const gifDimensions = + exportFormat === "gif" + ? calculateOutputDimensions(sourceWidth, sourceHeight, gifSizePreset, GIF_SIZE_PRESETS) + : null; + + return { + format: exportFormat, + encodingMode: exportFormat === "mp4" ? exportEncodingMode : undefined, + mp4FrameRate: exportFormat === "mp4" ? mp4FrameRate : undefined, + backendPreference: exportFormat === "mp4" ? exportBackendPreference : undefined, + pipelineModel: exportFormat === "mp4" ? exportPipelineModel : undefined, + quality: exportFormat === "mp4" ? exportQuality : undefined, + gifConfig: + exportFormat === "gif" && gifDimensions + ? { + frameRate: gifFrameRate, + loop: gifLoop, + sizePreset: gifSizePreset, + width: gifDimensions.width, + height: gifDimensions.height, + } + : undefined, + }; +}