Improve settings

src/main/resources/static/css/styles.css

@@ -59,7 +59,7 @@ body {
     font-size: 13px;
 }
 
-.channels-body {
+.channels-body, .settings-body {
     min-height: 100vh;
     background: radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.16), transparent 30%),
                 radial-gradient(circle at 85% 10%, rgba(59, 130, 246, 0.18), transparent 28%),
@@ -70,14 +70,14 @@ body {
     padding: clamp(24px, 4vw, 48px);
 }
 
-.channels-shell {
+.channels-shell, .settings-shell {
     width: min(760px, 100%);
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
-.channels-header {
+.channels-header, .settings-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -88,6 +88,23 @@ body {
     margin: 0;
 }
 
+.settings-main {
+    display: flex;
+    justify-content: center;
+}
+
+.settings-card {
+    width: 100%;
+    background: rgba(11, 18, 32, 0.95);
+    border: 1px solid #1f2937;
+    border-radius: 16px;
+    padding: clamp(20px, 3vw, 32px);
+    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
 .channels-main {
     display: flex;
     justify-content: center;
@@ -116,6 +133,13 @@ body {
     margin-top: 6px;
 }
 
+.settings-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    margin-top: 6px;
+}
+
 .channels-footer {
     display: flex;
     align-items: center;
@@ -252,6 +276,19 @@ body {
     box-shadow: 0 10px 30px rgba(124, 58, 237, 0.25);
 }
 
+.button:disabled, button:disabled, .button[aria-disabled="true"] {
+    background: #a78bfa;
+    color: #e5e7eb;
+    cursor: not-allowed;
+    box-shadow: none;
+    opacity: 0.7;
+}
+
+.button:disabled:hover,
+button:disabled:hover {
+    transform: none;
+}
+
 .button.block {
     width: 100%;
 }
@@ -333,6 +370,18 @@ body {
     box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
 }
 
+.text-input:disabled, .text-input[aria-disabled="true"] {
+    background: #020617;
+    border-color: #334155;
+    color: #64748b;
+    cursor: not-allowed;
+    box-shadow: none;
+}
+
+.text-input:disabled::placeholder {
+    color: #475569;
+}
+
 .search-form {
     display: flex;
     flex-direction: column;

src/main/resources/static/js/broadcast.js

@@ -87,11 +87,7 @@ function connect() {
                 return r.json();
             })
             .then(renderAssets)
-            .catch(() => {
-                if (typeof showToast === 'function') {
-                    showToast('Unable to load overlay assets. Retrying may help.', 'error');
-                }
-            });
+            .catch(() => showToast('Unable to load overlay assets. Retrying may help.', 'error'));
     });
 }
 
@@ -108,7 +104,7 @@ function storeAsset(asset, placement = 'keep') {
 }
 
 function fetchCanvasSettings() {
-    return fetch(`/api/channels/${broadcaster}/canvas`)
+    return fetch(`/api/channels/${encodeURIComponent(broadcaster)}/canvas`)
         .then((r) => {
             if (!r.ok) {
                 throw new Error('Failed to load canvas');
@@ -121,9 +117,7 @@ function fetchCanvasSettings() {
         })
         .catch(() => {
             resizeCanvas();
-            if (typeof showToast === 'function') {
-                showToast('Using default canvas size. Unable to load saved settings.', 'warning');
-            }
+            showToast('Using default canvas size. Unable to load saved settings.', 'warning');
         });
 }
 
@@ -676,7 +670,7 @@ function setVideoSource(element, asset) {
             return;
         }
         applyVideoSource(element, next.objectUrl, asset);
-    }).catch(() => {});
+    }).catch(() => { });
 }
 
 function applyVideoSource(element, objectUrl, asset) {

src/main/resources/static/js/dashboard.js

@@ -119,26 +119,22 @@ function fetchAdmins() {
         .then(renderAdmins)
         .catch(() => {
             renderAdmins([]);
-            if (typeof showToast === 'function') {
-                showToast('Unable to load admins right now. Please try again.', 'error');
-            }
+            showToast('Unable to load admins right now. Please try again.', 'error');
         });
 }
 
 function removeAdmin(username) {
     if (!username) return;
-    fetch(`/api/channels/${broadcaster}/admins/${encodeURIComponent(username)}`, {
+    fetch(`/api/channels/${encodeURIComponent(broadcaster)}/admins/${encodeURIComponent(username)}`, {
         method: 'DELETE'
     }).then((response) => {
-        if (!response.ok && typeof showToast === 'function') {
-            showToast('Failed to remove admin. Please retry.', 'error');
+        if (!response.ok) {
+            throw new Error();
         }
         fetchAdmins();
         fetchSuggestedAdmins();
     }).catch(() => {
-        if (typeof showToast === 'function') {
-            showToast('Failed to remove admin. Please retry.', 'error');
-        }
+        showToast('Failed to remove admin. Please retry.', 'error');
     });
 }
 
@@ -146,9 +142,7 @@ function addAdmin(usernameFromAction) {
     const input = document.getElementById('new-admin');
     const username = (usernameFromAction || input?.value || '').trim();
     if (!username) {
-        if (typeof showToast === 'function') {
-            showToast('Enter a Twitch username to add as an admin.', 'info');
-        }
+        showToast('Enter a Twitch username to add as an admin.', 'info');
         return;
     }
 
@@ -164,17 +158,11 @@ function addAdmin(usernameFromAction) {
             if (input) {
                 input.value = '';
             }
-            if (typeof showToast === 'function') {
-                showToast(`Added @${username} as an admin.`, 'success');
-            }
+            showToast(`Added @${username} as an admin.`, 'success');
             fetchAdmins();
             fetchSuggestedAdmins();
         })
-        .catch(() => {
-            if (typeof showToast === 'function') {
-                showToast('Unable to add admin right now. Please try again.', 'error');
-            }
-        });
+        .catch(() => showToast('Unable to add admin right now. Please try again.', 'error'));
 }
 
 function renderCanvasSettings(settings) {
@@ -195,9 +183,7 @@ function fetchCanvasSettings() {
         .then(renderCanvasSettings)
         .catch(() => {
             renderCanvasSettings({ width: 1920, height: 1080 });
-            if (typeof showToast === 'function') {
-                showToast('Using default canvas size. Unable to load saved settings.', 'warning');
-            }
+            showToast('Using default canvas size. Unable to load saved settings.', 'warning');
         });
 }
 
@@ -208,9 +194,7 @@ function saveCanvasSettings() {
     const width = parseFloat(widthInput?.value) || 0;
     const height = parseFloat(heightInput?.value) || 0;
     if (width <= 0 || height <= 0) {
-        if (typeof showToast === 'function') {
-            showToast('Please enter a valid width and height.', 'info');
-        }
+        showToast('Please enter a valid width and height.', 'info');
         return;
     }
     if (status) status.textContent = 'Saving...';
@@ -228,18 +212,14 @@ function saveCanvasSettings() {
         .then((settings) => {
             renderCanvasSettings(settings);
             if (status) status.textContent = 'Saved.';
-            if (typeof showToast === 'function') {
-                showToast('Canvas size saved successfully.', 'success');
-            }
+            showToast('Canvas size saved successfully.', 'success');
             setTimeout(() => {
                 if (status) status.textContent = '';
             }, 2000);
         })
         .catch(() => {
             if (status) status.textContent = 'Unable to save right now.';
-            if (typeof showToast === 'function') {
-                showToast('Unable to save canvas size. Please retry.', 'error');
-            }
+            showToast('Unable to save canvas size. Please retry.', 'error');
         });
 }
 

src/main/resources/static/js/landing.js

@@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const suggestions = document.getElementById("channel-suggestions");
 
     if (!searchForm || !searchInput || !suggestions) {
+        console.error("Required elements not found in the DOM");
         return;
     }
 
@@ -36,9 +37,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
-    searchInput.addEventListener("input", (event) => {
-        updateSuggestions(event.target.value || "");
-    });
+    searchInput.addEventListener("input", (event) => updateSuggestions(event.target.value || ""));
 
     searchForm.addEventListener("submit", (event) => {
         event.preventDefault();

src/main/resources/static/js/settings.js

@@ -0,0 +1,108 @@
+const formElement = document.getElementById("settings-form");
+const submitButtonElement = document.getElementById("settings-submit-button");
+const canvasFpsElement = document.getElementById("canvas-fps");
+const canvasSizeElement = document.getElementById("canvas-size");
+const minPlaybackSpeedElement = document.getElementById("min-playback-speed");
+const maxPlaybackSpeedElement = document.getElementById("max-playback-speed");
+const minPitchElement = document.getElementById("min-audio-pitch");
+const maxPitchElement = document.getElementById("max-audio-pitch");
+const minVolumeElement = document.getElementById("min-volume");
+const maxVolumeElement = document.getElementById("max-volume");
+
+const currentSettings = JSON.parse(serverRenderedSettings);
+let userSettings = { ...currentSettings };
+
+function jsonEquals(a, b) {
+    if (a === b) return true;
+
+    if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
+        return false;
+    }
+
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+
+    if (keysA.length !== keysB.length) return false;
+
+    for (const key of keysA) {
+        if (!keysB.includes(key)) return false;
+        if (!jsonEquals(a[key], b[key])) return false;
+    }
+
+    return true;
+}
+
+function setFormSettings(s) {
+    canvasFpsElement.value = s.canvasFramesPerSecond;
+    canvasSizeElement.value = s.maxCanvasSideLengthPixels;
+
+    minPlaybackSpeedElement.value = s.minAssetPlaybackSpeedFraction;
+    maxPlaybackSpeedElement.value = s.maxAssetPlaybackSpeedFraction;
+    minPitchElement.value = s.minAssetAudioPitchFraction;
+    maxPitchElement.value = s.maxAssetAudioPitchFraction;
+    minVolumeElement.value = s.minAssetVolumeFraction;
+    maxVolumeElement.value = s.maxAssetVolumeFraction;
+}
+
+function readInt(input) {
+    return input.checkValidity() ? Number(input.value) : null;
+}
+
+function readFloat(input) {
+    return input.checkValidity() ? Number(input.value) : null;
+}
+
+function loadUserSettingsFromDom() {
+    userSettings.canvasFramesPerSecond = readInt(canvasFpsElement);
+    userSettings.maxCanvasSideLengthPixels = readInt(canvasSizeElement);
+    userSettings.minAssetPlaybackSpeedFraction = readFloat(minPlaybackSpeedElement);
+    userSettings.maxAssetPlaybackSpeedFraction = readFloat(maxPlaybackSpeedElement);
+    userSettings.minAssetAudioPitchFraction = readFloat(minPitchElement);
+    userSettings.maxAssetAudioPitchFraction = readFloat(maxPitchElement);
+    userSettings.minAssetVolumeFraction = readFloat(minVolumeElement);
+    userSettings.maxAssetVolumeFraction = readFloat(maxVolumeElement);
+}
+
+function updateSubmitButtonDisabledState() {
+    if (jsonEquals(currentSettings, userSettings)) {
+        submitButtonElement.disabled = "disabled";
+        return;
+    }
+    if (!formElement.checkValidity()) {
+        submitButtonElement.disabled = "disabled";
+        return;
+    }
+    submitButtonElement.disabled = null;
+}
+
+function submitSettingsForm() {
+    if (submitButtonElement.getAttribute("disabled") != null) {
+        console.warn("Attempted to submit invalid form");
+        showToast("Settings not valid", "warning");
+        return;
+    }
+    fetch("/api/settings/set", { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: userSettings }).then((r) => {
+        if (!r.ok) {
+            throw new Error('Failed to load canvas');
+        }
+        return r.json();
+
+    })
+        .then((newSettings) => {
+            currentSettings = { ...newSettings };
+            userSettings = { ...newSettings };
+        })
+        .catch((error) => {
+            showToast('Unable to save settings', 'error')
+            console.error(error);
+        });
+}
+
+formElement.querySelectorAll("input").forEach((input) => {
+    input.addEventListener("input", () => {
+        loadUserSettingsFromDom();
+        updateSubmitButtonDisabledState();
+    });
+});
+
+setFormSettings(currentSettings);