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
+66 -71
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,68 +738,28 @@ 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 (isVideoOrImage) {
// For video/image, check if we need a main track or additional media track
const mainTrack = getMainTrack(tracks);
if (needsNewTrack) { if (!mainTrack) {
if (isVideoOrImage) { // No main track exists, create it
// For video/image, check if we need a main track or additional media track targetTrackId = addTrack("media");
const mainTrack = getMainTrack(tracks); const updatedTracks = useTimelineStore.getState().tracks;
const newTargetTrack = updatedTracks.find(
if (!mainTrack) { (t) => t.id === targetTrackId
// No main track exists, create it );
const updatedTracks = ensureMainTrack(tracks); if (!newTargetTrack) return;
const newMainTrack = getMainTrack(updatedTracks); targetTrack = newTargetTrack;
if (newMainTrack && newMainTrack.elements.length === 0) { } else if (
targetTrackId = newMainTrack.id; mainTrack.elements.length === 0 &&
targetTrack = newMainTrack; dropPosition === "on"
} else { ) {
// Main track was created but somehow has elements, create new media track // Main track exists and is empty, use it
const mainTrackIndex = updatedTracks.findIndex( targetTrackId = mainTrack.id;
(t) => t.id === newMainTrack?.id targetTrack = mainTrack;
); } else {
targetTrackId = insertTrackAt("media", mainTrackIndex); // Create new media track
const updatedTracksAfterInsert =
useTimelineStore.getState().tracks;
const newTargetTrack = updatedTracksAfterInsert.find(
(t) => t.id === targetTrackId
);
if (!newTargetTrack) return;
targetTrack = newTargetTrack;
}
} else if (
mainTrack.elements.length === 0 &&
dropPosition === "on"
) {
// Main track exists and is empty, use it
targetTrackId = mainTrack.id;
targetTrack = mainTrack;
} else {
// Create new media track above main track
const mainTrackIndex = tracks.findIndex(
(t) => t.id === mainTrack.id
);
let insertIndex: number;
if (dropPosition === "above") {
insertIndex = currentTrackIndex;
} else if (dropPosition === "below") {
insertIndex = currentTrackIndex + 1;
} else {
// Insert above main track
insertIndex = mainTrackIndex;
}
targetTrackId = insertTrackAt("media", insertIndex);
const updatedTracks = useTimelineStore.getState().tracks;
const newTargetTrack = updatedTracks.find(
(t) => t.id === targetTrackId
);
if (!newTargetTrack) return;
targetTrack = newTargetTrack;
}
} else if (isAudio) {
// Audio tracks go at the bottom
const mainTrack = getMainTrack(tracks);
let insertIndex: number; let insertIndex: number;
if (dropPosition === "above") { if (dropPosition === "above") {
@@ -796,18 +767,14 @@ export function TimelineTrackContent({
} else if (dropPosition === "below") { } else if (dropPosition === "below") {
insertIndex = currentTrackIndex + 1; insertIndex = currentTrackIndex + 1;
} else { } else {
// Insert after main track (bottom area) // Insert above main track
if (mainTrack) { const mainTrackIndex = tracks.findIndex(
const mainTrackIndex = tracks.findIndex( (t) => t.id === mainTrack.id
(t) => t.id === mainTrack.id );
); insertIndex = mainTrackIndex;
insertIndex = mainTrackIndex + 1;
} else {
insertIndex = tracks.length; // Bottom of timeline
}
} }
targetTrackId = insertTrackAt("audio", insertIndex); targetTrackId = insertTrackAt("media", insertIndex);
const updatedTracks = useTimelineStore.getState().tracks; const updatedTracks = useTimelineStore.getState().tracks;
const newTargetTrack = updatedTracks.find( const newTargetTrack = updatedTracks.find(
(t) => t.id === targetTrackId (t) => t.id === targetTrackId
@@ -815,6 +782,34 @@ export function TimelineTrackContent({
if (!newTargetTrack) return; if (!newTargetTrack) return;
targetTrack = newTargetTrack; targetTrack = newTargetTrack;
} }
} else if (isAudio) {
// Audio tracks go at the bottom
const mainTrack = getMainTrack(tracks);
let insertIndex: number;
if (dropPosition === "above") {
insertIndex = currentTrackIndex;
} else if (dropPosition === "below") {
insertIndex = currentTrackIndex + 1;
} else {
// Insert after main track (bottom area)
if (mainTrack) {
const mainTrackIndex = tracks.findIndex(
(t) => t.id === mainTrack.id
);
insertIndex = mainTrackIndex + 1;
} else {
insertIndex = tracks.length; // Bottom of timeline
}
}
targetTrackId = insertTrackAt("audio", insertIndex);
const updatedTracks = useTimelineStore.getState().tracks;
const newTargetTrack = updatedTracks.find(
(t) => t.id === targetTrackId
);
if (!newTargetTrack) return;
targetTrack = newTargetTrack;
} }
} }