fixed a bug

sentence_api/static/dub-share.html

@@ -14,6 +14,7 @@ button{flex:1;height:44px;border:0;border-radius:10px;color:#fff;background:#256
 .sentences{display:flex;flex-direction:column;gap:8px}
 .sentence{padding:12px;border-radius:10px;background:#1c2228;color:#cbd5e1;line-height:1.5}
 .active-sentence{outline:2px solid #14b8a6;color:#fff}
+.selected-sentence{background:#334155;color:#fff}
 </style>
 
 <div class="wrap">
@@ -36,6 +37,7 @@ const sentenceList = document.getElementById('sentences');
 let dubAudio = new Audio();
 dubAudio.preload = 'auto';
 let segments = [];
+let selectedIndex = 0;
 let mode = null;
 
 function stopAll() {
@@ -51,11 +53,18 @@ function playOriginal() {
   mode = 'original';
   originalButton.classList.add('active');
   video.muted = false;
-  video.play();
+  playSelectedSentence();
 }
 
 function syncDub() {
   const timeMs = video.currentTime * 1000;
+  const sentence = segments[selectedIndex];
+  if (sentence && timeMs >= sentence.end_ms) {
+    video.pause();
+    dubAudio.pause();
+    video.currentTime = sentence.end_ms / 1000;
+    return;
+  }
   const active = segments.find(item => timeMs >= item.start_ms && timeMs < item.end_ms);
   document.querySelectorAll('.sentence').forEach((node, index) => {
     node.classList.toggle('active-sentence', segments[index] === active);
@@ -82,8 +91,16 @@ function playDubbing() {
   mode = 'dubbing';
   dubbingButton.classList.add('active');
   video.muted = true;
-  video.play();
-  syncDub();
+  playSelectedSentence();
+}
+
+function playSelectedSentence() {
+  const sentence = segments[selectedIndex];
+  if (!sentence) return;
+  video.currentTime = sentence.start_ms / 1000;
+  dubAudio.dataset.src = '';
+  dubAudio.src = '';
+  video.play().catch(() => {});
 }
 
 async function load() {
@@ -102,8 +119,15 @@ async function load() {
     segments.forEach(item => {
       const node = document.createElement('div');
       node.className = 'sentence';
+      if (item === segments[selectedIndex]) node.classList.add('selected-sentence');
       node.textContent = item.text || `第 ${item.index + 1} 句`;
-      node.onclick = () => { video.currentTime = item.start_ms / 1000; };
+      node.onclick = () => {
+        selectedIndex = segments.indexOf(item);
+        document.querySelectorAll('.sentence').forEach((other, index) => {
+          other.classList.toggle('selected-sentence', index === selectedIndex);
+        });
+        video.currentTime = item.start_ms / 1000;
+      };
       sentenceList.appendChild(node);
     });
     originalButton.onclick = playOriginal;