Update static/script.js

static/script.js

@@ -9,6 +9,9 @@ document.addEventListener('DOMContentLoaded', () => {
     
     let speakerData = {}; 
 
+    // ▼▼▼ 暫定表示用の要素ID ▼▼▼
+    const PREVIEW_ID = 'subtitle-preview-line';
+
     // UI要素
     const hamburger = document.querySelector('.hamburger');
     const nav = document.querySelector('.nav');
@@ -69,8 +72,32 @@ document.addEventListener('DOMContentLoaded', () => {
         updateSpeakerColorUI();
     });
 
+    // ▼▼▼ 修正: 字幕受信ロジックの大幅変更 ▼▼▼
     socket.on('new_subtitle', (data) => {
         if (!data || !subtitleContainer) return;
+
+        // 1. 暫定結果 (Interim) の場合
+        if (!data.is_final) {
+            let p = document.getElementById(PREVIEW_ID);
+            if (!p) {
+                p = document.createElement('p');
+                p.id = PREVIEW_ID;
+                p.className = 'subtitle-line';
+                p.style.fontSize = currentFontSize;
+                p.style.color = '#AAAAAA'; // 薄いグレー
+                p.style.fontStyle = 'italic'; // 斜体
+                subtitleContainer.appendChild(p);
+            }
+            // 暫定翻訳を表示
+            p.textContent = `... ${data.translated}`;
+            applySubtitleBackground(p);
+            return; // 履歴には追加せず終了
+        }
+
+        // 2. 確定結果 (Final) の場合
+        // 暫定表示を消す
+        const previewEl = document.getElementById(PREVIEW_ID);
+        if (previewEl) previewEl.remove();
         
         if (!speakerData[data.speaker_id]) {
             socket.emit('request_speaker_profiles');
@@ -80,7 +107,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const displayName = info.name;
         const displayColor = info.color;
 
-        // 輝度判定による色の自動調整
+        // 輝度判定
         let logNameColor = displayColor;
         const isDarkMode = document.body.classList.contains('dark-mode');
 
@@ -100,16 +127,12 @@ document.addEventListener('DOMContentLoaded', () => {
         const lum = getLuminance(logNameColor);
 
         if (isDarkMode) {
-            if (lum < 60) { 
-                logNameColor = '#FFFFFF';
-            }
+            if (lum < 60) logNameColor = '#FFFFFF';
         } else {
-            if (lum > 190) { 
-                logNameColor = '#000000'; 
-            }
+            if (lum > 190) logNameColor = '#000000'; 
         }
 
-        // 履歴
+        // 履歴に追加
         if (historyList) {
             const li = document.createElement('li');
             li.innerHTML = `<span style="font-weight:bold; color:${logNameColor}">${displayName}:</span> ${data.translated}`;
@@ -117,7 +140,7 @@ document.addEventListener('DOMContentLoaded', () => {
             if (historyList.children.length > 30) historyList.removeChild(historyList.lastChild);
         }
 
-        // 字幕
+        // 字幕表示
         const p = document.createElement('p');
         p.className = 'subtitle-line';
         p.style.fontSize = currentFontSize;
@@ -127,13 +150,22 @@ document.addEventListener('DOMContentLoaded', () => {
         applySubtitleBackground(p);
         subtitleContainer.appendChild(p);
 
+        // 古い字幕を消す
         while (subtitleContainer.children.length > 6) {
-            subtitleContainer.removeChild(subtitleContainer.firstChild);
+            // プレビュー要素以外を消す
+            const first = subtitleContainer.firstChild;
+            if (first.id === PREVIEW_ID) {
+                 if(subtitleContainer.children.length > 1) subtitleContainer.removeChild(subtitleContainer.children[1]);
+                 else break;
+            } else {
+                subtitleContainer.removeChild(first);
+            }
         }
 
         setTimeout(() => p.style.opacity = '0', 3500);
         setTimeout(() => p.remove(), 4000);
     });
+    // ▲▲▲ 修正ここまで ▲▲▲
 
     socket.on("speaker_name_changed", data => {
         const { id, new_name } = data;
@@ -332,13 +364,12 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
-    // ▼▼▼ シアターモード切替ロジック (修正) ▼▼▼
     if (document.getElementById('video-container')) {
         const container = document.getElementById('video-container');
         
         if (theaterBtn) {
             theaterBtn.addEventListener('click', () => {
-                document.body.classList.add('theater-active'); // Bodyにクラス追加
+                document.body.classList.add('theater-active');
                 container.classList.add('theater-mode');
                 container.classList.remove('normal-mode');
             });
@@ -346,7 +377,7 @@ document.addEventListener('DOMContentLoaded', () => {
         
         if (closeTheaterBtn) {
             closeTheaterBtn.addEventListener('click', () => {
-                document.body.classList.remove('theater-active'); // Bodyからクラス削除
+                document.body.classList.remove('theater-active');
                 container.classList.remove('theater-mode');
                 container.classList.add('normal-mode');
             });