feat: add properties for video/image/sticker elements

Author: mazeincoding

apps/web/src/components/editor/panels/properties/index.tsx

@@ -17,7 +17,7 @@ export function PropertiesPanel() {
 	});
 
 	return (
-		<div className="panel bg-background h-full rounded-sm border overflow-hidden">
+		<div className="panel bg-background h-full rounded-sm border border-t-0 overflow-hidden">
 			{selectedElements.length > 0 ? (
 				<ScrollArea className="h-full scrollbar-hidden">
 					{elementsWithTracks.map(({ track, element }) => {
@@ -31,10 +31,14 @@ export function PropertiesPanel() {
 						if (element.type === "audio") {
 							return <AudioProperties key={element.id} _element={element} />;
 						}
-						if (element.type === "video" || element.type === "image") {
+						if (
+							element.type === "video" ||
+							element.type === "image" ||
+							element.type === "sticker"
+						) {
 							return (
 								<div key={element.id}>
-									<VideoProperties _element={element} />
+									<VideoProperties element={element} trackId={track.id} />
 								</div>
 							);
 						}

apps/web/src/components/editor/panels/properties/video-properties.tsx

@@ -1,9 +1,17 @@
-import type { ImageElement, VideoElement } from "@/types/timeline";
+import type { ImageElement, StickerElement, VideoElement } from "@/types/timeline";
+import { BlendingSection, TransformSection } from "./sections";
 
 export function VideoProperties({
-	_element,
+	element,
+	trackId,
 }: {
-	_element: VideoElement | ImageElement;
+	element: VideoElement | ImageElement | StickerElement;
+	trackId: string;
 }) {
-	return <div className="space-y-4 p-5">Video properties</div>;
+	return (
+		<div className="flex h-full flex-col">
+			<TransformSection element={element} trackId={trackId} />
+			<BlendingSection element={element} trackId={trackId} />
+		</div>
+	);
 }