diff options
Diffstat (limited to 'apps/web/src/components')
5 files changed, 22 insertions, 8 deletions
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 09341ee9..c5621fea 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -20,6 +20,7 @@ import { Play, Pause } from "lucide-react"; import { useState, useRef, useEffect } from "react"; import { cn } from "@/lib/utils"; import { formatTimeCode } from "@/lib/time"; +import { FONT_CLASS_MAP } from "@/lib/font-config"; interface ActiveElement { element: TimelineElement; @@ -141,6 +142,9 @@ export function PreviewPanel() { // Text elements if (element.type === "text") { + const fontClassName = + FONT_CLASS_MAP[element.fontFamily as keyof typeof FONT_CLASS_MAP] || ""; + return ( <div key={element.id} @@ -154,9 +158,9 @@ export function PreviewPanel() { }} > <div + className={fontClassName} style={{ fontSize: `${element.fontSize}px`, - fontFamily: element.fontFamily, color: element.color, backgroundColor: element.backgroundColor, textAlign: element.textAlign, @@ -166,6 +170,8 @@ export function PreviewPanel() { padding: "4px 8px", borderRadius: "2px", whiteSpace: "pre-wrap", + // Fallback for system fonts that don't have classes + ...(fontClassName === "" && { fontFamily: element.fontFamily }), }} > {element.content} diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx index e9b651bc..a0532ab3 100644 --- a/apps/web/src/components/editor/properties-panel.tsx +++ b/apps/web/src/components/editor/properties-panel.tsx @@ -15,6 +15,7 @@ import { SelectValue, SelectItem, } from "../ui/select"; +import { FONT_OPTIONS, type FontFamily } from "@/constants/font-constants"; export function PropertiesPanel() { const { activeProject } = useProjectStore(); @@ -49,14 +50,21 @@ export function PropertiesPanel() { /> <div className="flex items-center justify-between gap-6"> <Label className="text-xs">Font</Label> - <Select> + <Select + defaultValue={element.fontFamily} + onValueChange={(value: FontFamily) => + updateTextElement(trackId, element.id, { fontFamily: value }) + } + > <SelectTrigger className="w-full text-xs"> <SelectValue placeholder="Select a font" /> </SelectTrigger> <SelectContent> - <SelectItem value="Arial">Arial</SelectItem> - <SelectItem value="Helvetica">Helvetica</SelectItem> - <SelectItem value="Times New Roman">Times New Roman</SelectItem> + {FONT_OPTIONS.map((font) => ( + <SelectItem key={font.value} value={font.value}> + {font.label} + </SelectItem> + ))} </SelectContent> </Select> </div> diff --git a/apps/web/src/components/editor/timeline-element.tsx b/apps/web/src/components/editor/timeline-element.tsx index c5801652..1cd22c74 100644 --- a/apps/web/src/components/editor/timeline-element.tsx +++ b/apps/web/src/components/editor/timeline-element.tsx @@ -24,7 +24,7 @@ import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize"; import { getTrackElementClasses, TIMELINE_CONSTANTS, -} from "@/lib/timeline-constants"; +} from "@/constants/timeline-constants"; import { DropdownMenu, DropdownMenuContent, diff --git a/apps/web/src/components/editor/timeline-track.tsx b/apps/web/src/components/editor/timeline-track.tsx index 8734d0fb..7e2e93e0 100644 --- a/apps/web/src/components/editor/timeline-track.tsx +++ b/apps/web/src/components/editor/timeline-track.tsx @@ -17,7 +17,7 @@ import type { TimelineElement as TimelineElementType, DragData, } from "@/types/timeline"; -import { TIMELINE_CONSTANTS } from "@/lib/timeline-constants"; +import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; export function TimelineTrackContent({ track, diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index ee56cbe5..abbf5bba 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -50,7 +50,7 @@ import { getCumulativeHeightBefore, getTotalTracksHeight, TIMELINE_CONSTANTS, -} from "@/lib/timeline-constants"; +} from "@/constants/timeline-constants"; export function Timeline() { // Timeline shows all tracks (video, audio, effects) and their elements. |