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

fix(suggestions): fix CPU spike and improve card UX

Browse Source 
- Fix $derived to $derived.by for complex logic (was causing CPU spike)
- Remove badge backgrounds from QBZ and Qobuz icons
- Move info icon (i) to top-left corner of radio card
- Add play button to radio card
- Increase badge icon sizes for visibility
This commit is contained in:
vicrodh committed 2026-01-31 14:08:21 -06:00
1 parent 1361f257f9
commit bcbd8ce27f
1 file changed
+24 -35
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/immersive/panels/SuggestionsPanel.svelte
+24 -35
View File
@@ -128,7 +128,7 @@
} }
// Get unique artwork URLs for radio collage (from recommended tracks) // Get unique artwork URLs for radio collage (from recommended tracks)
const radioCollageImages = $derived(() => { const radioCollageImages = $derived.by(() => {
const images: string[] = []; const images: string[] = [];
if (currentArtwork) images.push(currentArtwork); if (currentArtwork) images.push(currentArtwork);
for (const track of recommendedTracks) { for (const track of recommendedTracks) {
@@ -223,6 +223,9 @@
disabled={loadingRadio} disabled={loadingRadio}
title={$t('player.radioExperimental') || 'Song Radio - Experimental QBZ feature'} title={$t('player.radioExperimental') || 'Song Radio - Experimental QBZ feature'}
> >
<div class="card-info" title={$t('player.radioExperimentalTooltip') || 'Radio is an experimental QBZ feature that generates a playlist based on the current track.'}>
<AlertCircle size={14} />
</div>
<div class="card-badge qbz"> <div class="card-badge qbz">
<img src="/qbz-logo.svg" alt="QBZ" class="badge-icon qbz-icon" /> <img src="/qbz-logo.svg" alt="QBZ" class="badge-icon qbz-icon" />
</div> </div>
@@ -232,17 +235,16 @@
<Loader2 size={32} class="spinner" /> <Loader2 size={32} class="spinner" />
</div> </div>
{:else} {:else}
{@const images = radioCollageImages()} {#if radioCollageImages.length >= 4}
{#if images.length >= 4}
<!-- Diamond/rotated collage layout --> <!-- Diamond/rotated collage layout -->
<div class="collage-diamond"> <div class="collage-diamond">
<img src={images[0]} alt="" class="diamond-img top" /> <img src={radioCollageImages[0]} alt="" class="diamond-img top" />
<img src={images[1]} alt="" class="diamond-img left" /> <img src={radioCollageImages[1]} alt="" class="diamond-img left" />
<img src={images[2]} alt="" class="diamond-img right" /> <img src={radioCollageImages[2]} alt="" class="diamond-img right" />
<img src={images[3]} alt="" class="diamond-img bottom" /> <img src={radioCollageImages[3]} alt="" class="diamond-img bottom" />
</div> </div>
{:else if images.length > 0} {:else if radioCollageImages.length > 0}
<img src={images[0]} alt="" class="collage-single" /> <img src={radioCollageImages[0]} alt="" class="collage-single" />
<div class="collage-radio-overlay"> <div class="collage-radio-overlay">
<Radio size={24} /> <Radio size={24} />
</div> </div>
@@ -260,8 +262,8 @@
{$t('player.basedOnTrack') || 'Based on this track'} {$t('player.basedOnTrack') || 'Based on this track'}
</span> </span>
</div> </div>
<div class="card-info" title={$t('player.radioExperimentalTooltip') || 'Radio is an experimental QBZ feature that generates a playlist based on the current track.'}> <div class="card-play">
<AlertCircle size={14} /> <Play size={16} fill="currentColor" />
</div> </div>
</button> </button>
{/if} {/if}
@@ -402,24 +404,17 @@
justify-content: center; justify-content: center;
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
} z-index: 2;
.card-badge.qobuz {
background: #1a1a2e;
}
.card-badge.qbz {
background: var(--accent-primary, #7c3aed);
} }
.badge-icon { .badge-icon {
width: 14px; width: 18px;
height: 14px; height: 18px;
} }
.qbz-logo { .qbz-icon {
color: white; width: 20px;
font-weight: 800; height: 20px;
} }
.card-image { .card-image {
@@ -488,21 +483,15 @@
.card-info { .card-info {
position: absolute; position: absolute;
bottom: 12px; top: 8px;
right: 12px; left: 8px;
color: var(--alpha-40, rgba(255, 255, 255, 0.4)); color: var(--alpha-50, rgba(255, 255, 255, 0.5));
cursor: help; cursor: help;
z-index: 2;
} }
.card-info:hover { .card-info:hover {
color: var(--alpha-70, rgba(255, 255, 255, 0.7)); color: var(--alpha-80, rgba(255, 255, 255, 0.8));
}
/* QBZ Badge Icon */
.qbz-icon {
width: 16px;
height: 16px;
border-radius: 2px;
} }
/* Radio Collage */ /* Radio Collage */