imgfloat/server
1
0
Fork 0
mirror of https://github.com/imgfloat/server.git synced 2026-02-05 03:39:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Settings

Browse Source
This commit is contained in:
Andreas Krühlmann
2025-12-29 12:56:00 +01:00
parent e870a74fa6
commit 2630e45d20
5 changed files with 388 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/java/dev/kruhlmann/imgfloat/config/SystemEnvironmentValidator.java
View File

@@ -68,13 +68,13 @@ public class SystemEnvironmentValidator {
private void checkString(String value, String name, StringBuilder missing) { private void checkString(String value, String name, StringBuilder missing) {
if (value != null && StringUtils.hasText(value)) { if (value != null && StringUtils.hasText(value)) {
return return;
} }
missing.append(" - ").append(name).append("\n"); missing.append(" - ").append(name).append("\n");
} }
private <T extends Number> void checkUnsignedNumeric(T value, String name, StringBuilder missing) { private <T extends Number> void checkUnsignedNumeric(T value, String name, StringBuilder missing) {
if (value !== null && value.doubleValue() >= 0) { if (value != null && value.doubleValue() >= 0) {
return; return;
} }
missing.append(" - ").append(name).append('\n'); missing.append(" - ").append(name).append('\n');

3
src/main/java/dev/kruhlmann/imgfloat/service/ChannelDirectoryService.java
View File

@@ -289,8 +289,7 @@ public class ChannelDirectoryService {
asset.setHidden(request.isHidden()); asset.setHidden(request.isHidden());
assetRepository.save(asset); assetRepository.save(asset);
AssetPatch patch = AssetPatch.fromVisibility(asset); AssetPatch patch = AssetPatch.fromVisibility(asset);
messagingTemplate.convertAndSend(topicFor(broadcaster), messagingTemplate.convertAndSend(topicFor(broadcaster), AssetEvent.visibility(broadcaster, patch));
AssetEvent.visibility(broadcaster, patch));
return AssetView.from(normalized, asset); return AssetView.from(normalized, asset);
}); });
} }

145
src/main/resources/static/css/styles.css
View File

