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)
  // ============================================================