Align checkbox with buttons, move status below, add download button

This commit is contained in:
2026-06-05 17:01:18 -05:00
parent 97475d9a5d
commit 77759ee2cc
+9 -6
View File
@@ -117,13 +117,14 @@
<button class="btn btn-secondary" id="gen-only-btn" onclick="generateOnly()" style="display:none;"> <button class="btn btn-secondary" id="gen-only-btn" onclick="generateOnly()" style="display:none;">
<span id="gen-spinner" class="spin" style="display:none;"></span> Generate Only <span id="gen-spinner" class="spin" style="display:none;"></span> Generate Only
</button> </button>
<label style="display:inline-flex;align-items:center;gap:0.3rem;margin-left:0.75rem;cursor:pointer;"> <label style="display:inline-flex;align-items:center;gap:0.3rem;cursor:pointer;">
<input type="checkbox" id="post-to-discord" checked> <span class="muted" style="font-size:0.85rem;">Post to Discord</span> <input type="checkbox" id="post-to-discord" checked> <span class="muted" style="font-size:0.85rem;">Post to Discord</span>
</label> </label>
<span id="tts-status" class="muted"></span>
</div> </div>
<div id="tts-result" style="margin-top:0.75rem;display:none;"> <div id="tts-status" class="muted" style="margin-top:0.5rem;"></div>
<audio id="tts-audio" controls></audio> <div id="tts-result" style="margin-top:0.75rem;display:none;align-items:center;gap:0.75rem;">
<audio id="tts-audio" controls style="flex:1;"></audio>
<a id="tts-download" class="btn btn-secondary" href="#" download="ttstoy.mp3" style="font-size:0.85rem;padding:0.4rem 0.75rem;">Download</a>
</div> </div>
</div> </div>
@@ -304,7 +305,8 @@ async function submitTTS() {
spinner.style.display = 'none'; spinner.style.display = 'none';
status.textContent = 'Playing in VC — posted to Discord channel.'; status.textContent = 'Playing in VC — posted to Discord channel.';
document.getElementById('tts-audio').src = `/api/tts/${job_id}/audio`; document.getElementById('tts-audio').src = `/api/tts/${job_id}/audio`;
result.style.display = 'block'; document.getElementById('tts-download').href = `/api/tts/${job_id}/audio`;
result.style.display = 'flex';
} else if (job.status === 'error') { } else if (job.status === 'error') {
clearInterval(poll); clearInterval(poll);
spinner.style.display = 'none'; spinner.style.display = 'none';
@@ -336,7 +338,8 @@ async function generateOnly() {
spinner.style.display = 'none'; spinner.style.display = 'none';
status.textContent = post_to_discord ? 'Audio ready — posted to Discord channel.' : 'Audio ready.'; status.textContent = post_to_discord ? 'Audio ready — posted to Discord channel.' : 'Audio ready.';
document.getElementById('tts-audio').src = `/api/tts/${job_id}/audio`; document.getElementById('tts-audio').src = `/api/tts/${job_id}/audio`;
result.style.display = 'block'; document.getElementById('tts-download').href = `/api/tts/${job_id}/audio`;
result.style.display = 'flex';
} else if (job.status === 'error') { } else if (job.status === 'error') {
clearInterval(poll); clearInterval(poll);
spinner.style.display = 'none'; spinner.style.display = 'none';