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 20:55:22 +08:00
parent c8151a7779
commit 4e4db42934
4 changed files with 114 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
public/js/main.js
View File

@@ -19,7 +19,7 @@ document.addEventListener('DOMContentLoaded', () => {
const nowPlaying = document.getElementById('now-playing');
const currentVideoTitle = document.getElementById('current-video-title');
const transcodeBtn = document.getElementById('transcode-btn');
const playBtn = document.getElementById('play-btn');
const stopTranscodeBtn = document.getElementById('stop-transcode-btn'); const stopTranscodeBtn = document.getElementById('stop-transcode-btn'); const playBtn = document.getElementById('play-btn');
const progressInfo = document.getElementById('progress-info');
const progressText = document.getElementById('progress-text');
const progressFill = document.getElementById('progress-fill');
@@ -114,6 +114,11 @@ document.addEventListener('DOMContentLoaded', () => {
progressInfo.classList.add('hidden');
progressText.textContent = '';
progressFill.style.width = '0%';
if (stopTranscodeBtn) {
stopTranscodeBtn.classList.add('hidden');
stopTranscodeBtn.disabled = false;
stopTranscodeBtn.textContent = 'Stop Transcode';
}
};
const setAuthHeaders = (username, password) => {
@@ -403,6 +408,11 @@ document.addEventListener('DOMContentLoaded', () => {
transcodeBtn.textContent = 'Start Transcode';
transcodeBtn.classList.remove('hidden');
}
if (stopTranscodeBtn) {
stopTranscodeBtn.classList.add('hidden');
stopTranscodeBtn.disabled = false;
stopTranscodeBtn.textContent = 'Stop Transcode';
}
if (playBtn) {
playBtn.classList.add('hidden');
}
@@ -422,6 +432,11 @@ document.addEventListener('DOMContentLoaded', () => {
transcodeBtn.disabled = true;
transcodeBtn.textContent = 'Starting...';
}
if (stopTranscodeBtn) {
stopTranscodeBtn.classList.remove('hidden');
stopTranscodeBtn.disabled = false;
stopTranscodeBtn.textContent = 'Stop Transcode';
}
stopPolling();
transcodingOverlay.classList.remove('hidden');
setProgress({ status: 'Starting download...', percent: 0, details: 'Starting download...' });
@@ -448,6 +463,38 @@ document.addEventListener('DOMContentLoaded', () => {
}
};
const stopTranscode = async () => {
if (!currentVideoKey || !stopTranscodeBtn) return;
stopTranscodeBtn.disabled = true;
stopTranscodeBtn.textContent = 'Stopping...';
try {
const res = await fetch('/api/stop-transcode', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ key: currentVideoKey })
});
const data = await res.json();
if (!res.ok) throw new Error(data.error || 'Failed to stop transcode');
setProgress({ status: 'cancelled', percent: 0, details: 'Transcode stopped' });
if (transcodeBtn) {
transcodeBtn.disabled = false;
transcodeBtn.textContent = 'Start Transcode';
transcodeBtn.classList.remove('hidden');
}
stopTranscodeBtn.classList.add('hidden');
} catch (err) {
console.error('Stop transcode failed:', err);
alert(`Stop transcode failed: ${err.message}`);
} finally {
if (stopTranscodeBtn) {
stopTranscodeBtn.disabled = false;
stopTranscodeBtn.textContent = 'Stop Transcode';
}
}
};
// Poll the backend to check if the generated MP4 file is accessible
const pollForMp4Ready = (key, mp4Url) => {
let attempts = 0;
@@ -490,6 +537,9 @@ document.addEventListener('DOMContentLoaded', () => {
transcodingOverlay.classList.add('hidden');
videoPlayer.classList.remove('hidden');
playBtn.classList.add('hidden');
if (stopTranscodeBtn) {
stopTranscodeBtn.classList.add('hidden');
}
resetProgress();
videoPlayer.src = url;
@@ -511,6 +561,9 @@ document.addEventListener('DOMContentLoaded', () => {
if (clearTranscodeCacheBtn) {
clearTranscodeCacheBtn.addEventListener('click', clearTranscodeCache);
}
if (stopTranscodeBtn) {
stopTranscodeBtn.addEventListener('click', stopTranscode);
}
if (loginBtn) {
loginBtn.addEventListener('click', login);
}