style: set min/max height for timeline
This commit is contained in:
@ -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,
|
||||
|
Reference in New Issue
Block a user