Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(immersive): fix critical CPU usage issue in background blur

Browse Source 
Performance problem:
- WebKitWebProcess consuming 97% CPU on one core
- Cause: CSS filter: blur(120px) on large image is extremely expensive
  in WebKit/GTK which cannot GPU-accelerate this operation

Solution:
- Replace CSS blur with Canvas-based tiny thumbnail approach
- Draw image to 8x8 canvas, apply color adjustments, scale up via CSS
- Natural pixelation creates blur-like effect with ZERO CPU cost
- Remove backdrop-filter: blur() from header elements (use solid bg)

Also fixed:
- Change Mic icon to Mic2 to match rest of app
- Add missing i18n translations for player.credits and player.suggestions
This commit is contained in:
vicrodh committed 2026-01-31 11:01:34 -06:00
1 parent 4d5a78ff24
commit f012ba33f4
4 files changed
+85 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/components/immersive/ImmersiveHeader.svelte
+5 -11
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { X, Disc3, LayoutGrid, Mic, ListMusic, Music2, Info, Radio } from 'lucide-svelte';
import { X, Disc3, LayoutGrid, Mic2, ListMusic, Music2, Info, Radio } from 'lucide-svelte';
import { t } from '$lib/i18n';
export type ImmersiveTab = 'lyrics' | 'credits' | 'suggestions' | 'queue';
@@ -39,7 +39,7 @@
const displayModes: { id: DisplayMode; icon: typeof Disc3; title: string }[] = [
{ id: 'coverflow', icon: Disc3, title: 'Coverflow (1)' },
{ id: 'split', icon: LayoutGrid, title: 'Split View (2)' },
{ id: 'lyrics-focus', icon: Mic, title: 'Lyrics Focus (3)' },
{ id: 'lyrics-focus', icon: Mic2, title: 'Lyrics Focus (3)' },
{ id: 'queue-focus', icon: ListMusic, title: 'Queue Focus (4)' },
];
@@ -123,9 +123,7 @@
align-items: center;
gap: 2px;
padding: 4px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--alpha-10, rgba(255, 255, 255, 0.1));
border-radius: 10px;
}
@@ -163,9 +161,7 @@
align-items: center;
gap: 4px;
padding: 4px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--alpha-10, rgba(255, 255, 255, 0.1));
border-radius: 12px;
}
@@ -209,9 +205,7 @@
justify-content: center;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--alpha-10, rgba(255, 255, 255, 0.1));
border-radius: 50%;
color: var(--alpha-70, rgba(255, 255, 255, 0.7));