@@ -140,6 +140,151 @@ body {
margin-top: 6px; margin-top: 6px;
} }
.settings-hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
align-items: center;
}
.settings-layout {
display: grid;
grid-template-columns: 2fr minmax(260px, 1fr);
gap: 18px;
align-items: start;
}
@media (max-width: 900px) {
.settings-layout {
grid-template-columns: 1fr;
}
}
.settings-panel {
display: flex;
flex-direction: column;
gap: 18px;
}
.settings-sidebar {
display: flex;
flex-direction: column;
gap: 14px;
}
.hero-copy h1 {
margin: 8px 0 6px;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.stat-grid.compact {
gap: 10px;
}
.stat {
border: 1px solid #1f2937;
border-radius: 12px;
padding: 14px;
background: rgba(255, 255, 255, 0.02);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.stat-label {
color: #cbd5e1;
font-size: 13px;
margin: 0 0 4px;
}
.stat-value {
font-size: 22px;
font-weight: 700;
margin: 0;
}
.stat-subtitle {
margin: 6px 0 0;
color: #94a3b8;
font-size: 12px;
}
.field-hint {
color: #94a3b8;
font-size: 13px;
margin: 6px 0 0;
}
.form-section {
border: 1px solid #1f2937;
border-radius: 12px;
padding: 14px;
background: rgba(255, 255, 255, 0.01);
display: flex;
flex-direction: column;
gap: 12px;
}
.form-heading h3 {
margin: 4px 0 0;
}
.form-heading .muted {
margin-top: 2px;
}
.form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 4px;
}
.status-chip {
padding: 8px 12px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.3);
color: #e2e8f0;
font-size: 14px;
margin: 0;
}
.status-chip.status-success {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.35);
color: #bbf7d0;
}
.status-chip.status-warning {
background: rgba(251, 191, 36, 0.12);
border-color: rgba(251, 191, 36, 0.4);
color: #fef3c7;
}
.info-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.info-card.subtle {
background: rgba(15, 23, 42, 0.75);
}
.hint-list {
margin: 0;
padding-left: 16px;
color: #cbd5e1;
display: flex;
flex-direction: column;
gap: 6px;
}
.channels-footer { .channels-footer {
display: flex; display: flex;
align-items: center; align-items: center;

40
src/main/resources/static/js/settings.js
View File

@@ -8,6 +8,12 @@ const minPitchElement = document.getElementById("min-audio-pitch");
const maxPitchElement = document.getElementById("max-audio-pitch"); const maxPitchElement = document.getElementById("max-audio-pitch");
const minVolumeElement = document.getElementById("min-volume"); const minVolumeElement = document.getElementById("min-volume");
const maxVolumeElement = document.getElementById("max-volume"); const maxVolumeElement = document.getElementById("max-volume");
const statusElement = document.getElementById("settings-status");
const statCanvasFpsElement = document.getElementById("stat-canvas-fps");
const statCanvasSizeElement = document.getElementById("stat-canvas-size");
const statPlaybackRangeElement = document.getElementById("stat-playback-range");
const statAudioRangeElement = document.getElementById("stat-audio-range");
const statVolumeRangeElement = document.getElementById("stat-volume-range");
const currentSettings = JSON.parse(serverRenderedSettings); const currentSettings = JSON.parse(serverRenderedSettings);
let userSettings = { ...currentSettings }; let userSettings = { ...currentSettings };
@@ -44,6 +50,15 @@ function setFormSettings(s) {
maxVolumeElement.value = s.maxAssetVolumeFraction; maxVolumeElement.value = s.maxAssetVolumeFraction;
} }
function updateStatCards(settings) {
if (!settings) return;
statCanvasFpsElement.textContent = `${settings.canvasFramesPerSecond ?? "--"} fps`;
statCanvasSizeElement.textContent = `${settings.maxCanvasSideLengthPixels ?? "--"} px`;
statPlaybackRangeElement.textContent = `${settings.minAssetPlaybackSpeedFraction ?? "--"} – ${settings.maxAssetPlaybackSpeedFraction ?? "--"}x`;
statAudioRangeElement.textContent = `${settings.minAssetAudioPitchFraction ?? "--"} – ${settings.maxAssetAudioPitchFraction ?? "--"}x`;
statVolumeRangeElement.textContent = `${settings.minAssetVolumeFraction ?? "--"} – ${settings.maxAssetVolumeFraction ?? "--"}x`;
}
function readInt(input) { function readInt(input) {
return input.checkValidity() ? Number(input.value) : null; return input.checkValidity() ? Number(input.value) : null;
} }
@@ -66,13 +81,20 @@ function loadUserSettingsFromDom() {
function updateSubmitButtonDisabledState() { function updateSubmitButtonDisabledState() {
if (jsonEquals(currentSettings, userSettings)) { if (jsonEquals(currentSettings, userSettings)) {
submitButtonElement.disabled = "disabled"; submitButtonElement.disabled = "disabled";
statusElement.textContent = "No changes yet.";
statusElement.classList.remove("status-success", "status-warning");
return; return;
} }
if (!formElement.checkValidity()) { if (!formElement.checkValidity()) {
submitButtonElement.disabled = "disabled"; submitButtonElement.disabled = "disabled";
statusElement.textContent = "Fix highlighted fields.";
statusElement.classList.add("status-warning");
statusElement.classList.remove("status-success");
return; return;
} }
submitButtonElement.disabled = null; submitButtonElement.disabled = null;
statusElement.textContent = "Ready to save.";
statusElement.classList.remove("status-warning");
} }
function submitSettingsForm() { function submitSettingsForm() {
@@ -81,7 +103,9 @@ function submitSettingsForm() {
showToast("Settings not valid", "warning"); showToast("Settings not valid", "warning");
return; return;
} }
fetch("/api/settings/set", { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: userSettings }).then((r) => { statusElement.textContent = "Saving…";
statusElement.classList.remove("status-success", "status-warning");
fetch("/api/settings/set", { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userSettings) }).then((r) => {
if (!r.ok) { if (!r.ok) {
throw new Error('Failed to load canvas'); throw new Error('Failed to load canvas');
} }
@@ -91,10 +115,17 @@ function submitSettingsForm() {
.then((newSettings) => { .then((newSettings) => {
currentSettings = { ...newSettings }; currentSettings = { ...newSettings };
userSettings = { ...newSettings }; userSettings = { ...newSettings };
updateStatCards(newSettings);
showToast("Settings saved", "success");
statusElement.textContent = "Saved.";
statusElement.classList.add("status-success");
updateSubmitButtonDisabledState();
}) })
.catch((error) => { .catch((error) => {
showToast('Unable to save settings', 'error') showToast('Unable to save settings', 'error')
console.error(error); console.error(error);
statusElement.textContent = "Save failed. Try again.";
statusElement.classList.add("status-warning");
}); });
} }
@@ -105,4 +136,11 @@ formElement.querySelectorAll("input").forEach((input) => {
}); });
}); });
formElement.addEventListener("submit", (event) => {
event.preventDefault();
submitSettingsForm();
});
setFormSettings(currentSettings); setFormSettings(currentSettings);
updateStatCards(currentSettings);
updateSubmitButtonDisabledState();

