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

shipping too hard

Browse Source
This commit is contained in:
Maze Winther
2025-07-08 00:07:22 +02:00
parent 9d2fd50fbc
commit d750d7f41d
4 changed files with 103 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/src/app/editor/[project_id]/page.tsx
View File

@ -8,7 +8,7 @@ import {
ResizableHandle,
} from "../../../components/ui/resizable";
import { MediaPanel } from "../../../components/editor/media-panel";
// import { PropertiesPanel } from "../../components/editor/properties-panel";
import { PropertiesPanel } from "../../../components/editor/properties-panel";
import { Timeline } from "../../../components/editor/timeline";
import { PreviewPanel } from "../../../components/editor/preview-panel";
import { EditorHeader } from "@/components/editor-header";
@ -27,6 +27,8 @@ export default function Editor() {
setPreviewPanel,
setMainContent,
setTimeline,
propertiesPanel,
setPropertiesPanel,
} = usePanelStore();
const { activeProject, loadProject, createNewProject } = useProjectStore();
@ -94,8 +96,8 @@ export default function Editor() {
<ResizableHandle withHandle />
{/* Properties Panel - Hidden for now but ready */}
{/* <ResizablePanel
<ResizablePanel
defaultSize={propertiesPanel}
minSize={15}
maxSize={40}
@ -103,7 +105,7 @@ export default function Editor() {
className="min-w-0"
>
<PropertiesPanel />
</ResizablePanel> */}
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>

19
apps/web/src/components/editor/timeline-element.tsx
View File

@ -173,8 +173,7 @@ export function TimelineElement({
const renderElementContent = () => {
if (element.type === "text") {
return (
<div className="w-full h-full flex items-center justify-center px-2">
<Type className="h-4 w-4 mr-2 text-purple-400 flex-shrink-0" />
<div className="w-full h-full flex items-center justify-center">
<span className="text-xs text-foreground/80 truncate">
{element.content}
</span>
@ -195,12 +194,14 @@ export function TimelineElement({
if (mediaItem.type === "image") {
return (
<div className="w-full h-full flex items-center justify-center">
<img
src={mediaItem.url}
alt={mediaItem.name}
className="w-full h-full object-cover"
draggable={false}
/>
<div className="bg-[#004D52] py-3 w-full h-full">
<img
src={mediaItem.url}
alt={mediaItem.name}
className="w-full h-full object-cover"
draggable={false}
/>
</div>
</div>
);
}
@ -276,7 +277,7 @@ export function TimelineElement({
onElementMouseDown && onElementMouseDown(e, element)
}
>
<div className="absolute inset-1 flex items-center p-1">
<div className="absolute inset-0 flex items-center h-full">
{renderElementContent()}
</div>

20
apps/web/src/components/editor/timeline.tsx
View File

@ -46,6 +46,9 @@ import { TimelineTrackContent } from "./timeline-track";
import type { DragData } from "@/types/timeline";
import {
getTrackLabelColor,
getTrackHeight,
getCumulativeHeightBefore,
getTotalTracksHeight,
TIMELINE_CONSTANTS,
} from "@/lib/timeline-constants";
@ -242,9 +245,9 @@ export function Timeline() {
track.elements.forEach((element) => {
const clipLeft =
element.startTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
const clipTop = trackIdx * TIMELINE_CONSTANTS.TRACK_HEIGHT;
const clipBottom = clipTop + TIMELINE_CONSTANTS.TRACK_HEIGHT;
const clipRight = clipLeft + TIMELINE_CONSTANTS.TRACK_HEIGHT;
const clipTop = getCumulativeHeightBefore(tracks, trackIdx);
const clipBottom = clipTop + getTrackHeight(track.type);
const clipRight = clipLeft + getTrackHeight(track.type);
if (
bx1 < clipRight &&
bx2 > clipLeft &&
@ -1021,7 +1024,8 @@ export function Timeline() {
{tracks.map((track) => (
<div
key={track.id}
className="h-[60px] flex items-center px-3 border-b border-muted/30 bg-background group"
className="flex items-center px-3 border-b border-muted/30 bg-background group"
style={{ height: `${getTrackHeight(track.type)}px` }}
>
<div className="flex items-center flex-1 min-w-0">
<div
@ -1048,7 +1052,7 @@ export function Timeline() {
<div
className="relative flex-1"
style={{
height: `${Math.max(200, Math.min(800, tracks.length * TIMELINE_CONSTANTS.TRACK_HEIGHT))}px`,
height: `${Math.max(200, Math.min(800, getTotalTracksHeight(tracks)))}px`,
width: `${dynamicTimelineWidth}px`,
}}
onClick={handleTimelineClick}
@ -1064,8 +1068,8 @@ export function Timeline() {
<div
className="absolute left-0 right-0 border-b border-muted/30"
style={{
top: `${index * TIMELINE_CONSTANTS.TRACK_HEIGHT}px`,
height: `${TIMELINE_CONSTANTS.TRACK_HEIGHT}px`,
top: `${getCumulativeHeightBefore(tracks, index)}px`,
height: `${getTrackHeight(track.type)}px`,
}}
onClick={(e) => {
// If clicking empty area (not on a element), deselect all elements
@ -1098,7 +1102,7 @@ export function Timeline() {
className="absolute top-0 w-0.5 bg-red-500 pointer-events-auto z-50 cursor-col"
style={{
left: `${playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
height: `${tracks.length * TIMELINE_CONSTANTS.TRACK_HEIGHT}px`,
height: `${getTotalTracksHeight(tracks)}px`,
}}
onMouseDown={handlePlayheadMouseDown}
/>

123
apps/web/src/lib/timeline-constants.ts
View File

@ -1,48 +1,75 @@
import type { TrackType } from "@/types/timeline";
// Track color definitions
export const TRACK_COLORS = {
media: {
solid: "bg-blue-500",
background: "bg-blue-500/20",
border: "border-blue-500/30",
},
text: {
solid: "bg-purple-500",
background: "bg-purple-500/20",
border: "border-purple-500/30",
},
audio: {
solid: "bg-green-500",
background: "bg-green-500/20",
border: "border-green-500/30",
},
default: {
solid: "bg-gray-500",
background: "bg-gray-500/20",
border: "border-gray-500/30",
},
} as const;
// Utility functions
export function getTrackColors(type: TrackType) {
return TRACK_COLORS[type] || TRACK_COLORS.default;
}
export function getTrackElementClasses(type: TrackType) {
const colors = getTrackColors(type);
return `${colors.background} ${colors.border}`;
}
export function getTrackLabelColor(type: TrackType) {
return getTrackColors(type).solid;
}
// Other timeline constants
export const TIMELINE_CONSTANTS = {
ELEMENT_MIN_WIDTH: 80,
PIXELS_PER_SECOND: 50,
TRACK_HEIGHT: 60,
DEFAULT_TEXT_DURATION: 5,
ZOOM_LEVELS: [0.25, 0.5, 1, 1.5, 2, 3, 4],
} as const;
import type { TrackType } from "@/types/timeline";
// Track color definitions
export const TRACK_COLORS: Record<
TrackType,
{ solid: string; background: string; border: string }
> = {
media: {
solid: "bg-blue-500",
background: "bg-blue-500/20",
border: "border-blue-500/30",
},
text: {
solid: "bg-[#9C4937]",
background: "bg-[#9C4937]",
border: "border-[#9C4937]/40",
},
audio: {
solid: "bg-green-500",
background: "bg-green-500/20",
border: "border-green-500/30",
},
} as const;
// Utility functions
export function getTrackColors(type: TrackType) {
return TRACK_COLORS[type];
}
export function getTrackElementClasses(type: TrackType) {
const colors = getTrackColors(type);
return `${colors.background} ${colors.border}`;
}
export function getTrackLabelColor(type: TrackType) {
return getTrackColors(type).solid;
}
// Track height definitions
export const TRACK_HEIGHTS: Record<TrackType, number> = {
media: 65,
text: 25,
audio: 50,
} as const;
// Utility function for track heights
export function getTrackHeight(type: TrackType): number {
return TRACK_HEIGHTS[type];
}
// Calculate cumulative height up to (but not including) a track index
export function getCumulativeHeightBefore(
tracks: Array<{ type: TrackType }>,
trackIndex: number
): number {
return tracks
.slice(0, trackIndex)
.reduce((sum, track) => sum + getTrackHeight(track.type), 0);
}
// Calculate total height of all tracks
export function getTotalTracksHeight(
tracks: Array<{ type: TrackType }>
): number {
return tracks.reduce((sum, track) => sum + getTrackHeight(track.type), 0);
}
// Other timeline constants
export const TIMELINE_CONSTANTS = {
ELEMENT_MIN_WIDTH: 80,
PIXELS_PER_SECOND: 50,
TRACK_HEIGHT: 60, // Default fallback
DEFAULT_TEXT_DURATION: 5,
ZOOM_LEVELS: [0.25, 0.5, 1, 1.5, 2, 3, 4],
} as const;