Update index.html

index.html

@@ -419,7 +419,7 @@
     
         /* フレームプレビュー */
         .frame-preview {
-          position: absolute;
+          position: fixed;
           bottom: 30px;
           transform: translateX(-50%);
           width: 160px;
@@ -838,18 +838,21 @@ function setupFramePreview() {
                        document.webkitFullscreenElement || 
                        document.msFullscreenElement;
     
-    // 座標計算を全画面モードに対応
-    let clientX;
+    // プログレスバーの位置とサイズを取得
+    const progressRect = progressContainer.getBoundingClientRect();
+    
+    // マウス座標を正しく計算（全画面モードに対応）
+    let clickX;
     if (isFullscreen) {
-      const progressRect = progressContainer.getBoundingClientRect();
-      clientX = e.clientX;
-      const clickX = Math.max(0, Math.min(clientX - progressRect.left, progressRect.width));
+      // 全画面モードではe.offsetXが正しくない場合があるので、clientXを使用
+      clickX = e.clientX - progressRect.left;
     } else {
-      const progressRect = progressContainer.getBoundingClientRect();
-      clientX = e.clientX;
-      const clickX = Math.max(0, Math.min(e.clientX - progressRect.left, progressRect.width));
+      clickX = e.offsetX;
     }
     
+    // クリック位置をプログレスバーの範囲内に制限
+    clickX = Math.max(0, Math.min(clickX, progressRect.width));
+    
     const previewTime = (clickX / progressRect.width) * video.duration;
     
     // 時間表示を更新
@@ -858,8 +861,14 @@ function setupFramePreview() {
     frameTime.textContent = `${previewMinutes}:${previewSeconds}`;
     
     // プレビュー位置を更新（全画面モードに合わせて調整）
-    framePreview.style.left = `${clientX - 80}px`; // 中央寄せ
-    framePreview.style.bottom = isFullscreen ? '100px' : '30px'; // 全画面時は少し上に
+    const previewLeft = isFullscreen ? 
+      (e.clientX - framePreview.offsetWidth / 2) : 
+      (progressRect.left + clickX - framePreview.offsetWidth / 2);
+    
+    framePreview.style.left = `${previewLeft}px`;
+    framePreview.style.top = isFullscreen ? 
+      `${progressRect.top - framePreview.offsetHeight - 10}px` : 
+      `${progressRect.top - framePreview.offsetHeight - 10}px`;
     framePreview.style.display = 'block';
     
     // キャッシュがあればそれを使う
@@ -1165,16 +1174,17 @@ document.addEventListener('MSFullscreenChange', handleFullscreenChange);
       }
     });
 
-  function handleFullscreenChange() {
+document.addEventListener('fullscreenchange', handleFullscreenChange);
+document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+document.addEventListener('mozfullscreenchange', handleFullscreenChange);
+document.addEventListener('MSFullscreenChange', handleFullscreenChange);
+
+function handleFullscreenChange() {
   updateSubtitleScaleForFullscreen();
   setupFullscreenContextMenu();
-  
-  // 全画面モード時にプログレスバーのサイズが変わる可能性があるので再計算
   normalVideoWidth = videoContainer.clientWidth;
-  
-  // フレームプレビューを再設定
-            setupFramePreview();
-        }
+  setupFramePreview(); // フレームプレビューを再設定
+}
     
         // CSS変数を設定
         document.documentElement.style.setProperty('--subtitle-scale', '1');