diff --git a/webui/index.html b/webui/index.html index 47ec78aa..051f90f1 100644 --- a/webui/index.html +++ b/webui/index.html @@ -5640,6 +5640,13 @@ Dashboard header buttons animate as floating orbs. Hover the header to expand. Desktop only. +
+ + Disables backdrop blur, animations, transitions, and shadows. Significantly reduces GPU/CPU usage on low-end devices. +
diff --git a/webui/static/script.js b/webui/static/script.js index cf3a08b9..82f69186 100644 --- a/webui/static/script.js +++ b/webui/static/script.js @@ -892,10 +892,30 @@ function initAccentColorListeners() { applyWorkerOrbsSetting(workerOrbsCheckbox.checked); }); } + + // Reduce effects toggle — apply immediately on change + const reduceEffectsCheckbox = document.getElementById('reduce-effects-enabled'); + if (reduceEffectsCheckbox) { + reduceEffectsCheckbox.addEventListener('change', () => { + applyReduceEffects(reduceEffectsCheckbox.checked); + }); + } } -// Bootstrap accent from localStorage instantly (prevents default-color flash) +function applyReduceEffects(enabled) { + if (enabled) { + document.body.classList.add('reduce-effects'); + } else { + document.body.classList.remove('reduce-effects'); + } + localStorage.setItem('soulsync-reduce-effects', enabled ? '1' : '0'); +} + +// Bootstrap accent and reduce-effects from localStorage instantly (prevents flash) (function() { + if (localStorage.getItem('soulsync-reduce-effects') === '1') { + document.body.classList.add('reduce-effects'); + } const saved = localStorage.getItem('soulsync-accent'); if (saved) applyAccentColor(saved); // Bootstrap particles setting from localStorage @@ -6024,6 +6044,12 @@ async function loadSettingsData() { if (workerOrbsCheckbox) workerOrbsCheckbox.checked = workerOrbsEnabled; applyWorkerOrbsSetting(workerOrbsEnabled); + // Reduce effects toggle + const reduceEffects = settings.ui_appearance?.reduce_effects === true; // default false + const reduceCheckbox = document.getElementById('reduce-effects-enabled'); + if (reduceCheckbox) reduceCheckbox.checked = reduceEffects; + applyReduceEffects(reduceEffects); + // Populate Logging information (read-only) document.getElementById('log-level-display').textContent = settings.logging?.level || 'INFO'; document.getElementById('log-path-display').textContent = settings.logging?.path || 'logs/app.log'; @@ -7154,7 +7180,8 @@ async function saveSettings(quiet = false) { accent_color: document.getElementById('accent-custom-color')?.value || '#1db954', sidebar_visualizer: document.getElementById('sidebar-visualizer-type')?.value || 'bars', particles_enabled: document.getElementById('particles-enabled')?.checked !== false, - worker_orbs_enabled: document.getElementById('worker-orbs-enabled')?.checked !== false + worker_orbs_enabled: document.getElementById('worker-orbs-enabled')?.checked !== false, + reduce_effects: document.getElementById('reduce-effects-enabled')?.checked === true }, youtube: { cookies_browser: document.getElementById('youtube-cookies-browser').value, diff --git a/webui/static/style.css b/webui/static/style.css index 4e17c6eb..b71cd982 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -54967,3 +54967,16 @@ tr:hover .enhanced-track-actions-group { opacity: 1; } font-size: 12px; flex-shrink: 0; transition: all 0.15s; } .blacklist-entry-remove:hover { background: rgba(239, 83, 80, 0.12); color: #ef5350; } + +/* ── Reduce Visual Effects ── Disables GPU-heavy properties globally */ +body.reduce-effects *, +body.reduce-effects *::before, +body.reduce-effects *::after { + animation-duration: 0s !important; + animation-delay: 0s !important; + transition-duration: 0s !important; + transition-delay: 0s !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + box-shadow: none !important; +}