plugin v1.0.1

assets/js/creations/main.js

@@ -1,6 +1,5 @@
-// js/main.js (ESM com import absoluto de socket.js + ROOM_NAME local)
-
-import { appState } from "./state.js";
+// js/main.js
+import { appState, loadStateFromSession } from "./state.js"; // <--- Importe loadStateFromSession
 import {
   updateTransportLoop,
   restartAudioEditorIfPlaying,
@@ -17,44 +16,55 @@ import { renderAudioEditor } from "./audio/audio_ui.js";
 import { adjustValue, enforceNumericInput } from "./utils.js";
 import { ZOOM_LEVELS } from "./config.js";
 import { loadProjectFromServer } from "./file.js";
-
-// ⚠️ IMPORT ABSOLUTO para evitar 404/text/html quando a página estiver em /creation/ ou fora dela.
-// Ajuste o prefixo abaixo para o caminho real onde seus assets vivem no servidor:
 import { sendAction, joinRoom, setUserName } from "./socket.js";
-
-import { renderActivePatternToBlob } from "./pattern/pattern_audio.js"; // <-- ADICIONE ESTA LINHA
+import { renderActivePatternToBlob } from "./pattern/pattern_audio.js";
 import { showToast } from "./ui.js";
 import { toggleRecording } from "./recording.js"
+import * as Tone from "https://esm.sh/tone"; // Adicione o Tone aqui se não estiver global
 
-// Descobre a sala pela URL (local ao main.js) e expõe no window para debug
 const ROOM_NAME = new URLSearchParams(window.location.search).get("room");
 window.ROOM_NAME = ROOM_NAME;
 
 const PROJECT_NAME = new URLSearchParams(window.location.search).get("project");
 
-if (PROJECT_NAME) {
-  // O nome do projeto deve corresponder ao arquivo no servidor, por ex: "mmp/nome-do-seu-projeto-salvo.mmp"
-  // O arquivo 'file.js' já espera que loadProjectFromServer receba apenas o nome
-  // do arquivo dentro da pasta 'mmp/' (ex: 'nome-do-projeto.mmp').
-  console.log(`[MAIN] Carregando projeto do servidor: ${PROJECT_NAME}`);
-  // Adicione a extensão se ela não estiver no link
-  const filename =
-    PROJECT_NAME.endsWith(".mmp") || PROJECT_NAME.endsWith(".mmpz")
-      ? PROJECT_NAME
-      : `${PROJECT_NAME}.mmp`;
+// --- LÓGICA DE INICIALIZAÇÃO ---
 
-  // Chama a função de file.js para carregar (que já envia a ação 'LOAD_PROJECT')
-  loadProjectFromServer(filename);
-}
+// Função autoinvocada assíncrona para gerenciar o carregamento inicial
+(async function initApp() {
+    
+    let restored = false;
 
-// ✅ NOVO: se tem sala na URL, entra já na sala (independe do áudio)
+    // 1. Se houver sala, tenta restaurar o backup do F5 primeiro
+    if (ROOM_NAME) {
+        restored = await loadStateFromSession();
+        if (restored) {
+            showToast("🔄 Sessão restaurada (F5)", "success");
+            // Se restaurou, renderiza tudo e não carrega mais nada
+            renderAll();
+            updateToolButtons();
+            
+            // Sincroniza o botão de modo (Global/Local) com o estado restaurado
+            const syncModeBtn = document.getElementById("sync-mode-btn");
+            if (syncModeBtn && appState.global.syncMode) {
+                syncModeBtn.textContent = appState.global.syncMode === "global" ? "Global" : "Local";
+                syncModeBtn.classList.toggle("active", appState.global.syncMode === "global");
+            }
+        }
+        // Entra na sala socket (mesmo se restaurou, precisa reconectar o socket)
+        joinRoom();
+    }
 
-if (ROOM_NAME) {
-  // entra na sala para receber estado/broadcasts imediatamente
-  joinRoom();
-}
+    // 2. Se NÃO restaurou e tem um projeto na URL, carrega do servidor
+    if (!restored && PROJECT_NAME) {
+        console.log(`[MAIN] Carregando projeto do servidor: ${PROJECT_NAME}`);
+        const filename = PROJECT_NAME.endsWith(".mmp") || PROJECT_NAME.endsWith(".mmpz")
+            ? PROJECT_NAME
+            : `${PROJECT_NAME}.mmp`;
+        loadProjectFromServer(filename);
+    }
+
+})(); // Fim do initApp
 
-// Função util para alternar estado dos botões de ferramenta
 function updateToolButtons() {
   const sliceToolBtn = document.getElementById("slice-tool-btn");
   const trimToolBtn = document.getElementById("resize-tool-trim");
@@ -115,16 +125,13 @@ document.addEventListener("DOMContentLoaded", () => {
 
   if (recordBtn) {
     recordBtn.addEventListener('click', async () => {
-        // PASSO CRÍTICO: O navegador exige isso antes de gravar
         if (Tone.context.state !== 'running') {
             await Tone.start();
             console.log("Audio Context iniciado via clique.");
         }
-        
-        // Chama a função que você criou no recording.js
         toggleRecording();
     });
-    } else {
+  } else {
         console.error("Botão de gravação (#record-btn) não encontrado no DOM.");
     }
 
@@ -564,6 +571,8 @@ document.addEventListener("DOMContentLoaded", () => {
     // if (syncModeBtn) syncModeBtn.style.display = "none";
   }
 
+  loadAndRenderSampleBrowser();
+
   renderAll();
   updateToolButtons();
 });