From 5931ddb77aac23ffe1b82d9d7c03afde3e671109 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Thu, 24 Jul 2025 14:41:34 -0700 Subject: feat: add ultracite (#452) * Init ultracite * Update scripts and biome.jsonc * Update biome.jsonc * Update biome.jsonc * Update biome.jsonc * Run format --- apps/web/src/stores/editor-store.ts | 209 ++++++++++++++++++------------------ 1 file changed, 104 insertions(+), 105 deletions(-) (limited to 'apps/web/src/stores/editor-store.ts') diff --git a/apps/web/src/stores/editor-store.ts b/apps/web/src/stores/editor-store.ts index c24929a2..aac7077e 100644 --- a/apps/web/src/stores/editor-store.ts +++ b/apps/web/src/stores/editor-store.ts @@ -1,105 +1,104 @@ -import { create } from "zustand"; -import { CanvasSize, CanvasPreset } from "@/types/editor"; - -type CanvasMode = "preset" | "original" | "custom"; - -interface EditorState { - // Loading states - isInitializing: boolean; - isPanelsReady: boolean; - - // Canvas/Project settings - canvasSize: CanvasSize; - canvasMode: CanvasMode; - canvasPresets: CanvasPreset[]; - - // Actions - setInitializing: (loading: boolean) => void; - setPanelsReady: (ready: boolean) => void; - initializeApp: () => Promise; - setCanvasSize: (size: CanvasSize) => void; - setCanvasSizeToOriginal: (aspectRatio: number) => void; - setCanvasSizeFromAspectRatio: (aspectRatio: number) => void; -} - -const DEFAULT_CANVAS_PRESETS: CanvasPreset[] = [ - { name: "16:9", width: 1920, height: 1080 }, - { name: "9:16", width: 1080, height: 1920 }, - { name: "1:1", width: 1080, height: 1080 }, - { name: "4:3", width: 1440, height: 1080 }, -]; - -// Helper function to find the best matching canvas preset for an aspect ratio -const findBestCanvasPreset = (aspectRatio: number): CanvasSize => { - // Calculate aspect ratio for each preset and find the closest match - let bestMatch = DEFAULT_CANVAS_PRESETS[0]; // Default to 16:9 HD - let smallestDifference = Math.abs( - aspectRatio - bestMatch.width / bestMatch.height - ); - - for (const preset of DEFAULT_CANVAS_PRESETS) { - const presetAspectRatio = preset.width / preset.height; - const difference = Math.abs(aspectRatio - presetAspectRatio); - - if (difference < smallestDifference) { - smallestDifference = difference; - bestMatch = preset; - } - } - - // If the difference is still significant (> 0.1), create a custom size - // based on the media aspect ratio with a reasonable resolution - const bestAspectRatio = bestMatch.width / bestMatch.height; - if (Math.abs(aspectRatio - bestAspectRatio) > 0.1) { - // Create custom dimensions based on the aspect ratio - if (aspectRatio > 1) { - // Landscape - use 1920 width - return { width: 1920, height: Math.round(1920 / aspectRatio) }; - } else { - // Portrait or square - use 1080 height - return { width: Math.round(1080 * aspectRatio), height: 1080 }; - } - } - - return { width: bestMatch.width, height: bestMatch.height }; -}; - -export const useEditorStore = create((set, get) => ({ - // Initial states - isInitializing: true, - isPanelsReady: false, - canvasSize: { width: 1920, height: 1080 }, // Default 16:9 HD - canvasMode: "preset" as CanvasMode, - canvasPresets: DEFAULT_CANVAS_PRESETS, - - // Actions - setInitializing: (loading) => { - set({ isInitializing: loading }); - }, - - setPanelsReady: (ready) => { - set({ isPanelsReady: ready }); - }, - - initializeApp: async () => { - console.log("Initializing video editor..."); - set({ isInitializing: true, isPanelsReady: false }); - - set({ isPanelsReady: true, isInitializing: false }); - console.log("Video editor ready"); - }, - - setCanvasSize: (size) => { - set({ canvasSize: size, canvasMode: "preset" }); - }, - - setCanvasSizeToOriginal: (aspectRatio) => { - const newCanvasSize = findBestCanvasPreset(aspectRatio); - set({ canvasSize: newCanvasSize, canvasMode: "original" }); - }, - - setCanvasSizeFromAspectRatio: (aspectRatio) => { - const newCanvasSize = findBestCanvasPreset(aspectRatio); - set({ canvasSize: newCanvasSize, canvasMode: "custom" }); - }, -})); +import { create } from "zustand"; +import { CanvasSize, CanvasPreset } from "@/types/editor"; + +type CanvasMode = "preset" | "original" | "custom"; + +interface EditorState { + // Loading states + isInitializing: boolean; + isPanelsReady: boolean; + + // Canvas/Project settings + canvasSize: CanvasSize; + canvasMode: CanvasMode; + canvasPresets: CanvasPreset[]; + + // Actions + setInitializing: (loading: boolean) => void; + setPanelsReady: (ready: boolean) => void; + initializeApp: () => Promise; + setCanvasSize: (size: CanvasSize) => void; + setCanvasSizeToOriginal: (aspectRatio: number) => void; + setCanvasSizeFromAspectRatio: (aspectRatio: number) => void; +} + +const DEFAULT_CANVAS_PRESETS: CanvasPreset[] = [ + { name: "16:9", width: 1920, height: 1080 }, + { name: "9:16", width: 1080, height: 1920 }, + { name: "1:1", width: 1080, height: 1080 }, + { name: "4:3", width: 1440, height: 1080 }, +]; + +// Helper function to find the best matching canvas preset for an aspect ratio +const findBestCanvasPreset = (aspectRatio: number): CanvasSize => { + // Calculate aspect ratio for each preset and find the closest match + let bestMatch = DEFAULT_CANVAS_PRESETS[0]; // Default to 16:9 HD + let smallestDifference = Math.abs( + aspectRatio - bestMatch.width / bestMatch.height + ); + + for (const preset of DEFAULT_CANVAS_PRESETS) { + const presetAspectRatio = preset.width / preset.height; + const difference = Math.abs(aspectRatio - presetAspectRatio); + + if (difference < smallestDifference) { + smallestDifference = difference; + bestMatch = preset; + } + } + + // If the difference is still significant (> 0.1), create a custom size + // based on the media aspect ratio with a reasonable resolution + const bestAspectRatio = bestMatch.width / bestMatch.height; + if (Math.abs(aspectRatio - bestAspectRatio) > 0.1) { + // Create custom dimensions based on the aspect ratio + if (aspectRatio > 1) { + // Landscape - use 1920 width + return { width: 1920, height: Math.round(1920 / aspectRatio) }; + } + // Portrait or square - use 1080 height + return { width: Math.round(1080 * aspectRatio), height: 1080 }; + } + + return { width: bestMatch.width, height: bestMatch.height }; +}; + +export const useEditorStore = create((set, get) => ({ + // Initial states + isInitializing: true, + isPanelsReady: false, + canvasSize: { width: 1920, height: 1080 }, // Default 16:9 HD + canvasMode: "preset" as CanvasMode, + canvasPresets: DEFAULT_CANVAS_PRESETS, + + // Actions + setInitializing: (loading) => { + set({ isInitializing: loading }); + }, + + setPanelsReady: (ready) => { + set({ isPanelsReady: ready }); + }, + + initializeApp: async () => { + console.log("Initializing video editor..."); + set({ isInitializing: true, isPanelsReady: false }); + + set({ isPanelsReady: true, isInitializing: false }); + console.log("Video editor ready"); + }, + + setCanvasSize: (size) => { + set({ canvasSize: size, canvasMode: "preset" }); + }, + + setCanvasSizeToOriginal: (aspectRatio) => { + const newCanvasSize = findBestCanvasPreset(aspectRatio); + set({ canvasSize: newCanvasSize, canvasMode: "original" }); + }, + + setCanvasSizeFromAspectRatio: (aspectRatio) => { + const newCanvasSize = findBestCanvasPreset(aspectRatio); + set({ canvasSize: newCanvasSize, canvasMode: "custom" }); + }, +})); -- cgit v1.3.1