mirror of
https://github.com/imgfloat/server.git
synced 2026-02-05 03:39:26 +00:00
Unify formatting
This commit is contained in:
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -12,7 +12,7 @@
|
||||
const persistDismissal = () => {
|
||||
try {
|
||||
window.localStorage.setItem(CONSENT_STORAGE_KEY, "true");
|
||||
} catch { }
|
||||
} catch {}
|
||||
document.cookie = `${CONSENT_STORAGE_KEY}=true; max-age=${COOKIE_MAX_AGE_SECONDS}; path=/; SameSite=Lax`;
|
||||
};
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
if (window.localStorage.getItem(CONSENT_STORAGE_KEY) === "true") {
|
||||
return true;
|
||||
}
|
||||
} catch { }
|
||||
} catch {}
|
||||
return readConsentCookie() === "true";
|
||||
};
|
||||
|
||||
|
||||
@@ -1,228 +1,228 @@
|
||||
function buildIdentity(admin) {
|
||||
const identity = document.createElement("div");
|
||||
identity.className = "identity-row";
|
||||
const identity = document.createElement("div");
|
||||
identity.className = "identity-row";
|
||||
|
||||
const avatar = document.createElement(admin.avatarUrl ? "img" : "div");
|
||||
avatar.className = "avatar";
|
||||
if (admin.avatarUrl) {
|
||||
avatar.src = admin.avatarUrl;
|
||||
avatar.alt = `${admin.displayName || admin.login} avatar`;
|
||||
} else {
|
||||
avatar.classList.add("avatar-fallback");
|
||||
avatar.textContent = (admin.displayName || admin.login || "?").charAt(0).toUpperCase();
|
||||
}
|
||||
const avatar = document.createElement(admin.avatarUrl ? "img" : "div");
|
||||
avatar.className = "avatar";
|
||||
if (admin.avatarUrl) {
|
||||
avatar.src = admin.avatarUrl;
|
||||
avatar.alt = `${admin.displayName || admin.login} avatar`;
|
||||
} else {
|
||||
avatar.classList.add("avatar-fallback");
|
||||
avatar.textContent = (admin.displayName || admin.login || "?").charAt(0).toUpperCase();
|
||||
}
|
||||
|
||||
const details = document.createElement("div");
|
||||
details.className = "identity-text";
|
||||
const title = document.createElement("p");
|
||||
title.className = "list-title";
|
||||
title.textContent = admin.displayName || admin.login;
|
||||
const subtitle = document.createElement("p");
|
||||
subtitle.className = "muted";
|
||||
subtitle.textContent = `@${admin.login}`;
|
||||
const details = document.createElement("div");
|
||||
details.className = "identity-text";
|
||||
const title = document.createElement("p");
|
||||
title.className = "list-title";
|
||||
title.textContent = admin.displayName || admin.login;
|
||||
const subtitle = document.createElement("p");
|
||||
subtitle.className = "muted";
|
||||
subtitle.textContent = `@${admin.login}`;
|
||||
|
||||
details.appendChild(title);
|
||||
details.appendChild(subtitle);
|
||||
identity.appendChild(avatar);
|
||||
identity.appendChild(details);
|
||||
return identity;
|
||||
details.appendChild(title);
|
||||
details.appendChild(subtitle);
|
||||
identity.appendChild(avatar);
|
||||
identity.appendChild(details);
|
||||
return identity;
|
||||
}
|
||||
|
||||
function renderAdmins(list) {
|
||||
const adminList = document.getElementById("admin-list");
|
||||
if (!adminList) return;
|
||||
adminList.innerHTML = "";
|
||||
if (!list || list.length === 0) {
|
||||
const empty = document.createElement("li");
|
||||
empty.textContent = "No channel admins yet";
|
||||
adminList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
const adminList = document.getElementById("admin-list");
|
||||
if (!adminList) return;
|
||||
adminList.innerHTML = "";
|
||||
if (!list || list.length === 0) {
|
||||
const empty = document.createElement("li");
|
||||
empty.textContent = "No channel admins yet";
|
||||
adminList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((admin) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "stacked-list-item";
|
||||
list.forEach((admin) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "stacked-list-item";
|
||||
|
||||
li.appendChild(buildIdentity(admin));
|
||||
li.appendChild(buildIdentity(admin));
|
||||
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "actions";
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "actions";
|
||||
|
||||
const removeBtn = document.createElement("button");
|
||||
removeBtn.type = "button";
|
||||
removeBtn.className = "secondary";
|
||||
removeBtn.textContent = "Remove";
|
||||
removeBtn.addEventListener("click", () => removeAdmin(admin.login));
|
||||
const removeBtn = document.createElement("button");
|
||||
removeBtn.type = "button";
|
||||
removeBtn.className = "secondary";
|
||||
removeBtn.textContent = "Remove";
|
||||
removeBtn.addEventListener("click", () => removeAdmin(admin.login));
|
||||
|
||||
actions.appendChild(removeBtn);
|
||||
li.appendChild(actions);
|
||||
adminList.appendChild(li);
|
||||
});
|
||||
actions.appendChild(removeBtn);
|
||||
li.appendChild(actions);
|
||||
adminList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function renderSuggestedAdmins(list) {
|
||||
const suggestionList = document.getElementById("admin-suggestions");
|
||||
if (!suggestionList) return;
|
||||
const suggestionList = document.getElementById("admin-suggestions");
|
||||
if (!suggestionList) return;
|
||||
|
||||
suggestionList.innerHTML = "";
|
||||
if (!list || list.length === 0) {
|
||||
const empty = document.createElement("li");
|
||||
empty.className = "stacked-list-item";
|
||||
empty.textContent = "No moderator suggestions right now";
|
||||
suggestionList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
suggestionList.innerHTML = "";
|
||||
if (!list || list.length === 0) {
|
||||
const empty = document.createElement("li");
|
||||
empty.className = "stacked-list-item";
|
||||
empty.textContent = "No moderator suggestions right now";
|
||||
suggestionList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
list.forEach((admin) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "stacked-list-item";
|
||||
list.forEach((admin) => {
|
||||
const li = document.createElement("li");
|
||||
li.className = "stacked-list-item";
|
||||
|
||||
li.appendChild(buildIdentity(admin));
|
||||
li.appendChild(buildIdentity(admin));
|
||||
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "actions";
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "actions";
|
||||
|
||||
const addBtn = document.createElement("button");
|
||||
addBtn.type = "button";
|
||||
addBtn.className = "ghost";
|
||||
addBtn.textContent = "Add as admin";
|
||||
addBtn.addEventListener("click", () => addAdmin(admin.login));
|
||||
const addBtn = document.createElement("button");
|
||||
addBtn.type = "button";
|
||||
addBtn.className = "ghost";
|
||||
addBtn.textContent = "Add as admin";
|
||||
addBtn.addEventListener("click", () => addAdmin(admin.login));
|
||||
|
||||
actions.appendChild(addBtn);
|
||||
li.appendChild(actions);
|
||||
suggestionList.appendChild(li);
|
||||
});
|
||||
actions.appendChild(addBtn);
|
||||
li.appendChild(actions);
|
||||
suggestionList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchSuggestedAdmins() {
|
||||
fetch(`/api/channels/${broadcaster}/admins/suggestions`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load admin suggestions");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderSuggestedAdmins)
|
||||
.catch(() => {
|
||||
renderSuggestedAdmins([]);
|
||||
});
|
||||
fetch(`/api/channels/${broadcaster}/admins/suggestions`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load admin suggestions");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderSuggestedAdmins)
|
||||
.catch(() => {
|
||||
renderSuggestedAdmins([]);
|
||||
});
|
||||
}
|
||||
|
||||
function fetchAdmins() {
|
||||
fetch(`/api/channels/${broadcaster}/admins`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load admins");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderAdmins)
|
||||
.catch(() => {
|
||||
renderAdmins([]);
|
||||
showToast("Unable to load admins right now. Please try again.", "error");
|
||||
});
|
||||
fetch(`/api/channels/${broadcaster}/admins`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load admins");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderAdmins)
|
||||
.catch(() => {
|
||||
renderAdmins([]);
|
||||
showToast("Unable to load admins right now. Please try again.", "error");
|
||||
});
|
||||
}
|
||||
|
||||
function removeAdmin(username) {
|
||||
if (!username) return;
|
||||
fetch(`/api/channels/${encodeURIComponent(broadcaster)}/admins/${encodeURIComponent(username)}`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error();
|
||||
}
|
||||
fetchAdmins();
|
||||
fetchSuggestedAdmins();
|
||||
if (!username) return;
|
||||
fetch(`/api/channels/${encodeURIComponent(broadcaster)}/admins/${encodeURIComponent(username)}`, {
|
||||
method: "DELETE",
|
||||
})
|
||||
.catch(() => {
|
||||
showToast("Failed to remove admin. Please retry.", "error");
|
||||
});
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error();
|
||||
}
|
||||
fetchAdmins();
|
||||
fetchSuggestedAdmins();
|
||||
})
|
||||
.catch(() => {
|
||||
showToast("Failed to remove admin. Please retry.", "error");
|
||||
});
|
||||
}
|
||||
|
||||
function addAdmin(usernameFromAction) {
|
||||
const input = document.getElementById("new-admin");
|
||||
const username = (usernameFromAction || input?.value || "").trim();
|
||||
if (!username) {
|
||||
showToast("Enter a Twitch username to add as an admin.", "info");
|
||||
return;
|
||||
}
|
||||
const input = document.getElementById("new-admin");
|
||||
const username = (usernameFromAction || input?.value || "").trim();
|
||||
if (!username) {
|
||||
showToast("Enter a Twitch username to add as an admin.", "info");
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/api/channels/${broadcaster}/admins`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username }),
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Add admin failed");
|
||||
}
|
||||
if (input) {
|
||||
input.value = "";
|
||||
}
|
||||
showToast(`Added @${username} as an admin.`, "success");
|
||||
fetchAdmins();
|
||||
fetchSuggestedAdmins();
|
||||
fetch(`/api/channels/${broadcaster}/admins`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ username }),
|
||||
})
|
||||
.catch(() => showToast("Unable to add admin right now. Please try again.", "error"));
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("Add admin failed");
|
||||
}
|
||||
if (input) {
|
||||
input.value = "";
|
||||
}
|
||||
showToast(`Added @${username} as an admin.`, "success");
|
||||
fetchAdmins();
|
||||
fetchSuggestedAdmins();
|
||||
})
|
||||
.catch(() => showToast("Unable to add admin right now. Please try again.", "error"));
|
||||
}
|
||||
|
||||
function renderCanvasSettings(settings) {
|
||||
const widthInput = document.getElementById("canvas-width");
|
||||
const heightInput = document.getElementById("canvas-height");
|
||||
if (widthInput) widthInput.value = Math.round(settings.width);
|
||||
if (heightInput) heightInput.value = Math.round(settings.height);
|
||||
const widthInput = document.getElementById("canvas-width");
|
||||
const heightInput = document.getElementById("canvas-height");
|
||||
if (widthInput) widthInput.value = Math.round(settings.width);
|
||||
if (heightInput) heightInput.value = Math.round(settings.height);
|
||||
}
|
||||
|
||||
function fetchCanvasSettings() {
|
||||
fetch(`/api/channels/${broadcaster}/canvas`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load canvas settings");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderCanvasSettings)
|
||||
.catch(() => {
|
||||
renderCanvasSettings({ width: 1920, height: 1080 });
|
||||
showToast("Using default canvas size. Unable to load saved settings.", "warning");
|
||||
});
|
||||
fetch(`/api/channels/${broadcaster}/canvas`)
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load canvas settings");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then(renderCanvasSettings)
|
||||
.catch(() => {
|
||||
renderCanvasSettings({ width: 1920, height: 1080 });
|
||||
showToast("Using default canvas size. Unable to load saved settings.", "warning");
|
||||
});
|
||||
}
|
||||
|
||||
function saveCanvasSettings() {
|
||||
const widthInput = document.getElementById("canvas-width");
|
||||
const heightInput = document.getElementById("canvas-height");
|
||||
const status = document.getElementById("canvas-status");
|
||||
const width = parseFloat(widthInput?.value) || 0;
|
||||
const height = parseFloat(heightInput?.value) || 0;
|
||||
if (width <= 0 || height <= 0) {
|
||||
showToast("Please enter a valid width and height.", "info");
|
||||
return;
|
||||
}
|
||||
if (status) status.textContent = "Saving...";
|
||||
fetch(`/api/channels/${broadcaster}/canvas`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ width, height }),
|
||||
})
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to save canvas");
|
||||
}
|
||||
return r.json();
|
||||
const widthInput = document.getElementById("canvas-width");
|
||||
const heightInput = document.getElementById("canvas-height");
|
||||
const status = document.getElementById("canvas-status");
|
||||
const width = parseFloat(widthInput?.value) || 0;
|
||||
const height = parseFloat(heightInput?.value) || 0;
|
||||
if (width <= 0 || height <= 0) {
|
||||
showToast("Please enter a valid width and height.", "info");
|
||||
return;
|
||||
}
|
||||
if (status) status.textContent = "Saving...";
|
||||
fetch(`/api/channels/${broadcaster}/canvas`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ width, height }),
|
||||
})
|
||||
.then((settings) => {
|
||||
renderCanvasSettings(settings);
|
||||
if (status) status.textContent = "Saved.";
|
||||
showToast("Canvas size saved successfully.", "success");
|
||||
setTimeout(() => {
|
||||
if (status) status.textContent = "";
|
||||
}, 2000);
|
||||
})
|
||||
.catch(() => {
|
||||
if (status) status.textContent = "Unable to save right now.";
|
||||
showToast("Unable to save canvas size. Please retry.", "error");
|
||||
});
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to save canvas");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then((settings) => {
|
||||
renderCanvasSettings(settings);
|
||||
if (status) status.textContent = "Saved.";
|
||||
showToast("Canvas size saved successfully.", "success");
|
||||
setTimeout(() => {
|
||||
if (status) status.textContent = "";
|
||||
}, 2000);
|
||||
})
|
||||
.catch(() => {
|
||||
if (status) status.textContent = "Unable to save right now.";
|
||||
showToast("Unable to save canvas size. Please retry.", "error");
|
||||
});
|
||||
}
|
||||
|
||||
fetchAdmins();
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
function detectPlatform() {
|
||||
const navigatorPlatform = (navigator.userAgentData?.platform || navigator.platform || "").toLowerCase();
|
||||
const userAgent = (navigator.userAgent || "").toLowerCase();
|
||||
const platformString = `${navigatorPlatform} ${userAgent}`;
|
||||
const navigatorPlatform = (navigator.userAgentData?.platform || navigator.platform || "").toLowerCase();
|
||||
const userAgent = (navigator.userAgent || "").toLowerCase();
|
||||
const platformString = `${navigatorPlatform} ${userAgent}`;
|
||||
|
||||
if (platformString.includes("mac") || platformString.includes("darwin")) {
|
||||
return "mac";
|
||||
}
|
||||
if (platformString.includes("win")) {
|
||||
return "windows";
|
||||
}
|
||||
if (platformString.includes("linux")) {
|
||||
return "linux";
|
||||
}
|
||||
return null;
|
||||
if (platformString.includes("mac") || platformString.includes("darwin")) {
|
||||
return "mac";
|
||||
}
|
||||
if (platformString.includes("win")) {
|
||||
return "windows";
|
||||
}
|
||||
if (platformString.includes("linux")) {
|
||||
return "linux";
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function markRecommendedDownload(section) {
|
||||
const cards = Array.from(section.querySelectorAll(".download-card"));
|
||||
if (!cards.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const platform = detectPlatform();
|
||||
const preferredCard = cards.find((card) => card.dataset.platform === platform) || cards[0];
|
||||
|
||||
cards.forEach((card) => {
|
||||
const isPreferred = card === preferredCard;
|
||||
card.classList.toggle("download-card--active", isPreferred);
|
||||
const badge = card.querySelector(".recommended-badge");
|
||||
if (badge) {
|
||||
badge.classList.toggle("hidden", !isPreferred);
|
||||
const cards = Array.from(section.querySelectorAll(".download-card"));
|
||||
if (!cards.length) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
const platform = detectPlatform();
|
||||
const preferredCard = cards.find((card) => card.dataset.platform === platform) || cards[0];
|
||||
|
||||
cards.forEach((card) => {
|
||||
const isPreferred = card === preferredCard;
|
||||
card.classList.toggle("download-card--active", isPreferred);
|
||||
const badge = card.querySelector(".recommended-badge");
|
||||
if (badge) {
|
||||
badge.classList.toggle("hidden", !isPreferred);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const downloadSections = document.querySelectorAll(".download-section, .download-card-block");
|
||||
downloadSections.forEach(markRecommendedDownload);
|
||||
const downloadSections = document.querySelectorAll(".download-section, .download-card-block");
|
||||
downloadSections.forEach(markRecommendedDownload);
|
||||
});
|
||||
|
||||
@@ -1,54 +1,54 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const searchForm = document.getElementById("channel-search-form");
|
||||
const searchInput = document.getElementById("channel-search");
|
||||
const suggestions = document.getElementById("channel-suggestions");
|
||||
const searchForm = document.getElementById("channel-search-form");
|
||||
const searchInput = document.getElementById("channel-search");
|
||||
const suggestions = document.getElementById("channel-suggestions");
|
||||
|
||||
if (!searchForm || !searchInput || !suggestions) {
|
||||
console.error("Required elements not found in the DOM");
|
||||
return;
|
||||
}
|
||||
if (!searchForm || !searchInput || !suggestions) {
|
||||
console.error("Required elements not found in the DOM");
|
||||
return;
|
||||
}
|
||||
|
||||
let channels = [];
|
||||
let channels = [];
|
||||
|
||||
function updateSuggestions(term) {
|
||||
const normalizedTerm = term.trim().toLowerCase();
|
||||
const filtered = channels.filter((name) => !normalizedTerm || name.includes(normalizedTerm)).slice(0, 20);
|
||||
function updateSuggestions(term) {
|
||||
const normalizedTerm = term.trim().toLowerCase();
|
||||
const filtered = channels.filter((name) => !normalizedTerm || name.includes(normalizedTerm)).slice(0, 20);
|
||||
|
||||
suggestions.innerHTML = "";
|
||||
filtered.forEach((name) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = name;
|
||||
suggestions.appendChild(option);
|
||||
suggestions.innerHTML = "";
|
||||
filtered.forEach((name) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = name;
|
||||
suggestions.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
async function loadChannels() {
|
||||
try {
|
||||
const response = await fetch("/api/channels");
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load channels: ${response.status}`);
|
||||
}
|
||||
channels = await response.json();
|
||||
updateSuggestions(searchInput.value || "");
|
||||
} catch (error) {
|
||||
console.error("Could not load channel directory", error);
|
||||
}
|
||||
}
|
||||
|
||||
searchInput.focus({ preventScroll: true });
|
||||
searchInput.select();
|
||||
|
||||
searchInput.addEventListener("input", (event) => updateSuggestions(event.target.value || ""));
|
||||
|
||||
searchForm.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
const broadcaster = (searchInput.value || "").trim().toLowerCase();
|
||||
if (!broadcaster) {
|
||||
searchInput.focus();
|
||||
return;
|
||||
}
|
||||
window.location.href = `/view/${encodeURIComponent(broadcaster)}/broadcast`;
|
||||
});
|
||||
}
|
||||
|
||||
async function loadChannels() {
|
||||
try {
|
||||
const response = await fetch("/api/channels");
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load channels: ${response.status}`);
|
||||
}
|
||||
channels = await response.json();
|
||||
updateSuggestions(searchInput.value || "");
|
||||
} catch (error) {
|
||||
console.error("Could not load channel directory", error);
|
||||
}
|
||||
}
|
||||
|
||||
searchInput.focus({ preventScroll: true });
|
||||
searchInput.select();
|
||||
|
||||
searchInput.addEventListener("input", (event) => updateSuggestions(event.target.value || ""));
|
||||
|
||||
searchForm.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
const broadcaster = (searchInput.value || "").trim().toLowerCase();
|
||||
if (!broadcaster) {
|
||||
searchInput.focus();
|
||||
return;
|
||||
}
|
||||
window.location.href = `/view/${encodeURIComponent(broadcaster)}/broadcast`;
|
||||
});
|
||||
|
||||
loadChannels();
|
||||
loadChannels();
|
||||
});
|
||||
|
||||
@@ -19,130 +19,130 @@ const currentSettings = JSON.parse(serverRenderedSettings);
|
||||
let userSettings = { ...currentSettings };
|
||||
|
||||
function jsonEquals(a, b) {
|
||||
if (a === b) return true;
|
||||
if (a === b) return true;
|
||||
|
||||
if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
|
||||
return false;
|
||||
}
|
||||
if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const keysA = Object.keys(a);
|
||||
const keysB = Object.keys(b);
|
||||
const keysA = Object.keys(a);
|
||||
const keysB = Object.keys(b);
|
||||
|
||||
if (keysA.length !== keysB.length) return false;
|
||||
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;
|
||||
}
|
||||
for (const key of keysA) {
|
||||
if (!keysB.includes(key)) return false;
|
||||
if (!jsonEquals(a[key], b[key])) return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
return true;
|
||||
}
|
||||
|
||||
function setFormSettings(s) {
|
||||
canvasFpsElement.value = s.canvasFramesPerSecond;
|
||||
canvasSizeElement.value = s.maxCanvasSideLengthPixels;
|
||||
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;
|
||||
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 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`;
|
||||
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) {
|
||||
return input.checkValidity() ? Number(input.value) : null;
|
||||
return input.checkValidity() ? Number(input.value) : null;
|
||||
}
|
||||
|
||||
function readFloat(input) {
|
||||
return input.checkValidity() ? Number(input.value) : null;
|
||||
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);
|
||||
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";
|
||||
statusElement.textContent = "No changes yet.";
|
||||
statusElement.classList.remove("status-success", "status-warning");
|
||||
return;
|
||||
}
|
||||
if (!formElement.checkValidity()) {
|
||||
submitButtonElement.disabled = "disabled";
|
||||
statusElement.textContent = "Fix highlighted fields.";
|
||||
statusElement.classList.add("status-warning");
|
||||
statusElement.classList.remove("status-success");
|
||||
return;
|
||||
}
|
||||
submitButtonElement.disabled = null;
|
||||
statusElement.textContent = "Ready to save.";
|
||||
statusElement.classList.remove("status-warning");
|
||||
if (jsonEquals(currentSettings, userSettings)) {
|
||||
submitButtonElement.disabled = "disabled";
|
||||
statusElement.textContent = "No changes yet.";
|
||||
statusElement.classList.remove("status-success", "status-warning");
|
||||
return;
|
||||
}
|
||||
if (!formElement.checkValidity()) {
|
||||
submitButtonElement.disabled = "disabled";
|
||||
statusElement.textContent = "Fix highlighted fields.";
|
||||
statusElement.classList.add("status-warning");
|
||||
statusElement.classList.remove("status-success");
|
||||
return;
|
||||
}
|
||||
submitButtonElement.disabled = null;
|
||||
statusElement.textContent = "Ready to save.";
|
||||
statusElement.classList.remove("status-warning");
|
||||
}
|
||||
|
||||
function submitSettingsForm() {
|
||||
if (submitButtonElement.getAttribute("disabled") != null) {
|
||||
console.warn("Attempted to submit invalid form");
|
||||
showToast("Settings not valid", "warning");
|
||||
return;
|
||||
}
|
||||
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) {
|
||||
throw new Error("Failed to load canvas");
|
||||
}
|
||||
return r.json();
|
||||
if (submitButtonElement.getAttribute("disabled") != null) {
|
||||
console.warn("Attempted to submit invalid form");
|
||||
showToast("Settings not valid", "warning");
|
||||
return;
|
||||
}
|
||||
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((newSettings) => {
|
||||
currentSettings = { ...newSettings };
|
||||
userSettings = { ...newSettings };
|
||||
updateStatCards(newSettings);
|
||||
showToast("Settings saved", "success");
|
||||
statusElement.textContent = "Saved.";
|
||||
statusElement.classList.add("status-success");
|
||||
updateSubmitButtonDisabledState();
|
||||
})
|
||||
.catch((error) => {
|
||||
showToast("Unable to save settings", "error");
|
||||
console.error(error);
|
||||
statusElement.textContent = "Save failed. Try again.";
|
||||
statusElement.classList.add("status-warning");
|
||||
});
|
||||
.then((r) => {
|
||||
if (!r.ok) {
|
||||
throw new Error("Failed to load canvas");
|
||||
}
|
||||
return r.json();
|
||||
})
|
||||
.then((newSettings) => {
|
||||
currentSettings = { ...newSettings };
|
||||
userSettings = { ...newSettings };
|
||||
updateStatCards(newSettings);
|
||||
showToast("Settings saved", "success");
|
||||
statusElement.textContent = "Saved.";
|
||||
statusElement.classList.add("status-success");
|
||||
updateSubmitButtonDisabledState();
|
||||
})
|
||||
.catch((error) => {
|
||||
showToast("Unable to save settings", "error");
|
||||
console.error(error);
|
||||
statusElement.textContent = "Save failed. Try again.";
|
||||
statusElement.classList.add("status-warning");
|
||||
});
|
||||
}
|
||||
|
||||
formElement.querySelectorAll("input").forEach((input) => {
|
||||
input.addEventListener("input", () => {
|
||||
loadUserSettingsFromDom();
|
||||
updateSubmitButtonDisabledState();
|
||||
});
|
||||
input.addEventListener("input", () => {
|
||||
loadUserSettingsFromDom();
|
||||
updateSubmitButtonDisabledState();
|
||||
});
|
||||
});
|
||||
|
||||
formElement.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
submitSettingsForm();
|
||||
event.preventDefault();
|
||||
submitSettingsForm();
|
||||
});
|
||||
|
||||
setFormSettings(currentSettings);
|
||||
|
||||
@@ -1,51 +1,51 @@
|
||||
(function () {
|
||||
const CONTAINER_ID = "toast-container";
|
||||
const DEFAULT_DURATION = 4200;
|
||||
const CONTAINER_ID = "toast-container";
|
||||
const DEFAULT_DURATION = 4200;
|
||||
|
||||
function ensureContainer() {
|
||||
let container = document.getElementById(CONTAINER_ID);
|
||||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.id = CONTAINER_ID;
|
||||
container.className = "toast-container";
|
||||
container.setAttribute("aria-live", "polite");
|
||||
container.setAttribute("aria-atomic", "true");
|
||||
document.body.appendChild(container);
|
||||
function ensureContainer() {
|
||||
let container = document.getElementById(CONTAINER_ID);
|
||||
if (!container) {
|
||||
container = document.createElement("div");
|
||||
container.id = CONTAINER_ID;
|
||||
container.className = "toast-container";
|
||||
container.setAttribute("aria-live", "polite");
|
||||
container.setAttribute("aria-atomic", "true");
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
return container;
|
||||
}
|
||||
return container;
|
||||
}
|
||||
|
||||
function buildToast(message, type) {
|
||||
const toast = document.createElement("div");
|
||||
toast.className = `toast toast-${type}`;
|
||||
function buildToast(message, type) {
|
||||
const toast = document.createElement("div");
|
||||
toast.className = `toast toast-${type}`;
|
||||
|
||||
const indicator = document.createElement("span");
|
||||
indicator.className = "toast-indicator";
|
||||
indicator.setAttribute("aria-hidden", "true");
|
||||
const indicator = document.createElement("span");
|
||||
indicator.className = "toast-indicator";
|
||||
indicator.setAttribute("aria-hidden", "true");
|
||||
|
||||
const content = document.createElement("div");
|
||||
content.className = "toast-message";
|
||||
content.textContent = message;
|
||||
const content = document.createElement("div");
|
||||
content.className = "toast-message";
|
||||
content.textContent = message;
|
||||
|
||||
toast.appendChild(indicator);
|
||||
toast.appendChild(content);
|
||||
return toast;
|
||||
}
|
||||
toast.appendChild(indicator);
|
||||
toast.appendChild(content);
|
||||
return toast;
|
||||
}
|
||||
|
||||
function removeToast(toast) {
|
||||
if (!toast) return;
|
||||
toast.classList.add("toast-exit");
|
||||
setTimeout(() => toast.remove(), 250);
|
||||
}
|
||||
function removeToast(toast) {
|
||||
if (!toast) return;
|
||||
toast.classList.add("toast-exit");
|
||||
setTimeout(() => toast.remove(), 250);
|
||||
}
|
||||
|
||||
window.showToast = function showToast(message, type = "info", options = {}) {
|
||||
if (!message) return;
|
||||
const normalized = ["success", "error", "warning", "info"].includes(type) ? type : "info";
|
||||
const duration = typeof options.duration === "number" ? options.duration : DEFAULT_DURATION;
|
||||
const container = ensureContainer();
|
||||
const toast = buildToast(message, normalized);
|
||||
container.appendChild(toast);
|
||||
setTimeout(() => removeToast(toast), Math.max(1200, duration));
|
||||
toast.addEventListener("click", () => removeToast(toast));
|
||||
};
|
||||
window.showToast = function showToast(message, type = "info", options = {}) {
|
||||
if (!message) return;
|
||||
const normalized = ["success", "error", "warning", "info"].includes(type) ? type : "info";
|
||||
const duration = typeof options.duration === "number" ? options.duration : DEFAULT_DURATION;
|
||||
const container = ensureContainer();
|
||||
const toast = buildToast(message, normalized);
|
||||
container.appendChild(toast);
|
||||
setTimeout(() => removeToast(toast), Math.max(1200, duration));
|
||||
toast.addEventListener("click", () => removeToast(toast));
|
||||
};
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user