613 lines
24 KiB
TypeScript
613 lines
24 KiB
TypeScript
import { useState, useCallback } from 'react';
|
|
import { useEditorStore } from '../store/editorStore';
|
|
import { Download, Loader2, Zap, Cog, Info, Volume2, FileText, ZoomIn, Video, Music } from 'lucide-react';
|
|
import type { ExportOptions } from '../types/project';
|
|
|
|
export default function ExportDialog() {
|
|
const { videoPath, words, cutRanges, muteRanges, gainRanges, speedRanges, globalGainDb, isExporting, exportProgress, backendUrl, setExporting, getKeepSegments, additionalClips, backgroundMusic } =
|
|
useEditorStore();
|
|
|
|
const hasCuts = cutRanges.length > 0;
|
|
|
|
// Compute set of deleted word indices from cutRanges
|
|
const getDeletedSet = useCallback(() => {
|
|
const deletedSet = new Set<number>();
|
|
for (const range of cutRanges) {
|
|
for (let i = 0; i < words.length; i++) {
|
|
if (words[i].start >= range.start && words[i].end <= range.end) {
|
|
deletedSet.add(i);
|
|
}
|
|
}
|
|
}
|
|
return deletedSet;
|
|
}, [cutRanges, words]);
|
|
|
|
// Detect if input is audio-only by its extension
|
|
const audioExtensions = new Set(['.wav', '.mp3', '.flac', '.m4a', '.ogg', '.aac', '.wma']);
|
|
const inputExt = videoPath ? '.' + videoPath.split('.').pop()?.toLowerCase() : '';
|
|
const isAudioOnly = videoPath ? audioExtensions.has(inputExt) : false;
|
|
|
|
const [options, setOptions] = useState<Omit<ExportOptions, 'outputPath'> & { normalizeAudio: boolean; normalizeTarget: number }>({
|
|
mode: isAudioOnly ? 'reencode' : 'fast',
|
|
resolution: '1080p',
|
|
format: isAudioOnly ? 'wav' : 'mp4',
|
|
enhanceAudio: false,
|
|
captions: 'none',
|
|
normalizeAudio: false,
|
|
normalizeTarget: -14,
|
|
zoom: { enabled: false, zoomFactor: 1.25, panX: 0, panY: 0 },
|
|
removeBackground: false,
|
|
backgroundReplacement: 'blur',
|
|
backgroundReplacementValue: '',
|
|
});
|
|
const [exportError, setExportError] = useState<string | null>(null);
|
|
const [transcriptFormat, setTranscriptFormat] = useState<'txt' | 'srt'>('txt');
|
|
const [isTranscribingTranscript, setIsTranscribingTranscript] = useState(false);
|
|
|
|
const handleTranscriptExport = useCallback(async () => {
|
|
if (!videoPath || words.length === 0) return;
|
|
|
|
const defaultExt = transcriptFormat === 'srt' ? 'srt' : 'txt';
|
|
const outputPath = await window.electronAPI?.saveFile({
|
|
defaultPath: videoPath.replace(/\.[^.]+$/, `_transcript.${defaultExt}`),
|
|
filters: transcriptFormat === 'srt'
|
|
? [{ name: 'SRT Subtitles', extensions: ['srt'] }]
|
|
: [{ name: 'Text File', extensions: ['txt'] }],
|
|
});
|
|
if (!outputPath) return;
|
|
|
|
setIsTranscribingTranscript(true);
|
|
try {
|
|
// Compute deleted word set
|
|
const deletedSet = getDeletedSet();
|
|
|
|
// Generate content entirely on the frontend — no backend needed
|
|
let content: string;
|
|
if (transcriptFormat === 'srt') {
|
|
const lines: string[] = [];
|
|
let counter = 1;
|
|
const activeWords: Array<[number, typeof words[0]]> = [];
|
|
for (let i = 0; i < words.length; i++) {
|
|
if (!deletedSet.has(i)) activeWords.push([i, words[i]]);
|
|
}
|
|
const wordsPerLine = 8;
|
|
for (let ci = 0; ci < activeWords.length; ci += wordsPerLine) {
|
|
const chunk = activeWords.slice(ci, ci + wordsPerLine);
|
|
if (chunk.length === 0) continue;
|
|
const startTime = chunk[0][1].start;
|
|
const endTime = chunk[chunk.length - 1][1].end;
|
|
|
|
const fmt = (s: number) => {
|
|
const h = Math.floor(s / 3600);
|
|
const m = Math.floor((s % 3600) / 60);
|
|
const sec = Math.floor(s % 60);
|
|
const ms = Math.floor((s % 1) * 1000);
|
|
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')},${String(ms).padStart(3, '0')}`;
|
|
};
|
|
|
|
lines.push(String(counter));
|
|
lines.push(`${fmt(startTime)} --> ${fmt(endTime)}`);
|
|
lines.push(chunk.map(([, w]) => w.word).join(' '));
|
|
lines.push('');
|
|
counter++;
|
|
}
|
|
content = lines.join('\n');
|
|
} else {
|
|
// Plain text
|
|
const activeWords: string[] = [];
|
|
for (let i = 0; i < words.length; i++) {
|
|
if (!deletedSet.has(i)) activeWords.push(words[i].word);
|
|
}
|
|
content = activeWords.join(' ');
|
|
}
|
|
|
|
// Write directly via Tauri — instant, no backend round-trip
|
|
await window.electronAPI?.writeFile(outputPath, content);
|
|
} catch (err) {
|
|
console.error('Transcript export error:', err);
|
|
setExportError(err instanceof Error ? err.message : 'Transcript export failed');
|
|
} finally {
|
|
setIsTranscribingTranscript(false);
|
|
}
|
|
}, [videoPath, words, getDeletedSet, transcriptFormat]);
|
|
|
|
const HANDLE_EXPORT_filters = useCallback(() => {
|
|
const ext = options.format;
|
|
const nameMap: Record<string, string> = {
|
|
mp4: 'MP4',
|
|
mov: 'MOV',
|
|
webm: 'WebM',
|
|
wav: 'WAV Audio',
|
|
};
|
|
return [{ name: nameMap[ext] || 'File', extensions: [ext] }];
|
|
}, [options.format]);
|
|
|
|
const handleExport = useCallback(async () => {
|
|
if (!videoPath) return;
|
|
|
|
const defaultExt = options.format === 'wav' ? 'wav' : 'mp4';
|
|
const outputPath = await window.electronAPI?.saveFile({
|
|
defaultPath: videoPath.replace(/\.[^.]+$/, `_edited.${defaultExt}`),
|
|
filters: HANDLE_EXPORT_filters(),
|
|
});
|
|
if (!outputPath) return;
|
|
|
|
setExporting(true, 0);
|
|
setExportError(null);
|
|
try {
|
|
const keepSegments = getKeepSegments();
|
|
const deletedSet = getDeletedSet();
|
|
|
|
// Map frontend camelCase gain/speed fields to backend snake_case
|
|
const backendGainRanges = gainRanges.map((r) => ({
|
|
start: r.start,
|
|
end: r.end,
|
|
gain_db: r.gainDb,
|
|
}));
|
|
const backendSpeedRanges = speedRanges.map((r) => ({
|
|
start: r.start,
|
|
end: r.end,
|
|
speed: r.speed,
|
|
}));
|
|
|
|
const body: Record<string, any> = {
|
|
input_path: videoPath,
|
|
output_path: outputPath,
|
|
keep_segments: keepSegments,
|
|
mute_ranges: muteRanges.length > 0 ? muteRanges.map((r) => ({ start: r.start, end: r.end })) : undefined,
|
|
gain_ranges: backendGainRanges.length > 0 ? backendGainRanges : undefined,
|
|
speed_ranges: backendSpeedRanges.length > 0 ? backendSpeedRanges : undefined,
|
|
global_gain_db: globalGainDb,
|
|
words: options.captions !== 'none' ? words : undefined,
|
|
deleted_indices: options.captions !== 'none' ? [...deletedSet] : undefined,
|
|
mode: options.mode,
|
|
resolution: options.resolution,
|
|
format: options.format,
|
|
enhanceAudio: options.enhanceAudio,
|
|
normalize_loudness: options.normalizeAudio,
|
|
normalize_target_lufs: options.normalizeTarget,
|
|
captions: options.captions,
|
|
};
|
|
|
|
// Zoom
|
|
if (options.zoom?.enabled) {
|
|
body.zoom = options.zoom;
|
|
}
|
|
|
|
// Additional clips
|
|
if (additionalClips.length > 0) {
|
|
body.additional_clips = additionalClips.map((c) => c.path);
|
|
}
|
|
|
|
// Background music
|
|
if (backgroundMusic) {
|
|
body.background_music = backgroundMusic;
|
|
}
|
|
|
|
// Background removal
|
|
if (options.removeBackground) {
|
|
body.remove_background = true;
|
|
body.background_replacement = options.backgroundReplacement || 'blur';
|
|
body.background_replacement_value = options.backgroundReplacementValue || '';
|
|
}
|
|
|
|
const res = await fetch(`${backendUrl}/export`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body),
|
|
});
|
|
if (!res.ok) {
|
|
let detail = res.statusText;
|
|
try {
|
|
const body = await res.json();
|
|
if (body?.detail) detail = String(body.detail);
|
|
} catch {
|
|
// Keep statusText fallback when response body is not JSON.
|
|
}
|
|
throw new Error(`Export failed: ${detail}`);
|
|
}
|
|
setExporting(false, 100);
|
|
} catch (err) {
|
|
console.error('Export error:', err);
|
|
setExportError(err instanceof Error ? err.message : 'Export failed');
|
|
setExporting(false);
|
|
}
|
|
}, [videoPath, options, backendUrl, setExporting, getKeepSegments, getDeletedSet, muteRanges, gainRanges, speedRanges, globalGainDb, words, HANDLE_EXPORT_filters, additionalClips, backgroundMusic]);
|
|
|
|
return (
|
|
<div className="p-4 space-y-5">
|
|
<h3 className="text-sm font-semibold">Export Video</h3>
|
|
|
|
{/* Mode */}
|
|
<fieldset className="space-y-2">
|
|
<legend className="text-xs text-editor-text-muted font-medium">Export Mode</legend>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<ModeCard
|
|
active={options.mode === 'fast'}
|
|
onClick={() => setOptions((o) => ({ ...o, mode: 'fast' }))}
|
|
icon={<Zap className="w-4 h-4" />}
|
|
title="Fast"
|
|
desc="Stream copy, seconds"
|
|
tooltip="Stream copy — fast, no quality loss, but does not apply cuts or effects"
|
|
/>
|
|
<ModeCard
|
|
active={options.mode === 'reencode'}
|
|
onClick={() => setOptions((o) => ({ ...o, mode: 'reencode' }))}
|
|
icon={<Cog className="w-4 h-4" />}
|
|
title="Re-encode"
|
|
desc="Custom quality, slower"
|
|
tooltip="Full re-encode — applies cuts, gain, speed, zoom, captions, and effects"
|
|
/>
|
|
</div>
|
|
</fieldset>
|
|
|
|
{/* Resolution (only for re-encode) */}
|
|
{options.mode === 'reencode' && (
|
|
<SelectField
|
|
label="Resolution"
|
|
value={options.resolution}
|
|
onChange={(v) => setOptions((o) => ({ ...o, resolution: v as ExportOptions['resolution'] }))}
|
|
options={[
|
|
{ value: '720p', label: '720p (HD)' },
|
|
{ value: '1080p', label: '1080p (Full HD)' },
|
|
{ value: '4k', label: '4K (Ultra HD)' },
|
|
]}
|
|
title="Output video resolution — higher resolution = larger file"
|
|
/>
|
|
)}
|
|
|
|
{/* Format */}
|
|
<SelectField
|
|
label="Format"
|
|
value={options.format}
|
|
onChange={(v) => setOptions((o) => ({ ...o, format: v as ExportOptions['format'] }))}
|
|
options={[
|
|
{ value: 'mp4', label: 'MP4 (H.264)' },
|
|
{ value: 'mov', label: 'MOV (QuickTime)' },
|
|
{ value: 'webm', label: 'WebM (VP9)' },
|
|
...(isAudioOnly ? [{ value: 'wav' as const, label: 'WAV (Uncompressed)' }] : []),
|
|
]}
|
|
title="Output container format — MP4 is most compatible"
|
|
/>
|
|
|
|
{/* Video zoom / punch-in */}
|
|
<div className="space-y-2 pt-1 border-t border-editor-border">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={options.zoom?.enabled || false}
|
|
onChange={(e) => setOptions((o) => ({ ...o, zoom: { ...o.zoom!, enabled: e.target.checked } }))}
|
|
className="w-4 h-4 rounded bg-editor-surface border-editor-border accent-editor-accent"
|
|
title="Crop and reposition the video frame — useful for removing black bars or reframing"
|
|
/>
|
|
<div>
|
|
<span className="text-xs font-medium flex items-center gap-1">
|
|
<ZoomIn className="w-3 h-3" />
|
|
Video zoom / punch-in
|
|
</span>
|
|
<p className="text-[10px] text-editor-text-muted">
|
|
Crop and zoom into the center of the video. Requires re-encode.
|
|
</p>
|
|
</div>
|
|
</label>
|
|
{options.zoom?.enabled && (
|
|
<div className="pl-6 space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] text-editor-text-muted w-16">Zoom:</span>
|
|
<input
|
|
type="range"
|
|
min={1}
|
|
max={3}
|
|
step={0.05}
|
|
value={options.zoom?.zoomFactor || 1}
|
|
onChange={(e) => setOptions((o) => ({ ...o, zoom: { ...o.zoom!, zoomFactor: Number(e.target.value) } }))}
|
|
className="flex-1 h-1.5"
|
|
title="Magnification level — 1.0x is original, higher values zoom in"
|
|
/>
|
|
<span className="text-xs text-editor-text w-10 text-right">{options.zoom?.zoomFactor?.toFixed(2)}x</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] text-editor-text-muted w-16">Pan X:</span>
|
|
<input
|
|
type="range"
|
|
min={-1}
|
|
max={1}
|
|
step={0.05}
|
|
value={options.zoom?.panX || 0}
|
|
onChange={(e) => setOptions((o) => ({ ...o, zoom: { ...o.zoom!, panX: Number(e.target.value) } }))}
|
|
className="flex-1 h-1.5"
|
|
title="Horizontal position of the crop window — negative moves left, positive moves right"
|
|
/>
|
|
<span className="text-xs text-editor-text w-10 text-right">{((options.zoom?.panX || 0) * 100).toFixed(0)}%</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] text-editor-text-muted w-16">Pan Y:</span>
|
|
<input
|
|
type="range"
|
|
min={-1}
|
|
max={1}
|
|
step={0.05}
|
|
value={options.zoom?.panY || 0}
|
|
onChange={(e) => setOptions((o) => ({ ...o, zoom: { ...o.zoom!, panY: Number(e.target.value) } }))}
|
|
className="flex-1 h-1.5"
|
|
title="Vertical position of the crop window — negative moves up, positive moves down"
|
|
/>
|
|
<span className="text-xs text-editor-text w-10 text-right">{((options.zoom?.panY || 0) * 100).toFixed(0)}%</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Background removal */}
|
|
{!isAudioOnly && (
|
|
<div className="space-y-2 pt-1 border-t border-editor-border">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={options.removeBackground || false}
|
|
onChange={(e) => setOptions((o) => ({ ...o, removeBackground: e.target.checked }))}
|
|
className="w-4 h-4 rounded bg-editor-surface border-editor-border accent-editor-accent"
|
|
title="Remove or replace the background behind the speaker"
|
|
/>
|
|
<div>
|
|
<span className="text-xs font-medium flex items-center gap-1">
|
|
<Video className="w-3 h-3" />
|
|
Remove background
|
|
</span>
|
|
<p className="text-[10px] text-editor-text-muted">
|
|
Replace or blur the background. Uses MediaPipe if available.
|
|
</p>
|
|
</div>
|
|
</label>
|
|
{options.removeBackground && (
|
|
<div className="pl-6 space-y-2">
|
|
<SelectField
|
|
label="Background replacement"
|
|
value={options.backgroundReplacement || 'blur'}
|
|
onChange={(v) => setOptions((o) => ({ ...o, backgroundReplacement: v as 'blur' | 'color' | 'image' }))}
|
|
options={[
|
|
{ value: 'blur', label: 'Blur background' },
|
|
{ value: 'color', label: 'Solid color' },
|
|
{ value: 'image', label: 'Custom image' },
|
|
]}
|
|
/>
|
|
{options.backgroundReplacement === 'color' && (
|
|
<input
|
|
type="text"
|
|
value={options.backgroundReplacementValue || '#00FF00'}
|
|
onChange={(e) => setOptions((o) => ({ ...o, backgroundReplacementValue: e.target.value }))}
|
|
placeholder="#00FF00"
|
|
className="w-full px-2 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:outline-none focus:border-editor-accent [color-scheme:dark]"
|
|
/>
|
|
)}
|
|
{options.backgroundReplacement === 'image' && (
|
|
<p className="text-[10px] text-editor-text-muted">Place a background image file path above.</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Background music track info */}
|
|
{backgroundMusic && (
|
|
<div className="pt-1 border-t border-editor-border">
|
|
<div className="flex items-center gap-1.5 text-xs text-editor-accent">
|
|
<Music className="w-3 h-3" />
|
|
Background music: {backgroundMusic.path.split(/[/\\]/).pop()}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Append clips info */}
|
|
{additionalClips.length > 0 && (
|
|
<div className="pt-1 border-t border-editor-border">
|
|
<div className="flex items-center gap-1.5 text-xs text-editor-accent">
|
|
<Video className="w-3 h-3" />
|
|
{additionalClips.length} additional clip{additionalClips.length > 1 ? 's' : ''} appended
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Audio normalization — integrated into export */}
|
|
<div className="space-y-2 pt-1 border-t border-editor-border">
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={options.normalizeAudio}
|
|
onChange={(e) => setOptions((o) => ({ ...o, normalizeAudio: e.target.checked }))}
|
|
className="w-4 h-4 rounded bg-editor-surface border-editor-border accent-editor-accent"
|
|
title="Normalize audio to a consistent loudness target"
|
|
/>
|
|
<div>
|
|
<span className="text-xs font-medium">Normalize loudness</span>
|
|
<p className="text-[10px] text-editor-text-muted">
|
|
Apply LUFS normalization during export. Requires re-encode.
|
|
</p>
|
|
</div>
|
|
</label>
|
|
{options.normalizeAudio && (
|
|
<div className="flex items-center gap-2 pl-6">
|
|
<Volume2 className="w-3 h-3 text-editor-text-muted shrink-0" />
|
|
<select
|
|
value={options.normalizeTarget}
|
|
onChange={(e) => setOptions((o) => ({ ...o, normalizeTarget: Number(e.target.value) }))}
|
|
className="flex-1 px-2 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:outline-none focus:border-editor-accent [color-scheme:dark]"
|
|
title="Loudness target — YouTube (-14), Spotify (-16), Broadcast (-23)"
|
|
>
|
|
<option value={-14}>YouTube (-14 LUFS)</option>
|
|
<option value={-16}>Spotify (-16 LUFS)</option>
|
|
<option value={-23}>Broadcast (-23 LUFS)</option>
|
|
<option value={-11}>Loud (-11 LUFS)</option>
|
|
<option value={-9}>Very Loud (-9 LUFS)</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Audio enhancement */}
|
|
<label className="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={options.enhanceAudio}
|
|
onChange={(e) => setOptions((o) => ({ ...o, enhanceAudio: e.target.checked }))}
|
|
className="w-4 h-4 rounded bg-editor-surface border-editor-border accent-editor-accent"
|
|
title="Apply noise reduction and speech enhancement"
|
|
/>
|
|
<span className="text-xs">Enhance audio (Studio Sound)</span>
|
|
</label>
|
|
|
|
{/* Captions */}
|
|
<SelectField
|
|
label="Captions"
|
|
value={options.captions}
|
|
onChange={(v) => setOptions((o) => ({ ...o, captions: v as ExportOptions['captions'] }))}
|
|
options={[
|
|
{ value: 'none', label: 'No captions' },
|
|
{ value: 'burn-in', label: 'Burn-in (permanent)' },
|
|
{ value: 'sidecar', label: 'Sidecar SRT file' },
|
|
]}
|
|
title="Burn captions into video, export as separate SRT/VTT file, or none"
|
|
/>
|
|
|
|
{/* Transcript-only export */}
|
|
<div className="space-y-2 pt-1 border-t border-editor-border">
|
|
<h4 className="text-xs font-semibold flex items-center gap-1.5">
|
|
<FileText className="w-3.5 h-3.5" />
|
|
Export Transcript Only
|
|
</h4>
|
|
<p className="text-[10px] text-editor-text-muted leading-relaxed">
|
|
Export the edited transcript as plain text or SRT without rendering video.
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
<select
|
|
value={transcriptFormat}
|
|
onChange={(e) => setTranscriptFormat(e.target.value as 'txt' | 'srt')}
|
|
className="flex-1 px-2 py-1.5 text-xs bg-editor-surface border border-editor-border rounded focus:outline-none focus:border-editor-accent [color-scheme:dark]"
|
|
>
|
|
<option value="txt">Plain Text (.txt)</option>
|
|
<option value="srt">Subtitles (.srt)</option>
|
|
</select>
|
|
<button
|
|
onClick={handleTranscriptExport}
|
|
disabled={isTranscribingTranscript || words.length === 0}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-editor-accent/20 text-editor-accent hover:bg-editor-accent/30 disabled:opacity-40 transition-colors"
|
|
title="Export just the transcript text or subtitles without the video"
|
|
>
|
|
{isTranscribingTranscript ? (
|
|
<Loader2 className="w-3 h-3 animate-spin" />
|
|
) : (
|
|
<FileText className="w-3 h-3" />
|
|
)}
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Export video button */}
|
|
<button
|
|
onClick={handleExport}
|
|
disabled={isExporting || !videoPath}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-editor-accent hover:bg-editor-accent-hover disabled:opacity-50 rounded-lg text-sm font-semibold transition-colors"
|
|
title="Start export with current settings"
|
|
>
|
|
{isExporting ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 animate-spin" />
|
|
Exporting... {Math.round(exportProgress)}%
|
|
</>
|
|
) : (
|
|
<>
|
|
<Download className="w-4 h-4" />
|
|
Export Video
|
|
</>
|
|
)}
|
|
</button>
|
|
|
|
{exportError && (
|
|
<div className="rounded border border-red-500/40 bg-red-500/10 px-3 py-2 text-xs text-red-300">
|
|
{exportError}
|
|
</div>
|
|
)}
|
|
|
|
{options.mode === 'fast' && !hasCuts && (
|
|
<p className="text-[10px] text-editor-text-muted text-center">
|
|
Fast mode uses stream copy — no quality loss, exports in seconds.
|
|
</p>
|
|
)}
|
|
{options.mode === 'fast' && hasCuts && (
|
|
<div className="flex items-start gap-1.5 p-2 bg-editor-accent/10 rounded text-[10px] text-editor-accent">
|
|
<Info className="w-3.5 h-3.5 shrink-0 mt-0.5" />
|
|
<span>
|
|
Word-level cuts require re-encoding for frame-accurate output. Export will
|
|
automatically use re-encode mode. This takes longer but ensures your cuts are precise.
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ModeCard({
|
|
active,
|
|
onClick,
|
|
icon,
|
|
title,
|
|
desc,
|
|
tooltip,
|
|
}: {
|
|
active: boolean;
|
|
onClick: () => void;
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
desc: string;
|
|
tooltip?: string;
|
|
}) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
title={tooltip}
|
|
className={`flex flex-col items-center gap-1 p-3 rounded-lg border-2 transition-colors ${
|
|
active
|
|
? 'border-editor-accent bg-editor-accent/10'
|
|
: 'border-editor-border hover:border-editor-text-muted'
|
|
}`}
|
|
>
|
|
{icon}
|
|
<span className="text-xs font-medium">{title}</span>
|
|
<span className="text-[10px] text-editor-text-muted">{desc}</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function SelectField({
|
|
label,
|
|
value,
|
|
onChange,
|
|
options,
|
|
title,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
options: Array<{ value: string; label: string }>;
|
|
title?: string;
|
|
}) {
|
|
return (
|
|
<div className="space-y-1">
|
|
<label className="text-xs text-editor-text-muted font-medium">{label}</label>
|
|
<select
|
|
title={title}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
className="w-full px-3 py-2 bg-editor-surface border border-editor-border rounded-lg text-xs text-editor-text focus:outline-none focus:border-editor-accent [color-scheme:dark]"
|
|
>
|
|
{options.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|