From 485c35c4e808f67b92ed4c463852e193bfab49a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Henrique?= <joaohenrique@Mac-mini-de-Joao.local>
Date: Thu, 10 Sep 2026 09:19:08 -0400
Subject: [PATCH] feat: aprimorado o preview de falantes na tela Refinar para
 reprod
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- aprimorado o preview de falantes na tela Refinar para reproduzir os trechos do vídeo

Resumo:
- 6 arquivos alterados
- 2 novos
- 4 modificados
- 0 removidos

 4 files changed, 97 insertions(+), 11 deletions(-)

Arquivos:
  - .jhonny/analises.db
  - code/cep-plugin/index.html
  - code/cep-plugin/main.js
  - code/cep-plugin/styles.css
  - .jhonny/analises.db-shm
  - .jhonny/analises.db-wal
---
 .jhonny/analises.db        | Bin 1069056 -> 1069056 bytes
 .jhonny/analises.db-shm    | Bin 0 -> 32768 bytes
 .jhonny/analises.db-wal    |   0
 code/cep-plugin/index.html |  10 ++--
 code/cep-plugin/main.js    |  95 +++++++++++++++++++++++++++++++++----
 code/cep-plugin/styles.css |   3 ++
 6 files changed, 97 insertions(+), 11 deletions(-)
 create mode 100644 .jhonny/analises.db-shm
 create mode 100644 .jhonny/analises.db-wal

diff --git a/.jhonny/analises.db b/.jhonny/analises.db
index 157493012a976d92f5ab910b8819d47202073c8c..90ed3219c2a4d1954e91ac5fbb1c5efc2f3f596c 100644
GIT binary patch
delta 83
zcmWN=ITe5~6h*-w_I;_bkPZb=fQ4%S4^X@w9K-}}5CiAT95Ea*T+8guTyAFX-~IO6
fug;$cClZm0Oyr^vrKm(L8qtbQ^kNX>!xXm<a=8}q

delta 83
zcmWN=ITe5~6h*-wAna>Fg#|hkL;)7A6ewN~4q^f~h=Dn0ju?&@u4S6doHw)g@BYud
fZf-siP9!1~neZYPg(yWOYSD;RbfOo-!x;AucV!m}

