Update index.html

index.html

@@ -105,18 +105,34 @@
       box-shadow: 0 0 5px #00ccff;
     }
 
-    /* ホバー時の時間表示 */
-    .hover-time {
+    /* プレビュー用スタイル */
+    .preview-tooltip {
       position: absolute;
-      top: -30px;
+      bottom: 20px;
       transform: translateX(-50%);
-      background: rgba(0, 20, 40, 0.8);
+      background: rgba(0, 20, 40, 0.9);
+      border: 1px solid #0066ff;
+      padding: 5px 10px;
+      border-radius: 5px;
+      display: none;
+      z-index: 100;
+      pointer-events: none;
+    }
+
+    .preview-time {
       color: #00ccff;
-      padding: 3px 6px;
-      border-radius: 4px;
       font-size: 12px;
-      pointer-events: none;
-      display: none;
+      text-align: center;
+      margin-bottom: 5px;
+    }
+
+    .preview-frame {
+      width: 160px;
+      height: 90px;
+      background-color: #000;
+      border: 1px solid #0066ff;
+      background-size: cover;
+      background-position: center;
     }
 
     .buttons-container {
@@ -430,33 +446,49 @@
         transform: rotate(360deg);
       }
     }
-
-    /* 動画非表示モード用スタイル */
+    
+    /* 全画面コンテキストメニュー */
+    .fullscreen-context-menu {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #0f0f1a;
+      border: 1px solid #0066ff;
+      box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
+      padding: 15px;
+      z-index: 1000;
+      display: none;
+    }
+    
+    .fullscreen-context-menu button {
+      display: block;
+      width: 100%;
+      margin-bottom: 5px;
+    }
+    
+    .fullscreen-context-menu button:last-child {
+      margin-bottom: 0;
+    }
+    
+    /* 音声/字幕のみモード */
+    .audio-only-mode {
+      position: relative;
+    }
+    
+    .audio-only-mode .video-placeholder {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #000;
+      color: #00ccff;
+      font-size: 24px;
+      height: 450px; /* 動画の高さに合わせて調整 */
+    }
+    
     .audio-only-mode video {
       display: none;
     }
-    .audio-only-mode .video-container {
-      background: transparent;
-      border: none;
-      box-shadow: none;
-    }
-    .audio-only-mode .controls {
-      margin-top: 0;
-    }
-    /* サムネイルプレビュー用スタイル */
-.thumbnail-preview {
-  position: absolute;
-  width: 160px;
-  height: 90px;
-  background: #000;
-  border: 2px solid #00aaff;
-  box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
-  display: none;
-  pointer-events: none;
-  z-index: 10;
-  bottom: 40px; /* プログレスバーの上に表示 */
-  transform: translateX(-50%);
-}
   </style>
 </head>
 
@@ -473,6 +505,14 @@
     </div>
   </div>
 
+  <!-- 全画面コンテキストメニュー -->
+  <div class="fullscreen-context-menu" id="fullscreenContextMenu">
+    <button id="audioOnlyBtn">音声/字幕のみモード</button>
+    <button id="showVideoBtn">動画表示モード</button>
+    <button id="exitFullscreenBtn">全画面を終了</button>
+    <button id="closeContextMenuBtn">閉じる</button>
+  </div>
+
   <div id="ripple-container">
   </div>
   <script>
@@ -627,10 +667,6 @@
       <label for="loopCheckbox">ループ再生：</label>
       <input type="checkbox" id="loopCheckbox" checked>
     </div>
-    <div class="control-group">
-      <label for="audioOnlyCheckbox">音声のみモード：</label>
-      <input type="checkbox" id="audioOnlyCheckbox">
-    </div>
     <!-- 字幕設定セクション -->
     <div class="subtitle-settings">
       <div class="control-group">
@@ -652,16 +688,22 @@
     </div>
     <button onclick="goFullscreen()">全画面</button>
   </div>
-  <div class="video-container">
+  <div class="video-container" id="videoContainer">
+    <div class="video-placeholder" id="videoPlaceholder" style="display: none;">
+      音声/字幕のみモード
+    </div>
     <video id="videoPlayer" src="v.mp4">
       <track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
       </track>
     </video>
+    <div class="preview-tooltip" id="previewTooltip">
+      <div class="preview-time" id="previewTime">00:00</div>
+      <div class="preview-frame" id="previewFrame"></div>
+    </div>
     <div class="custom-controls">
       <div class="progress-container" id="progressContainer">
         <div class="progress-bar" id="progressBar">
         </div>
