Update index.html

index.html

@@ -420,20 +420,18 @@
         }
     
         /* フレームプレビュー */
-    .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 {
+            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%);
+        }
     
         .frame-preview img {
           width: 100%;
@@ -460,7 +458,7 @@
           background-color: #0f0f1a;
           border: 1px solid #0066ff;
           box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
-          z-index: 2147483647 !important;
+          z-index: 2147483647;
           display: none;
           min-width: 200px;
         }
@@ -591,10 +589,6 @@
             <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">
@@ -616,8 +610,7 @@
             </div>
         </div>
     </div>
-    <canvas id="canvas">
-    </canvas>
+    <canvas id="canvas" style="display:none;"></canvas>
     <!-- サムネイル用の非表示video要素 -->
     <video id="video-for-thumbnail" src="v.mp4" preload="auto" style="display:none;"></video>
     <script>
@@ -647,9 +640,6 @@
         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');
@@ -801,98 +791,87 @@
           }
           hideContextMenu();
         }
-        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.bottom = `${progressContainer.offsetHeight + 10}px`;
-        framePreview.style.display = 'block';
-        
-        // キャッシュがあればそれを使う
-        const cacheKey = Math.floor(previewTime);
-        if (frameCache[cacheKey]) {
-            previewImage.src = frameCache[cacheKey];
-            return;
+        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);
+          }
         }
         
-        // フレームを取得
-        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);
+        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}`;
                 
-                try {
-                    const imageData = canvas.toDataURL('image/jpeg');
-                    previewImage.src = imageData;
-                    frameCache[cacheKey] = imageData;
-                } catch (e) {
-                    console.error("Failed to generate preview image:", e);
+                // プレビュー位置を更新（プログレスバーの上に表示）
+                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.removeEventListener('seeked', onSeeked);
-        };
+                
+                // フレームを取得
+                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';
+            });
+        }
         
-        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 toggleSubtitles() {
           subtitlesEnabled = !subtitlesEnabled;
@@ -937,73 +916,29 @@ function setupFramePreview() {
           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; // キャッシュに保存
+        // 右クリックメニュー関連
+        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);
             }
-          }).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);
-    }
-}
-        
         function hideContextMenu() {
-          contextMenu.style.display = 'none';
+            contextMenu.style.display = 'none';
+            document.removeEventListener('click', hideContextMenu);
         }
         
         // 音声/字幕のみモード
@@ -1050,77 +985,29 @@ function showContextMenu(e) {
         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);
+        document.addEventListener('fullscreenchange', updateFullscreenEventListeners);
+        document.addEventListener('webkitfullscreenchange', updateFullscreenEventListeners);
+        document.addEventListener('mozfullscreenchange', updateFullscreenEventListeners);
+        document.addEventListener('MSFullscreenChange', updateFullscreenEventListeners);
 
-function updateFullscreenEventListeners() {
-    if (document.fullscreenElement) {
-        // 全画面時は document にイベントリスナーを設定
-        document.addEventListener('contextmenu', showContextMenu);
-    } else {
-        // 通常時は videoContainer に戻す
-        videoContainer.addEventListener('contextmenu', showContextMenu);
-        document.removeEventListener('contextmenu', showContextMenu);
-    }
-}
+        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);
+            }
+        }
         
         // 右クリックメニューイベント
         videoContainer.addEventListener('contextmenu', showContextMenu);
@@ -1138,53 +1025,37 @@ function updateFullscreenEventListeners() {
           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();
-        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;
-      }
-    });
-    
+            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;
+            }
+        });
+        
         // CSS変数を設定
         document.documentElement.style.setProperty('--subtitle-scale', '1');
         document.documentElement.style.setProperty('--subtitle-border-radius', '10px');