diff options
Diffstat (limited to 'apps/web/src/components')
5 files changed, 142 insertions, 115 deletions
diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx deleted file mode 100644 index a0532ab3..00000000 --- a/apps/web/src/components/editor/properties-panel.tsx +++ /dev/null @@ -1,115 +0,0 @@ -"use client"; - -import { useProjectStore } from "@/stores/project-store"; -import { useAspectRatio } from "@/hooks/use-aspect-ratio"; -import { Label } from "../ui/label"; -import { ScrollArea } from "../ui/scroll-area"; -import { useTimelineStore } from "@/stores/timeline-store"; -import { Textarea } from "../ui/textarea"; -import { MediaElement, TextElement } from "@/types/timeline"; -import { useMediaStore } from "@/stores/media-store"; -import { - Select, - SelectContent, - SelectTrigger, - SelectValue, - SelectItem, -} from "../ui/select"; -import { FONT_OPTIONS, type FontFamily } from "@/constants/font-constants"; - -export function PropertiesPanel() { - const { activeProject } = useProjectStore(); - const { getDisplayName, canvasSize } = useAspectRatio(); - const { selectedElements, tracks, updateTextElement } = useTimelineStore(); - const { mediaItems } = useMediaStore(); - - const emptyView = ( - <div className="space-y-4 p-5"> - {/* Media Properties */} - <div className="flex flex-col gap-3"> - <PropertyItem label="Name:" value={activeProject?.name || ""} /> - <PropertyItem label="Aspect ratio:" value={getDisplayName()} /> - <PropertyItem - label="Resolution:" - value={`${canvasSize.width} × ${canvasSize.height}`} - /> - <PropertyItem label="Frame rate:" value="30.00fps" /> - </div> - </div> - ); - - const TextProperties = (element: TextElement, trackId: string) => ( - <div className="space-y-6 p-5"> - <Textarea - placeholder="Name" - defaultValue={element.content} - className="min-h-[4.5rem] resize-none" - onChange={(e) => - updateTextElement(trackId, element.id, { content: e.target.value }) - } - /> - <div className="flex items-center justify-between gap-6"> - <Label className="text-xs">Font</Label> - <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> - {FONT_OPTIONS.map((font) => ( - <SelectItem key={font.value} value={font.value}> - {font.label} - </SelectItem> - ))} - </SelectContent> - </Select> - </div> - </div> - ); - - const MediaProperties = (element: MediaElement) => { - const mediaItem = mediaItems.find((item) => item.id === element.mediaId); - - if (mediaItem?.type === "audio") { - return <div className="space-y-4 p-5">Audio properties</div>; - } - - // video or image - return <div className="space-y-4 p-5">Video/Image properties</div>; - }; - - const ElementProperties = ( - <> - {selectedElements.map(({ trackId, elementId }) => { - const track = tracks.find((t) => t.id === trackId); - const element = track?.elements.find((e) => e.id === elementId); - - if (element?.type === "text") { - return <div key={elementId}>{TextProperties(element, trackId)}</div>; - } - if (element?.type === "media") { - return <div key={elementId}>{MediaProperties(element)}</div>; - } - })} - </> - ); - - return ( - <ScrollArea className="h-full bg-panel rounded-sm"> - {selectedElements.length > 0 ? ElementProperties : emptyView} - </ScrollArea> - ); -} - -function PropertyItem({ label, value }: { label: string; value: string }) { - return ( - <div className="flex justify-between"> - <Label className="text-xs text-muted-foreground">{label}</Label> - <span className="text-xs text-right">{value}</span> - </div> - ); -} diff --git a/apps/web/src/components/editor/properties-panel/audio-properties.tsx b/apps/web/src/components/editor/properties-panel/audio-properties.tsx new file mode 100644 index 00000000..384f0c5e --- /dev/null +++ b/apps/web/src/components/editor/properties-panel/audio-properties.tsx @@ -0,0 +1,5 @@ +import { MediaElement } from "@/types/timeline";
+
+export function AudioProperties({ element }: { element: MediaElement }) {
+ return <div className="space-y-4 p-5">Audio properties</div>;
+}
\ No newline at end of file diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx new file mode 100644 index 00000000..0e6cb8a8 --- /dev/null +++ b/apps/web/src/components/editor/properties-panel/index.tsx @@ -0,0 +1,77 @@ +"use client"; + +import { useProjectStore } from "@/stores/project-store"; +import { useAspectRatio } from "@/hooks/use-aspect-ratio"; +import { Label } from "../../ui/label"; +import { ScrollArea } from "../../ui/scroll-area"; +import { useTimelineStore } from "@/stores/timeline-store"; +import { useMediaStore } from "@/stores/media-store"; +import { AudioProperties } from "./audio-properties"; +import { MediaProperties } from "./media-properties"; +import { TextProperties } from "./text-properties"; + +export function PropertiesPanel() { + const { activeProject } = useProjectStore(); + const { getDisplayName, canvasSize } = useAspectRatio(); + const { selectedElements, tracks } = useTimelineStore(); + const { mediaItems } = useMediaStore(); + + const emptyView = ( + <div className="space-y-4 p-5"> + {/* Media Properties */} + <div className="flex flex-col gap-3"> + <PropertyItem label="Name:" value={activeProject?.name || ""} /> + <PropertyItem label="Aspect ratio:" value={getDisplayName()} /> + <PropertyItem + label="Resolution:" + value={`${canvasSize.width} × ${canvasSize.height}`} + /> + <PropertyItem label="Frame rate:" value="30.00fps" /> + </div> + </div> + ); + + return ( + <ScrollArea className="h-full bg-panel rounded-sm"> + {selectedElements.length > 0 + ? selectedElements.map(({ trackId, elementId }) => { + const track = tracks.find((t) => t.id === trackId); + const element = track?.elements.find((e) => e.id === elementId); + + if (element?.type === "text") { + return ( + <div key={elementId}> + <TextProperties element={element} trackId={trackId} /> + </div> + ); + } + if (element?.type === "media") { + const mediaItem = mediaItems.find( + (item) => item.id === element.mediaId + ); + + if (mediaItem?.type === "audio") { + return <AudioProperties element={element} />; + } + + return ( + <div key={elementId}> + <MediaProperties element={element} /> + </div> + ); + } + return null; + }) + : emptyView} + </ScrollArea> + ); +} + +function PropertyItem({ label, value }: { label: string; value: string }) { + return ( + <div className="flex justify-between"> + <Label className="text-xs text-muted-foreground">{label}</Label> + <span className="text-xs text-right">{value}</span> + </div> + ); +} diff --git a/apps/web/src/components/editor/properties-panel/media-properties.tsx b/apps/web/src/components/editor/properties-panel/media-properties.tsx new file mode 100644 index 00000000..c2c514cf --- /dev/null +++ b/apps/web/src/components/editor/properties-panel/media-properties.tsx @@ -0,0 +1,5 @@ +import { MediaElement } from "@/types/timeline";
+
+export function MediaProperties({ element }: { element: MediaElement }) {
+ return <div className="space-y-4 p-5">Media properties</div>;
+}
diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx new file mode 100644 index 00000000..c28a9ed0 --- /dev/null +++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx @@ -0,0 +1,55 @@ +import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
+import { TextElement } from "@/types/timeline";
+import { useTimelineStore } from "@/stores/timeline-store";
+
+export function TextProperties({
+ element,
+ trackId,
+}: {
+ element: TextElement;
+ trackId: string;
+}) {
+ const { updateTextElement } = useTimelineStore();
+
+ return (
+ <div className="space-y-6 p-5">
+ <Textarea
+ placeholder="Name"
+ defaultValue={element.content}
+ className="min-h-[4.5rem] resize-none"
+ onChange={(e) =>
+ updateTextElement(trackId, element.id, { content: e.target.value })
+ }
+ />
+ <div className="flex items-center justify-between gap-6">
+ <Label className="text-xs">Font</Label>
+ <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>
+ {FONT_OPTIONS.map((font) => (
+ <SelectItem key={font.value} value={font.value}>
+ {font.label}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ </div>
+ </div>
+ );
+}
|