Update index.html

index.html

@@ -38,7 +38,6 @@
           border: 2px solid #0066ff;
           box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
           background: #000;
-          z-index: 2147483640;
         }
     
         video {
@@ -292,7 +291,6 @@
         .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;
@@ -421,16 +419,17 @@
     
         /* フレームプレビュー */
         .frame-preview {
-            position: fixed;
-            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: 2147483646;
-            pointer-events: none;
-            transform: translateX(-50%);
+          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 img {
@@ -458,7 +457,7 @@
           background-color: #0f0f1a;
           border: 1px solid #0066ff;
           box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
-          z-index: 2147483647;
+          z-index: 1000;
           display: none;
           min-width: 200px;
         }
@@ -589,6 +588,10 @@
             <track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
             </track>
         </video>
+        <div class="preview-container" id="previewContainer">
+            <img id="preview" style="max-width: 200px; max-height: 150px;">
+            <div class="preview-time" id="previewTime"></div>
+        </div>
         <div class="custom-controls">
             <div class="progress-container" id="progressContainer">
                 <div class="progress-bar" id="progressBar">
@@ -610,9 +613,11 @@
             </div>
         </div>
     </div>
-    <canvas id="canvas" style="display:none;"></canvas>
+    <canvas id="canvas">
+    </canvas>
     <!-- サムネイル用の非表示video要素 -->
-    <video id="video-for-thumbnail" src="v.mp4" preload="auto" style="display:none;"></video>
+    <video id="video-for-thumbnail" src="v.mp4" preload="auto" style="display:none;">
+    </video>
     <script>
     const video = document.getElementById('videoPlayer');
         const videoSelect = document.getElementById('videoSelect');
@@ -640,6 +645,9 @@
         const frameTime = document.getElementById('frameTime');
         const audioOnlyModeIndicator = document.getElementById('audioOnlyModeIndicator');
         const contextMenu = document.getElementById('contextMenu');
+        const previewContainer = document.getElementById('previewContainer');
+        const preview = document.getElementById('preview');
+        const previewTime = document.getElementById('previewTime');
         const VideoForThumbnail = document.getElementById('video-for-thumbnail');
         const canvas = document.getElementById('canvas');
         const ctx = canvas.getContext('2d');
@@ -791,87 +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 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}px`;
-                framePreview.style.top = `${progressRect.top - 100}px`; // プログレスバーの上に表示
-                framePreview.style.display = 'block';
-                
-                // キャッシュがあればそれを使う
-                const cacheKey = Math.floor(previewTime);
-                if (frameCache[cacheKey]) {
-                    previewImage.src = frameCache[cacheKey];
-                    return;
-                }
-                
-                // フレームを取得
-                VideoForThumbnail.currentTime = previewTime;
-                
-                const onSeeked = () => {
-                    if (VideoForThumbnail.readyState >= 2) { // HAVE_CURRENT_DATA 以上か確認
-                        canvas.width = VideoForThumbnail.videoWidth || 160;
-                        canvas.height = VideoForThumbnail.videoHeight || 90;
-                        ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height);
-                        
-                        try {
-                            const imageData = canvas.toDataURL('image/jpeg');
-                            previewImage.src = imageData;
-                            frameCache[cacheKey] = imageData;
-                        } catch (e) {
-                            console.error("Failed to generate preview image:", e);
-                        }
-                    }
-                    VideoForThumbnail.removeEventListener('seeked', onSeeked);
-                };
-                
-                VideoForThumbnail.addEventListener('seeked', onSeeked);
-            });
-            
-            progressContainer.addEventListener('mouseleave', () => {
-                previewTimeout = setTimeout(() => {
-                    framePreview.style.display = 'none';
-                }, 300);
-            });
-            
-            framePreview.addEventListener('mouseenter', () => {
-                clearTimeout(previewTimeout);
-            });
-            
-            framePreview.addEventListener('mouseleave', () => {
-                framePreview.style.display = 'none';
-            });
-        }
-        
+        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;
@@ -916,29 +924,61 @@
           toggleSubtitles();
         }
         
+        // フレームプレビュー関連
+        function showFramePreview(e) {
+          if (!videoBlob) return;
+          
+          const progressRect = progressContainer.getBoundingClientRect();
+          const clickX = e.clientX - progressRect.left;
+          const duration = video.duration;
+          const previewTime = (clickX / progressRect.width) * 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.display = 'block';
+          
+          // キャッシュがあればそれを使う
+          const cacheKey = Math.floor(previewTime);
+          if (frameCache[cacheKey]) {
+            previewImage.src = frameCache[cacheKey];
+            return;
+          }
+          
+          // フレームを取得
+          videoFrames({
+            url: URL.createObjectURL(videoBlob),
+            count: 1,
+            startTime: previewTime,
+            endTime: previewTime + 0.1
+          }).then((frames) => {
+            if (frames.length > 0) {
+              previewImage.src = frames[0].image;
+              frameCache[cacheKey] = frames[0].image; // キャッシュに保存
+            }
+          }).catch(err => {
+            console.error('Error getting video frame:', err);
+          });
+        }
+        
+        function hideFramePreview() {
+          framePreview.style.display = 'none';
+        }
+        
         // 右クリックメニュー関連
         function showContextMenu(e) {
-            e.preventDefault();
-            
-            // メニューの位置を計算
-            const x = e.clientX || e.touches?.[0]?.clientX;
-            const y = e.clientY || e.touches?.[0]?.clientY;
-            
-            if (!x || !y) return;
-            
-            contextMenu.style.display = 'block';
-            contextMenu.style.left = `${x}px`;
-            contextMenu.style.top = `${y}px`;
-            
-            // 全画面時は document にイベントリスナーを追加
-            if (document.fullscreenElement) {
-                document.addEventListener('click', hideContextMenu);
-            }
+          e.preventDefault();
+          contextMenu.style.display = 'block';
+          contextMenu.style.left = `${e.clientX}px`;
+          contextMenu.style.top = `${e.clientY}px`;
         }
         
         function hideContextMenu() {
-            contextMenu.style.display = 'none';
-            document.removeEventListener('click', hideContextMenu);
+          contextMenu.style.display = 'none';
         }
         
         // 音声/字幕のみモード
@@ -985,29 +1025,66 @@
         progressContainer.addEventListener('click', setProgress);
         progressContainer.addEventListener('mousedown', () => isDragging = true);
         document.addEventListener('mouseup', () => isDragging = false);
+        // マウスホバー時のプレビュー表示
+        progressContainer.addEventListener('mousemove', function(e) {
+          if (isDragging) {
+            const width = progressContainer.clientWidth;
+            const clickX = e.offsetX;
+            const duration = video.duration;
+            const previewTime = (clickX / width) * duration;
+            
+            // プレビュー位置を更新
+            previewContainer.style.left = `${e.clientX - 100}px`;
+            previewContainer.style.bottom = '60px';
+            previewContainer.style.display = 'block';
+            
+            // 時間表示を更新
+            const minutes = Math.floor(previewTime / 60);
+            const seconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
+            document.getElementById('previewTime').textContent = `${minutes}:${seconds}`;
+            
+            // サムネイル画像を更新
+            updateThumbnail(previewTime);
+          } else {
+            previewContainer.style.display = 'none';
+          }
+        });
+        
+        // サムネイル画像更新関数
+        function updateThumbnail(time) {
+          VideoForThumbnail.currentTime = time;
+          
+          VideoForThumbnail.addEventListener('seeked', function() {
+            canvas.width = VideoForThumbnail.videoWidth;
+            canvas.height = VideoForThumbnail.videoHeight;
+            ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height);
+            preview.src = canvas.toDataURL('image/jpeg');
+          }, { once: true });
+        }
+    
+        
+        // プログレスバーのホバーイベント
+        progressContainer.addEventListener('mouseenter', () => {
+          isHoveringProgress = true;
+          clearTimeout(hoverTimeout);
+        });
+        
+        progressContainer.addEventListener('mouseleave', () => {
+          isHoveringProgress = false;
+          hoverTimeout = setTimeout(() => {
+            if (!isDragging) hideFramePreview();
+          }, 300);
+        });
         
         volumeBtn.addEventListener('click', toggleMute);
         volumeSlider.addEventListener('input', handleVolumeChange);
         fullscreenBtn.addEventListener('click', goFullscreen);
     
         // 全画面変更イベントを監視
-        document.addEventListener('fullscreenchange', updateFullscreenEventListeners);
-        document.addEventListener('webkitfullscreenchange', updateFullscreenEventListeners);
-        document.addEventListener('mozfullscreenchange', updateFullscreenEventListeners);
-        document.addEventListener('MSFullscreenChange', updateFullscreenEventListeners);
-
-        function updateFullscreenEventListeners() {
-            updateSubtitleScaleForFullscreen();
-            if (document.fullscreenElement) {
-                // 全画面時は document にイベントリスナーを設定
-                document.addEventListener('contextmenu', showContextMenu);
-                videoContainer.removeEventListener('contextmenu', showContextMenu);
-            } else {
-                // 通常時は videoContainer に戻す
-                videoContainer.addEventListener('contextmenu', showContextMenu);
-                document.removeEventListener('contextmenu', showContextMenu);
-            }
-        }
+        document.addEventListener('fullscreenchange', updateSubtitleScaleForFullscreen);
+        document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
+        document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
+        document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);
         
         // 右クリックメニューイベント
         videoContainer.addEventListener('contextmenu', showContextMenu);
@@ -1025,37 +1102,53 @@
           updateProgress();
           normalVideoWidth = videoContainer.clientWidth;
         });
-        
         video.addEventListener("loadeddata", async () => {
-            const response = await fetch(video.src);
-            videoBlob = await response.blob();
-        });
-        
-        // 保存
-        video.addEventListener('timeupdate', () => {
-            localStorage.setItem('radioTaisoTime', video.currentTime);
-        });
-        
-        // 復元
-        window.addEventListener('load', () => {
-            setupFramePreview();
-            const savedTime = parseFloat(localStorage.getItem('radioTaisoTime'));
-            if (!isNaN(savedTime)) {
-                video.currentTime = savedTime;
-            }
-        });
-        
-        document.addEventListener('keydown', (e) => {
-            if (e.target.tagName === 'INPUT') return; // 入力中は無視
-            switch (e.key.toLowerCase()) {
-                case ' ': e.preventDefault(); togglePlayPause(); break;
-                case 'f': goFullscreen(); break;
-                case 'm': toggleMute(); break;
-                case 'arrowright': video.currentTime += 5; break;
-                case 'arrowleft': video.currentTime -= 5; break;
-            }
-        });
-        
+      const response = await fetch(video.src);
+      videoBlob = await response.blob();
+    });
+    
+    // 保存
+    video.addEventListener('timeupdate', () => {
+      localStorage.setItem('radioTaisoTime', video.currentTime);
+    });
+    
+    // 復元
+    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; // 入力中は無視
+      switch (e.key.toLowerCase()) {
+        case ' ': e.preventDefault(); togglePlayPause(); break;
+        case 'f': goFullscreen(); break;
+        case 'm': toggleMute(); break;
+        case 'arrowright': video.currentTime += 5; break;
+        case 'arrowleft': video.currentTime -= 5; break;
+      }
+    });
+    
         // CSS変数を設定
         document.documentElement.style.setProperty('--subtitle-scale', '1');
         document.documentElement.style.setProperty('--subtitle-border-radius', '10px');