CN-JS-HuiBai/Media-Coding-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增转码进度显示功能，优化视频标题显示，添加编码器选择面板。

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-02 17:41:50 +08:00
parent eb6068cbb8
commit edf39d0ae4
4 changed files with 84 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/js/main.js
View File

@@ -10,9 +10,27 @@ document.addEventListener('DOMContentLoaded', () => {
const nowPlaying = document.getElementById('now-playing');
const currentVideoTitle = document.getElementById('current-video-title');
const playBtn = document.getElementById('play-btn');
const progressInfo = document.getElementById('progress-info');
const progressText = document.getElementById('progress-text');
const progressFill = document.getElementById('progress-fill');
let currentPollInterval = null;
const setProgress = (progress) => {
if (!progressInfo || !progressText || !progressFill) return;
const percent = Math.min(Math.max(Math.round(progress?.percent || 0), 0), 100);
progressInfo.classList.remove('hidden');
progressText.textContent = `${progress?.details || progress?.status || 'Transcoding...'} ${percent ? `${percent}%` : ''}`.trim();
progressFill.style.width = `${percent}%`;
};
const resetProgress = () => {
if (!progressInfo || !progressText || !progressFill) return;
progressInfo.classList.add('hidden');
progressText.textContent = '';
progressFill.style.width = '0%';
};
if (playBtn) {
playBtn.addEventListener('click', () => {
videoPlayer.play().catch(e => console.log('Play blocked:', e));
@@ -144,11 +162,13 @@ document.addEventListener('DOMContentLoaded', () => {
videoPlayer.classList.add('hidden');
videoPlayer.pause();
if (playBtn) playBtn.classList.add('hidden');
resetProgress();
nowPlaying.classList.remove('hidden');
currentVideoTitle.textContent = key.split('/').pop();
transcodingOverlay.classList.remove('hidden');
setProgress({ status: 'Starting transcoding...', percent: 0, details: 'Starting transcoding...' });
try {
const codec = codecSelect?.value || 'h264';
@@ -181,8 +201,13 @@ document.addEventListener('DOMContentLoaded', () => {
const res = await fetch(`/api/status?key=${encodeURIComponent(key)}`);
const data = await res.json();
if (data.ready) {
if (data.progress) {
setProgress(data.progress);
}
if (data.ready) {
stopPolling();
setProgress({ status: 'Ready to play', percent: 100, details: 'Ready to play' });
playHlsStream(data.hlsUrl);
} else if (attempts >= maxAttempts) {
stopPolling();
@@ -206,6 +231,7 @@ document.addEventListener('DOMContentLoaded', () => {
transcodingOverlay.classList.add('hidden');
videoPlayer.classList.remove('hidden');
playBtn.classList.add('hidden');
resetProgress();
if (Hls.isSupported()) {
const hls = new Hls();