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

Implement click-to-seek functionality in timeline

Browse Source
This commit is contained in:
Andrew Kordampalos
2025-06-23 22:17:36 +03:00
parent fddbecc736
commit 2a1ac8fcf7
4 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -290,11 +290,18 @@ export function Timeline() {
}
};
// Deselect all clips when clicking empty timeline area
// Deselect all clips when clicking empty timeline area and seek to clicked position
const handleTimelineAreaClick = (e: React.MouseEvent) => {
// Only clear selection if the click target is the timeline background (not a child/clip)
if (e.target === e.currentTarget) {
clearSelectedClips();
// Calculate the clicked time position and seek to it
const rect = e.currentTarget.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const clickedTime = clickX / (50 * zoomLevel);
const clampedTime = Math.max(0, Math.min(duration, clickedTime));
seek(clampedTime);
}
};
@ -487,10 +494,18 @@ export function Timeline() {
<div className="flex-1 relative overflow-hidden">
<ScrollArea className="w-full">
<div
className="relative h-12 bg-muted/30"
className="relative h-12 bg-muted/30 cursor-pointer"
style={{
width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,
}}
onClick={(e) => {
// Calculate the clicked time position and seek to it
const rect = e.currentTarget.getBoundingClientRect();
const clickX = e.clientX - rect.left;
const clickedTime = clickX / (50 * zoomLevel);
const clampedTime = Math.max(0, Math.min(duration, clickedTime));
seek(clampedTime);
}}
>
{/* Time markers */}
{(() => {