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

feat: bunx biome format --write .

Browse Source
This commit is contained in:
Simon Orzel
2025-07-17 03:00:38 +02:00
parent 1505c1b12f
commit 167f366c6d
11 changed files with 1038 additions and 1049 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/editor/timeline/timeline-action-handlers.tsx
+2 -2
View File
@@ -20,11 +20,11 @@ export function useTimelineActionHandlers() {
// Create optimized lookup maps for O(1) access instead of O(n) find operations
const trackMap = useMemo(() => {
const map = new Map();
tracks.forEach(track => {
tracks.forEach((track) => {
map.set(track.id, track);
// Also create element lookup for this track
const elementMap = new Map();
track.elements.forEach(element => {
track.elements.forEach((element) => {
elementMap.set(element.id, element);
});
map.set(`${track.id}_elements`, elementMap);
apps/web/src/components/editor/timeline/timeline-content-click.tsx
+10 -7
View File
@@ -1,6 +1,9 @@
import { useCallback } from "react";
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 {
duration: number;
@@ -56,7 +59,7 @@ export function useTimelineContentClick({
// Determine if we're clicking in ruler or tracks area
const isRulerClick = (e.target as HTMLElement).closest(
"[data-ruler-area]"
"[data-ruler-area]",
);
let mouseX: number;
@@ -65,7 +68,7 @@ export function useTimelineContentClick({
if (isRulerClick) {
// Calculate based on ruler position
const rulerContent = rulerScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
"[data-radix-scroll-area-viewport]",
) as HTMLElement;
if (!rulerContent) return;
const rect = rulerContent.getBoundingClientRect();
@@ -74,7 +77,7 @@ export function useTimelineContentClick({
} else {
// Calculate based on tracks content position
const tracksContent = tracksScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
"[data-radix-scroll-area-viewport]",
) as HTMLElement;
if (!tracksContent) return;
const rect = tracksContent.getBoundingClientRect();
@@ -87,8 +90,8 @@ export function useTimelineContentClick({
Math.min(
duration,
(mouseX + scrollLeft) /
(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
)
(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
),
);
// Use frame snapping for timeline clicking
@@ -108,7 +111,7 @@ export function useTimelineContentClick({
justFinishedSelecting,
playheadRef,
activeProject?.fps,
]
],
);
return { handleTimelineContentClick };
apps/web/src/components/editor/timeline/timeline-content.tsx
+7 -3
View File
@@ -56,9 +56,13 @@ export function TimelineContent({
showSnapIndicator,
}: TimelineContentProps) {
return (
<div 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]'}`}>
<div
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>
apps/web/src/components/editor/timeline/timeline-drag-handlers.tsx
+5 -4
View File
@@ -66,7 +66,7 @@ export function useTimelineDragHandlers({
// Ignore timeline element drags - they're handled by track-specific handlers
const hasTimelineElement = e.dataTransfer.types.includes(
"application/x-timeline-element"
"application/x-timeline-element",
);
if (hasTimelineElement) {
return;
@@ -83,7 +83,7 @@ export function useTimelineDragHandlers({
} else {
// Handle media items
const mediaItem = mediaItems.find(
(item: any) => item.id === dragData.id
(item: any) => item.id === dragData.id,
);
if (!mediaItem) {
toast.error("Media item not found");
@@ -108,14 +108,15 @@ export function useTimelineDragHandlers({
try {
const processedItems = await processMediaFiles(
e.dataTransfer.files,
(p) => setProgress(p)
(p) => setProgress(p),
);
for (const processedItem of processedItems) {
await addMediaItem(activeProject.id, processedItem);
const currentMediaItems = useMediaStore.getState().mediaItems;
const addedItem = currentMediaItems.find(
(item) =>
item.name === processedItem.name && item.url === processedItem.url
item.name === processedItem.name &&
item.url === processedItem.url,
);
if (addedItem) {
useTimelineStore.getState().addMediaToNewTrack(addedItem);
apps/web/src/components/editor/timeline/timeline-playhead.tsx
+2 -1
View File
@@ -56,7 +56,8 @@ export function TimelinePlayhead({
// 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 leftPosition = playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const leftPosition =
playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
return (
<>
apps/web/src/components/editor/timeline/timeline-ruler.tsx
+5 -3
View File
@@ -77,8 +77,10 @@ export function TimelineRuler({
const time = i * interval;
if (time > duration) break;
const isMainMarker = time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
const leftPosition = time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const isMainMarker =
time % (interval >= 1 ? Math.max(1, interval) : 1) === 0;
const leftPosition =
time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
markers.push(
<div
@@ -99,7 +101,7 @@ export function TimelineRuler({
>
{formatTime(time, interval)}
</span>
</div>
</div>,
);
}
apps/web/src/components/editor/timeline/timeline-scroll-sync.tsx
+8 -4
View File
@@ -15,10 +15,10 @@ export function useTimelineScrollSync({
// --- Horizontal scroll synchronization between ruler and tracks ---
useEffect(() => {
const rulerViewport = rulerScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
"[data-radix-scroll-area-viewport]",
) as HTMLElement;
const tracksViewport = tracksScrollRef.current?.querySelector(
"[data-radix-scroll-area-viewport]"
"[data-radix-scroll-area-viewport]",
) as HTMLElement;
if (!rulerViewport || !tracksViewport) return;
@@ -44,8 +44,12 @@ export function useTimelineScrollSync({
isUpdatingRef.current = false;
};
rulerViewport.addEventListener("scroll", handleRulerScroll, { passive: true });
tracksViewport.addEventListener("scroll", handleTracksScroll, { passive: true });
rulerViewport.addEventListener("scroll", handleRulerScroll, {
passive: true,
});
tracksViewport.addEventListener("scroll", handleTracksScroll, {
passive: true,
});
return () => {
rulerViewport.removeEventListener("scroll", handleRulerScroll);
apps/web/src/components/editor/timeline/timeline-toolbar.tsx
+5 -23
View File
@@ -105,20 +105,14 @@ export function TimelineToolbar({
Add Test Clip
</Button>
</TooltipTrigger>
<TooltipContent>
Add a test clip to try playback
</TooltipContent>
<TooltipContent>Add a test clip to try playback</TooltipContent>
</Tooltip>
</>
)}
<div className="w-px h-6 bg-border mx-1" />
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="text"
size="icon"
onClick={handleSplitSelected}
>
<Button variant="text" size="icon" onClick={handleSplitSelected}>
<Scissors className="h-4 w-4" />
</Button>
</TooltipTrigger>
@@ -150,11 +144,7 @@ export function TimelineToolbar({
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="text"
size="icon"
onClick={handleSeparateAudio}
>
<Button variant="text" size="icon" onClick={handleSeparateAudio}>
<SplitSquareHorizontal className="h-4 w-4" />
</Button>
</TooltipTrigger>
@@ -174,11 +164,7 @@ export function TimelineToolbar({
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="text"
size="icon"
onClick={handleFreezeSelected}
>
<Button variant="text" size="icon" onClick={handleFreezeSelected}>
<Snowflake className="h-4 w-4" />
</Button>
</TooltipTrigger>
@@ -186,11 +172,7 @@ export function TimelineToolbar({
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="text"
size="icon"
onClick={handleDeleteSelected}
>
<Button variant="text" size="icon" onClick={handleDeleteSelected}>
<Trash2 className="h-4 w-4" />
</Button>
</TooltipTrigger>
apps/web/src/components/editor/timeline/timeline-tracks-area.tsx
+5 -15
View File
@@ -42,9 +42,7 @@ export function TimelineTracksArea({
<TrackIcon track={track} />
</div>
{track.muted && (
<span className="text-xs text-red-500 font-semibold">
Muted
</span>
<span className="text-xs text-red-500 font-semibold">Muted</span>
)}
</div>
@@ -55,11 +53,7 @@ export function TimelineTracksArea({
className=" h-full"
onClick={(e) => {
// If clicking empty area (not on a element), deselect all elements
if (
!(e.target as HTMLElement).closest(
".timeline-element"
)
) {
if (!(e.target as HTMLElement).closest(".timeline-element")) {
clearSelectedElements();
}
}}
@@ -72,21 +66,17 @@ export function TimelineTracksArea({
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
onClick={() => toggleTrackMute(track.id)}
>
<ContextMenuItem onClick={() => toggleTrackMute(track.id)}>
{track.muted ? "Unmute Track" : "Mute Track"}
</ContextMenuItem>
<ContextMenuItem>
Track settings (soon)
</ContextMenuItem>
<ContextMenuItem>Track settings (soon)</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</Fragment>
))}
{/* Add Track Button - spans full width */}
<div
onClick={() => addTrack('media')}
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` }}
>
apps/web/src/components/editor/timeline/timeline-wheel-handler.tsx
+3 -1
View File
@@ -19,7 +19,9 @@ export function useTimelineWheelHandler({
handleWheel(e as any);
};
timelineContainer.addEventListener("wheel", handleWheelCapture, { passive: false });
timelineContainer.addEventListener("wheel", handleWheelCapture, {
passive: false,
});
return () => {
timelineContainer.removeEventListener("wheel", handleWheelCapture);