diff --git a/abogen/web/static/dashboard.js b/abogen/web/static/dashboard.js index f08b92a..7881705 100644 --- a/abogen/web/static/dashboard.js +++ b/abogen/web/static/dashboard.js @@ -22,6 +22,19 @@ const initDashboard = () => { } }; + const selectFirstProfileIfAvailable = () => { + if (!profileSelect) return false; + const saved = Array.from(profileSelect.options).filter( + (option) => option.value && option.value !== "__standard" && option.value !== "__formula", + ); + if (!saved.length) { + profileSelect.value = "__standard"; + return false; + } + saved[0].selected = true; + return true; + }; + const updateVoiceControls = () => { if (!profileSelect) { return; @@ -32,15 +45,18 @@ const initDashboard = () => { const isSavedProfile = Boolean(value && !isStandard && !isFormula); if (voiceField) { - voiceField.hidden = false; - voiceField.setAttribute("aria-hidden", "false"); + const showVoice = isStandard; + voiceField.hidden = !showVoice; + voiceField.setAttribute("aria-hidden", showVoice ? "false" : "true"); } if (voiceSelect) { voiceSelect.disabled = !isStandard; voiceSelect.dataset.state = isStandard ? "editable" : "locked"; + if (isStandard) { + hydrateDefaultVoice(); + } } - let showFormula = isFormula || isSavedProfile; let presetFormula = ""; if (isSavedProfile) { const option = profileSelect.selectedOptions[0]; @@ -53,6 +69,7 @@ const initDashboard = () => { } } + const showFormula = isFormula; if (formulaField) { formulaField.hidden = !showFormula; formulaField.setAttribute("aria-hidden", showFormula ? "false" : "true"); @@ -60,14 +77,16 @@ const initDashboard = () => { if (formulaInput) { formulaInput.disabled = !showFormula; if (showFormula) { - if (presetFormula) { + if (presetFormula && !formulaInput.value) { formulaInput.value = presetFormula; } + formulaInput.readOnly = false; + formulaInput.dataset.state = "editable"; } else { formulaInput.value = formulaInput.value.trim(); + formulaInput.readOnly = true; + formulaInput.dataset.state = isSavedProfile ? "locked" : "editable"; } - formulaInput.dataset.state = isSavedProfile ? "locked" : "editable"; - formulaInput.readOnly = isSavedProfile; } }; @@ -102,12 +121,16 @@ const initDashboard = () => { }; if (profileSelect) { + const hasSaved = selectFirstProfileIfAvailable(); profileSelect.addEventListener("change", updateVoiceControls); updateVoiceControls(); + if (!hasSaved) { + hydrateDefaultVoice(); + } + } else { + hydrateDefaultVoice(); } - hydrateDefaultVoice(); - if (sourceText) { sourceText.addEventListener("input", updatePreview); updatePreview(); diff --git a/abogen/web/static/styles.css b/abogen/web/static/styles.css index 8e67269..1edcf9d 100644 --- a/abogen/web/static/styles.css +++ b/abogen/web/static/styles.css @@ -1030,13 +1030,17 @@ progress.progress::-moz-progress-bar { .voice-preview { display: grid; - gap: 0.75rem; + gap: 0.9rem; + padding: 1rem 1.25rem; + border-radius: 18px; + border: 1px solid rgba(148, 163, 184, 0.18); + background: rgba(15, 23, 42, 0.35); } .field--slider { display: flex; flex-direction: column; - gap: 0.5rem; + gap: 0.65rem; } .field--slider label { @@ -1088,6 +1092,7 @@ progress.progress::-moz-progress-bar { width: 100%; border-radius: 12px; background: rgba(15, 23, 42, 0.45); + border: 1px solid rgba(148, 163, 184, 0.18); } .voice-status { diff --git a/abogen/web/templates/index.html b/abogen/web/templates/index.html index 54c45cc..7a32398 100644 --- a/abogen/web/templates/index.html +++ b/abogen/web/templates/index.html @@ -4,46 +4,45 @@ {% block content %}
-

Create a new audiobook

+

Create a New Audiobook

- +
- +
-
- +
+ + +
+ -
- - -

Manage mixes in the voice mixer.

-
-