-        <div class="hover-time" id="hoverTime"></div>
       </div>
       <div class="buttons-container">
         <div class="left-controls">
@@ -674,7 +716,7 @@
             <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="1">
           </div>
           <button class="control-btn" id="subtitleBtn" title="字幕">🔤</button>
-          <button class="control-btn" id="audioOnlyBtn" title="音声のみ">🎵</button>
+          <button class="control-btn" id="audioOnlyBtn" title="音声/字幕のみ">🔈</button>
           <button class="control-btn" id="fullscreenBtn">⛶</button>
         </div>
       </div>
@@ -688,104 +730,143 @@
     const volumeRange = document.getElementById('volumeRange');
     const volumeInput = document.getElementById('volumeInput');
     const loopCheckbox = document.getElementById('loopCheckbox');
-    const audioOnlyCheckbox = document.getElementById('audioOnlyCheckbox');
     const playPauseBtn = document.getElementById('playPauseBtn');
     const progressBar = document.getElementById('progressBar');
     const progressContainer = document.getElementById('progressContainer');
-    const hoverTime = document.getElementById('hoverTime');
     const timeDisplay = document.getElementById('timeDisplay');
     const volumeBtn = document.getElementById('volumeBtn');
     const volumeSlider = document.getElementById('volumeSlider');
     const fullscreenBtn = document.getElementById('fullscreenBtn');
     const subtitleBtn = document.getElementById('subtitleBtn');
-    const audioOnlyBtn = document.getElementById('audioOnlyBtn');
     const subtitleToggle = document.getElementById('subtitleToggle');
     const subtitleSize = document.getElementById('subtitleSize');
     const subtitleSizeInput = document.getElementById('subtitleSizeInput');
     const subtitleTrack = document.getElementById('subtitleTrack');
     const subtitleTrackElement = document.getElementById('subtitleTrackElement');
-    const videoContainer = document.querySelector('.video-container');
-    const controls = document.querySelector('.controls');
-  
+    const videoContainer = document.getElementById('videoContainer');
+    const videoPlaceholder = document.getElementById('videoPlaceholder');
+    const previewTooltip = document.getElementById('previewTooltip');
+    const previewTime = document.getElementById('previewTime');
+    const previewFrame = document.getElementById('previewFrame');
+    const audioOnlyBtn = document.getElementById('audioOnlyBtn');
+    const fullscreenContextMenu = document.getElementById('fullscreenContextMenu');
+    const exitFullscreenBtn = document.getElementById('exitFullscreenBtn');
+    const showVideoBtn = document.getElementById('showVideoBtn');
+    const closeContextMenuBtn = document.getElementById('closeContextMenuBtn');
+    const contextAudioOnlyBtn = document.getElementById('audioOnlyBtn');
+
     // 初期設定
     video.controls = false;
-    //let isDragging = false;
+    let isDragging = false;
     let subtitlesEnabled = true;
     let normalVideoWidth = videoContainer.clientWidth;
