显示控件范围
This commit is contained in:
CN-JS-HuiBai
@@ -26,13 +26,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const controlPlayToggle = document.getElementById('control-play-toggle');
|
||||
const controlMuteToggle = document.getElementById('control-mute-toggle');
|
||||
const controlFullscreenToggle = document.getElementById('control-fullscreen-toggle');
|
||||
const controlSpeedToggle = document.getElementById('control-speed-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');
|
||||
const transcodeProgressChip = document.getElementById('transcode-progress-chip');
|
||||
const playbackProgressChip = document.getElementById('playback-progress-chip');
|
||||
|
||||
// Download phase elements
|
||||
const downloadPhase = document.getElementById('download-phase');
|
||||
@@ -53,6 +52,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Custom seek bar elements
|
||||
const customSeekContainer = document.getElementById('custom-seek-container');
|
||||
const seekBar = document.getElementById('seek-bar');
|
||||
const seekBarTranscode = document.getElementById('seek-bar-transcode');
|
||||
const seekBarProgress = document.getElementById('seek-bar-progress');
|
||||
const seekBarHandle = document.getElementById('seek-bar-handle');
|
||||
const seekCurrentTime = document.getElementById('seek-current-time');
|
||||
@@ -159,27 +159,28 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
volumeValue.textContent = `${Math.round(effectiveVolume * 100)}%`;
|
||||
}
|
||||
if (controlMuteToggle) {
|
||||
controlMuteToggle.textContent = effectiveVolume === 0 ? 'Unmute' : 'Mute';
|
||||
controlMuteToggle.textContent = effectiveVolume === 0 ? 'x' : 'o';
|
||||
controlMuteToggle.setAttribute('aria-label', effectiveVolume === 0 ? 'Unmute' : 'Mute');
|
||||
}
|
||||
};
|
||||
|
||||
const updateFullscreenControls = () => {
|
||||
if (controlFullscreenToggle) {
|
||||
controlFullscreenToggle.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
|
||||
controlFullscreenToggle.textContent = '[]';
|
||||
controlFullscreenToggle.setAttribute('aria-label', document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen');
|
||||
}
|
||||
};
|
||||
|
||||
const updatePlaybackProgressChip = (absoluteTime = 0) => {
|
||||
if (!playbackProgressChip) return;
|
||||
const safeDuration = videoDuration > 0 ? videoDuration : 0;
|
||||
const percent = safeDuration > 0 ? Math.min(Math.max(Math.round((absoluteTime / safeDuration) * 100), 0), 100) : 0;
|
||||
playbackProgressChip.textContent = `Play ${percent}%`;
|
||||
const updateSpeedControls = () => {
|
||||
if (controlSpeedToggle && playbackSpeed) {
|
||||
controlSpeedToggle.textContent = playbackSpeed.value === '1' ? '1x' : playbackSpeed.value;
|
||||
}
|
||||
};
|
||||
|
||||
const updateTranscodeProgressChip = (percent = 0, label = 'Transcode') => {
|
||||
if (!transcodeProgressChip) return;
|
||||
const updateTranscodeProgressBar = (percent = 0) => {
|
||||
if (!seekBarTranscode) return;
|
||||
const safePercent = Math.min(Math.max(Math.round(percent || 0), 0), 100);
|
||||
transcodeProgressChip.textContent = `${label} ${safePercent}%`;
|
||||
seekBarTranscode.style.width = `${safePercent}%`;
|
||||
};
|
||||
|
||||
const showCustomControls = () => {
|
||||
@@ -254,7 +255,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (seekTotalTime) seekTotalTime.textContent = formatTime(videoDuration);
|
||||
showSeekBar();
|
||||
updateSeekBarPosition(seekOffset + (videoPlayer.currentTime || 0));
|
||||
updatePlaybackProgressChip(seekOffset + (videoPlayer.currentTime || 0));
|
||||
}
|
||||
if (message.type === 'progress') {
|
||||
handleProgress(message.progress);
|
||||
@@ -275,7 +275,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (status === 'downloading') {
|
||||
showDownloadPhase();
|
||||
const percent = Math.min(Math.max(Math.round(progress.percent || 0), 0), 100);
|
||||
updateTranscodeProgressChip(percent, 'Download');
|
||||
updateTranscodeProgressBar(percent);
|
||||
const downloaded = formatBytes(progress.downloadedBytes || 0);
|
||||
const total = formatBytes(progress.totalBytes || 0);
|
||||
downloadSizeText.textContent = `${downloaded} / ${total}`;
|
||||
@@ -283,7 +283,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
downloadProgressFill.style.width = `${percent}%`;
|
||||
} else if (status === 'downloaded') {
|
||||
showDownloadPhase();
|
||||
updateTranscodeProgressChip(100, 'Download');
|
||||
updateTranscodeProgressBar(100);
|
||||
const downloaded = formatBytes(progress.downloadedBytes || progress.totalBytes || 0);
|
||||
const total = formatBytes(progress.totalBytes || 0);
|
||||
downloadSizeText.textContent = `${downloaded} / ${total} — 下载完成`;
|
||||
@@ -295,7 +295,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
} else if (status === 'transcoding') {
|
||||
showTranscodePhase();
|
||||
const percent = Math.min(Math.max(Math.round(progress.percent || 0), 0), 100);
|
||||
updateTranscodeProgressChip(percent, 'Transcode');
|
||||
updateTranscodeProgressBar(percent);
|
||||
transcodeProgressText.textContent = `${percent}%`;
|
||||
transcodeProgressFill.style.width = `${percent}%`;
|
||||
transcodeDetailText.textContent = progress.details || 'FFmpeg 转码中...';
|
||||
@@ -308,16 +308,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
} else if (status === 'finished') {
|
||||
showTranscodePhase();
|
||||
updateTranscodeProgressChip(100, 'Transcode');
|
||||
updateTranscodeProgressBar(100);
|
||||
transcodeProgressText.textContent = '100%';
|
||||
transcodeProgressFill.style.width = '100%';
|
||||
transcodeDetailText.textContent = '转码完成';
|
||||
} else if (status === 'failed') {
|
||||
updateTranscodeProgressChip(progress.percent || 0, 'Failed');
|
||||
updateTranscodeProgressBar(progress.percent || 0);
|
||||
transcodeDetailText.textContent = `失败: ${progress.details || '未知错误'}`;
|
||||
transcodeProgressFill.style.background = 'linear-gradient(90deg, #dc2626, #b91c1c)';
|
||||
} else if (status === 'cancelled') {
|
||||
updateTranscodeProgressChip(0, 'Stopped');
|
||||
updateTranscodeProgressBar(0);
|
||||
transcodeDetailText.textContent = '已取消';
|
||||
transcodeProgressFill.style.width = '0%';
|
||||
}
|
||||
@@ -350,8 +350,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (statFps) statFps.textContent = '';
|
||||
if (statBitrate) statBitrate.textContent = '';
|
||||
if (statTime) statTime.textContent = '';
|
||||
updateTranscodeProgressChip(0, 'Transcode');
|
||||
updatePlaybackProgressChip(0);
|
||||
updateTranscodeProgressBar(0);
|
||||
|
||||
if (stopTranscodeBtn) {
|
||||
stopTranscodeBtn.classList.add('hidden');
|
||||
@@ -377,7 +376,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
seekBarProgress.style.width = `${ratio * 100}%`;
|
||||
seekBarHandle.style.left = `${ratio * 100}%`;
|
||||
seekCurrentTime.textContent = formatTime(absoluteTime);
|
||||
updatePlaybackProgressChip(absoluteTime);
|
||||
};
|
||||
|
||||
// Track playback position in the custom seek bar
|
||||
@@ -1048,6 +1046,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
playbackSpeed.addEventListener('change', (event) => {
|
||||
const nextRate = Math.max(0.25, Math.min(4, parseFloat(event.target.value) || 1));
|
||||
videoPlayer.playbackRate = nextRate;
|
||||
updateSpeedControls();
|
||||
revealPlaybackChrome();
|
||||
schedulePlaybackChromeHide();
|
||||
});
|
||||
@@ -1103,8 +1102,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
updatePlayControls();
|
||||
updateVolumeControls();
|
||||
updateFullscreenControls();
|
||||
updateTranscodeProgressChip(0, 'Transcode');
|
||||
updatePlaybackProgressChip(0);
|
||||
updateSpeedControls();
|
||||
updateTranscodeProgressBar(0);
|
||||
|
||||
// Bind events
|
||||
refreshBtn.addEventListener('click', () => fetchVideos(selectedBucket));
|
||||
|
||||
Reference in New Issue
Block a user