diff options
Diffstat (limited to 'apps/web/src/components/providers')
| -rw-r--r-- | apps/web/src/components/providers/editor-provider.tsx | 157 | ||||
| -rw-r--r-- | apps/web/src/components/providers/migrators/scenes-migrator.tsx | 177 |
2 files changed, 120 insertions, 214 deletions
diff --git a/apps/web/src/components/providers/editor-provider.tsx b/apps/web/src/components/providers/editor-provider.tsx index b8e9ae1d..b1b5ab3a 100644 --- a/apps/web/src/components/providers/editor-provider.tsx +++ b/apps/web/src/components/providers/editor-provider.tsx @@ -1,53 +1,136 @@ "use client"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; +import { useRouter } from "next/navigation"; import { Loader2 } from "lucide-react"; -import { useEditorStore } from "@/stores/editor-store"; +import { useEditor } from "@/hooks/use-editor"; import { - useKeybindingsListener, - useKeybindingDisabler, + useKeybindingsListener, + useKeybindingDisabler, } from "@/hooks/use-keybindings"; -import { useEditorActions } from "@/hooks/use-editor-actions"; +import { useEditorActions } from "@/hooks/actions/use-editor-actions"; interface EditorProviderProps { - children: React.ReactNode; + projectId: string; + children: React.ReactNode; } -export function EditorProvider({ children }: EditorProviderProps) { - const { isInitializing, isPanelsReady, initializeApp } = useEditorStore(); - const { disableKeybindings, enableKeybindings } = useKeybindingDisabler(); +export function EditorProvider({ projectId, children }: EditorProviderProps) { + const editor = useEditor(); + const router = useRouter(); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState<string | null>(null); + const { disableKeybindings, enableKeybindings } = useKeybindingDisabler(); + const activeProject = editor.project.getActiveOrNull(); - // Set up action handlers - useEditorActions(); + useEffect(() => { + if (isLoading) { + disableKeybindings(); + } else { + enableKeybindings(); + } + }, [isLoading, disableKeybindings, enableKeybindings]); - // Set up keybinding listener - useKeybindingsListener(); + useEffect(() => { + let cancelled = false; - // Disable keybindings when initializing - useEffect(() => { - if (isInitializing || !isPanelsReady) { - disableKeybindings(); - } else { - enableKeybindings(); - } - }, [isInitializing, isPanelsReady, disableKeybindings, enableKeybindings]); + const loadProject = async () => { + try { + setIsLoading(true); + await editor.project.loadProject({ id: projectId }); - useEffect(() => { - initializeApp(); - }, [initializeApp]); + if (cancelled) return; - // Show loading screen while initializing - if (isInitializing || !isPanelsReady) { - return ( - <div className="h-screen w-screen flex items-center justify-center bg-background"> - <div className="flex flex-col items-center gap-4"> - <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" /> - <p className="text-sm text-muted-foreground">Loading editor...</p> - </div> - </div> - ); - } + setIsLoading(false); + } catch (err) { + if (cancelled) return; - // App is ready, render children - return <>{children}</>; + const isNotFound = + err instanceof Error && + (err.message.includes("not found") || + err.message.includes("does not exist")); + + if (isNotFound) { + try { + const newProjectId = await editor.project.createNewProject({ + name: "Untitled Project", + }); + router.replace(`/editor/${newProjectId}`); + } catch (_createErr) { + setError("Failed to create project"); + setIsLoading(false); + } + } else { + setError( + err instanceof Error ? err.message : "Failed to load project", + ); + setIsLoading(false); + } + } + }; + + loadProject(); + + return () => { + cancelled = true; + }; + }, [projectId, editor, router]); + + if (error) { + return ( + <div className="bg-background flex h-screen w-screen items-center justify-center"> + <div className="flex flex-col items-center gap-4"> + <p className="text-destructive text-sm">{error}</p> + </div> + </div> + ); + } + + if (isLoading) { + return ( + <div className="bg-background flex h-screen w-screen items-center justify-center"> + <div className="flex flex-col items-center gap-4"> + <Loader2 className="text-muted-foreground size-8 animate-spin" /> + <p className="text-muted-foreground text-sm">Loading project...</p> + </div> + </div> + ); + } + + if (!activeProject) { + return ( + <div className="bg-background flex h-screen w-screen items-center justify-center"> + <div className="flex flex-col items-center gap-4"> + <Loader2 className="text-muted-foreground size-8 animate-spin" /> + <p className="text-muted-foreground text-sm">Exiting project...</p> + </div> + </div> + ); + } + + return ( + <> + <EditorRuntimeBindings /> + {children} + </> + ); +} + +function EditorRuntimeBindings() { + const editor = useEditor(); + + useEffect(() => { + const handleBeforeUnload = (event: BeforeUnloadEvent) => { + if (!editor.save.getIsDirty()) return; + event.preventDefault(); + (event as unknown as { returnValue: string }).returnValue = ""; + }; + + window.addEventListener("beforeunload", handleBeforeUnload); + return () => window.removeEventListener("beforeunload", handleBeforeUnload); + }, [editor]); + + useEditorActions(); + useKeybindingsListener(); + return null; } diff --git a/apps/web/src/components/providers/migrators/scenes-migrator.tsx b/apps/web/src/components/providers/migrators/scenes-migrator.tsx deleted file mode 100644 index b984a7f4..00000000 --- a/apps/web/src/components/providers/migrators/scenes-migrator.tsx +++ /dev/null @@ -1,177 +0,0 @@ -"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<MigrationProgress>({ - 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, - createdAt: new Date(), - updatedAt: new Date(), - }; - - 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 ( - <Dialog open={true}> - <DialogContent - className="sm:max-w-md" - onPointerDownOutside={(e) => e.preventDefault()} - > - <DialogHeader> - <DialogTitle>Updating Projects</DialogTitle> - <DialogDescription> - We're adding scene support to your projects. This will only take a - moment. - </DialogDescription> - </DialogHeader> - - <div className="space-y-4"> - <div className="space-y-2"> - <div className="flex justify-between text-sm"> - <span>Progress</span> - <span> - {progress.current} of {progress.total} - </span> - </div> - <Progress value={progressPercent} className="w-full" /> - </div> - - {progress.currentProjectName && ( - <div className="text-sm text-muted-foreground"> - {progress.current < progress.total - ? `Updating: ${progress.currentProjectName}` - : progress.currentProjectName} - </div> - )} - </div> - </DialogContent> - </Dialog> - ); - } - - return children; -} |