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

fix: drag media to timeline

Browse Source
This commit is contained in:
Maze Winther
2025-07-14 18:06:11 +02:00
parent 64b84ca041
commit 416511084a
1 changed files with 66 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/timeline-track.tsx
+18 -23
View File
@@ -33,6 +33,7 @@ export function TimelineTrackContent({
const { mediaItems } = useMediaStore(); const { mediaItems } = useMediaStore();
const { const {
tracks, tracks,
addTrack,
moveElementToTrack, moveElementToTrack,
updateElementStartTime, updateElementStartTime,
addElementToTrack, addElementToTrack,
@@ -495,6 +496,16 @@ export function TimelineTrackContent({
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// Debug logging
console.log(
JSON.stringify({
message: "Drop event started in timeline track",
dataTransferTypes: Array.from(e.dataTransfer.types),
trackId: track.id,
trackType: track.type,
})
);
// Reset all drag states // Reset all drag states
dragCounterRef.current = 0; dragCounterRef.current = 0;
setIsDropping(false); setIsDropping(false);
@@ -727,34 +738,19 @@ export function TimelineTrackContent({
// Handle position-aware track creation for media elements // Handle position-aware track creation for media elements
if (!isCompatible || dropPosition !== "on") { if (!isCompatible || dropPosition !== "on") {
const needsNewTrack = !isCompatible || dropPosition !== "on";
if (needsNewTrack) {
if (isVideoOrImage) { if (isVideoOrImage) {
// For video/image, check if we need a main track or additional media track // For video/image, check if we need a main track or additional media track
const mainTrack = getMainTrack(tracks); const mainTrack = getMainTrack(tracks);
if (!mainTrack) { if (!mainTrack) {
// No main track exists, create it // No main track exists, create it
const updatedTracks = ensureMainTrack(tracks); targetTrackId = addTrack("media");
const newMainTrack = getMainTrack(updatedTracks); const updatedTracks = useTimelineStore.getState().tracks;
if (newMainTrack && newMainTrack.elements.length === 0) { const newTargetTrack = updatedTracks.find(
targetTrackId = newMainTrack.id;
targetTrack = newMainTrack;
} else {
// Main track was created but somehow has elements, create new media track
const mainTrackIndex = updatedTracks.findIndex(
(t) => t.id === newMainTrack?.id
);
targetTrackId = insertTrackAt("media", mainTrackIndex);
const updatedTracksAfterInsert =
useTimelineStore.getState().tracks;
const newTargetTrack = updatedTracksAfterInsert.find(
(t) => t.id === targetTrackId (t) => t.id === targetTrackId
); );
if (!newTargetTrack) return; if (!newTargetTrack) return;
targetTrack = newTargetTrack; targetTrack = newTargetTrack;
}
} else if ( } else if (
mainTrack.elements.length === 0 && mainTrack.elements.length === 0 &&
dropPosition === "on" dropPosition === "on"
@@ -763,10 +759,7 @@ export function TimelineTrackContent({
targetTrackId = mainTrack.id; targetTrackId = mainTrack.id;
targetTrack = mainTrack; targetTrack = mainTrack;
} else { } else {
// Create new media track above main track // Create new media track
const mainTrackIndex = tracks.findIndex(
(t) => t.id === mainTrack.id
);
let insertIndex: number; let insertIndex: number;
if (dropPosition === "above") { if (dropPosition === "above") {
@@ -775,6 +768,9 @@ export function TimelineTrackContent({
insertIndex = currentTrackIndex + 1; insertIndex = currentTrackIndex + 1;
} else { } else {
// Insert above main track // Insert above main track
const mainTrackIndex = tracks.findIndex(
(t) => t.id === mainTrack.id
);
insertIndex = mainTrackIndex; insertIndex = mainTrackIndex;
} }
@@ -816,7 +812,6 @@ export function TimelineTrackContent({
targetTrack = newTargetTrack; targetTrack = newTargetTrack;
} }
} }
}
if (!targetTrack) return; if (!targetTrack) return;