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

Improve settings

Browse Source
This commit is contained in:
Andreas Krühlmann
2025-12-29 12:46:47 +01:00
parent 714c5f758c
commit e870a74fa6
15 changed files with 371 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/main/java/dev/kruhlmann/imgfloat/config/SchemaMigration.java
View File

@@ -29,13 +29,13 @@ public class SchemaMigration implements ApplicationRunner {
}
private void cleanupSpringSessionTables() {
try {
jdbcTemplate.execute("DELETE FROM SPRING_SESSION_ATTRIBUTES");
jdbcTemplate.execute("DELETE FROM SPRING_SESSION");
logger.info("Cleared persisted Spring Session tables on startup to avoid stale session conflicts");
} catch (DataAccessException ex) {
logger.debug("Spring Session tables not available for cleanup", ex);
}
// try {
// jdbcTemplate.execute("DELETE FROM SPRING_SESSION_ATTRIBUTES");
// jdbcTemplate.execute("DELETE FROM SPRING_SESSION");
// logger.info("Cleared persisted Spring Session tables on startup to avoid stale session conflicts");
// } catch (DataAccessException ex) {
// logger.debug("Spring Session tables not available for cleanup", ex);
// }
}
private void ensureChannelCanvasColumns() {

51
src/main/java/dev/kruhlmann/imgfloat/config/SecurityConfig.java
View File

@@ -20,32 +20,31 @@ public class SecurityConfig {
@Bean
SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http
.authorizeHttpRequests(auth -> auth
.requestMatchers(
"/",
"/css/**",
"/js/**",
"/webjars/**",
"/actuator/health",
"/v3/api-docs/**",
"/swagger-ui.html",
"/swagger-ui/**",
"/channels"
).permitAll()
.requestMatchers(HttpMethod.GET, "/view/*/broadcast").permitAll()
.requestMatchers(HttpMethod.GET, "/api/channels").permitAll()
.requestMatchers(HttpMethod.GET, "/api/channels/*/assets/visible").permitAll()
.requestMatchers(HttpMethod.GET, "/api/channels/*/canvas").permitAll()
.requestMatchers(HttpMethod.GET, "/api/channels/*/assets/*/content").permitAll()
.requestMatchers("/ws/**").permitAll()
.anyRequest().authenticated()
)
.oauth2Login(oauth -> oauth
.tokenEndpoint(token -> token.accessTokenResponseClient(twitchAccessTokenResponseClient()))
.userInfoEndpoint(user -> user.userService(twitchOAuth2UserService()))
)
.logout(logout -> logout.logoutSuccessUrl("/").permitAll())
.csrf(csrf -> csrf.ignoringRequestMatchers("/ws/**", "/api/**"));
.authorizeHttpRequests(auth -> auth
.requestMatchers(
"/",
"/css/**",
"/js/**",
"/webjars/**",
"/actuator/health",
"/v3/api-docs/**",
"/swagger-ui.html",
"/swagger-ui/**",
"/channels"
).permitAll()
.requestMatchers(HttpMethod.GET, "/view/*/broadcast").permitAll()
.requestMatchers(HttpMethod.GET, "/api/channels").permitAll()
.requestMatchers(HttpMethod.GET, "/api/channels/*/assets/visible").permitAll()
.requestMatchers(HttpMethod.GET, "/api/channels/*/canvas").permitAll()
.requestMatchers(HttpMethod.GET, "/api/channels/*/assets/*/content").permitAll()
.requestMatchers("/ws/**").permitAll()
.anyRequest().authenticated()
)
.oauth2Login(oauth -> oauth
.tokenEndpoint(token -> token.accessTokenResponseClient(twitchAccessTokenResponseClient()))
.userInfoEndpoint(user -> user.userService(twitchOAuth2UserService())))
.logout(logout -> logout.logoutSuccessUrl("/").permitAll())
.csrf(csrf -> csrf.ignoringRequestMatchers("/ws/**", "/api/**"));
return http.build();
}

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

@@ -55,14 +55,11 @@ public class SystemEnvironmentValidator {
);
}
log.info("Environment validation successful.");
log.info("Configuration:");
log.info("Environment validation successful:");
log.info(" - TWITCH_CLIENT_ID: {}", redact(twitchClientId));
log.info(" - TWITCH_CLIENT_SECRET: {}", redact(twitchClientSecret));
log.info(" - SPRING_SERVLET_MULTIPART_MAX_FILE_SIZE: {} ({} bytes)",
springMaxFileSize, maxUploadBytes);
log.info(" - SPRING_SERVLET_MULTIPART_MAX_REQUEST_SIZE: {} ({} bytes)",
springMaxRequestSize, maxRequestBytes);
log.info(" - SPRING_SERVLET_MULTIPART_MAX_FILE_SIZE: {} ({} bytes)", springMaxFileSize, maxUploadBytes);
log.info(" - SPRING_SERVLET_MULTIPART_MAX_REQUEST_SIZE: {} ({} bytes)", springMaxRequestSize, maxRequestBytes);
log.info(" - IMGFLOAT_DB_PATH: {}", dbPath);
log.info(" - IMGFLOAT_INITIAL_TWITCH_USERNAME_SYSADMIN: {}", initialSysadmin);
log.info(" - IMGFLOAT_ASSETS_PATH: {}", assetsPath);
@@ -70,20 +67,23 @@ public class SystemEnvironmentValidator {
}
private void checkString(String value, String name, StringBuilder missing) {
if (!StringUtils.hasText(value) || "changeme".equalsIgnoreCase(value.trim())) {
missing.append(" - ").append(name).append("\n");
if (value != null && StringUtils.hasText(value)) {
return
}
missing.append(" - ").append(name).append("\n");
}
private <T extends Number> void checkUnsignedNumeric(T value, String name, StringBuilder missing) {
if (value == null || value.doubleValue() <= 0) {
missing.append(" - ").append(name).append('\n');
if (value !== null && value.doubleValue() >= 0) {
return;
}
missing.append(" - ").append(name).append('\n');
}
private String redact(String value) {
if (!StringUtils.hasText(value)) return "(missing)";
if (value.length() <= 6) return "******";
return value.substring(0, 2) + "****" + value.substring(value.length() - 2);
if (value != null && StringUtils.hasText(value)) {
return "**************";
};
return "<not set>";
}
}

9
src/main/java/dev/kruhlmann/imgfloat/config/TwitchAuthorizationCodeGrantRequestEntityConverter.java
View File

@@ -41,10 +41,11 @@ final class TwitchAuthorizationCodeGrantRequestEntityConverter implements
}
return new RequestEntity<>(
body,
entity.getHeaders(),
entity.getMethod() == null ? HttpMethod.POST : entity.getMethod(),
entity.getUrl() == null ? URI.create(registration.getProviderDetails().getTokenUri()) : entity.getUrl());
body,
entity.getHeaders(),
entity.getMethod() == null ? HttpMethod.POST : entity.getMethod(),
entity.getUrl() == null ? URI.create(registration.getProviderDetails().getTokenUri()) : entity.getUrl()
);
}
private MultiValueMap<String, String> cloneBody(MultiValueMap<?, ?> existingBody) {

15
src/main/java/dev/kruhlmann/imgfloat/controller/ViewController.java
View File

@@ -68,6 +68,21 @@ public class ViewController {
return "channels";
}
@org.springframework.web.bind.annotation.GetMapping("/settings")
public String settingsView(OAuth2AuthenticationToken oauthToken, Model model) {
String sessionUsername = OauthSessionUser.from(oauthToken).login();
authorizationService.userIsSystemAdministratorOrThrowHttpError(sessionUsername);
LOG.info("Rendering settings for {}", sessionUsername);
Settings settings = settingsService.get();
try {
model.addAttribute("settingsJson", objectMapper.writeValueAsString(settings));
} catch (JsonProcessingException e) {
LOG.error("Failed to serialize settings for settings view", e);
throw new ResponseStatusException(INTERNAL_SERVER_ERROR, "Failed to serialize settings");
}
return "settings";
}
@org.springframework.web.bind.annotation.GetMapping("/view/{broadcaster}/admin")
public String adminView(@org.springframework.web.bind.annotation.PathVariable("broadcaster") String broadcaster,
OAuth2AuthenticationToken oauthToken,

14
src/main/java/dev/kruhlmann/imgfloat/model/Asset.java
View File

@@ -16,15 +16,16 @@ import java.util.UUID;
public class Asset {
@Id
private String id;
@Column(nullable = false)
private String broadcaster;
@Column(nullable = false)
private String name;
@Column(columnDefinition = "TEXT")
@Column(columnDefinition = "TEXT", nullable = false)
private String url;
@Column(columnDefinition = "TEXT", nullable = false)
private String preview;
@Column(nullable = false)
private Instant createdAt;
private double x;
private double y;
private double width;
@@ -34,8 +35,6 @@ public class Asset {
private Boolean muted;
private String mediaType;
private String originalMediaType;
@Column(columnDefinition = "TEXT")
private String preview;
private Integer zIndex;
private Boolean audioLoop;
private Integer audioDelayMillis;
@@ -43,7 +42,6 @@ public class Asset {
private Double audioPitch;
private Double audioVolume;
private boolean hidden;
private Instant createdAt;
public Asset() {
}
@@ -61,7 +59,7 @@ public class Asset {
this.speed = 1.0;
this.muted = false;
this.zIndex = 1;
this.hidden = false;
this.hidden = true;
this.createdAt = Instant.now();
}

3
src/main/java/dev/kruhlmann/imgfloat/model/AssetEvent.java
View File

@@ -44,12 +44,13 @@ public class AssetEvent {
return event;
}
public static AssetEvent visibility(String channel, AssetPatch patch) {
public static AssetEvent visibility(String channel, AssetPatch patch, AssetView asset) {
AssetEvent event = new AssetEvent();
event.type = Type.VISIBILITY;
event.channel = channel;
event.patch = patch;
event.assetId = patch.id();
event.payload = asset;
return event;
}

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

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

14
src/main/resources/static/js/broadcast.js
View File

@@ -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) {

44
src/main/resources/static/js/dashboard.js
View File

@@ -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');
});
}

5
src/main/resources/static/js/landing.js
View File

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

108
src/main/resources/static/js/settings.js Normal file
View File

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

1
src/main/resources/templates/dashboard.html
View File

@@ -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>

2
src/main/resources/templates/index.html
View File

@@ -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>

118
src/main/resources/templates/settings.html Normal file
View File

@@ -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>