mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
feat: bunx biome format --write .
This commit is contained in:
Simon Orzel
@@ -4,175 +4,175 @@ import { useTimelineStore } from "@/stores/timeline-store";
|
|||||||
import { usePlaybackStore } from "@/stores/playback-store";
|
import { usePlaybackStore } from "@/stores/playback-store";
|
||||||
|
|
||||||
export function useTimelineActionHandlers() {
|
export function useTimelineActionHandlers() {
|
||||||
const {
|
const {
|
||||||
tracks,
|
tracks,
|
||||||
addElementToTrack,
|
addElementToTrack,
|
||||||
removeElementFromTrack,
|
removeElementFromTrack,
|
||||||
selectedElements,
|
selectedElements,
|
||||||
clearSelectedElements,
|
clearSelectedElements,
|
||||||
splitElement,
|
splitElement,
|
||||||
splitAndKeepLeft,
|
splitAndKeepLeft,
|
||||||
splitAndKeepRight,
|
splitAndKeepRight,
|
||||||
separateAudio,
|
separateAudio,
|
||||||
} = useTimelineStore();
|
} = useTimelineStore();
|
||||||
const { currentTime } = usePlaybackStore();
|
const { currentTime } = usePlaybackStore();
|
||||||
|
|
||||||
// Create optimized lookup maps for O(1) access instead of O(n) find operations
|
// Create optimized lookup maps for O(1) access instead of O(n) find operations
|
||||||
const trackMap = useMemo(() => {
|
const trackMap = useMemo(() => {
|
||||||
const map = new Map();
|
const map = new Map();
|
||||||
tracks.forEach(track => {
|
tracks.forEach((track) => {
|
||||||
map.set(track.id, track);
|
map.set(track.id, track);
|
||||||
// Also create element lookup for this track
|
// Also create element lookup for this track
|
||||||
const elementMap = new Map();
|
const elementMap = new Map();
|
||||||
track.elements.forEach(element => {
|
track.elements.forEach((element) => {
|
||||||
elementMap.set(element.id, element);
|
elementMap.set(element.id, element);
|
||||||
});
|
});
|
||||||
map.set(`${track.id}_elements`, elementMap);
|
map.set(`${track.id}_elements`, elementMap);
|
||||||
});
|
});
|
||||||
return map;
|
return map;
|
||||||
}, [tracks]);
|
}, [tracks]);
|
||||||
|
|
||||||
// Helper function for O(1) track/element lookup
|
// Helper function for O(1) track/element lookup
|
||||||
const findTrackAndElement = (trackId: string, elementId: string) => {
|
const findTrackAndElement = (trackId: string, elementId: string) => {
|
||||||
const track = trackMap.get(trackId);
|
const track = trackMap.get(trackId);
|
||||||
const elementMap = trackMap.get(`${trackId}_elements`);
|
const elementMap = trackMap.get(`${trackId}_elements`);
|
||||||
const element = elementMap?.get(elementId);
|
const element = elementMap?.get(elementId);
|
||||||
return { track, element };
|
return { track, element };
|
||||||
};
|
};
|
||||||
|
|
||||||
// Action handlers for toolbar
|
// Action handlers for toolbar
|
||||||
const handleSplitSelected = () => {
|
const handleSplitSelected = () => {
|
||||||
if (selectedElements.length === 0) {
|
if (selectedElements.length === 0) {
|
||||||
toast.error("No elements selected");
|
toast.error("No elements selected");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let splitCount = 0;
|
let splitCount = 0;
|
||||||
selectedElements.forEach(({ trackId, elementId }) => {
|
selectedElements.forEach(({ trackId, elementId }) => {
|
||||||
const { track, element } = findTrackAndElement(trackId, elementId);
|
const { track, element } = findTrackAndElement(trackId, elementId);
|
||||||
if (element && track) {
|
if (element && track) {
|
||||||
const effectiveStart = element.startTime;
|
const effectiveStart = element.startTime;
|
||||||
const effectiveEnd =
|
const effectiveEnd =
|
||||||
element.startTime +
|
element.startTime +
|
||||||
(element.duration - element.trimStart - element.trimEnd);
|
(element.duration - element.trimStart - element.trimEnd);
|
||||||
|
|
||||||
if (currentTime > effectiveStart && currentTime < effectiveEnd) {
|
if (currentTime > effectiveStart && currentTime < effectiveEnd) {
|
||||||
const newElementId = splitElement(trackId, elementId, currentTime);
|
const newElementId = splitElement(trackId, elementId, currentTime);
|
||||||
if (newElementId) splitCount++;
|
if (newElementId) splitCount++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (splitCount === 0) {
|
if (splitCount === 0) {
|
||||||
toast.error("Playhead must be within selected elements to split");
|
toast.error("Playhead must be within selected elements to split");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDuplicateSelected = () => {
|
const handleDuplicateSelected = () => {
|
||||||
if (selectedElements.length === 0) {
|
if (selectedElements.length === 0) {
|
||||||
toast.error("No elements selected");
|
toast.error("No elements selected");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const canDuplicate = selectedElements.length === 1;
|
const canDuplicate = selectedElements.length === 1;
|
||||||
if (!canDuplicate) return;
|
if (!canDuplicate) return;
|
||||||
|
|
||||||
selectedElements.forEach(({ trackId, elementId }) => {
|
selectedElements.forEach(({ trackId, elementId }) => {
|
||||||
const { element } = findTrackAndElement(trackId, elementId);
|
const { element } = findTrackAndElement(trackId, elementId);
|
||||||
|
|
||||||
if (element) {
|
if (element) {
|
||||||
const newStartTime =
|
const newStartTime =
|
||||||
element.startTime +
|
element.startTime +
|
||||||
(element.duration - element.trimStart - element.trimEnd) +
|
(element.duration - element.trimStart - element.trimEnd) +
|
||||||
0.1;
|
0.1;
|
||||||
|
|
||||||
// Create element without id (will be generated by store)
|
// Create element without id (will be generated by store)
|
||||||
const { id, ...elementWithoutId } = element;
|
const { id, ...elementWithoutId } = element;
|
||||||
|
|
||||||
addElementToTrack(trackId, {
|
addElementToTrack(trackId, {
|
||||||
...elementWithoutId,
|
...elementWithoutId,
|
||||||
startTime: newStartTime,
|
startTime: newStartTime,
|
||||||
});
|
});
|
||||||
|
|
||||||
// We can't predict the new id, so just clear selection for now
|
// We can't predict the new id, so just clear selection for now
|
||||||
// TODO: addElementToTrack could return the new element id
|
// TODO: addElementToTrack could return the new element id
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
clearSelectedElements();
|
clearSelectedElements();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleFreezeSelected = () => {
|
const handleFreezeSelected = () => {
|
||||||
toast.info("Freeze frame functionality coming soon!");
|
toast.info("Freeze frame functionality coming soon!");
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSplitAndKeepLeft = () => {
|
const handleSplitAndKeepLeft = () => {
|
||||||
if (selectedElements.length !== 1) {
|
if (selectedElements.length !== 1) {
|
||||||
toast.error("Select exactly one element");
|
toast.error("Select exactly one element");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { trackId, elementId } = selectedElements[0];
|
const { trackId, elementId } = selectedElements[0];
|
||||||
const { element } = findTrackAndElement(trackId, elementId);
|
const { element } = findTrackAndElement(trackId, elementId);
|
||||||
if (!element) return;
|
if (!element) return;
|
||||||
const effectiveStart = element.startTime;
|
const effectiveStart = element.startTime;
|
||||||
const effectiveEnd =
|
const effectiveEnd =
|
||||||
element.startTime +
|
element.startTime +
|
||||||
(element.duration - element.trimStart - element.trimEnd);
|
(element.duration - element.trimStart - element.trimEnd);
|
||||||
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
|
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
|
||||||
toast.error("Playhead must be within selected element");
|
toast.error("Playhead must be within selected element");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
splitAndKeepLeft(trackId, elementId, currentTime);
|
splitAndKeepLeft(trackId, elementId, currentTime);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSplitAndKeepRight = () => {
|
const handleSplitAndKeepRight = () => {
|
||||||
if (selectedElements.length !== 1) {
|
if (selectedElements.length !== 1) {
|
||||||
toast.error("Select exactly one element");
|
toast.error("Select exactly one element");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { trackId, elementId } = selectedElements[0];
|
const { trackId, elementId } = selectedElements[0];
|
||||||
const { element } = findTrackAndElement(trackId, elementId);
|
const { element } = findTrackAndElement(trackId, elementId);
|
||||||
if (!element) return;
|
if (!element) return;
|
||||||
const effectiveStart = element.startTime;
|
const effectiveStart = element.startTime;
|
||||||
const effectiveEnd =
|
const effectiveEnd =
|
||||||
element.startTime +
|
element.startTime +
|
||||||
(element.duration - element.trimStart - element.trimEnd);
|
(element.duration - element.trimStart - element.trimEnd);
|
||||||
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
|
if (currentTime <= effectiveStart || currentTime >= effectiveEnd) {
|
||||||
toast.error("Playhead must be within selected element");
|
toast.error("Playhead must be within selected element");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
splitAndKeepRight(trackId, elementId, currentTime);
|
splitAndKeepRight(trackId, elementId, currentTime);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSeparateAudio = () => {
|
const handleSeparateAudio = () => {
|
||||||
if (selectedElements.length !== 1) {
|
if (selectedElements.length !== 1) {
|
||||||
toast.error("Select exactly one media element to separate audio");
|
toast.error("Select exactly one media element to separate audio");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { trackId, elementId } = selectedElements[0];
|
const { trackId, elementId } = selectedElements[0];
|
||||||
const { track } = findTrackAndElement(trackId, elementId);
|
const { track } = findTrackAndElement(trackId, elementId);
|
||||||
if (!track || track.type !== "media") {
|
if (!track || track.type !== "media") {
|
||||||
toast.error("Select a media element to separate audio");
|
toast.error("Select a media element to separate audio");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
separateAudio(trackId, elementId);
|
separateAudio(trackId, elementId);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDeleteSelected = () => {
|
const handleDeleteSelected = () => {
|
||||||
if (selectedElements.length === 0) {
|
if (selectedElements.length === 0) {
|
||||||
toast.error("No elements selected");
|
toast.error("No elements selected");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
selectedElements.forEach(({ trackId, elementId }) => {
|
selectedElements.forEach(({ trackId, elementId }) => {
|
||||||
removeElementFromTrack(trackId, elementId);
|
removeElementFromTrack(trackId, elementId);
|
||||||
});
|
});
|
||||||
clearSelectedElements();
|
clearSelectedElements();
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
handleSplitSelected,
|
handleSplitSelected,
|
||||||
handleDuplicateSelected,
|
handleDuplicateSelected,
|
||||||
handleFreezeSelected,
|
handleFreezeSelected,
|
||||||
handleSplitAndKeepLeft,
|
handleSplitAndKeepLeft,
|
||||||
handleSplitAndKeepRight,
|
handleSplitAndKeepRight,
|
||||||
handleSeparateAudio,
|
handleSeparateAudio,
|
||||||
handleDeleteSelected,
|
handleDeleteSelected,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,115 +1,118 @@
|
|||||||
import { useCallback } from "react";
|
import { useCallback } from "react";
|
||||||
import { useProjectStore } from "@/stores/project-store";
|
import { useProjectStore } from "@/stores/project-store";
|
||||||
import { TIMELINE_CONSTANTS, snapTimeToFrame } from "@/constants/timeline-constants";
|
import {
|
||||||
|
TIMELINE_CONSTANTS,
|
||||||
|
snapTimeToFrame,
|
||||||
|
} from "@/constants/timeline-constants";
|
||||||
|
|
||||||
export interface TimelineContentClickProps {
|
export interface TimelineContentClickProps {
|
||||||
duration: number;
|
duration: number;
|
||||||
zoomLevel: number;
|
zoomLevel: number;
|
||||||
seek: (time: number) => void;
|
seek: (time: number) => void;
|
||||||
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
clearSelectedElements: () => void;
|
clearSelectedElements: () => void;
|
||||||
isSelecting: boolean;
|
isSelecting: boolean;
|
||||||
justFinishedSelecting: boolean;
|
justFinishedSelecting: boolean;
|
||||||
playheadRef: React.RefObject<HTMLDivElement>;
|
playheadRef: React.RefObject<HTMLDivElement>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useTimelineContentClick({
|
export function useTimelineContentClick({
|
||||||
duration,
|
duration,
|
||||||
zoomLevel,
|
zoomLevel,
|
||||||
seek,
|
seek,
|
||||||
rulerScrollRef,
|
rulerScrollRef,
|
||||||
tracksScrollRef,
|
tracksScrollRef,
|
||||||
clearSelectedElements,
|
clearSelectedElements,
|
||||||
isSelecting,
|
isSelecting,
|
||||||
justFinishedSelecting,
|
justFinishedSelecting,
|
||||||
playheadRef,
|
playheadRef,
|
||||||
}: TimelineContentClickProps) {
|
}: TimelineContentClickProps) {
|
||||||
const { activeProject } = useProjectStore();
|
const { activeProject } = useProjectStore();
|
||||||
|
|
||||||
// Timeline content click to seek handler
|
// Timeline content click to seek handler
|
||||||
const handleTimelineContentClick = useCallback(
|
const handleTimelineContentClick = useCallback(
|
||||||
(e: React.MouseEvent) => {
|
(e: React.MouseEvent) => {
|
||||||
// Don't seek if this was a selection box operation
|
// Don't seek if this was a selection box operation
|
||||||
if (isSelecting || justFinishedSelecting) {
|
if (isSelecting || justFinishedSelecting) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Don't seek if clicking on timeline elements, but still deselect
|
// Don't seek if clicking on timeline elements, but still deselect
|
||||||
if ((e.target as HTMLElement).closest(".timeline-element")) {
|
if ((e.target as HTMLElement).closest(".timeline-element")) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Don't seek if clicking on playhead
|
// Don't seek if clicking on playhead
|
||||||
if (playheadRef.current?.contains(e.target as Node)) {
|
if (playheadRef.current?.contains(e.target as Node)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Don't seek if clicking on track labels
|
// Don't seek if clicking on track labels
|
||||||
if ((e.target as HTMLElement).closest("[data-track-labels]")) {
|
if ((e.target as HTMLElement).closest("[data-track-labels]")) {
|
||||||
clearSelectedElements();
|
clearSelectedElements();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Clear selected elements when clicking empty timeline area
|
// Clear selected elements when clicking empty timeline area
|
||||||
clearSelectedElements();
|
clearSelectedElements();
|
||||||
|
|
||||||
// Determine if we're clicking in ruler or tracks area
|
// Determine if we're clicking in ruler or tracks area
|
||||||
const isRulerClick = (e.target as HTMLElement).closest(
|
const isRulerClick = (e.target as HTMLElement).closest(
|
||||||
"[data-ruler-area]"
|
"[data-ruler-area]",
|
||||||
);
|
);
|
||||||
|
|
||||||
let mouseX: number;
|
let mouseX: number;
|
||||||
let scrollLeft = 0;
|
let scrollLeft = 0;
|
||||||
|
|
||||||
if (isRulerClick) {
|
if (isRulerClick) {
|
||||||
// Calculate based on ruler position
|
// Calculate based on ruler position
|
||||||
const rulerContent = rulerScrollRef.current?.querySelector(
|
const rulerContent = rulerScrollRef.current?.querySelector(
|
||||||
"[data-radix-scroll-area-viewport]"
|
"[data-radix-scroll-area-viewport]",
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
if (!rulerContent) return;
|
if (!rulerContent) return;
|
||||||
const rect = rulerContent.getBoundingClientRect();
|
const rect = rulerContent.getBoundingClientRect();
|
||||||
mouseX = e.clientX - rect.left;
|
mouseX = e.clientX - rect.left;
|
||||||
scrollLeft = rulerContent.scrollLeft;
|
scrollLeft = rulerContent.scrollLeft;
|
||||||
} else {
|
} else {
|
||||||
// Calculate based on tracks content position
|
// Calculate based on tracks content position
|
||||||
const tracksContent = tracksScrollRef.current?.querySelector(
|
const tracksContent = tracksScrollRef.current?.querySelector(
|
||||||
"[data-radix-scroll-area-viewport]"
|
"[data-radix-scroll-area-viewport]",
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
if (!tracksContent) return;
|
if (!tracksContent) return;
|
||||||
const rect = tracksContent.getBoundingClientRect();
|
const rect = tracksContent.getBoundingClientRect();
|
||||||
mouseX = e.clientX - rect.left;
|
mouseX = e.clientX - rect.left;
|
||||||
scrollLeft = tracksContent.scrollLeft;
|
scrollLeft = tracksContent.scrollLeft;
|
||||||
}
|
}
|
||||||
|
|
||||||
const rawTime = Math.max(
|
const rawTime = Math.max(
|
||||||
0,
|
0,
|
||||||
Math.min(
|
Math.min(
|
||||||
duration,
|
duration,
|
||||||
(mouseX + scrollLeft) /
|
(mouseX + scrollLeft) /
|
||||||
(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
|
(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
|
||||||
)
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Use frame snapping for timeline clicking
|
// Use frame snapping for timeline clicking
|
||||||
const projectFps = activeProject?.fps || 30;
|
const projectFps = activeProject?.fps || 30;
|
||||||
const time = snapTimeToFrame(rawTime, projectFps);
|
const time = snapTimeToFrame(rawTime, projectFps);
|
||||||
|
|
||||||
seek(time);
|
seek(time);
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
duration,
|
duration,
|
||||||
zoomLevel,
|
zoomLevel,
|
||||||
seek,
|
seek,
|
||||||
rulerScrollRef,
|
rulerScrollRef,
|
||||||
tracksScrollRef,
|
tracksScrollRef,
|
||||||
clearSelectedElements,
|
clearSelectedElements,
|
||||||
isSelecting,
|
isSelecting,
|
||||||
justFinishedSelecting,
|
justFinishedSelecting,
|
||||||
playheadRef,
|
playheadRef,
|
||||||
activeProject?.fps,
|
activeProject?.fps,
|
||||||
]
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
return { handleTimelineContentClick };
|
return { handleTimelineContentClick };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,117 +7,121 @@ import type { TimelineTrack } from "@/types/timeline";
|
|||||||
import type { SnapPoint } from "@/hooks/use-timeline-snapping";
|
import type { SnapPoint } from "@/hooks/use-timeline-snapping";
|
||||||
|
|
||||||
export interface TimelineContentProps {
|
export interface TimelineContentProps {
|
||||||
dynamicTimelineWidth: number;
|
dynamicTimelineWidth: number;
|
||||||
tracks: TimelineTrack[];
|
tracks: TimelineTrack[];
|
||||||
duration: number;
|
duration: number;
|
||||||
zoomLevel: number;
|
zoomLevel: number;
|
||||||
currentTime: number;
|
currentTime: number;
|
||||||
seek: (time: number) => void;
|
seek: (time: number) => void;
|
||||||
rulerRef: React.RefObject<HTMLDivElement>;
|
rulerRef: React.RefObject<HTMLDivElement>;
|
||||||
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
playheadRef: React.RefObject<HTMLDivElement>;
|
playheadRef: React.RefObject<HTMLDivElement>;
|
||||||
trackLabelsRef: React.RefObject<HTMLDivElement>;
|
trackLabelsRef: React.RefObject<HTMLDivElement>;
|
||||||
timelineRef: React.RefObject<HTMLDivElement>;
|
timelineRef: React.RefObject<HTMLDivElement>;
|
||||||
handleSelectionMouseDown: (e: React.MouseEvent) => void;
|
handleSelectionMouseDown: (e: React.MouseEvent) => void;
|
||||||
handleTimelineContentClick: (e: React.MouseEvent) => void;
|
handleTimelineContentClick: (e: React.MouseEvent) => void;
|
||||||
handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
|
handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
|
||||||
clearSelectedElements: () => void;
|
clearSelectedElements: () => void;
|
||||||
selectionBox: {
|
selectionBox: {
|
||||||
startPos: { x: number; y: number } | null;
|
startPos: { x: number; y: number } | null;
|
||||||
currentPos: { x: number; y: number } | null;
|
currentPos: { x: number; y: number } | null;
|
||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
} | null;
|
} | null;
|
||||||
tracksContainerRef: React.RefObject<HTMLDivElement>;
|
tracksContainerRef: React.RefObject<HTMLDivElement>;
|
||||||
currentSnapPoint: SnapPoint | null;
|
currentSnapPoint: SnapPoint | null;
|
||||||
showSnapIndicator: boolean;
|
showSnapIndicator: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TimelineContent({
|
export function TimelineContent({
|
||||||
dynamicTimelineWidth,
|
dynamicTimelineWidth,
|
||||||
tracks,
|
tracks,
|
||||||
duration,
|
duration,
|
||||||
zoomLevel,
|
zoomLevel,
|
||||||
currentTime,
|
currentTime,
|
||||||
seek,
|
seek,
|
||||||
rulerRef,
|
rulerRef,
|
||||||
rulerScrollRef,
|
rulerScrollRef,
|
||||||
tracksScrollRef,
|
tracksScrollRef,
|
||||||
playheadRef,
|
playheadRef,
|
||||||
trackLabelsRef,
|
trackLabelsRef,
|
||||||
timelineRef,
|
timelineRef,
|
||||||
handleSelectionMouseDown,
|
handleSelectionMouseDown,
|
||||||
handleTimelineContentClick,
|
handleTimelineContentClick,
|
||||||
handleSnapPointChange,
|
handleSnapPointChange,
|
||||||
clearSelectedElements,
|
clearSelectedElements,
|
||||||
selectionBox,
|
selectionBox,
|
||||||
tracksContainerRef,
|
tracksContainerRef,
|
||||||
currentSnapPoint,
|
currentSnapPoint,
|
||||||
showSnapIndicator,
|
showSnapIndicator,
|
||||||
}: TimelineContentProps) {
|
}: TimelineContentProps) {
|
||||||
return (
|
return (
|
||||||
<div className="relative min-w-max min-h-max" style={{ minWidth: `${dynamicTimelineWidth}px` }}>
|
<div
|
||||||
<div className={`h-full grid grid-cols-[192px_1fr] ${tracks.length > 0 ? `grid-rows-[20px_repeat(${tracks.length},minmax(0,max-content))]` : 'grid-rows-[20px_1fr]'}`}>
|
className="relative min-w-max min-h-max"
|
||||||
|
style={{ minWidth: `${dynamicTimelineWidth}px` }}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`h-full grid grid-cols-[192px_1fr] ${tracks.length > 0 ? `grid-rows-[20px_repeat(${tracks.length},minmax(0,max-content))]` : "grid-rows-[20px_1fr]"}`}
|
||||||
|
>
|
||||||
|
{/* Top-Left Corner (Empty space above track labels) */}
|
||||||
|
<div className="sticky top-0 left-0 border-inset bg-card/[0.99]"></div>
|
||||||
|
|
||||||
{/* Top-Left Corner (Empty space above track labels) */}
|
{/* Top Row (Sticky Ruler Header) */}
|
||||||
<div className="sticky top-0 left-0 border-inset bg-card/[0.99]"></div>
|
<TimelineRuler
|
||||||
|
duration={duration}
|
||||||
|
zoomLevel={zoomLevel}
|
||||||
|
currentTime={currentTime}
|
||||||
|
seek={seek}
|
||||||
|
rulerRef={rulerRef}
|
||||||
|
rulerScrollRef={rulerScrollRef}
|
||||||
|
tracksScrollRef={tracksScrollRef}
|
||||||
|
playheadRef={playheadRef}
|
||||||
|
handleSelectionMouseDown={handleSelectionMouseDown}
|
||||||
|
handleTimelineContentClick={handleTimelineContentClick}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Top Row (Sticky Ruler Header) */}
|
{/* Track Rows */}
|
||||||
<TimelineRuler
|
<TimelineTracksArea
|
||||||
duration={duration}
|
tracks={tracks}
|
||||||
zoomLevel={zoomLevel}
|
zoomLevel={zoomLevel}
|
||||||
currentTime={currentTime}
|
handleSnapPointChange={handleSnapPointChange}
|
||||||
seek={seek}
|
clearSelectedElements={clearSelectedElements}
|
||||||
rulerRef={rulerRef}
|
/>
|
||||||
rulerScrollRef={rulerScrollRef}
|
</div>
|
||||||
tracksScrollRef={tracksScrollRef}
|
|
||||||
playheadRef={playheadRef}
|
|
||||||
handleSelectionMouseDown={handleSelectionMouseDown}
|
|
||||||
handleTimelineContentClick={handleTimelineContentClick}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Track Rows */}
|
{/* Overlay Components - positioned absolutely relative to the timeline container */}
|
||||||
<TimelineTracksArea
|
<SelectionBox
|
||||||
tracks={tracks}
|
startPos={selectionBox?.startPos || null}
|
||||||
zoomLevel={zoomLevel}
|
currentPos={selectionBox?.currentPos || null}
|
||||||
handleSnapPointChange={handleSnapPointChange}
|
containerRef={tracksContainerRef}
|
||||||
clearSelectedElements={clearSelectedElements}
|
isActive={selectionBox?.isActive || false}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Overlay Components - positioned absolutely relative to the timeline container */}
|
<TimelinePlayhead
|
||||||
<SelectionBox
|
currentTime={currentTime}
|
||||||
startPos={selectionBox?.startPos || null}
|
duration={duration}
|
||||||
currentPos={selectionBox?.currentPos || null}
|
zoomLevel={zoomLevel}
|
||||||
containerRef={tracksContainerRef}
|
tracks={tracks}
|
||||||
isActive={selectionBox?.isActive || false}
|
seek={seek}
|
||||||
/>
|
rulerRef={rulerRef}
|
||||||
|
rulerScrollRef={rulerScrollRef}
|
||||||
|
tracksScrollRef={tracksScrollRef}
|
||||||
|
trackLabelsRef={trackLabelsRef}
|
||||||
|
timelineRef={timelineRef}
|
||||||
|
playheadRef={playheadRef}
|
||||||
|
isSnappingToPlayhead={
|
||||||
|
showSnapIndicator && currentSnapPoint?.type === "playhead"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
<TimelinePlayhead
|
<SnapIndicator
|
||||||
currentTime={currentTime}
|
snapPoint={currentSnapPoint}
|
||||||
duration={duration}
|
zoomLevel={zoomLevel}
|
||||||
zoomLevel={zoomLevel}
|
tracks={tracks}
|
||||||
tracks={tracks}
|
timelineRef={timelineRef}
|
||||||
seek={seek}
|
trackLabelsRef={trackLabelsRef}
|
||||||
rulerRef={rulerRef}
|
isVisible={showSnapIndicator}
|
||||||
rulerScrollRef={rulerScrollRef}
|
/>
|
||||||
tracksScrollRef={tracksScrollRef}
|
</div>
|
||||||
trackLabelsRef={trackLabelsRef}
|
);
|
||||||
timelineRef={timelineRef}
|
|
||||||
playheadRef={playheadRef}
|
|
||||||
isSnappingToPlayhead={
|
|
||||||
showSnapIndicator && currentSnapPoint?.type === "playhead"
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<SnapIndicator
|
|
||||||
snapPoint={currentSnapPoint}
|
|
||||||
zoomLevel={zoomLevel}
|
|
||||||
tracks={tracks}
|
|
||||||
timelineRef={timelineRef}
|
|
||||||
trackLabelsRef={trackLabelsRef}
|
|
||||||
isVisible={showSnapIndicator}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,137 +7,138 @@ import { processMediaFiles } from "@/lib/media-processing";
|
|||||||
import type { DragData } from "@/types/timeline";
|
import type { DragData } from "@/types/timeline";
|
||||||
|
|
||||||
export interface TimelineDragHandlersProps {
|
export interface TimelineDragHandlersProps {
|
||||||
isDragOver: boolean;
|
isDragOver: boolean;
|
||||||
setIsDragOver: (isDragOver: boolean) => void;
|
setIsDragOver: (isDragOver: boolean) => void;
|
||||||
isProcessing: boolean;
|
isProcessing: boolean;
|
||||||
setIsProcessing: (isProcessing: boolean) => void;
|
setIsProcessing: (isProcessing: boolean) => void;
|
||||||
progress: number;
|
progress: number;
|
||||||
setProgress: (progress: number) => void;
|
setProgress: (progress: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useTimelineDragHandlers({
|
export function useTimelineDragHandlers({
|
||||||
isDragOver,
|
isDragOver,
|
||||||
setIsDragOver,
|
setIsDragOver,
|
||||||
isProcessing,
|
isProcessing,
|
||||||
setIsProcessing,
|
setIsProcessing,
|
||||||
progress,
|
progress,
|
||||||
setProgress,
|
setProgress,
|
||||||
}: TimelineDragHandlersProps) {
|
}: TimelineDragHandlersProps) {
|
||||||
const { mediaItems, addMediaItem } = useMediaStore();
|
const { mediaItems, addMediaItem } = useMediaStore();
|
||||||
const { activeProject } = useProjectStore();
|
const { activeProject } = useProjectStore();
|
||||||
const dragCounterRef = useRef(0);
|
const dragCounterRef = useRef(0);
|
||||||
|
|
||||||
const handleDragEnter = (e: React.DragEvent) => {
|
const handleDragEnter = (e: React.DragEvent) => {
|
||||||
// When something is dragged over the timeline, show overlay
|
// When something is dragged over the timeline, show overlay
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// Don't show overlay for timeline elements - they're handled by tracks
|
// Don't show overlay for timeline elements - they're handled by tracks
|
||||||
if (e.dataTransfer.types.includes("application/x-timeline-element")) {
|
if (e.dataTransfer.types.includes("application/x-timeline-element")) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
dragCounterRef.current += 1;
|
dragCounterRef.current += 1;
|
||||||
if (!isDragOver) {
|
if (!isDragOver) {
|
||||||
setIsDragOver(true);
|
setIsDragOver(true);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDragOver = (e: React.DragEvent) => {
|
const handleDragOver = (e: React.DragEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDragLeave = (e: React.DragEvent) => {
|
const handleDragLeave = (e: React.DragEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// Don't update state for timeline elements - they're handled by tracks
|
// Don't update state for timeline elements - they're handled by tracks
|
||||||
if (e.dataTransfer.types.includes("application/x-timeline-element")) {
|
if (e.dataTransfer.types.includes("application/x-timeline-element")) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
dragCounterRef.current -= 1;
|
dragCounterRef.current -= 1;
|
||||||
if (dragCounterRef.current === 0) {
|
if (dragCounterRef.current === 0) {
|
||||||
setIsDragOver(false);
|
setIsDragOver(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDrop = async (e: React.DragEvent) => {
|
const handleDrop = async (e: React.DragEvent) => {
|
||||||
// When media is dropped, add it as a new track/element
|
// When media is dropped, add it as a new track/element
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setIsDragOver(false);
|
setIsDragOver(false);
|
||||||
dragCounterRef.current = 0;
|
dragCounterRef.current = 0;
|
||||||
|
|
||||||
// Ignore timeline element drags - they're handled by track-specific handlers
|
// Ignore timeline element drags - they're handled by track-specific handlers
|
||||||
const hasTimelineElement = e.dataTransfer.types.includes(
|
const hasTimelineElement = e.dataTransfer.types.includes(
|
||||||
"application/x-timeline-element"
|
"application/x-timeline-element",
|
||||||
);
|
);
|
||||||
if (hasTimelineElement) {
|
if (hasTimelineElement) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const itemData = e.dataTransfer.getData("application/x-media-item");
|
const itemData = e.dataTransfer.getData("application/x-media-item");
|
||||||
if (itemData) {
|
if (itemData) {
|
||||||
try {
|
try {
|
||||||
const dragData: DragData = JSON.parse(itemData);
|
const dragData: DragData = JSON.parse(itemData);
|
||||||
|
|
||||||
if (dragData.type === "text") {
|
if (dragData.type === "text") {
|
||||||
// Always create new text track to avoid overlaps
|
// Always create new text track to avoid overlaps
|
||||||
useTimelineStore.getState().addTextToNewTrack(dragData);
|
useTimelineStore.getState().addTextToNewTrack(dragData);
|
||||||
} else {
|
} else {
|
||||||
// Handle media items
|
// Handle media items
|
||||||
const mediaItem = mediaItems.find(
|
const mediaItem = mediaItems.find(
|
||||||
(item: any) => item.id === dragData.id
|
(item: any) => item.id === dragData.id,
|
||||||
);
|
);
|
||||||
if (!mediaItem) {
|
if (!mediaItem) {
|
||||||
toast.error("Media item not found");
|
toast.error("Media item not found");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
useTimelineStore.getState().addMediaToNewTrack(mediaItem);
|
useTimelineStore.getState().addMediaToNewTrack(mediaItem);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Error parsing dropped item data:", error);
|
console.error("Error parsing dropped item data:", error);
|
||||||
toast.error("Failed to add item to timeline");
|
toast.error("Failed to add item to timeline");
|
||||||
}
|
}
|
||||||
} else if (e.dataTransfer.files?.length > 0) {
|
} else if (e.dataTransfer.files?.length > 0) {
|
||||||
// Handle file drops by creating new tracks
|
// Handle file drops by creating new tracks
|
||||||
if (!activeProject) {
|
if (!activeProject) {
|
||||||
toast.error("No active project");
|
toast.error("No active project");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setIsProcessing(true);
|
setIsProcessing(true);
|
||||||
setProgress(0);
|
setProgress(0);
|
||||||
try {
|
try {
|
||||||
const processedItems = await processMediaFiles(
|
const processedItems = await processMediaFiles(
|
||||||
e.dataTransfer.files,
|
e.dataTransfer.files,
|
||||||
(p) => setProgress(p)
|
(p) => setProgress(p),
|
||||||
);
|
);
|
||||||
for (const processedItem of processedItems) {
|
for (const processedItem of processedItems) {
|
||||||
await addMediaItem(activeProject.id, processedItem);
|
await addMediaItem(activeProject.id, processedItem);
|
||||||
const currentMediaItems = useMediaStore.getState().mediaItems;
|
const currentMediaItems = useMediaStore.getState().mediaItems;
|
||||||
const addedItem = currentMediaItems.find(
|
const addedItem = currentMediaItems.find(
|
||||||
(item) =>
|
(item) =>
|
||||||
item.name === processedItem.name && item.url === processedItem.url
|
item.name === processedItem.name &&
|
||||||
);
|
item.url === processedItem.url,
|
||||||
if (addedItem) {
|
);
|
||||||
useTimelineStore.getState().addMediaToNewTrack(addedItem);
|
if (addedItem) {
|
||||||
}
|
useTimelineStore.getState().addMediaToNewTrack(addedItem);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
}
|
||||||
// Show error if file processing fails
|
} catch (error) {
|
||||||
console.error("Error processing external files:", error);
|
// Show error if file processing fails
|
||||||
toast.error("Failed to process dropped files");
|
console.error("Error processing external files:", error);
|
||||||
} finally {
|
toast.error("Failed to process dropped files");
|
||||||
setIsProcessing(false);
|
} finally {
|
||||||
setProgress(0);
|
setIsProcessing(false);
|
||||||
}
|
setProgress(0);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const dragProps = {
|
const dragProps = {
|
||||||
onDragEnter: handleDragEnter,
|
onDragEnter: handleDragEnter,
|
||||||
onDragOver: handleDragOver,
|
onDragOver: handleDragOver,
|
||||||
onDragLeave: handleDragLeave,
|
onDragLeave: handleDragLeave,
|
||||||
onDrop: handleDrop,
|
onDrop: handleDrop,
|
||||||
};
|
};
|
||||||
|
|
||||||
return { dragProps };
|
return { dragProps };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,121 +1,122 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
import { TimelineTrack } from "@/types/timeline";
|
import { TimelineTrack } from "@/types/timeline";
|
||||||
import {
|
import {
|
||||||
TIMELINE_CONSTANTS,
|
TIMELINE_CONSTANTS,
|
||||||
getTotalTracksHeight,
|
getTotalTracksHeight,
|
||||||
} from "@/constants/timeline-constants";
|
} from "@/constants/timeline-constants";
|
||||||
import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";
|
import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";
|
||||||
|
|
||||||
interface TimelinePlayheadProps {
|
interface TimelinePlayheadProps {
|
||||||
currentTime: number;
|
currentTime: number;
|
||||||
duration: number;
|
duration: number;
|
||||||
zoomLevel: number;
|
zoomLevel: number;
|
||||||
tracks: TimelineTrack[];
|
tracks: TimelineTrack[];
|
||||||
seek: (time: number) => void;
|
seek: (time: number) => void;
|
||||||
rulerRef: React.RefObject<HTMLDivElement>;
|
rulerRef: React.RefObject<HTMLDivElement>;
|
||||||
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
trackLabelsRef?: React.RefObject<HTMLDivElement>;
|
trackLabelsRef?: React.RefObject<HTMLDivElement>;
|
||||||
timelineRef: React.RefObject<HTMLDivElement>;
|
timelineRef: React.RefObject<HTMLDivElement>;
|
||||||
playheadRef?: React.RefObject<HTMLDivElement>;
|
playheadRef?: React.RefObject<HTMLDivElement>;
|
||||||
isSnappingToPlayhead?: boolean;
|
isSnappingToPlayhead?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TimelinePlayhead({
|
export function TimelinePlayhead({
|
||||||
currentTime,
|
currentTime,
|
||||||
duration,
|
duration,
|
||||||
zoomLevel,
|
zoomLevel,
|
||||||
tracks,
|
tracks,
|
||||||
seek,
|
seek,
|
||||||
rulerRef,
|
rulerRef,
|
||||||
rulerScrollRef,
|
rulerScrollRef,
|
||||||
tracksScrollRef,
|
tracksScrollRef,
|
||||||
trackLabelsRef,
|
trackLabelsRef,
|
||||||
timelineRef,
|
timelineRef,
|
||||||
playheadRef: externalPlayheadRef,
|
playheadRef: externalPlayheadRef,
|
||||||
isSnappingToPlayhead = false,
|
isSnappingToPlayhead = false,
|
||||||
}: TimelinePlayheadProps) {
|
}: TimelinePlayheadProps) {
|
||||||
const internalPlayheadRef = useRef<HTMLDivElement>(null);
|
const internalPlayheadRef = useRef<HTMLDivElement>(null);
|
||||||
const playheadRef = externalPlayheadRef || internalPlayheadRef;
|
const playheadRef = externalPlayheadRef || internalPlayheadRef;
|
||||||
const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
|
const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
|
||||||
currentTime,
|
currentTime,
|
||||||
duration,
|
duration,
|
||||||
zoomLevel,
|
zoomLevel,
|
||||||
seek,
|
seek,
|
||||||
rulerRef,
|
rulerRef,
|
||||||
rulerScrollRef,
|
rulerScrollRef,
|
||||||
tracksScrollRef,
|
tracksScrollRef,
|
||||||
playheadRef,
|
playheadRef,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Use timeline container height minus a few pixels for breathing room
|
// Use timeline container height minus a few pixels for breathing room
|
||||||
const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
|
const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
|
||||||
const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
|
const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
|
||||||
|
|
||||||
// Get dynamic track labels width, fallback to 192px (ml-48) if no tracks or no ref
|
// Get dynamic track labels width, fallback to 192px (ml-48) if no tracks or no ref
|
||||||
const trackLabelsWidth = 192; // Fixed width from grid layout
|
const trackLabelsWidth = 192; // Fixed width from grid layout
|
||||||
const leftPosition = playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
|
const leftPosition =
|
||||||
|
playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
|
||||||
return (
|
|
||||||
<>
|
return (
|
||||||
{/* Playhead line container */}
|
<>
|
||||||
<div
|
{/* Playhead line container */}
|
||||||
ref={playheadRef}
|
<div
|
||||||
className="absolute pointer-events-auto z-[95]"
|
ref={playheadRef}
|
||||||
style={{
|
className="absolute pointer-events-auto z-[95]"
|
||||||
left: `${trackLabelsWidth + leftPosition}px`,
|
style={{
|
||||||
top: 0,
|
left: `${trackLabelsWidth + leftPosition}px`,
|
||||||
bottom: 0,
|
top: 0,
|
||||||
width: "2px", // Slightly wider for better click target
|
bottom: 0,
|
||||||
}}
|
width: "2px", // Slightly wider for better click target
|
||||||
onMouseDown={handlePlayheadMouseDown}
|
}}
|
||||||
>
|
onMouseDown={handlePlayheadMouseDown}
|
||||||
{/* The playhead line spanning full height */}
|
>
|
||||||
<div
|
{/* The playhead line spanning full height */}
|
||||||
className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-primary" : "bg-foreground"}`}
|
<div
|
||||||
/>
|
className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-primary" : "bg-foreground"}`}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
{/* Playhead dot indicator - separate container with highest z-index */}
|
|
||||||
<div
|
{/* Playhead dot indicator - separate container with highest z-index */}
|
||||||
className="absolute pointer-events-none z-[100]"
|
<div
|
||||||
style={{
|
className="absolute pointer-events-none z-[100]"
|
||||||
left: `${trackLabelsWidth + leftPosition}px`,
|
style={{
|
||||||
top: 0,
|
left: `${trackLabelsWidth + leftPosition}px`,
|
||||||
bottom: 0,
|
top: 0,
|
||||||
}}
|
bottom: 0,
|
||||||
>
|
}}
|
||||||
<div
|
>
|
||||||
className={`sticky top-1 left-1 -translate-x-[40%] transform w-3 h-3 rounded-full shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
|
<div
|
||||||
/>
|
className={`sticky top-1 left-1 -translate-x-[40%] transform w-3 h-3 rounded-full shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
|
||||||
</div>
|
/>
|
||||||
</>
|
</div>
|
||||||
);
|
</>
|
||||||
}
|
);
|
||||||
|
}
|
||||||
// Also export a hook for getting ruler handlers
|
|
||||||
export function useTimelinePlayheadRuler({
|
// Also export a hook for getting ruler handlers
|
||||||
currentTime,
|
export function useTimelinePlayheadRuler({
|
||||||
duration,
|
currentTime,
|
||||||
zoomLevel,
|
duration,
|
||||||
seek,
|
zoomLevel,
|
||||||
rulerRef,
|
seek,
|
||||||
rulerScrollRef,
|
rulerRef,
|
||||||
tracksScrollRef,
|
rulerScrollRef,
|
||||||
playheadRef,
|
tracksScrollRef,
|
||||||
}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {
|
playheadRef,
|
||||||
const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
|
}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {
|
||||||
currentTime,
|
const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
|
||||||
duration,
|
currentTime,
|
||||||
zoomLevel,
|
duration,
|
||||||
seek,
|
zoomLevel,
|
||||||
rulerRef,
|
seek,
|
||||||
rulerScrollRef,
|
rulerRef,
|
||||||
tracksScrollRef,
|
rulerScrollRef,
|
||||||
playheadRef,
|
tracksScrollRef,
|
||||||
});
|
playheadRef,
|
||||||
|
});
|
||||||
return { handleRulerMouseDown, isDraggingRuler };
|
|
||||||
}
|
return { handleRulerMouseDown, isDraggingRuler };
|
||||||
|
}
|
||||||
|
|||||||
@@ -3,123 +3,125 @@ import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
|
|||||||
import { useTimelinePlayheadRuler } from "./timeline-playhead";
|
import { useTimelinePlayheadRuler } from "./timeline-playhead";
|
||||||
|
|
||||||
export interface TimelineRulerProps {
|
export interface TimelineRulerProps {
|
||||||
duration: number;
|
duration: number;
|
||||||
zoomLevel: number;
|
zoomLevel: number;
|
||||||
currentTime: number;
|
currentTime: number;
|
||||||
seek: (time: number) => void;
|
seek: (time: number) => void;
|
||||||
rulerRef: React.RefObject<HTMLDivElement>;
|
rulerRef: React.RefObject<HTMLDivElement>;
|
||||||
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
playheadRef: React.RefObject<HTMLDivElement>;
|
playheadRef: React.RefObject<HTMLDivElement>;
|
||||||
handleSelectionMouseDown: (e: React.MouseEvent) => void;
|
handleSelectionMouseDown: (e: React.MouseEvent) => void;
|
||||||
handleTimelineContentClick: (e: React.MouseEvent) => void;
|
handleTimelineContentClick: (e: React.MouseEvent) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TimelineRuler({
|
export function TimelineRuler({
|
||||||
duration,
|
duration,
|
||||||
zoomLevel,
|
zoomLevel,
|
||||||
currentTime,
|
currentTime,
|
||||||
seek,
|
seek,
|
||||||
rulerRef,
|
rulerRef,
|
||||||
rulerScrollRef,
|
rulerScrollRef,
|
||||||
tracksScrollRef,
|
tracksScrollRef,
|
||||||
playheadRef,
|
playheadRef,
|
||||||
handleSelectionMouseDown,
|
handleSelectionMouseDown,
|
||||||
handleTimelineContentClick,
|
handleTimelineContentClick,
|
||||||
}: TimelineRulerProps) {
|
}: TimelineRulerProps) {
|
||||||
// Timeline playhead ruler handlers
|
// Timeline playhead ruler handlers
|
||||||
const { handleRulerMouseDown } = useTimelinePlayheadRuler({
|
const { handleRulerMouseDown } = useTimelinePlayheadRuler({
|
||||||
currentTime,
|
currentTime,
|
||||||
duration,
|
duration,
|
||||||
zoomLevel,
|
zoomLevel,
|
||||||
seek,
|
seek,
|
||||||
rulerRef,
|
rulerRef,
|
||||||
rulerScrollRef,
|
rulerScrollRef,
|
||||||
tracksScrollRef,
|
tracksScrollRef,
|
||||||
playheadRef,
|
playheadRef,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Memoize the expensive ruler markers calculation
|
// Memoize the expensive ruler markers calculation
|
||||||
const rulerMarkers = useMemo(() => {
|
const rulerMarkers = useMemo(() => {
|
||||||
// Calculate appropriate time interval based on zoom level
|
// Calculate appropriate time interval based on zoom level
|
||||||
const getTimeInterval = (zoom: number) => {
|
const getTimeInterval = (zoom: number) => {
|
||||||
const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoom;
|
const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoom;
|
||||||
if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
|
if (pixelsPerSecond >= 200) return 0.1; // Every 0.1s when very zoomed in
|
||||||
if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
|
if (pixelsPerSecond >= 100) return 0.5; // Every 0.5s when zoomed in
|
||||||
if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
|
if (pixelsPerSecond >= 50) return 1; // Every 1s at normal zoom
|
||||||
if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
|
if (pixelsPerSecond >= 25) return 2; // Every 2s when zoomed out
|
||||||
if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
|
if (pixelsPerSecond >= 12) return 5; // Every 5s when more zoomed out
|
||||||
if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
|
if (pixelsPerSecond >= 6) return 10; // Every 10s when very zoomed out
|
||||||
return 30; // Every 30s when extremely zoomed out
|
return 30; // Every 30s when extremely zoomed out
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatTime = (seconds: number, interval: number) => {
|
const formatTime = (seconds: number, interval: number) => {
|
||||||
const hours = Math.floor(seconds / 3600);
|
const hours = Math.floor(seconds / 3600);
|
||||||
const minutes = Math.floor((seconds % 3600) / 60);
|
const minutes = Math.floor((seconds % 3600) / 60);
|
||||||
const secs = seconds % 60;
|
const secs = seconds % 60;
|
||||||
|
|
||||||
if (hours > 0) {
|
if (hours > 0) {
|
||||||
return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
|
return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
|
||||||
} else if (minutes > 0) {
|
} else if (minutes > 0) {
|
||||||
return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
|
return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
|
||||||
} else if (interval >= 1) {
|
} else if (interval >= 1) {
|
||||||
return `${Math.floor(secs)}s`;
|
return `${Math.floor(secs)}s`;
|
||||||
} else {
|
} else {
|
||||||
return `${secs.toFixed(1)}s`;
|
return `${secs.toFixed(1)}s`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const interval = getTimeInterval(zoomLevel);
|
const interval = getTimeInterval(zoomLevel);
|
||||||
const markerCount = Math.ceil(duration / interval) + 1;
|
const markerCount = Math.ceil(duration / interval) + 1;
|
||||||
const markers = [];
|
const markers = [];
|
||||||
|
|
||||||
for (let i = 0; i < markerCount; i++) {
|
for (let i = 0; i < markerCount; i++) {
|
||||||
const time = i * interval;
|
const time = i * interval;
|
||||||
if (time > duration) break;
|
if (time > duration) break;
|
||||||
|
|
||||||
const isMainMarker = time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
|
const isMainMarker =
|
||||||
const leftPosition = time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
|
time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
|
||||||
|
const leftPosition =
|
||||||
|
time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
|
||||||
|
|
||||||
markers.push(
|
markers.push(
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
className={`absolute top-0 bottom-0 z-[99] ${
|
className={`absolute top-0 bottom-0 z-[99] ${
|
||||||
isMainMarker
|
isMainMarker
|
||||||
? "border-l border-muted-foreground/40"
|
? "border-l border-muted-foreground/40"
|
||||||
: "border-l border-muted-foreground/20"
|
: "border-l border-muted-foreground/20"
|
||||||
}`}
|
}`}
|
||||||
style={{ left: `${leftPosition}px` }}
|
style={{ left: `${leftPosition}px` }}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className={`absolute top-1 left-1 text-[0.6rem] z-[99] ${
|
className={`absolute top-1 left-1 text-[0.6rem] z-[99] ${
|
||||||
isMainMarker
|
isMainMarker
|
||||||
? "text-muted-foreground font-medium"
|
? "text-muted-foreground font-medium"
|
||||||
: "text-muted-foreground/70"
|
: "text-muted-foreground/70"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{formatTime(time, interval)}
|
{formatTime(time, interval)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return markers;
|
return markers;
|
||||||
}, [duration, zoomLevel]); // Only recalculate when duration or zoomLevel changes
|
}, [duration, zoomLevel]); // Only recalculate when duration or zoomLevel changes
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="sticky top-0 bg-card/[0.99] border-b border-muted/30 z-[99]"
|
className="sticky top-0 bg-card/[0.99] border-b border-muted/30 z-[99]"
|
||||||
onMouseDown={handleSelectionMouseDown}
|
onMouseDown={handleSelectionMouseDown}
|
||||||
onClick={handleTimelineContentClick}
|
onClick={handleTimelineContentClick}
|
||||||
data-ruler-area
|
data-ruler-area
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
ref={rulerRef}
|
ref={rulerRef}
|
||||||
className="relative h-5 select-none cursor-default pb-1 z-[99]"
|
className="relative h-5 select-none cursor-default pb-1 z-[99]"
|
||||||
onMouseDown={handleRulerMouseDown}
|
onMouseDown={handleRulerMouseDown}
|
||||||
>
|
>
|
||||||
{rulerMarkers}
|
{rulerMarkers}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,57 +1,61 @@
|
|||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
|
|
||||||
export interface TimelineScrollSyncProps {
|
export interface TimelineScrollSyncProps {
|
||||||
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
rulerScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
tracksScrollRef: React.RefObject<HTMLDivElement>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useTimelineScrollSync({
|
export function useTimelineScrollSync({
|
||||||
rulerScrollRef,
|
rulerScrollRef,
|
||||||
tracksScrollRef,
|
tracksScrollRef,
|
||||||
}: TimelineScrollSyncProps) {
|
}: TimelineScrollSyncProps) {
|
||||||
const isUpdatingRef = useRef(false);
|
const isUpdatingRef = useRef(false);
|
||||||
const lastSyncRef = useRef(0);
|
const lastSyncRef = useRef(0);
|
||||||
|
|
||||||
// --- Horizontal scroll synchronization between ruler and tracks ---
|
// --- Horizontal scroll synchronization between ruler and tracks ---
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const rulerViewport = rulerScrollRef.current?.querySelector(
|
const rulerViewport = rulerScrollRef.current?.querySelector(
|
||||||
"[data-radix-scroll-area-viewport]"
|
"[data-radix-scroll-area-viewport]",
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
const tracksViewport = tracksScrollRef.current?.querySelector(
|
const tracksViewport = tracksScrollRef.current?.querySelector(
|
||||||
"[data-radix-scroll-area-viewport]"
|
"[data-radix-scroll-area-viewport]",
|
||||||
) as HTMLElement;
|
) as HTMLElement;
|
||||||
|
|
||||||
if (!rulerViewport || !tracksViewport) return;
|
if (!rulerViewport || !tracksViewport) return;
|
||||||
|
|
||||||
// Throttled scroll handlers for better performance
|
// Throttled scroll handlers for better performance
|
||||||
const handleRulerScroll = () => {
|
const handleRulerScroll = () => {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
|
if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
|
||||||
lastSyncRef.current = now;
|
lastSyncRef.current = now;
|
||||||
|
|
||||||
isUpdatingRef.current = true;
|
isUpdatingRef.current = true;
|
||||||
tracksViewport.scrollLeft = rulerViewport.scrollLeft;
|
tracksViewport.scrollLeft = rulerViewport.scrollLeft;
|
||||||
isUpdatingRef.current = false;
|
isUpdatingRef.current = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleTracksScroll = () => {
|
const handleTracksScroll = () => {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
|
if (isUpdatingRef.current || now - lastSyncRef.current < 16) return; // 60fps throttling
|
||||||
lastSyncRef.current = now;
|
lastSyncRef.current = now;
|
||||||
|
|
||||||
isUpdatingRef.current = true;
|
isUpdatingRef.current = true;
|
||||||
rulerViewport.scrollLeft = tracksViewport.scrollLeft;
|
rulerViewport.scrollLeft = tracksViewport.scrollLeft;
|
||||||
isUpdatingRef.current = false;
|
isUpdatingRef.current = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
rulerViewport.addEventListener("scroll", handleRulerScroll, { passive: true });
|
rulerViewport.addEventListener("scroll", handleRulerScroll, {
|
||||||
tracksViewport.addEventListener("scroll", handleTracksScroll, { passive: true });
|
passive: true,
|
||||||
|
});
|
||||||
|
tracksViewport.addEventListener("scroll", handleTracksScroll, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
rulerViewport.removeEventListener("scroll", handleRulerScroll);
|
rulerViewport.removeEventListener("scroll", handleRulerScroll);
|
||||||
tracksViewport.removeEventListener("scroll", handleTracksScroll);
|
tracksViewport.removeEventListener("scroll", handleTracksScroll);
|
||||||
};
|
};
|
||||||
}, [rulerScrollRef, tracksScrollRef]);
|
}, [rulerScrollRef, tracksScrollRef]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,219 +1,201 @@
|
|||||||
import { Button } from "../../ui/button";
|
import { Button } from "../../ui/button";
|
||||||
import {
|
import {
|
||||||
Scissors,
|
Scissors,
|
||||||
ArrowLeftToLine,
|
ArrowLeftToLine,
|
||||||
ArrowRightToLine,
|
ArrowRightToLine,
|
||||||
Trash2,
|
Trash2,
|
||||||
Snowflake,
|
Snowflake,
|
||||||
Copy,
|
Copy,
|
||||||
SplitSquareHorizontal,
|
SplitSquareHorizontal,
|
||||||
Pause,
|
Pause,
|
||||||
Play,
|
Play,
|
||||||
Lock,
|
Lock,
|
||||||
LockOpen,
|
LockOpen,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import {
|
import {
|
||||||
Tooltip,
|
Tooltip,
|
||||||
TooltipContent,
|
TooltipContent,
|
||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
TooltipProvider,
|
TooltipProvider,
|
||||||
} from "../../ui/tooltip";
|
} from "../../ui/tooltip";
|
||||||
import { useTimelineStore } from "@/stores/timeline-store";
|
import { useTimelineStore } from "@/stores/timeline-store";
|
||||||
import { usePlaybackStore } from "@/stores/playback-store";
|
import { usePlaybackStore } from "@/stores/playback-store";
|
||||||
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
|
import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
|
||||||
|
|
||||||
export interface TimelineToolbarProps {
|
export interface TimelineToolbarProps {
|
||||||
handleSplitSelected: () => void;
|
handleSplitSelected: () => void;
|
||||||
handleSplitAndKeepLeft: () => void;
|
handleSplitAndKeepLeft: () => void;
|
||||||
handleSplitAndKeepRight: () => void;
|
handleSplitAndKeepRight: () => void;
|
||||||
handleSeparateAudio: () => void;
|
handleSeparateAudio: () => void;
|
||||||
handleDuplicateSelected: () => void;
|
handleDuplicateSelected: () => void;
|
||||||
handleFreezeSelected: () => void;
|
handleFreezeSelected: () => void;
|
||||||
handleDeleteSelected: () => void;
|
handleDeleteSelected: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TimelineToolbar({
|
export function TimelineToolbar({
|
||||||
handleSplitSelected,
|
handleSplitSelected,
|
||||||
handleSplitAndKeepLeft,
|
handleSplitAndKeepLeft,
|
||||||
handleSplitAndKeepRight,
|
handleSplitAndKeepRight,
|
||||||
handleSeparateAudio,
|
handleSeparateAudio,
|
||||||
handleDuplicateSelected,
|
handleDuplicateSelected,
|
||||||
handleFreezeSelected,
|
handleFreezeSelected,
|
||||||
handleDeleteSelected,
|
handleDeleteSelected,
|
||||||
}: TimelineToolbarProps) {
|
}: TimelineToolbarProps) {
|
||||||
const {
|
const {
|
||||||
tracks,
|
tracks,
|
||||||
addTrack,
|
addTrack,
|
||||||
addElementToTrack,
|
addElementToTrack,
|
||||||
snappingEnabled,
|
snappingEnabled,
|
||||||
toggleSnapping,
|
toggleSnapping,
|
||||||
} = useTimelineStore();
|
} = useTimelineStore();
|
||||||
const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
|
const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="border-b flex items-center justify-between px-2 py-1 bg-card z-90">
|
<div className="border-b flex items-center justify-between px-2 py-1 bg-card z-90">
|
||||||
<div className="flex items-center gap-1 w-full">
|
<div className="flex items-center gap-1 w-full">
|
||||||
<TooltipProvider delayDuration={500}>
|
<TooltipProvider delayDuration={500}>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
variant="text"
|
variant="text"
|
||||||
size="icon"
|
size="icon"
|
||||||
onClick={toggle}
|
onClick={toggle}
|
||||||
className="mr-2"
|
className="mr-2"
|
||||||
>
|
>
|
||||||
{isPlaying ? (
|
{isPlaying ? (
|
||||||
<Pause className="h-4 w-4" />
|
<Pause className="h-4 w-4" />
|
||||||
) : (
|
) : (
|
||||||
<Play className="h-4 w-4" />
|
<Play className="h-4 w-4" />
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>
|
||||||
{isPlaying ? "Pause (Space)" : "Play (Space)"}
|
{isPlaying ? "Pause (Space)" : "Play (Space)"}
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<div className="w-px h-6 bg-border mx-1" />
|
<div className="w-px h-6 bg-border mx-1" />
|
||||||
<div
|
<div
|
||||||
className="text-xs text-muted-foreground font-mono px-2"
|
className="text-xs text-muted-foreground font-mono px-2"
|
||||||
style={{ minWidth: "18ch", textAlign: "center" }}
|
style={{ minWidth: "18ch", textAlign: "center" }}
|
||||||
>
|
>
|
||||||
{currentTime.toFixed(1)}s / {duration.toFixed(1)}s
|
{currentTime.toFixed(1)}s / {duration.toFixed(1)}s
|
||||||
</div>
|
</div>
|
||||||
{tracks.length === 0 && (
|
{tracks.length === 0 && (
|
||||||
<>
|
<>
|
||||||
<div className="w-px h-6 bg-border mx-1" />
|
<div className="w-px h-6 bg-border mx-1" />
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger asChild>
|
<TooltipTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const trackId = addTrack("media");
|
const trackId = addTrack("media");
|
||||||
addElementToTrack(trackId, {
|
addElementToTrack(trackId, {
|
||||||
type: "media",
|
type: "media",
|
||||||
mediaId: "test",
|
mediaId: "test",
|
||||||
name: "Test Clip",
|
name: "Test Clip",
|
||||||
duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
|
duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
|
||||||
startTime: 0,
|
startTime: 0,
|
||||||
trimStart: 0,
|
trimStart: 0,
|
||||||
trimEnd: 0,
|
trimEnd: 0,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
className="text-xs"
|
className="text-xs"
|
||||||
>
|
>
|
||||||
Add Test Clip
|
Add Test Clip
|
||||||
</Button>
|
</Button>
|
||||||
</TooltipTrigger>
|
</TooltipTrigger>
|
||||||
<TooltipContent>
|
<TooltipContent>Add a test clip to try playback</TooltipContent>
|
||||||
Add a test clip to try playback
|
</Tooltip>
|
||||||
</TooltipContent>
|
</>
|
||||||
</Tooltip>
|
)}
|
||||||
</>
|
<div className="w-px h-6 bg-border mx-1" />
|
||||||
)}
|
<Tooltip>
|
||||||
<div className="w-px h-6 bg-border mx-1" />
|
<TooltipTrigger asChild>
|
||||||
<Tooltip>
|
<Button variant="text" size="icon" onClick={handleSplitSelected}>
|
||||||
<TooltipTrigger asChild>
|
<Scissors className="h-4 w-4" />
|
||||||
<Button
|
</Button>
|
||||||
variant="text"
|
</TooltipTrigger>
|
||||||
size="icon"
|
<TooltipContent>Split element (Ctrl+S)</TooltipContent>
|
||||||
onClick={handleSplitSelected}
|
</Tooltip>
|
||||||
>
|
<Tooltip>
|
||||||
<Scissors className="h-4 w-4" />
|
<TooltipTrigger asChild>
|
||||||
</Button>
|
<Button
|
||||||
</TooltipTrigger>
|
variant="text"
|
||||||
<TooltipContent>Split element (Ctrl+S)</TooltipContent>
|
size="icon"
|
||||||
</Tooltip>
|
onClick={handleSplitAndKeepLeft}
|
||||||
<Tooltip>
|
>
|
||||||
<TooltipTrigger asChild>
|
<ArrowLeftToLine className="h-4 w-4" />
|
||||||
<Button
|
</Button>
|
||||||
variant="text"
|
</TooltipTrigger>
|
||||||
size="icon"
|
<TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
|
||||||
onClick={handleSplitAndKeepLeft}
|
</Tooltip>
|
||||||
>
|
<Tooltip>
|
||||||
<ArrowLeftToLine className="h-4 w-4" />
|
<TooltipTrigger asChild>
|
||||||
</Button>
|
<Button
|
||||||
</TooltipTrigger>
|
variant="text"
|
||||||
<TooltipContent>Split and keep left (Ctrl+Q)</TooltipContent>
|
size="icon"
|
||||||
</Tooltip>
|
onClick={handleSplitAndKeepRight}
|
||||||
<Tooltip>
|
>
|
||||||
<TooltipTrigger asChild>
|
<ArrowRightToLine className="h-4 w-4" />
|
||||||
<Button
|
</Button>
|
||||||
variant="text"
|
</TooltipTrigger>
|
||||||
size="icon"
|
<TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
|
||||||
onClick={handleSplitAndKeepRight}
|
</Tooltip>
|
||||||
>
|
<Tooltip>
|
||||||
<ArrowRightToLine className="h-4 w-4" />
|
<TooltipTrigger asChild>
|
||||||
</Button>
|
<Button variant="text" size="icon" onClick={handleSeparateAudio}>
|
||||||
</TooltipTrigger>
|
<SplitSquareHorizontal className="h-4 w-4" />
|
||||||
<TooltipContent>Split and keep right (Ctrl+W)</TooltipContent>
|
</Button>
|
||||||
</Tooltip>
|
</TooltipTrigger>
|
||||||
<Tooltip>
|
<TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
|
||||||
<TooltipTrigger asChild>
|
</Tooltip>
|
||||||
<Button
|
<Tooltip>
|
||||||
variant="text"
|
<TooltipTrigger asChild>
|
||||||
size="icon"
|
<Button
|
||||||
onClick={handleSeparateAudio}
|
variant="text"
|
||||||
>
|
size="icon"
|
||||||
<SplitSquareHorizontal className="h-4 w-4" />
|
onClick={handleDuplicateSelected}
|
||||||
</Button>
|
>
|
||||||
</TooltipTrigger>
|
<Copy className="h-4 w-4" />
|
||||||
<TooltipContent>Separate audio (Ctrl+D)</TooltipContent>
|
</Button>
|
||||||
</Tooltip>
|
</TooltipTrigger>
|
||||||
<Tooltip>
|
<TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>
|
||||||
<TooltipTrigger asChild>
|
</Tooltip>
|
||||||
<Button
|
<Tooltip>
|
||||||
variant="text"
|
<TooltipTrigger asChild>
|
||||||
size="icon"
|
<Button variant="text" size="icon" onClick={handleFreezeSelected}>
|
||||||
onClick={handleDuplicateSelected}
|
<Snowflake className="h-4 w-4" />
|
||||||
>
|
</Button>
|
||||||
<Copy className="h-4 w-4" />
|
</TooltipTrigger>
|
||||||
</Button>
|
<TooltipContent>Freeze frame (F)</TooltipContent>
|
||||||
</TooltipTrigger>
|
</Tooltip>
|
||||||
<TooltipContent>Duplicate element (Ctrl+D)</TooltipContent>
|
<Tooltip>
|
||||||
</Tooltip>
|
<TooltipTrigger asChild>
|
||||||
<Tooltip>
|
<Button variant="text" size="icon" onClick={handleDeleteSelected}>
|
||||||
<TooltipTrigger asChild>
|
<Trash2 className="h-4 w-4" />
|
||||||
<Button
|
</Button>
|
||||||
variant="text"
|
</TooltipTrigger>
|
||||||
size="icon"
|
<TooltipContent>Delete element (Delete)</TooltipContent>
|
||||||
onClick={handleFreezeSelected}
|
</Tooltip>
|
||||||
>
|
</TooltipProvider>
|
||||||
<Snowflake className="h-4 w-4" />
|
</div>
|
||||||
</Button>
|
<div className="flex items-center gap-1">
|
||||||
</TooltipTrigger>
|
<TooltipProvider delayDuration={500}>
|
||||||
<TooltipContent>Freeze frame (F)</TooltipContent>
|
<Tooltip>
|
||||||
</Tooltip>
|
<TooltipTrigger asChild>
|
||||||
<Tooltip>
|
<Button variant="text" size="icon" onClick={toggleSnapping}>
|
||||||
<TooltipTrigger asChild>
|
{snappingEnabled ? (
|
||||||
<Button
|
<Lock className="h-4 w-4" />
|
||||||
variant="text"
|
) : (
|
||||||
size="icon"
|
<LockOpen className="h-4 w-4 text-primary" />
|
||||||
onClick={handleDeleteSelected}
|
)}
|
||||||
>
|
</Button>
|
||||||
<Trash2 className="h-4 w-4" />
|
</TooltipTrigger>
|
||||||
</Button>
|
<TooltipContent>Auto snapping</TooltipContent>
|
||||||
</TooltipTrigger>
|
</Tooltip>
|
||||||
<TooltipContent>Delete element (Delete)</TooltipContent>
|
</TooltipProvider>
|
||||||
</Tooltip>
|
</div>
|
||||||
</TooltipProvider>
|
</div>
|
||||||
</div>
|
);
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<TooltipProvider delayDuration={500}>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<Button variant="text" size="icon" onClick={toggleSnapping}>
|
|
||||||
{snappingEnabled ? (
|
|
||||||
<Lock className="h-4 w-4" />
|
|
||||||
) : (
|
|
||||||
<LockOpen className="h-4 w-4 text-primary" />
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>Auto snapping</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import { Fragment } from "react";
|
import { Fragment } from "react";
|
||||||
import { Plus } from "lucide-react";
|
import { Plus } from "lucide-react";
|
||||||
import {
|
import {
|
||||||
ContextMenu,
|
ContextMenu,
|
||||||
ContextMenuContent,
|
ContextMenuContent,
|
||||||
ContextMenuItem,
|
ContextMenuItem,
|
||||||
ContextMenuTrigger,
|
ContextMenuTrigger,
|
||||||
} from "../../ui/context-menu";
|
} from "../../ui/context-menu";
|
||||||
import { useTimelineStore } from "@/stores/timeline-store";
|
import { useTimelineStore } from "@/stores/timeline-store";
|
||||||
import { TimelineTrackContent } from "../timeline-track";
|
import { TimelineTrackContent } from "../timeline-track";
|
||||||
@@ -14,86 +14,76 @@ import type { TimelineTrack } from "@/types/timeline";
|
|||||||
import type { SnapPoint } from "@/hooks/use-timeline-snapping";
|
import type { SnapPoint } from "@/hooks/use-timeline-snapping";
|
||||||
|
|
||||||
export interface TimelineTracksAreaProps {
|
export interface TimelineTracksAreaProps {
|
||||||
tracks: TimelineTrack[];
|
tracks: TimelineTrack[];
|
||||||
zoomLevel: number;
|
zoomLevel: number;
|
||||||
handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
|
handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
|
||||||
clearSelectedElements: () => void;
|
clearSelectedElements: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function TimelineTracksArea({
|
export function TimelineTracksArea({
|
||||||
tracks,
|
tracks,
|
||||||
zoomLevel,
|
zoomLevel,
|
||||||
handleSnapPointChange,
|
handleSnapPointChange,
|
||||||
clearSelectedElements,
|
clearSelectedElements,
|
||||||
}: TimelineTracksAreaProps) {
|
}: TimelineTracksAreaProps) {
|
||||||
const { addTrack, toggleTrackMute } = useTimelineStore();
|
const { addTrack, toggleTrackMute } = useTimelineStore();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Track Rows */}
|
{/* Track Rows */}
|
||||||
{tracks.map((track, index) => (
|
{tracks.map((track, index) => (
|
||||||
<Fragment key={track.id}>
|
<Fragment key={track.id}>
|
||||||
{/* Left Column (Sticky Track Labels) */}
|
{/* Left Column (Sticky Track Labels) */}
|
||||||
<div
|
<div
|
||||||
className="sticky left-0 flex items-center border-b border-panel border-inset group bg-card/[0.99] z-[98]"
|
className="sticky left-0 flex items-center border-b border-panel border-inset group bg-card/[0.99] z-[98]"
|
||||||
style={{ height: `${getTrackHeight(track.type)}px` }}
|
style={{ height: `${getTrackHeight(track.type)}px` }}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2 px-2">
|
<div className="flex items-center gap-2 px-2">
|
||||||
<TrackIcon track={track} />
|
<TrackIcon track={track} />
|
||||||
</div>
|
</div>
|
||||||
{track.muted && (
|
{track.muted && (
|
||||||
<span className="text-xs text-red-500 font-semibold">
|
<span className="text-xs text-red-500 font-semibold">Muted</span>
|
||||||
Muted
|
)}
|
||||||
</span>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Scrollable Track Content */}
|
{/* Scrollable Track Content */}
|
||||||
<ContextMenu>
|
<ContextMenu>
|
||||||
<ContextMenuTrigger asChild>
|
<ContextMenuTrigger asChild>
|
||||||
<div
|
<div
|
||||||
className=" h-full"
|
className=" h-full"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
// If clicking empty area (not on a element), deselect all elements
|
// If clicking empty area (not on a element), deselect all elements
|
||||||
if (
|
if (!(e.target as HTMLElement).closest(".timeline-element")) {
|
||||||
!(e.target as HTMLElement).closest(
|
clearSelectedElements();
|
||||||
".timeline-element"
|
}
|
||||||
)
|
}}
|
||||||
) {
|
>
|
||||||
clearSelectedElements();
|
<TimelineTrackContent
|
||||||
}
|
track={track}
|
||||||
}}
|
zoomLevel={zoomLevel}
|
||||||
>
|
onSnapPointChange={handleSnapPointChange}
|
||||||
<TimelineTrackContent
|
/>
|
||||||
track={track}
|
</div>
|
||||||
zoomLevel={zoomLevel}
|
</ContextMenuTrigger>
|
||||||
onSnapPointChange={handleSnapPointChange}
|
<ContextMenuContent>
|
||||||
/>
|
<ContextMenuItem onClick={() => toggleTrackMute(track.id)}>
|
||||||
</div>
|
{track.muted ? "Unmute Track" : "Mute Track"}
|
||||||
</ContextMenuTrigger>
|
</ContextMenuItem>
|
||||||
<ContextMenuContent>
|
<ContextMenuItem>Track settings (soon)</ContextMenuItem>
|
||||||
<ContextMenuItem
|
</ContextMenuContent>
|
||||||
onClick={() => toggleTrackMute(track.id)}
|
</ContextMenu>
|
||||||
>
|
</Fragment>
|
||||||
{track.muted ? "Unmute Track" : "Mute Track"}
|
))}
|
||||||
</ContextMenuItem>
|
{/* Add Track Button - spans full width */}
|
||||||
<ContextMenuItem>
|
<div
|
||||||
Track settings (soon)
|
onClick={() => addTrack("media")}
|
||||||
</ContextMenuItem>
|
className="col-span-1 sticky left-0 w-full flex items-center border-b border-muted bg-card/[0.99] hover:bg-card/50 transition-colors cursor-pointer z-[89]"
|
||||||
</ContextMenuContent>
|
style={{ height: `${getTrackHeight("media")}px` }}
|
||||||
</ContextMenu>
|
>
|
||||||
</Fragment>
|
<div className="w-full flex justify-center items-center">
|
||||||
))}
|
<Plus className="w-4 h-4 text-muted-foreground" />
|
||||||
{/* Add Track Button - spans full width */}
|
</div>
|
||||||
<div
|
</div>
|
||||||
onClick={() => addTrack('media')}
|
</>
|
||||||
className="col-span-1 sticky left-0 w-full flex items-center border-b border-muted bg-card/[0.99] hover:bg-card/50 transition-colors cursor-pointer z-[89]"
|
);
|
||||||
style={{ height: `${getTrackHeight("media")}px` }}
|
|
||||||
>
|
|
||||||
<div className="w-full flex justify-center items-center">
|
|
||||||
<Plus className="w-4 h-4 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,30 +1,32 @@
|
|||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
|
|
||||||
export interface TimelineWheelHandlerProps {
|
export interface TimelineWheelHandlerProps {
|
||||||
timelineRef: React.RefObject<HTMLDivElement>;
|
timelineRef: React.RefObject<HTMLDivElement>;
|
||||||
isInTimeline: boolean;
|
isInTimeline: boolean;
|
||||||
handleWheel: (e: React.WheelEvent) => void;
|
handleWheel: (e: React.WheelEvent) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useTimelineWheelHandler({
|
export function useTimelineWheelHandler({
|
||||||
timelineRef,
|
timelineRef,
|
||||||
isInTimeline,
|
isInTimeline,
|
||||||
handleWheel,
|
handleWheel,
|
||||||
}: TimelineWheelHandlerProps) {
|
}: TimelineWheelHandlerProps) {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timelineContainer = timelineRef.current;
|
const timelineContainer = timelineRef.current;
|
||||||
if (!timelineContainer || !isInTimeline) return;
|
if (!timelineContainer || !isInTimeline) return;
|
||||||
|
|
||||||
const handleWheelCapture = (e: WheelEvent) => {
|
const handleWheelCapture = (e: WheelEvent) => {
|
||||||
handleWheel(e as any);
|
handleWheel(e as any);
|
||||||
};
|
};
|
||||||
|
|
||||||
timelineContainer.addEventListener("wheel", handleWheelCapture, { passive: false });
|
timelineContainer.addEventListener("wheel", handleWheelCapture, {
|
||||||
|
passive: false,
|
||||||
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
timelineContainer.removeEventListener("wheel", handleWheelCapture);
|
timelineContainer.removeEventListener("wheel", handleWheelCapture);
|
||||||
};
|
};
|
||||||
}, [handleWheel, isInTimeline, timelineRef]);
|
}, [handleWheel, isInTimeline, timelineRef]);
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,17 +2,17 @@ import { Video, Music, TypeIcon } from "lucide-react";
|
|||||||
import type { TimelineTrack } from "@/types/timeline";
|
import type { TimelineTrack } from "@/types/timeline";
|
||||||
|
|
||||||
export function TrackIcon({ track }: { track: TimelineTrack }) {
|
export function TrackIcon({ track }: { track: TimelineTrack }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{track.type === "media" && (
|
{track.type === "media" && (
|
||||||
<Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
|
<Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
|
||||||
)}
|
)}
|
||||||
{track.type === "text" && (
|
{track.type === "text" && (
|
||||||
<TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
|
<TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
|
||||||
)}
|
)}
|
||||||
{track.type === "audio" && (
|
{track.type === "audio" && (
|
||||||
<Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
|
<Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user