From b0329f1372f10b887ad056b9220bf49a4e822e0a Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Mon, 4 Aug 2025 20:45:48 +0200 Subject: refactor: move canvas size to be a project-level setting instead of editor-level --- apps/web/src/stores/project-store.ts | 53 ++++++++++++++++++++++++++++-------- 1 file changed, 41 insertions(+), 12 deletions(-) (limited to 'apps/web/src/stores/project-store.ts') diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts index 5c617dff..db6d014a 100644 --- a/apps/web/src/stores/project-store.ts +++ b/apps/web/src/stores/project-store.ts @@ -5,6 +5,22 @@ import { toast } from "sonner"; import { useMediaStore } from "./media-store"; import { useTimelineStore } from "./timeline-store"; import { generateUUID } from "@/lib/utils"; +import { CanvasSize, CanvasMode } from "@/types/editor"; + +const DEFAULT_PROJECT: TProject = { + id: generateUUID(), + name: "Untitled", + thumbnail: "", + createdAt: new Date(), + updatedAt: new Date(), + backgroundColor: "#000000", + backgroundType: "color", + blurIntensity: 8, + bookmarks: [], + fps: 30, + canvasSize: { width: 1920, height: 1080 }, + canvasMode: "preset", +}; interface ProjectStore { activeProject: TProject | null; @@ -28,6 +44,7 @@ interface ProjectStore { options?: { backgroundColor?: string; blurIntensity?: number } ) => Promise; updateProjectFps: (fps: number) => Promise; + updateCanvasSize: (size: CanvasSize, mode: CanvasMode) => Promise; // Bookmark methods toggleBookmark: (time: number) => Promise; @@ -144,18 +161,7 @@ export const useProjectStore = create((set, get) => ({ }, createNewProject: async (name: string) => { - const newProject: TProject = { - id: generateUUID(), - name, - thumbnail: "", - createdAt: new Date(), - updatedAt: new Date(), - backgroundColor: "#000000", - backgroundType: "color", - blurIntensity: 8, - bookmarks: [], - fps: 30, - }; + const newProject: TProject = { ...DEFAULT_PROJECT, name }; set({ activeProject: newProject }); @@ -428,6 +434,29 @@ export const useProjectStore = create((set, get) => ({ } }, + updateCanvasSize: async (size: CanvasSize, mode: CanvasMode) => { + const { activeProject } = get(); + if (!activeProject) return; + + const updatedProject = { + ...activeProject, + canvasSize: size, + canvasMode: mode, + updatedAt: new Date(), + }; + + try { + await storageService.saveProject(updatedProject); + set({ activeProject: updatedProject }); + await get().loadAllProjects(); // Refresh the list + } catch (error) { + console.error("Failed to update canvas size:", error); + toast.error("Failed to update canvas size", { + description: "Please try again", + }); + } + }, + getFilteredAndSortedProjects: (searchQuery: string, sortOption: string) => { const { savedProjects } = get(); -- cgit v1.3.1 From 1bed89d55f8301f94b69bc0859e85a28a0fe16af Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Tue, 5 Aug 2025 06:28:45 +0200 Subject: fix: typescript error from old usage --- apps/web/src/components/editor/preview-panel.tsx | 28 +++++++++++------------- apps/web/src/stores/project-store.ts | 4 +++- 2 files changed, 16 insertions(+), 16 deletions(-) (limited to 'apps/web/src/stores/project-store.ts') diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index f4cd2016..d965d25f 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -8,20 +8,13 @@ import { useEditorStore } from "@/stores/editor-store"; import { VideoPlayer } from "@/components/ui/video-player"; import { AudioPlayer } from "@/components/ui/audio-player"; import { Button } from "@/components/ui/button"; -import { - Play, - Pause, - Expand, - SkipBack, - SkipForward, - LayoutGrid, -} from "lucide-react"; +import { Play, Pause, Expand, SkipBack, SkipForward } from "lucide-react"; import { useState, useRef, useEffect, useCallback } from "react"; import { cn } from "@/lib/utils"; import { formatTimeCode } from "@/lib/time"; import { EditableTimecode } from "@/components/ui/editable-timecode"; import { FONT_CLASS_MAP } from "@/lib/font-config"; -import { useProjectStore } from "@/stores/project-store"; +import { DEFAULT_CANVAS_SIZE, useProjectStore } from "@/stores/project-store"; import { TextElementDragState } from "@/types/editor"; import { Popover, @@ -43,8 +36,8 @@ interface ActiveElement { export function PreviewPanel() { const { tracks, getTotalDuration, updateTextElement } = useTimelineStore(); const { mediaItems } = useMediaStore(); - const { currentTime, toggle, setCurrentTime, isPlaying } = usePlaybackStore(); - const { canvasSize } = useEditorStore(); + const { currentTime, toggle, setCurrentTime } = usePlaybackStore(); + const { activeProject } = useProjectStore(); const previewRef = useRef(null); const containerRef = useRef(null); const [previewDimensions, setPreviewDimensions] = useState({ @@ -52,7 +45,8 @@ export function PreviewPanel() { height: 0, }); const [isExpanded, setIsExpanded] = useState(false); - const { activeProject } = useProjectStore(); + + const canvasSize = activeProject?.canvasSize || DEFAULT_CANVAS_SIZE; const [dragState, setDragState] = useState({ isDragging: false, elementId: null, @@ -867,7 +861,9 @@ function PreviewToolbar({ toggleLayoutGuide(layoutGuide.platform || "tiktok")} + onCheckedChange={() => + toggleLayoutGuide(layoutGuide.platform || "tiktok") + } /> @@ -875,8 +871,10 @@ function PreviewToolbar({
toggleLayoutGuide(platform as PlatformLayout)} + checked={layoutGuide.platform === platform} + onCheckedChange={() => + toggleLayoutGuide(platform as PlatformLayout) + } />
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts index db6d014a..259533bf 100644 --- a/apps/web/src/stores/project-store.ts +++ b/apps/web/src/stores/project-store.ts @@ -7,6 +7,8 @@ import { useTimelineStore } from "./timeline-store"; import { generateUUID } from "@/lib/utils"; import { CanvasSize, CanvasMode } from "@/types/editor"; +export const DEFAULT_CANVAS_SIZE: CanvasSize = { width: 1920, height: 1080 }; + const DEFAULT_PROJECT: TProject = { id: generateUUID(), name: "Untitled", @@ -18,7 +20,7 @@ const DEFAULT_PROJECT: TProject = { blurIntensity: 8, bookmarks: [], fps: 30, - canvasSize: { width: 1920, height: 1080 }, + canvasSize: DEFAULT_CANVAS_SIZE, canvasMode: "preset", }; -- cgit v1.3.1