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);

src/main/resources/templates/dashboard.html

@@ -28,6 +28,7 @@
         <div class="panel-actions">
             <a class="button block" th:href="@{'/view/' + ${channel} + '/broadcast'}">Open broadcast overlay</a>
             <a class="button ghost block" th:href="@{'/view/' + ${channel} + '/admin'}">Open admin console</a>
+            <a class="button ghost block" href="/channels">Browse channels</a>
             <form class="block" th:action="@{/logout}" method="post">
                 <button class="secondary block" type="submit">Logout</button>
             </form>

src/main/resources/templates/index.html

@@ -24,7 +24,7 @@
             <p class="lead">Upload artwork, drop it into a shared dashboard, and stay in sync with your mods without clutter.</p>
             <div class="cta-row">
                 <a class="button" href="/oauth2/authorization/twitch">Login with Twitch</a>
-                <a class="button ghost" href="/channels">Browse channels</a>
+                <a class="button ghost" href="/channels" rel="prefetch">Browse channels</a>
             </div>
         </div>
     </main>

src/main/resources/templates/settings.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+    <head>
+        <meta charset="UTF-8">
+        <title>Imgfloat Admin</title>
+        <link rel="stylesheet" href="/css/styles.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
+    </head>
+    <body class="settings-body">
+        <div class="settings-shell">
+            <header class="settings-header">
+                <div class="brand">
+                    <div class="brand-mark">IF</div>
+                    <div>
+                        <div class="brand-title">Imgfloat</div>
+                        <div class="brand-subtitle">Twitch overlay manager</div>
+                    </div>
+                </div>
+            </header>
+
+            <main class="settings-main">
+                <section class="settings-card">
+                    <p class="eyebrow subtle">System administrator settings</p>
+                    <form novalidate id="settings-form" class="settings-form">
+                        <label for="canvas-fps">Canvas FPS</label>
+                        <input
+                            id="canvas-fps"
+                            name="canvas-fps"
+                            class="text-input"
+                            type="text"
+                            inputmode="numeric"
+                            pattern="^[1-9]\d*$"
+                        />
+
+                        <label for="canvas-size">Canvas max side length (pixels)</label>
+                        <input
+                            id="canvas-size"
+                            name="canvas-size"
+                            class="text-input"
+                            type="text"
+                            inputmode="numeric"
+                            pattern="^[1-9]\d*$"
+                        />
+
+                        <label for="min-playback-speed">Min playback speed</label>
+                        <input
+                            id="min-playback-speed"
+                            name="min-playback-speed"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="max-playback-speed">Max playback speed</label>
+                        <input
+                            id="max-playback-speed"
+                            name="max-playback-speed"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="min-audio-pitch">Min audio pitch</label>
+                        <input
+                            id="min-audio-pitch"
+                            name="min-audio-pitch"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="max-audio-pitch">Max audio pitch</label>
+                        <input
+                            id="max-audio-pitch"
+                            name="max-audio-pitch"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="min-volume">Min volume</label>
+                        <input
+                            id="min-volume"
+                            name="min-volume"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <label for="max-volume">Max volume</label>
+                        <input
+                            id="max-volume"
+                            name="max-volume"
+                            class="text-input"
+                            type="text"
+                            inputmode="decimal"
+                            pattern="^(0(\.\d+)?|1(\.0+)?)$"
+                        />
+
+                        <button id="settings-submit-button" type="submit" class="button block" disabled>Save settings</button>
+                    </form>
+                </section>
+            </main>
+        </div>
+        <script th:inline="javascript">
+            const serverRenderedSettings = /*[[${settingsJson}]]*/;
+        </script>
+        <script src="/js/settings.js"></script>
+        <script src="/js/toast.js"></script>
+    </body>
+</html>