-    let audioOnlyMode = false;
-  
-    const previewVideo = document.createElement('video');
-  previewVideo.id = 'previewVideo';
-  previewVideo.className = 'thumbnail-preview';
-  document.body.appendChild(previewVideo);
-
-  // ホバー時の時間表示設定関数を追加
-  function setupHoverTime() {
-    progressContainer.addEventListener("mousemove", (e) => {
-      if (!video.duration) return;
-      const rect = progressContainer.getBoundingClientRect();
-      const pos = (e.clientX - rect.left) / rect.width;
-      const time = pos * video.duration;
+    let isAudioOnlyMode = false;
+    let canvas = null;
+    let previewCanvas = null;
+    let previewContext = null;
+    let isGeneratingPreview = false;
+
+    // プレビュー用キャンバスを作成
+    function createPreviewCanvas() {
+      if (!canvas) {
+        canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth || 640;
+        canvas.height = video.videoHeight || 360;
+      }
       
-      // 時間表示
-      const minutes = Math.floor(time / 60);
-      const seconds = Math.floor(time % 60).toString().padStart(2, '0');
-      hoverTime.textContent = `${minutes}:${seconds}`;
-      hoverTime.style.display = 'block';
-      hoverTime.style.left = `${e.clientX - rect.left}px`;
+      if (!previewCanvas) {
+        previewCanvas = document.createElement('canvas');
+        previewCanvas.width = 160;
+        previewCanvas.height = 90;
+        previewContext = previewCanvas.getContext('2d');
+      }
+    }
+
+    // プレビュー画像を生成
+    function generatePreview(time) {
+      if (isGeneratingPreview) return;
       
-      // サムネイルプレビュー
-      previewVideo.currentTime = time;
-      previewVideo.style.display = "block";
-      previewVideo.style.left = `${e.clientX}px`;
-      previewVideo.style.bottom = `${rect.height + 10}px`;
-    });
+      try {
+        isGeneratingPreview = true;
+        createPreviewCanvas();
+        
+        // 動画の現在の時間を保存
+        const currentTime = video.currentTime;
+        
+        // 指定された時間にシーク
+        video.currentTime = time;
+        
+        // フレームが更新されるのを待つ
+        video.addEventListener('seeked', function onSeeked() {
+          video.removeEventListener('seeked', onSeeked);
+          
+          // キャンバスにフレームを描画
+          const ctx = canvas.getContext('2d');
+          canvas.width = video.videoWidth;
+          canvas.height = video.videoHeight;
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          
+          // プレビュー用に縮小
+          previewContext.drawImage(canvas, 0, 0, previewCanvas.width, previewCanvas.height);
+          
+          // プレビューフレームに表示
+          previewFrame.style.backgroundImage = `url(${previewCanvas.toDataURL()})`;
+          
+          // 元の時間に戻す
+          video.currentTime = currentTime;
+          isGeneratingPreview = false;
+        });
+      } catch (e) {
+        console.error('Preview generation error:', e);
+        isGeneratingPreview = false;
+      }
+    }
 
-    progressContainer.addEventListener("mouseleave", () => {
-      hoverTime.style.display = "none";
-      previewVideo.style.display = "none";
-    });
-  }
-
-  // 初期設定
-  video.controls = false;
-  let isDragging = false;
-  let subtitlesEnabled = true;
-  let normalVideoWidth = videoContainer.clientWidth;
-  let audioOnlyMode = false;
-    // プログレスバーのイベントリスナーを更新
-    progressContainer.addEventListener("mousemove", (e) => {
+    // プレビューツールチップを表示
+    function showPreviewTooltip(e) {
       if (!video.duration) return;
+      
       const rect = progressContainer.getBoundingClientRect();
-      const pos = (e.clientX - rect.left) / rect.width;
-      const time = pos * video.duration;
+      const percent = (e.clientX - rect.left) / rect.width;
+      const time = percent * video.duration;
       
-      // 時間表示
+      // ツールチップの位置を設定
+      const tooltipWidth = previewTooltip.offsetWidth;
+      let left = e.clientX - rect.left;
+      
+      // ツールチップがコンテナからはみ出ないように調整
+      if (left < tooltipWidth / 2) {
+        left = tooltipWidth / 2;
+      } else if (left > rect.width - tooltipWidth / 2) {
+        left = rect.width - tooltipWidth / 2;
+      }
+      
+      previewTooltip.style.left = `${left}px`;
+      
+      // 時間を表示
       const minutes = Math.floor(time / 60);
       const seconds = Math.floor(time % 60).toString().padStart(2, '0');
-      hoverTime.textContent = `${minutes}:${seconds}`;
-      hoverTime.style.display = 'block';
-      hoverTime.style.left = `${e.clientX - rect.left}px`;
+      previewTime.textContent = `${minutes}:${seconds}`;
       
-      // サムネイルプレビュー
-      previewVideo.currentTime = time;
-      previewVideo.style.display = "block";
-      previewVideo.style.left = `${e.clientX}px`;
-      previewVideo.style.bottom = `${rect.height + 10}px`;
-    });
+      // プレビュー画像を生成
+      generatePreview(time);
+      
+      // ツールチップを表示
+      previewTooltip.style.display = 'block';
+    }
+
+    // プレビューツールチップを非表示
+    function hidePreviewTooltip() {
+      previewTooltip.style.display = 'none';
+    }
 
-    progressContainer.addEventListener("mouseleave", () => {
-      hoverTime.style.display = "none";
-      previewVideo.style.display = "none";
-    });
-  
     function updatePlaybackRate(value) {
       const speed = parseFloat(value);
       speedInput.value = speed;
       speedRange.value = speed;
       video.playbackRate = speed;
     }
-  
+
     function updateVolume(value) {
       const volume = parseFloat(value);
       volumeInput.value = volume;
@@ -801,10 +882,10 @@
         volumeBtn.textContent = '🔊';
       }
     }
