Twitch Sync Theater 🎬

複数のTwitch VODおよびLIVE配信を「実際の配信開始時刻」に基づいて自動で同期再生するWebアプリです。 UIは TwitchTheater を参考に、画面右側のサイドバーをトグルで開閉できる2カラム構成です。サイドバーはハンバーガーメニュー（≡）から開き、内部の✕ボタンで閉じられます。時刻ベースの同期機能と補正調整を備え、プレイヤーは公式のTwitch Embed を利用しています。

🔧 機能一覧

• TwitchのVOD / LIVEをURL or チャンネル名から追加
• 配信開始時間をTwitch APIから自動取得
• 共通シークバーで再生位置を時刻ベースで同期（画面下部に常時表示）
• 各動画に±調整ボタン（補正オフセット）
• 各動画の開始時刻をシークバー上にマーカー表示
• 完全クライアントサイドで動作（APIキーはローカル保存可能）
• チャット付きプレイヤーを追加することも可能
• 各VODのチャンネルIDや再生中の配信時刻、補正操作はサイドバーから確認できます
• 個別プレイヤーを操作しても30秒後には自動で再同期

🚀 利用方法

1. このページを開く（GitHub Pagesで公開可）
2. 視聴したい配信者の名前やVOD URLを追加（必要に応じてチャット表示を選択）
3. サイドバーの[同期再生]を押すと、配信開始時刻に基づいて自動調整
4. 各視点の±調整で微調整も可能
5. APIで開始時刻を取得できない配信は追加されません

🖥 画面構成

• サイドバー: 幅250pxの固定カラムが右側からスライド表示されます。ハンバーガーメニューで開き、内部の✕ボタンで閉じられます。追加フォームと各VODの情報一覧があり、トグルボタンで開閉できます。
• プレイヤーエリア: 画面いっぱいに配信プレイヤーがグリッド表示され、マウスオーバーでミュートや削除、±補正ボタンが現れます。
• シークバー: 画面下部に固定されており、動かすとすべてのプレイヤーが基準時刻へシークします。

📦 公開例（GitHub Pages）

• https://yourusername.github.io/Twitch-sync-theater/

本ツールは非公式であり、Twitchとは無関係です

グローバルシークバーは画面下部に常時表示され、各VODのチャンネルIDや現在の配信時刻はサイドバーで確認・操作できます。

🎥 再生UIと動画動作の新仕様

• プレイヤーは動画数に応じて画面にフィットするように自動配置されます
• サイドバー表示中はプレイヤーエリアが自動的に縮小され、動画が隠れません
• 各動画の進行状況は、同じ色でサイドバー情報とシークバー上マーカーが連動表示されます
• グローバルシークバーから一括再生・停止が可能です
• 配信時刻と一致しない動画は自動的に一時停止状態になります
• 各VODカードからミュート切替や並び順の変更ができます
• 操作優先度は「グローバルシークバー」>「±補正ボタン」>「各プレイヤー操作」の順で適用されます
• グローバルシークバーを動かした瞬間、全てのプレイヤーはその位置・再生状態に強制上書きされます
• グローバル制御中のプレイヤーには "GLOBAL" ラベルが表示されます

🔐 Twitch API設定（初回のみ）

1. https://dev.twitch.tv/console/apps にアクセスし、「＋ Register Your Application」をクリック。
2. 以下のように入力：
   • Name: Twitch Sync Theater
   • OAuth Redirect URL: http://localhost （適当で構いません）
   • Category: Website Integration
3. 登録後に表示される Client ID と Client Secret をコピーしてください。
4. 本アプリのサイドバーにある「API設定」欄へ入力し、「保存」ボタンを押すと以後は自動で利用されます。