Overlay visar bara launch-/copy-knappar
OBS-inställningarna ligger i Inställningar dropdown-problemet för OBS-config är kvar löst där också
This commit is contained in:
larssand
@@ -10,7 +10,7 @@
|
|||||||
href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Orbitron:wght@500;700;800&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Orbitron:wght@500;700;800&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<link rel="stylesheet" href="./src/styles.css" />
|
<link rel="stylesheet" href="/src/styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="app-shell">
|
<div class="app-shell">
|
||||||
@@ -66,6 +66,6 @@
|
|||||||
</table>
|
</table>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script type="module" src="./src/app.js"></script>
|
<script type="module" src="/src/app.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
153
src/app.js
153
src/app.js
@@ -3006,7 +3006,7 @@ function tickClock() {
|
|||||||
if (currentView === "dashboard" && timerState.changed) {
|
if (currentView === "dashboard" && timerState.changed) {
|
||||||
renderView();
|
renderView();
|
||||||
}
|
}
|
||||||
if (currentView === "overlay" && active) {
|
if (overlayMode && currentView === "overlay" && active) {
|
||||||
renderView();
|
renderView();
|
||||||
}
|
}
|
||||||
if (timerState.changed) {
|
if (timerState.changed) {
|
||||||
@@ -6464,42 +6464,6 @@ function renderOverlay() {
|
|||||||
<button id="overlayLaunchObs" class="btn" type="button">${t("timing.open_obs_overlay")}</button>
|
<button id="overlayLaunchObs" class="btn" type="button">${t("timing.open_obs_overlay")}</button>
|
||||||
<button id="overlayCopyObsUrl" class="btn" type="button">${t("overlay.obs_copy_url")}</button>
|
<button id="overlayCopyObsUrl" class="btn" type="button">${t("overlay.obs_copy_url")}</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="overlay-obs-config">
|
|
||||||
<div class="panel-header-inline">
|
|
||||||
<strong>${t("overlay.obs_config")}</strong>
|
|
||||||
<span>${t("overlay.obs_public_hint")}</span>
|
|
||||||
</div>
|
|
||||||
<div class="form-grid cols-4">
|
|
||||||
<label>
|
|
||||||
${t("overlay.obs_rows")}
|
|
||||||
<input id="obsRows" type="number" min="3" max="12" value="${normalizeObsOverlaySettings(state.settings.obsOverlay).rows}" />
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
${t("overlay.obs_layout")}
|
|
||||||
<select id="obsLayout">
|
|
||||||
${OBS_LAYOUTS.map((layout) => `<option value="${layout}" ${normalizeObsOverlaySettings(state.settings.obsOverlay).layout === layout ? "selected" : ""}>${t(`overlay.obs_layout_${layout}`)}</option>`).join("")}
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
${t("overlay.obs_theme")}
|
|
||||||
<select id="obsTheme">
|
|
||||||
${OBS_THEMES.map((theme) => `<option value="${theme}" ${normalizeObsOverlaySettings(state.settings.obsOverlay).theme === theme ? "selected" : ""}>${t(`overlay.obs_theme_${theme}`)}</option>`).join("")}
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
${t("overlay.obs_public_token")}
|
|
||||||
<input id="obsPublicToken" value="${escapeHtml(normalizeObsOverlaySettings(state.settings.obsOverlay).publicToken)}" placeholder="optional" />
|
|
||||||
<small>${t("overlay.obs_public_token_hint")}</small>
|
|
||||||
</label>
|
|
||||||
<label class="toggle"><input id="obsShowClock" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showClock ? "checked" : ""} /><span>${t("overlay.obs_show_clock")}</span></label>
|
|
||||||
<label class="toggle"><input id="obsShowFastest" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showFastest ? "checked" : ""} /><span>${t("overlay.obs_show_fastest")}</span></label>
|
|
||||||
<label class="toggle"><input id="obsShowGrid" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showGrid ? "checked" : ""} /><span>${t("overlay.obs_show_grid")}</span></label>
|
|
||||||
<label class="toggle"><input id="obsShowLaps" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showLaps ? "checked" : ""} /><span>${t("overlay.obs_show_laps")}</span></label>
|
|
||||||
<label class="toggle"><input id="obsShowResult" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showResult ? "checked" : ""} /><span>${t("overlay.obs_show_result")}</span></label>
|
|
||||||
<label class="toggle"><input id="obsShowBest" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showBest ? "checked" : ""} /><span>${t("overlay.obs_show_best")}</span></label>
|
|
||||||
<label class="toggle"><input id="obsShowGap" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showGap ? "checked" : ""} /><span>${t("overlay.obs_show_gap")}</span></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
`
|
`
|
||||||
@@ -6674,37 +6638,6 @@ function renderOverlay() {
|
|||||||
}
|
}
|
||||||
window.prompt("Copy OBS URL", url);
|
window.prompt("Copy OBS URL", url);
|
||||||
});
|
});
|
||||||
|
|
||||||
[
|
|
||||||
["obsRows", "rows", (value) => Math.max(3, Math.min(12, Number(value) || DEFAULT_OBS_OVERLAY_SETTINGS.rows))],
|
|
||||||
["obsLayout", "layout", (value) => OBS_LAYOUTS.includes(String(value || "").toLowerCase()) ? String(value).toLowerCase() : DEFAULT_OBS_OVERLAY_SETTINGS.layout],
|
|
||||||
["obsTheme", "theme", (value) => OBS_THEMES.includes(String(value || "").toLowerCase()) ? String(value).toLowerCase() : DEFAULT_OBS_OVERLAY_SETTINGS.theme],
|
|
||||||
["obsPublicToken", "publicToken", (value) => String(value || "").trim()],
|
|
||||||
["obsShowClock", "showClock", (value, el) => Boolean(el?.checked)],
|
|
||||||
["obsShowFastest", "showFastest", (value, el) => Boolean(el?.checked)],
|
|
||||||
["obsShowGrid", "showGrid", (value, el) => Boolean(el?.checked)],
|
|
||||||
["obsShowLaps", "showLaps", (value, el) => Boolean(el?.checked)],
|
|
||||||
["obsShowResult", "showResult", (value, el) => Boolean(el?.checked)],
|
|
||||||
["obsShowBest", "showBest", (value, el) => Boolean(el?.checked)],
|
|
||||||
["obsShowGap", "showGap", (value, el) => Boolean(el?.checked)],
|
|
||||||
].forEach(([id, key, mapper]) => {
|
|
||||||
const el = document.getElementById(id);
|
|
||||||
if (!el) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const handler = () => {
|
|
||||||
const next = normalizeObsOverlaySettings({
|
|
||||||
...state.settings.obsOverlay,
|
|
||||||
[key]: mapper(el.value, el),
|
|
||||||
});
|
|
||||||
state.settings.obsOverlay = next;
|
|
||||||
saveState();
|
|
||||||
};
|
|
||||||
el.addEventListener("change", handler);
|
|
||||||
if (el instanceof HTMLInputElement && (el.type === "number" || el.type === "text")) {
|
|
||||||
el.addEventListener("input", handler);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderObsOverlay(active, leaderboard, result, sessionTiming, branding) {
|
function renderObsOverlay(active, leaderboard, result, sessionTiming, branding) {
|
||||||
@@ -7350,6 +7283,49 @@ function renderSettings() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="panel mt-16">
|
||||||
|
<div class="panel-header"><h3>${t("overlay.obs_config")}</h3></div>
|
||||||
|
<div class="panel-body">
|
||||||
|
<p class="hint">${t("overlay.obs_public_hint")}</p>
|
||||||
|
<div class="actions">
|
||||||
|
<button id="settingsLaunchObs" class="btn" type="button">${t("timing.open_obs_overlay")}</button>
|
||||||
|
<button id="settingsCopyObsUrl" class="btn" type="button">${t("overlay.obs_copy_url")}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel-body overlay-obs-config">
|
||||||
|
<div class="form-grid cols-4">
|
||||||
|
<label>
|
||||||
|
${t("overlay.obs_rows")}
|
||||||
|
<input id="obsRows" type="number" min="3" max="12" value="${normalizeObsOverlaySettings(state.settings.obsOverlay).rows}" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
${t("overlay.obs_layout")}
|
||||||
|
<select id="obsLayout">
|
||||||
|
${OBS_LAYOUTS.map((layout) => `<option value="${layout}" ${normalizeObsOverlaySettings(state.settings.obsOverlay).layout === layout ? "selected" : ""}>${t(`overlay.obs_layout_${layout}`)}</option>`).join("")}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
${t("overlay.obs_theme")}
|
||||||
|
<select id="obsTheme">
|
||||||
|
${OBS_THEMES.map((theme) => `<option value="${theme}" ${normalizeObsOverlaySettings(state.settings.obsOverlay).theme === theme ? "selected" : ""}>${t(`overlay.obs_theme_${theme}`)}</option>`).join("")}
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
${t("overlay.obs_public_token")}
|
||||||
|
<input id="obsPublicToken" value="${escapeHtml(normalizeObsOverlaySettings(state.settings.obsOverlay).publicToken)}" placeholder="optional" />
|
||||||
|
<small>${t("overlay.obs_public_token_hint")}</small>
|
||||||
|
</label>
|
||||||
|
<label class="toggle"><input id="obsShowClock" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showClock ? "checked" : ""} /><span>${t("overlay.obs_show_clock")}</span></label>
|
||||||
|
<label class="toggle"><input id="obsShowFastest" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showFastest ? "checked" : ""} /><span>${t("overlay.obs_show_fastest")}</span></label>
|
||||||
|
<label class="toggle"><input id="obsShowGrid" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showGrid ? "checked" : ""} /><span>${t("overlay.obs_show_grid")}</span></label>
|
||||||
|
<label class="toggle"><input id="obsShowLaps" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showLaps ? "checked" : ""} /><span>${t("overlay.obs_show_laps")}</span></label>
|
||||||
|
<label class="toggle"><input id="obsShowResult" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showResult ? "checked" : ""} /><span>${t("overlay.obs_show_result")}</span></label>
|
||||||
|
<label class="toggle"><input id="obsShowBest" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showBest ? "checked" : ""} /><span>${t("overlay.obs_show_best")}</span></label>
|
||||||
|
<label class="toggle"><input id="obsShowGap" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showGap ? "checked" : ""} /><span>${t("overlay.obs_show_gap")}</span></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section class="panel mt-16">
|
<section class="panel mt-16">
|
||||||
<div class="panel-header"><h3>${t("settings.managed_ammc")}</h3></div>
|
<div class="panel-header"><h3>${t("settings.managed_ammc")}</h3></div>
|
||||||
<form id="ammcForm" class="panel-body form-grid cols-2 settings-grid">
|
<form id="ammcForm" class="panel-body form-grid cols-2 settings-grid">
|
||||||
@@ -7480,6 +7456,47 @@ function renderSettings() {
|
|||||||
}
|
}
|
||||||
}, 180);
|
}, 180);
|
||||||
});
|
});
|
||||||
|
document.getElementById("settingsLaunchObs")?.addEventListener("click", () => openOverlayWindow("obs", { public: true }));
|
||||||
|
document.getElementById("settingsCopyObsUrl")?.addEventListener("click", async () => {
|
||||||
|
const url = buildOverlayUrl("obs", { public: true });
|
||||||
|
if (navigator.clipboard?.writeText) {
|
||||||
|
await navigator.clipboard.writeText(url).catch(() => {});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.prompt("Copy OBS URL", url);
|
||||||
|
});
|
||||||
|
|
||||||
|
[
|
||||||
|
["obsRows", "rows", (value) => Math.max(3, Math.min(12, Number(value) || DEFAULT_OBS_OVERLAY_SETTINGS.rows))],
|
||||||
|
["obsLayout", "layout", (value) => OBS_LAYOUTS.includes(String(value || "").toLowerCase()) ? String(value).toLowerCase() : DEFAULT_OBS_OVERLAY_SETTINGS.layout],
|
||||||
|
["obsTheme", "theme", (value) => OBS_THEMES.includes(String(value || "").toLowerCase()) ? String(value).toLowerCase() : DEFAULT_OBS_OVERLAY_SETTINGS.theme],
|
||||||
|
["obsPublicToken", "publicToken", (value) => String(value || "").trim()],
|
||||||
|
["obsShowClock", "showClock", (value, el) => Boolean(el?.checked)],
|
||||||
|
["obsShowFastest", "showFastest", (value, el) => Boolean(el?.checked)],
|
||||||
|
["obsShowGrid", "showGrid", (value, el) => Boolean(el?.checked)],
|
||||||
|
["obsShowLaps", "showLaps", (value, el) => Boolean(el?.checked)],
|
||||||
|
["obsShowResult", "showResult", (value, el) => Boolean(el?.checked)],
|
||||||
|
["obsShowBest", "showBest", (value, el) => Boolean(el?.checked)],
|
||||||
|
["obsShowGap", "showGap", (value, el) => Boolean(el?.checked)],
|
||||||
|
].forEach(([id, key, mapper]) => {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (!el) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const handler = () => {
|
||||||
|
const next = normalizeObsOverlaySettings({
|
||||||
|
...state.settings.obsOverlay,
|
||||||
|
[key]: mapper(el.value, el),
|
||||||
|
});
|
||||||
|
state.settings.obsOverlay = next;
|
||||||
|
saveState();
|
||||||
|
};
|
||||||
|
el.addEventListener("change", handler);
|
||||||
|
if (el instanceof HTMLInputElement && (el.type === "number" || el.type === "text")) {
|
||||||
|
el.addEventListener("input", handler);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
document.getElementById("settingsTestBackend")?.addEventListener("click", async () => {
|
document.getElementById("settingsTestBackend")?.addEventListener("click", async () => {
|
||||||
await pingBackend();
|
await pingBackend();
|
||||||
renderView();
|
renderView();
|
||||||
|
|||||||
Reference in New Issue
Block a user