External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'staging' into feat/timeline-return-to-start

Browse Source
This commit is contained in:
ryu
2025-08-13 14:01:07 +05:00
committed by GitHub
parent e71788014d f7fddff1fc
commit 0ae09c9df5
64 changed files with 2860 additions and 792 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/timeline/index.tsx
+121 -26
View File
@@ -55,7 +55,7 @@ import { SelectionBox } from "../selection-box";
import { useSelectionBox } from "@/hooks/use-selection-box";
import { SnapIndicator } from "../snap-indicator";
import { SnapPoint } from "@/hooks/use-timeline-snapping";
import type { DragData, TimelineTrack } from "@/types/timeline";
import type { DragData, TimelineTrack, TrackType } from "@/types/timeline";
import {
getTrackHeight,
getCumulativeHeightBefore,
@@ -169,11 +169,32 @@ export function Timeline() {
const handleTimelineMouseDown = useCallback((e: React.MouseEvent) => {
// Only track mouse down on timeline background areas (not elements)
const target = e.target as HTMLElement;
console.log(
JSON.stringify({
debug_mousedown: "START",
target_class: target.className,
target_parent_class: target.parentElement?.className,
clientX: e.clientX,
clientY: e.clientY,
timeStamp: e.timeStamp,
})
);
const isTimelineBackground =
!target.closest(".timeline-element") &&
!playheadRef.current?.contains(target) &&
!target.closest("[data-track-labels]");
console.log(
JSON.stringify({
debug_mousedown: "CHECK",
isTimelineBackground,
hasTimelineElement: !!target.closest(".timeline-element"),
hasPlayhead: !!playheadRef.current?.contains(target),
hasTrackLabels: !!target.closest("[data-track-labels]"),
})
);
if (isTimelineBackground) {
mouseTrackingRef.current = {
isMouseDown: true,
@@ -181,12 +202,38 @@ export function Timeline() {
downY: e.clientY,
downTime: e.timeStamp,
};
console.log(
JSON.stringify({
debug_mousedown: "TRACKED",
mouseTracking: mouseTrackingRef.current,
})
);
} else {
console.log(
JSON.stringify({
debug_mousedown: "IGNORED - not timeline background",
})
);
}
}, []);
// Timeline content click to seek handler
const handleTimelineContentClick = useCallback(
(e: React.MouseEvent) => {
console.log(
JSON.stringify({
debug_click: "START",
target: (e.target as HTMLElement).className,
target_parent: (e.target as HTMLElement).parentElement?.className,
mouseTracking: mouseTrackingRef.current,
isSelecting,
justFinishedSelecting,
clickX: e.clientX,
clickY: e.clientY,
timeStamp: e.timeStamp,
})
);
const { isMouseDown, downX, downY, downTime } = mouseTrackingRef.current;
// Reset mouse tracking
@@ -201,8 +248,8 @@ export function Timeline() {
if (!isMouseDown) {
console.log(
JSON.stringify({
ignoredClickWithoutMouseDown: true,
timeStamp: e.timeStamp,
debug_click: "REJECTED - no mousedown",
mouseTracking: mouseTrackingRef.current,
})
);
return;
@@ -216,11 +263,10 @@ export function Timeline() {
if (deltaX > 5 || deltaY > 5 || deltaTime > 500) {
console.log(
JSON.stringify({
ignoredDragNotClick: true,
debug_click: "REJECTED - movement too large",
deltaX,
deltaY,
deltaTime,
timeStamp: e.timeStamp,
})
);
return;
@@ -228,27 +274,54 @@ export function Timeline() {
// Don't seek if this was a selection box operation
if (isSelecting || justFinishedSelecting) {
console.log(
JSON.stringify({
debug_click: "REJECTED - selection operation",
isSelecting,
justFinishedSelecting,
})
);
return;
}
// Don't seek if clicking on timeline elements, but still deselect
if ((e.target as HTMLElement).closest(".timeline-element")) {
console.log(
JSON.stringify({
debug_click: "REJECTED - clicked timeline element",
})
);
return;
}
// Don't seek if clicking on playhead
if (playheadRef.current?.contains(e.target as Node)) {
console.log(
JSON.stringify({
debug_click: "REJECTED - clicked playhead",
})
);
return;
}
// Don't seek if clicking on track labels
if ((e.target as HTMLElement).closest("[data-track-labels]")) {
console.log(
JSON.stringify({
debug_click: "REJECTED - clicked track labels",
})
);
clearSelectedElements();
return;
}
// Clear selected elements when clicking empty timeline area
console.log(JSON.stringify({ clearingSelectedElements: true }));
console.log(
JSON.stringify({
debug_click: "PROCEEDING - clearing elements",
clearingSelectedElements: true,
})
);
clearSelectedElements();
// Determine if we're clicking in ruler or tracks area
@@ -256,24 +329,39 @@ export function Timeline() {
"[data-ruler-area]"
);
console.log(
JSON.stringify({
debug_click: "CALCULATING POSITION",
isRulerClick,
clientX: e.clientX,
clientY: e.clientY,
target_element: (e.target as HTMLElement).tagName,
target_class: (e.target as HTMLElement).className,
})
);
let mouseX: number;
let scrollLeft = 0;
if (isRulerClick) {
// Calculate based on ruler position
const rulerContent = rulerScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
if (!rulerContent) return;
const rulerContent = rulerScrollRef.current;
if (!rulerContent) {
console.log(
JSON.stringify({
debug_click: "ERROR - no ruler container found",
})
);
return;
}
const rect = rulerContent.getBoundingClientRect();
mouseX = e.clientX - rect.left;
scrollLeft = rulerContent.scrollLeft;
} else {
// Calculate based on tracks content position
const tracksContent = tracksScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
if (!tracksContent) return;
const tracksContent = tracksScrollRef.current;
if (!tracksContent) {
return;
}
const rect = tracksContent.getBoundingClientRect();
mouseX = e.clientX - rect.left;
scrollLeft = tracksContent.scrollLeft;
@@ -291,7 +379,6 @@ export function Timeline() {
// Use frame snapping for timeline clicking
const projectFps = activeProject?.fps || 30;
const time = snapTimeToFrame(rawTime, projectFps);
seek(time);
},
[
@@ -405,7 +492,21 @@ export function Timeline() {
item.name === processedItem.name && item.url === processedItem.url
);
if (addedItem) {
useTimelineStore.getState().addMediaToNewTrack(addedItem);
const trackType: TrackType =
addedItem.type === "audio" ? "audio" : "media";
const targetTrackId = useTimelineStore
.getState()
.insertTrackAt(trackType, 0);
useTimelineStore.getState().addElementToTrack(targetTrackId, {
type: "media",
mediaId: addedItem.id,
name: addedItem.name,
duration: addedItem.duration || 5,
startTime: currentTime,
trimStart: 0,
trimEnd: 0,
});
}
}
} catch (error) {
@@ -428,15 +529,9 @@ export function Timeline() {
// --- Scroll synchronization effect ---
useEffect(() => {
const rulerViewport = rulerScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
const tracksViewport = tracksScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
const trackLabelsViewport = trackLabelsScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
) as HTMLElement;
const rulerViewport = rulerScrollRef.current;
const tracksViewport = tracksScrollRef.current;
const trackLabelsViewport = trackLabelsScrollRef.current;
if (!rulerViewport || !tracksViewport) return;