diff --git a/src/lib/components/immersive/ImmersiveControls.svelte b/src/lib/components/immersive/ImmersiveControls.svelte index 5f05064c1..e26687588 100644 --- a/src/lib/components/immersive/ImmersiveControls.svelte +++ b/src/lib/components/immersive/ImmersiveControls.svelte @@ -1,5 +1,5 @@ @@ -152,12 +150,6 @@ /> - {#if onOpenQueue} - - {/if} -
diff --git a/src/lib/components/immersive/ImmersivePlayer.svelte b/src/lib/components/immersive/ImmersivePlayer.svelte index 4f22ed7bd..440c8cdec 100644 --- a/src/lib/components/immersive/ImmersivePlayer.svelte +++ b/src/lib/components/immersive/ImmersivePlayer.svelte @@ -53,7 +53,6 @@ onToggleShuffle: () => void; onToggleRepeat: () => void; onToggleFavorite: () => void; - onOpenQueue?: () => void; // Lyrics lyricsLines?: LyricsLine[]; lyricsActiveIndex?: number; @@ -99,7 +98,6 @@ onToggleShuffle, onToggleRepeat, onToggleFavorite, - onOpenQueue, lyricsLines = [], lyricsActiveIndex = -1, lyricsActiveProgress = 0, @@ -289,7 +287,6 @@ {onToggleRepeat} {onToggleFavorite} {onVolumeChange} - {onOpenQueue} /> {/if} diff --git a/src/lib/components/lyrics/LyricsLines.svelte b/src/lib/components/lyrics/LyricsLines.svelte index 97dcc02ed..5c52a6035 100644 --- a/src/lib/components/lyrics/LyricsLines.svelte +++ b/src/lib/components/lyrics/LyricsLines.svelte @@ -134,6 +134,7 @@ gap: 16px; padding: 16px 20px; overflow-y: auto; + overflow-x: hidden; height: 100%; scrollbar-width: thin; scrollbar-color: var(--bg-tertiary) transparent; @@ -213,6 +214,9 @@ font-size 150ms ease-out, color 250ms ease-out; transform-origin: left center; + /* Prevent horizontal overflow with long lyrics */ + word-wrap: break-word; + overflow-wrap: break-word; /* will-change removed from all lines - only active line gets GPU layer */ } diff --git a/src/lib/utils/imageBlur.ts b/src/lib/utils/imageBlur.ts index 6cccf4ffa..7fbed26ce 100644 --- a/src/lib/utils/imageBlur.ts +++ b/src/lib/utils/imageBlur.ts @@ -2,8 +2,8 @@ * Optimized Image Blur Utility * * Pre-computes blurred background images for the immersive player. - * Uses a tiny canvas (64x64) which, when scaled up, produces the same - * visual effect as CSS blur(100px) but with near-zero GPU cost. + * Uses a small canvas (256x256) with blur which, when scaled up, produces + * a smooth background effect with minimal GPU cost. * * Performance comparison: * - CSS blur(100px) on 600x600 image: ~15-30% GPU, constant @@ -19,14 +19,14 @@ const MAX_CACHE_SIZE = 20; * Returns a data URL that can be used as background-image. * * @param artworkUrl - The original artwork URL - * @param size - Output canvas size (default 64, higher = sharper blur edges) - * @param blurRadius - Canvas blur radius (default 8, effective ~100px at fullscreen) + * @param size - Output canvas size (default 256, higher = smoother result) + * @param blurRadius - Canvas blur radius (default 20, effective ~80px at fullscreen) * @returns Promise - Data URL of blurred image */ export async function generateBlurredBackground( artworkUrl: string, - size: number = 64, - blurRadius: number = 8 + size: number = 256, + blurRadius: number = 20 ): Promise { // Check cache first const cacheKey = `${artworkUrl}-${size}-${blurRadius}`; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c9c59d986..a9c3a96e3 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2587,6 +2587,15 @@ } }); + // Sync queue state when immersive player is open and track changes + $effect(() => { + const trackId = currentTrack?.id; + const immersiveOpen = isFullScreenOpen || isFocusModeOpen; + if (immersiveOpen && trackId !== undefined) { + syncQueueState(); + } + }); + // Helper function to fetch and update queue counts and history async function updateQueueCounts() { const state = await getBackendQueueState(); @@ -3095,11 +3104,6 @@ onToggleRepeat={toggleRepeat} {isFavorite} onToggleFavorite={toggleFavorite} - onOpenQueue={() => { - closeFullScreen(); - closeFocusMode(); - toggleQueue(); - }} lyricsLines={lyricsLines.map(l => ({ text: l.text }))} lyricsActiveIndex={lyricsActiveIndex} lyricsActiveProgress={lyricsActiveProgress}