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-04 15:40:51 +08:00
parent 888ca621e4
commit 97a339f08d
3 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/css/style.css
View File

@@ -1045,13 +1045,21 @@ header p {
display: none;
}
.play-btn {
.now-playing-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
padding: 0.85rem 1.25rem;
align-items: center;
flex-wrap: wrap;
}
.play-btn {
padding: 0.75rem 1.25rem;
border: none;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;

10
public/index.html
View File

@@ -139,11 +139,11 @@
<div id="now-playing" class="now-playing hidden">
<h3>Now Playing</h3>
<p id="current-video-title">video.mp4</p>
<div style="display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; flex-wrap: wrap;">
<button id="transcode-btn" class="play-btn hidden">Start Transcode</button>
<button id="stop-transcode-btn" class="play-btn stop-btn hidden">Stop Transcode</button>
<button id="clear-playing-download-cache-btn" class="action-btn danger hidden">清空下载缓存</button>
<button id="clear-playing-transcode-cache-btn" class="action-btn danger hidden">清空转码缓存</button>
<div class="now-playing-actions">
<button id="transcode-btn" class="play-btn hidden">开始播放</button>
<button id="stop-transcode-btn" class="play-btn stop-btn hidden">停止播放</button>
<button id="clear-playing-download-cache-btn" class="play-btn stop-btn hidden">清空下载缓存</button>
<button id="clear-playing-transcode-cache-btn" class="play-btn stop-btn hidden">清空转码缓存</button>
</div>
</div>
</section>

18
public/js/main.js
View File

@@ -381,7 +381,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (stopTranscodeBtn) {
stopTranscodeBtn.classList.add('hidden');
stopTranscodeBtn.disabled = false;
stopTranscodeBtn.textContent = 'Stop Transcode';
stopTranscodeBtn.textContent = '停止播放';
}
};
@@ -862,13 +862,13 @@ document.addEventListener('DOMContentLoaded', () => {
if (transcodeBtn) {
transcodeBtn.disabled = false;
transcodeBtn.textContent = 'Start Transcode';
transcodeBtn.textContent = '开始播放';
transcodeBtn.classList.remove('hidden');
}
if (stopTranscodeBtn) {
stopTranscodeBtn.classList.add('hidden');
stopTranscodeBtn.disabled = false;
stopTranscodeBtn.textContent = 'Stop Transcode';
stopTranscodeBtn.textContent = '停止播放';
}
if (clearPlayingDownloadBtn) {
@@ -897,12 +897,12 @@ document.addEventListener('DOMContentLoaded', () => {
if (!selectedKey) return;
if (transcodeBtn) {
transcodeBtn.disabled = true;
transcodeBtn.textContent = 'Starting...';
transcodeBtn.textContent = '播放中...';
}
if (stopTranscodeBtn) {
stopTranscodeBtn.classList.remove('hidden');
stopTranscodeBtn.disabled = false;
stopTranscodeBtn.textContent = 'Stop Transcode';
stopTranscodeBtn.textContent = '停止播放';
}
stopPolling();
resetPhases();
@@ -983,7 +983,7 @@ document.addEventListener('DOMContentLoaded', () => {
const stopTranscode = async () => {
if (!currentVideoKey || !stopTranscodeBtn) return;
stopTranscodeBtn.disabled = true;
stopTranscodeBtn.textContent = 'Stopping...';
stopTranscodeBtn.textContent = '停止中...';
try {
const res = await fetch('/api/stop-transcode', {
@@ -1009,17 +1009,17 @@ document.addEventListener('DOMContentLoaded', () => {
updatePlayControls();
if (transcodeBtn) {
transcodeBtn.disabled = false;
transcodeBtn.textContent = 'Start Transcode';
transcodeBtn.textContent = '开始播放';
transcodeBtn.classList.remove('hidden');
}
stopTranscodeBtn.classList.add('hidden');
} catch (err) {
console.error('Stop transcode failed:', err);
alert(`Stop transcode failed: ${err.message}`);
alert(`停止播放失败: ${err.message}`);
} finally {
if (stopTranscodeBtn) {
stopTranscodeBtn.disabled = false;
stopTranscodeBtn.textContent = 'Stop Transcode';
stopTranscodeBtn.textContent = '停止播放';
}
}
};