Merge branch 'staging' of https://github.com/mazeincoding/AppCut into staging

1 files changed, 92 insertions, 92 deletions

diff --git a/apps/web/src/hooks/use-aspect-ratio.ts b/apps/web/src/hooks/use-aspect-ratio.ts
index 40de8454..e3e85141 100644
--- a/apps/web/src/hooks/use-aspect-ratio.ts
+++ b/apps/web/src/hooks/use-aspect-ratio.ts
@@ -1,92 +1,92 @@
-import { useEditorStore } from "@/stores/editor-store";

-import { useMediaStore, getMediaAspectRatio } from "@/stores/media-store";

-import { useTimelineStore } from "@/stores/timeline-store";

-

-export function useAspectRatio() {

-  const { canvasSize, canvasMode, canvasPresets } = useEditorStore();

-  const { mediaItems } = useMediaStore();

-  const { tracks } = useTimelineStore();

-

-  // Find the current preset based on canvas size

-  const currentPreset = canvasPresets.find(

-    (preset) =>

-      preset.width === canvasSize.width && preset.height === canvasSize.height

-  );

-

-  // Get the original aspect ratio from the first video/image in timeline

-  const getOriginalAspectRatio = (): number => {

-    // Find first video or image in timeline

-    for (const track of tracks) {

-      for (const element of track.elements) {

-        if (element.type === "media") {

-          const mediaItem = mediaItems.find(

-            (item) => item.id === element.mediaId

-          );

-          if (

-            mediaItem &&

-            (mediaItem.type === "video" || mediaItem.type === "image")

-          ) {

-            return getMediaAspectRatio(mediaItem);

-          }

-        }

-      }

-    }

-    return 16 / 9; // Default aspect ratio

-  };

-

-  // Get current aspect ratio

-  const getCurrentAspectRatio = (): number => {

-    return canvasSize.width / canvasSize.height;

-  };

-

-  // Format aspect ratio as a readable string

-  const formatAspectRatio = (aspectRatio: number): string => {

-    // Check if it matches a common aspect ratio

-    const ratios = [

-      { ratio: 16 / 9, label: "16:9" },

-      { ratio: 9 / 16, label: "9:16" },

-      { ratio: 1, label: "1:1" },

-      { ratio: 4 / 3, label: "4:3" },

-      { ratio: 3 / 4, label: "3:4" },

-      { ratio: 21 / 9, label: "21:9" },

-    ];

-

-    for (const { ratio, label } of ratios) {

-      if (Math.abs(aspectRatio - ratio) < 0.01) {

-        return label;

-      }

-    }

-

-    // If not a common ratio, format as decimal

-    return aspectRatio.toFixed(2);

-  };

-

-  // Check if current mode is "Original"

-  const isOriginal = canvasMode === "original";

-

-  // Get display name for current aspect ratio

-  const getDisplayName = (): string => {

-    // If explicitly set to original mode, always show "Original"

-    if (canvasMode === "original") {

-      return "Original";

-    }

-

-    if (currentPreset) {

-      return currentPreset.name;

-    }

-

-    return formatAspectRatio(getCurrentAspectRatio());

-  };

-

-  return {

-    currentPreset,

-    canvasMode,

-    isOriginal,

-    getCurrentAspectRatio,

-    getOriginalAspectRatio,

-    formatAspectRatio,

-    getDisplayName,

-    canvasSize,

-    canvasPresets,

-  };

-}

+import { useEditorStore } from "@/stores/editor-store";
+import { useMediaStore, getMediaAspectRatio } from "@/stores/media-store";
+import { useTimelineStore } from "@/stores/timeline-store";
+
+export function useAspectRatio() {
+  const { canvasSize, canvasMode, canvasPresets } = useEditorStore();
+  const { mediaItems } = useMediaStore();
+  const { tracks } = useTimelineStore();
+
+  // Find the current preset based on canvas size
+  const currentPreset = canvasPresets.find(
+    (preset) =>
+      preset.width === canvasSize.width && preset.height === canvasSize.height
+  );
+
+  // Get the original aspect ratio from the first video/image in timeline
+  const getOriginalAspectRatio = (): number => {
+    // Find first video or image in timeline
+    for (const track of tracks) {
+      for (const element of track.elements) {
+        if (element.type === "media") {
+          const mediaItem = mediaItems.find(
+            (item) => item.id === element.mediaId
+          );
+          if (
+            mediaItem &&
+            (mediaItem.type === "video" || mediaItem.type === "image")
+          ) {
+            return getMediaAspectRatio(mediaItem);
+          }
+        }
+      }
+    }
+    return 16 / 9; // Default aspect ratio
+  };
+
+  // Get current aspect ratio
+  const getCurrentAspectRatio = (): number => {
+    return canvasSize.width / canvasSize.height;
+  };
+
+  // Format aspect ratio as a readable string
+  const formatAspectRatio = (aspectRatio: number): string => {
+    // Check if it matches a common aspect ratio
+    const ratios = [
+      { ratio: 16 / 9, label: "16:9" },
+      { ratio: 9 / 16, label: "9:16" },
+      { ratio: 1, label: "1:1" },
+      { ratio: 4 / 3, label: "4:3" },
+      { ratio: 3 / 4, label: "3:4" },
+      { ratio: 21 / 9, label: "21:9" },
+    ];
+
+    for (const { ratio, label } of ratios) {
+      if (Math.abs(aspectRatio - ratio) < 0.01) {
+        return label;
+      }
+    }
+
+    // If not a common ratio, format as decimal
+    return aspectRatio.toFixed(2);
+  };
+
+  // Check if current mode is "Original"
+  const isOriginal = canvasMode === "original";
+
+  // Get display name for current aspect ratio
+  const getDisplayName = (): string => {
+    // If explicitly set to original mode, always show "Original"
+    if (canvasMode === "original") {
+      return "Original";
+    }
+
+    if (currentPreset) {
+      return currentPreset.name;
+    }
+
+    return formatAspectRatio(getCurrentAspectRatio());
+  };
+
+  return {
+    currentPreset,
+    canvasMode,
+    isOriginal,
+    getCurrentAspectRatio,
+    getOriginalAspectRatio,
+    formatAspectRatio,
+    getDisplayName,
+    canvasSize,
+    canvasPresets,
+  };
+}