-  
+
     function handleVideoChange() {
       const selected = videoSelect.value;
-  
+
       if (selected === 'v-2.mp4') {
         const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
         if (!confirmPlay) {
@@ -812,14 +893,14 @@
           return;
         }
       }
-  
+
       video.src = selected;
       video.load();
       video.play().then(() => {
         playPauseBtn.textContent = '⏸';
       }).catch(e => console.log(e));
     }
-  
+
     function togglePlayPause() {
       if (video.paused) {
         video.play();
@@ -829,7 +910,7 @@
         playPauseBtn.textContent = '▶';
       }
     }
-  
+
     function updateProgress() {
       const percent = (video.currentTime / video.duration) * 100;
       progressBar.style.width = `${percent}%`;
@@ -841,14 +922,14 @@
       
       timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
     }
-  
+
     function setProgress(e) {
       const width = progressContainer.clientWidth;
       const clickX = e.offsetX;
       const duration = video.duration;
       video.currentTime = (clickX / width) * duration;
     }
-  
+
     function toggleMute() {
       video.muted = !video.muted;
       if (video.muted) {
@@ -858,12 +939,12 @@
         updateVolume(video.volume);
       }
     }
-  
+
     function handleVolumeChange() {
       video.muted = false;
       updateVolume(volumeSlider.value);
     }
-  
+
     function goFullscreen() {
       if (
         document.fullscreenElement || 
@@ -890,37 +971,48 @@
       }
     }
     
-    // 全画面時の右クリックメニュー
-    function setupFullscreenContextMenu() {
-      videoContainer.addEventListener('contextmenu', (e) => {
-        e.preventDefault();
-        
-        // 全画面モードかどうかをチェック
-        const isFullscreen = document.fullscreenElement || 
-                           document.webkitFullscreenElement || 
-                           document.msFullscreenElement;
-        
-        if (isFullscreen) {
-          // コントロールパネルを表示
-          controls.style.display = controls.style.display === 'none' ? 'flex' : 'none';
-        }
-      });
+    // 全画面コンテキストメニューを表示
+    function showContextMenu(e) {
+      // 全画面時のみコンテキストメニューを表示
+      if (!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
+        return;
+      }
+      
+      e.preventDefault();
+      
+      // メニューの位置を設定
+      fullscreenContextMenu.style.display = 'block';
+      fullscreenContextMenu.style.left = `${e.clientX}px`;
+      fullscreenContextMenu.style.top = `${e.clientY}px`;
+    }
+    
+    // 全画面コンテキストメニューを非表示
+    function hideContextMenu() {
+      fullscreenContextMenu.style.display = 'none';
     }
-  
-    // 動画非表示モード
+    
+    // 音声/字幕のみモードを切り替え
     function toggleAudioOnlyMode() {
-      audioOnlyMode = !audioOnlyMode;
-      audioOnlyCheckbox.checked = audioOnlyMode;
+      isAudioOnlyMode = !isAudioOnlyMode;
       
-      if (audioOnlyMode) {
+      if (isAudioOnlyMode) {
         videoContainer.classList.add('audio-only-mode');
-        audioOnlyBtn.textContent = '🎬'; // 動画表示アイコンに変更
+        videoPlaceholder.style.display = 'flex';
+        video.style.display = 'none';
+        audioOnlyBtn.textContent = '🎥';
+        audioOnlyBtn.title = '動画表示モード';
       } else {
         videoContainer.classList.remove('audio-only-mode');
-        audioOnlyBtn.textContent = '🎵'; // 音声のみアイコンに戻す
+        videoPlaceholder.style.display = 'none';
+        video.style.display = 'block';
+        audioOnlyBtn.textContent = '🔈';
+        audioOnlyBtn.title = '音声/字幕のみ';
       }
+      
+      // コンテキストメニューも更新
+      hideContextMenu();
     }
-  
+
     // 全画面変更時の字幕サイズ調整
     function updateSubtitleScaleForFullscreen() {
       if (document.fullscreenElement || document.webkitFullscreenElement || 
@@ -934,14 +1026,14 @@
         document.documentElement.style.setProperty('--fullscreen-scale', 1);
       }
     }
-  
+
     // 字幕関連の関数
     function toggleSubtitles() {
       subtitlesEnabled = subtitleToggle.checked;
       subtitleTrackElement.track.mode = subtitlesEnabled ? 'showing' : 'hidden';
       subtitleBtn.style.color = subtitlesEnabled ? '#00ccff' : '#666';
     }
-  
+
     function updateSubtitleSize(value) {
       const size = parseFloat(value);
       subtitleSizeInput.value = size;
@@ -972,63 +1064,82 @@
         video.textTracks[0].mode = subtitlesEnabled ? 'showing' : 'hidden';
       }
     }
-  
+
     function toggleSubtitleMenu() {
       document.getElementById('subtitleToggle').checked ^= true;
       toggleSubtitles();
     }
-  
+
     // イベントリスナー
     videoSelect.addEventListener('change', handleVideoChange);
-  
+
     ['input', 'change', 'mouseup'].forEach(eventName => {
       speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value));
       volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value));
       subtitleSize.addEventListener(eventName, () => updateSubtitleSize(subtitleSize.value));
     });
