Update static/script.js

static/script.js

@@ -1,318 +1,179 @@
+// YouTube Player API
+let player = null;
+let subtitleQueue = []; 
+let syncInterval = null;
+let baseTimeOffset = 0; // ライブ配信時の基準時間オフセット
+
+// API準備完了時
+function onYouTubeIframeAPIReady() {
+    // プレイヤー作成はstartForm送信時に行う
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     const socket = io();
     const startForm = document.getElementById('startForm');
     const urlInput = document.getElementById('url');
     const stopBtn = document.getElementById('stopBtn');
-    const videoFrame = document.getElementById('video-frame');
     const subtitleContainer = document.getElementById('subtitle-container');
-    const historyList = document.getElementById('history-list');
-    
-    // 話者データキャッシュ
-    let speakerData = {}; 
-
-    // UI要素
-    const hamburger = document.querySelector('.hamburger');
-    const nav = document.querySelector('.nav');
-    const subtitleSizeSelect = document.getElementById('subtitle_size');
-    const subtitleLangSelect = document.getElementById('subtitle_lang');
-    const maxSpeakersSelect = document.getElementById('max_speakers');
-    const textBackgroundCheck = document.getElementById('textBackground_check');
-    const textBackground = document.getElementById('textBackground');
-    const textBgPreview = document.getElementById('textBgPreview');
-    const transparency = document.getElementById('textBackground_transparency');
     const theaterBtn = document.getElementById('theaterToggle');
     const closeTheaterBtn = document.getElementById('closeTheaterBtn');
-    const bgSelect = document.getElementById('backgroundColor');
-    const resetSpeakersBtn = document.getElementById('resetSpeakersBtn');
-
-    let currentFontSize = '24px';
     
-    // 初期化
-    if(localStorage.getItem("savedSubtitleSize")) {
-        const s = localStorage.getItem("savedSubtitleSize");
-        if(subtitleSizeSelect) subtitleSizeSelect.value = s;
-        currentFontSize = s + 'px';
-    }
-    if(urlInput && localStorage.getItem("savedUrlInput")) {
-        urlInput.value = localStorage.getItem("savedUrlInput");
-    }
-
-    // テーマ設定
-    function updateTheme() {
-        const val = bgSelect.value;
-        const body = document.body;
-        body.classList.remove('light-mode', 'dark-mode');
-        if (val === 'black') body.classList.add('dark-mode');
-        else if (val === 'device') {
-            if (window.matchMedia('(prefers-color-scheme: dark)').matches) body.classList.add('dark-mode');
-        }
-    }
-    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');
-    });
-
-    socket.on('initial_speaker_profiles', (profiles) => {
-        speakerData = profiles || {};
-        updateSpeakerColorUI();
-    });
+    let speakerData = {}; 
 
