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}