diff options
Diffstat (limited to 'apps/web/src/components/editor')
| -rw-r--r-- | apps/web/src/components/editor/scenes-view.tsx | 64 | ||||
| -rw-r--r-- | apps/web/src/components/editor/timeline/timeline-toolbar.tsx | 13 |
2 files changed, 73 insertions, 4 deletions
diff --git a/apps/web/src/components/editor/scenes-view.tsx b/apps/web/src/components/editor/scenes-view.tsx new file mode 100644 index 00000000..f1df32e9 --- /dev/null +++ b/apps/web/src/components/editor/scenes-view.tsx @@ -0,0 +1,64 @@ +"use client";
+
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { useSceneStore } from "@/stores/scene-store";
+import { Check } from "lucide-react";
+
+export function ScenesView({ children }: { children: React.ReactNode }) {
+ const { scenes, currentScene, switchToScene } = useSceneStore();
+
+ const handleSceneSwitch = async (sceneId: string) => {
+ try {
+ await switchToScene({ sceneId });
+ } catch (error) {
+ console.error("Failed to switch scene:", error);
+ }
+ };
+
+ return (
+ <Sheet>
+ <SheetTrigger asChild>{children}</SheetTrigger>
+ <SheetContent>
+ <SheetHeader>
+ <SheetTitle>Scenes</SheetTitle>
+ <SheetDescription>
+ Switch between scenes in your project
+ </SheetDescription>
+ </SheetHeader>
+ <div className="py-4">
+ {scenes.length === 0 ? (
+ <div className="text-sm text-muted-foreground">
+ No scenes available
+ </div>
+ ) : (
+ <div className="space-y-2">
+ {scenes.map((scene) => (
+ <Button
+ key={scene.id}
+ variant={
+ currentScene?.id === scene.id ? "default" : "outline"
+ }
+ className="w-full justify-between"
+ onClick={() => handleSceneSwitch(scene.id)}
+ >
+ <span>{scene.name}</span>
+ {currentScene?.id === scene.id && (
+ <Check className="h-4 w-4" />
+ )}
+ </Button>
+ ))}
+ </div>
+ )}
+ </div>
+ </SheetContent>
+ </Sheet>
+ );
+}
diff --git a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx index cc9190e2..2daf1ccc 100644 --- a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx +++ b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx @@ -1,6 +1,7 @@ import { usePlaybackStore } from "@/stores/playback-store"; import { useProjectStore } from "@/stores/project-store"; import { useTimelineStore } from "@/stores/timeline-store"; +import { useSceneStore } from "@/stores/scene-store"; import { toast } from "sonner"; import { TooltipProvider, @@ -38,6 +39,7 @@ import { DEFAULT_FPS } from "@/stores/project-store"; import { formatTimeCode } from "@/lib/time"; import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; import { EditableTimecode } from "@/components/ui/editable-timecode"; +import { ScenesView } from "../scenes-view"; export function TimelineToolbar({ zoomLevel, @@ -65,6 +67,7 @@ export function TimelineToolbar({ } = useTimelineStore(); const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore(); const { toggleBookmark, isBookmarked, activeProject } = useProjectStore(); + const { currentScene } = useSceneStore(); const handleSplitSelected = () => { if (selectedElements.length === 0) return; @@ -357,11 +360,13 @@ export function TimelineToolbar({ </div> <div> <SplitButton> - <SplitButtonLeft>Main scene</SplitButtonLeft> + <SplitButtonLeft>{currentScene?.name || "No Scene"}</SplitButtonLeft> <SplitButtonSeparator /> - <SplitButtonRight onClick={() => {}}> - <LayersIcon /> - </SplitButtonRight> + <ScenesView> + <SplitButtonRight onClick={() => {}}> + <LayersIcon /> + </SplitButtonRight> + </ScenesView> </SplitButton> </div> <div className="flex items-center gap-1"> |