Update index.html

index.html

@@ -38,6 +38,7 @@
           border: 2px solid #0066ff;
           box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
           background: #000;
+          z-index: 2147483640;
         }
     
         video {
@@ -291,6 +292,7 @@
         .video-container:-moz-full-screen video::cue,
         .video-container:-ms-fullscreen video::cue {
           font-size: calc(16px * var(--subtitle-scale) * var(--fullscreen-scale, 1)) !important;
+          z-index: 2147483647;
         }
         body {
           margin: 0;
@@ -418,19 +420,20 @@
         }
     
         /* フレームプレビュー */
-        .frame-preview {
-          position: absolute;
-          bottom: 30px;
-          transform: translateX(-50%);
-          width: 160px;
-          height: 90px;
-          background: #000;
-          border: 2px solid #00aaff;
-          box-shadow: 0 0 10px rgba(0, 170, 255, 0.7);
-          display: none;
-          z-index: 100;
-          pointer-events: none;
-        }
+    .frame-preview {
+        position: absolute;
+        bottom: 50px; /* プログレスバーの上に表示 */
+        transform: translateX(-50%);
+        width: 160px;
+        height: 90px;
+        background: #000;
+        border: 2px solid #00aaff;
+        box-shadow: 0 0 10px rgba(0, 170, 255, 0.7);
+        display: none;
+        z-index: 1000; /* 高いz-indexを設定 */
+        pointer-events: none;
+    }
+
     
         .frame-preview img {
           width: 100%;
@@ -457,7 +460,7 @@
           background-color: #0f0f1a;
           border: 1px solid #0066ff;
           box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
-          z-index: 1000;
+          z-index: 100000;
           display: none;
           min-width: 200px;
         }
@@ -825,60 +828,61 @@ function updateSubtitleScaleForFullscreen() {
     document.documentElement.style.setProperty('--fullscreen-scale', 1);
   }
 }
-    function setupFramePreview() {
-  let previewTimeout;
-  
-  progressContainer.addEventListener('mousemove', (e) => {
-    if (!videoBlob || !video.duration) return;
+function setupFramePreview() {
+    let previewTimeout;
     
-    clearTimeout(previewTimeout);
-    
-    const progressRect = progressContainer.getBoundingClientRect();
-    const clickX = Math.max(0, Math.min(e.clientX - progressRect.left, progressRect.width));
-    const previewTime = (clickX / progressRect.width) * video.duration;
-    
-    // 時間表示を更新
-    const previewMinutes = Math.floor(previewTime / 60);
-    const previewSeconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
-    frameTime.textContent = `${previewMinutes}:${previewSeconds}`;
+    progressContainer.addEventListener('mousemove', (e) => {
+        if (!videoBlob || !video.duration) return;
+        
+        clearTimeout(previewTimeout);
+        
+        const progressRect = progressContainer.getBoundingClientRect();
+        const clickX = Math.max(0, Math.min(e.clientX - progressRect.left, progressRect.width));
+        const previewTime = (clickX / progressRect.width) * video.duration;
+        
+        // 時間表示を更新
+        const previewMinutes = Math.floor(previewTime / 60);
+        const previewSeconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
+        frameTime.textContent = `${previewMinutes}:${previewSeconds}`;
+        
+        // プレビュー位置を更新（プログレスバーの上に表示）
+        framePreview.style.left = `${e.clientX}px`;
+        framePreview.style.bottom = `${progressContainer.offsetHeight + 10}px`; // プログレスバーの上
+        framePreview.style.display = 'block';
+        
+        // キャッシュがあればそれを使う
+        const cacheKey = Math.floor(previewTime);
+        if (frameCache[cacheKey]) {
+            previewImage.src = frameCache[cacheKey];
+            return;
+        }
+        
+        // フレームを取得
+        VideoForThumbnail.currentTime = previewTime;
+        
+        VideoForThumbnail.addEventListener('seeked', function() {
+            canvas.width = VideoForThumbnail.videoWidth;
+            canvas.height = VideoForThumbnail.videoHeight;
+            ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height);
+            const imageData = canvas.toDataURL('image/jpeg');
+            previewImage.src = imageData;
+            frameCache[cacheKey] = imageData; // キャッシュに保存
+        }, { once: true });
+    });
     
-    // プレビュー位置を更新
-    framePreview.style.left = `${e.clientX - 80}px`; // 中央寄せ
-    framePreview.style.display = 'block';
+    progressContainer.addEventListener('mouseleave', () => {
+        previewTimeout = setTimeout(() => {
+            framePreview.style.display = 'none';
+        }, 300);
+    });
     
-    // キャッシュがあればそれを使う
-    const cacheKey = Math.floor(previewTime);
-    if (frameCache[cacheKey]) {
-      previewImage.src = frameCache[cacheKey];
-      return;
-    }
+    framePreview.addEventListener('mouseenter', () => {
+        clearTimeout(previewTimeout);
+    });
     
-    // フレームを取得
-    VideoForThumbnail.currentTime = previewTime;
-    
-    VideoForThumbnail.addEventListener('seeked', function() {
-      canvas.width = VideoForThumbnail.videoWidth;
-      canvas.height = VideoForThumbnail.videoHeight;
-      ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height);
-      const imageData = canvas.toDataURL('image/jpeg');
-      previewImage.src = imageData;
-      frameCache[cacheKey] = imageData; // キャッシュに保存
-    }, { once: true });
-  });
-  
-  progressContainer.addEventListener('mouseleave', () => {
-    previewTimeout = setTimeout(() => {
-      framePreview.style.display = 'none';
-    }, 300);
-  });
-  
-  framePreview.addEventListener('mouseenter', () => {
-    clearTimeout(previewTimeout);
-  });
-  
-  framePreview.addEventListener('mouseleave', () => {
-    framePreview.style.display = 'none';
-  });
+    framePreview.addEventListener('mouseleave', () => {
+        framePreview.style.display = 'none';
+    });
 }
         // 字幕関連の関数
         function toggleSubtitles() {