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; display: none;
} }
.play-btn { .now-playing-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem; margin-top: 1rem;
padding: 0.85rem 1.25rem; align-items: center;
flex-wrap: wrap;
}
.play-btn {
padding: 0.75rem 1.25rem;
border: none; border: none;
border-radius: 999px; border-radius: 999px;
background: var(--accent); background: var(--accent);
color: #fff; color: #fff;
font-size: 0.92rem;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease; 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"> <div id="now-playing" class="now-playing hidden">
<h3>Now Playing</h3> <h3>Now Playing</h3>
<p id="current-video-title">video.mp4</p> <p id="current-video-title">video.mp4</p>
<div style="display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; flex-wrap: wrap;"> <div class="now-playing-actions">
<button id="transcode-btn" class="play-btn hidden">Start Transcode</button> <button id="transcode-btn" class="play-btn hidden">开始播放</button>
<button id="stop-transcode-btn" class="play-btn stop-btn hidden">Stop Transcode</button> <button id="stop-transcode-btn" class="play-btn stop-btn hidden">停止播放</button>
<button id="clear-playing-download-cache-btn" class="action-btn danger hidden">清空下载缓存</button> <button id="clear-playing-download-cache-btn" class="play-btn stop-btn hidden">清空下载缓存</button>
<button id="clear-playing-transcode-cache-btn" class="action-btn danger hidden">清空转码缓存</button> <button id="clear-playing-transcode-cache-btn" class="play-btn stop-btn hidden">清空转码缓存</button>
</div> </div>
</div> </div>
</section> </section>

18
public/js/main.js
View File

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