xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: set min/max height for timeline

Browse Source
This commit is contained in:
Maze Winther
2025-06-24 14:19:47 +02:00
parent 9e761a9c0b
commit 4b2afb7271
1 changed files with 136 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
apps/web/src/components/editor/timeline.tsx
View File

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