-  
+
     speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value));
     volumeInput.addEventListener('input', () => updateVolume(volumeInput.value));
     subtitleSizeInput.addEventListener('input', () => updateSubtitleSize(subtitleSizeInput.value));
-  
+
     loopCheckbox.addEventListener('change', () => {
       video.loop = loopCheckbox.checked;
     });
-  
-    audioOnlyCheckbox.addEventListener('change', toggleAudioOnlyMode);
-    audioOnlyBtn.addEventListener('click', toggleAudioOnlyMode);
-  
+
     subtitleToggle.addEventListener('change', toggleSubtitles);
     subtitleTrack.addEventListener('change', changeSubtitleTrack);
     subtitleBtn.addEventListener('click', toggleSubtitleMenu);
-  
+
     playPauseBtn.addEventListener('click', togglePlayPause);
     video.addEventListener('click', togglePlayPause);
     video.addEventListener('play', () => playPauseBtn.textContent = '⏸');
     video.addEventListener('pause', () => playPauseBtn.textContent = '▶');
     video.addEventListener('timeupdate', updateProgress);
     progressContainer.addEventListener('click', setProgress);
-progressContainer.addEventListener('mousedown', () => {
-  isDragging = true;
-});
-document.addEventListener('mouseup', () => {
-  isDragging = false;
-});
-progressContainer.addEventListener('mousemove', (e) => {
-  if (isDragging) {
-    setProgress(e);
-  }
-});
+    progressContainer.addEventListener('mousedown', () => isDragging = true);
+    document.addEventListener('mouseup', () => isDragging = false);
+    progressContainer.addEventListener('mousemove', (e) => {
+      if (isDragging) {
+        setProgress(e);
+      }
+      showPreviewTooltip(e);
+    });
+    progressContainer.addEventListener('mouseenter', showPreviewTooltip);
+    progressContainer.addEventListener('mouseleave', hidePreviewTooltip);
     volumeBtn.addEventListener('click', toggleMute);
     volumeSlider.addEventListener('input', handleVolumeChange);
     fullscreenBtn.addEventListener('click', goFullscreen);
-  
+    audioOnlyBtn.addEventListener('click', toggleAudioOnlyMode);
+    
+    // 全画面コンテキストメニュー関連
+    videoContainer.addEventListener('contextmenu', showContextMenu);
+    exitFullscreenBtn.addEventListener('click', () => {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+      hideContextMenu();
+    });
+    showVideoBtn.addEventListener('click', () => {
+      if (isAudioOnlyMode) {
+        toggleAudioOnlyMode();
+      }
+      hideContextMenu();
+    });
+    contextAudioOnlyBtn.addEventListener('click', toggleAudioOnlyMode);
+    closeContextMenuBtn.addEventListener('click', hideContextMenu);
+    document.addEventListener('click', hideContextMenu);
+
     // 全画面変更イベントを監視
     document.addEventListener('fullscreenchange', updateSubtitleScaleForFullscreen);
     document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
     document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
     document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);
-  
+
     video.addEventListener('loadedmetadata', () => {
       updatePlaybackRate(speedRange.value);
       updateVolume(volumeRange.value);
@@ -1038,17 +1149,15 @@ progressContainer.addEventListener('mousemove', (e) => {
       updateProgress();
       // 通常時の動画幅を記録
       normalVideoWidth = videoContainer.clientWidth;
+      // プレビュー用キャンバスを作成
+      createPreviewCanvas();
     });
-  
+
     // CSS変数を設定
     document.documentElement.style.setProperty('--subtitle-scale', '1');
     document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
     document.documentElement.style.setProperty('--fullscreen-scale', '1');
-    
-    // 初期設定
-    setupHoverTime();
-    setupFullscreenContextMenu();
   </script>
 </body>
 
-</html>
+</html>