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

Implementing playhead scrubbing over timeline

Browse Source
This commit is contained in:
SamSyntax
2025-06-23 21:13:18 +02:00
parent a6a520db70
commit 59ca411c53
4 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -557,8 +557,26 @@ export function Timeline() {
{/* Playhead in ruler */}
<div
className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-10"
className="absolute top-0 bottom-0 w-0.5 bg-red-500 cursor-ew-resize z-1000"
style={{ left: `${currentTime * 50 * zoomLevel}px` }}
onMouseDown={(e) => {
e.preventDefault();
e.stopPropagation();
const handleMouseMove = (e: MouseEvent) => {
const timeline = timelineRef.current;
if (!timeline) return;
const rect = timeline.getBoundingClientRect();
const mouseX = Math.max(0, e.clientX - rect.left);
const newTime = mouseX / (50 * zoomLevel);
seek(newTime);
};
const handleMouseUp = () => {
window.removeEventListener("mousemove", handleMouseMove);
window.removeEventListener("mouseup", handleMouseUp);
};
window.addEventListener("mousemove", handleMouseMove);
window.addEventListener("mouseup", handleMouseUp);
}}
>
<div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />
</div>
@ -670,7 +688,7 @@ export function Timeline() {
{/* Playhead for tracks area */}
<div
className="absolute top-0 w-0.5 bg-red-500 pointer-events-none z-20"
className="absolute top-0 w-0.5 bg-red-500 cursor-ew-resize z-20"
style={{
left: `${currentTime * 50 * zoomLevel}px`,
height: `${tracks.length * 60}px`,
@ -1510,4 +1528,4 @@ function TimelineTrackContent({
</div>
</div>
);
}
}