Update index.html

index.html

@@ -825,7 +825,7 @@ function updateSubtitleScaleForFullscreen() {
     document.documentElement.style.setProperty('--fullscreen-scale', 1);
   }
 }
-    function setupFramePreview() {
+function setupFramePreview() {
   let previewTimeout;
   
   progressContainer.addEventListener('mousemove', (e) => {
@@ -833,8 +833,23 @@ function updateSubtitleScaleForFullscreen() {
     
     clearTimeout(previewTimeout);
     
-    const progressRect = progressContainer.getBoundingClientRect();
-    const clickX = Math.max(0, Math.min(e.clientX - progressRect.left, progressRect.width));
+    // 全画面モードかどうかを判定
+    const isFullscreen = document.fullscreenElement || 
+                       document.webkitFullscreenElement || 
+                       document.msFullscreenElement;
+    
+    // 座標計算を全画面モードに対応
+    let clientX;
+    if (isFullscreen) {
+      const progressRect = progressContainer.getBoundingClientRect();
+      clientX = e.clientX;
+      const clickX = Math.max(0, Math.min(clientX - progressRect.left, progressRect.width));
+    } else {
+      const progressRect = progressContainer.getBoundingClientRect();
+      clientX = e.clientX;
+      const clickX = Math.max(0, Math.min(e.clientX - progressRect.left, progressRect.width));
+    }
+    
     const previewTime = (clickX / progressRect.width) * video.duration;
     
     // 時間表示を更新
@@ -842,8 +857,9 @@ function updateSubtitleScaleForFullscreen() {
     const previewSeconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
     frameTime.textContent = `${previewMinutes}:${previewSeconds}`;
     
-    // プレビュー位置を更新
-    framePreview.style.left = `${e.clientX - 80}px`; // 中央寄せ
+    // プレビュー位置を更新（全画面モードに合わせて調整）
+    framePreview.style.left = `${clientX - 80}px`; // 中央寄せ
+    framePreview.style.bottom = isFullscreen ? '100px' : '30px'; // 全画面時は少し上に
     framePreview.style.display = 'block';
     
     // キャッシュがあればそれを使う
@@ -1081,10 +1097,10 @@ function updateSubtitleScaleForFullscreen() {
         fullscreenBtn.addEventListener('click', goFullscreen);
     
         // 全画面変更イベントを監視
-        document.addEventListener('fullscreenchange', updateSubtitleScaleForFullscreen);
-        document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
-        document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
-        document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);
+document.addEventListener('fullscreenchange', handleFullscreenChange);
+document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+document.addEventListener('MSFullscreenChange', handleFullscreenChange);
         
         // 右クリックメニューイベント
         videoContainer.addEventListener('contextmenu', showContextMenu);
@@ -1148,6 +1164,17 @@ function updateSubtitleScaleForFullscreen() {
         case 'arrowleft': video.currentTime -= 5; break;
       }
     });
+
+  function handleFullscreenChange() {
+  updateSubtitleScaleForFullscreen();
+  setupFullscreenContextMenu();
+  
+  // 全画面モード時にプログレスバーのサイズが変わる可能性があるので再計算
+  normalVideoWidth = videoContainer.clientWidth;
+  
+  // フレームプレビューを再設定
+            setupFramePreview();
+        }
     
         // CSS変数を設定
         document.documentElement.style.setProperty('--subtitle-scale', '1');