summaryrefslogtreecommitdiff
path: root/apps/web
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web')
-rw-r--r--apps/web/src/app/editor/[project_id]/page.tsx10
-rw-r--r--apps/web/src/components/editor/timeline-element.tsx19
-rw-r--r--apps/web/src/components/editor/timeline.tsx20
-rw-r--r--apps/web/src/lib/timeline-constants.ts123
4 files changed, 103 insertions, 69 deletions
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 011c0c60..7de30ded 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -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>
diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx
index 0d258607..65126379 100644
--- a/apps/web/src/components/editor/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline-element.tsx
@@ -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>
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 6a94ed60..f7208224 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -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}
/>
diff --git a/apps/web/src/lib/timeline-constants.ts b/apps/web/src/lib/timeline-constants.ts
index fbbfe081..dd93cfdf 100644
--- a/apps/web/src/lib/timeline-constants.ts
+++ b/apps/web/src/lib/timeline-constants.ts
@@ -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;
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-17 14:15:20 +0000