Merge pull request #26 from SamSyntax/main
Playhead timeline dragging/scrubbing
This commit is contained in:
BIN
apps/web/bun.lockb
Executable file
BIN
apps/web/bun.lockb
Executable file
Binary file not shown.
@ -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" // Remove pointer-events-none to allow dragging
|
||||
style={{ left: `${currentTime * 50 * zoomLevel}px` }}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
const timeline = timelineRef.current; // Get timeline element ref to track the position
|
||||
if (!timeline) return; // If no timeline element, exit
|
||||
const rect = timeline.getBoundingClientRect(); // Get the bounding rect of the timeline element
|
||||
const mouseX = Math.max(0, e.clientX - rect.left); // Calculate the mouse position relative to the timeline element
|
||||
const newTime = mouseX / (50 * zoomLevel); // Calculate the time based on the mouse position
|
||||
seek(newTime); // Set the current time
|
||||
};
|
||||
const handleMouseUp = () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove); // Remove the mousemove event listener
|
||||
window.removeEventListener("mouseup", handleMouseUp); // Remove the mouseup event listener
|
||||
};
|
||||
window.addEventListener("mousemove", handleMouseMove); // Add the mousemove event listener
|
||||
window.addEventListener("mouseup", handleMouseUp); // Add the mouseup event listener
|
||||
}}
|
||||
>
|
||||
<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`,
|
||||
|
@ -23,7 +23,7 @@ export function Header() {
|
||||
GitHub
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={session ? "/editor" : "/auth/login"}>
|
||||
<Link href={session ? "/editor" : "/auth/login"}>
|
||||
<Button size="sm" className="text-sm ml-4">
|
||||
Start editing
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
|
Reference in New Issue
Block a user