From be1ae20d9089e81cb84a8294be76fe680a24b60f Mon Sep 17 00:00:00 2001
From: Hyteq <DerpsDer.es@gmail.com>
Date: Sun, 20 Jul 2025 11:00:22 +0300
Subject: format

---
 .../components/editor/properties-panel/index.tsx   | 166 ++++++++++-----------
 1 file changed, 83 insertions(+), 83 deletions(-)

(limited to 'apps/web/src/components/editor/properties-panel/index.tsx')

diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 9e28850f..7d2845be 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -10,100 +10,100 @@ import { AudioProperties } from "./audio-properties";
 import { MediaProperties } from "./media-properties";
 import { TextProperties } from "./text-properties";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from "../../ui/select";
 import { FPS_PRESETS } from "@/constants/timeline-constants";
 
 export function PropertiesPanel() {
-  const { activeProject, updateProjectFps } = useProjectStore();
-  const { getDisplayName, canvasSize } = useAspectRatio();
-  const { selectedElements, tracks } = useTimelineStore();
-  const { mediaItems } = useMediaStore();
+	const { activeProject, updateProjectFps } = useProjectStore();
+	const { getDisplayName, canvasSize } = useAspectRatio();
+	const { selectedElements, tracks } = useTimelineStore();
+	const { mediaItems } = useMediaStore();
 
-  const handleFpsChange = (value: string) => {
-    const fps = parseFloat(value);
-    if (!isNaN(fps) && fps > 0) {
-      updateProjectFps(fps);
-    }
-  };
+	const handleFpsChange = (value: string) => {
+		const fps = parseFloat(value);
+		if (!isNaN(fps) && fps > 0) {
+			updateProjectFps(fps);
+		}
+	};
 
-  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}`}
-        />
-        <div className="flex justify-between items-center">
-          <Label className="text-xs text-muted-foreground">Frame rate:</Label>
-          <Select
-            value={(activeProject?.fps || 30).toString()}
-            onValueChange={handleFpsChange}
-          >
-            <SelectTrigger className="w-32 h-6 text-xs">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {FPS_PRESETS.map(({ value, label }) => (
-                <SelectItem key={value} value={value} className="text-xs">
-                  {label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  );
+	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}`}
+				/>
+				<div className="flex justify-between items-center">
+					<Label className="text-xs text-muted-foreground">Frame rate:</Label>
+					<Select
+						value={(activeProject?.fps || 30).toString()}
+						onValueChange={handleFpsChange}
+					>
+						<SelectTrigger className="w-32 h-6 text-xs">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{FPS_PRESETS.map(({ value, label }) => (
+								<SelectItem key={value} value={value} className="text-xs">
+									{label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+			</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);
+	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 (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} />;
-              }
+							if (mediaItem?.type === "audio") {
+								return <AudioProperties element={element} />;
+							}
 
-              return (
-                <div key={elementId}>
-                  <MediaProperties element={element} />
-                </div>
-              );
-            }
-            return null;
-          })
-        : emptyView}
-    </ScrollArea>
-  );
+							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>
-  );
+	return (
+		<div className="flex justify-between">
+			<Label className="text-xs text-muted-foreground">{label}</Label>
+			<span className="text-xs text-right">{value}</span>
+		</div>
+	);
 }
-- 
cgit v1.3.1