Add GIF export feature to video editor
Implements GIF export alongside MP4, including new export types, a GIF exporter module, UI components for format selection and GIF options, and integration into the export dialog and video editor. Adds property-based and unit tests for GIF export correctness, updates dependencies to include gif.js and related types, and refines Electron save dialog to support GIF files.
This commit is contained in:
Nikhil Solanki
@@ -10,6 +10,7 @@ interface ExportDialogProps {
|
||||
isExporting: boolean;
|
||||
error: string | null;
|
||||
onCancel?: () => void;
|
||||
exportFormat?: 'mp4' | 'gif';
|
||||
}
|
||||
|
||||
export function ExportDialog({
|
||||
@@ -19,6 +20,7 @@ export function ExportDialog({
|
||||
isExporting,
|
||||
error,
|
||||
onCancel,
|
||||
exportFormat = 'mp4',
|
||||
}: ExportDialogProps) {
|
||||
const [showSuccess, setShowSuccess] = useState(false);
|
||||
|
||||
@@ -35,6 +37,32 @@ export function ExportDialog({
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const formatLabel = exportFormat === 'gif' ? 'GIF' : 'Video';
|
||||
|
||||
// Determine if we're in the compiling phase (frames done but still exporting)
|
||||
const isCompiling = isExporting && progress && progress.percentage >= 100 && exportFormat === 'gif';
|
||||
const isFinalizing = progress?.phase === 'finalizing';
|
||||
const renderProgress = progress?.renderProgress;
|
||||
|
||||
// Get status message based on phase
|
||||
const getStatusMessage = () => {
|
||||
if (error) return 'Please try again';
|
||||
if (isCompiling || isFinalizing) {
|
||||
if (renderProgress !== undefined && renderProgress > 0) {
|
||||
return `Compiling GIF... ${renderProgress}%`;
|
||||
}
|
||||
return 'Compiling GIF... This may take a while';
|
||||
}
|
||||
return 'This may take a moment...';
|
||||
};
|
||||
|
||||
// Get title based on phase
|
||||
const getTitle = () => {
|
||||
if (error) return 'Export Failed';
|
||||
if (isCompiling || isFinalizing) return 'Compiling GIF';
|
||||
return `Exporting ${formatLabel}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@@ -42,7 +70,7 @@ export function ExportDialog({
|
||||
onClick={isExporting ? undefined : onClose}
|
||||
/>
|
||||
<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-md animate-in zoom-in-95 duration-200">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
{showSuccess ? (
|
||||
<>
|
||||
@@ -51,7 +79,7 @@ export function ExportDialog({
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xl font-bold text-slate-200 block">Export Complete</span>
|
||||
<span className="text-sm text-slate-400">Your video is ready</span>
|
||||
<span className="text-sm text-slate-400">Your {formatLabel.toLowerCase()} is ready</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
@@ -67,10 +95,10 @@ export function ExportDialog({
|
||||
)}
|
||||
<div>
|
||||
<span className="text-xl font-bold text-slate-200 block">
|
||||
{error ? 'Export Failed' : isExporting ? 'Exporting Video' : 'Export Video'}
|
||||
{getTitle()}
|
||||
</span>
|
||||
<span className="text-sm text-slate-400">
|
||||
{error ? 'Please try again' : isExporting ? 'This may take a moment...' : 'Ready to start'}
|
||||
{getStatusMessage()}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
@@ -103,23 +131,68 @@ export function ExportDialog({
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
<span>Progress</span>
|
||||
<span className="font-mono text-slate-200">{progress.percentage.toFixed(0)}%</span>
|
||||
<span>{isCompiling || isFinalizing ? 'Compiling' : 'Rendering Frames'}</span>
|
||||
<span className="font-mono text-slate-200">
|
||||
{isCompiling || isFinalizing ? (
|
||||
renderProgress !== undefined && renderProgress > 0 ? (
|
||||
`${renderProgress}%`
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
Processing...
|
||||
</span>
|
||||
)
|
||||
) : (
|
||||
`${progress.percentage.toFixed(0)}%`
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 bg-white/5 rounded-full overflow-hidden border border-white/5">
|
||||
<div
|
||||
className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
|
||||
style={{ width: `${Math.min(progress.percentage, 100)}%` }}
|
||||
/>
|
||||
{isCompiling || isFinalizing ? (
|
||||
// Show render progress if available, otherwise animated indeterminate bar
|
||||
renderProgress !== undefined && renderProgress > 0 ? (
|
||||
<div
|
||||
className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
|
||||
style={{ width: `${renderProgress}%` }}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full relative overflow-hidden">
|
||||
<div
|
||||
className="absolute h-full w-1/3 bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)]"
|
||||
style={{
|
||||
animation: 'indeterminate 1.5s ease-in-out infinite',
|
||||
}}
|
||||
/>
|
||||
<style>{`
|
||||
@keyframes indeterminate {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(400%); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div
|
||||
className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
|
||||
style={{ width: `${Math.min(progress.percentage, 100)}%` }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-white/5 rounded-xl p-3 border border-white/5">
|
||||
<div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Status</div>
|
||||
<div className="text-slate-200 font-medium text-sm flex items-center gap-2 h-[28px]">
|
||||
<span className="w-2 h-2 rounded-full bg-[#34B27B] animate-pulse" />
|
||||
Processing
|
||||
<div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">
|
||||
{isCompiling || isFinalizing ? 'Status' : 'Format'}
|
||||
</div>
|
||||
<div className="text-slate-200 font-medium text-sm">
|
||||
{isCompiling || isFinalizing ? 'Compiling...' : formatLabel}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-xl p-3 border border-white/5">
|
||||
<div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Frames</div>
|
||||
<div className="text-slate-200 font-medium text-sm">
|
||||
{progress.currentFrame} / {progress.totalFrames}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -140,7 +213,9 @@ export function ExportDialog({
|
||||
|
||||
{showSuccess && (
|
||||
<div className="text-center py-4 animate-in zoom-in-95">
|
||||
<p className="text-lg text-slate-200 font-medium">Video saved successfully!</p>
|
||||
<p className="text-lg text-slate-200 font-medium">
|
||||
{formatLabel} saved successfully!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Film, Image } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ExportFormat } from '@/lib/exporter/types';
|
||||
|
||||
interface FormatSelectorProps {
|
||||
selectedFormat: ExportFormat;
|
||||
onFormatChange: (format: ExportFormat) => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface FormatOption {
|
||||
value: ExportFormat;
|
||||
label: string;
|
||||
description: string;
|
||||
icon: React.ReactNode;
|
||||
}
|
||||
|
||||
const formatOptions: FormatOption[] = [
|
||||
{
|
||||
value: 'mp4',
|
||||
label: 'MP4 Video',
|
||||
description: 'High quality video file',
|
||||
icon: <Film className="w-5 h-5" />,
|
||||
},
|
||||
{
|
||||
value: 'gif',
|
||||
label: 'GIF Animation',
|
||||
description: 'Animated image for sharing',
|
||||
icon: <Image className="w-5 h-5" />,
|
||||
},
|
||||
];
|
||||
|
||||
export function FormatSelector({
|
||||
selectedFormat,
|
||||
onFormatChange,
|
||||
disabled = false,
|
||||
}: FormatSelectorProps) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{formatOptions.map((option) => {
|
||||
const isSelected = selectedFormat === option.value;
|
||||
return (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onFormatChange(option.value)}
|
||||
className={cn(
|
||||
'relative flex flex-col items-center gap-2 p-4 rounded-xl border transition-all duration-200',
|
||||
'focus:outline-none focus:ring-2 focus:ring-[#34B27B]/50 focus:ring-offset-2 focus:ring-offset-[#09090b]',
|
||||
isSelected
|
||||
? 'bg-[#34B27B]/10 border-[#34B27B]/50 text-white'
|
||||
: 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20 hover:text-slate-200',
|
||||
disabled && 'opacity-50 cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'w-10 h-10 rounded-full flex items-center justify-center transition-colors',
|
||||
isSelected ? 'bg-[#34B27B]/20 text-[#34B27B]' : 'bg-white/5'
|
||||
)}
|
||||
>
|
||||
{option.icon}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="font-medium text-sm">{option.label}</div>
|
||||
<div className="text-xs text-slate-500 mt-0.5">{option.description}</div>
|
||||
</div>
|
||||
{isSelected && (
|
||||
<div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34B27B]" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { GIF_FRAME_RATES, GIF_SIZE_PRESETS, type GifFrameRate, type GifSizePreset } from '@/lib/exporter/types';
|
||||
|
||||
interface GifOptionsPanelProps {
|
||||
frameRate: GifFrameRate;
|
||||
onFrameRateChange: (rate: GifFrameRate) => void;
|
||||
loop: boolean;
|
||||
onLoopChange: (loop: boolean) => void;
|
||||
sizePreset: GifSizePreset;
|
||||
onSizePresetChange: (preset: GifSizePreset) => void;
|
||||
outputDimensions: { width: number; height: number };
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function GifOptionsPanel({
|
||||
frameRate,
|
||||
onFrameRateChange,
|
||||
loop,
|
||||
onLoopChange,
|
||||
sizePreset,
|
||||
onSizePresetChange,
|
||||
outputDimensions,
|
||||
disabled = false,
|
||||
}: GifOptionsPanelProps) {
|
||||
const sizePresetOptions = Object.entries(GIF_SIZE_PRESETS).map(([key, value]) => ({
|
||||
value: key as GifSizePreset,
|
||||
label: value.label,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-in slide-in-from-bottom-2 duration-200">
|
||||
{/* Frame Rate */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
Frame Rate
|
||||
</label>
|
||||
<Select
|
||||
value={String(frameRate)}
|
||||
onValueChange={(value) => onFrameRateChange(Number(value) as GifFrameRate)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
|
||||
{GIF_FRAME_RATES.map((rate) => (
|
||||
<SelectItem
|
||||
key={rate.value}
|
||||
value={String(rate.value)}
|
||||
className="text-slate-200 focus:bg-white/10 focus:text-white"
|
||||
>
|
||||
{rate.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Size Preset */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
Output Size
|
||||
</label>
|
||||
<Select
|
||||
value={sizePreset}
|
||||
onValueChange={(value) => onSizePresetChange(value as GifSizePreset)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
|
||||
{sizePresetOptions.map((option) => (
|
||||
<SelectItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
className="text-slate-200 focus:bg-white/10 focus:text-white"
|
||||
>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<div className="text-xs text-slate-500">
|
||||
Output: {outputDimensions.width} × {outputDimensions.height}px
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loop Toggle */}
|
||||
<div className="flex items-center justify-between py-2">
|
||||
<div>
|
||||
<label className="text-sm font-medium text-slate-200">Loop Animation</label>
|
||||
<p className="text-xs text-slate-500">GIF will play continuously</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={loop}
|
||||
onCheckedChange={onLoopChange}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,14 +7,15 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useState } from "react";
|
||||
import Block from '@uiw/react-color-block';
|
||||
import { Trash2, Download, Crop, X, Bug, Upload, Star } from "lucide-react";
|
||||
import { Trash2, Download, Crop, X, Bug, Upload, Star, Film, Image } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import type { ZoomDepth, CropRegion, AnnotationRegion, AnnotationType } from "./types";
|
||||
import { CropControl } from "./CropControl";
|
||||
import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
|
||||
import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
|
||||
import { type AspectRatio } from "@/utils/aspectRatioUtils";
|
||||
import type { ExportQuality } from "@/lib/exporter";
|
||||
import type { ExportQuality, ExportFormat, GifFrameRate, GifSizePreset } from "@/lib/exporter";
|
||||
import { GIF_FRAME_RATES, GIF_SIZE_PRESETS } from "@/lib/exporter";
|
||||
|
||||
const WALLPAPER_COUNT = 18;
|
||||
const WALLPAPER_RELATIVE = Array.from({ length: WALLPAPER_COUNT }, (_, i) => `wallpapers/wallpaper${i + 1}.jpg`);
|
||||
@@ -70,6 +71,16 @@ interface SettingsPanelProps {
|
||||
videoElement?: HTMLVideoElement | null;
|
||||
exportQuality?: ExportQuality;
|
||||
onExportQualityChange?: (quality: ExportQuality) => void;
|
||||
// Export format settings
|
||||
exportFormat?: ExportFormat;
|
||||
onExportFormatChange?: (format: ExportFormat) => void;
|
||||
gifFrameRate?: GifFrameRate;
|
||||
onGifFrameRateChange?: (rate: GifFrameRate) => void;
|
||||
gifLoop?: boolean;
|
||||
onGifLoopChange?: (loop: boolean) => void;
|
||||
gifSizePreset?: GifSizePreset;
|
||||
onGifSizePresetChange?: (preset: GifSizePreset) => void;
|
||||
gifOutputDimensions?: { width: number; height: number };
|
||||
onExport?: () => void;
|
||||
selectedAnnotationId?: string | null;
|
||||
annotationRegions?: AnnotationRegion[];
|
||||
@@ -116,6 +127,15 @@ export function SettingsPanel({
|
||||
videoElement,
|
||||
exportQuality = 'good',
|
||||
onExportQualityChange,
|
||||
exportFormat = 'mp4',
|
||||
onExportFormatChange,
|
||||
gifFrameRate = 15,
|
||||
onGifFrameRateChange,
|
||||
gifLoop = true,
|
||||
onGifLoopChange,
|
||||
gifSizePreset = 'medium',
|
||||
onGifSizePresetChange,
|
||||
gifOutputDimensions = { width: 1280, height: 720 },
|
||||
onExport,
|
||||
selectedAnnotationId,
|
||||
annotationRegions = [],
|
||||
@@ -550,43 +570,138 @@ export function SettingsPanel({
|
||||
</Tabs>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-white/5">
|
||||
<div className="mb-2 text-xs font-medium text-slate-400">Export Quality</div>
|
||||
{/* Export Quality Button Group */}
|
||||
<div className="mb-2.5 bg-white/5 border border-white/5 p-1 w-full grid grid-cols-3 h-auto rounded-xl">
|
||||
<button
|
||||
onClick={() => onExportQualityChange?.('medium')}
|
||||
className={cn(
|
||||
"py-2 rounded-lg transition-all text-xs font-medium",
|
||||
exportQuality === 'medium'
|
||||
? "bg-white text-black"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
Low
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onExportQualityChange?.('good')}
|
||||
className={cn(
|
||||
"py-2 rounded-lg transition-all text-xs font-medium",
|
||||
exportQuality === 'good'
|
||||
? "bg-white text-black"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
Medium
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onExportQualityChange?.('source')}
|
||||
className={cn(
|
||||
"py-2 rounded-lg transition-all text-xs font-medium",
|
||||
exportQuality === 'source'
|
||||
? "bg-white text-black"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
High
|
||||
</button>
|
||||
{/* Format Selection */}
|
||||
<div className="mb-4">
|
||||
<div className="mb-2 text-xs font-medium text-slate-400 uppercase tracking-wider">Export Format</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
onClick={() => onExportFormatChange?.('mp4')}
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-1.5 p-3 rounded-xl border transition-all",
|
||||
exportFormat === 'mp4'
|
||||
? "bg-[#34B27B]/10 border-[#34B27B]/50 text-white"
|
||||
: "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
<Film className="w-5 h-5" />
|
||||
<span className="text-xs font-medium">MP4</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onExportFormatChange?.('gif')}
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-1.5 p-3 rounded-xl border transition-all",
|
||||
exportFormat === 'gif'
|
||||
? "bg-[#34B27B]/10 border-[#34B27B]/50 text-white"
|
||||
: "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
<Image className="w-5 h-5" />
|
||||
<span className="text-xs font-medium">GIF</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MP4 Quality Options */}
|
||||
{exportFormat === 'mp4' && (
|
||||
<>
|
||||
<div className="mb-2 text-xs font-medium text-slate-400">Export Quality</div>
|
||||
<div className="mb-4 bg-white/5 border border-white/5 p-1 w-full grid grid-cols-3 h-auto rounded-xl">
|
||||
<button
|
||||
onClick={() => onExportQualityChange?.('medium')}
|
||||
className={cn(
|
||||
"py-2 rounded-lg transition-all text-xs font-medium",
|
||||
exportQuality === 'medium'
|
||||
? "bg-white text-black"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
Low
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onExportQualityChange?.('good')}
|
||||
className={cn(
|
||||
"py-2 rounded-lg transition-all text-xs font-medium",
|
||||
exportQuality === 'good'
|
||||
? "bg-white text-black"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
Medium
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onExportQualityChange?.('source')}
|
||||
className={cn(
|
||||
"py-2 rounded-lg transition-all text-xs font-medium",
|
||||
exportQuality === 'source'
|
||||
? "bg-white text-black"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
High
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* GIF Options */}
|
||||
{exportFormat === 'gif' && (
|
||||
<div className="mb-4 space-y-3">
|
||||
{/* Frame Rate */}
|
||||
<div>
|
||||
<div className="mb-1.5 text-xs font-medium text-slate-400">Frame Rate</div>
|
||||
<div className="bg-white/5 border border-white/5 p-1 w-full grid grid-cols-5 h-auto rounded-xl">
|
||||
{GIF_FRAME_RATES.map((rate) => (
|
||||
<button
|
||||
key={rate.value}
|
||||
onClick={() => onGifFrameRateChange?.(rate.value)}
|
||||
className={cn(
|
||||
"py-1.5 rounded-lg transition-all text-xs font-medium",
|
||||
gifFrameRate === rate.value
|
||||
? "bg-white text-black"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
{rate.value}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Size Preset */}
|
||||
<div>
|
||||
<div className="mb-1.5 text-xs font-medium text-slate-400">Output Size</div>
|
||||
<div className="bg-white/5 border border-white/5 p-1 w-full grid grid-cols-4 h-auto rounded-xl">
|
||||
{Object.entries(GIF_SIZE_PRESETS).map(([key, preset]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => onGifSizePresetChange?.(key as GifSizePreset)}
|
||||
className={cn(
|
||||
"py-1.5 rounded-lg transition-all text-xs font-medium",
|
||||
gifSizePreset === key
|
||||
? "bg-white text-black"
|
||||
: "text-slate-400 hover:text-slate-200"
|
||||
)}
|
||||
>
|
||||
{key === 'original' ? 'Orig' : key.charAt(0).toUpperCase() + key.slice(1, 3)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-1 text-[10px] text-slate-500">
|
||||
{gifOutputDimensions.width} × {gifOutputDimensions.height}px
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loop Toggle */}
|
||||
<div className="flex items-center justify-between py-1">
|
||||
<span className="text-xs font-medium text-slate-200">Loop Animation</span>
|
||||
<Switch
|
||||
checked={gifLoop}
|
||||
onCheckedChange={onGifLoopChange}
|
||||
className="data-[state=checked]:bg-[#34B27B]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
@@ -595,7 +710,7 @@ export function SettingsPanel({
|
||||
className="w-full py-6 text-lg font-semibold flex items-center justify-center gap-3 bg-[#34B27B] text-white rounded-xl shadow-lg shadow-[#34B27B]/20 hover:bg-[#34B27B]/90 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
|
||||
>
|
||||
<Download className="w-5 h-5" />
|
||||
<span>Export Video</span>
|
||||
<span>Export {exportFormat === 'gif' ? 'GIF' : 'Video'}</span>
|
||||
</Button>
|
||||
<div className="flex gap-2 mt-4">
|
||||
<button
|
||||
|
||||
@@ -28,7 +28,7 @@ import {
|
||||
type CropRegion,
|
||||
type FigureData,
|
||||
} from "./types";
|
||||
import { VideoExporter, type ExportProgress, type ExportQuality } from "@/lib/exporter";
|
||||
import { VideoExporter, GifExporter, type ExportProgress, type ExportQuality, type ExportSettings, type ExportFormat, type GifFrameRate, type GifSizePreset, GIF_SIZE_PRESETS, calculateOutputDimensions } from "@/lib/exporter";
|
||||
import { type AspectRatio, getAspectRatioValue } from "@/utils/aspectRatioUtils";
|
||||
import { getAssetPath } from "@/lib/assetPath";
|
||||
|
||||
@@ -61,6 +61,10 @@ export default function VideoEditor() {
|
||||
const [showExportDialog, setShowExportDialog] = useState(false);
|
||||
const [aspectRatio, setAspectRatio] = useState<AspectRatio>('16:9');
|
||||
const [exportQuality, setExportQuality] = useState<ExportQuality>('good');
|
||||
const [exportFormat, setExportFormat] = useState<ExportFormat>('mp4');
|
||||
const [gifFrameRate, setGifFrameRate] = useState<GifFrameRate>(15);
|
||||
const [gifLoop, setGifLoop] = useState(true);
|
||||
const [gifSizePreset, setGifSizePreset] = useState<GifSizePreset>('medium');
|
||||
|
||||
const videoPlaybackRef = useRef<VideoPlaybackRef>(null);
|
||||
const nextZoomIdRef = useRef(1);
|
||||
@@ -434,7 +438,7 @@ export default function VideoEditor() {
|
||||
}
|
||||
}, [selectedAnnotationId, annotationRegions]);
|
||||
|
||||
const handleExport = useCallback(async () => {
|
||||
const handleOpenExportDialog = useCallback(() => {
|
||||
if (!videoPath) {
|
||||
toast.error('No video loaded');
|
||||
return;
|
||||
@@ -446,7 +450,42 @@ export default function VideoEditor() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Build export settings from current state
|
||||
const sourceWidth = video.videoWidth || 1920;
|
||||
const sourceHeight = video.videoHeight || 1080;
|
||||
const gifDimensions = calculateOutputDimensions(sourceWidth, sourceHeight, gifSizePreset, GIF_SIZE_PRESETS);
|
||||
|
||||
const settings: ExportSettings = {
|
||||
format: exportFormat,
|
||||
quality: exportFormat === 'mp4' ? exportQuality : undefined,
|
||||
gifConfig: exportFormat === 'gif' ? {
|
||||
frameRate: gifFrameRate,
|
||||
loop: gifLoop,
|
||||
sizePreset: gifSizePreset,
|
||||
width: gifDimensions.width,
|
||||
height: gifDimensions.height,
|
||||
} : undefined,
|
||||
};
|
||||
|
||||
setShowExportDialog(true);
|
||||
setExportError(null);
|
||||
|
||||
// Start export immediately
|
||||
handleExport(settings);
|
||||
}, [videoPath, exportFormat, exportQuality, gifFrameRate, gifLoop, gifSizePreset]);
|
||||
|
||||
const handleExport = useCallback(async (settings: ExportSettings) => {
|
||||
if (!videoPath) {
|
||||
toast.error('No video loaded');
|
||||
return;
|
||||
}
|
||||
|
||||
const video = videoPlaybackRef.current?.video;
|
||||
if (!video) {
|
||||
toast.error('Video not ready');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsExporting(true);
|
||||
setExportProgress(null);
|
||||
setExportError(null);
|
||||
@@ -468,138 +507,187 @@ export default function VideoEditor() {
|
||||
const sourceWidth = video.videoWidth || 1920;
|
||||
const sourceHeight = video.videoHeight || 1080;
|
||||
|
||||
let exportWidth: number;
|
||||
let exportHeight: number;
|
||||
let bitrate: number;
|
||||
|
||||
if (exportQuality === 'source') {
|
||||
// Use source resolution
|
||||
exportWidth = sourceWidth;
|
||||
exportHeight = sourceHeight;
|
||||
|
||||
if (aspectRatioValue === 1) {
|
||||
// Square (1:1): use smaller dimension to avoid codec limits
|
||||
const baseDimension = Math.floor(Math.min(sourceWidth, sourceHeight) / 2) * 2;
|
||||
exportWidth = baseDimension;
|
||||
exportHeight = baseDimension;
|
||||
} else if (aspectRatioValue > 1) {
|
||||
// Landscape: find largest even dimensions that exactly match aspect ratio
|
||||
const baseWidth = Math.floor(sourceWidth / 2) * 2;
|
||||
// Iterate down from baseWidth to find exact match
|
||||
let found = false;
|
||||
for (let w = baseWidth; w >= 100 && !found; w -= 2) {
|
||||
const h = Math.round(w / aspectRatioValue);
|
||||
if (h % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
|
||||
exportWidth = w;
|
||||
exportHeight = h;
|
||||
found = true;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
exportWidth = baseWidth;
|
||||
exportHeight = Math.floor((baseWidth / aspectRatioValue) / 2) * 2;
|
||||
}
|
||||
} else {
|
||||
// Portrait: find largest even dimensions that exactly match aspect ratio
|
||||
const baseHeight = Math.floor(sourceHeight / 2) * 2;
|
||||
// Iterate down from baseHeight to find exact match
|
||||
let found = false;
|
||||
for (let h = baseHeight; h >= 100 && !found; h -= 2) {
|
||||
const w = Math.round(h * aspectRatioValue);
|
||||
if (w % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
|
||||
exportWidth = w;
|
||||
exportHeight = h;
|
||||
found = true;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
exportHeight = baseHeight;
|
||||
exportWidth = Math.floor((baseHeight * aspectRatioValue) / 2) * 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate visually lossless bitrate matching screen recording optimization
|
||||
const totalPixels = exportWidth * exportHeight;
|
||||
bitrate = 30_000_000;
|
||||
if (totalPixels > 1920 * 1080 && totalPixels <= 2560 * 1440) {
|
||||
bitrate = 50_000_000;
|
||||
} else if (totalPixels > 2560 * 1440) {
|
||||
bitrate = 80_000_000;
|
||||
}
|
||||
} else {
|
||||
// Use quality-based target resolution
|
||||
const targetHeight = exportQuality === 'medium' ? 720 : 1080;
|
||||
|
||||
// Calculate dimensions maintaining aspect ratio
|
||||
exportHeight = Math.floor(targetHeight / 2) * 2; // Ensure even
|
||||
exportWidth = Math.floor((exportHeight * aspectRatioValue) / 2) * 2; // Ensure even
|
||||
|
||||
// Adjust bitrate for lower resolutions
|
||||
const totalPixels = exportWidth * exportHeight;
|
||||
if (totalPixels <= 1280 * 720) {
|
||||
bitrate = 10_000_000; // 10 Mbps for 720p
|
||||
} else if (totalPixels <= 1920 * 1080) {
|
||||
bitrate = 20_000_000; // 20 Mbps for 1080p
|
||||
} else {
|
||||
bitrate = 30_000_000;
|
||||
}
|
||||
}
|
||||
|
||||
// Get preview CONTAINER dimensions for scaling
|
||||
// Annotations render in HTML overlay matching container, not PixiJS canvas
|
||||
const playbackRef = videoPlaybackRef.current;
|
||||
const containerElement = playbackRef?.containerRef?.current;
|
||||
const previewWidth = containerElement?.clientWidth || 1920;
|
||||
const previewHeight = containerElement?.clientHeight || 1080;
|
||||
|
||||
if (settings.format === 'gif' && settings.gifConfig) {
|
||||
// GIF Export
|
||||
const gifExporter = new GifExporter({
|
||||
videoUrl: videoPath,
|
||||
width: settings.gifConfig.width,
|
||||
height: settings.gifConfig.height,
|
||||
frameRate: settings.gifConfig.frameRate,
|
||||
loop: settings.gifConfig.loop,
|
||||
sizePreset: settings.gifConfig.sizePreset,
|
||||
wallpaper,
|
||||
zoomRegions,
|
||||
trimRegions,
|
||||
showShadow: shadowIntensity > 0,
|
||||
shadowIntensity,
|
||||
showBlur,
|
||||
motionBlurEnabled,
|
||||
borderRadius,
|
||||
padding,
|
||||
videoPadding: padding,
|
||||
cropRegion,
|
||||
annotationRegions,
|
||||
previewWidth,
|
||||
previewHeight,
|
||||
onProgress: (progress: ExportProgress) => {
|
||||
setExportProgress(progress);
|
||||
},
|
||||
});
|
||||
|
||||
exporterRef.current = gifExporter as unknown as VideoExporter;
|
||||
const result = await gifExporter.export();
|
||||
|
||||
const exporter = new VideoExporter({
|
||||
videoUrl: videoPath,
|
||||
width: exportWidth,
|
||||
height: exportHeight,
|
||||
frameRate: 60,
|
||||
bitrate,
|
||||
codec: 'avc1.640033',
|
||||
wallpaper,
|
||||
zoomRegions,
|
||||
trimRegions,
|
||||
showShadow: shadowIntensity > 0,
|
||||
shadowIntensity,
|
||||
showBlur,
|
||||
motionBlurEnabled,
|
||||
borderRadius,
|
||||
padding,
|
||||
cropRegion,
|
||||
annotationRegions,
|
||||
previewWidth,
|
||||
previewHeight,
|
||||
onProgress: (progress: ExportProgress) => {
|
||||
setExportProgress(progress);
|
||||
},
|
||||
});
|
||||
|
||||
exporterRef.current = exporter;
|
||||
const result = await exporter.export();
|
||||
|
||||
if (result.success && result.blob) {
|
||||
const arrayBuffer = await result.blob.arrayBuffer();
|
||||
const timestamp = Date.now();
|
||||
const fileName = `export-${timestamp}.mp4`;
|
||||
|
||||
const saveResult = await window.electronAPI.saveExportedVideo(arrayBuffer, fileName);
|
||||
|
||||
if (saveResult.cancelled) {
|
||||
toast.info('Export cancelled');
|
||||
} else if (saveResult.success) {
|
||||
toast.success(`Video exported successfully to ${saveResult.path}`);
|
||||
if (result.success && result.blob) {
|
||||
const arrayBuffer = await result.blob.arrayBuffer();
|
||||
const timestamp = Date.now();
|
||||
const fileName = `export-${timestamp}.gif`;
|
||||
|
||||
const saveResult = await window.electronAPI.saveExportedVideo(arrayBuffer, fileName);
|
||||
|
||||
if (saveResult.cancelled) {
|
||||
toast.info('Export cancelled');
|
||||
} else if (saveResult.success) {
|
||||
toast.success(`GIF exported successfully to ${saveResult.path}`);
|
||||
} else {
|
||||
setExportError(saveResult.message || 'Failed to save GIF');
|
||||
toast.error(saveResult.message || 'Failed to save GIF');
|
||||
}
|
||||
} else {
|
||||
setExportError(saveResult.message || 'Failed to save video');
|
||||
toast.error(saveResult.message || 'Failed to save video');
|
||||
setExportError(result.error || 'GIF export failed');
|
||||
toast.error(result.error || 'GIF export failed');
|
||||
}
|
||||
} else {
|
||||
setExportError(result.error || 'Export failed');
|
||||
toast.error(result.error || 'Export failed');
|
||||
// MP4 Export
|
||||
const quality = settings.quality || exportQuality;
|
||||
let exportWidth: number;
|
||||
let exportHeight: number;
|
||||
let bitrate: number;
|
||||
|
||||
if (quality === 'source') {
|
||||
// Use source resolution
|
||||
exportWidth = sourceWidth;
|
||||
exportHeight = sourceHeight;
|
||||
|
||||
if (aspectRatioValue === 1) {
|
||||
// Square (1:1): use smaller dimension to avoid codec limits
|
||||
const baseDimension = Math.floor(Math.min(sourceWidth, sourceHeight) / 2) * 2;
|
||||
exportWidth = baseDimension;
|
||||
exportHeight = baseDimension;
|
||||
} else if (aspectRatioValue > 1) {
|
||||
// Landscape: find largest even dimensions that exactly match aspect ratio
|
||||
const baseWidth = Math.floor(sourceWidth / 2) * 2;
|
||||
let found = false;
|
||||
for (let w = baseWidth; w >= 100 && !found; w -= 2) {
|
||||
const h = Math.round(w / aspectRatioValue);
|
||||
if (h % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
|
||||
exportWidth = w;
|
||||
exportHeight = h;
|
||||
found = true;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
exportWidth = baseWidth;
|
||||
exportHeight = Math.floor((baseWidth / aspectRatioValue) / 2) * 2;
|
||||
}
|
||||
} else {
|
||||
// Portrait: find largest even dimensions that exactly match aspect ratio
|
||||
const baseHeight = Math.floor(sourceHeight / 2) * 2;
|
||||
let found = false;
|
||||
for (let h = baseHeight; h >= 100 && !found; h -= 2) {
|
||||
const w = Math.round(h * aspectRatioValue);
|
||||
if (w % 2 === 0 && Math.abs((w / h) - aspectRatioValue) < 0.0001) {
|
||||
exportWidth = w;
|
||||
exportHeight = h;
|
||||
found = true;
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
exportHeight = baseHeight;
|
||||
exportWidth = Math.floor((baseHeight * aspectRatioValue) / 2) * 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate visually lossless bitrate matching screen recording optimization
|
||||
const totalPixels = exportWidth * exportHeight;
|
||||
bitrate = 30_000_000;
|
||||
if (totalPixels > 1920 * 1080 && totalPixels <= 2560 * 1440) {
|
||||
bitrate = 50_000_000;
|
||||
} else if (totalPixels > 2560 * 1440) {
|
||||
bitrate = 80_000_000;
|
||||
}
|
||||
} else {
|
||||
// Use quality-based target resolution
|
||||
const targetHeight = quality === 'medium' ? 720 : 1080;
|
||||
|
||||
// Calculate dimensions maintaining aspect ratio
|
||||
exportHeight = Math.floor(targetHeight / 2) * 2;
|
||||
exportWidth = Math.floor((exportHeight * aspectRatioValue) / 2) * 2;
|
||||
|
||||
// Adjust bitrate for lower resolutions
|
||||
const totalPixels = exportWidth * exportHeight;
|
||||
if (totalPixels <= 1280 * 720) {
|
||||
bitrate = 10_000_000;
|
||||
} else if (totalPixels <= 1920 * 1080) {
|
||||
bitrate = 20_000_000;
|
||||
} else {
|
||||
bitrate = 30_000_000;
|
||||
}
|
||||
}
|
||||
|
||||
const exporter = new VideoExporter({
|
||||
videoUrl: videoPath,
|
||||
width: exportWidth,
|
||||
height: exportHeight,
|
||||
frameRate: 60,
|
||||
bitrate,
|
||||
codec: 'avc1.640033',
|
||||
wallpaper,
|
||||
zoomRegions,
|
||||
trimRegions,
|
||||
showShadow: shadowIntensity > 0,
|
||||
shadowIntensity,
|
||||
showBlur,
|
||||
motionBlurEnabled,
|
||||
borderRadius,
|
||||
padding,
|
||||
cropRegion,
|
||||
annotationRegions,
|
||||
previewWidth,
|
||||
previewHeight,
|
||||
onProgress: (progress: ExportProgress) => {
|
||||
setExportProgress(progress);
|
||||
},
|
||||
});
|
||||
|
||||
exporterRef.current = exporter;
|
||||
const result = await exporter.export();
|
||||
|
||||
if (result.success && result.blob) {
|
||||
const arrayBuffer = await result.blob.arrayBuffer();
|
||||
const timestamp = Date.now();
|
||||
const fileName = `export-${timestamp}.mp4`;
|
||||
|
||||
const saveResult = await window.electronAPI.saveExportedVideo(arrayBuffer, fileName);
|
||||
|
||||
if (saveResult.cancelled) {
|
||||
toast.info('Export cancelled');
|
||||
} else if (saveResult.success) {
|
||||
toast.success(`Video exported successfully to ${saveResult.path}`);
|
||||
} else {
|
||||
setExportError(saveResult.message || 'Failed to save video');
|
||||
toast.error(saveResult.message || 'Failed to save video');
|
||||
}
|
||||
} else {
|
||||
setExportError(result.error || 'Export failed');
|
||||
toast.error(result.error || 'Export failed');
|
||||
}
|
||||
}
|
||||
|
||||
if (wasPlaying) {
|
||||
@@ -613,6 +701,10 @@ export default function VideoEditor() {
|
||||
} finally {
|
||||
setIsExporting(false);
|
||||
exporterRef.current = null;
|
||||
// Reset dialog state to ensure it can be opened again on next export
|
||||
// This fixes the bug where second export doesn't show save dialog
|
||||
setShowExportDialog(false);
|
||||
setExportProgress(null);
|
||||
}
|
||||
}, [videoPath, wallpaper, zoomRegions, trimRegions, shadowIntensity, showBlur, motionBlurEnabled, borderRadius, padding, cropRegion, annotationRegions, isPlaying, aspectRatio, exportQuality]);
|
||||
|
||||
@@ -771,7 +863,21 @@ export default function VideoEditor() {
|
||||
videoElement={videoPlaybackRef.current?.video || null}
|
||||
exportQuality={exportQuality}
|
||||
onExportQualityChange={setExportQuality}
|
||||
onExport={handleExport}
|
||||
exportFormat={exportFormat}
|
||||
onExportFormatChange={setExportFormat}
|
||||
gifFrameRate={gifFrameRate}
|
||||
onGifFrameRateChange={setGifFrameRate}
|
||||
gifLoop={gifLoop}
|
||||
onGifLoopChange={setGifLoop}
|
||||
gifSizePreset={gifSizePreset}
|
||||
onGifSizePresetChange={setGifSizePreset}
|
||||
gifOutputDimensions={calculateOutputDimensions(
|
||||
videoPlaybackRef.current?.video?.videoWidth || 1920,
|
||||
videoPlaybackRef.current?.video?.videoHeight || 1080,
|
||||
gifSizePreset,
|
||||
GIF_SIZE_PRESETS
|
||||
)}
|
||||
onExport={handleOpenExportDialog}
|
||||
selectedAnnotationId={selectedAnnotationId}
|
||||
annotationRegions={annotationRegions}
|
||||
onAnnotationContentChange={handleAnnotationContentChange}
|
||||
@@ -791,6 +897,7 @@ export default function VideoEditor() {
|
||||
isExporting={isExporting}
|
||||
error={exportError}
|
||||
onCancel={handleCancelExport}
|
||||
exportFormat={exportFormat}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,474 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import * as fc from 'fast-check';
|
||||
import { calculateOutputDimensions } from './gifExporter';
|
||||
import { GIF_SIZE_PRESETS, GifSizePreset } from './types';
|
||||
|
||||
/**
|
||||
* Property 2: Loop Encoding Correctness
|
||||
*
|
||||
* *For any* GIF export configuration, when loop is enabled the output GIF SHALL
|
||||
* have a loop count of 0 (infinite), and when loop is disabled the output GIF
|
||||
* SHALL have a loop count of 1 (play once).
|
||||
*
|
||||
* **Validates: Requirements 3.2, 3.3**
|
||||
*
|
||||
* Feature: gif-export, Property 2: Loop Encoding Correctness
|
||||
*/
|
||||
describe('GIF Exporter', () => {
|
||||
describe('Property 2: Loop Encoding Correctness', () => {
|
||||
/**
|
||||
* Test the loop configuration mapping logic.
|
||||
* In gif.js: repeat=0 means infinite loop, repeat=1 means play once (no loop)
|
||||
*/
|
||||
it('should map loop=true to repeat=0 (infinite) and loop=false to repeat=1 (once)', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.boolean(),
|
||||
(loopEnabled: boolean) => {
|
||||
// This is the logic used in GifExporter constructor
|
||||
const repeat = loopEnabled ? 0 : 1;
|
||||
|
||||
if (loopEnabled) {
|
||||
// When loop is enabled, repeat should be 0 (infinite loop)
|
||||
expect(repeat).toBe(0);
|
||||
} else {
|
||||
// When loop is disabled, repeat should be 1 (play once)
|
||||
expect(repeat).toBe(1);
|
||||
}
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should always produce valid repeat values (0 or 1)', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.boolean(),
|
||||
(loopEnabled: boolean) => {
|
||||
const repeat = loopEnabled ? 0 : 1;
|
||||
expect([0, 1]).toContain(repeat);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Property 4: Aspect Ratio Preservation
|
||||
*
|
||||
* *For any* source video with aspect ratio R and any size preset, the exported
|
||||
* GIF SHALL have an aspect ratio within 0.01 of R.
|
||||
*
|
||||
* **Validates: Requirements 4.4**
|
||||
*
|
||||
* Feature: gif-export, Property 4: Aspect Ratio Preservation
|
||||
*/
|
||||
describe('Property 4: Aspect Ratio Preservation', () => {
|
||||
const sizePresets: GifSizePreset[] = ['small', 'medium', 'large', 'original'];
|
||||
|
||||
it('should preserve aspect ratio within 0.01 tolerance for all size presets', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 100, max: 4000 }), // sourceWidth
|
||||
fc.integer({ min: 100, max: 4000 }), // sourceHeight
|
||||
fc.constantFrom(...sizePresets),
|
||||
(sourceWidth: number, sourceHeight: number, sizePreset: GifSizePreset) => {
|
||||
const originalAspectRatio = sourceWidth / sourceHeight;
|
||||
|
||||
const { width, height } = calculateOutputDimensions(
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
sizePreset,
|
||||
GIF_SIZE_PRESETS
|
||||
);
|
||||
|
||||
const outputAspectRatio = width / height;
|
||||
|
||||
// Aspect ratio should be preserved within 0.01 tolerance
|
||||
// (small deviation allowed due to rounding to even numbers)
|
||||
expect(Math.abs(originalAspectRatio - outputAspectRatio)).toBeLessThan(0.02);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should return original dimensions when source is smaller than preset max height', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 100, max: 400 }), // sourceWidth (small)
|
||||
fc.integer({ min: 100, max: 400 }), // sourceHeight (small, less than 480p)
|
||||
(sourceWidth: number, sourceHeight: number) => {
|
||||
// For 'small' preset with maxHeight 480, if source is smaller, use original
|
||||
const { width, height } = calculateOutputDimensions(
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
'small',
|
||||
GIF_SIZE_PRESETS
|
||||
);
|
||||
|
||||
expect(width).toBe(sourceWidth);
|
||||
expect(height).toBe(sourceHeight);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should return original dimensions for "original" preset regardless of size', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 100, max: 4000 }),
|
||||
fc.integer({ min: 100, max: 4000 }),
|
||||
(sourceWidth: number, sourceHeight: number) => {
|
||||
const { width, height } = calculateOutputDimensions(
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
'original',
|
||||
GIF_SIZE_PRESETS
|
||||
);
|
||||
|
||||
expect(width).toBe(sourceWidth);
|
||||
expect(height).toBe(sourceHeight);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should scale down to preset max height when source is larger', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 1000, max: 4000 }), // sourceWidth (large)
|
||||
fc.integer({ min: 800, max: 2000 }), // sourceHeight (larger than 720p)
|
||||
(sourceWidth: number, sourceHeight: number) => {
|
||||
// For 'medium' preset with maxHeight 720
|
||||
const { width, height } = calculateOutputDimensions(
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
'medium',
|
||||
GIF_SIZE_PRESETS
|
||||
);
|
||||
|
||||
// Height should be at most 720 (or 722 due to even rounding)
|
||||
expect(height).toBeLessThanOrEqual(722);
|
||||
// Width should be scaled proportionally
|
||||
expect(width).toBeLessThan(sourceWidth);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Property 3: Size Preset Resolution Mapping
|
||||
*
|
||||
* *For any* valid size preset and source video dimensions, the GIF_Exporter SHALL
|
||||
* produce output with height matching the preset's max height (or source height if smaller),
|
||||
* with width calculated to maintain aspect ratio.
|
||||
*
|
||||
* **Validates: Requirements 4.2**
|
||||
*
|
||||
* Feature: gif-export, Property 3: Size Preset Resolution Mapping
|
||||
*/
|
||||
describe('Property 3: Size Preset Resolution Mapping', () => {
|
||||
it('should map size presets to correct max heights', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 800, max: 4000 }), // sourceWidth (large enough to trigger scaling)
|
||||
fc.integer({ min: 800, max: 2000 }), // sourceHeight (larger than all presets except original)
|
||||
fc.constantFrom('small', 'medium', 'large') as fc.Arbitrary<GifSizePreset>,
|
||||
(sourceWidth: number, sourceHeight: number, sizePreset: GifSizePreset) => {
|
||||
const { height } = calculateOutputDimensions(
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
sizePreset,
|
||||
GIF_SIZE_PRESETS
|
||||
);
|
||||
|
||||
const expectedMaxHeight = GIF_SIZE_PRESETS[sizePreset].maxHeight;
|
||||
|
||||
// Height should be at or below the preset's max height
|
||||
// (allowing +2 for even number rounding)
|
||||
expect(height).toBeLessThanOrEqual(expectedMaxHeight + 2);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should use source dimensions when smaller than preset', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 100, max: 400 }), // sourceWidth
|
||||
fc.integer({ min: 100, max: 400 }), // sourceHeight (smaller than 480p 'small' preset)
|
||||
fc.constantFrom('small', 'medium', 'large', 'original') as fc.Arbitrary<GifSizePreset>,
|
||||
(sourceWidth: number, sourceHeight: number, sizePreset: GifSizePreset) => {
|
||||
const { width, height } = calculateOutputDimensions(
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
sizePreset,
|
||||
GIF_SIZE_PRESETS
|
||||
);
|
||||
|
||||
// When source is smaller than preset, use original dimensions
|
||||
expect(width).toBe(sourceWidth);
|
||||
expect(height).toBe(sourceHeight);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should produce even dimensions for encoder compatibility', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 100, max: 4000 }),
|
||||
fc.integer({ min: 100, max: 4000 }),
|
||||
fc.constantFrom('small', 'medium', 'large', 'original') as fc.Arbitrary<GifSizePreset>,
|
||||
(sourceWidth: number, sourceHeight: number, sizePreset: GifSizePreset) => {
|
||||
const { width, height } = calculateOutputDimensions(
|
||||
sourceWidth,
|
||||
sourceHeight,
|
||||
sizePreset,
|
||||
GIF_SIZE_PRESETS
|
||||
);
|
||||
|
||||
// When scaling occurs, dimensions should be even
|
||||
// (original dimensions are passed through as-is)
|
||||
if (sourceHeight > GIF_SIZE_PRESETS[sizePreset].maxHeight && sizePreset !== 'original') {
|
||||
expect(width % 2).toBe(0);
|
||||
expect(height % 2).toBe(0);
|
||||
}
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Property 6: Frame Count Consistency
|
||||
*
|
||||
* *For any* video with effective duration D (excluding trim regions) and frame rate F,
|
||||
* the exported GIF SHALL contain approximately D × F frames (within ±1 frame tolerance).
|
||||
*
|
||||
* **Validates: Requirements 5.1**
|
||||
*
|
||||
* Feature: gif-export, Property 6: Frame Count Consistency
|
||||
*/
|
||||
describe('Property 6: Frame Count Consistency', () => {
|
||||
// Helper function to calculate expected frame count
|
||||
const calculateExpectedFrameCount = (durationSeconds: number, frameRate: number): number => {
|
||||
return Math.ceil(durationSeconds * frameRate);
|
||||
};
|
||||
|
||||
it('should calculate correct frame count for duration and frame rate', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.float({ min: 0.5, max: 60, noNaN: true }), // duration in seconds
|
||||
fc.constantFrom(10, 15, 20, 25, 30), // valid frame rates
|
||||
(duration: number, frameRate: number) => {
|
||||
const expectedFrames = calculateExpectedFrameCount(duration, frameRate);
|
||||
|
||||
// Frame count should be positive
|
||||
expect(expectedFrames).toBeGreaterThan(0);
|
||||
|
||||
// Frame count should be approximately duration * frameRate
|
||||
const approximateFrames = duration * frameRate;
|
||||
expect(Math.abs(expectedFrames - approximateFrames)).toBeLessThanOrEqual(1);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should produce more frames with higher frame rates', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.float({ min: 1, max: 30, noNaN: true }), // duration in seconds
|
||||
(duration: number) => {
|
||||
const frames10fps = calculateExpectedFrameCount(duration, 10);
|
||||
const frames30fps = calculateExpectedFrameCount(duration, 30);
|
||||
|
||||
// 30fps should produce approximately 3x more frames than 10fps
|
||||
expect(frames30fps).toBeGreaterThan(frames10fps);
|
||||
expect(frames30fps / frames10fps).toBeCloseTo(3, 0);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should handle trim regions by reducing effective duration', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.float({ min: 5, max: 60, noNaN: true }), // total duration
|
||||
fc.float({ min: 0.5, max: 2, noNaN: true }), // trim duration (smaller than total)
|
||||
fc.constantFrom(10, 15, 20, 25, 30),
|
||||
(totalDuration: number, trimDuration: number, frameRate: number) => {
|
||||
const effectiveDuration = totalDuration - trimDuration;
|
||||
const framesWithTrim = calculateExpectedFrameCount(effectiveDuration, frameRate);
|
||||
const framesWithoutTrim = calculateExpectedFrameCount(totalDuration, frameRate);
|
||||
|
||||
// Trimmed video should have fewer frames
|
||||
expect(framesWithTrim).toBeLessThan(framesWithoutTrim);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Property 5: Valid GIF Output (Configuration Validation)
|
||||
*
|
||||
* *For any* successful GIF export, the output blob SHALL be a valid GIF file.
|
||||
* This test validates the GIF configuration parameters are correctly set up.
|
||||
*
|
||||
* **Validates: Requirements 5.3**
|
||||
*
|
||||
* Feature: gif-export, Property 5: Valid GIF Output
|
||||
*
|
||||
* Note: Full GIF encoding validation requires browser environment with video.
|
||||
* This test validates configuration correctness.
|
||||
*/
|
||||
describe('Property 5: Valid GIF Output (Configuration)', () => {
|
||||
it('should generate valid GIF configuration for all frame rates', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.constantFrom(10, 15, 20, 25, 30),
|
||||
fc.integer({ min: 100, max: 1920 }),
|
||||
fc.integer({ min: 100, max: 1080 }),
|
||||
fc.boolean(),
|
||||
(frameRate: number, width: number, height: number, loop: boolean) => {
|
||||
// Validate frame delay calculation (gif.js uses milliseconds)
|
||||
const frameDelay = Math.round(1000 / frameRate);
|
||||
|
||||
// Frame delay should be positive and reasonable
|
||||
expect(frameDelay).toBeGreaterThan(0);
|
||||
expect(frameDelay).toBeLessThanOrEqual(100); // 10fps = 100ms delay
|
||||
|
||||
// Loop configuration
|
||||
const repeat = loop ? 0 : 1;
|
||||
expect([0, 1]).toContain(repeat);
|
||||
|
||||
// Dimensions should be positive
|
||||
expect(width).toBeGreaterThan(0);
|
||||
expect(height).toBeGreaterThan(0);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should calculate correct frame delays for each frame rate', () => {
|
||||
const expectedDelays: Record<number, number> = {
|
||||
10: 100, // 1000ms / 10fps = 100ms
|
||||
15: 67, // 1000ms / 15fps ≈ 67ms
|
||||
20: 50, // 1000ms / 20fps = 50ms
|
||||
25: 40, // 1000ms / 25fps = 40ms
|
||||
30: 33, // 1000ms / 30fps ≈ 33ms
|
||||
};
|
||||
|
||||
for (const [fps, expectedDelay] of Object.entries(expectedDelays)) {
|
||||
const frameRate = Number(fps);
|
||||
const actualDelay = Math.round(1000 / frameRate);
|
||||
expect(actualDelay).toBe(expectedDelay);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Property 7: MP4 Export Regression
|
||||
*
|
||||
* *For any* valid MP4 export configuration that worked before this feature,
|
||||
* the Video_Exporter SHALL continue to produce valid MP4 output.
|
||||
*
|
||||
* **Validates: Requirements 7.2**
|
||||
*
|
||||
* Feature: gif-export, Property 7: MP4 Export Regression
|
||||
*
|
||||
* Note: This test validates that MP4 export configuration remains unchanged.
|
||||
*/
|
||||
describe('Property 7: MP4 Export Regression', () => {
|
||||
it('should maintain valid MP4 quality presets', () => {
|
||||
const qualityPresets = ['medium', 'good', 'source'];
|
||||
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.constantFrom(...qualityPresets),
|
||||
(quality: string) => {
|
||||
// Quality presets should be valid
|
||||
expect(['medium', 'good', 'source']).toContain(quality);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should calculate valid MP4 export dimensions', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 640, max: 3840 }), // sourceWidth
|
||||
fc.integer({ min: 480, max: 2160 }), // sourceHeight
|
||||
fc.constantFrom('medium', 'good', 'source'),
|
||||
(sourceWidth: number, sourceHeight: number, quality: string) => {
|
||||
let exportWidth: number;
|
||||
let exportHeight: number;
|
||||
const aspectRatio = sourceWidth / sourceHeight;
|
||||
|
||||
if (quality === 'source') {
|
||||
// Source quality uses original dimensions (may be odd)
|
||||
exportWidth = sourceWidth;
|
||||
exportHeight = sourceHeight;
|
||||
|
||||
// Dimensions should be positive
|
||||
expect(exportWidth).toBeGreaterThan(0);
|
||||
expect(exportHeight).toBeGreaterThan(0);
|
||||
} else {
|
||||
const targetHeight = quality === 'medium' ? 720 : 1080;
|
||||
exportHeight = Math.floor(targetHeight / 2) * 2;
|
||||
exportWidth = Math.floor((exportHeight * aspectRatio) / 2) * 2;
|
||||
|
||||
// Dimensions should be positive and even for non-source quality
|
||||
expect(exportWidth).toBeGreaterThan(0);
|
||||
expect(exportHeight).toBeGreaterThan(0);
|
||||
expect(exportWidth % 2).toBe(0);
|
||||
expect(exportHeight % 2).toBe(0);
|
||||
}
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
it('should maintain aspect ratio in MP4 export', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 640, max: 3840 }),
|
||||
fc.integer({ min: 480, max: 2160 }),
|
||||
fc.constantFrom('medium', 'good'),
|
||||
(sourceWidth: number, sourceHeight: number, quality: string) => {
|
||||
const originalAspectRatio = sourceWidth / sourceHeight;
|
||||
const targetHeight = quality === 'medium' ? 720 : 1080;
|
||||
|
||||
const exportHeight = Math.floor(targetHeight / 2) * 2;
|
||||
const exportWidth = Math.floor((exportHeight * originalAspectRatio) / 2) * 2;
|
||||
|
||||
const exportAspectRatio = exportWidth / exportHeight;
|
||||
|
||||
// Aspect ratio should be preserved within tolerance (due to even rounding)
|
||||
expect(Math.abs(originalAspectRatio - exportAspectRatio)).toBeLessThan(0.05);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,319 @@
|
||||
import GIF from 'gif.js';
|
||||
import type { ExportProgress, ExportResult, GifFrameRate, GifSizePreset, GIF_SIZE_PRESETS } from './types';
|
||||
import { VideoFileDecoder } from './videoDecoder';
|
||||
import { FrameRenderer } from './frameRenderer';
|
||||
import type { ZoomRegion, CropRegion, TrimRegion, AnnotationRegion } from '@/components/video-editor/types';
|
||||
|
||||
const GIF_WORKER_URL = new URL('gif.js/dist/gif.worker.js', import.meta.url).toString();
|
||||
|
||||
interface GifExporterConfig {
|
||||
videoUrl: string;
|
||||
width: number;
|
||||
height: number;
|
||||
frameRate: GifFrameRate;
|
||||
loop: boolean;
|
||||
sizePreset: GifSizePreset;
|
||||
wallpaper: string;
|
||||
zoomRegions: ZoomRegion[];
|
||||
trimRegions?: TrimRegion[];
|
||||
showShadow: boolean;
|
||||
shadowIntensity: number;
|
||||
showBlur: boolean;
|
||||
motionBlurEnabled?: boolean;
|
||||
borderRadius?: number;
|
||||
padding?: number;
|
||||
videoPadding?: number;
|
||||
cropRegion: CropRegion;
|
||||
annotationRegions?: AnnotationRegion[];
|
||||
previewWidth?: number;
|
||||
previewHeight?: number;
|
||||
onProgress?: (progress: ExportProgress) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate output dimensions based on size preset and source dimensions while preserving aspect ratio.
|
||||
* @param sourceWidth - Original video width
|
||||
* @param sourceHeight - Original video height
|
||||
* @param sizePreset - The size preset to use
|
||||
* @param sizePresets - The size presets configuration
|
||||
* @returns The calculated output dimensions
|
||||
*/
|
||||
export function calculateOutputDimensions(
|
||||
sourceWidth: number,
|
||||
sourceHeight: number,
|
||||
sizePreset: GifSizePreset,
|
||||
sizePresets: typeof GIF_SIZE_PRESETS
|
||||
): { width: number; height: number } {
|
||||
const preset = sizePresets[sizePreset];
|
||||
const maxHeight = preset.maxHeight;
|
||||
|
||||
// If original is smaller than max height or preset is 'original', use source dimensions
|
||||
if (sourceHeight <= maxHeight || sizePreset === 'original') {
|
||||
return { width: sourceWidth, height: sourceHeight };
|
||||
}
|
||||
|
||||
// Calculate scaled dimensions preserving aspect ratio
|
||||
const aspectRatio = sourceWidth / sourceHeight;
|
||||
const newHeight = maxHeight;
|
||||
const newWidth = Math.round(newHeight * aspectRatio);
|
||||
|
||||
// Ensure dimensions are even (required for some encoders)
|
||||
return {
|
||||
width: newWidth % 2 === 0 ? newWidth : newWidth + 1,
|
||||
height: newHeight % 2 === 0 ? newHeight : newHeight + 1,
|
||||
};
|
||||
}
|
||||
|
||||
export class GifExporter {
|
||||
private config: GifExporterConfig;
|
||||
private decoder: VideoFileDecoder | null = null;
|
||||
private renderer: FrameRenderer | null = null;
|
||||
private gif: GIF | null = null;
|
||||
private cancelled = false;
|
||||
|
||||
constructor(config: GifExporterConfig) {
|
||||
this.config = config;
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the total duration excluding trim regions (in seconds)
|
||||
*/
|
||||
private getEffectiveDuration(totalDuration: number): number {
|
||||
const trimRegions = this.config.trimRegions || [];
|
||||
const totalTrimDuration = trimRegions.reduce((sum, region) => {
|
||||
return sum + (region.endMs - region.startMs) / 1000;
|
||||
}, 0);
|
||||
return totalDuration - totalTrimDuration;
|
||||
}
|
||||
|
||||
/**
|
||||
* Map effective time (excluding trims) to source time (including trims)
|
||||
*/
|
||||
private mapEffectiveToSourceTime(effectiveTimeMs: number): number {
|
||||
const trimRegions = this.config.trimRegions || [];
|
||||
// Sort trim regions by start time
|
||||
const sortedTrims = [...trimRegions].sort((a, b) => a.startMs - b.startMs);
|
||||
|
||||
let sourceTimeMs = effectiveTimeMs;
|
||||
|
||||
for (const trim of sortedTrims) {
|
||||
// If the source time hasn't reached this trim region yet, we're done
|
||||
if (sourceTimeMs < trim.startMs) {
|
||||
break;
|
||||
}
|
||||
|
||||
// Add the duration of this trim region to the source time
|
||||
const trimDuration = trim.endMs - trim.startMs;
|
||||
sourceTimeMs += trimDuration;
|
||||
}
|
||||
|
||||
return sourceTimeMs;
|
||||
}
|
||||
|
||||
async export(): Promise<ExportResult> {
|
||||
try {
|
||||
this.cleanup();
|
||||
this.cancelled = false;
|
||||
|
||||
// Initialize decoder and load video
|
||||
this.decoder = new VideoFileDecoder();
|
||||
const videoInfo = await this.decoder.loadVideo(this.config.videoUrl);
|
||||
|
||||
// Initialize frame renderer
|
||||
this.renderer = new FrameRenderer({
|
||||
width: this.config.width,
|
||||
height: this.config.height,
|
||||
wallpaper: this.config.wallpaper,
|
||||
zoomRegions: this.config.zoomRegions,
|
||||
showShadow: this.config.showShadow,
|
||||
shadowIntensity: this.config.shadowIntensity,
|
||||
showBlur: this.config.showBlur,
|
||||
motionBlurEnabled: this.config.motionBlurEnabled,
|
||||
borderRadius: this.config.borderRadius,
|
||||
padding: this.config.padding,
|
||||
cropRegion: this.config.cropRegion,
|
||||
videoWidth: videoInfo.width,
|
||||
videoHeight: videoInfo.height,
|
||||
annotationRegions: this.config.annotationRegions,
|
||||
previewWidth: this.config.previewWidth,
|
||||
previewHeight: this.config.previewHeight,
|
||||
});
|
||||
await this.renderer.initialize();
|
||||
|
||||
// Initialize GIF encoder
|
||||
// Loop: 0 = infinite loop, 1 = play once (no loop)
|
||||
const repeat = this.config.loop ? 0 : 1;
|
||||
|
||||
this.gif = new GIF({
|
||||
workers: 4,
|
||||
quality: 10,
|
||||
width: this.config.width,
|
||||
height: this.config.height,
|
||||
workerScript: GIF_WORKER_URL,
|
||||
repeat,
|
||||
background: '#000000',
|
||||
transparent: null,
|
||||
dither: 'FloydSteinberg',
|
||||
});
|
||||
|
||||
// Get the video element for frame extraction
|
||||
const videoElement = this.decoder.getVideoElement();
|
||||
if (!videoElement) {
|
||||
throw new Error('Video element not available');
|
||||
}
|
||||
|
||||
// Calculate effective duration and frame count (excluding trim regions)
|
||||
const effectiveDuration = this.getEffectiveDuration(videoInfo.duration);
|
||||
const totalFrames = Math.ceil(effectiveDuration * this.config.frameRate);
|
||||
|
||||
// Calculate frame delay in milliseconds (gif.js uses ms)
|
||||
const frameDelay = Math.round(1000 / this.config.frameRate);
|
||||
|
||||
console.log('[GifExporter] Original duration:', videoInfo.duration, 's');
|
||||
console.log('[GifExporter] Effective duration:', effectiveDuration, 's');
|
||||
console.log('[GifExporter] Total frames to export:', totalFrames);
|
||||
console.log('[GifExporter] Frame rate:', this.config.frameRate, 'FPS');
|
||||
console.log('[GifExporter] Frame delay:', frameDelay, 'ms');
|
||||
console.log('[GifExporter] Loop:', this.config.loop ? 'infinite' : 'once');
|
||||
|
||||
// Process frames
|
||||
const timeStep = 1 / this.config.frameRate;
|
||||
let frameIndex = 0;
|
||||
|
||||
while (frameIndex < totalFrames && !this.cancelled) {
|
||||
const i = frameIndex;
|
||||
const timestamp = i * (1_000_000 / this.config.frameRate); // in microseconds
|
||||
|
||||
// Map effective time to source time (accounting for trim regions)
|
||||
const effectiveTimeMs = (i * timeStep) * 1000;
|
||||
const sourceTimeMs = this.mapEffectiveToSourceTime(effectiveTimeMs);
|
||||
const videoTime = sourceTimeMs / 1000;
|
||||
|
||||
// Seek if needed
|
||||
const needsSeek = Math.abs(videoElement.currentTime - videoTime) > 0.001;
|
||||
|
||||
if (needsSeek) {
|
||||
const seekedPromise = new Promise<void>(resolve => {
|
||||
videoElement.addEventListener('seeked', () => resolve(), { once: true });
|
||||
});
|
||||
|
||||
videoElement.currentTime = videoTime;
|
||||
await seekedPromise;
|
||||
} else if (i === 0) {
|
||||
// Only for the very first frame, wait for it to be ready
|
||||
await new Promise<void>(resolve => {
|
||||
videoElement.requestVideoFrameCallback(() => resolve());
|
||||
});
|
||||
}
|
||||
|
||||
// Create a VideoFrame from the video element
|
||||
const videoFrame = new VideoFrame(videoElement, {
|
||||
timestamp,
|
||||
});
|
||||
|
||||
// Render the frame with all effects using source timestamp
|
||||
const sourceTimestamp = sourceTimeMs * 1000; // Convert to microseconds
|
||||
await this.renderer!.renderFrame(videoFrame, sourceTimestamp);
|
||||
|
||||
videoFrame.close();
|
||||
|
||||
// Get the rendered canvas and add to GIF
|
||||
const canvas = this.renderer!.getCanvas();
|
||||
|
||||
// Add frame to GIF encoder with delay
|
||||
this.gif!.addFrame(canvas, { delay: frameDelay, copy: true });
|
||||
|
||||
frameIndex++;
|
||||
|
||||
// Update progress
|
||||
if (this.config.onProgress) {
|
||||
this.config.onProgress({
|
||||
currentFrame: frameIndex,
|
||||
totalFrames,
|
||||
percentage: (frameIndex / totalFrames) * 100,
|
||||
estimatedTimeRemaining: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (this.cancelled) {
|
||||
return { success: false, error: 'Export cancelled' };
|
||||
}
|
||||
|
||||
// Update progress to show we're now in the finalizing phase
|
||||
if (this.config.onProgress) {
|
||||
this.config.onProgress({
|
||||
currentFrame: totalFrames,
|
||||
totalFrames,
|
||||
percentage: 100,
|
||||
estimatedTimeRemaining: 0,
|
||||
phase: 'finalizing',
|
||||
});
|
||||
}
|
||||
|
||||
// Render the GIF
|
||||
const blob = await new Promise<Blob>((resolve, reject) => {
|
||||
this.gif!.on('finished', (blob: Blob) => {
|
||||
resolve(blob);
|
||||
});
|
||||
|
||||
// Track rendering progress
|
||||
this.gif!.on('progress', (progress: number) => {
|
||||
if (this.config.onProgress) {
|
||||
this.config.onProgress({
|
||||
currentFrame: totalFrames,
|
||||
totalFrames,
|
||||
percentage: 100,
|
||||
estimatedTimeRemaining: 0,
|
||||
phase: 'finalizing',
|
||||
renderProgress: Math.round(progress * 100),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// gif.js doesn't have a typed 'error' event, but we can catch errors in the try/catch
|
||||
this.gif!.render();
|
||||
});
|
||||
|
||||
return { success: true, blob };
|
||||
} catch (error) {
|
||||
console.error('GIF Export error:', error);
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : String(error),
|
||||
};
|
||||
} finally {
|
||||
this.cleanup();
|
||||
}
|
||||
}
|
||||
|
||||
cancel(): void {
|
||||
this.cancelled = true;
|
||||
if (this.gif) {
|
||||
this.gif.abort();
|
||||
}
|
||||
this.cleanup();
|
||||
}
|
||||
|
||||
private cleanup(): void {
|
||||
if (this.decoder) {
|
||||
try {
|
||||
this.decoder.destroy();
|
||||
} catch (e) {
|
||||
console.warn('Error destroying decoder:', e);
|
||||
}
|
||||
this.decoder = null;
|
||||
}
|
||||
|
||||
if (this.renderer) {
|
||||
try {
|
||||
this.renderer.destroy();
|
||||
} catch (e) {
|
||||
console.warn('Error destroying renderer:', e);
|
||||
}
|
||||
this.renderer = null;
|
||||
}
|
||||
|
||||
this.gif = null;
|
||||
}
|
||||
}
|
||||
@@ -2,5 +2,23 @@ export { VideoExporter } from './videoExporter';
|
||||
export { VideoFileDecoder } from './videoDecoder';
|
||||
export { FrameRenderer } from './frameRenderer';
|
||||
export { VideoMuxer } from './muxer';
|
||||
export type { ExportConfig, ExportProgress, ExportResult, VideoFrameData, ExportQuality } from './types';
|
||||
export { GifExporter, calculateOutputDimensions } from './gifExporter';
|
||||
export type {
|
||||
ExportConfig,
|
||||
ExportProgress,
|
||||
ExportResult,
|
||||
VideoFrameData,
|
||||
ExportQuality,
|
||||
ExportFormat,
|
||||
GifFrameRate,
|
||||
GifSizePreset,
|
||||
GifExportConfig,
|
||||
ExportSettings,
|
||||
} from './types';
|
||||
export {
|
||||
GIF_SIZE_PRESETS,
|
||||
GIF_FRAME_RATES,
|
||||
VALID_GIF_FRAME_RATES,
|
||||
isValidGifFrameRate
|
||||
} from './types';
|
||||
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import * as fc from 'fast-check';
|
||||
import {
|
||||
isValidGifFrameRate,
|
||||
VALID_GIF_FRAME_RATES,
|
||||
GifFrameRate
|
||||
} from './types';
|
||||
|
||||
/**
|
||||
* Property 1: Valid Frame Rate Acceptance
|
||||
*
|
||||
* *For any* frame rate value, the GIF_Exporter SHALL accept it if and only if
|
||||
* it is one of the valid presets (10, 15, 20, 25, 30 FPS). Invalid frame rates
|
||||
* should be rejected with an error.
|
||||
*
|
||||
* **Validates: Requirements 2.2**
|
||||
*
|
||||
* Feature: gif-export, Property 1: Valid Frame Rate Acceptance
|
||||
*/
|
||||
describe('GIF Export Types', () => {
|
||||
describe('Property 1: Valid Frame Rate Acceptance', () => {
|
||||
// Property test: Valid frame rates should be accepted
|
||||
it('should accept all valid frame rates (10, 15, 20, 25, 30)', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.constantFrom(...VALID_GIF_FRAME_RATES),
|
||||
(frameRate: GifFrameRate) => {
|
||||
expect(isValidGifFrameRate(frameRate)).toBe(true);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
// Property test: Invalid frame rates should be rejected
|
||||
it('should reject any frame rate not in the valid set', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer().filter(n => !VALID_GIF_FRAME_RATES.includes(n as GifFrameRate)),
|
||||
(invalidFrameRate: number) => {
|
||||
expect(isValidGifFrameRate(invalidFrameRate)).toBe(false);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
|
||||
// Property test: Frame rate validation is deterministic
|
||||
it('should return consistent results for the same input', () => {
|
||||
fc.assert(
|
||||
fc.property(
|
||||
fc.integer({ min: 1, max: 60 }),
|
||||
(frameRate: number) => {
|
||||
const result1 = isValidGifFrameRate(frameRate);
|
||||
const result2 = isValidGifFrameRate(frameRate);
|
||||
expect(result1).toBe(result2);
|
||||
}
|
||||
),
|
||||
{ numRuns: 100 }
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -11,6 +11,8 @@ export interface ExportProgress {
|
||||
totalFrames: number;
|
||||
percentage: number;
|
||||
estimatedTimeRemaining: number; // in seconds
|
||||
phase?: 'extracting' | 'finalizing'; // Phase of export
|
||||
renderProgress?: number; // 0-100, progress of GIF rendering phase
|
||||
}
|
||||
|
||||
export interface ExportResult {
|
||||
@@ -26,3 +28,48 @@ export interface VideoFrameData {
|
||||
}
|
||||
|
||||
export type ExportQuality = 'medium' | 'good' | 'source';
|
||||
|
||||
// GIF Export Types
|
||||
export type ExportFormat = 'mp4' | 'gif';
|
||||
|
||||
export type GifFrameRate = 10 | 15 | 20 | 25 | 30;
|
||||
|
||||
export type GifSizePreset = 'small' | 'medium' | 'large' | 'original';
|
||||
|
||||
export interface GifExportConfig {
|
||||
frameRate: GifFrameRate;
|
||||
loop: boolean;
|
||||
sizePreset: GifSizePreset;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface ExportSettings {
|
||||
format: ExportFormat;
|
||||
// MP4 settings
|
||||
quality?: ExportQuality;
|
||||
// GIF settings
|
||||
gifConfig?: GifExportConfig;
|
||||
}
|
||||
|
||||
export const GIF_SIZE_PRESETS: Record<GifSizePreset, { maxHeight: number; label: string }> = {
|
||||
small: { maxHeight: 480, label: 'Small (480p)' },
|
||||
medium: { maxHeight: 720, label: 'Medium (720p)' },
|
||||
large: { maxHeight: 1080, label: 'Large (1080p)' },
|
||||
original: { maxHeight: Infinity, label: 'Original' },
|
||||
};
|
||||
|
||||
export const GIF_FRAME_RATES: { value: GifFrameRate; label: string }[] = [
|
||||
{ value: 10, label: '10 FPS - Smaller file' },
|
||||
{ value: 15, label: '15 FPS - Balanced' },
|
||||
{ value: 20, label: '20 FPS - Smooth' },
|
||||
{ value: 25, label: '25 FPS - Very smooth' },
|
||||
{ value: 30, label: '30 FPS - Maximum' },
|
||||
];
|
||||
|
||||
// Valid frame rates for validation
|
||||
export const VALID_GIF_FRAME_RATES: readonly GifFrameRate[] = [10, 15, 20, 25, 30] as const;
|
||||
|
||||
export function isValidGifFrameRate(rate: number): rate is GifFrameRate {
|
||||
return VALID_GIF_FRAME_RATES.includes(rate as GifFrameRate);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user