style: set min/max height for timeline

This commit is contained in:
Maze Winther
2025-06-24 14:19:47 +02:00
parent 9e761a9c0b
commit 4b2afb7271

View File

@ -40,10 +40,32 @@ export function Timeline() {
// Timeline shows all tracks (video, audio, effects) and their clips.
// You can drag media here to add it to your project.
// Clips can be trimmed, deleted, and moved.
const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration, selectedClips, selectClip, deselectClip, clearSelectedClips, setSelectedClips, updateClipTrim, undo, redo } =
useTimelineStore();
const {
tracks,
addTrack,
addClipToTrack,
removeTrack,
toggleTrackMute,
removeClipFromTrack,
getTotalDuration,
selectedClips,
clearSelectedClips,
setSelectedClips,
updateClipTrim,
undo,
redo,
} = useTimelineStore();
const { mediaItems, addMediaItem } = useMediaStore();
const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore();
const {
currentTime,
duration,
seek,
setDuration,
isPlaying,
toggle,
setSpeed,
speed,
} = usePlaybackStore();
const [isDragOver, setIsDragOver] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
const [zoomLevel, setZoomLevel] = useState(1);
@ -53,7 +75,7 @@ export function Timeline() {
// Unified context menu state
const [contextMenu, setContextMenu] = useState<{
type: 'track' | 'clip';
type: "track" | "clip";
trackId: string;
clipId?: string;
x: number;
@ -92,7 +114,10 @@ export function Timeline() {
// Keyboard event for deleting selected clips
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if ((e.key === "Delete" || e.key === "Backspace") && selectedClips.length > 0) {
if (
(e.key === "Delete" || e.key === "Backspace") &&
selectedClips.length > 0
) {
selectedClips.forEach(({ trackId, clipId }) => {
removeClipFromTrack(trackId, clipId);
});
@ -148,10 +173,15 @@ export function Timeline() {
useEffect(() => {
if (!marquee || !marquee.active) return;
const handleMouseMove = (e: MouseEvent) => {
setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY });
setMarquee(
(prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY }
);
};
const handleMouseUp = (e: MouseEvent) => {
setMarquee((prev) => prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false });
setMarquee(
(prev) =>
prev && { ...prev, endX: e.clientX, endY: e.clientY, active: false }
);
};
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
@ -177,7 +207,8 @@ export function Timeline() {
return;
}
// Clamp to timeline bounds
const clamp = (val: number, min: number, max: number) => Math.max(min, Math.min(max, val));
const clamp = (val: number, min: number, max: number) =>
Math.max(min, Math.min(max, val));
const bx1 = clamp(x1, 0, rect.width);
const bx2 = clamp(x2, 0, rect.width);
const by1 = clamp(y1, 0, rect.height);
@ -203,10 +234,14 @@ export function Timeline() {
});
if (newSelection.length > 0) {
if (marquee.additive) {
const selectedSet = new Set(selectedClips.map((c) => c.trackId + ':' + c.clipId));
const selectedSet = new Set(
selectedClips.map((c) => c.trackId + ":" + c.clipId)
);
newSelection = [
...selectedClips,
...newSelection.filter((c) => !selectedSet.has(c.trackId + ':' + c.clipId)),
...newSelection.filter(
(c) => !selectedSet.has(c.trackId + ":" + c.clipId)
),
];
}
setSelectedClips(newSelection);
@ -214,7 +249,14 @@ export function Timeline() {
clearSelectedClips();
}
setMarquee(null);
}, [marquee, tracks, zoomLevel, selectedClips, setSelectedClips, clearSelectedClips]);
}, [
marquee,
tracks,
zoomLevel,
selectedClips,
setSelectedClips,
clearSelectedClips,
]);
const handleDragEnter = (e: React.DragEvent) => {
// When something is dragged over the timeline, show overlay
@ -254,7 +296,9 @@ export function Timeline() {
dragCounterRef.current = 0;
// Ignore timeline clip drags - they're handled by track-specific handlers
const hasTimelineClip = e.dataTransfer.types.includes("application/x-timeline-clip");
const hasTimelineClip = e.dataTransfer.types.includes(
"application/x-timeline-clip"
);
if (hasTimelineClip) {
return;
}
@ -327,14 +371,14 @@ export function Timeline() {
const clickX = e.clientX - rect.left;
const clickedTime = clickX / (50 * zoomLevel);
const clampedTime = Math.max(0, Math.min(duration, clickedTime));
seek(clampedTime);
};
const handleTimelineAreaClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
clearSelectedClips();
// Calculate the clicked time position and seek to it
handleSeekToPosition(e);
}
@ -351,21 +395,27 @@ export function Timeline() {
};
// --- Playhead Scrubbing Handlers ---
const handlePlayheadMouseDown = useCallback((e: React.MouseEvent) => {
e.preventDefault();
setIsScrubbing(true);
handleScrub(e);
}, [duration, zoomLevel]);
const handlePlayheadMouseDown = useCallback(
(e: React.MouseEvent) => {
e.preventDefault();
setIsScrubbing(true);
handleScrub(e);
},
[duration, zoomLevel]
);
const handleScrub = useCallback((e: MouseEvent | React.MouseEvent) => {
const timeline = timelineRef.current;
if (!timeline) return;
const rect = timeline.getBoundingClientRect();
const x = e.clientX - rect.left;
const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
setScrubTime(time);
seek(time); // update video preview in real time
}, [duration, zoomLevel, seek]);
const handleScrub = useCallback(
(e: MouseEvent | React.MouseEvent) => {
const timeline = timelineRef.current;
if (!timeline) return;
const rect = timeline.getBoundingClientRect();
const x = e.clientX - rect.left;
const time = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
setScrubTime(time);
seek(time); // update video preview in real time
},
[duration, zoomLevel, seek]
);
useEffect(() => {
if (!isScrubbing) return;
@ -383,7 +433,8 @@ export function Timeline() {
};
}, [isScrubbing, scrubTime, seek, handleScrub]);
const playheadPosition = isScrubbing && scrubTime !== null ? scrubTime : currentTime;
const playheadPosition =
isScrubbing && scrubTime !== null ? scrubTime : currentTime;
const dragProps = {
onDragEnter: handleDragEnter,
@ -399,14 +450,20 @@ export function Timeline() {
return;
}
selectedClips.forEach(({ trackId, clipId }) => {
const track = tracks.find(t => t.id === trackId);
const clip = track?.clips.find(c => c.id === clipId);
const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId);
if (clip && track) {
const splitTime = currentTime;
const effectiveStart = clip.startTime;
const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
const effectiveEnd =
clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
if (splitTime > effectiveStart && splitTime < effectiveEnd) {
updateClipTrim(track.id, clip.id, clip.trimStart, clip.trimEnd + (effectiveEnd - splitTime));
updateClipTrim(
track.id,
clip.id,
clip.trimStart,
clip.trimEnd + (effectiveEnd - splitTime)
);
addClipToTrack(track.id, {
mediaId: clip.mediaId,
name: clip.name + " (split)",
@ -427,14 +484,17 @@ export function Timeline() {
return;
}
selectedClips.forEach(({ trackId, clipId }) => {
const track = tracks.find(t => t.id === trackId);
const clip = track?.clips.find(c => c.id === clipId);
const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId);
if (clip && track) {
addClipToTrack(track.id, {
mediaId: clip.mediaId,
name: clip.name + " (copy)",
duration: clip.duration,
startTime: clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd) + 0.1,
startTime:
clip.startTime +
(clip.duration - clip.trimStart - clip.trimEnd) +
0.1,
trimStart: clip.trimStart,
trimEnd: clip.trimEnd,
});
@ -449,8 +509,8 @@ export function Timeline() {
return;
}
selectedClips.forEach(({ trackId, clipId }) => {
const track = tracks.find(t => t.id === trackId);
const clip = track?.clips.find(c => c.id === clipId);
const track = tracks.find((t) => t.id === trackId);
const clip = track?.clips.find((c) => c.id === clipId);
if (clip && track) {
// Add a new freeze frame clip at the playhead
addClipToTrack(track.id, {
@ -478,20 +538,23 @@ export function Timeline() {
toast.success("Deleted selected clip(s)");
};
// Prevent explorer zooming in/out when in timeline
useEffect(() => {
const preventZoom = (e: WheelEvent) => {
// if (isInTimeline && (e.ctrlKey || e.metaKey)) {
if (isInTimeline && (e.ctrlKey || e.metaKey) && timelineRef.current?.contains(e.target as Node)) {
if (
isInTimeline &&
(e.ctrlKey || e.metaKey) &&
timelineRef.current?.contains(e.target as Node)
) {
e.preventDefault();
}
};
document.addEventListener('wheel', preventZoom, { passive: false });
document.addEventListener("wheel", preventZoom, { passive: false });
return () => {
document.removeEventListener('wheel', preventZoom);
document.removeEventListener("wheel", preventZoom);
};
}, [isInTimeline]);
@ -820,15 +883,15 @@ export function Timeline() {
{/* Timeline Tracks Content */}
<div className="flex-1 relative overflow-hidden">
<div
className="w-full h-[600px] overflow-hidden flex"
className="w-full h-full overflow-hidden flex"
ref={timelineRef}
style={{ position: "relative" }}
>
{/* Timeline grid and clips area (with left margin for sidebar) */}
{/* Timeline grid and clips area (with left margin for sifdebar) */}
<div
className="relative flex-1"
style={{
height: `${tracks.length * 60}px`,
height: `${Math.max(200, Math.min(800, tracks.length * 60))}px`,
width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,
}}
onClick={handleTimelineAreaClick}
@ -1057,7 +1120,15 @@ function TimelineTrackContent({
}: {
track: TimelineTrack;
zoomLevel: number;
setContextMenu: (menu: { type: 'track' | 'clip'; trackId: string; clipId?: string; x: number; y: number; } | null) => void;
setContextMenu: (
menu: {
type: "track" | "clip";
trackId: string;
clipId?: string;
x: number;
y: number;
} | null
) => void;
}) {
const { mediaItems } = useMediaStore();
const {
@ -1202,7 +1273,7 @@ function TimelineTrackContent({
return;
}
}
} catch (error) { }
} catch (error) {}
}
// Calculate drop position for overlap checking
@ -1580,18 +1651,19 @@ function TimelineTrackContent({
return (
<div
className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver
? wouldOverlap
? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
: "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
: "hover:bg-muted/20"
}`}
className={`w-full h-full transition-all duration-150 ease-out ${
isDraggedOver
? wouldOverlap
? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
: "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
: "hover:bg-muted/20"
}`}
onContextMenu={(e) => {
e.preventDefault();
// Only show track menu if we didn't click on a clip
if (!(e.target as HTMLElement).closest(".timeline-clip")) {
setContextMenu({
type: 'track',
type: "track",
trackId: track.id,
x: e.clientX,
y: e.clientY,
@ -1609,12 +1681,13 @@ function TimelineTrackContent({
<div className="h-full relative track-clips-container min-w-full">
{track.clips.length === 0 ? (
<div
className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${isDropping
? wouldOverlap
? "border-red-500 bg-red-500/10 text-red-600"
: "border-blue-500 bg-blue-500/10 text-blue-600"
: "border-muted/30"
}`}
className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
isDropping
? wouldOverlap
? "border-red-500 bg-red-500/10 text-red-600"
: "border-blue-500 bg-blue-500/10 text-blue-600"
: "border-muted/30"
}`}
>
{isDropping
? wouldOverlap
@ -1645,7 +1718,7 @@ function TimelineTrackContent({
const isSelected = selectedClips.some(
(c) => c.trackId === track.id && c.clipId === clip.id
);
if (e.metaKey || e.ctrlKey || e.shiftKey) {
// Multi-selection mode: toggle the clip
selectClip(track.id, clip.id, true);
@ -1662,7 +1735,7 @@ function TimelineTrackContent({
e.preventDefault();
e.stopPropagation();
setContextMenu({
type: 'clip',
type: "clip",
trackId: track.id,
clipId: clip.id,
x: e.clientX,