diff --git a/.jhonny/analises.db-shm b/.jhonny/analises.db-shm
new file mode 100644
index 0000000000000000000000000000000000000000..fe9ac2845eca6fe6da8a63cd096d9cf9e24ece10
GIT binary patch
literal 32768
zcmeIuAr62r3<XeTSayS60=Z=O-0|kP2&fu@!6Du^ziFC^7w55MN)9hQYV3Wk79a2P
z)%8g3H30$y2oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk
z1PBlyK!5-N0t5&UAV7cs0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs
w0RjXF5FkK+009C72oNAZfB*pk1PBlyK!5-N0t5&UAV7cs0RjXF5cq?@4dk5`Qvd(}

literal 0
HcmV?d00001

diff --git a/.jhonny/analises.db-wal b/.jhonny/analises.db-wal
new file mode 100644
index 0000000..e69de29
diff --git a/code/cep-plugin/index.html b/code/cep-plugin/index.html
index 9ba3c91..22897d6 100755
--- a/code/cep-plugin/index.html
+++ b/code/cep-plugin/index.html
@@ -360,20 +360,24 @@
     </div>
     <!-- =============================== REFINAR ============================== -->
     <div class="tab-panel" id="tabRefinar" role="tabpanel" aria-labelledby="tabBtnRefinar" hidden>
-      <p class="tab-intro">Confirme quem são os falantes antes de editar. O áudio reproduz somente os trechos identificados de cada pessoa.</p>
+      <p class="tab-intro">Confirme quem são os falantes antes de editar. O preview reproduz somente os trechos identificados de cada pessoa.</p>
       <section class="card scanner-analysis-card">
         <div class="card-head"><h2>Falantes da análise</h2><span class="step-chip" id="refinarStatus">Aguardando análise</span></div>
         <p class="field-help" id="refinarInfo">Carregue a análise mais recente do Scanner para consultar os falantes detectados.</p>
         <div class="refinar-actions">
           <button id="btnRefinarLoad" class="button button-primary" onclick="refinarCarregarAnalise()" type="button">Carregar análise do Scanner</button>
-          <button id="btnRefinarStopAudio" class="button" onclick="stopSpeakerAudio()" type="button">Parar áudio</button>
+          <button id="btnRefinarStopAudio" class="button" onclick="stopSpeakerAudio()" type="button">Parar preview</button>
         </div>
       </section>
       <section class="card" id="refinarSpeakerCard">
         <div class="card-head"><h2>Identificar falantes</h2><span class="card-kicker" id="refinarSpeakerCount">Nenhum falante carregado</span></div>
-        <p class="field-help">Use o botão de reprodução para reconhecer a voz, informe um nome e escolha quem poderá aparecer no vídeo. A identificação será usada ao gerar o JSON de edição.</p>
+        <p class="field-help">Use o botão de reprodução para conferir a imagem e a voz de cada falante, informe um nome e escolha quem poderá aparecer no vídeo. A identificação será usada ao gerar o JSON de edição.</p>
         <div class="callout callout-info" id="refinarSpeakerEmpty"><strong>Nenhum falante identificado</strong><p>A análise carregada não possui diarização. Execute a diarização no Scanner para liberar esta etapa.</p></div>
         <div class="speaker-config" id="refinarSpeakerConfig" hidden>
+          <div class="speaker-video-preview" id="refinarSpeakerPreview" hidden>
+            <video id="refinarSpeakerVideo" controls preload="metadata" playsinline></video>
+            <p class="field-help" id="refinarSpeakerPreviewInfo">Reproduzindo os trechos do falante selecionado.</p>
+          </div>
           <div id="refinarSpeakerList"></div>
           <button id="btnRefinarSave" class="button button-primary" onclick="refinarSalvarFalantes()" type="button">Salvar identificação</button>
         </div>
diff --git a/code/cep-plugin/main.js b/code/cep-plugin/main.js
index dec02ea..c75a650 100755
--- a/code/cep-plugin/main.js
+++ b/code/cep-plugin/main.js
@@ -2376,6 +2376,8 @@ function atualizarTelaRefinar(falantes, audioDoBanco) {
 
 var speakerAudioPlayer = null;
 var speakerAudioQueue = null;
+var speakerVideoPlayer = null;
+var speakerVideoQueue = null;
 
 // ---- Central transcript cache ----
 // Evita rodar o Whisper de novo para um vídeo já transcrito antes: indexa
@@ -2982,10 +2984,13 @@ function renderSpeakerConfiguration(speakerIds, speakerTurns, alvo) {
     var play = document.createElement("button");
     play.type = "button";
     play.className = "button speaker-play-button";
-    play.textContent = "▶";
-    play.title = "Ouvir trechos de " + speaker.id;
-    play.setAttribute("aria-label", "Ouvir trechos de " + speaker.id);
-    play.addEventListener("click", function () { toggleSpeakerAudio(speaker.id, play); });
+    play.textContent = alvo.video ? "▶ vídeo" : "▶ áudio";
+    play.title = (alvo.video ? "Ver" : "Ouvir") + " trechos de " + speaker.id;
+    play.setAttribute("aria-label", (alvo.video ? "Ver" : "Ouvir") + " trechos de " + speaker.id);
+    play.addEventListener("click", function () {
+      if (alvo.video) toggleSpeakerVideo(speaker.id, play);
+      else toggleSpeakerAudio(speaker.id, play);
+    });
     var input = document.createElement("input");
     input.type = "text";
     input.className = "select-field speaker-name-input";
@@ -3020,12 +3025,12 @@ function renderSpeakerConfiguration(speakerIds, speakerTurns, alvo) {
   var refineConfig = document.getElementById("refinarSpeakerConfig");
   if (refineConfig && config.id !== refineConfig.id) {
     renderSpeakerConfiguration(speakerIds, speakerTurns, {
-      config: "refinarSpeakerConfig", list: "refinarSpeakerList", count: "refinarSpeakerCount"
+      config: "refinarSpeakerConfig", list: "refinarSpeakerList", count: "refinarSpeakerCount", video: true
     });
   }
 }
 
-function speakerAudioFileUrl(filePath) {
+function speakerMediaFileUrl(filePath) {
   return encodeURI("file://" + String(filePath || ""));
 }
 
@@ -3037,12 +3042,86 @@ function stopSpeakerAudio() {
   }
   speakerAudioPlayer = null;
   speakerAudioQueue = null;
+  if (speakerVideoPlayer) {
+    speakerVideoPlayer.pause();
+    speakerVideoPlayer.onloadedmetadata = null;
+    speakerVideoPlayer.ontimeupdate = null;
+    speakerVideoPlayer.onended = null;
+    speakerVideoPlayer.onerror = null;
+    speakerVideoPlayer.removeAttribute("src");
+    speakerVideoPlayer.load();
+  }
+  speakerVideoPlayer = null;
+  speakerVideoQueue = null;
+  var videoPreview = document.getElementById("refinarSpeakerPreview");
+  if (videoPreview) videoPreview.hidden = true;
   document.querySelectorAll(".speaker-play-button").forEach(function (button) {
-    button.textContent = "▶";
+    button.textContent = button.closest("#refinarSpeakerList") ? "▶ vídeo" : "▶ áudio";
     button.classList.remove("is-playing");
   });
 }
 
+function toggleSpeakerVideo(speakerId, button) {
+  if (speakerVideoPlayer && speakerVideoQueue && speakerVideoQueue.speakerId === speakerId) {
+    stopSpeakerAudio();
+    return;
+  }
+  stopSpeakerAudio();
+  var ranges = silenceState.speakerTurns.filter(function (turn) {
+    return turn.speaker === speakerId && Number(turn.end) > Number(turn.start);
+  }).sort(function (a, b) { return Number(a.start) - Number(b.start); });
+  if (!ranges.length) {
+    showToast("err", "Não há intervalos de vídeo disponíveis para " + speakerId + ".");
+    return;
+  }
+  if (!silenceState.mediaPath || !fs.existsSync(silenceState.mediaPath)) {
+    showToast("err", "Arquivo de vídeo da análise não encontrado.");
+    return;
+  }
+  var video = document.getElementById("refinarSpeakerVideo");
+  var preview = document.getElementById("refinarSpeakerPreview");
+  var info = document.getElementById("refinarSpeakerPreviewInfo");
+  if (!video || !preview) {
+    showToast("err", "Preview de vídeo indisponível nesta versão do painel.");
+    return;
+  }
+  speakerVideoQueue = { speakerId: speakerId, ranges: ranges, index: 0, button: button };
+  speakerVideoPlayer = video;
+  preview.hidden = false;
+  if (info) info.textContent = "Reproduzindo os trechos de " + speakerId + ".";
+  video.src = speakerMediaFileUrl(silenceState.mediaPath);
+  button.textContent = "■ vídeo";
+  button.classList.add("is-playing");
+  video.onloadedmetadata = playCurrentSpeakerVideoRange;
+  video.ontimeupdate = advanceSpeakerVideoRange;
+  video.onended = advanceSpeakerVideoRange;
+  video.onerror = function () {
+    stopSpeakerAudio();
+    showToast("err", "Não foi possível reproduzir o vídeo deste falante.");
+  };
+}
+
+function playCurrentSpeakerVideoRange() {
+  if (!speakerVideoPlayer || !speakerVideoQueue) return;
+  var range = speakerVideoQueue.ranges[speakerVideoQueue.index];
+  if (!range) { stopSpeakerAudio(); return; }
+  speakerVideoPlayer.currentTime = Math.max(0, Number(range.start) - 0.15);
+  var playPromise = speakerVideoPlayer.play();
+  if (playPromise && playPromise.catch) playPromise.catch(function () { stopSpeakerAudio(); });
+}
+
+function advanceSpeakerVideoRange() {
+  if (!speakerVideoPlayer || !speakerVideoQueue) return;
+  var range = speakerVideoQueue.ranges[speakerVideoQueue.index];
+  if (!range || speakerVideoPlayer.currentTime < Number(range.end)) return;
+  speakerVideoQueue.index += 1;
+  if (speakerVideoQueue.index >= speakerVideoQueue.ranges.length) {
+    stopSpeakerAudio();
+    return;
+  }
+  playCurrentSpeakerVideoRange();
+}
+
 function toggleSpeakerAudio(speakerId, button) {
   if (speakerAudioPlayer && speakerAudioQueue && speakerAudioQueue.speakerId === speakerId) {
     stopSpeakerAudio();
@@ -3061,7 +3140,7 @@ function toggleSpeakerAudio(speakerId, button) {
     return;
   }
   speakerAudioQueue = { speakerId: speakerId, ranges: ranges, index: 0, button: button };
-  speakerAudioPlayer = new Audio(speakerAudioFileUrl(silenceState.audioCachePath));
+  speakerAudioPlayer = new Audio(speakerMediaFileUrl(silenceState.audioCachePath));
   button.textContent = "■";
   button.classList.add("is-playing");
   speakerAudioPlayer.addEventListener("loadedmetadata", playCurrentSpeakerRange);
diff --git a/code/cep-plugin/styles.css b/code/cep-plugin/styles.css
index ccc81b0..3e7d43c 100755
--- a/code/cep-plugin/styles.css
+++ b/code/cep-plugin/styles.css
@@ -491,6 +491,9 @@ textarea { padding: 8px 10px; font: 10px var(--font-mono); color: var(--text-sec
 .speaker-play-button.is-playing { color: var(--accent); }
 .speaker-name-input { width: 100%; }
 .speaker-active-field { margin: 0; padding: 6px 8px; white-space: nowrap; }
+.speaker-video-preview { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
+.speaker-video-preview video { display: block; width: 100%; max-height: 260px; border-radius: 5px; background: #000; }
+.speaker-video-preview .field-help { margin: 6px 0 0; }
 .refinar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
 .refinar-actions .button { flex: 1 1 180px; }
 #refinarSpeakerConfig .button { margin-top: 10px; }