renderizando projetos no mmpCreator utilizando o lmms

assets/js/creations/main.js

@@ -129,6 +129,82 @@ document.addEventListener("DOMContentLoaded", () => {
   const removePatternBtn = document.getElementById("remove-pattern-btn"); 
   const downloadPackageBtn = document.getElementById("download-package-btn");
 
+
+  // Render 
+  const renderAudioBtn = document.getElementById("render-audio-btn");
+
+  renderAudioBtn?.addEventListener("click", async () => {
+  const fmt = (prompt("Formato: wav / mp3 / ogg / flac", "wav") || "")
+    .trim()
+    .toLowerCase();
+
+  if (!fmt) return;
+
+  const allowed = new Set(["wav", "mp3", "ogg", "flac"]);
+  const format = allowed.has(fmt) ? fmt : "wav";
+
+  const originalIcon = renderAudioBtn.className;
+  renderAudioBtn.className = "fa-solid fa-spinner fa-spin";
+  renderAudioBtn.style.pointerEvents = "none";
+
+  try {
+    showToast("🎛️ Renderizando no LMMS (servidor)...", "info", 4000);
+
+    // mesma lógica do socket: room vem da URL
+    const roomName = new URLSearchParams(window.location.search).get("room");
+
+    // usa a mesma porta do socket (o socket.js usa PORT_SOCK) :contentReference[oaicite:7]{index=7}
+    // se você não quiser mexer em imports, dá pra trocar por ':33001' direto.
+    const baseUrl = `https://${window.location.hostname}:33001`;
+
+    const body = {
+      roomName: roomName || null,
+      format,
+      name:
+        appState.global?.currentBeatBasslineName ||
+        appState.global?.projectName ||
+        "projeto",
+    };
+
+    const resp = await fetch(`${baseUrl}/render`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+
+    if (!resp.ok) {
+      const txt = await resp.text();
+      throw new Error(txt || `HTTP ${resp.status}`);
+    }
+
+    const blob = await resp.blob();
+
+    // tenta usar filename vindo do Content-Disposition
+    let filename = `projeto.${format}`;
+    const cd = resp.headers.get("Content-Disposition");
+    const m = cd && /filename="?([^"]+)"?/i.exec(cd);
+    if (m?.[1]) filename = m[1];
+
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 1500);
+
+    showToast("✅ Render concluído!", "success", 3000);
+  } catch (e) {
+    console.error(e);
+    showToast("❌ Falha ao renderizar no LMMS.", "error", 6000);
+    alert("Falha ao renderizar no LMMS. Veja o console para detalhes.");
+  } finally {
+    renderAudioBtn.className = originalIcon;
+    renderAudioBtn.style.pointerEvents = "auto";
+  }
+});
+
   // Download projeto
   downloadPackageBtn?.addEventListener("click", generateMmpFile);
 
@@ -369,7 +445,7 @@ document.addEventListener("DOMContentLoaded", () => {
     if (file) handleFileLoad(file).then(() => closeOpenProjectModal());
   });
   uploadSampleBtn?.addEventListener("click", () => sampleFileInput?.click());
-  saveMmpBtn?.addEventListener("click", renderProjectAndDownload);
+  saveMmpBtn?.addEventListener("click", generateMmpFile);
 
   addInstrumentBtn?.addEventListener("click", () => {
     initializeAudioContext();