Update index.html

index.html

@@ -799,21 +799,87 @@
           }
           hideContextMenu();
         }
-        
-        // 全画面変更時の字幕サイズ調整
-        function updateSubtitleScaleForFullscreen() {
-          if (document.fullscreenElement || document.webkitFullscreenElement || 
-              document.mozFullScreenElement || document.msFullscreenElement) {
-            // 全画面モード
-            const fullscreenWidth = window.innerWidth;
-            const scaleFactor = fullscreenWidth / normalVideoWidth;
-            document.documentElement.style.setProperty('--fullscreen-scale', scaleFactor);
-          } else {
-            // 通常モード
-            document.documentElement.style.setProperty('--fullscreen-scale', 1);
-          }
-        }
-    
+        function setupFullscreenContextMenu() {
+  const fullscreenElement = document.fullscreenElement || 
+                          document.webkitFullscreenElement || 
+                          document.msFullscreenElement;
+  
+  if (fullscreenElement) {
+    fullscreenElement.addEventListener('contextmenu', showContextMenu);
+  }
+}
+function updateSubtitleScaleForFullscreen() {
+  if (document.fullscreenElement || document.webkitFullscreenElement || 
+      document.mozFullScreenElement || document.msFullscreenElement) {
+    // 全画面モード
+    const fullscreenWidth = window.innerWidth;
+    const scaleFactor = fullscreenWidth / normalVideoWidth;
+    document.documentElement.style.setProperty('--fullscreen-scale', scaleFactor);
+    
+    // 全画面要素にイベントリスナーを追加
+    const fsElement = document.fullscreenElement || document.webkitFullscreenElement || 
+                     document.mozFullScreenElement || document.msFullscreenElement;
+    fsElement.addEventListener('contextmenu', showContextMenu);
+  } else {
+    // 通常モード
+    document.documentElement.style.setProperty('--fullscreen-scale', 1);
+  }
+}
+    function setupFramePreview() {
+  let previewTimeout;
+  
+  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 - 80}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 });
+  });
+  
+  progressContainer.addEventListener('mouseleave', () => {
+    previewTimeout = setTimeout(() => {
+      framePreview.style.display = 'none';
+    }, 300);
+  });
+  
+  framePreview.addEventListener('mouseenter', () => {
+    clearTimeout(previewTimeout);
+  });
+  
+  framePreview.addEventListener('mouseleave', () => {
+    framePreview.style.display = 'none';
+  });
+}
         // 字幕関連の関数
         function toggleSubtitles() {
           subtitlesEnabled = !subtitlesEnabled;
@@ -1048,10 +1114,29 @@
     
     // 復元
     window.addEventListener('load', () => {
+        setupFramePreview();
+        setupFullscreenContextMenu();
       const savedTime = parseFloat(localStorage.getItem('radioTaisoTime'));
       if (!isNaN(savedTime)) {
         video.currentTime = savedTime;
       }
+
+        document.addEventListener('fullscreenchange', () => {
+    updateSubtitleScaleForFullscreen();
+    setupFullscreenContextMenu();
+  });
+  document.addEventListener('webkitfullscreenchange', () => {
+    updateSubtitleScaleForFullscreen();
+    setupFullscreenContextMenu();
+  });
+  document.addEventListener('mozfullscreenchange', () => {
+    updateSubtitleScaleForFullscreen();
+    setupFullscreenContextMenu();
+  });
+  document.addEventListener('MSFullscreenChange', () => {
+    updateSubtitleScaleForFullscreen();
+    setupFullscreenContextMenu();
+  });
     });
     document.addEventListener('keydown', (e) => {
       if (e.target.tagName === 'INPUT') return; // 入力中は無視