From e3ecf4855a9dea317f4823bf1840703de7ec3f67 Mon Sep 17 00:00:00 2001 From: Brandon McConnell Date: Wed, 30 Jul 2025 15:05:03 -0400 Subject: [PATCH] =?UTF-8?q?Correct=20`blur-sm`=20=E2=9E=9E=20`blur`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/src/components/background-settings.tsx | 8 ++++---- apps/web/src/components/editor/preview-panel.tsx | 12 ++++++------ .../src/components/ui/image-timeline-treatment.tsx | 4 ++-- apps/web/src/stores/project-store.ts | 4 ++-- apps/web/src/types/editor.ts | 2 +- apps/web/src/types/project.ts | 2 +- 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx index 2a5a3ac0..7e27e574 100644 --- a/apps/web/src/components/background-settings.tsx +++ b/apps/web/src/components/background-settings.tsx @@ -7,7 +7,7 @@ import { colors } from "@/data/colors"; import { useProjectStore } from "@/stores/project-store"; import { PipetteIcon } from "lucide-react"; -type BackgroundTab = "color" | "blur-sm"; +type BackgroundTab = "color" | "blur"; export function BackgroundSettings() { const { activeProject, updateBackgroundType } = useProjectStore(); @@ -20,7 +20,7 @@ export function BackgroundSettings() { }; const handleBlurSelect = (blurIntensity: number) => { - updateBackgroundType("blur-sm", { blurIntensity }); + updateBackgroundType("blur", { blurIntensity }); }; const tabs = [ @@ -30,7 +30,7 @@ export function BackgroundSettings() { }, { label: "Blur", - value: "blur-sm", + value: "blur", }, ]; @@ -60,7 +60,7 @@ export function BackgroundSettings() { activeProject?.backgroundColor || "#000000", }); } else { - updateBackgroundType("blur-sm", { + updateBackgroundType("blur", { blurIntensity: activeProject?.blurIntensity || 8, }); } diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 2c6cbf96..76eedb4f 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -211,7 +211,7 @@ export function PreviewPanel() { setDragState({ isDragging: true, elementId: element.id, - trackId: trackId, + trackId, startX: e.clientX, startY: e.clientY, initialElementX: element.x, @@ -274,7 +274,7 @@ export function PreviewPanel() { const renderBlurBackground = () => { if ( !activeProject?.backgroundType || - activeProject.backgroundType !== "blur-sm" || + activeProject.backgroundType !== "blur" || blurBackgroundElements.length === 0 ) { return null; @@ -474,7 +474,7 @@ export function PreviewPanel() { width: previewDimensions.width, height: previewDimensions.height, backgroundColor: - activeProject?.backgroundType === "blur-sm" + activeProject?.backgroundType === "blur" ? "transparent" : activeProject?.backgroundColor || "#000000", }} @@ -489,7 +489,7 @@ export function PreviewPanel() { renderElement(elementData, index) ) )} - {activeProject?.backgroundType === "blur-sm" && + {activeProject?.backgroundType === "blur" && blurBackgroundElements.length === 0 && activeElements.length > 0 && (
@@ -730,7 +730,7 @@ function FullscreenPreview({ width: previewDimensions.width, height: previewDimensions.height, backgroundColor: - activeProject?.backgroundType === "blur-sm" + activeProject?.backgroundType === "blur" ? "#1a1a1a" : activeProject?.backgroundColor || "#1a1a1a", }} @@ -745,7 +745,7 @@ function FullscreenPreview({ renderElement(elementData, index) ) )} - {activeProject?.backgroundType === "blur-sm" && + {activeProject?.backgroundType === "blur" && blurBackgroundElements.length === 0 && activeElements.length > 0 && (
diff --git a/apps/web/src/components/ui/image-timeline-treatment.tsx b/apps/web/src/components/ui/image-timeline-treatment.tsx index eb0d0e9f..7a64be18 100644 --- a/apps/web/src/components/ui/image-timeline-treatment.tsx +++ b/apps/web/src/components/ui/image-timeline-treatment.tsx @@ -18,7 +18,7 @@ export function ImageTimelineTreatment({ alt, targetAspectRatio = 16 / 9, className, - backgroundType = "blur-sm", + backgroundType = "blur", backgroundColor = "#000000", }: ImageTimelineTreatmentProps) { const [imageLoaded, setImageLoaded] = useState(false); @@ -50,7 +50,7 @@ export function ImageTimelineTreatment({ {/* Background Layer */} {needsAspectRatioTreatment && imageLoaded && ( <> - {backgroundType === "blur-sm" && ( + {backgroundType === "blur" && (
Promise; updateProjectBackground: (backgroundColor: string) => Promise; updateBackgroundType: ( - type: "color" | "blur-sm", + type: "color" | "blur", options?: { backgroundColor?: string; blurIntensity?: number } ) => Promise; updateProjectFps: (fps: number) => Promise; @@ -273,7 +273,7 @@ export const useProjectStore = create((set, get) => ({ }, updateBackgroundType: async ( - type: "color" | "blur-sm", + type: "color" | "blur", options?: { backgroundColor?: string; blurIntensity?: number } ) => { const { activeProject } = get(); diff --git a/apps/web/src/types/editor.ts b/apps/web/src/types/editor.ts index 12954df0..12b474fd 100644 --- a/apps/web/src/types/editor.ts +++ b/apps/web/src/types/editor.ts @@ -1,4 +1,4 @@ -export type BackgroundType = "blur-sm" | "mirror" | "color"; +export type BackgroundType = "blur" | "mirror" | "color"; export interface CanvasSize { width: number; diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts index 623fd160..58d37b03 100644 --- a/apps/web/src/types/project.ts +++ b/apps/web/src/types/project.ts @@ -6,7 +6,7 @@ export interface TProject { updatedAt: Date; mediaItems?: string[]; backgroundColor?: string; - backgroundType?: "color" | "blur-sm"; + backgroundType?: "color" | "blur"; blurIntensity?: number; // in pixels (4, 8, 18) fps?: number; }