-    socket.on('new_subtitle', (data) => {
-        if (!data || !subtitleContainer) return;
+    // --- 同期エンジンの核心 ---
+    function startSyncEngine() {
+        if (syncInterval) clearInterval(syncInterval);
         
-        if (!speakerData[data.speaker_id]) {
-            socket.emit('request_speaker_profiles');
-        }
+        // 0.1秒ごとにチェック
+        syncInterval = setInterval(() => {
+            if (!player || !player.getCurrentTime) return;
+            
+            // 現在の動画時間
+            const currentTime = player.getCurrentTime();
+            
+            // ライブ配信の場合、再生時間が「15000秒」など巨大になるため
+            // 処理開始時の時間を0秒として補正する
+            // (動画ならbaseTimeOffsetはほぼ0に近い)
+            const relativeTime = currentTime - baseTimeOffset;
+
+            // キューにある字幕をチェック
+            // 「字幕の指定時間」 <= 「現在の経過時間」 なら表示
+            const toShow = subtitleQueue.filter(item => {
+                // 許容範囲: 指定時間より0.5秒前から表示OK、10秒以上過ぎた過去のものは捨てる
+                return item.timestamp <= relativeTime + 0.5;
+            });
 
-        const info = speakerData[data.speaker_id] || { name: data.speaker, color: data.color };
-        const displayName = info.name;
-        const displayColor = info.color;
+            toShow.forEach(item => {
+                // 10秒以上遅れてる（シークで飛ばした等）字幕は表示せずに捨てる
+                if (relativeTime - item.timestamp < 10.0) {
+                    renderSubtitle(item.data);
+                }
+                item.displayed = true;
+            });
 
-        // 履歴
-        if (historyList) {
-            const li = document.createElement('li');
-            li.innerHTML = `<span style="font-weight:bold; color:${displayColor}">${displayName}:</span> ${data.translated}`;
-            historyList.prepend(li);
-            if (historyList.children.length > 50) historyList.removeChild(historyList.lastChild);
-        }
+            // 表示済みをキューから削除
+            subtitleQueue = subtitleQueue.filter(item => !item.displayed);
+
+        }, 100);
+    }
 
-        // 字幕要素作成
+    // --- 字幕レンダリング ---
+    function renderSubtitle(data) {
+        if (!subtitleContainer) return;
         const p = document.createElement('p');
         p.className = 'subtitle-line';
-        p.style.fontSize = currentFontSize;
-        p.style.color = displayColor;
-        p.textContent = `${displayName}: ${data.translated}`;
-        applySubtitleBackground(p);
+        p.style.color = data.color;
+        p.style.fontSize = '24px';
+        p.textContent = `${data.speaker}: ${data.translated}`;
+        
+        // 背景色適用
+        const bgCheck = document.getElementById('textBackground_check');
+        if(bgCheck && bgCheck.checked) {
+            p.style.backgroundColor = 'rgba(128, 128, 128, 0.75)';
+            p.style.padding = '2px 4px';
+            p.style.borderRadius = '4px';
+        }
 
-        // 字幕残留対策: 表示数を制限
         subtitleContainer.appendChild(p);
         
+        // 最大行数制限 (6行)
         while (subtitleContainer.children.length > 6) {
             subtitleContainer.removeChild(subtitleContainer.firstChild);
         }
 
-        // 表示時間を設定
+        // 5秒でフェードアウト
         setTimeout(() => p.style.opacity = '0', 4500);
         setTimeout(() => p.remove(), 5000);
-    });
-
-    socket.on("speaker_name_changed", data => {
-        const { id, new_name } = data;
-        if (speakerData[id]) {
-            speakerData[id].name = new_name;
-            const input = document.getElementById(`name-input-${id}`);
-            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;
-            const bgDiv = document.getElementById(`color-box-${id}`);
-            const input = document.getElementById(`color-input-${id}`);
-            if (bgDiv) bgDiv.style.backgroundColor = color;
-            if (input) input.value = color;
-        }
+    // --- Socket受信 ---
+    socket.on('new_subtitle', (data) => {
+        // 受信した字幕を即表示せず、タイムスタンプ付きでキューに入れる
+        subtitleQueue.push({
+            data: data,
+            timestamp: data.timestamp, // サーバーからの経過時間(0, 8, 16...)
+            displayed: false
+        });
+        // 並び替え（念のため）
+        subtitleQueue.sort((a, b) => a.timestamp - b.timestamp);
     });
 
+    socket.on('initial_speaker_profiles', (profiles) => { speakerData = profiles; });
     socket.on('error_msg', (d) => alert(d.msg));
 
-    // --- UI更新ロジック ---
-    function updateSpeakerColorUI() {
-        const container = document.getElementById("speakerColorSettings");
-        if (!container) return;
-
-        const existingIds = new Set();
-        container.querySelectorAll('.speaker-setting-row').forEach(el => {
-            existingIds.add(el.dataset.speakerId);
-        });
-
-        Object.keys(speakerData).forEach(speakerId => {
-            const info = speakerData[speakerId];
-            if (existingIds.has(speakerId)) {
-                existingIds.delete(speakerId);
-                return; 
-            }
-
-            const row = document.createElement("div");
-            row.className = "speaker-setting-row";
-            row.dataset.speakerId = speakerId;
-
-            const nameInput = document.createElement("input");
-            nameInput.type = "text";
-            nameInput.value = info.name;
-            nameInput.id = `name-input-${speakerId}`;
-            nameInput.className = "speaker-name-input";
-            
-            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;
-                }
-            });
-
-            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";
-            
-            colorInput.addEventListener("input", (e) => {
-                colorBox.style.backgroundColor = e.target.value;
-            });
-            colorInput.addEventListener("change", (e) => {
-                const newColor = e.target.value;
-                speakerData[speakerId].color = newColor;
-                socket.emit("update_speaker_color", { id: speakerId, color: newColor });
-            });
-
-            colorBox.appendChild(colorInput);
-            row.appendChild(nameInput);
-            row.appendChild(colorBox);
-            container.appendChild(row);
-        });
-
-        existingIds.forEach(oldId => {
-            const el = container.querySelector(`.speaker-setting-row[data-speaker-id="${oldId}"]`);
-            if (el) el.remove();
-        });
-    }
-
-    // --- ボタン操作 ---
-    if (resetSpeakersBtn) {
-        resetSpeakersBtn.addEventListener('click', () => {
-            if(confirm("話者設定をリセットしますか？")) {
-                speakerData = {}; 
-                document.getElementById("speakerColorSettings").innerHTML = "";
-                socket.emit('reset_speakers');
-            }
-        });
-    }
-
+    // --- プレイヤー制御 ---
     if (startForm) {
         startForm.addEventListener('submit', (e) => {
             e.preventDefault();
             const url = urlInput.value.trim();
             if (!url) return alert("URLを入力してください");
-            localStorage.setItem("savedUrlInput", url);
 
-            // 汎用Iframe埋め込み (YouTube以外も対応可能)
-            let embed = url;
-            if(url.includes('twitch.tv')) {
-                const m = url.match(/twitch\.tv\/([^\/]+)/);
-                if(m) embed = `https://player.twitch.tv/?channel=${m[1]}&parent=${location.hostname}&autoplay=true&muted=true`;
-            } else if(url.includes('youtube.com') || url.includes('youtu.be')) {
-                 const m = url.match(/(?:v=|\/)([a-zA-Z0-9_-]{11})/);
-                 if(m) embed = `https://www.youtube.com/embed/${m[1]}?autoplay=1`;
+            // YouTube ID抽出
+            let videoId = null;
+            const m = url.match(/(?:v=|\/)([^"&?\/\s]{11})/);
+            if (m) videoId = m[1];
+
+            if (!videoId) {
+                alert("現在はYouTubeのみ対応しています(同期機能のため)");
+                return;
             }
-            videoFrame.src = embed;
-            videoFrame.style.display = 'block';
-            subtitleContainer.innerHTML = '';
-            historyList.innerHTML = '';
 
-            socket.emit('start_stream', {
-                url: url,
-                target_lang: subtitleLangSelect.value,
-                max_speakers: maxSpeakersSelect ? parseInt(maxSpeakersSelect.value) : 2
+            // UIリセット
+            subtitleContainer.innerHTML = '';
+            subtitleQueue = [];
+            baseTimeOffset = 0; // リセット
+
+            // プレイヤー作成
+            if (player) { player.destroy(); }
+            player = new YT.Player('player-placeholder', {
+                height: '100%',
+                width: '100%',
+                videoId: videoId,
+                playerVars: { 'autoplay': 1, 'playsinline': 1 },
+                events: {
+                    'onReady': (event) => {
+                        event.target.playVideo();
+                        // 再生開始時点の時間を基準(0秒地点)とする
+                        // VODならほぼ0、Liveならその瞬間の絶対時間が入る
+                        baseTimeOffset = event.target.getCurrentTime();
+                        console.log("Base Time Offset:", baseTimeOffset);
+                        startSyncEngine();
+                        
+                        // サーバーへ開始合図
+                        socket.emit('start_stream', { url: url });
+                    }
+                }
             });
+            document.getElementById('video-container').style.display = 'block';
         });
     }
 
     if (stopBtn) {
         stopBtn.addEventListener('click', () => {
-            videoFrame.src = '';
-            videoFrame.style.display = 'none';
+            if (player && player.stopVideo) player.stopVideo();
+            if (syncInterval) clearInterval(syncInterval);
             socket.emit('stop_stream');
         });
     }
 
-    function sendSettings() {
-        socket.emit('update_settings', {
-            target_lang: subtitleLangSelect.value,
-            max_speakers: maxSpeakersSelect ? parseInt(maxSpeakersSelect.value) : 2
-        });
-    }
-    if (subtitleLangSelect) subtitleLangSelect.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('');
-        const r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16);
-        return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;
-    }
-    function applySubtitleBackground(el) {
-        if (!textBackgroundCheck.checked) {
-            el.style.backgroundColor = 'transparent'; el.style.padding = '0'; return;
-        }
-        const alpha = transparency.value;
-        el.style.backgroundColor = hexToRgba(textBackground.value, alpha);
-        el.style.padding = '2px 4px';
-        el.style.borderRadius = '4px';
+    // --- その他UI (シアター等) ---
+    if (theaterBtn) {
+        const container = document.getElementById('video-container');
+        const toggle = () => {
+            container.classList.toggle('theater-mode');
+            container.classList.toggle('normal-mode');
+        };
+        theaterBtn.addEventListener('click', toggle);
+        if(closeTheaterBtn) closeTheaterBtn.addEventListener('click', toggle);
     }
     
-    if (textBackgroundCheck) {
-        const updateAll = () => document.querySelectorAll('.subtitle-line').forEach(applySubtitleBackground);
-        const updatePreview = () => { if(textBgPreview) textBgPreview.style.backgroundColor = textBackground.value; };
-
-        textBackgroundCheck.addEventListener('change', updateAll);
-        textBackground.addEventListener('input', () => { updateAll(); updatePreview(); });
-        transparency.addEventListener('input', updateAll);
-        updatePreview();
-    }
-
-    if (subtitleSizeSelect) {
-        subtitleSizeSelect.addEventListener('input', () => {
-            currentFontSize = subtitleSizeSelect.value + 'px';
-            localStorage.setItem("savedSubtitleSize", subtitleSizeSelect.value);
-            document.querySelectorAll('.subtitle-line').forEach(p => p.style.fontSize = currentFontSize);
-        });
-    }
-
-    if (hamburger && nav) {
+    // ハンバーガーメニュー
+    const hamburger = document.querySelector('.hamburger');
+    const nav = document.querySelector('.nav');
+    if(hamburger) {
         hamburger.addEventListener('click', () => {
             hamburger.classList.toggle('active');
             nav.classList.toggle('active');
         });
-        document.addEventListener('click', (e) => {
-            if (!e.target.closest('.nav') && !e.target.closest('.hamburger') && nav.classList.contains('active')) {
-                hamburger.classList.remove('active');
-                nav.classList.remove('active');
-            }
-        });
-    }
-
-    if (document.getElementById('video-container')) {
-        const container = document.getElementById('video-container');
-        
-        if (theaterBtn) {
-            theaterBtn.addEventListener('click', () => {
-                container.classList.add('theater-mode');
-                container.classList.remove('normal-mode');
-            });
-        }
-        
-        if (closeTheaterBtn) {
-            closeTheaterBtn.addEventListener('click', () => {
-                container.classList.remove('theater-mode');
-                container.classList.add('normal-mode');
-            });
-        }
     }
 });