Padronização da interface e atualização do sync entre clientes

assets/js/creations/audio/audio_ui.js

@@ -23,23 +23,43 @@ import { sendAction } from "../socket.js";
 
 export function renderAudioEditor() {
   const audioEditor = document.querySelector(".audio-editor");
-  const existingTrackContainer = document.getElementById(
-    "audio-track-container"
-  );
+  const existingTrackContainer = document.getElementById("audio-track-container");
+  
   if (!audioEditor || !existingTrackContainer) return;
 
+  // --- CORREÇÃO DO ERRO DOMException ---
+  // Identificamos quem é o pai real do container de tracks (agora é .audio-tracks-wrapper)
+  const tracksParent = existingTrackContainer.parentElement;
+
   // --- CRIAÇÃO E RENDERIZAÇÃO DA RÉGUA ---
-  let rulerWrapper = audioEditor.querySelector(".ruler-wrapper");
+  // Buscamos a régua dentro desse pai correto
+  let rulerWrapper = tracksParent.querySelector(".ruler-wrapper");
+  
   if (!rulerWrapper) {
+    // Se a régua criada pelo JS ainda não existe, cria ela
+    // (Ignora a régua estática do HTML se houver conflito, priorizando esta estrutura)
     rulerWrapper = document.createElement("div");
     rulerWrapper.className = "ruler-wrapper";
     rulerWrapper.innerHTML = `
             <div class="ruler-spacer"></div>
             <div class="timeline-ruler"></div>
         `;
-    audioEditor.insertBefore(rulerWrapper, existingTrackContainer);
+    
+    // Insere ANTES do container de tracks, dentro do pai correto
+    tracksParent.insertBefore(rulerWrapper, existingTrackContainer);
   }
 
+  // Remove a régua estática antiga se ela ainda estiver lá atrapalhando (opcional, mas recomendado)
+  const staticRuler = tracksParent.querySelector("#audio-timeline-ruler");
+  if (staticRuler && staticRuler.parentElement === tracksParent) {
+      staticRuler.remove();
+  }
+  // Remove elementos soltos antigos se existirem para evitar duplicação
+  const oldLoopRegion = tracksParent.querySelector("#loop-region");
+  const oldPlayhead = tracksParent.querySelector("#playhead");
+  if(oldLoopRegion) oldLoopRegion.remove();
+  if(oldPlayhead) oldPlayhead.remove();
+
   const ruler = rulerWrapper.querySelector(".timeline-ruler");
   ruler.innerHTML = "";
 
@@ -243,7 +263,9 @@ export function renderAudioEditor() {
 
   // Recriação Container Pistas (sem alterações)
   const newTrackContainer = existingTrackContainer.cloneNode(false);
-  audioEditor.replaceChild(newTrackContainer, existingTrackContainer);
+  
+  // Substitui no pai correto (tracksParent), não no audioEditor
+  tracksParent.replaceChild(newTrackContainer, existingTrackContainer);
 
   // Render Pistas (sem alterações)
   appState.audio.tracks.forEach((trackData) => {
@@ -725,7 +747,6 @@ export function renderAudioEditor() {
         const constrainedLeftPx = Math.max(0, newLeftPx);
         let newStartTime = constrainedLeftPx / currentPixelsPerSecond;
         newStartTime = quantizeTime(newStartTime);
-        // (Correção Bug 4 - remove Number())
         updateAudioClipProperties(clipId, {
           trackId: newTrackId,
           startTimeInSeconds: newStartTime,
@@ -756,13 +777,8 @@ export function renderAudioEditor() {
         const clickX = event.clientX - rect.left;
         const absoluteX = clickX + scrollLeft;
         const newTime = absoluteX / currentPixelsPerSecond;
-        // =================================================================
-        // 👇 INÍCIO DA CORREÇÃO (Sincronia de Seek na Pista)
-        // =================================================================
+        // Sincronia de Seek na Pista)
         sendAction({ type: "SET_SEEK_TIME", seekTime: newTime });
-        // seekAudioEditor(newTime); // 👈 Substituído
-        // =================================================================
-        // 👆 FIM DA CORREÇÃO
       };
       handleSeek(e); // Aplica no mousedown
       const onMouseMoveSeek = (moveEvent) => handleSeek(moveEvent);
@@ -856,7 +872,7 @@ export function resetPlayheadVisual() {
   });
 }
 
-// --- INÍCIO DA NOVA FUNÇÃO (Passo 4: A Função de Desenho) ---
+// --- A Função de Desenho) ---
 // (Adicionada ao final de audio_ui.js)
 
 /**
@@ -907,5 +923,4 @@ function createPatternViewElement(patternData) {
   });
 
   return view;
-}
-// --- FIM DA NOVA FUNÇÃO ---
+}