Update index.html

index.html

@@ -633,6 +633,13 @@
     const frameTime = document.getElementById('frameTime');
     const contextMenu = document.getElementById('contextMenu');
     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');
     
     // 初期設定
     video.controls = false;
@@ -688,9 +695,10 @@
       }
     }
 
+    // 動画ソース変更時にサムネイル用動画も更新
     function handleVideoChange() {
       const selected = videoSelect.value;
-
+  
       if (selected === 'v-2.mp4') {
         const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
         if (!confirmPlay) {
@@ -698,20 +706,14 @@
           return;
         }
       }
-
+  
       video.src = selected;
+      VideoForThumbnail.src = selected;
       video.load();
+      VideoForThumbnail.load();
       video.play().then(() => {
         playPauseBtn.textContent = '⏸';
       }).catch(e => console.log(e));
-      
-      // 新しい動画のBlobをキャッシュ
-      fetch(selected)
-        .then(response => response.blob())
-        .then(blob => {
-          videoBlob = blob;
-          frameCache = {}; // キャッシュをクリア
-        });
     }
 
     function togglePlayPause() {
@@ -946,14 +948,54 @@
     progressContainer.addEventListener('click', setProgress);
     progressContainer.addEventListener('mousedown', () => isDragging = true);
     document.addEventListener('mouseup', () => isDragging = false);
-    progressContainer.addEventListener('mousemove', (e) => {
+    // 音声/字幕のみモード
+    function toggleAudioOnlyMode() {
+      document.body.classList.toggle('audio-only-mode');
+      contextMenu.style.display = 'none';
+    }
+    
+    // マウスホバー時のプレビュー表示
+    progressContainer.addEventListener('mousemove', function(e) {
       if (isDragging) {
-        setProgress(e);
+        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 {
-        showFramePreview(e);
+        previewContainer.style.display = 'none';
       }
     });
     
+    progressContainer.addEventListener('mouseleave', function() {
+      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;