Tom Boullay
525 lines
16 KiB
TypeScript
525 lines
16 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Play, Plus, RefreshCw, Save, Trash2 } from "lucide-react";
|
|
import type {
|
|
CinematicCameraKeyframe,
|
|
CinematicDefinition,
|
|
CinematicManifest,
|
|
} from "@/types/cinematics/cinematics";
|
|
import type { Vector3Tuple } from "@/types/three/three";
|
|
import { loadCinematicManifest } from "@/utils/cinematics/loadCinematicManifest";
|
|
|
|
type CinematicPatch = Partial<Omit<CinematicDefinition, "timecode">> & {
|
|
timecode?: number | undefined;
|
|
};
|
|
|
|
type VectorAxis = 0 | 1 | 2;
|
|
const VECTOR_AXES: { label: "X" | "Y" | "Z"; axis: VectorAxis }[] = [
|
|
{ label: "X", axis: 0 },
|
|
{ label: "Y", axis: 1 },
|
|
{ label: "Z", axis: 2 },
|
|
];
|
|
|
|
function createCinematic(index: number): CinematicDefinition {
|
|
return {
|
|
id: `new_cinematic_${index}`,
|
|
cameraKeyframes: [
|
|
{ time: 0, position: [0, 3, 8], target: [0, 1.5, 0] },
|
|
{ time: 3, position: [6, 3, 8], target: [0, 1.5, 0] },
|
|
],
|
|
};
|
|
}
|
|
|
|
function createKeyframe(
|
|
previousKeyframe: CinematicCameraKeyframe,
|
|
): CinematicCameraKeyframe {
|
|
return {
|
|
time: previousKeyframe.time + 3,
|
|
position: [...previousKeyframe.position],
|
|
target: [...previousKeyframe.target],
|
|
};
|
|
}
|
|
|
|
function getManifestErrors(manifest: CinematicManifest | null): string[] {
|
|
if (!manifest) return ["Manifeste absent."];
|
|
|
|
const errors: string[] = [];
|
|
const ids = new Set<string>();
|
|
|
|
manifest.cinematics.forEach((cinematic, cinematicIndex) => {
|
|
const label = cinematic.id || `Cinematique ${cinematicIndex + 1}`;
|
|
|
|
if (!cinematic.id.trim()) errors.push(`${label}: id obligatoire.`);
|
|
if (ids.has(cinematic.id)) errors.push(`${label}: id duplique.`);
|
|
ids.add(cinematic.id);
|
|
|
|
if (
|
|
cinematic.timecode !== undefined &&
|
|
(!Number.isFinite(cinematic.timecode) || cinematic.timecode < 0)
|
|
) {
|
|
errors.push(`${label}: timecode invalide.`);
|
|
}
|
|
|
|
if (cinematic.cameraKeyframes.length < 2) {
|
|
errors.push(`${label}: au moins deux keyframes camera sont requises.`);
|
|
}
|
|
|
|
cinematic.cameraKeyframes.forEach((keyframe, keyframeIndex) => {
|
|
const previousKeyframe = cinematic.cameraKeyframes[keyframeIndex - 1];
|
|
|
|
if (!Number.isFinite(keyframe.time) || keyframe.time < 0) {
|
|
errors.push(`${label}: keyframe ${keyframeIndex + 1} time invalide.`);
|
|
}
|
|
|
|
if (previousKeyframe && keyframe.time <= previousKeyframe.time) {
|
|
errors.push(`${label}: les temps des keyframes doivent augmenter.`);
|
|
}
|
|
});
|
|
|
|
cinematic.dialogueCues?.forEach((cue, cueIndex) => {
|
|
if (!Number.isFinite(cue.time) || cue.time < 0) {
|
|
errors.push(`${label}: dialogue cue ${cueIndex + 1} time invalide.`);
|
|
}
|
|
|
|
if (!cue.dialogueId.trim()) {
|
|
errors.push(`${label}: dialogue cue ${cueIndex + 1} id obligatoire.`);
|
|
}
|
|
});
|
|
});
|
|
|
|
return errors;
|
|
}
|
|
|
|
async function saveCinematicManifest(
|
|
manifest: CinematicManifest,
|
|
): Promise<void> {
|
|
const response = await fetch("/api/save-cinematics", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(manifest),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const body = (await response.json().catch(() => null)) as {
|
|
error?: string;
|
|
} | null;
|
|
throw new Error(body?.error ?? "Sauvegarde des cinematics impossible");
|
|
}
|
|
}
|
|
|
|
function getPatchedCinematic(
|
|
cinematic: CinematicDefinition,
|
|
patch: CinematicPatch,
|
|
): CinematicDefinition {
|
|
const nextCinematic: CinematicDefinition = {
|
|
id: patch.id ?? cinematic.id,
|
|
cameraKeyframes: patch.cameraKeyframes ?? cinematic.cameraKeyframes,
|
|
};
|
|
|
|
const dialogueCues = patch.dialogueCues ?? cinematic.dialogueCues;
|
|
if (dialogueCues) {
|
|
nextCinematic.dialogueCues = dialogueCues;
|
|
}
|
|
|
|
if ("timecode" in patch) {
|
|
if (patch.timecode !== undefined) nextCinematic.timecode = patch.timecode;
|
|
} else if (cinematic.timecode !== undefined) {
|
|
nextCinematic.timecode = cinematic.timecode;
|
|
}
|
|
|
|
return nextCinematic;
|
|
}
|
|
|
|
function updateVector(
|
|
vector: Vector3Tuple,
|
|
axis: VectorAxis,
|
|
value: number,
|
|
): Vector3Tuple {
|
|
const nextVector: Vector3Tuple = [...vector];
|
|
nextVector[axis] = value;
|
|
return nextVector;
|
|
}
|
|
|
|
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...");
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const errors = getManifestErrors(manifest);
|
|
const selectedCinematic =
|
|
manifest?.cinematics.find(
|
|
(cinematic) => cinematic.id === selectedCinematicId,
|
|
) ??
|
|
manifest?.cinematics[0] ??
|
|
null;
|
|
|
|
async function handleLoad(): Promise<void> {
|
|
setStatus("Chargement des cinematics...");
|
|
|
|
try {
|
|
const loadedManifest = await loadCinematicManifest();
|
|
setManifest(loadedManifest);
|
|
setSelectedCinematicId(loadedManifest?.cinematics[0]?.id ?? "");
|
|
setStatus(
|
|
loadedManifest
|
|
? `Manifeste charge: ${loadedManifest.cinematics.length} cinematics.`
|
|
: "Manifeste cinematics introuvable ou invalide.",
|
|
);
|
|
} catch (err) {
|
|
const message = err instanceof Error ? err.message : "Erreur inconnue";
|
|
setStatus(message);
|
|
setManifest(null);
|
|
}
|
|
}
|
|
|
|
async function handleSave(): Promise<void> {
|
|
if (!manifest) return;
|
|
if (errors.length > 0) {
|
|
setStatus("Corrige les erreurs avant de sauvegarder.");
|
|
return;
|
|
}
|
|
|
|
setIsSaving(true);
|
|
setStatus("Sauvegarde des cinematics...");
|
|
|
|
try {
|
|
await saveCinematicManifest(manifest);
|
|
setStatus("Manifeste sauvegarde dans public/cinematics.json.");
|
|
} catch (err) {
|
|
const message = err instanceof Error ? err.message : "Erreur inconnue";
|
|
setStatus(message);
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
}
|
|
|
|
function handleAddCinematic(): void {
|
|
if (!manifest) return;
|
|
|
|
const cinematic = createCinematic(manifest.cinematics.length + 1);
|
|
setManifest({
|
|
...manifest,
|
|
cinematics: [...manifest.cinematics, cinematic],
|
|
});
|
|
setSelectedCinematicId(cinematic.id);
|
|
setStatus("Nouvelle cinematic ajoutee localement.");
|
|
}
|
|
|
|
function handleRemoveCinematic(cinematicId: string): void {
|
|
if (!manifest) return;
|
|
|
|
const nextCinematics = manifest.cinematics.filter(
|
|
(cinematic) => cinematic.id !== cinematicId,
|
|
);
|
|
setManifest({ ...manifest, cinematics: nextCinematics });
|
|
setSelectedCinematicId(nextCinematics[0]?.id ?? "");
|
|
setStatus("Cinematic supprimee localement.");
|
|
}
|
|
|
|
function updateSelectedCinematic(
|
|
patch: CinematicPatch,
|
|
nextId = selectedCinematicId,
|
|
): void {
|
|
if (!manifest || !selectedCinematic) return;
|
|
|
|
setManifest({
|
|
...manifest,
|
|
cinematics: manifest.cinematics.map((cinematic) =>
|
|
cinematic.id === selectedCinematic.id
|
|
? getPatchedCinematic(cinematic, patch)
|
|
: cinematic,
|
|
),
|
|
});
|
|
setSelectedCinematicId(nextId);
|
|
}
|
|
|
|
function updateKeyframe(
|
|
keyframeIndex: number,
|
|
patch: Partial<CinematicCameraKeyframe>,
|
|
): void {
|
|
if (!selectedCinematic) return;
|
|
|
|
updateSelectedCinematic({
|
|
cameraKeyframes: selectedCinematic.cameraKeyframes.map(
|
|
(keyframe, index) =>
|
|
index === keyframeIndex ? { ...keyframe, ...patch } : keyframe,
|
|
),
|
|
});
|
|
}
|
|
|
|
function handleAddKeyframe(): void {
|
|
if (!selectedCinematic) return;
|
|
|
|
const previousKeyframe =
|
|
selectedCinematic.cameraKeyframes[
|
|
selectedCinematic.cameraKeyframes.length - 1
|
|
];
|
|
if (!previousKeyframe) return;
|
|
|
|
updateSelectedCinematic({
|
|
cameraKeyframes: [
|
|
...selectedCinematic.cameraKeyframes,
|
|
createKeyframe(previousKeyframe),
|
|
],
|
|
});
|
|
setStatus("Keyframe ajoutee localement.");
|
|
}
|
|
|
|
function handleRemoveKeyframe(keyframeIndex: number): void {
|
|
if (!selectedCinematic) return;
|
|
|
|
updateSelectedCinematic({
|
|
cameraKeyframes: selectedCinematic.cameraKeyframes.filter(
|
|
(_keyframe, index) => index !== keyframeIndex,
|
|
),
|
|
});
|
|
setStatus("Keyframe supprimee localement.");
|
|
}
|
|
|
|
useEffect(() => {
|
|
let mounted = true;
|
|
|
|
void loadCinematicManifest()
|
|
.then((loadedManifest) => {
|
|
if (!mounted) return;
|
|
|
|
setManifest(loadedManifest);
|
|
setSelectedCinematicId(loadedManifest?.cinematics[0]?.id ?? "");
|
|
setStatus(
|
|
loadedManifest
|
|
? `Manifeste charge: ${loadedManifest.cinematics.length} cinematics.`
|
|
: "Manifeste cinematics introuvable ou invalide.",
|
|
);
|
|
})
|
|
.catch((err: unknown) => {
|
|
if (!mounted) return;
|
|
|
|
const message = err instanceof Error ? err.message : "Erreur inconnue";
|
|
setStatus(message);
|
|
setManifest(null);
|
|
});
|
|
|
|
return () => {
|
|
mounted = false;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<section
|
|
className="editor-cinematic-manifest-section"
|
|
aria-labelledby="cinematic-manifest-heading"
|
|
>
|
|
<div className="editor-section-heading">
|
|
<h3 id="cinematic-manifest-heading">Cinematics</h3>
|
|
<span>{manifest?.cinematics.length ?? 0} items</span>
|
|
</div>
|
|
|
|
<div className="editor-cinematic-manifest-actions">
|
|
<button type="button" onClick={() => void handleLoad()}>
|
|
<RefreshCw size={14} aria-hidden="true" />
|
|
Reload
|
|
</button>
|
|
<button type="button" disabled={!manifest} onClick={handleAddCinematic}>
|
|
<Plus size={14} aria-hidden="true" />
|
|
Add
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled={!manifest || errors.length > 0 || isSaving}
|
|
onClick={() => void handleSave()}
|
|
>
|
|
<Save size={14} aria-hidden="true" />
|
|
{isSaving ? "Saving..." : "Save"}
|
|
</button>
|
|
</div>
|
|
|
|
{manifest && (
|
|
<label className="editor-cinematic-manifest-select">
|
|
Cinematic
|
|
<select
|
|
value={selectedCinematic?.id ?? ""}
|
|
onChange={(event) => setSelectedCinematicId(event.target.value)}
|
|
>
|
|
{manifest.cinematics.map((cinematic) => (
|
|
<option key={cinematic.id} value={cinematic.id}>
|
|
{cinematic.id || "Cinematic sans id"}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
)}
|
|
|
|
{selectedCinematic && (
|
|
<div className="editor-cinematic-manifest-form">
|
|
<label>
|
|
ID
|
|
<input
|
|
value={selectedCinematic.id}
|
|
onChange={(event) =>
|
|
updateSelectedCinematic(
|
|
{ id: event.target.value },
|
|
event.target.value,
|
|
)
|
|
}
|
|
/>
|
|
</label>
|
|
|
|
<label>
|
|
Timecode global optionnel
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.1"
|
|
value={selectedCinematic.timecode ?? ""}
|
|
placeholder="Aucun"
|
|
onChange={(event) => {
|
|
const value = event.target.value.trim();
|
|
updateSelectedCinematic({
|
|
timecode: value === "" ? undefined : Number(value),
|
|
});
|
|
}}
|
|
/>
|
|
</label>
|
|
|
|
<div className="editor-cinematic-keyframes">
|
|
<div className="editor-cinematic-keyframes-heading">
|
|
<strong>Camera keyframes</strong>
|
|
<button type="button" onClick={handleAddKeyframe}>
|
|
<Plus size={13} aria-hidden="true" />
|
|
Add keyframe
|
|
</button>
|
|
</div>
|
|
|
|
{selectedCinematic.cameraKeyframes.map(
|
|
(keyframe, keyframeIndex) => (
|
|
<div
|
|
className="editor-cinematic-keyframe"
|
|
key={`${selectedCinematic.id}-${keyframeIndex}`}
|
|
>
|
|
<div className="editor-cinematic-keyframe-heading">
|
|
<strong>Keyframe {keyframeIndex + 1}</strong>
|
|
<button
|
|
type="button"
|
|
disabled={selectedCinematic.cameraKeyframes.length <= 2}
|
|
onClick={() => handleRemoveKeyframe(keyframeIndex)}
|
|
>
|
|
<Trash2 size={13} aria-hidden="true" />
|
|
Remove
|
|
</button>
|
|
</div>
|
|
|
|
<label>
|
|
Time
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
step="0.1"
|
|
value={keyframe.time}
|
|
onChange={(event) =>
|
|
updateKeyframe(keyframeIndex, {
|
|
time: Number(event.target.value),
|
|
})
|
|
}
|
|
/>
|
|
</label>
|
|
|
|
<VectorInputs
|
|
label="Position"
|
|
value={keyframe.position}
|
|
onChange={(axis, value) =>
|
|
updateKeyframe(keyframeIndex, {
|
|
position: updateVector(keyframe.position, axis, value),
|
|
})
|
|
}
|
|
/>
|
|
|
|
<VectorInputs
|
|
label="Target"
|
|
value={keyframe.target}
|
|
onChange={(axis, value) =>
|
|
updateKeyframe(keyframeIndex, {
|
|
target: updateVector(keyframe.target, axis, value),
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
),
|
|
)}
|
|
</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"
|
|
onClick={() => handleRemoveCinematic(selectedCinematic.id)}
|
|
>
|
|
<Trash2 size={14} aria-hidden="true" />
|
|
Delete cinematic
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<p className="editor-cinematic-manifest-status">{status}</p>
|
|
<div
|
|
className={`editor-cinematic-manifest-diagnostic ${errors.length === 0 ? "is-valid" : "is-invalid"}`}
|
|
>
|
|
<strong>
|
|
{errors.length === 0
|
|
? "Manifeste local valide."
|
|
: `${errors.length} erreur${errors.length > 1 ? "s" : ""} locale${errors.length > 1 ? "s" : ""}.`}
|
|
</strong>
|
|
{errors.length > 0 && (
|
|
<ul>
|
|
{errors.map((error) => (
|
|
<li key={error}>{error}</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
interface VectorInputsProps {
|
|
label: string;
|
|
value: Vector3Tuple;
|
|
onChange: (axis: VectorAxis, value: number) => void;
|
|
}
|
|
|
|
function VectorInputs({
|
|
label,
|
|
value,
|
|
onChange,
|
|
}: VectorInputsProps): React.JSX.Element {
|
|
return (
|
|
<div className="editor-cinematic-vector-inputs">
|
|
<span>{label}</span>
|
|
{VECTOR_AXES.map(({ label: axisLabel, axis }) => (
|
|
<label key={axisLabel}>
|
|
{axisLabel}
|
|
<input
|
|
type="number"
|
|
step="0.1"
|
|
value={value[axis]}
|
|
onChange={(event) => onChange(axis, Number(event.target.value))}
|
|
/>
|
|
</label>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|