自定义播放控件

public/js/main.js

@@ -15,12 +15,22 @@ document.addEventListener('DOMContentLoaded', () => {
     const playerOverlay = document.getElementById('player-overlay');
     const transcodingOverlay = document.getElementById('transcoding-overlay');
     const videoPlayer = document.getElementById('video-player');
+    const playerWrapper = document.getElementById('player-wrapper');
     const nowPlaying = document.getElementById('now-playing');
     const currentVideoTitle = document.getElementById('current-video-title');
     const transcodeBtn = document.getElementById('transcode-btn');
     const stopTranscodeBtn = document.getElementById('stop-transcode-btn');
     const playBtn = document.getElementById('play-btn');
     const topBanner = document.getElementById('top-banner');
+    const customControls = document.getElementById('custom-controls');
+    const controlPlayToggle = document.getElementById('control-play-toggle');
+    const controlMuteToggle = document.getElementById('control-mute-toggle');
+    const controlFullscreenToggle = document.getElementById('control-fullscreen-toggle');
+    const volumeSlider = document.getElementById('volume-slider');
+    const volumeValue = document.getElementById('volume-value');
+    const playbackStatus = document.getElementById('playback-status');
+    const playbackStatusText = document.getElementById('playback-status-text');
+    const playbackSpeed = document.getElementById('playback-speed');
 
     // Download phase elements
     const downloadPhase = document.getElementById('download-phase');
@@ -64,6 +74,19 @@ document.addEventListener('DOMContentLoaded', () => {
     let isDraggingSeek = false;
     let isStreamActive = false;
     let pendingSeekTimeout = null;
+    let internalSeeking = false;
+    let lastAbsolutePlaybackTime = 0;
+    let lastVolumeBeforeMute = 1;
+    let controlsHideTimeout = null;
+    let controlsHovered = false;
+    let controlsPointerReleaseTimeout = null;
+
+    if (videoPlayer) {
+        videoPlayer.controls = false;
+    }
+    if (playbackSpeed) {
+        videoPlayer.playbackRate = parseFloat(playbackSpeed.value) || 1;
+    }
 
     const formatBytes = (bytes) => {
         if (!bytes || bytes === 0) return '0 B';
@@ -87,6 +110,102 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
+    const updatePlayControls = () => {
+        if (controlPlayToggle) {
+            controlPlayToggle.textContent = videoPlayer.paused ? 'Play' : 'Pause';
+        }
+        if (playbackStatus) {
+            playbackStatus.classList.remove('playing', 'paused', 'seeking');
+            playbackStatus.classList.add(videoPlayer.paused ? 'paused' : 'playing');
+        }
+        if (playbackStatusText) {
+            playbackStatusText.textContent = videoPlayer.paused ? 'Paused' : 'Playing';
+        }
+        if (playBtn) {
+            if (videoPlayer.paused && isStreamActive) {
+                playBtn.disabled = false;
+                playBtn.textContent = 'Play';
+                playBtn.classList.remove('hidden');
+            } else {
+                playBtn.classList.add('hidden');
+            }
+        }
+    };
+
+    const updateVolumeControls = () => {
+        const effectiveVolume = videoPlayer.muted ? 0 : videoPlayer.volume;
+        if (volumeSlider) {
+            volumeSlider.value = String(effectiveVolume);
+        }
+        if (volumeValue) {
+            volumeValue.textContent = `${Math.round(effectiveVolume * 100)}%`;
+        }
+        if (controlMuteToggle) {
+            controlMuteToggle.textContent = effectiveVolume === 0 ? 'Unmute' : 'Mute';
+        }
+    };
+
+    const updateFullscreenControls = () => {
+        if (controlFullscreenToggle) {
+            controlFullscreenToggle.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
+        }
+    };
+
+    const showCustomControls = () => {
+        if (customControls) {
+            customControls.classList.remove('hidden');
+            customControls.classList.remove('controls-faded');
+        }
+        if (customSeekContainer) {
+            customSeekContainer.classList.remove('controls-faded');
+        }
+    };
+
+    const hideCustomControls = () => {
+        if (customControls) {
+            customControls.classList.add('hidden');
+        }
+        if (customSeekContainer) {
+            customSeekContainer.classList.remove('controls-faded');
+        }
+    };
+
+    const revealPlaybackChrome = () => {
+        if (!isStreamActive) return;
+        if (customControls) customControls.classList.remove('controls-faded');
+        if (customSeekContainer) customSeekContainer.classList.remove('controls-faded');
+    };
+
+    const fadePlaybackChrome = () => {
+        if (!isStreamActive || videoPlayer.paused || controlsHovered || isDraggingSeek) return;
+        if (customControls) customControls.classList.add('controls-faded');
+        if (customSeekContainer) customSeekContainer.classList.add('controls-faded');
+    };
+
+    const schedulePlaybackChromeHide = () => {
+        if (controlsHideTimeout) {
+            clearTimeout(controlsHideTimeout);
+        }
+        revealPlaybackChrome();
+        if (!isStreamActive || videoPlayer.paused || controlsHovered) {
+            return;
+        }
+        controlsHideTimeout = setTimeout(() => {
+            fadePlaybackChrome();
+            controlsHideTimeout = null;
+        }, 1800);
+    };
+
+    const setPlaybackStatus = (statusText, statusClass) => {
+        if (playbackStatus) {
+            playbackStatus.classList.remove('playing', 'paused', 'seeking');
+            if (statusClass) playbackStatus.classList.add(statusClass);
+        }
+        if (playbackStatusText) {
+            playbackStatusText.textContent = statusText;
+        }
+    };
+
     const subscribeToKey = (key) => {
         subscribedKey = key;
         if (wsConnected) {
@@ -224,9 +343,55 @@ document.addEventListener('DOMContentLoaded', () => {
     videoPlayer.addEventListener('timeupdate', () => {
         if (isDraggingSeek || !isStreamActive) return;
         const absoluteTime = seekOffset + videoPlayer.currentTime;
+        lastAbsolutePlaybackTime = absoluteTime;
         updateSeekBarPosition(absoluteTime);
     });
 
+    videoPlayer.addEventListener('play', () => {
+        updatePlayControls();
+        schedulePlaybackChromeHide();
+    });
+    videoPlayer.addEventListener('pause', () => {
+        updatePlayControls();
+        revealPlaybackChrome();
+    });
+    videoPlayer.addEventListener('ended', () => {
+        updatePlayControls();
+        revealPlaybackChrome();
+    });
+    videoPlayer.addEventListener('volumechange', updateVolumeControls);
+
+    videoPlayer.addEventListener('click', () => {
+        if (!isStreamActive) return;
+
+        if (videoPlayer.paused) {
+            videoPlayer.play().catch(() => {});
+            return;
+        }
+
+        videoPlayer.pause();
+    });
+
+    // Browsers usually cannot seek inside a live fragmented MP4 stream.
+    // When the user drags the native video controls, remap that action to our server-side seek flow.
+    videoPlayer.addEventListener('seeking', () => {
+        if (internalSeeking || !isStreamActive || videoDuration <= 0) return;
+
+        const requestedAbsoluteTime = Math.max(0, Math.min(seekOffset + (videoPlayer.currentTime || 0), videoDuration - 0.5));
+        const drift = Math.abs(requestedAbsoluteTime - lastAbsolutePlaybackTime);
+
+        if (drift < 1) {
+            return;
+        }
+
+        internalSeeking = true;
+        setPlaybackStatus('Seeking', 'seeking');
+        seekToTime(requestedAbsoluteTime);
+        setTimeout(() => {
+            internalSeeking = false;
+        }, 500);
+    });
+
     // Seek bar interaction: click or drag
     const getSeekRatio = (e) => {
         const rect = seekBar.getBoundingClientRect();
@@ -282,15 +447,63 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
+    if (playerWrapper) {
+        playerWrapper.addEventListener('mousemove', () => {
+            controlsHovered = true;
+            schedulePlaybackChromeHide();
+            if (controlsPointerReleaseTimeout) {
+                clearTimeout(controlsPointerReleaseTimeout);
+            }
+            controlsPointerReleaseTimeout = setTimeout(() => {
+                controlsHovered = false;
+                schedulePlaybackChromeHide();
+                controlsPointerReleaseTimeout = null;
+            }, 1200);
+        });
+        playerWrapper.addEventListener('mouseenter', () => {
+            controlsHovered = true;
+            revealPlaybackChrome();
+        });
+        playerWrapper.addEventListener('mouseleave', () => {
+            controlsHovered = false;
+            schedulePlaybackChromeHide();
+        });
+    }
+
+    if (customControls) {
+        customControls.addEventListener('mouseenter', () => {
+            controlsHovered = true;
+            revealPlaybackChrome();
+        });
+        customControls.addEventListener('mouseleave', () => {
+            controlsHovered = false;
+            schedulePlaybackChromeHide();
+        });
+    }
+
+    if (customSeekContainer) {
+        customSeekContainer.addEventListener('mouseenter', () => {
+            controlsHovered = true;
+            revealPlaybackChrome();
+        });
+        customSeekContainer.addEventListener('mouseleave', () => {
+            controlsHovered = false;
+            schedulePlaybackChromeHide();
+        });
+    }
+
     const seekToTime = (targetSeconds) => {
         if (!selectedKey || !selectedBucket || videoDuration <= 0) return;
         targetSeconds = Math.max(0, Math.min(targetSeconds, videoDuration - 0.5));
         seekOffset = targetSeconds;
         isStreamActive = false;
+        lastAbsolutePlaybackTime = targetSeconds;
         updateSeekBarPosition(targetSeconds);
 
         // Show seeking indicator
         if (seekingOverlay) seekingOverlay.classList.remove('hidden');
+        setPlaybackStatus('Seeking', 'seeking');
+        revealPlaybackChrome();
         if (pendingSeekTimeout) {
             clearTimeout(pendingSeekTimeout);
             pendingSeekTimeout = null;
@@ -310,7 +523,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
         const onCanPlay = () => {
             if (seekingOverlay) seekingOverlay.classList.add('hidden');
+            lastAbsolutePlaybackTime = targetSeconds;
             videoPlayer.play().catch(() => {});
+            updatePlayControls();
             videoPlayer.removeEventListener('canplay', onCanPlay);
         };
         videoPlayer.addEventListener('canplay', onCanPlay, { once: true });
@@ -609,6 +824,9 @@ document.addEventListener('DOMContentLoaded', () => {
         if (seekCurrentTime) seekCurrentTime.textContent = formatTime(0);
         if (seekTotalTime) seekTotalTime.textContent = formatTime(0);
         hideSeekBar();
+        hideCustomControls();
+        setPlaybackStatus('Paused', 'paused');
+        updatePlayControls();
 
         if (transcodeBtn) {
             transcodeBtn.disabled = false;
@@ -650,6 +868,8 @@ document.addEventListener('DOMContentLoaded', () => {
         videoDuration = 0;
         isStreamActive = false;
         hideSeekBar();
+        hideCustomControls();
+        setPlaybackStatus('Paused', 'paused');
         transcodingOverlay.classList.remove('hidden');
 
         try {
@@ -665,13 +885,14 @@ document.addEventListener('DOMContentLoaded', () => {
                 transcodingOverlay.classList.add('hidden');
                 videoPlayer.classList.remove('hidden');
                 isStreamActive = true;
+                lastAbsolutePlaybackTime = seekOffset;
                 showSeekBar();
+                showCustomControls();
                 updateSeekBarPosition(seekOffset);
-                if (playBtn) {
-                    playBtn.disabled = false;
-                    playBtn.textContent = 'Play';
-                    playBtn.classList.remove('hidden');
-                }
+                updatePlayControls();
+                updateVolumeControls();
+                updateFullscreenControls();
+                schedulePlaybackChromeHide();
             }, { once: true });
         } catch (err) {
             console.error(err);
@@ -699,6 +920,9 @@ document.addEventListener('DOMContentLoaded', () => {
             videoPlayer.removeAttribute('src');
             videoPlayer.load();
             hideSeekBar();
+            hideCustomControls();
+            setPlaybackStatus('Paused', 'paused');
+            updatePlayControls();
             if (transcodeBtn) {
                 transcodeBtn.disabled = false;
                 transcodeBtn.textContent = 'Start Transcode';
@@ -726,7 +950,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const playMp4Stream = (url) => {
         transcodingOverlay.classList.add('hidden');
         videoPlayer.classList.remove('hidden');
-        playBtn.classList.add('hidden');
+        hideCustomControls();
+        if (playBtn) playBtn.classList.add('hidden');
         if (stopTranscodeBtn) {
             stopTranscodeBtn.classList.add('hidden');
         }
@@ -735,17 +960,115 @@ document.addEventListener('DOMContentLoaded', () => {
         videoPlayer.src = url;
         videoPlayer.load();
         isStreamActive = true;
+        lastAbsolutePlaybackTime = seekOffset;
         showSeekBar();
+        showCustomControls();
         videoPlayer.addEventListener('loadedmetadata', () => {
             updateSeekBarPosition(seekOffset);
-            if (playBtn) {
-                playBtn.disabled = false;
-                playBtn.textContent = 'Play';
-                playBtn.classList.remove('hidden');
-            }
+            updatePlayControls();
+            updateVolumeControls();
+            updateFullscreenControls();
+            schedulePlaybackChromeHide();
         }, { once: true });
     };
 
+    if (controlPlayToggle) {
+        controlPlayToggle.addEventListener('click', () => {
+            if (!isStreamActive) return;
+            if (videoPlayer.paused) {
+                videoPlayer.play().catch(() => {});
+            } else {
+                videoPlayer.pause();
+            }
+        });
+    }
+
+    if (controlMuteToggle) {
+        controlMuteToggle.addEventListener('click', () => {
+            if (videoPlayer.muted || videoPlayer.volume === 0) {
+                videoPlayer.muted = false;
+                videoPlayer.volume = lastVolumeBeforeMute > 0 ? lastVolumeBeforeMute : 1;
+            } else {
+                lastVolumeBeforeMute = videoPlayer.volume > 0 ? videoPlayer.volume : lastVolumeBeforeMute;
+                videoPlayer.muted = true;
+                videoPlayer.volume = 0;
+            }
+            updateVolumeControls();
+        });
+    }
+
+    if (volumeSlider) {
+        volumeSlider.addEventListener('input', (event) => {
+            const nextVolume = Math.max(0, Math.min(1, parseFloat(event.target.value)));
+            videoPlayer.muted = nextVolume === 0;
+            videoPlayer.volume = nextVolume;
+            if (nextVolume > 0) {
+                lastVolumeBeforeMute = nextVolume;
+            }
+            updateVolumeControls();
+        });
+    }
+
+    if (playbackSpeed) {
+        playbackSpeed.addEventListener('change', (event) => {
+            const nextRate = Math.max(0.25, Math.min(4, parseFloat(event.target.value) || 1));
+            videoPlayer.playbackRate = nextRate;
+            revealPlaybackChrome();
+            schedulePlaybackChromeHide();
+        });
+    }
+
+    if (controlFullscreenToggle) {
+        controlFullscreenToggle.addEventListener('click', async () => {
+            try {
+                if (document.fullscreenElement) {
+                    await document.exitFullscreen();
+                } else if (playerOverlay?.parentElement && typeof playerOverlay.parentElement.requestFullscreen === 'function') {
+                    await playerOverlay.parentElement.requestFullscreen();
+                }
+            } catch (error) {
+                console.error('Fullscreen toggle failed:', error);
+            } finally {
+                updateFullscreenControls();
+            }
+        });
+    }
+
+    document.addEventListener('fullscreenchange', updateFullscreenControls);
+
+    document.addEventListener('keydown', (event) => {
+        if (!isStreamActive) return;
+        const tagName = event.target?.tagName;
+        if (tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA' || tagName === 'BUTTON') return;
+
+        if (event.code === 'Space') {
+            event.preventDefault();
+            if (videoPlayer.paused) {
+                videoPlayer.play().catch(() => {});
+            } else {
+                videoPlayer.pause();
+            }
+            revealPlaybackChrome();
+            schedulePlaybackChromeHide();
+            return;
+        }
+
+        if (event.code === 'ArrowRight') {
+            event.preventDefault();
+            seekToTime((seekOffset + (videoPlayer.currentTime || 0)) + 5);
+            return;
+        }
+
+        if (event.code === 'ArrowLeft') {
+            event.preventDefault();
+            seekToTime((seekOffset + (videoPlayer.currentTime || 0)) - 5);
+        }
+    });
+
+    updatePlayControls();
+    updateVolumeControls();
+    updateFullscreenControls();
+
     // Bind events
     refreshBtn.addEventListener('click', () => fetchVideos(selectedBucket));
     if (clearDownloadCacheBtn) {