diff --git a/apps/web/src/components/providers/migrators/scenes-migrator.tsx b/apps/web/src/components/providers/migrators/scenes-migrator.tsx index 3a21faa4..521e24af 100644 --- a/apps/web/src/components/providers/migrators/scenes-migrator.tsx +++ b/apps/web/src/components/providers/migrators/scenes-migrator.tsx @@ -1,171 +1,187 @@ -"use client"; - -import { useEffect, useState } from "react"; -import { usePathname } from "next/navigation"; -import { storageService } from "@/lib/storage/storage-service"; -import { TProject, Scene } from "@/types/project"; -import { generateUUID } from "@/lib/utils"; -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, -} from "@/components/ui/dialog"; -import { Progress } from "@/components/ui/progress"; -import { createMainScene } from "@/stores/project-store"; - -interface MigrationProgress { - current: number; - total: number; - currentProjectName: string; -} - -export function ScenesMigrator({ children }: { children: React.ReactNode }) { - const pathname = usePathname(); - const [isMigrating, setIsMigrating] = useState(false); - const [progress, setProgress] = useState({ - current: 0, - total: 0, - currentProjectName: "", - }); - - const shouldCheckMigration = - pathname.startsWith("/editor") || pathname.startsWith("/projects"); - - useEffect(() => { - if (!shouldCheckMigration) return; - - checkAndMigrateProjects(); - }, [shouldCheckMigration]); - - const checkAndMigrateProjects = async () => { - try { - const projects = await storageService.loadAllProjects(); - const legacyProjects = projects.filter( - (project) => !project.scenes || project.scenes.length === 0 - ); - - if (legacyProjects.length === 0) { - // No migration needed - return; - } - - setIsMigrating(true); - setProgress({ - current: 0, - total: legacyProjects.length, - currentProjectName: "", - }); - - // Migrate each legacy project - for (let i = 0; i < legacyProjects.length; i++) { - const project = legacyProjects[i]; - - setProgress({ - current: i, - total: legacyProjects.length, - currentProjectName: project.name, - }); - - await migrateLegacyProject(project); - } - - setProgress({ - current: legacyProjects.length, - total: legacyProjects.length, - currentProjectName: "Complete!", - }); - - setTimeout(() => { - setIsMigrating(false); - }, 1000); - } catch (error) { - console.error("Migration failed:", error); - setIsMigrating(false); - } - }; - - const migrateLegacyProject = async (project: TProject) => { - try { - const mainScene = createMainScene(); - - const migratedProject: TProject = { - ...project, - scenes: [mainScene], - currentSceneId: mainScene.id, - updatedAt: new Date(), - }; - - // Load existing timeline data (legacy format) - const legacyTimeline = await storageService.loadTimeline({ - projectId: project.id, - }); - - await storageService.saveProject({ project: migratedProject }); - - // If timeline data, migrate it to the main scene - if (legacyTimeline && legacyTimeline.length > 0) { - await storageService.saveTimeline({ - projectId: project.id, - tracks: legacyTimeline, - sceneId: mainScene.id, - }); - } - - // Clean up legacy timeline storage - await storageService.deleteProjectTimeline({ projectId: project.id }); - } catch (error) { - console.error(`Failed to migrate project ${project.name}:`, error); - throw error; - } - }; - - if (!shouldCheckMigration) { - return children; - } - - if (isMigrating) { - const progressPercent = - progress.total > 0 ? (progress.current / progress.total) * 100 : 0; - - return ( - - e.preventDefault()} - > - - Updating Projects - - We're adding scene support to your projects. This will only take a - moment. - - - -
-
-
- Progress - - {progress.current} of {progress.total} - -
- -
- - {progress.currentProjectName && ( -
- {progress.current < progress.total - ? `Updating: ${progress.currentProjectName}` - : progress.currentProjectName} -
- )} -
- - - ); - } - - return children; -} +"use client"; + +import { useEffect, useState } from "react"; +import { usePathname } from "next/navigation"; +import { storageService } from "@/lib/storage/storage-service"; +import { TProject, Scene } from "@/types/project"; +import { generateUUID } from "@/lib/utils"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { Progress } from "@/components/ui/progress"; +import { createMainScene } from "@/stores/project-store"; + +interface MigrationProgress { + current: number; + total: number; + currentProjectName: string; +} + +export function ScenesMigrator({ children }: { children: React.ReactNode }) { + const pathname = usePathname(); + const [isMigrating, setIsMigrating] = useState(false); + const [progress, setProgress] = useState({ + current: 0, + total: 0, + currentProjectName: "", + }); + + const shouldCheckMigration = + pathname.startsWith("/editor") || pathname.startsWith("/projects"); + + useEffect(() => { + if (!shouldCheckMigration) return; + + checkAndMigrateProjects(); + }, [shouldCheckMigration]); + + const checkAndMigrateProjects = async () => { + try { + const projects = await storageService.loadAllProjects(); + const legacyProjects = projects.filter( + (project) => !project.scenes || project.scenes.length === 0 + ); + + if (legacyProjects.length === 0) { + // No migration needed + return; + } + + setIsMigrating(true); + setProgress({ + current: 0, + total: legacyProjects.length, + currentProjectName: "", + }); + + // Migrate each legacy project + for (let i = 0; i < legacyProjects.length; i++) { + const project = legacyProjects[i]; + + setProgress({ + current: i, + total: legacyProjects.length, + currentProjectName: project.name, + }); + + await migrateLegacyProject(project); + } + + setProgress({ + current: legacyProjects.length, + total: legacyProjects.length, + currentProjectName: "Complete!", + }); + + setTimeout(() => { + setIsMigrating(false); + }, 1000); + } catch (error) { + console.error("Migration failed:", error); + setIsMigrating(false); + } + }; + + const migrateLegacyProject = async (project: TProject) => { + try { + const mainScene: Scene = { + id: generateUUID(), + name: "Main Scene", + isMain: true, + isBackground: false, + createdAt: new Date(), + updatedAt: new Date(), + }; + + const backgroundScene: Scene = { + id: generateUUID(), + name: "Background", + isMain: false, + isBackground: true, + createdAt: new Date(), + updatedAt: new Date(), + }; + + const migratedProject: TProject = { + ...project, + scenes: [mainScene, backgroundScene], + currentSceneId: mainScene.id, + updatedAt: new Date(), + }; + + // Load existing timeline data (legacy format) + const legacyTimeline = await storageService.loadTimeline({ + projectId: project.id, + }); + + await storageService.saveProject({ project: migratedProject }); + + // If timeline data, migrate it to the main scene + if (legacyTimeline && legacyTimeline.length > 0) { + await storageService.saveTimeline({ + projectId: project.id, + tracks: legacyTimeline, + sceneId: mainScene.id, + }); + } + + // Clean up legacy timeline storage + await storageService.deleteProjectTimeline({ projectId: project.id }); + } catch (error) { + console.error(`Failed to migrate project ${project.name}:`, error); + throw error; + } + }; + + if (!shouldCheckMigration) { + return children; + } + + if (isMigrating) { + const progressPercent = + progress.total > 0 ? (progress.current / progress.total) * 100 : 0; + + return ( + + e.preventDefault()} + > + + Updating Projects + + We're adding scene support to your projects. This will only take a + moment. + + + +
+
+
+ Progress + + {progress.current} of {progress.total} + +
+ +
+ + {progress.currentProjectName && ( +
+ {progress.current < progress.total + ? `Updating: ${progress.currentProjectName}` + : progress.currentProjectName} +
+ )} +
+ + + ); + } + + return children; +} diff --git a/apps/web/src/lib/storage/storage-service.ts b/apps/web/src/lib/storage/storage-service.ts index 80f10d3d..112d09b6 100644 --- a/apps/web/src/lib/storage/storage-service.ts +++ b/apps/web/src/lib/storage/storage-service.ts @@ -78,6 +78,7 @@ class StorageService { id: scene.id, name: scene.name, isMain: scene.isMain, + isBackground: scene.isBackground, createdAt: scene.createdAt.toISOString(), updatedAt: scene.updatedAt.toISOString(), })); @@ -113,12 +114,13 @@ class StorageService { id: scene.id, name: scene.name, isMain: scene.isMain, + isBackground: scene.isBackground || false, // Default for legacy scenes createdAt: new Date(scene.createdAt), updatedAt: new Date(scene.updatedAt), })) || []; // Convert back to TProject format - return { + const project = { id: serializedProject.id, name: serializedProject.name, thumbnail: serializedProject.thumbnail, @@ -134,6 +136,7 @@ class StorageService { canvasSize: serializedProject.canvasSize, canvasMode: serializedProject.canvasMode, }; + return project; } async loadAllProjects(): Promise { diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts index 70c11b28..0c67be9f 100644 --- a/apps/web/src/stores/project-store.ts +++ b/apps/web/src/stores/project-store.ts @@ -4,7 +4,7 @@ import { storageService } from "@/lib/storage/storage-service"; import { toast } from "sonner"; import { useMediaStore } from "./media-store"; import { useTimelineStore } from "./timeline-store"; -import { useSceneStore } from "./scene-store"; +import { createBackgroundScene, useSceneStore } from "./scene-store"; import { generateUUID } from "@/lib/utils"; import { CanvasSize, CanvasMode } from "@/types/editor"; @@ -16,6 +16,7 @@ export function createMainScene(): Scene { id: generateUUID(), name: "Main scene", isMain: true, + isBackground: false, createdAt: new Date(), updatedAt: new Date(), }; @@ -23,13 +24,15 @@ export function createMainScene(): Scene { const createDefaultProject = (name: string): TProject => { const mainScene = createMainScene(); + const backgroundScene = createBackgroundScene(); + return { id: generateUUID(), name, thumbnail: "", createdAt: new Date(), updatedAt: new Date(), - scenes: [mainScene], + scenes: [mainScene, backgroundScene], currentSceneId: mainScene.id, backgroundColor: "#000000", backgroundType: "color", @@ -226,15 +229,19 @@ export const useProjectStore = create((set, get) => ({ if (project) { set({ activeProject: project }); + let currentScene = null; if (project.scenes && project.scenes.length > 0) { sceneStore.initializeScenes({ scenes: project.scenes, currentSceneId: project.currentSceneId, }); + // Get current scene directly from project data (don't rely on store state) + currentScene = + project.scenes.find((s) => s.id === project.currentSceneId) || + project.scenes.find((s) => s.isMain) || + project.scenes[0]; } - const currentScene = sceneStore.currentScene; - await Promise.all([ mediaStore.loadProjectMedia(id), timelineStore.loadProjectTimeline({ diff --git a/apps/web/src/stores/scene-store.ts b/apps/web/src/stores/scene-store.ts index e16185e9..1b789427 100644 --- a/apps/web/src/stores/scene-store.ts +++ b/apps/web/src/stores/scene-store.ts @@ -1,219 +1,267 @@ -import { create } from "zustand"; -import { Scene } from "@/types/project"; -import { useProjectStore } from "./project-store"; -import { useTimelineStore } from "./timeline-store"; -import { storageService } from "@/lib/storage/storage-service"; -import { generateUUID } from "@/lib/utils"; - -export function getMainScene({ scenes }: { scenes: Scene[] }): Scene | null { - return scenes.find((scene) => scene.isMain) || null; -} - -interface SceneStore { - // Current scene state - currentScene: Scene | null; - scenes: Scene[]; - - // Scene management - createScene: ({ - name, - isMain, - }: { - name: string; - isMain: boolean; - }) => Promise; - renameScene: ({ - sceneId, - name, - }: { - sceneId: string; - name: string; - }) => Promise; - switchToScene: ({ sceneId }: { sceneId: string }) => Promise; - - // Scene utilities - getMainScene: () => Scene | null; - getCurrentScene: () => Scene | null; - - // Project integration - loadProjectScenes: ({ projectId }: { projectId: string }) => Promise; - initializeScenes: ({ - scenes, - currentSceneId, - }: { - scenes: Scene[]; - currentSceneId?: string; - }) => void; - clearScenes: () => void; -} - -export const useSceneStore = create((set, get) => ({ - currentScene: null, - scenes: [], - - createScene: async ({ name, isMain = false }) => { - const { scenes } = get(); - - const newScene = { - id: generateUUID(), - name, - isMain, - createdAt: new Date(), - updatedAt: new Date(), - }; - const updatedScenes = [...scenes, newScene]; - - const projectStore = useProjectStore.getState(); - const { activeProject } = projectStore; - - if (!activeProject) { - throw new Error("No active project"); - } - - const updatedProject = { - ...activeProject, - scenes: updatedScenes, - updatedAt: new Date(), - }; - - try { - await storageService.saveProject({ project: updatedProject }); - useProjectStore.setState({ activeProject: updatedProject }); - set({ scenes: updatedScenes }); - return newScene.id; - } catch (error) { - console.error("Failed to create scene:", error); - throw error; - } - }, - - renameScene: async ({ sceneId, name }: { sceneId: string; name: string }) => { - const { scenes } = get(); - const updatedScenes = scenes.map((scene) => - scene.id === sceneId ? { ...scene, name, updatedAt: new Date() } : scene - ); - - // Update project - const projectStore = useProjectStore.getState(); - const { activeProject } = projectStore; - - if (!activeProject) { - throw new Error("No active project"); - } - - const updatedProject = { - ...activeProject, - scenes: updatedScenes, - updatedAt: new Date(), - }; - - try { - await storageService.saveProject({ project: updatedProject }); - useProjectStore.setState({ activeProject: updatedProject }); - set({ - scenes: updatedScenes, - currentScene: updatedScenes.find((s) => s.id === sceneId) || null, - }); - } catch (error) { - console.error("Failed to rename scene:", error); - throw error; - } - }, - - switchToScene: async ({ sceneId }: { sceneId: string }) => { - const { scenes } = get(); - const targetScene = scenes.find((s) => s.id === sceneId); - - if (!targetScene) { - throw new Error("Scene not found"); - } - - const timelineStore = useTimelineStore.getState(); - const projectStore = useProjectStore.getState(); - const { activeProject } = projectStore; - const { currentScene } = get(); - - if (activeProject && currentScene) { - await timelineStore.saveProjectTimeline({ - projectId: activeProject.id, - sceneId: currentScene.id, - }); - } - - if (activeProject) { - await timelineStore.loadProjectTimeline({ - projectId: activeProject.id, - sceneId, - }); - - const updatedProject = { - ...activeProject, - currentSceneId: sceneId, - updatedAt: new Date(), - }; - - await storageService.saveProject({ project: updatedProject }); - useProjectStore.setState({ activeProject: updatedProject }); - } - - set({ currentScene: targetScene }); - }, - - getMainScene: () => { - const { scenes } = get(); - return scenes.find((scene) => scene.isMain) || null; - }, - - getCurrentScene: () => { - return get().currentScene; - }, - - loadProjectScenes: async ({ projectId }: { projectId: string }) => { - try { - const project = await storageService.loadProject({ id: projectId }); - if (project?.scenes) { - const ensuredScenes = project.scenes.map((scene) => ({ - ...scene, - isMain: scene.isMain || false, - })); - const currentScene = - ensuredScenes.find((s) => s.id === project.currentSceneId) || - ensuredScenes[0]; - - set({ - scenes: ensuredScenes, - currentScene, - }); - } - } catch (error) { - console.error("Failed to load project scenes:", error); - set({ scenes: [], currentScene: null }); - } - }, - - initializeScenes: ({ - scenes, - currentSceneId, - }: { - scenes: Scene[]; - currentSceneId?: string; - }) => { - const currentScene = currentSceneId - ? scenes.find((s) => s.id === currentSceneId) - : null; - - const fallbackScene = getMainScene({ scenes }); - - set({ - scenes, - currentScene: currentScene || fallbackScene, - }); - }, - - clearScenes: () => { - set({ - scenes: [], - currentScene: null, - }); - }, -})); +import { create } from "zustand"; +import { Scene } from "@/types/project"; +import { useProjectStore } from "./project-store"; +import { useTimelineStore } from "./timeline-store"; +import { storageService } from "@/lib/storage/storage-service"; +import { generateUUID } from "@/lib/utils"; + +export function getMainScene({ scenes }: { scenes: Scene[] }): Scene | null { + return scenes.find((scene) => scene.isMain) || null; +} + +export function getBackgroundScene({ + scenes, +}: { + scenes: Scene[]; +}): Scene | null { + return scenes.find((scene) => scene.isBackground) || null; +} + +export function createBackgroundScene(): Scene { + return { + id: generateUUID(), + name: "Background", + isMain: false, + isBackground: true, + createdAt: new Date(), + updatedAt: new Date(), + }; +} + +function ensureBackgroundScene({ scenes }: { scenes: Scene[] }): Scene[] { + const hasBackground = scenes.some((scene) => scene.isBackground); + if (!hasBackground) { + return [...scenes, createBackgroundScene()]; + } + return scenes; +} + +interface SceneStore { + // Current scene state + currentScene: Scene | null; + scenes: Scene[]; + + // Scene management + createScene: ({ + name, + isMain, + }: { + name: string; + isMain: boolean; + }) => Promise; + renameScene: ({ + sceneId, + name, + }: { + sceneId: string; + name: string; + }) => Promise; + switchToScene: ({ sceneId }: { sceneId: string }) => Promise; + + // Scene utilities + getMainScene: () => Scene | null; + getCurrentScene: () => Scene | null; + + // Project integration + loadProjectScenes: ({ projectId }: { projectId: string }) => Promise; + initializeScenes: ({ + scenes, + currentSceneId, + }: { + scenes: Scene[]; + currentSceneId?: string; + }) => void; + clearScenes: () => void; +} + +export const useSceneStore = create((set, get) => ({ + currentScene: null, + scenes: [], + + createScene: async ({ name, isMain = false }) => { + const { scenes } = get(); + + const newScene = { + id: generateUUID(), + name, + isMain, + isBackground: false, + createdAt: new Date(), + updatedAt: new Date(), + }; + const updatedScenes = [...scenes, newScene]; + + const projectStore = useProjectStore.getState(); + const { activeProject } = projectStore; + + if (!activeProject) { + throw new Error("No active project"); + } + + const updatedProject = { + ...activeProject, + scenes: updatedScenes, + updatedAt: new Date(), + }; + + try { + await storageService.saveProject({ project: updatedProject }); + useProjectStore.setState({ activeProject: updatedProject }); + set({ scenes: updatedScenes }); + return newScene.id; + } catch (error) { + console.error("Failed to create scene:", error); + throw error; + } + }, + + renameScene: async ({ sceneId, name }: { sceneId: string; name: string }) => { + const { scenes } = get(); + const updatedScenes = scenes.map((scene) => + scene.id === sceneId ? { ...scene, name, updatedAt: new Date() } : scene + ); + + // Update project + const projectStore = useProjectStore.getState(); + const { activeProject } = projectStore; + + if (!activeProject) { + throw new Error("No active project"); + } + + const updatedProject = { + ...activeProject, + scenes: updatedScenes, + updatedAt: new Date(), + }; + + try { + await storageService.saveProject({ project: updatedProject }); + useProjectStore.setState({ activeProject: updatedProject }); + set({ + scenes: updatedScenes, + currentScene: updatedScenes.find((s) => s.id === sceneId) || null, + }); + } catch (error) { + console.error("Failed to rename scene:", error); + throw error; + } + }, + + switchToScene: async ({ sceneId }: { sceneId: string }) => { + const { scenes } = get(); + const targetScene = scenes.find((s) => s.id === sceneId); + + if (!targetScene) { + throw new Error("Scene not found"); + } + + const timelineStore = useTimelineStore.getState(); + const projectStore = useProjectStore.getState(); + const { activeProject } = projectStore; + const { currentScene } = get(); + + if (activeProject && currentScene) { + await timelineStore.saveProjectTimeline({ + projectId: activeProject.id, + sceneId: currentScene.id, + }); + } + + if (activeProject) { + await timelineStore.loadProjectTimeline({ + projectId: activeProject.id, + sceneId, + }); + + const updatedProject = { + ...activeProject, + currentSceneId: sceneId, + updatedAt: new Date(), + }; + + await storageService.saveProject({ project: updatedProject }); + useProjectStore.setState({ activeProject: updatedProject }); + } + + set({ currentScene: targetScene }); + }, + + getMainScene: () => { + const { scenes } = get(); + return scenes.find((scene) => scene.isMain) || null; + }, + + getCurrentScene: () => { + return get().currentScene; + }, + + loadProjectScenes: async ({ projectId }: { projectId: string }) => { + try { + const project = await storageService.loadProject({ id: projectId }); + if (project?.scenes) { + const ensuredScenes = project.scenes.map((scene) => ({ + ...scene, + isMain: scene.isMain || false, + })); + const currentScene = + ensuredScenes.find((s) => s.id === project.currentSceneId) || + ensuredScenes[0]; + + set({ + scenes: ensuredScenes, + currentScene, + }); + } + } catch (error) { + console.error("Failed to load project scenes:", error); + set({ scenes: [], currentScene: null }); + } + }, + + initializeScenes: ({ + scenes, + currentSceneId, + }: { + scenes: Scene[]; + currentSceneId?: string; + }) => { + const ensuredScenes = ensureBackgroundScene({ scenes }); + const currentScene = currentSceneId + ? ensuredScenes.find((s) => s.id === currentSceneId) + : null; + + const fallbackScene = getMainScene({ scenes: ensuredScenes }); + + set({ + scenes: ensuredScenes, + currentScene: currentScene || fallbackScene, + }); + + if (ensuredScenes.length > scenes.length) { + const projectStore = useProjectStore.getState(); + const { activeProject } = projectStore; + + if (activeProject) { + const updatedProject = { + ...activeProject, + scenes: ensuredScenes, + updatedAt: new Date(), + }; + + storageService.saveProject({ project: updatedProject }).then(() => { + useProjectStore.setState({ activeProject: updatedProject }); + }).catch(error => { + console.error("Failed to save project with background scene:", error); + }); + } + } + }, + + clearScenes: () => { + set({ + scenes: [], + currentScene: null, + }); + }, +})); diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts index 8caa71a7..24b6eca3 100644 --- a/apps/web/src/stores/timeline-store.ts +++ b/apps/web/src/stores/timeline-store.ts @@ -260,6 +260,15 @@ export const useTimelineStore = create((set, get) => { } catch (error) { console.error("Failed to auto-save timeline:", error); } + } else { + console.warn( + "Auto-save skipped - missing activeProject or currentScene:", + { + hasProject: !!activeProject, + hasScene: !!currentScene, + sceneName: currentScene?.name, + } + ); } }; diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts index f182653d..7fa53c69 100644 --- a/apps/web/src/types/project.ts +++ b/apps/web/src/types/project.ts @@ -6,6 +6,7 @@ export interface Scene { id: string; name: string; isMain: boolean; + isBackground: boolean; createdAt: Date; updatedAt: Date; }