update: save srt files

src/components/editor/EditorSrtPanel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Download, RefreshCw } from "lucide-react";
+import { Download, RefreshCw, Save } from "lucide-react";
 import type { SubtitleLanguage } from "@/managers/stores/useSettingsStore";
 import type {
   DialogueSpeaker,
@@ -48,14 +48,49 @@ function downloadSrtFile(
   window.setTimeout(() => URL.revokeObjectURL(url), 0);
 }
 
+async function saveSrtFile(
+  voice: DialogueVoiceId,
+  language: SubtitleLanguage,
+  content: string,
+): Promise<void> {
+  const response = await fetch("/api/save-srt", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ voice, language, content }),
+  });
+
+  if (!response.ok) {
+    const body = (await response.json().catch(() => null)) as {
+      error?: string;
+    } | null;
+    throw new Error(body?.error ?? "Sauvegarde SRT impossible");
+  }
+}
+
 export function EditorSrtPanel(): React.JSX.Element {
   const [voice, setVoice] = useState<DialogueVoiceId>("narrateur");
   const [language, setLanguage] = useState<SubtitleLanguage>("fr");
   const [content, setContent] = useState("");
   const [status, setStatus] = useState("Chargement du SRT...");
+  const [isSaving, setIsSaving] = useState(false);
   const selectedVoice =
     SRT_VOICES.find((item) => item.id === voice) ?? DEFAULT_SRT_VOICE;
 
+  async function handleSave(): Promise<void> {
+    setIsSaving(true);
+    setStatus("Sauvegarde du SRT...");
+
+    try {
+      await saveSrtFile(voice, language, content);
+      setStatus(`Sauvegarde dans ${getSrtPath(voice, language)}`);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Erreur inconnue";
+      setStatus(`${message}. Utilise Export SRT si le serveur dev est absent.`);
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
   useEffect(() => {
     let mounted = true;
     const srtPath = getSrtPath(voice, language);
@@ -148,6 +183,15 @@ export function EditorSrtPanel(): React.JSX.Element {
         <button
           className="editor-action-button editor-action-button-primary"
           type="button"
+          disabled={isSaving}
+          onClick={() => void handleSave()}
+        >
+          <Save size={15} aria-hidden="true" />
+          {isSaving ? "Saving..." : "Save SRT"}
+        </button>
+        <button
+          className="editor-action-button"
+          type="button"
           onClick={() => downloadSrtFile(voice, language, content)}
         >
           <Download size={15} aria-hidden="true" />

src/index.css

@@ -1232,6 +1232,12 @@ canvas {
   transform: translateY(-1px);
 }
 
+.editor-action-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+  transform: none;
+}
+
 .editor-action-button-primary,
 .editor-player-button.active {
   background: #ffffff;
@@ -1451,7 +1457,7 @@ canvas {
 
 .editor-srt-actions {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(3, 1fr);
   gap: 8px;
 }
 

vite.config.ts

@@ -10,8 +10,11 @@ import { parseMapNodes } from "./src/utils/map/mapNodeValidation";
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
 const MAX_MAP_PAYLOAD_BYTES = 1024 * 1024;
+const MAX_SRT_PAYLOAD_BYTES = 256 * 1024;
 const JSON_HEADERS = { "Content-Type": "application/json" };
 type JsonResponseBody = Readonly<Record<string, string | boolean>>;
+const SRT_VOICES = new Set(["narrateur", "fermier", "electricienne"]);
+const SRT_LANGUAGES = new Set(["fr", "en"]);
 
 function sendJson(
   res: ServerResponse,
@@ -72,8 +75,84 @@ const saveMapPlugin = (): Plugin => ({
   },
 });
 
+const saveSrtPlugin = (): Plugin => ({
+  name: "save-srt-api",
+  configureServer(server) {
+    server.middlewares.use("/api/save-srt", async (req, res) => {
+      if (req.method !== "POST") {
+        sendJson(res, 405, { error: "Method not allowed" }, { Allow: "POST" });
+        return;
+      }
+
+      const chunks: Buffer[] = [];
+      let size = 0;
+
+      for await (const chunk of req) {
+        const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
+        size += buffer.length;
+        if (size > MAX_SRT_PAYLOAD_BYTES) {
+          sendJson(res, 413, { error: "Payload too large" });
+          req.destroy();
+          return;
+        }
+        chunks.push(buffer);
+      }
+
+      try {
+        const data = JSON.parse(Buffer.concat(chunks).toString()) as unknown;
+        if (!isSrtPayload(data)) {
+          sendJson(res, 400, { error: "Invalid SRT payload" });
+          return;
+        }
+
+        const subtitlesRoot = path.resolve(
+          __dirname,
+          "public/sounds/dialogue/subtitles",
+        );
+        const srtPath = path.resolve(
+          subtitlesRoot,
+          data.language,
+          `${data.voice}.srt`,
+        );
+
+        if (!srtPath.startsWith(`${subtitlesRoot}${path.sep}`)) {
+          sendJson(res, 400, { error: "Invalid SRT path" });
+          return;
+        }
+
+        await fs.promises.mkdir(path.dirname(srtPath), { recursive: true });
+        await fs.promises.writeFile(srtPath, data.content, "utf8");
+        sendJson(res, 200, { success: true });
+      } catch (err) {
+        const status = err instanceof SyntaxError ? 400 : 500;
+        const message = err instanceof Error ? err.message : "Unknown error";
+        sendJson(res, status, { error: message });
+      }
+    });
+  },
+});
+
+interface SrtPayload {
+  voice: string;
+  language: string;
+  content: string;
+}
+
+function isSrtPayload(data: unknown): data is SrtPayload {
+  if (!data || typeof data !== "object") return false;
+
+  const payload = data as Partial<SrtPayload>;
+  return (
+    typeof payload.voice === "string" &&
+    SRT_VOICES.has(payload.voice) &&
+    typeof payload.language === "string" &&
+    SRT_LANGUAGES.has(payload.language) &&
+    typeof payload.content === "string"
+  );
+}
+
 export default defineConfig({
-  plugins: [react(), saveMapPlugin()],
+  plugins: [react(), saveMapPlugin(), saveSrtPlugin()],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),