{
+ // Also allow starting selection from the ruler
+ (e.currentTarget.parentElement as any)?.__handleMouseDown?.(e);
+ }}
+ onClick={(e) => {
+ // Also allow seeking/clearing from the ruler
+ (e.currentTarget.parentElement as any)?.__handleTimelineClick?.(e);
+ }}
>
{/* Minor Ticks */}
{markers.minorTicks.map((time) => {
@@ -464,6 +475,8 @@ function Timeline({
selectAllBlocksActive = false,
onClearBlockSelection,
keyframes = [],
+ timeSelection,
+ onTimeSelectionChange,
}: {
items: TimelineRenderItem[];
videoDurationMs: number;
@@ -484,31 +497,119 @@ function Timeline({
selectAllBlocksActive?: boolean;
onClearBlockSelection?: () => void;
keyframes?: { id: string; time: number }[];
+ timeSelection?: TimeSelection | null;
+ onTimeSelectionChange?: (selection: TimeSelection | null) => void;
}) {
- const { setTimelineRef, style, sidebarWidth, range, pixelsToValue } = useTimelineContext();
+ const { setTimelineRef, style, sidebarWidth = 0, range, pixelsToValue, valueToPixels } = useTimelineContext();
const localTimelineRef = useRef
(null);
const setRefs = useCallback(
(node: HTMLDivElement | null) => {
- setTimelineRef(node);
- localTimelineRef.current = node;
+ if (localTimelineRef.current !== node) {
+ setTimelineRef(node);
+ localTimelineRef.current = node;
+ }
},
[setTimelineRef],
);
+ const isDraggingSelectionRef = useRef(false);
+ const selectionAnchorMsRef = useRef(null);
+ const initialMouseDownPosRef = useRef<{ x: number; y: number } | null>(null);
+
+ const handleMouseDown = useCallback(
+ (e: React.MouseEvent) => {
+ if (videoDurationMs <= 0) return;
+
+ // Capture the rect NOW — e.currentTarget becomes null after React's
+ // synthetic event is processed and must not be read inside async closures.
+ const capturedRect = e.currentTarget.getBoundingClientRect();
+ const clickX = e.clientX - capturedRect.left - sidebarWidth;
+
+ if (clickX < 0) return;
+
+ const relativeMs = pixelsToValue(clickX);
+ const absoluteMs = Math.max(0, Math.min(range.start + relativeMs, videoDurationMs));
+
+ initialMouseDownPosRef.current = { x: e.clientX, y: e.clientY };
+ isDraggingSelectionRef.current = false; // Reset drag flag
+
+ if (e.shiftKey) {
+ // Shift+mousedown: anchor to the far edge of the existing selection,
+ // or to the current playhead if there is no selection yet.
+ let anchor = currentTimeMs;
+ if (timeSelection) {
+ const distToStart = Math.abs(timeSelection.startMs - absoluteMs);
+ const distToEnd = Math.abs(timeSelection.endMs - absoluteMs);
+ anchor = distToStart > distToEnd ? timeSelection.startMs : timeSelection.endMs;
+ }
+
+ selectionAnchorMsRef.current = anchor;
+ const start = Math.min(anchor, absoluteMs);
+ const end = Math.max(anchor, absoluteMs);
+ onTimeSelectionChange?.({ startMs: start, endMs: end });
+ } else {
+ // Plain drag: anchor starts at the click point itself
+ selectionAnchorMsRef.current = absoluteMs;
+ onTimeSelectionChange?.({ startMs: absoluteMs, endMs: absoluteMs });
+ }
+
+ const handleGlobalMouseMove = (moveEvent: MouseEvent) => {
+ if (selectionAnchorMsRef.current === null || initialMouseDownPosRef.current === null) return;
+
+ const dx = Math.abs(moveEvent.clientX - initialMouseDownPosRef.current.x);
+ const dy = Math.abs(moveEvent.clientY - initialMouseDownPosRef.current.y);
+
+ if (dx > DRAG_THRESHOLD_PX || dy > DRAG_THRESHOLD_PX) {
+ isDraggingSelectionRef.current = true;
+ }
+
+ // Use the captured rect — safe to read from an async listener
+ const moveX = moveEvent.clientX - capturedRect.left - sidebarWidth;
+ const moveRelativeMs = pixelsToValue(moveX);
+ const moveAbsoluteMs = Math.max(0, Math.min(range.start + moveRelativeMs, videoDurationMs));
+
+ const start = Math.min(selectionAnchorMsRef.current, moveAbsoluteMs);
+ const end = Math.max(selectionAnchorMsRef.current, moveAbsoluteMs);
+
+ onTimeSelectionChange?.({ startMs: start, endMs: end });
+ };
+
+ const handleGlobalMouseUp = () => {
+ selectionAnchorMsRef.current = null;
+ initialMouseDownPosRef.current = null;
+ window.removeEventListener("mousemove", handleGlobalMouseMove);
+ window.removeEventListener("mouseup", handleGlobalMouseUp);
+ };
+
+ window.addEventListener("mousemove", handleGlobalMouseMove);
+ window.addEventListener("mouseup", handleGlobalMouseUp);
+ },
+ [range.start, sidebarWidth, pixelsToValue, videoDurationMs, onTimeSelectionChange, timeSelection, currentTimeMs],
+ );
+
const handleTimelineClick = useCallback(
(e: React.MouseEvent) => {
+ // If a drag occurred, swallow the click entirely
+ if (isDraggingSelectionRef.current) {
+ isDraggingSelectionRef.current = false;
+ return;
+ }
+
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);
- onSelectAnnotation?.(null);
- onSelectSpeed?.(null);
- onSelectAudio?.(null);
- onSelectCaption?.(null);
- onClearBlockSelection?.();
+ // Shift+click: the selection was already updated in mousedown — don't seek or clear
+ if (e.shiftKey) return;
+
+ // Plain click: clear selection and deselect all blocks, then seek
+ onTimeSelectionChange?.(null);
+ onSelectZoom?.(null);
+ onSelectTrim?.(null);
+ onSelectAnnotation?.(null);
+ onSelectSpeed?.(null);
+ onSelectAudio?.(null);
+ onSelectCaption?.(null);
+ onClearBlockSelection?.();
const rect = e.currentTarget.getBoundingClientRect();
const clickX = e.clientX - rect.left - sidebarWidth;
@@ -517,10 +618,19 @@ function Timeline({
const relativeMs = pixelsToValue(clickX);
const absoluteMs = Math.max(0, Math.min(range.start + relativeMs, videoDurationMs));
- const timeInSeconds = absoluteMs / 1000;
- onSeek(timeInSeconds);
- }, [onSeek, onSelectZoom, onSelectTrim, onSelectAnnotation, onSelectSpeed, onSelectAudio, onSelectCaption, videoDurationMs, sidebarWidth, range.start, pixelsToValue]);
+ onSeek(absoluteMs / 1000);
+ },
+ [onSeek, onSelectZoom, onSelectTrim, onSelectAnnotation, onSelectSpeed, onSelectAudio, onSelectCaption, videoDurationMs, sidebarWidth, range.start, pixelsToValue, onTimeSelectionChange, onClearBlockSelection],
+ );
+
+ useEffect(() => {
+ if (localTimelineRef.current) {
+ // Expose handlers for internal components like Axis
+ (localTimelineRef.current as any).__handleMouseDown = handleMouseDown;
+ (localTimelineRef.current as any).__handleTimelineClick = handleTimelineClick;
+ }
+ }, [handleMouseDown, handleTimelineClick]);
const zoomItems = items.filter(item => item.rowId === ZOOM_ROW_ID);
const trimItems = items.filter(item => item.rowId === TRIM_ROW_ID);
@@ -534,8 +644,19 @@ function Timeline({
ref={setRefs}
style={style}
className="select-none bg-[#17171a] h-full min-h-0 relative cursor-pointer group flex flex-col"
+ onMouseDown={handleMouseDown}
onClick={handleTimelineClick}
>
+ {timeSelection && (
+ range.end) ? 'none' : 'block'
+ }}
+ />
+ )}
))}
-
+
+
{captionItems.map((item) => (
- loadEditorPreferences(), []);
@@ -824,6 +948,7 @@ export default function TimelineEditor({
onSelectAudio(null);
}, [selectedAudioId, onAudioDelete, onSelectAudio]);
+
const clearSelectedBlocks = useCallback(() => {
onSelectZoom(null);
onSelectTrim?.(null);
@@ -896,6 +1021,7 @@ export default function TimelineEditor({
onSelectAudio?.(id);
}, [onSelectAudio]);
+
const handleSelectCaption = useCallback((id: string | null) => {
setSelectAllBlocksActive(false);
onSelectCaption?.(id);
@@ -1046,23 +1172,23 @@ export default function TimelineEditor({
// Always place zoom at playhead
const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
- // Find the next zoom region after the playhead
const sorted = [...zoomRegions].sort((a, b) => a.startMs - b.startMs);
const nextRegion = sorted.find(region => region.startMs > startPos);
const gapToNext = nextRegion ? nextRegion.startMs - startPos : totalMs - startPos;
- // Check if playhead is inside any zoom region
- const isOverlapping = sorted.some(region => startPos >= region.startMs && startPos < region.endMs);
- if (isOverlapping || gapToNext <= 0) {
- toast.error("Cannot place zoom here", {
- description: "Zoom already exists at this location or not enough space available.",
- });
- return;
- }
+ const actualDuration = timeSelection
+ ? timeSelection.endMs - timeSelection.startMs
+ : Math.min(defaultRegionDurationMs, gapToNext);
- const actualDuration = Math.min(defaultRegionDurationMs, gapToNext);
- onZoomAdded({ start: startPos, end: startPos + actualDuration });
- }, [videoDuration, totalMs, currentTimeMs, zoomRegions, onZoomAdded, defaultRegionDurationMs]);
+ const finalStart = timeSelection ? timeSelection.startMs : startPos;
+ const finalEnd = timeSelection ? timeSelection.endMs : startPos + actualDuration;
+
+ onZoomAdded({ start: finalStart, end: finalEnd });
+
+ if (timeSelection) {
+ onTimeSelectionChange?.(null);
+ }
+ }, [videoDuration, totalMs, currentTimeMs, zoomRegions, onZoomAdded, defaultRegionDurationMs, timeSelection, onTimeSelectionChange]);
const handleSuggestZooms = useCallback(() => {
if (!videoDuration || videoDuration === 0 || totalMs === 0) {
@@ -1174,23 +1300,23 @@ export default function TimelineEditor({
// Always place trim at playhead
const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
- // Find the next trim region after the playhead
const sorted = [...trimRegions].sort((a, b) => a.startMs - b.startMs);
const nextRegion = sorted.find(region => region.startMs > startPos);
const gapToNext = nextRegion ? nextRegion.startMs - startPos : totalMs - startPos;
- // Check if playhead is inside any trim region
- const isOverlapping = sorted.some(region => startPos >= region.startMs && startPos < region.endMs);
- if (isOverlapping || gapToNext <= 0) {
- toast.error("Cannot place trim here", {
- description: "Trim already exists at this location or not enough space available.",
- });
- return;
- }
+ const actualDuration = timeSelection
+ ? timeSelection.endMs - timeSelection.startMs
+ : Math.min(defaultRegionDurationMs, gapToNext);
- const actualDuration = Math.min(defaultRegionDurationMs, gapToNext);
- onTrimAdded({ start: startPos, end: startPos + actualDuration });
- }, [videoDuration, totalMs, currentTimeMs, trimRegions, onTrimAdded, defaultRegionDurationMs]);
+ const finalStart = timeSelection ? timeSelection.startMs : startPos;
+ const finalEnd = timeSelection ? timeSelection.endMs : startPos + actualDuration;
+
+ onTrimAdded({ start: finalStart, end: finalEnd });
+
+ if (timeSelection) {
+ onTimeSelectionChange?.(null);
+ }
+ }, [videoDuration, totalMs, currentTimeMs, trimRegions, onTrimAdded, defaultRegionDurationMs, timeSelection, onTimeSelectionChange]);
const handleAddSpeed = useCallback(() => {
if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onSpeedAdded) {
@@ -1204,23 +1330,23 @@ export default function TimelineEditor({
// Always place speed region at playhead
const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
- // Find the next speed region after the playhead
const sorted = [...speedRegions].sort((a, b) => a.startMs - b.startMs);
const nextRegion = sorted.find(region => region.startMs > startPos);
const gapToNext = nextRegion ? nextRegion.startMs - startPos : totalMs - startPos;
- // Check if playhead is inside any speed region
- const isOverlapping = sorted.some(region => startPos >= region.startMs && startPos < region.endMs);
- if (isOverlapping || gapToNext <= 0) {
- toast.error("Cannot place speed here", {
- description: "Speed region already exists at this location or not enough space available.",
- });
- return;
- }
+ const actualDuration = timeSelection
+ ? timeSelection.endMs - timeSelection.startMs
+ : Math.min(defaultRegionDurationMs, gapToNext);
- const actualDuration = Math.min(defaultRegionDurationMs, gapToNext);
- onSpeedAdded({ start: startPos, end: startPos + actualDuration });
- }, [videoDuration, totalMs, currentTimeMs, speedRegions, onSpeedAdded, defaultRegionDurationMs]);
+ const finalStart = timeSelection ? timeSelection.startMs : startPos;
+ const finalEnd = timeSelection ? timeSelection.endMs : startPos + actualDuration;
+
+ onSpeedAdded({ start: finalStart, end: finalEnd });
+
+ if (timeSelection) {
+ onTimeSelectionChange?.(null);
+ }
+ }, [videoDuration, totalMs, currentTimeMs, speedRegions, onSpeedAdded, defaultRegionDurationMs, timeSelection, onTimeSelectionChange]);
const handleAddAudio = useCallback(async () => {
if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onAudioAdded) {
@@ -1281,11 +1407,16 @@ export default function TimelineEditor({
}
// Multiple annotations can exist at the same timestamp
- const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
- const endPos = Math.min(startPos + defaultDuration, totalMs);
+ const finalStart = timeSelection ? timeSelection.startMs : Math.max(0, Math.min(currentTimeMs, totalMs));
+ const finalEnd = timeSelection ? timeSelection.endMs : Math.min(finalStart + defaultDuration, totalMs);
+
+ onAnnotationAdded({ start: finalStart, end: finalEnd });
+
+ if (timeSelection) {
+ onTimeSelectionChange?.(null);
+ }
+ }, [videoDuration, totalMs, currentTimeMs, onAnnotationAdded, defaultRegionDurationMs, timeSelection, onTimeSelectionChange]);
- onAnnotationAdded({ start: startPos, end: endPos });
- }, [videoDuration, totalMs, currentTimeMs, onAnnotationAdded, defaultRegionDurationMs]);
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
@@ -1304,9 +1435,6 @@ export default function TimelineEditor({
return;
}
- if (matchesShortcut(e, keyShortcuts.addKeyframe, isMac)) {
- addKeyframe();
- }
if (matchesShortcut(e, keyShortcuts.addZoom, isMac)) {
handleAddZoom();
}
@@ -1736,6 +1864,8 @@ export default function TimelineEditor({
selectAllBlocksActive={selectAllBlocksActive}
onClearBlockSelection={clearSelectedBlocks}
keyframes={keyframes}
+ timeSelection={timeSelection}
+ onTimeSelectionChange={onTimeSelectionChange}
/>