refactor: move bakeStyles from view-level to per-URL setting
This commit is contained in:
+34
-21
@@ -175,6 +175,10 @@
|
||||
background: rgba(255, 193, 7, 0.12);
|
||||
color: var(--yellow);
|
||||
}
|
||||
.badge-bake {
|
||||
background: rgba(46, 204, 113, 0.1);
|
||||
color: var(--green);
|
||||
}
|
||||
.card-url-preview {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
@@ -314,6 +318,21 @@
|
||||
cursor: pointer;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
.bake-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
.bake-toggle input[type="checkbox"] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
accent-color: var(--green);
|
||||
}
|
||||
.hint {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
@@ -716,11 +735,13 @@
|
||||
.map((v) => {
|
||||
const viewUrl = origin + "/v/" + v.id;
|
||||
const urlPreview = v.urls.map((u, i) =>
|
||||
`${u.url} (${u.durationSec}s)${u.forceDarkMode ? " 🌙" : ""}`
|
||||
`${u.url} (${u.durationSec}s)${u.forceDarkMode ? " 🌙" : ""}${u.bakeStyles ? " 🍞" : ""}`
|
||||
).join(" → ");
|
||||
const anyBake = v.urls.some((u) => u.bakeStyles);
|
||||
const badges = [
|
||||
`<span class="badge badge-${v.method}">${v.method.toUpperCase()}</span>`,
|
||||
v.metaRefreshEnabled ? '<span class="badge badge-refresh">META-REFRESH</span>' : "",
|
||||
anyBake ? '<span class="badge badge-bake">BAKE</span>' : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
@@ -812,7 +833,7 @@
|
||||
const idAttr = isEdit ? ` data-id="${existing.id}"` : "";
|
||||
const urls = existing ? existing.urls : [{ url: "", durationSec: 30 }];
|
||||
let urlRowsHTML = urls
|
||||
.map((u, i) => buildUrlRowHTML(u.url, u.durationSec, i, urls.length, u.forceDarkMode))
|
||||
.map((u, i) => buildUrlRowHTML(u.url, u.durationSec, i, urls.length, u.forceDarkMode, u.bakeStyles))
|
||||
.join("");
|
||||
const method = existing ? existing.method : "ssr";
|
||||
const metaChecked = existing ? existing.metaRefreshEnabled : false;
|
||||
@@ -820,8 +841,6 @@
|
||||
const cacheTtl = existing ? existing.cacheTtlSec : 60;
|
||||
const vpW = existing ? existing.viewportWidth : 1920;
|
||||
const vpH = existing ? existing.viewportHeight : 1080;
|
||||
const bakeStylesChecked = existing ? existing.bakeStyles : false;
|
||||
const bakeSectionStyle = method === "ssr" ? "" : "display:none;";
|
||||
|
||||
return `
|
||||
<h2>${title}</h2>
|
||||
@@ -855,14 +874,6 @@
|
||||
<div class="hint" style="margin-top:-8px;margin-bottom:16px;">TV reloads when rotation advances. Required for multi-URL on non-JS browsers.</div>
|
||||
</div>
|
||||
|
||||
<div id="bake-section" style="${bakeSectionStyle}">
|
||||
<div class="checkbox-row">
|
||||
<input type="checkbox" id="bake-styles" ${bakeStylesChecked ? "checked" : ""}>
|
||||
<label for="bake-styles">Bake computed styles into HTML (Samsung TV compatibility)</label>
|
||||
</div>
|
||||
<div class="hint" style="margin-top:-8px;margin-bottom:16px;">Fixes styling issues on browsers with limited CSS support (e.g., DuckDuckGo). Increases HTML size.</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Cache TTL (seconds)</label>
|
||||
<input type="number" id="view-cache-ttl" value="${cacheTtl}" min="0" max="86400" required>
|
||||
@@ -889,11 +900,12 @@
|
||||
</form>`;
|
||||
}
|
||||
|
||||
function buildUrlRowHTML(url, durationSec, index, total, forceDarkMode) {
|
||||
function buildUrlRowHTML(url, durationSec, index, total, forceDarkMode, bakeStyles) {
|
||||
const isSingle = total <= 1;
|
||||
const disabledAttr = isSingle ? "disabled" : "";
|
||||
const grayStyle = isSingle ? 'style="opacity:0.4;"' : "";
|
||||
const darkChecked = forceDarkMode ? "checked" : "";
|
||||
const bakeChecked = bakeStyles ? "checked" : "";
|
||||
return `
|
||||
<div class="url-row" data-index="${index}">
|
||||
<input type="url" placeholder="https://example.com/slideshow" value="${esc(url || "")}" class="url-input" required>
|
||||
@@ -902,6 +914,10 @@
|
||||
<input type="checkbox" class="dark-mode-input" ${darkChecked}>
|
||||
🌙
|
||||
</label>
|
||||
<label class="bake-toggle" title="Bake computed styles (Samsung TV compatibility)">
|
||||
<input type="checkbox" class="bake-styles-input" ${bakeChecked}>
|
||||
🍞
|
||||
</label>
|
||||
<button type="button" class="btn btn-icon btn-danger btn-sm" onclick="removeUrlRow(this)" ${isSingle ? "disabled" : ""}>✕</button>
|
||||
</div>`;
|
||||
}
|
||||
@@ -914,7 +930,7 @@
|
||||
const container = document.getElementById("url-rows");
|
||||
const rows = container.querySelectorAll(".url-row");
|
||||
const div = document.createElement("div");
|
||||
div.innerHTML = buildUrlRowHTML("", 30, rows.length, rows.length + 1, false);
|
||||
div.innerHTML = buildUrlRowHTML("", 30, rows.length, rows.length + 1, false, false);
|
||||
container.appendChild(div.firstElementChild);
|
||||
updateUrlRowStates();
|
||||
}
|
||||
@@ -946,7 +962,6 @@
|
||||
function onMethodChange() {
|
||||
const method = document.getElementById("view-method").value;
|
||||
document.getElementById("meta-section").style.display = method === "ssr" ? "" : "none";
|
||||
document.getElementById("bake-section").style.display = method === "ssr" ? "" : "none";
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════
|
||||
@@ -962,7 +977,6 @@
|
||||
const name = document.getElementById("view-name").value.trim();
|
||||
const method = document.getElementById("view-method").value;
|
||||
const metaRefreshEnabled = document.getElementById("meta-refresh").checked;
|
||||
const bakeStyles = document.getElementById("bake-styles")?.checked ?? false;
|
||||
const cacheTtlSec = parseInt(document.getElementById("view-cache-ttl").value) || 60;
|
||||
const viewportWidth = parseInt(document.getElementById("viewport-width").value) || 1920;
|
||||
const viewportHeight = parseInt(document.getElementById("viewport-height").value) || 1080;
|
||||
@@ -972,10 +986,12 @@
|
||||
const urlVal = row.querySelector(".url-input").value.trim();
|
||||
if (!urlVal) continue;
|
||||
const forceDarkMode = row.querySelector(".dark-mode-input")?.checked ?? false;
|
||||
const bakeStyles = row.querySelector(".bake-styles-input")?.checked ?? false;
|
||||
urls.push({
|
||||
url: urlVal,
|
||||
durationSec: parseInt(row.querySelector(".duration-input").value) || 30,
|
||||
forceDarkMode,
|
||||
bakeStyles,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -988,11 +1004,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const body = { name, urls, method, cacheTtlSec, viewportWidth, viewportHeight };
|
||||
if (method === "ssr") {
|
||||
body.metaRefreshEnabled = metaRefreshEnabled;
|
||||
body.bakeStyles = bakeStyles;
|
||||
}
|
||||
const body = { name, urls, method, cacheTtlSec, viewportWidth, viewportHeight, metaRefreshEnabled };
|
||||
|
||||
try {
|
||||
if (isEdit) {
|
||||
@@ -1049,6 +1061,7 @@
|
||||
debugSocket.close();
|
||||
debugSocket = null;
|
||||
}
|
||||
if (debugTickInterval) { clearInterval(debugTickInterval); debugTickInterval = null; }
|
||||
}
|
||||
|
||||
function setDebugInterval(ms) {
|
||||
|
||||
Reference in New Issue
Block a user