github/Bose-SoundTouch
1
0
Fork 0
mirror of https://github.com/gesellix/Bose-SoundTouch.git synced 2026-08-18 16:46:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prevent browser freeze for large payloads (#101)

Browse Source
This commit is contained in:
Tobias Gesellchen
2026-03-07 12:56:06 +01:00
committed by GitHub
parent d15cebdc95
commit a36c2e4629
2 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/service/handlers/web/index.html
+5
View File
@@ -1389,6 +1389,11 @@
></ul>
</div>
<div id="diff-size-warning" style="display: none; margin-bottom: 15px; padding: 10px; background: #fff3cd; border: 1px solid #ffeeba; border-radius: 4px; color: #856404;">
⚠️ <strong>Large Payload:</strong> Rich diff highlighting is disabled to prevent a browser freeze. Showing raw comparison instead.
<button id="force-rich-diff-btn" style="margin-left: 10px; font-size: 0.8em; cursor: pointer;">Show Rich Diff Anyway</button>
</div>
<div class="diff-container" style="margin-top: 15px">
<div class="diff-pane">
<span
pkg/service/handlers/web/js/script.js
+37 -23
View File
@@ -1008,7 +1008,7 @@ async function clearParityMismatches() {
}
}
function viewParityMismatch(m) {
function viewParityMismatch(m, forceRichDiff = false) {
document.getElementById("diff-path-display").innerText = m.method + " " + m.path;
const reasonsList = document.getElementById("diff-reasons-list");
reasonsList.innerHTML = "";
@@ -1027,32 +1027,46 @@ function viewParityMismatch(m) {
const localBody = formatBody(m.local.body, localCT);
const upstreamBody = formatBody(m.upstream.body, upstreamCT);
if (typeof Diff !== 'undefined') {
const diff = Diff.diffChars(localBody, upstreamBody);
const localEl = document.getElementById("diff-local-body");
const upstreamEl = document.getElementById("diff-upstream-body");
const diffSizeThreshold = 50000; // 50KB
const isLarge = localBody.length > diffSizeThreshold || upstreamBody.length > diffSizeThreshold;
const warningEl = document.getElementById("diff-size-warning");
localEl.innerHTML = "";
upstreamEl.innerHTML = "";
if (isLarge && !forceRichDiff) {
warningEl.style.display = "block";
const forceBtn = document.getElementById("force-rich-diff-btn");
forceBtn.onclick = () => viewParityMismatch(m, true);
diff.forEach((part) => {
const span = document.createElement('span');
if (part.added) {
span.className = 'diff-added';
span.innerText = part.value;
upstreamEl.appendChild(span);
} else if (part.removed) {
span.className = 'diff-removed';
span.innerText = part.value;
localEl.appendChild(span);
} else {
localEl.appendChild(document.createTextNode(part.value));
upstreamEl.appendChild(document.createTextNode(part.value));
}
});
} else {
document.getElementById("diff-local-body").innerText = localBody;
document.getElementById("diff-upstream-body").innerText = upstreamBody;
} else {
warningEl.style.display = "none";
if (typeof Diff !== 'undefined') {
const diff = Diff.diffChars(localBody, upstreamBody);
const localEl = document.getElementById("diff-local-body");
const upstreamEl = document.getElementById("diff-upstream-body");
localEl.innerHTML = "";
upstreamEl.innerHTML = "";
diff.forEach((part) => {
const span = document.createElement('span');
if (part.added) {
span.className = 'diff-added';
span.innerText = part.value;
upstreamEl.appendChild(span);
} else if (part.removed) {
span.className = 'diff-removed';
span.innerText = part.value;
localEl.appendChild(span);
} else {
localEl.appendChild(document.createTextNode(part.value));
upstreamEl.appendChild(document.createTextNode(part.value));
}
});
} else {
document.getElementById("diff-local-body").innerText = localBody;
document.getElementById("diff-upstream-body").innerText = upstreamBody;
}
}
document.getElementById("parity-diff-view").style.display = "block";