Update static/script.js

static/script.js

@@ -7,8 +7,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const subtitleContainer = document.getElementById('subtitle-container');
     const historyList = document.getElementById('history-list');
     
-    // 話者データキャッシュ (letに変更して上書き可能に)
-    let speakerData = {}; 
+    // 話者データキャッシュ: { "Speaker 1": { name: "Aさん", color: "#..." }, ... }
+    const speakerData = {}; 
 
     // UI要素
     const hamburger = document.querySelector('.hamburger');
@@ -22,7 +22,6 @@ document.addEventListener('DOMContentLoaded', () => {
     const transparency = document.getElementById('textBackground_transparency');
     const theaterBtn = document.getElementById('theaterToggle');
     const bgSelect = document.getElementById('backgroundColor');
-    const resetSpeakersBtn = document.getElementById('resetSpeakersBtn');
 
     let currentFontSize = '24px';
     
@@ -47,31 +46,34 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
     if (bgSelect) bgSelect.addEventListener('change', updateTheme);
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
     updateTheme();
 
     // --- Socketイベント ---
     socket.on('connect', () => {
-        socket.emit('request_speaker_profiles');
+        // 再接続時にリセット
+        subtitleContainer.innerHTML = '';
+        historyList.innerHTML = '';
     });
 
+    // 初期プロファイル受信 (IDベースで管理)
     socket.on('initial_speaker_profiles', (profiles) => {
-        // 既存データを上書き
-        speakerData = profiles || {};
+        // profiles = { "Speaker 1": { name: "Aさん", color: "..." }, ... }
+        Object.assign(speakerData, profiles);
         updateSpeakerColorUI();
     });
 
+    // 字幕受信
     socket.on('new_subtitle', (data) => {
         if (!data || !subtitleContainer) return;
         
-        // サーバーから送られてきた話者が手元にない場合、リロード要求
+        // ローカルデータも最新化（念のため）
         if (!speakerData[data.speaker_id]) {
-            socket.emit('request_speaker_profiles');
+            speakerData[data.speaker_id] = { name: data.speaker, color: data.color };
+            updateSpeakerColorUI();
         }
 
-        const info = speakerData[data.speaker_id] || { name: data.speaker, color: data.color };
-        const displayName = info.name;
-        const displayColor = info.color;
+        const displayName = speakerData[data.speaker_id].name;
+        const displayColor = speakerData[data.speaker_id].color;
 
         // 履歴
         if (historyList) {
@@ -81,7 +83,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;
@@ -95,19 +97,25 @@ document.addEventListener('DOMContentLoaded', () => {
         setTimeout(() => p.remove(), 5000);
     });
 
+    // 名前変更反映
     socket.on("speaker_name_changed", data => {
         const { id, new_name } = data;
         if (speakerData[id]) {
             speakerData[id].name = new_name;
+            // UI上の名前入力欄だけ更新
             const input = document.getElementById(`name-input-${id}`);
-            if (input && input.value !== new_name) input.value = new_name;
+            if (input && input.value !== new_name) {
+                input.value = new_name;
+            }
         }
     });
 
+    // 色変更反映
     socket.on("speaker_color_changed", data => {
         const { id, color } = data;
         if (speakerData[id]) {
             speakerData[id].color = color;
+            // UI上の色入力欄だけ更新
             const bgDiv = document.getElementById(`color-box-${id}`);
             const input = document.getElementById(`color-input-${id}`);
             if (bgDiv) bgDiv.style.backgroundColor = color;
@@ -122,6 +130,7 @@ document.addEventListener('DOMContentLoaded', () => {
         const container = document.getElementById("speakerColorSettings");
         if (!container) return;
 
+        // 既存のIDセット
         const existingIds = new Set();
         container.querySelectorAll('.speaker-setting-row').forEach(el => {
             existingIds.add(el.dataset.speakerId);
@@ -129,44 +138,53 @@ document.addEventListener('DOMContentLoaded', () => {
 
         Object.keys(speakerData).forEach(speakerId => {
             const info = speakerData[speakerId];
+            
+            // 既にUIが存在する場合はスキップ（再描画するとフォーカスが外れるため）
             if (existingIds.has(speakerId)) {
-                existingIds.delete(speakerId);
+                existingIds.delete(speakerId); // 処理済みとしてマーク
                 return; 
             }
 
+            // 新���作成
             const row = document.createElement("div");
             row.className = "speaker-setting-row";
-            row.dataset.speakerId = speakerId;
+            row.dataset.speakerId = speakerId; // IDを埋め込む
 
+            // 名前入力
             const nameInput = document.createElement("input");
             nameInput.type = "text";
             nameInput.value = info.name;
             nameInput.id = `name-input-${speakerId}`;
             nameInput.className = "speaker-name-input";
             
+            // 変更確定時のみ送信 (Enter or FocusOut)
             nameInput.addEventListener("change", () => {
                 const newName = nameInput.value.trim();
                 if (newName) {
                     socket.emit("update_speaker_name", { id: speakerId, new_name: newName });
                 } else {
-                    nameInput.value = speakerData[speakerId].name;
+                    nameInput.value = speakerData[speakerId].name; // 空なら戻す
                 }
             });
 
+            // カラーボックス
             const colorBox = document.createElement("div");
             colorBox.className = "color-preview-box";
             colorBox.id = `color-box-${speakerId}`;
             colorBox.style.backgroundColor = info.color;
 
+            // カラーピッカー
             const colorInput = document.createElement("input");
             colorInput.type = "color";
             colorInput.value = info.color;
             colorInput.id = `color-input-${speakerId}`;
             colorInput.className = "color-picker-hidden";
             
+            // ★重要: inputイベントでローカル反映(ドラッグ中)、changeで送信(決定)
             colorInput.addEventListener("input", (e) => {
                 colorBox.style.backgroundColor = e.target.value;
             });
+            
             colorInput.addEventListener("change", (e) => {
                 const newColor = e.target.value;
                 speakerData[speakerId].color = newColor;
@@ -179,7 +197,7 @@ document.addEventListener('DOMContentLoaded', () => {
             container.appendChild(row);
         });
 
-        // 存在しなくなった要素を削除
+        // 存在しなくなったIDの要素を削除（もしあれば）
         existingIds.forEach(oldId => {
             const el = container.querySelector(`.speaker-setting-row[data-speaker-id="${oldId}"]`);
             if (el) el.remove();
@@ -187,16 +205,6 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // --- ボタン操作 ---
-    if (resetSpeakersBtn) {
-        resetSpeakersBtn.addEventListener('click', () => {
-            if(confirm("話者設定をリセットしますか？")) {
-                speakerData = {}; // ローカルクリア
-                document.getElementById("speakerColorSettings").innerHTML = "";
-                socket.emit('reset_speakers');
-            }
-        });
-    }
-
     if (startForm) {
         startForm.addEventListener('submit', (e) => {
             e.preventDefault();
@@ -233,6 +241,7 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
+    // --- 設定変更 ---
     function sendSettings() {
         socket.emit('update_settings', {
             target_lang: subtitleLangSelect.value,
@@ -240,14 +249,9 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
     if (subtitleLangSelect) subtitleLangSelect.addEventListener('change', sendSettings);
-    
-    // 話者数変更時はリセットするか確認してもいいが、ここでは設定送信のみ
-    // もし人数を減らして即反映させたいなら、サーバー側でトリミングが必要
-    if (maxSpeakersSelect) maxSpeakersSelect.addEventListener('change', () => {
-        sendSettings();
-    });
+    if (maxSpeakersSelect) maxSpeakersSelect.addEventListener('change', sendSettings);
 
-    // デザイン反映
+    // --- デザイン反映 ---
     function hexToRgba(hex, alpha) {
         hex = hex.replace(/^#/, '');
         if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
@@ -269,7 +273,12 @@ document.addEventListener('DOMContentLoaded', () => {
         const updatePreview = () => { if(textBgPreview) textBgPreview.style.backgroundColor = textBackground.value; };
 
         textBackgroundCheck.addEventListener('change', updateAll);
-        textBackground.addEventListener('input', () => { updateAll(); updatePreview(); });
+        
+        textBackground.addEventListener('input', () => {
+            updateAll();
+            updatePreview();
+        });
+        
         transparency.addEventListener('input', updateAll);
         updatePreview();
     }