Update index.html

index.html

@@ -1615,6 +1615,7 @@ header.addEventListener('click', () => {
                     </div>
                     <div class="main-controls">
                         <button class="control-button" id="play-pause-btn" disabled>▶</button>
+                        <button class="control-button" id="reset-btn" disabled title="最初から再生">↺</button>
                         <div class="time-display" id="time-display">00:00.00 / 00:00.00</div>
                         <div class="volume-control">
                             <button class="volume-button" id="volume-btn" disabled>🔊</button>
@@ -1624,6 +1625,7 @@ header.addEventListener('click', () => {
                             <span class="speed-value" id="speed-value">1.00x</span>
                             <input type="range" class="speed-slider" id="speed-slider" min="0.01" max="5" step="0.01" value="1" disabled>
                         </div>
+                        <button class="control-button" id="pip-btn" disabled title="ピクチャーインピクチャー">⇲</button>
                         <button class="control-button fullscreen-button" id="fullscreen-btn" disabled>⛶</button>
                     </div>
                 </div>
@@ -1835,6 +1837,8 @@ header.addEventListener('click', () => {
                 const tempoSpeedValue = document.getElementById('tempo-speed-value');
                 const videoControls = document.querySelector('.video-controls');
                 const applyTimeBtn = document.getElementById('apply-time-btn');
+                const pipBtn = document.getElementById('pip-btn');
+                const resetBtn = document.getElementById('reset-btn');
               
                 // 音声オブジェクトを作成
                 const audioElements = {};
@@ -1903,8 +1907,46 @@ header.addEventListener('click', () => {
                         pauseMedia();
                     }
                 });
+function updatePipButton() {
+    if (document.pictureInPictureElement) {
+        pipBtn.textContent = '↸';
+        pipBtn.title = 'ピクチャーインピクチャーを終了';
+    } else {
+        pipBtn.textContent = '⇲';
+        pipBtn.title = 'ピクチャーインピクチャーで再生';
+    }
+}
+
+pipBtn.addEventListener('click', async () => {
+    try {
+        if (document.pictureInPictureElement) {
+            await document.exitPictureInPicture();
+        } else {
+            await video.requestPictureInPicture();
+        }
+        updatePipButton();
+    } catch (err) {
+        console.error('PiP操作エラー:', err);
+    }
+});
+   video.addEventListener('enterpictureinpicture', updatePipButton);
+video.addEventListener('leavepictureinpicture', updatePipButton);
             
-            function startSyncCheck() {
+          // リセットボタンクリック処理
+resetBtn.addEventListener('click', () => {
+    const startTime = parseFloat(startTimeInput.value) || 0;
+    seekMedia(startTime);
+    if (isPlaying) {
+        playMedia();
+    }
+});
+
+// 初期化時にPiPボタンの状態を設定
+updatePipButton();    
+          
+          
+          
+          function startSyncCheck() {
               if (isCheckingSync) return;
               isCheckingSync = true;
               if (syncCheckInterval) clearInterval(syncCheckInterval);
@@ -2111,22 +2153,28 @@ header.addEventListener('click', () => {
             
                         combineButton.disabled = false;
             
-                        document.addEventListener('visibilitychange', async () => {
-                            if (document.hidden) {
-                                isInBackgroundTab = true;
-                                if (isPlaying) {
-                                    pauseMedia();
-                                }
-                            } else {
-                                isInBackgroundTab = false;
-                                if (combinedAudioElement && !combinedAudioElement.paused) {
-                                    video.currentTime = combinedAudioElement.currentTime;
-                                    if (isPlaying) {
-                                        await video.play();
-                                    }
-                                }
-                            }
-                        });
+document.addEventListener('visibilitychange', async () => {
+    if (document.hidden) {
+        isInBackgroundTab = true;
+        // 動画のみ停止
+        video.pause();
+        // 音声とメトロノームは継続
+        if (combinedAudioElement && !combinedAudioElement.paused) {
+            await combinedAudioElement.play();
+        }
+        if (tl.isActive()) {
+            tl.play();
+        }
+    } else {
+        isInBackgroundTab = false;
+        if (combinedAudioElement && !combinedAudioElement.paused) {
+            video.currentTime = combinedAudioElement.currentTime;
+            if (isPlaying) {
+                await video.play();
+            }
+        }
+    }
+});
             
             
               // 動画終了時に自動的にPiPを閉じる（次回再開のため）
@@ -2247,6 +2295,8 @@ header.addEventListener('click', () => {
                     setEndTimeBtn.disabled = false;
                     playbackSpeedSlider.disabled = false;
                     applyTimeBtn.disabled = false;
+                    resetBtn.disabled = false; // 追加
+                    pipBtn.disabled = false; // 追加
                 }
             
                 // プレビュー再生