138
src/main/resources/templates/settings.html
View File

@@ -21,10 +21,63 @@
</header> </header>
<main class="settings-main"> <main class="settings-main">
<section class="settings-card"> <section class="settings-card settings-hero">
<div class="hero-copy">
<p class="eyebrow subtle">System administrator settings</p> <p class="eyebrow subtle">System administrator settings</p>
<h1>Application defaults</h1>
<p class="muted">
Configure overlay performance and audio guardrails for every channel using Imgfloat.
These settings are applied globally.
</p>
<div class="badge-row">
<span class="badge soft"><i class="fa-solid fa-gauge-high"></i> Performance tuned</span>
<span class="badge"><i class="fa-solid fa-cloud"></i> Server-wide</span>
<span class="badge subtle"><i class="fa-solid fa-gear"></i> Admin only</span>
</div>
</div>
<div class="stat-grid compact">
<div class="stat">
<p class="stat-label">Canvas FPS</p>
<p class="stat-value" id="stat-canvas-fps">--</p>
<p class="stat-subtitle">Longest side <span id="stat-canvas-size">--</span></p>
</div>
<div class="stat">
<p class="stat-label">Playback speed</p>
<p class="stat-value" id="stat-playback-range">--</p>
<p class="stat-subtitle">Applies to all animations</p>
</div>
<div class="stat">
<p class="stat-label">Audio pitch</p>
<p class="stat-value" id="stat-audio-range">--</p>
<p class="stat-subtitle">Fraction of original clip</p>
</div>
<div class="stat">
<p class="stat-label">Volume limits</p>
<p class="stat-value" id="stat-volume-range">--</p>
<p class="stat-subtitle">Keeps alerts comfortable</p>
</div>
</div>
</section>
<div class="settings-layout">
<section class="settings-card settings-panel">
<div class="section-heading">
<div>
<p class="eyebrow subtle">Overlay defaults</p>
<h2>Performance & audio budget</h2>
<p class="muted tiny">Tune the canvas and audio guardrails to keep overlays smooth and balanced.</p>
</div>
</div>
<form novalidate id="settings-form" class="settings-form"> <form novalidate id="settings-form" class="settings-form">
<label for="canvas-fps">Canvas FPS</label> <div class="form-section">
<div class="form-heading">
<p class="eyebrow subtle">Canvas</p>
<h3>Rendering budget</h3>
<p class="muted tiny">Match FPS and max dimensions to your streaming canvas for consistent overlays.</p>
</div>
<div class="control-grid split-row">
<label for="canvas-fps">Canvas FPS
<input <input
id="canvas-fps" id="canvas-fps"
name="canvas-fps" name="canvas-fps"
@@ -32,9 +85,11 @@
type="text" type="text"
inputmode="numeric" inputmode="numeric"
pattern="^[1-9]\d*$" pattern="^[1-9]\d*$"
placeholder="60"
/> />
</label>
<label for="canvas-size">Canvas max side length (pixels)</label> <label for="canvas-size">Canvas max side length (pixels)
<input <input
id="canvas-size" id="canvas-size"
name="canvas-size" name="canvas-size"
@@ -42,9 +97,21 @@
type="text" type="text"
inputmode="numeric" inputmode="numeric"
pattern="^[1-9]\d*$" pattern="^[1-9]\d*$"
placeholder="1920"
/> />
</label>
</div>
<p class="field-hint">Use the longest edge of your OBS browser source to prevent stretching.</p>
</div>
<label for="min-playback-speed">Min playback speed</label> <div class="form-section">
<div class="form-heading">
<p class="eyebrow subtle">Playback</p>
<h3>Animation speed limits</h3>
<p class="muted tiny">Bound default speeds between 0 and 1 so clips run predictably.</p>
</div>
<div class="control-grid split-row">
<label for="min-playback-speed">Min playback speed
<input <input
id="min-playback-speed" id="min-playback-speed"
name="min-playback-speed" name="min-playback-speed"
@@ -52,9 +119,11 @@
type="text" type="text"
inputmode="decimal" inputmode="decimal"
pattern="^(0(\.\d+)?|1(\.0+)?)$" pattern="^(0(\.\d+)?|1(\.0+)?)$"
placeholder="0.5"
/> />
</label>
<label for="max-playback-speed">Max playback speed</label> <label for="max-playback-speed">Max playback speed
<input <input
id="max-playback-speed" id="max-playback-speed"
name="max-playback-speed" name="max-playback-speed"
@@ -62,9 +131,21 @@
type="text" type="text"
inputmode="decimal" inputmode="decimal"
pattern="^(0(\.\d+)?|1(\.0+)?)$" pattern="^(0(\.\d+)?|1(\.0+)?)$"
placeholder="1.0"
/> />
</label>
</div>
<p class="field-hint">Keep the maximum at 1.0 to avoid speeding overlays beyond their source frame rate.</p>
</div>
<label for="min-audio-pitch">Min audio pitch</label> <div class="form-section">
<div class="form-heading">
<p class="eyebrow subtle">Audio</p>
<h3>Pitch & volume guardrails</h3>
<p class="muted tiny">Prevent harsh audio by bounding pitch and volume as fractions of the source.</p>
</div>
<div class="control-grid split-row">
<label for="min-audio-pitch">Min audio pitch
<input <input
id="min-audio-pitch" id="min-audio-pitch"
name="min-audio-pitch" name="min-audio-pitch"
@@ -72,9 +153,11 @@
type="text" type="text"
inputmode="decimal" inputmode="decimal"
pattern="^(0(\.\d+)?|1(\.0+)?)$" pattern="^(0(\.\d+)?|1(\.0+)?)$"
placeholder="0.8"
/> />
</label>
<label for="max-audio-pitch">Max audio pitch</label> <label for="max-audio-pitch">Max audio pitch
<input <input
id="max-audio-pitch" id="max-audio-pitch"
name="max-audio-pitch" name="max-audio-pitch"
@@ -82,9 +165,12 @@
type="text" type="text"
inputmode="decimal" inputmode="decimal"
pattern="^(0(\.\d+)?|1(\.0+)?)$" pattern="^(0(\.\d+)?|1(\.0+)?)$"
placeholder="1.0"
/> />
</label>
<label for="min-volume">Min volume</label> </div>
<div class="control-grid split-row">
<label for="min-volume">Min volume
<input <input
id="min-volume" id="min-volume"
name="min-volume" name="min-volume"
@@ -92,9 +178,11 @@
type="text" type="text"
inputmode="decimal" inputmode="decimal"
pattern="^(0(\.\d+)?|1(\.0+)?)$" pattern="^(0(\.\d+)?|1(\.0+)?)$"
placeholder="0.2"
/> />
</label>
<label for="max-volume">Max volume</label> <label for="max-volume">Max volume
<input <input
id="max-volume" id="max-volume"
name="max-volume" name="max-volume"
@@ -102,11 +190,39 @@
type="text" type="text"
inputmode="decimal" inputmode="decimal"
pattern="^(0(\.\d+)?|1(\.0+)?)$" pattern="^(0(\.\d+)?|1(\.0+)?)$"
placeholder="1.0"
/> />
</label>
</div>
<p class="field-hint">Volume and pitch values are percentages of the original clip between 0 and 1.</p>
</div>
<button id="settings-submit-button" type="submit" class="button block" disabled>Save settings</button> <div class="form-footer">
<p id="settings-status" class="status-chip">No changes yet.</p>
<button id="settings-submit-button" type="submit" class="button" disabled>Save settings</button>
</div>
</form> </form>
</section> </section>
<aside class="settings-sidebar">
<section class="settings-card info-card">
<p class="eyebrow subtle">Checklist</p>
<h3>Before you save</h3>
<ul class="hint-list">
<li>Match canvas dimensions to the OBS browser source you embed.</li>
<li>Use 30–60 FPS for smoother overlays without overwhelming viewers.</li>
<li>Keep playback and pitch bounds between 0 and 1 to avoid distortion.</li>
<li>Lower the minimum volume if alerts feel too loud on stream.</li>
</ul>
</section>
<section class="settings-card info-card subtle">
<p class="eyebrow subtle">Heads up</p>
<h3>Global impact</h3>
<p class="muted tiny">Changes here update every channel immediately. Save carefully and confirm with your team.</p>
</section>
</aside>
</div>
</main> </main>
</div> </div>
<script th:inline="javascript"> <script th:inline="javascript">