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

feat: main track and ordering tracks

Browse Source
This commit is contained in:
Maze Winther
2025-07-06 22:51:11 +02:00
parent 40c7fbb4f8
commit 6edd5b36cf
5 changed files with 709 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/src/components/development-debug.tsx
View File

@ -1,7 +1,8 @@
"use client";
import { useTimelineStore, type TimelineTrack } from "@/stores/timeline-store";
import { useTimelineStore } from "@/stores/timeline-store";
import { useMediaStore, type MediaItem } from "@/stores/media-store";
import { TimelineTrack } from "@/types/timeline";
import { usePlaybackStore } from "@/stores/playback-store";
import { Button } from "@/components/ui/button";
import { useState } from "react";

30
apps/web/src/components/editor/preview-panel.tsx
View File

@ -1,10 +1,7 @@
"use client";
import {
useTimelineStore,
type TimelineTrack,
} from "@/stores/timeline-store";
import { TimelineElement } from "@/types/timeline";
import { useTimelineStore } from "@/stores/timeline-store";
import { TimelineElement, TimelineTrack } from "@/types/timeline";
import {
useMediaStore,
type MediaItem,
@ -112,16 +109,19 @@ export function PreviewPanel() {
track.elements.forEach((element) => {
const elementStart = element.startTime;
const elementEnd =
element.startTime + (element.duration - element.trimStart - element.trimEnd);
element.startTime +
(element.duration - element.trimStart - element.trimEnd);
if (currentTime >= elementStart && currentTime < elementEnd) {
let mediaItem = null;
// Only get media item for media elements
if (element.type === "media") {
mediaItem = element.mediaId === "test"
mediaItem =
element.mediaId === "test"
? null // Test elements don't have a real media item
: mediaItems.find((item) => item.id === element.mediaId) || null;
: mediaItems.find((item) => item.id === element.mediaId) ||
null;
}
activeElements.push({ element, track, mediaItem });
@ -165,9 +165,9 @@ export function PreviewPanel() {
fontWeight: element.fontWeight,
fontStyle: element.fontStyle,
textDecoration: element.textDecoration,
padding: '4px 8px',
borderRadius: '2px',
whiteSpace: 'pre-wrap',
padding: "4px 8px",
borderRadius: "2px",
whiteSpace: "pre-wrap",
}}
>
{element.content}
@ -262,7 +262,9 @@ export function PreviewPanel() {
No elements at current time
</div>
) : (
activeElements.map((elementData, index) => renderElement(elementData, index))
activeElements.map((elementData, index) =>
renderElement(elementData, index)
)
)}
</div>
) : (
@ -305,7 +307,9 @@ function PreviewToolbar({ hasAnyElements }: { hasAnyElements: boolean }) {
for (const track of tracks) {
for (const element of track.elements) {
if (element.type === "media") {
const mediaItem = mediaItems.find((item) => item.id === element.mediaId);
const mediaItem = mediaItems.find(
(item) => item.id === element.mediaId
);
if (
mediaItem &&
(mediaItem.type === "video" || mediaItem.type === "image")

89
apps/web/src/components/editor/timeline-track.tsx
View File

@ -13,7 +13,12 @@ import {
ContextMenuSeparator,
ContextMenuTrigger,
} from "../ui/context-menu";
import { TimelineTrack } from "@/stores/timeline-store";
import {
TimelineTrack,
sortTracksByOrder,
ensureMainTrack,
getMainTrack
} from "@/types/timeline";
import { usePlaybackStore } from "@/stores/playback-store";
import type {
TimelineElement as TimelineElementType,
@ -555,15 +560,23 @@ export function TimelineTrackContent({
// Handle position-aware track creation for text
if (track.type !== "text" || dropPosition !== "on") {
// Determine where to insert the new text track
// Text tracks should go above the main track
const mainTrack = getMainTrack(tracks);
let insertIndex: number;
if (dropPosition === "above") {
insertIndex = currentTrackIndex;
} else if (dropPosition === "below") {
insertIndex = currentTrackIndex + 1;
} else {
// dropPosition === "on" but track is not text type
insertIndex = currentTrackIndex + 1;
// Insert above main track if main track exists, otherwise at top
if (mainTrack) {
const mainTrackIndex = tracks.findIndex(t => t.id === mainTrack.id);
insertIndex = mainTrackIndex;
} else {
insertIndex = 0; // Top of timeline
}
}
targetTrackId = insertTrackAt("text", insertIndex);
@ -646,42 +659,72 @@ export function TimelineTrackContent({
const needsNewTrack = !isCompatible || dropPosition !== "on";
if (needsNewTrack) {
// Determine where to insert the new track
if (isVideoOrImage) {
// For video/image, check if we need a main track or additional media track
const mainTrack = getMainTrack(tracks);
if (!mainTrack) {
// No main track exists, create it
const updatedTracks = ensureMainTrack(tracks);
const newMainTrack = getMainTrack(updatedTracks);
if (newMainTrack && newMainTrack.elements.length === 0) {
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);
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 {
// dropPosition === "on" but track is incompatible
insertIndex = currentTrackIndex + 1;
// Insert above main track
insertIndex = mainTrackIndex;
}
if (isVideoOrImage) {
// For video/image, check if main media track is empty and at the right position
const mainMediaTrack = tracks.find((t) => t.type === "media");
if (
mainMediaTrack &&
mainMediaTrack.elements.length === 0 &&
dropPosition === "on"
) {
targetTrackId = mainMediaTrack.id;
targetTrack = mainMediaTrack;
} else {
targetTrackId = insertTrackAt("media", insertIndex);
const updatedTracks = useTimelineStore.getState().tracks;
const newTargetTrack = updatedTracks.find(
(t) => t.id === targetTrackId
);
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;
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
);
const newTargetTrack = updatedTracks.find(t => t.id === targetTrackId);
if (!newTargetTrack) return;
targetTrack = newTargetTrack;
}

202
apps/web/src/stores/timeline-store.ts
View File

@ -1,8 +1,11 @@
import { create } from "zustand";
import type {
import {
TrackType,
TimelineElement,
CreateTimelineElement,
TimelineTrack,
sortTracksByOrder,
ensureMainTrack,
} from "@/types/timeline";
import { useEditorStore } from "./editor-store";
import { useMediaStore, getMediaAspectRatio } from "./media-store";
@ -22,19 +25,18 @@ const getElementNameWithSuffix = (
return `${baseName} (${suffix})`;
};
export interface TimelineTrack {
id: string;
name: string;
type: TrackType;
elements: TimelineElement[];
muted?: boolean;
}
interface TimelineStore {
tracks: TimelineTrack[];
// Private track storage
_tracks: TimelineTrack[];
history: TimelineTrack[][];
redoStack: TimelineTrack[][];
// Always returns properly ordered tracks with main track ensured
tracks: TimelineTrack[];
// Manual method if you need to force recomputation
getSortedTracks: () => TimelineTrack[];
// Multi-selection
selectedElements: { trackId: string; elementId: string }[];
selectElement: (trackId: string, elementId: string, multi?: boolean) => void;
@ -116,28 +118,50 @@ interface TimelineStore {
pushHistory: () => void;
}
export const useTimelineStore = create<TimelineStore>((set, get) => ({
tracks: [],
export const useTimelineStore = create<TimelineStore>((set, get) => {
// Helper to update tracks and maintain ordering
const updateTracks = (newTracks: TimelineTrack[]) => {
const tracksWithMain = ensureMainTrack(newTracks);
const sortedTracks = sortTracksByOrder(tracksWithMain);
set({
_tracks: tracksWithMain,
tracks: sortedTracks,
});
};
// Initialize with proper track ordering
const initialTracks = ensureMainTrack([]);
const sortedInitialTracks = sortTracksByOrder(initialTracks);
return {
_tracks: initialTracks,
tracks: sortedInitialTracks,
history: [],
redoStack: [],
selectedElements: [],
getSortedTracks: () => {
const { _tracks } = get();
const tracksWithMain = ensureMainTrack(_tracks);
return sortTracksByOrder(tracksWithMain);
},
pushHistory: () => {
const { tracks, history } = get();
const { _tracks, history } = get();
set({
history: [...history, JSON.parse(JSON.stringify(tracks))],
history: [...history, JSON.parse(JSON.stringify(_tracks))],
redoStack: [],
});
},
undo: () => {
const { history, redoStack, tracks } = get();
const { history, redoStack, _tracks } = get();
if (history.length === 0) return;
const prev = history[history.length - 1];
updateTracks(prev);
set({
tracks: prev,
history: history.slice(0, -1),
redoStack: [...redoStack, JSON.parse(JSON.stringify(tracks))],
redoStack: [...redoStack, JSON.parse(JSON.stringify(_tracks))],
});
},
@ -199,9 +223,8 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
elements: [],
muted: false,
};
set((state) => ({
tracks: [...state.tracks, newTrack],
}));
updateTracks([...get()._tracks, newTrack]);
return newTrack.id;
},
@ -226,26 +249,22 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
muted: false,
};
set((state) => {
const newTracks = [...state.tracks];
const newTracks = [...get()._tracks];
newTracks.splice(index, 0, newTrack);
return { tracks: newTracks };
});
updateTracks(newTracks);
return newTrack.id;
},
removeTrack: (trackId) => {
get().pushHistory();
set((state) => ({
tracks: state.tracks.filter((track) => track.id !== trackId),
}));
updateTracks(get()._tracks.filter((track) => track.id !== trackId));
},
addElementToTrack: (trackId, elementData) => {
get().pushHistory();
// Validate element type matches track type
const track = get().tracks.find((t) => t.id === trackId);
const track = get()._tracks.find((t) => t.id === trackId);
if (!track) {
console.error("Track not found:", trackId);
return;
@ -279,7 +298,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
// Check if this is the first element being added to the timeline
const currentState = get();
const totalElementsInTimeline = currentState.tracks.reduce(
const totalElementsInTimeline = currentState._tracks.reduce(
(total, track) => total + track.elements.length,
0
);
@ -312,20 +331,20 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
}
}
set((state) => ({
tracks: state.tracks.map((track) =>
updateTracks(
get()._tracks.map((track) =>
track.id === trackId
? { ...track, elements: [...track.elements, newElement] }
: track
),
}));
)
);
},
removeElementFromTrack: (trackId, elementId) => {
get().pushHistory();
set((state) => ({
tracks: state.tracks
.map((track) =>
updateTracks(
get()
._tracks.map((track) =>
track.id === trackId
? {
...track,
@ -335,23 +354,22 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
}
: track
)
.filter((track) => track.elements.length > 0),
}));
.filter((track) => track.elements.length > 0)
);
},
moveElementToTrack: (fromTrackId, toTrackId, elementId) => {
get().pushHistory();
set((state) => {
const fromTrack = state.tracks.find((track) => track.id === fromTrackId);
const fromTrack = get()._tracks.find((track) => track.id === fromTrackId);
const elementToMove = fromTrack?.elements.find(
(element) => element.id === elementId
);
if (!elementToMove) return state;
if (!elementToMove) return;
return {
tracks: state.tracks
.map((track) => {
const newTracks = get()
._tracks.map((track) => {
if (track.id === fromTrackId) {
return {
...track,
@ -367,15 +385,15 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
}
return track;
})
.filter((track) => track.elements.length > 0),
};
});
.filter((track) => track.elements.length > 0);
updateTracks(newTracks);
},
updateElementTrim: (trackId, elementId, trimStart, trimEnd) => {
get().pushHistory();
set((state) => ({
tracks: state.tracks.map((track) =>
updateTracks(
get()._tracks.map((track) =>
track.id === trackId
? {
...track,
@ -386,14 +404,14 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
),
}
: track
),
}));
)
);
},
updateElementStartTime: (trackId, elementId, startTime) => {
get().pushHistory();
set((state) => ({
tracks: state.tracks.map((track) =>
updateTracks(
get()._tracks.map((track) =>
track.id === trackId
? {
...track,
@ -402,22 +420,22 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
),
}
: track
),
}));
)
);
},
toggleTrackMute: (trackId) => {
get().pushHistory();
set((state) => ({
tracks: state.tracks.map((track) =>
updateTracks(
get()._tracks.map((track) =>
track.id === trackId ? { ...track, muted: !track.muted } : track
),
}));
)
);
},
splitElement: (trackId, elementId, splitTime) => {
const { tracks } = get();
const track = tracks.find((t) => t.id === trackId);
const { _tracks } = get();
const track = _tracks.find((t) => t.id === trackId);
const element = track?.elements.find((c) => c.id === elementId);
if (!element) return null;
@ -438,8 +456,8 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
const secondElementId = crypto.randomUUID();
set((state) => ({
tracks: state.tracks.map((track) =>
updateTracks(
get()._tracks.map((track) =>
track.id === trackId
? {
...track,
@ -463,16 +481,16 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
),
}
: track
),
}));
)
);
return secondElementId;
},
// Split element and keep only the left portion
splitAndKeepLeft: (trackId, elementId, splitTime) => {
const { tracks } = get();
const track = tracks.find((t) => t.id === trackId);
const { _tracks } = get();
const track = _tracks.find((t) => t.id === trackId);
const element = track?.elements.find((c) => c.id === elementId);
if (!element) return;
@ -490,8 +508,8 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
const durationToRemove =
element.duration - element.trimStart - element.trimEnd - relativeTime;
set((state) => ({
tracks: state.tracks.map((track) =>
updateTracks(
get()._tracks.map((track) =>
track.id === trackId
? {
...track,
@ -506,14 +524,14 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
),
}
: track
),
}));
)
);
},
// Split element and keep only the right portion
splitAndKeepRight: (trackId, elementId, splitTime) => {
const { tracks } = get();
const track = tracks.find((t) => t.id === trackId);
const { _tracks } = get();
const track = _tracks.find((t) => t.id === trackId);
const element = track?.elements.find((c) => c.id === elementId);
if (!element) return;
@ -529,8 +547,8 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
const relativeTime = splitTime - element.startTime;
set((state) => ({
tracks: state.tracks.map((track) =>
updateTracks(
get()._tracks.map((track) =>
track.id === trackId
? {
...track,
@ -546,14 +564,14 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
),
}
: track
),
}));
)
);
},
// Extract audio from video element to an audio track
separateAudio: (trackId, elementId) => {
const { tracks } = get();
const track = tracks.find((t) => t.id === trackId);
const { _tracks } = get();
const track = _tracks.find((t) => t.id === trackId);
const element = track?.elements.find((c) => c.id === elementId);
if (!element || track?.type !== "media") return null;
@ -561,13 +579,13 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
get().pushHistory();
// Find existing audio track or prepare to create one
const existingAudioTrack = tracks.find((t) => t.type === "audio");
const existingAudioTrack = _tracks.find((t) => t.type === "audio");
const audioElementId = crypto.randomUUID();
if (existingAudioTrack) {
// Add audio element to existing audio track
set((state) => ({
tracks: state.tracks.map((track) =>
updateTracks(
get()._tracks.map((track) =>
track.id === existingAudioTrack.id
? {
...track,
@ -581,8 +599,8 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
],
}
: track
),
}));
)
);
} else {
// Create new audio track with the audio element in a single atomic update
const newAudioTrack: TimelineTrack = {
@ -599,19 +617,17 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
muted: false,
};
set((state) => ({
tracks: [...state.tracks, newAudioTrack],
}));
updateTracks([...get()._tracks, newAudioTrack]);
}
return audioElementId;
},
getTotalDuration: () => {
const { tracks } = get();
if (tracks.length === 0) return 0;
const { _tracks } = get();
if (_tracks.length === 0) return 0;
const trackEndTimes = tracks.map((track) =>
const trackEndTimes = _tracks.map((track) =>
track.elements.reduce((maxEnd, element) => {
const elementEnd =
element.startTime +
@ -629,7 +645,8 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
const { redoStack } = get();
if (redoStack.length === 0) return;
const next = redoStack[redoStack.length - 1];
set({ tracks: next, redoStack: redoStack.slice(0, -1) });
updateTracks(next);
set({ redoStack: redoStack.slice(0, -1) });
},
dragState: {
@ -689,4 +706,5 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
},
});
},
}));
};
});

48
apps/web/src/types/timeline.ts
View File

@ -1,5 +1,4 @@
import { MediaType } from "@/stores/media-store";
import { TimelineTrack } from "@/stores/timeline-store";
export type TrackType = "media" | "text" | "audio";
@ -77,3 +76,50 @@ export interface TextItemDragData {
}
export type DragData = MediaItemDragData | TextItemDragData;
export interface TimelineTrack {
id: string;
name: string;
type: TrackType;
elements: TimelineElement[];
muted?: boolean;
isMain?: boolean;
}
export function sortTracksByOrder(tracks: TimelineTrack[]): TimelineTrack[] {
return [...tracks].sort((a, b) => {
// Audio tracks always go to bottom
if (a.type === "audio" && b.type !== "audio") return 1;
if (b.type === "audio" && a.type !== "audio") return -1;
// Main track goes above audio but below other tracks
if (a.isMain && !b.isMain && b.type !== "audio") return 1;
if (b.isMain && !a.isMain && a.type !== "audio") return -1;
// Within same category, maintain creation order
return 0;
});
}
export function getMainTrack(tracks: TimelineTrack[]): TimelineTrack | null {
return tracks.find((track) => track.isMain) || null;
}
export function ensureMainTrack(tracks: TimelineTrack[]): TimelineTrack[] {
const hasMainTrack = tracks.some((track) => track.isMain);
if (!hasMainTrack) {
// Create main track if it doesn't exist
const mainTrack: TimelineTrack = {
id: crypto.randomUUID(),
name: "Main Track",
type: "media",
elements: [],
muted: false,
isMain: true,
};
return [mainTrack, ...tracks];
}
return tracks;
}