;
+ onInstall: (ext: MarketplaceExtension) => void;
+ onViewDetail: (ext: MarketplaceExtension) => void;
}) {
- const t = useScopedT("extensions");
- return (
-
- {/* Search */}
-
-
- onSearchQueryChange(e.target.value)}
- onKeyDown={(e) => {
- e.stopPropagation();
- if (e.key === "Enter") onSearch();
- }}
- className="w-full h-8 pl-8 pr-3 rounded-lg bg-white/[0.04] border border-white/[0.08] text-[12px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:ring-1 focus:ring-[#2563EB]/50 focus:border-[#2563EB]/30 transition-colors"
- />
-
+ const t = useScopedT("extensions");
+ return (
+
+ {/* Search */}
+
+
+ onSearchQueryChange(e.target.value)}
+ onKeyDown={(e) => {
+ e.stopPropagation();
+ if (e.key === "Enter") onSearch();
+ }}
+ className="w-full h-8 pl-8 pr-3 rounded-lg bg-white/[0.04] border border-white/[0.08] text-[12px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:ring-1 focus:ring-[#2563EB]/50 focus:border-[#2563EB]/30 transition-colors"
+ />
+
- {/* Results */}
- {loading && (
-
-
-
- )}
+ {/* Results */}
+ {loading && (
+
+
+
+ )}
- {error && (
-
-
-
{error}
-
-
- )}
+ {error && (
+
+
+
{error}
+
+
+ )}
- {!loading && !error && results.length === 0 && (
-
-
-
- {searchQuery ? t("search.noResults") : t("search.noMarketplace")}
-
-
- )}
+ {!loading && !error && results.length === 0 && (
+
+
+
+ {searchQuery ? t("search.noResults") : t("search.noMarketplace")}
+
+
+ )}
- {!loading && !error && results.length > 0 && (
-
-
- {results.length !== 1
- ? t("search.countPlural", undefined, { count: results.length })
- : t("search.count", undefined, { count: results.length })}
-
- {results.map((ext) => (
-
onInstall(ext)}
- onClick={() => onViewDetail(ext)}
- />
- ))}
-
- )}
-
- );
+ {!loading && !error && results.length > 0 && (
+
+
+ {results.length !== 1
+ ? t("search.countPlural", undefined, { count: results.length })
+ : t("search.count", undefined, { count: results.length })}
+
+ {results.map((ext) => (
+
onInstall(ext)}
+ onClick={() => onViewDetail(ext)}
+ />
+ ))}
+
+ )}
+
{selectedZoomMode === "manual"
? tSettings(
- "zoom.modeManualDescription",
- "Set a fixed focus point for this zoom",
- )
+ "zoom.modeManualDescription",
+ "Set a fixed focus point for this zoom",
+ )
: tSettings(
- "zoom.modeAutoDescription",
- "Camera follows cursor automatically",
- )}
+ "zoom.modeAutoDescription",
+ "Camera follows cursor automatically",
+ )}
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 9a1d610d..d4071c98 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -1,32 +1,32 @@
import {
- ArrowClockwise as Redo2,
- ArrowCounterClockwise as Undo2,
+ Check,
CaretDown as ChevronDown,
CaretUp as ChevronUp,
- Check,
ClosedCaptioning,
Crop,
Cursor,
DownloadSimple as Download,
- FloppyDisk as Save,
FolderOpen,
Gear,
- MagicWand as WandSparkles,
- MagnifyingGlassPlus as ZoomIn,
Pause,
+ Camera as PhCameraRegular,
Play,
Plus,
- Camera as PhCameraRegular,
PuzzlePiece,
+ ArrowClockwise as Redo2,
+ FloppyDisk as Save,
Scissors,
SkipBack,
SkipForward,
- SpeakerHigh as Volume2,
- SpeakerLow as Volume1,
- SpeakerX as VolumeX,
Sparkle,
+ ArrowCounterClockwise as Undo2,
UserCircle as User,
+ SpeakerLow as Volume1,
+ SpeakerHigh as Volume2,
+ SpeakerX as VolumeX,
+ MagicWand as WandSparkles,
X,
+ MagnifyingGlassPlus as ZoomIn,
} from "@phosphor-icons/react";
import type { Span } from "dnd-timeline";
import { motion } from "motion/react";
@@ -113,7 +113,7 @@ import {
toFileUrl,
validateProjectData,
} from "./projectPersistence";
-import { type EditorEffectSection, SettingsPanel } from "./SettingsPanel";
+import { SettingsPanel } from "./SettingsPanel";
import {
APP_HEADER_ICON_BUTTON_CLASS,
DiscordLinkButton,
@@ -153,6 +153,7 @@ import {
DEFAULT_ZOOM_IN_OVERLAP_MS,
DEFAULT_ZOOM_OUT_DURATION_MS,
DEFAULT_ZOOM_OUT_EASING,
+ type EditorEffectSection,
type FigureData,
getClipSourceEndMs,
type PlaybackSpeed,
@@ -676,7 +677,7 @@ export default function VideoEditor() {
window.clearTimeout(pendingFreshRecordingAutoSuggestTimeoutRef.current);
pendingFreshRecordingAutoSuggestTimeoutRef.current = null;
}
- }, [videoPath]);
+ }, []);
// Auto-activate builtin extensions at editor startup (idempotent)
useEffect(() => {
@@ -783,7 +784,27 @@ export default function VideoEditor() {
annotationRegions,
autoCaptions,
autoCaptionSettings,
- speedRegions: effectiveSpeedRegions,
+ speedRegions: (() => {
+ const clipDerived: SpeedRegion[] = clipRegions
+ .filter((clip) => clip.speed !== 1)
+ .map((clip) => ({
+ id: `clip-speed-${clip.id}`,
+ startMs: clip.startMs,
+ endMs: getClipSourceEndMs(clip),
+ speed: clip.speed as SpeedRegion["speed"],
+ }));
+ if (clipDerived.length === 0) return speedRegions;
+ const result = [...speedRegions];
+ for (const cs of clipDerived) {
+ const overlaps = speedRegions.some(
+ (sr) => sr.endMs > cs.startMs && sr.startMs < cs.endMs,
+ );
+ if (!overlaps) {
+ result.push(cs);
+ }
+ }
+ return result;
+ })(),
previewWidth,
previewHeight,
cursorTelemetry,
@@ -870,11 +891,11 @@ export default function VideoEditor() {
cursorStyle,
cursorSway,
cursorTelemetry,
+ clipRegions,
padding,
shadowIntensity,
showCursor,
speedRegions,
- clipRegions,
wallpaper,
webcam,
zoomInDurationMs,
@@ -884,6 +905,7 @@ export default function VideoEditor() {
zoomOutDurationMs,
zoomOutEasing,
zoomRegions,
+ zoomClassicMode,
]);
const markExportAsSaving = useCallback(() => {
@@ -1271,7 +1293,6 @@ export default function VideoEditor() {
shadowIntensity,
backgroundBlur,
zoomMotionBlur,
- autoApplyFreshRecordingAutoZooms,
connectZooms,
zoomInDurationMs,
zoomInOverlapMs,
@@ -1313,6 +1334,7 @@ export default function VideoEditor() {
gifFrameRate,
gifLoop,
gifSizePreset,
+ frame,
],
);
@@ -1729,8 +1751,9 @@ export default function VideoEditor() {
setVideoPath(sourceVideoUrl);
setCurrentProjectPath(null);
setLastSavedSnapshot(null);
- pendingFreshRecordingAutoZoomPathRef.current =
- autoApplyFreshRecordingAutoZooms ? sourceVideoUrl : null;
+ pendingFreshRecordingAutoZoomPathRef.current = autoApplyFreshRecordingAutoZooms
+ ? sourceVideoUrl
+ : null;
setWebcam((prev) => ({
...prev,
enabled: Boolean(sessionResult.session?.webcamPath),
@@ -1747,8 +1770,9 @@ export default function VideoEditor() {
setVideoPath(sourceVideoUrl);
setCurrentProjectPath(null);
setLastSavedSnapshot(null);
- pendingFreshRecordingAutoZoomPathRef.current =
- autoApplyFreshRecordingAutoZooms ? sourceVideoUrl : null;
+ pendingFreshRecordingAutoZoomPathRef.current = autoApplyFreshRecordingAutoZooms
+ ? sourceVideoUrl
+ : null;
setWebcam((prev) => ({
...prev,
enabled: false,
@@ -1767,8 +1791,13 @@ export default function VideoEditor() {
loadInitialData();
}, [
applyLoadedProject,
+ autoApplyFreshRecordingAutoZooms,
+ initialEditorPreferences,
smokeExportConfig.enabled,
smokeExportConfig.inputPath,
+ smokeExportConfig.webcamInputPath,
+ smokeExportConfig.webcamShadow,
+ smokeExportConfig.webcamSize,
]);
useEffect(() => {
@@ -1839,8 +1868,6 @@ export default function VideoEditor() {
cursorStyle,
cursorSize,
cursorSmoothing,
- zoomSmoothness,
- zoomClassicMode,
cursorMotionBlur,
cursorClickBounce,
cursorClickBounceDuration,
@@ -2362,7 +2389,6 @@ export default function VideoEditor() {
speed: clip.speed as SpeedRegion["speed"],
}));
if (clipDerived.length === 0) return speedRegions;
- // Timeline speed regions take precedence; only fill in clip speed where no overlap exists
const result = [...speedRegions];
for (const cs of clipDerived) {
const overlaps = speedRegions.some(
@@ -3852,8 +3878,6 @@ export default function VideoEditor() {
videoPath,
wallpaper,
trimRegions,
- speedRegions,
- clipRegions,
shadowIntensity,
backgroundBlur,
zoomMotionBlur,
@@ -3894,14 +3918,21 @@ export default function VideoEditor() {
effectiveZoomRegions,
ensureSupportedMp4SourceDimensions,
markExportAsSaving,
+ mp4FrameRate,
remountPreview,
showExportSuccessToast,
+ smokeExportConfig.backendPreference,
smokeExportConfig.enabled,
smokeExportConfig.useNativeExport,
smokeExportConfig.maxDecodeQueue,
smokeExportConfig.maxEncodeQueue,
smokeExportConfig.maxPendingFrames,
smokeExportConfig.outputPath,
+ smokeExportConfig.pipelineModel,
+ smokeExportConfig.shadowIntensity,
+ effectiveSpeedRegions,
+ frame,
+ smokeExportConfig.encodingMode,
],
);
@@ -4593,9 +4624,7 @@ export default function VideoEditor() {
whileHover={{ opacity: 1 }}
initial={{ opacity: 0.55 }}
>
-
+
@@ -4921,7 +4950,9 @@ export default function VideoEditor() {
className="h-7 gap-1 rounded-full border border-white/[0.08] bg-white/[0.04] px-2.5 text-[11px] text-white/65 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] transition-all hover:bg-white/[0.08] hover:text-white"
>
- {t("editor.toolbar.addLayer")}
+
+ {t("editor.toolbar.addLayer")}
+
diff --git a/src/components/video-editor/index.ts b/src/components/video-editor/index.ts
index 8f1578b0..4fcca759 100644
--- a/src/components/video-editor/index.ts
+++ b/src/components/video-editor/index.ts
@@ -1,6 +1,5 @@
-export { default as VideoEditor } from './VideoEditor';
-export { default as VideoPlayback } from './VideoPlayback';
-export { default as PlaybackControls } from './PlaybackControls';
-export { default as TimelineEditor } from './timeline/TimelineEditor';
-export { default as SettingsPanel } from './SettingsPanel';
-
+export { default as PlaybackControls } from "./PlaybackControls";
+export { SettingsPanel } from "./SettingsPanel";
+export { default as TimelineEditor } from "./timeline/TimelineEditor";
+export { default as VideoEditor } from "./VideoEditor";
+export { default as VideoPlayback } from "./VideoPlayback";
diff --git a/src/components/video-editor/timeline/TimelineEditor.tsx b/src/components/video-editor/timeline/TimelineEditor.tsx
index ef6ca31f..17af7928 100644
--- a/src/components/video-editor/timeline/TimelineEditor.tsx
+++ b/src/components/video-editor/timeline/TimelineEditor.tsx
@@ -1,5 +1,29 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type WheelEvent } from "react";
+import type { Range, Span } from "dnd-timeline";
import { useTimelineContext } from "dnd-timeline";
+import {
+ Check,
+ ChevronDown,
+ Crop,
+ MessageSquare,
+ Music,
+ Plus,
+ Scissors,
+ WandSparkles,
+ ZoomIn,
+} from "lucide-react";
+import {
+ forwardRef,
+ type KeyboardEvent as ReactKeyboardEvent,
+ useCallback,
+ useEffect,
+ useImperativeHandle,
+ useMemo,
+ useRef,
+ useState,
+ type WheelEvent,
+} from "react";
+import { toast } from "sonner";
+import { v4 as uuidv4 } from "uuid";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
@@ -7,26 +31,36 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
-import { Plus, Scissors, ZoomIn, MessageSquare, ChevronDown, Check, WandSparkles, Music, Crop } from "lucide-react";
-import { toast } from "sonner";
-import { cn } from "@/lib/utils";
-import { v4 as uuidv4 } from 'uuid';
import { useScopedT } from "@/contexts/I18nContext";
import { useShortcuts } from "@/contexts/ShortcutsContext";
import { matchesShortcut } from "@/lib/shortcuts";
-import { ASPECT_RATIOS, type AspectRatio, getAspectRatioLabel, isCustomAspectRatio } from "@/utils/aspectRatioUtils";
+import { cn } from "@/lib/utils";
+import {
+ ASPECT_RATIOS,
+ type AspectRatio,
+ getAspectRatioLabel,
+ isCustomAspectRatio,
+} from "@/utils/aspectRatioUtils";
import { formatShortcut } from "@/utils/platformUtils";
import { loadEditorPreferences, saveEditorPreferences } from "../editorPreferences";
-import TimelineWrapper from "./TimelineWrapper";
-import Row from "./Row";
+import { toFileUrl } from "../projectPersistence";
+import type {
+ AnnotationRegion,
+ AudioRegion,
+ ClipRegion,
+ CursorTelemetryPoint,
+ SpeedRegion,
+ TrimRegion,
+ ZoomFocus,
+ ZoomRegion,
+} from "../types";
+import AudioWaveform from "./AudioWaveform";
import Item from "./Item";
import KeyframeMarkers from "./KeyframeMarkers";
-import type { Range, Span } from "dnd-timeline";
-import type { ZoomRegion, TrimRegion, ClipRegion, AnnotationRegion, SpeedRegion, AudioRegion, CursorTelemetryPoint, ZoomFocus } from "../types";
-import { toFileUrl } from "../projectPersistence";
+import Row from "./Row";
+import TimelineWrapper from "./TimelineWrapper";
+import { type AudioPeaksData, useAudioPeaks } from "./useAudioPeaks";
import { buildInteractionZoomSuggestions } from "./zoomSuggestionUtils";
-import { useAudioPeaks, type AudioPeaksData } from "./useAudioPeaks";
-import AudioWaveform from "./AudioWaveform";
const ZOOM_ROW_ID = "row-zoom";
const CLIP_ROW_ID = "row-clip";
@@ -35,70 +69,70 @@ const AUDIO_ROW_ID = "row-audio";
const FALLBACK_RANGE_MS = 1000;
const TARGET_MARKER_COUNT = 12;
interface TimelineEditorProps {
- videoDuration: number;
- currentTime: number;
- playheadTime?: number;
- onSeek?: (time: number) => void;
- cursorTelemetry?: CursorTelemetryPoint[];
- autoSuggestZoomsTrigger?: number;
- onAutoSuggestZoomsConsumed?: () => void;
- disableSuggestedZooms?: boolean;
- zoomRegions: ZoomRegion[];
- onZoomAdded: (span: Span) => void;
- onZoomSuggested?: (span: Span, focus: ZoomFocus) => void;
- onZoomSpanChange: (id: string, span: Span) => void;
- onZoomDelete: (id: string) => void;
- selectedZoomId: string | null;
- onSelectZoom: (id: string | null) => void;
- trimRegions?: TrimRegion[];
- onTrimAdded?: (span: Span) => void;
- onTrimSpanChange?: (id: string, span: Span) => void;
- onTrimDelete?: (id: string) => void;
- selectedTrimId?: string | null;
- onSelectTrim?: (id: string | null) => void;
- clipRegions?: ClipRegion[];
- onClipSplit?: (splitMs: number) => void;
- onClipSpanChange?: (id: string, span: Span) => void;
- onClipDelete?: (id: string) => void;
- selectedClipId?: string | null;
- onSelectClip?: (id: string | null) => void;
- annotationRegions?: AnnotationRegion[];
- onAnnotationAdded?: (span: Span, trackIndex?: number) => void;
- onAnnotationSpanChange?: (id: string, span: Span) => void;
- onAnnotationDelete?: (id: string) => void;
- selectedAnnotationId?: string | null;
- onSelectAnnotation?: (id: string | null) => void;
- speedRegions?: SpeedRegion[];
- onSpeedAdded?: (span: Span) => void;
- onSpeedSpanChange?: (id: string, span: Span) => void;
- onSpeedDelete?: (id: string) => void;
- selectedSpeedId?: string | null;
- onSelectSpeed?: (id: string | null) => void;
- audioRegions?: AudioRegion[];
- onAudioAdded?: (span: Span, audioPath: string) => void;
- onAudioSpanChange?: (id: string, span: Span) => void;
- onAudioDelete?: (id: string) => void;
- selectedAudioId?: string | null;
- onSelectAudio?: (id: string | null) => void;
- aspectRatio?: AspectRatio;
- onAspectRatioChange?: (aspectRatio: AspectRatio) => void;
- onOpenCropEditor?: () => void;
- isCropped?: boolean;
- videoPath?: string | null;
- isPlaying?: boolean;
- onTogglePlayPause?: () => void;
- volume?: number;
- onVolumeChange?: (volume: number) => void;
- hideToolbar?: boolean;
+ videoDuration: number;
+ currentTime: number;
+ playheadTime?: number;
+ onSeek?: (time: number) => void;
+ cursorTelemetry?: CursorTelemetryPoint[];
+ autoSuggestZoomsTrigger?: number;
+ onAutoSuggestZoomsConsumed?: () => void;
+ disableSuggestedZooms?: boolean;
+ zoomRegions: ZoomRegion[];
+ onZoomAdded: (span: Span) => void;
+ onZoomSuggested?: (span: Span, focus: ZoomFocus) => void;
+ onZoomSpanChange: (id: string, span: Span) => void;
+ onZoomDelete: (id: string) => void;
+ selectedZoomId: string | null;
+ onSelectZoom: (id: string | null) => void;
+ trimRegions?: TrimRegion[];
+ onTrimAdded?: (span: Span) => void;
+ onTrimSpanChange?: (id: string, span: Span) => void;
+ onTrimDelete?: (id: string) => void;
+ selectedTrimId?: string | null;
+ onSelectTrim?: (id: string | null) => void;
+ clipRegions?: ClipRegion[];
+ onClipSplit?: (splitMs: number) => void;
+ onClipSpanChange?: (id: string, span: Span) => void;
+ onClipDelete?: (id: string) => void;
+ selectedClipId?: string | null;
+ onSelectClip?: (id: string | null) => void;
+ annotationRegions?: AnnotationRegion[];
+ onAnnotationAdded?: (span: Span, trackIndex?: number) => void;
+ onAnnotationSpanChange?: (id: string, span: Span) => void;
+ onAnnotationDelete?: (id: string) => void;
+ selectedAnnotationId?: string | null;
+ onSelectAnnotation?: (id: string | null) => void;
+ speedRegions?: SpeedRegion[];
+ onSpeedAdded?: (span: Span) => void;
+ onSpeedSpanChange?: (id: string, span: Span) => void;
+ onSpeedDelete?: (id: string) => void;
+ selectedSpeedId?: string | null;
+ onSelectSpeed?: (id: string | null) => void;
+ audioRegions?: AudioRegion[];
+ onAudioAdded?: (span: Span, audioPath: string) => void;
+ onAudioSpanChange?: (id: string, span: Span) => void;
+ onAudioDelete?: (id: string) => void;
+ selectedAudioId?: string | null;
+ onSelectAudio?: (id: string | null) => void;
+ aspectRatio?: AspectRatio;
+ onAspectRatioChange?: (aspectRatio: AspectRatio) => void;
+ onOpenCropEditor?: () => void;
+ isCropped?: boolean;
+ videoPath?: string | null;
+ isPlaying?: boolean;
+ onTogglePlayPause?: () => void;
+ volume?: number;
+ onVolumeChange?: (volume: number) => void;
+ hideToolbar?: boolean;
}
export interface TimelineEditorHandle {
- addZoom: () => void;
- suggestZooms: () => void;
- splitClip: () => void;
- addAnnotation: (trackIndex?: number) => void;
- addAudio: () => Promise;
- keyframes: { id: string; time: number }[];
+ addZoom: () => void;
+ suggestZooms: () => void;
+ splitClip: () => void;
+ addAnnotation: (trackIndex?: number) => void;
+ addAudio: () => Promise;
+ keyframes: { id: string; time: number }[];
}
interface TimelineScaleConfig {
@@ -108,13 +142,13 @@ interface TimelineScaleConfig {
}
interface TimelineRenderItem {
- id: string;
- rowId: string;
- span: Span;
- label: string;
- zoomDepth?: number;
- speedValue?: number;
- variant: 'zoom' | 'trim' | 'clip' | 'annotation' | 'speed' | 'audio';
+ id: string;
+ rowId: string;
+ span: Span;
+ label: string;
+ zoomDepth?: number;
+ speedValue?: number;
+ variant: "zoom" | "trim" | "clip" | "annotation" | "speed" | "audio";
}
const SCALE_CANDIDATES = [
@@ -411,7 +445,7 @@ function TimelineAxis({
return (
{marker.label}
@@ -462,47 +498,47 @@ function TimelineAxis({
}
function Timeline({
- items,
- videoDurationMs,
- currentTimeMs,
- onSeek,
- onSelectZoom,
- onSelectTrim,
- onSelectClip,
- onSelectAnnotation,
- onSelectSpeed,
- onSelectAudio,
- selectedZoomId,
- selectedTrimId: _selectedTrimId,
- selectedClipId,
- selectedAnnotationId,
- selectedSpeedId: _selectedSpeedId,
- selectedAudioId,
- selectAllBlocksActive = false,
- onClearBlockSelection,
- keyframes = [],
- audioPeaks,
+ items,
+ videoDurationMs,
+ currentTimeMs,
+ onSeek,
+ onSelectZoom,
+ onSelectTrim,
+ onSelectClip,
+ onSelectAnnotation,
+ onSelectSpeed,
+ onSelectAudio,
+ selectedZoomId,
+ selectedTrimId: _selectedTrimId,
+ selectedClipId,
+ selectedAnnotationId,
+ selectedSpeedId: _selectedSpeedId,
+ selectedAudioId,
+ selectAllBlocksActive = false,
+ onClearBlockSelection,
+ keyframes = [],
+ audioPeaks,
}: {
- items: TimelineRenderItem[];
- videoDurationMs: number;
- currentTimeMs: number;
- onSeek?: (time: number) => void;
- onSelectZoom?: (id: string | null) => void;
- onSelectTrim?: (id: string | null) => void;
- onSelectClip?: (id: string | null) => void;
- onSelectAnnotation?: (id: string | null) => void;
- onSelectSpeed?: (id: string | null) => void;
- onSelectAudio?: (id: string | null) => void;
- selectedZoomId: string | null;
- selectedTrimId?: string | null;
- selectedClipId?: string | null;
- selectedAnnotationId?: string | null;
- selectedSpeedId?: string | null;
- selectedAudioId?: string | null;
- selectAllBlocksActive?: boolean;
- onClearBlockSelection?: () => void;
- keyframes?: { id: string; time: number }[];
- audioPeaks?: AudioPeaksData | null;
+ items: TimelineRenderItem[];
+ videoDurationMs: number;
+ currentTimeMs: number;
+ onSeek?: (time: number) => void;
+ onSelectZoom?: (id: string | null) => void;
+ onSelectTrim?: (id: string | null) => void;
+ onSelectClip?: (id: string | null) => void;
+ onSelectAnnotation?: (id: string | null) => void;
+ onSelectSpeed?: (id: string | null) => void;
+ onSelectAudio?: (id: string | null) => void;
+ selectedZoomId: string | null;
+ selectedTrimId?: string | null;
+ selectedClipId?: string | null;
+ selectedAnnotationId?: string | null;
+ selectedSpeedId?: string | null;
+ selectedAudioId?: string | null;
+ selectAllBlocksActive?: boolean;
+ onClearBlockSelection?: () => void;
+ keyframes?: { id: string; time: number }[];
+ audioPeaks?: AudioPeaksData | null;
}) {
const { setTimelineRef, style, sidebarWidth, range, pixelsToValue } = useTimelineContext();
const localTimelineRef = useRef
(null);
@@ -519,15 +555,15 @@ function Timeline({
(e: React.MouseEvent) => {
if (!onSeek || videoDurationMs <= 0) return;
- // Only clear selection if clicking on empty space (not on items)
- // This is handled by event propagation - items stop propagation
- onSelectZoom?.(null);
- onSelectTrim?.(null);
- onSelectClip?.(null);
- onSelectAnnotation?.(null);
- onSelectSpeed?.(null);
- onSelectAudio?.(null);
- onClearBlockSelection?.();
+ // Only clear selection if clicking on empty space (not on items)
+ // This is handled by event propagation - items stop propagation
+ onSelectZoom?.(null);
+ onSelectTrim?.(null);
+ onSelectClip?.(null);
+ onSelectAnnotation?.(null);
+ onSelectSpeed?.(null);
+ onSelectAudio?.(null);
+ onClearBlockSelection?.();
const rect = e.currentTarget.getBoundingClientRect();
const clickX = e.clientX - rect.left - sidebarWidth;
@@ -538,20 +574,35 @@ function Timeline({
const absoluteMs = Math.max(0, Math.min(range.start + relativeMs, videoDurationMs));
const timeInSeconds = absoluteMs / 1000;
- onSeek(timeInSeconds);
- }, [onSeek, onSelectZoom, onSelectTrim, onSelectClip, onSelectAnnotation, onSelectSpeed, onSelectAudio, videoDurationMs, sidebarWidth, range.start, pixelsToValue]);
+ onSeek(timeInSeconds);
+ },
+ [
+ onSeek,
+ onSelectZoom,
+ onSelectTrim,
+ onSelectClip,
+ onSelectAnnotation,
+ onSelectSpeed,
+ onSelectAudio,
+ onClearBlockSelection,
+ videoDurationMs,
+ sidebarWidth,
+ range.start,
+ pixelsToValue,
+ ],
+ );
- const zoomItems = items.filter(item => item.rowId === ZOOM_ROW_ID);
+ const zoomItems = items.filter((item) => item.rowId === ZOOM_ROW_ID);
- const clipItems = items.filter(item => item.rowId === CLIP_ROW_ID);
- const annotationItems = items.filter(item => item.rowId === ANNOTATION_ROW_ID);
- const audioItems = items.filter(item => item.rowId === AUDIO_ROW_ID);
+ const clipItems = items.filter((item) => item.rowId === CLIP_ROW_ID);
+ const annotationItems = items.filter((item) => item.rowId === ANNOTATION_ROW_ID);
+ const audioItems = items.filter((item) => item.rowId === AUDIO_ROW_ID);
return (
@@ -564,1154 +615,1391 @@ function Timeline({
keyframes={keyframes}
/>
-
-
- {audioPeaks && }
- {clipItems.map((item) => (
- - onSelectClip?.(item.id)}
- variant="clip"
- >
- {item.label}
-
- ))}
-
+
+
+ {audioPeaks && }
+ {clipItems.map((item) => (
+ - onSelectClip?.(item.id)}
+ variant="clip"
+ >
+ {item.label}
+
+ ))}
+
-
- {zoomItems.map((item) => (
- - onSelectZoom?.(item.id)}
- zoomDepth={item.zoomDepth}
- variant="zoom"
- >
- {item.label}
-
- ))}
-
+
+ {zoomItems.map((item) => (
+ - onSelectZoom?.(item.id)}
+ zoomDepth={item.zoomDepth}
+ variant="zoom"
+ >
+ {item.label}
+
+ ))}
+
+
+ {annotationItems.map((item) => (
+ - onSelectAnnotation?.(item.id)}
+ variant="annotation"
+ >
+ {item.label}
+
+ ))}
+
-
- {annotationItems.map((item) => (
- - onSelectAnnotation?.(item.id)}
- variant="annotation"
- >
- {item.label}
-
- ))}
-
-
-
- {audioItems.map((item) => (
- - onSelectAudio?.(item.id)}
- variant="audio"
- >
- {item.label}
-
- ))}
-
-
-
- );
+
+ {audioItems.map((item) => (
+ - onSelectAudio?.(item.id)}
+ variant="audio"
+ >
+ {item.label}
+
+ ))}
+
+
+
-
-
-
No Video Loaded
-
Drag and drop a video to start editing
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {ASPECT_RATIOS.map((ratio) => (
- onAspectRatioChange?.(ratio)}
- className="text-slate-300 hover:text-white hover:bg-white/10 cursor-pointer flex items-center justify-between gap-3"
- >
- {getAspectRatioLabel(ratio)}
- {aspectRatio === ratio && }
-
- ))}
-
-
- Custom
- setCustomAspectWidth(event.target.value.replace(/\D/g, ''))}
- onKeyDown={handleCustomAspectRatioKeyDown}
- className="w-12 h-7 rounded border border-white/15 bg-black/20 px-1.5 text-sm text-slate-100 focus:outline-none focus:ring-1 focus:ring-[#2563EB]"
- aria-label="Custom aspect width"
- />
- :
- setCustomAspectHeight(event.target.value.replace(/\D/g, ''))}
- onKeyDown={handleCustomAspectRatioKeyDown}
- className="w-12 h-7 rounded border border-white/15 bg-black/20 px-1.5 text-sm text-slate-100 focus:outline-none focus:ring-1 focus:ring-[#2563EB]"
- aria-label="Custom aspect height"
- />
-
- {isCustomAspectRatio(aspectRatio) && }
-
-
-
-
-
-
-
-
-
- Side Scroll
- Pan
-
-
- {scrollLabels.pan}
- Pan
-
-
- {scrollLabels.zoom}
- Zoom
-
-
-
-
{
- isTimelineFocusedRef.current = true;
- }}
- onBlur={() => {
- isTimelineFocusedRef.current = false;
- }}
- onMouseDown={() => {
- timelineContainerRef.current?.focus();
- isTimelineFocusedRef.current = true;
- }}
- onClick={() => {
- setSelectedKeyframeId(null);
- setSelectAllBlocksActive(false);
- }}
- onWheel={handleTimelineWheel}
- >
-
-
-
-
-
-
+
+
+
No Video Loaded
+
+ Drag and drop a video to start editing
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {ASPECT_RATIOS.map((ratio) => (
+ onAspectRatioChange?.(ratio)}
+ className="text-slate-300 hover:text-white hover:bg-white/10 cursor-pointer flex items-center justify-between gap-3"
+ >
+ {getAspectRatioLabel(ratio)}
+ {aspectRatio === ratio && (
+
+ )}
+
+ ))}
+
+
+ Custom
+
+ setCustomAspectWidth(
+ event.target.value.replace(/\D/g, ""),
+ )
+ }
+ onKeyDown={handleCustomAspectRatioKeyDown}
+ className="w-12 h-7 rounded border border-white/15 bg-black/20 px-1.5 text-sm text-slate-100 focus:outline-none focus:ring-1 focus:ring-[#2563EB]"
+ aria-label="Custom aspect width"
+ />
+ :
+
+ setCustomAspectHeight(
+ event.target.value.replace(/\D/g, ""),
+ )
+ }
+ onKeyDown={handleCustomAspectRatioKeyDown}
+ className="w-12 h-7 rounded border border-white/15 bg-black/20 px-1.5 text-sm text-slate-100 focus:outline-none focus:ring-1 focus:ring-[#2563EB]"
+ aria-label="Custom aspect height"
+ />
+
+ {isCustomAspectRatio(aspectRatio) && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ Side Scroll
+
+ Pan
+
+
+
+ {scrollLabels.pan}
+
+ Pan
+
+
+
+ {scrollLabels.zoom}
+
+ Zoom
+
+
+
+
{
+ isTimelineFocusedRef.current = true;
+ }}
+ onBlur={() => {
+ isTimelineFocusedRef.current = false;
+ }}
+ onMouseDown={() => {
+ timelineContainerRef.current?.focus();
+ isTimelineFocusedRef.current = true;
+ }}
+ onClick={() => {
+ setSelectedKeyframeId(null);
+ setSelectAllBlocksActive(false);
+ }}
+ onWheel={handleTimelineWheel}
+ >
+
+
+
+
+
+
- ) : (
-