From 0b58b9aeef9f39e39a77c769326bc37e22a2fb0d Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Mon, 11 May 2026 12:53:18 +0200
Subject: [PATCH] add: cinematic preview

---
 .../editor/EditorCinematicManifestPanel.tsx   | 20 +++-
 src/components/editor/EditorControls.tsx      |  5 +-
 src/components/editor/scene/EditorScene.tsx   | 98 ++++++++++++++++++-
 src/index.css                                 |  8 ++
 src/pages/editor/page.tsx                     | 21 ++++
 5 files changed, 147 insertions(+), 5 deletions(-)

diff --git a/src/components/editor/EditorCinematicManifestPanel.tsx b/src/components/editor/EditorCinematicManifestPanel.tsx
index 24d3ec1..d360dda 100644
--- a/src/components/editor/EditorCinematicManifestPanel.tsx
+++ b/src/components/editor/EditorCinematicManifestPanel.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Plus, RefreshCw, Save, Trash2 } from "lucide-react";
+import { Play, Plus, RefreshCw, Save, Trash2 } from "lucide-react";
 import type {
   CinematicCameraKeyframe,
   CinematicDefinition,
@@ -124,7 +124,13 @@ function updateVector(
   return nextVector;
 }
 
-export function EditorCinematicManifestPanel(): React.JSX.Element {
+interface EditorCinematicManifestPanelProps {
+  onPreviewCinematic?: ((cinematic: CinematicDefinition) => void) | undefined;
+}
+
+export function EditorCinematicManifestPanel({
+  onPreviewCinematic,
+}: EditorCinematicManifestPanelProps): React.JSX.Element {
   const [manifest, setManifest] = useState<CinematicManifest | null>(null);
   const [selectedCinematicId, setSelectedCinematicId] = useState("");
   const [status, setStatus] = useState("Chargement des cinematics...");
@@ -431,6 +437,16 @@ export function EditorCinematicManifestPanel(): React.JSX.Element {
             )}
           </div>
 
+          <button
+            className="editor-cinematic-manifest-preview"
+            type="button"
+            disabled={errors.length > 0 || !onPreviewCinematic}
+            onClick={() => onPreviewCinematic?.(selectedCinematic)}
+          >
+            <Play size={14} aria-hidden="true" />
+            Preview cinematic
+          </button>
+
           <button
             className="editor-cinematic-manifest-delete"
             type="button"
diff --git a/src/components/editor/EditorControls.tsx b/src/components/editor/EditorControls.tsx
index a87f483..b5cf0ee 100644
--- a/src/components/editor/EditorControls.tsx
+++ b/src/components/editor/EditorControls.tsx
@@ -15,6 +15,7 @@ import {
 import { EditorCinematicManifestPanel } from "@/components/editor/EditorCinematicManifestPanel";
 import { EditorDialogueManifestPanel } from "@/components/editor/EditorDialogueManifestPanel";
 import { EditorSrtPanel } from "@/components/editor/EditorSrtPanel";
+import type { CinematicDefinition } from "@/types/cinematics/cinematics";
 import type { MapNode, TransformMode } from "@/types/editor/editor";
 
 interface EditorControlsProps {
@@ -31,6 +32,7 @@ interface EditorControlsProps {
   onExportJson: () => void;
   onSaveToServer?: (() => void | Promise<void>) | undefined;
   onPlayerMode?: (() => void) | undefined;
+  onPreviewCinematic?: ((cinematic: CinematicDefinition) => void) | undefined;
   isPlayerMode?: boolean;
 }
 
@@ -62,6 +64,7 @@ export function EditorControls({
   onExportJson,
   onSaveToServer,
   onPlayerMode,
+  onPreviewCinematic,
   isPlayerMode,
 }: EditorControlsProps): React.JSX.Element {
   const viewModeLabel = isPlayerMode ? "View locked" : "Lock view";
@@ -240,7 +243,7 @@ export function EditorControls({
           </div>
         </section>
 
-        <EditorCinematicManifestPanel />
+        <EditorCinematicManifestPanel onPreviewCinematic={onPreviewCinematic} />
         <EditorDialogueManifestPanel />
         <EditorSrtPanel />
       </aside>
diff --git a/src/components/editor/scene/EditorScene.tsx b/src/components/editor/scene/EditorScene.tsx
index 0e1ec58..c071ef0 100644
--- a/src/components/editor/scene/EditorScene.tsx
+++ b/src/components/editor/scene/EditorScene.tsx
@@ -1,9 +1,18 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { OrbitControls } from "@react-three/drei";
+import { useThree } from "@react-three/fiber";
+import gsap from "gsap";
+import * as THREE from "three";
 import { EditorMap } from "@/components/editor/scene/EditorMap";
 import { FlyController } from "@/controls/editor/FlyController";
+import type { CinematicDefinition } from "@/types/cinematics/cinematics";
 import type { MapNode, TransformMode, SceneData } from "@/types/editor/editor";
 
+export interface EditorCinematicPreviewRequest {
+  id: string;
+  cinematic: CinematicDefinition;
+}
+
 interface EditorSceneProps {
   sceneData: SceneData;
   selectedNodeIndex: number | null;
@@ -18,6 +27,8 @@ interface EditorSceneProps {
   onUndo: () => void;
   onRedo: () => void;
   isPlayerMode?: boolean;
+  cinematicPreviewRequest?: EditorCinematicPreviewRequest | null;
+  onCinematicPreviewComplete?: (() => void) | undefined;
 }
 
 export function EditorScene({
@@ -34,7 +45,11 @@ export function EditorScene({
   onUndo,
   onRedo,
   isPlayerMode = false,
+  cinematicPreviewRequest = null,
+  onCinematicPreviewComplete,
 }: EditorSceneProps): React.JSX.Element {
+  const isCinematicPreviewing = cinematicPreviewRequest !== null;
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.ctrlKey || e.metaKey) {
@@ -74,10 +89,16 @@ export function EditorScene({
 
   return (
     <>
+      <EditorCinematicPreviewPlayer
+        request={cinematicPreviewRequest}
+        onComplete={onCinematicPreviewComplete}
+      />
+
       {isPlayerMode ? (
-        <FlyController disabled={false} />
+        <FlyController disabled={isCinematicPreviewing} />
       ) : (
         <OrbitControls
+          enabled={!isCinematicPreviewing}
           enableDamping
           dampingFactor={0.05}
           mouseButtons={{
@@ -106,3 +127,76 @@ export function EditorScene({
     </>
   );
 }
+
+interface EditorCinematicPreviewPlayerProps {
+  request: EditorCinematicPreviewRequest | null;
+  onComplete?: (() => void) | undefined;
+}
+
+function EditorCinematicPreviewPlayer({
+  request,
+  onComplete,
+}: EditorCinematicPreviewPlayerProps): null {
+  const camera = useThree((state) => state.camera);
+  const timelineRef = useRef<gsap.core.Timeline | null>(null);
+
+  useEffect(() => {
+    timelineRef.current?.kill();
+    timelineRef.current = null;
+
+    if (!request) return undefined;
+
+    const firstKeyframe = request.cinematic.cameraKeyframes[0];
+    if (!firstKeyframe) return undefined;
+
+    const target = new THREE.Vector3(...firstKeyframe.target);
+    camera.position.set(...firstKeyframe.position);
+    camera.lookAt(target);
+
+    const timeline = gsap.timeline({
+      onUpdate: () => camera.lookAt(target),
+      onComplete: () => {
+        timelineRef.current = null;
+        onComplete?.();
+      },
+    });
+
+    request.cinematic.cameraKeyframes.slice(1).forEach((keyframe, index) => {
+      const previousKeyframe = request.cinematic.cameraKeyframes[index];
+      if (!previousKeyframe) return;
+
+      const duration = keyframe.time - previousKeyframe.time;
+      timeline.to(
+        camera.position,
+        {
+          x: keyframe.position[0],
+          y: keyframe.position[1],
+          z: keyframe.position[2],
+          duration,
+          ease: "power2.inOut",
+        },
+        previousKeyframe.time,
+      );
+      timeline.to(
+        target,
+        {
+          x: keyframe.target[0],
+          y: keyframe.target[1],
+          z: keyframe.target[2],
+          duration,
+          ease: "power2.inOut",
+        },
+        previousKeyframe.time,
+      );
+    });
+
+    timelineRef.current = timeline;
+
+    return () => {
+      timeline.kill();
+      if (timelineRef.current === timeline) timelineRef.current = null;
+    };
+  }, [camera, onComplete, request]);
+
+  return null;
+}
diff --git a/src/index.css b/src/index.css
index 51adac0..d19537a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1863,6 +1863,7 @@ canvas {
 }
 
 .editor-cinematic-manifest-actions button,
+.editor-cinematic-manifest-preview,
 .editor-cinematic-manifest-delete,
 .editor-cinematic-keyframes-heading button,
 .editor-cinematic-keyframe-heading button {
@@ -1881,6 +1882,7 @@ canvas {
 }
 
 .editor-cinematic-manifest-actions button:hover,
+.editor-cinematic-manifest-preview:hover,
 .editor-cinematic-manifest-delete:hover,
 .editor-cinematic-keyframes-heading button:hover,
 .editor-cinematic-keyframe-heading button:hover {
@@ -1889,6 +1891,7 @@ canvas {
 }
 
 .editor-cinematic-manifest-actions button:disabled,
+.editor-cinematic-manifest-preview:disabled,
 .editor-cinematic-keyframe-heading button:disabled {
   cursor: not-allowed;
   opacity: 0.45;
@@ -1988,6 +1991,11 @@ canvas {
   color: #fca5a5;
 }
 
+.editor-cinematic-manifest-preview {
+  border-color: rgba(125, 211, 252, 0.24);
+  color: #bae6fd;
+}
+
 .editor-cinematic-keyframe-heading button {
   padding: 6px 8px;
   color: #fca5a5;
diff --git a/src/pages/editor/page.tsx b/src/pages/editor/page.tsx
index c931dcf..3c326f3 100644
--- a/src/pages/editor/page.tsx
+++ b/src/pages/editor/page.tsx
@@ -2,8 +2,10 @@ import { useCallback, useState } from "react";
 import { Canvas } from "@react-three/fiber";
 import { EditorControls } from "@/components/editor/EditorControls";
 import { EditorScene } from "@/components/editor/scene/EditorScene";
+import type { EditorCinematicPreviewRequest } from "@/components/editor/scene/EditorScene";
 import { Subtitles } from "@/components/ui/Subtitles";
 import { useEditorHistory } from "@/hooks/editor/useEditorHistory";
+import type { CinematicDefinition } from "@/types/cinematics/cinematics";
 import { useEditorSceneData } from "@/hooks/editor/useEditorSceneData";
 import type { MapNode, SceneData, TransformMode } from "@/types/editor/editor";
 
@@ -29,6 +31,8 @@ export function EditorPage(): React.JSX.Element {
   const [transformMode, setTransformMode] =
     useState<TransformMode>("translate");
   const [isPlayerMode, setIsPlayerMode] = useState(false);
+  const [cinematicPreviewRequest, setCinematicPreviewRequest] =
+    useState<EditorCinematicPreviewRequest | null>(null);
 
   const {
     undoCount,
@@ -89,6 +93,20 @@ export function EditorPage(): React.JSX.Element {
     setIsPlayerMode((prev) => !prev);
   }, []);
 
+  const handlePreviewCinematic = useCallback(
+    (cinematic: CinematicDefinition) => {
+      setCinematicPreviewRequest({
+        id: window.crypto.randomUUID(),
+        cinematic,
+      });
+    },
+    [],
+  );
+
+  const handleCinematicPreviewComplete = useCallback(() => {
+    setCinematicPreviewRequest(null);
+  }, []);
+
   const handleNodeTransform = useCallback(
     (nodeIndex: number, updatedNode: MapNode) => {
       setSceneData((prev) => {
@@ -172,6 +190,8 @@ export function EditorPage(): React.JSX.Element {
           onUndo={handleUndo}
           onRedo={handleRedo}
           isPlayerMode={isPlayerMode}
+          cinematicPreviewRequest={cinematicPreviewRequest}
+          onCinematicPreviewComplete={handleCinematicPreviewComplete}
         />
       </Canvas>
 
@@ -194,6 +214,7 @@ export function EditorPage(): React.JSX.Element {
           onExportJson={handleExportJson}
           onSaveToServer={import.meta.env.DEV ? handleSaveToServer : undefined}
           onPlayerMode={handlePlayerMode}
+          onPreviewCinematic={handlePreviewCinematic}
           isPlayerMode={isPlayerMode}
         />
       )}