Feat/Fix: Adiciona histórico com exclusão para o Estúdio Musical e melhora prompt de voz (PT-BR infantil nativo)

2026-06-05 19:01:18 +00:00
parent 2b697cacae
commit 4ba98c1545
4 changed files with 168 additions and 7 deletions
@@ -3698,6 +3698,89 @@ const initApp = () => {
    });
  }

+  // =====================================
+  // HISTÓRICO DO ESTÚDIO MUSICAL
+  // =====================================
+  const btnOpenEstudioHistory = document.getElementById('btnOpenEstudioHistory');
+  const estudioHistoryModal = document.getElementById('estudioHistoryModal');
+  const btnCloseEstudioHistory = document.getElementById('btnCloseEstudioHistory');
+  const estudioHistoryList = document.getElementById('estudioHistoryList');
+
+  if (btnOpenEstudioHistory) {
+    btnOpenEstudioHistory.addEventListener('click', async () => {
+      estudioHistoryModal.style.display = 'flex';
+      estudioHistoryList.innerHTML = '<div style="text-align: center; color: var(--text-secondary); padding: 20px;">Carregando histórico...</div>';
+      try {
+        const res = await fetch('/api/music/list');
+        const data = await res.json();
+        estudioHistoryList.innerHTML = '';
+        if (data.length === 0) {
+          estudioHistoryList.innerHTML = '<div style="text-align: center; color: var(--text-secondary); padding: 20px;">Nenhuma canção salva ainda no estúdio.</div>';
+          return;
+        }
+        data.forEach(item => {
+          const div = document.createElement('div');
+          div.style.background = 'var(--bg-tertiary)';
+          div.style.padding = '12px 15px';
+          div.style.borderRadius = '8px';
+          div.style.display = 'flex';
+          div.style.justifyContent = 'space-between';
+          div.style.alignItems = 'center';
+          div.innerHTML = `
+            <div style="flex: 1; margin-right: 15px;">
+              <div style="font-weight: 600; font-size: 0.95rem; color: var(--text-primary);">🎵 ${item.tema || 'Música'}</div>
+              <div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;">Voz: ${item.voz} | Ritmo: ${item.ritmo}</div>
+              <div style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px;">${new Date(item.created_at).toLocaleString()}</div>
+            </div>
+            <div style="display: flex; gap: 8px;">
+              <button class="btn-ver-estudio btn-secondary" data-id="${item.id}" style="padding: 6px 12px; font-size: 0.85rem; border-radius: 6px;">Ver/Ouvir</button>
+              <button class="btn-del-estudio btn-secondary" data-id="${item.id}" style="padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; color: #ef4444; border-color: rgba(239, 68, 68, 0.3);">🗑️</button>
+            </div>
+          `;
+          estudioHistoryList.appendChild(div);
+        });
+
+        document.querySelectorAll('.btn-ver-estudio').forEach(btn => {
+          btn.addEventListener('click', async (e) => {
+            const id = e.target.dataset.id;
+            try {
+              const res = await fetch(`/api/music/${id}`);
+              const itemData = await res.json();
+              
+              musicStudioLyricsArea.textContent = itemData.letra;
+              musicStudioAudioPlayer.src = itemData.audio_url;
+              musicStudioDownloadBtn.href = itemData.audio_url;
+              musicResultArea.style.display = 'flex';
+              
+              estudioHistoryModal.style.display = 'none';
+            } catch (err) { alert('Erro ao carregar música do estúdio.'); }
+          });
+        });
+
+        document.querySelectorAll('.btn-del-estudio').forEach(btn => {
+          btn.addEventListener('click', async (e) => {
+            if(!confirm('Tem certeza que deseja apagar esta canção?')) return;
+            const id = e.target.dataset.id;
+            try {
+              await fetch(`/api/music/${id}`, { method: 'DELETE' });
+              e.target.closest('div[style*="var(--bg-tertiary)"]').remove();
+            } catch (err) { alert('Erro ao deletar.'); }
+          });
+        });
+
+      } catch (err) {
+        estudioHistoryList.innerHTML = '<div style="color: #ef4444; padding: 20px;">Erro ao carregar histórico.</div>';
+      }
+    });
+  }
+
+  if (btnCloseEstudioHistory) {
+    btnCloseEstudioHistory.addEventListener('click', () => {
+      estudioHistoryModal.style.display = 'none';
+    });
+  }
+
+
  // ============================================================
  // FÁBRICA DE QUADRINHOS (Criação de histórias visuais pedagógicas)
  // ============================================================
@@ -655,7 +655,12 @@
    <div class="settings-modal-content" style="max-width: 600px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
      <div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">
        <h3 style="display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;">🎵 Estúdio Musical PedaGog</h3>
-        <button id="btnCloseEstudioModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
+        <div style="display: flex; gap: 10px; align-items: center;">
+          <button id="btnOpenEstudioHistory" class="btn-secondary" style="padding: 6px 12px; font-size: 0.85rem; border-radius: 6px; display: flex; align-items: center; gap: 6px; background: rgba(168, 85, 247, 0.1); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.2);">
+            🕒 Histórico
+          </button>
+          <button id="btnCloseEstudioModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
+        </div>
      </div>
      <div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
        
@@ -736,6 +741,21 @@
    </div>
  </div>

+  <!-- Modal: Histórico Estúdio Musical -->
+  <div id="estudioHistoryModal" class="settings-modal" style="display: none; z-index: 20000;">
+    <div class="settings-modal-content" style="max-width: 600px; width: 95%; max-height: 80vh; display: flex; flex-direction: column;">
+      <div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">
+        <h3 style="display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;">🕒 Histórico do Estúdio</h3>
+        <button id="btnCloseEstudioHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
+      </div>
+      <div class="settings-modal-body" style="padding: 20px; overflow-y: auto; flex: 1;">
+        <div id="estudioHistoryList" style="display: flex; flex-direction: column; gap: 10px;">
+          <!-- Preenchido dinamicamente -->
+        </div>
+      </div>
+    </div>
+  </div>
+
  <!-- Modal: Estúdio de Poesia -->
  <!-- ========================================== -->
  <!-- MODAL: MUSICANDO IDEIAS -->
@@ -1,4 +1,4 @@
-const CACHE_NAME = 'camila-ai-v5';
+const CACHE_NAME = 'camila-ai-v6';
 const urlsToCache = [
  '/',
  '/index.html',