Implement proper atmospheric background pipeline:
- Random NON-CENTERED crop (150-300% zoom) to break composition
- Extreme blur at small size (destroys all semantic detail)
- Scale up with smoothing for additional blur
- Color adjustments (saturation 1.4x, brightness 0.5x)
- Vignette overlay
The background is now an unrecognizable color field derived from
artwork colors. Acceptance test: "Can I identify the album from
the background alone?" must be NO.
Applies to both WebGL and CSS fallback renderers.
- texture-loader.ts: Multi-pass blur (4×15px) at 256x256 for CSS-equivalent quality
- ambient.frag: Simplified to UV drift, zoom breathing, and color breathing only
- Blur computed ONCE at load time, shader only does motion effects
- No per-frame blur, image processing, or texture uploads
- Source canvas now 256x256 (was 64x64)
- Light pre-blur (8px), GPU shader does main blur
- Increased shader blur radius and samples (16 samples)
- Should produce much smoother results
- Multi-sample blur: 12 samples in circular pattern
- Noise-based UV distortion to break up pixelation
- Random sample offsets for organic blur effect
- All blur computation is GPU-side (no CPU cost)
- Canvas size back to 64x64 (like original)
- Blur radius 20px applied 3 times (20 + 20 + 10 = ~50px total)
- Expanded canvas for blur overflow, then crop to final
- Brightness 0.55, saturation 1.3 (matching original)
Blur fix:
- Use three separate canvases (source, blur, final)
- Apply blur filter when drawing BETWEEN canvases (not to self)
- Canvas size reduced to 16x16 for extreme blur when scaled
- Double blur pass for extra smoothness
CPU fix:
- Reduce animation from 30fps to 15fps
- Slow ambient motion doesn't need high frame rate
- Reduce canvas to 32x32 (was 128) for more natural scaling blur
- Apply triple-pass blur technique:
1. Scale down (interpolation blur)
2. Apply blur filter and redraw
3. Third pass for extra smoothness
- Adjust brightness to 0.45 (darker) and saturation to 1.3
- Lower JPEG quality to 0.7 (blur hides artifacts anyway)
- ImmersiveBackground now checks WebGL2 availability on mount
- Dynamically imports ImmersiveAmbientCanvas when WebGL2 available
- Falls back to CSS blur when WebGL2 unavailable
- New props: enableAmbient (default true), ambientIntensity
Automatic renderer selection:
1. Check BUILD_IMMERSIVE_ENABLED (compile-time)
2. Check isRuntimeEnabled() (user preference)
3. Check isWebGL2Available() (browser capability)
4. If all pass: use WebGL2 with ambient motion
5. Otherwise: use CSS fallback (original behavior)
- Add utils/texture-loader.ts with:
- Async pre-blur generation using canvas 2D
- Blur cache (max 20 entries)
- Request cancellation for rapid track changes
- Abort signal support throughout
- Update ImmersiveAmbientCanvas.svelte:
- Use texture-loader for blurred artwork
- Handle cancellation gracefully
- Report texture metrics
- Clean up pending loads on destroy
Pre-blur is computed once per track change (CPU), then uploaded
to GPU texture. No per-frame blur computation.
- Add utils/webgl-utils.ts with context creation, shader compilation,
texture loading, and cleanup utilities
- Add shaders/fullscreen.vert for fullscreen quad rendering
- Add shaders/static.frag for basic texture display
- Add shaders/index.ts for Vite ?raw shader imports
- Add ImmersiveAmbientCanvas.svelte component with:
- WebGL2 context management
- Context loss/restore handling
- Automatic resize handling
- Performance metrics reporting
- Update app.d.ts with shader file type declarations
This is a static renderer only - no animation yet.
Phase 2 will connect to real artwork with pre-blur.
- Create src/lib/immersive/ module structure
- Add types.ts with ImmersiveState, ImmersiveConfig interfaces
- Add config.ts with build-time and runtime feature flags
- Add ImmersiveRenderer.ts with lifecycle management and stores
- Add index.ts as public API boundary
- Add VITE_IMMERSIVE_ENABLED to vite.config.js
- Add app.d.ts for TypeScript env declarations
Build without immersive: QBZ_IMMERSIVE=false pnpm build
No visual changes yet - this is capability detection and guards only.
- Create HistoryPanel component for viewing playback history
- Add 'history' tab to split mode tabs
- Add 'history-focus' tab to focus mode tabs
- Sync history when immersive mode opens (fix coverflow prev tracks)
- Keyboard shortcuts: H for history, 5 for history-focus
- Rename old CoverflowPanel to StaticPanel (single artwork view)
- Create new CoverflowPanel with actual coverflow effect:
- Shows 5 album covers (2 prev, current, 2 next)
- 3D perspective rotation on side covers
- Click on side covers to navigate queue
- Smooth animation on track change
- Add 'static' tab to focus mode (4 tabs total)
- Update keyboard shortcuts: 1-4 for focus tabs
- Add expandable window controls in header (hover to expand)
- Fullscreen toggle (F11)
- Exit immersive (Esc)
- Close app
- Move Repeat button to left group: Fav | Shuffle | Repeat
- Remove QualityBadge from player controls
- Add F11 keyboard shortcut for fullscreen toggle
- Use Tauri window API for fullscreen functionality
- Remove PlayerControlsMedium variant (unused)
- Keep only PlayerControlsCompact as the single player style
- Add QualityBadge above player controls
- Center play/pause button with balanced left/right groups
- Remove expand/compact toggle (no longer needed)
- Pass quality, bitDepth, samplingRate props from parent
- Add front:CARD=X,DEV=Y device enumeration from aplay -L output
- Recognize front: devices as bit-perfect in AlsaDirectStream
- Group front:CARD and "bit-perfect" named devices correctly in UI
- Add tooltip to device dropdown showing full device name
- Add current selection indicator in device dropdown
- Extend dropdown idle timeout to 10 seconds for long device names
Addresses issue #30 for USB DACs that expose front: but not hw: devices
- Initialize volume from localStorage instead of hardcoded 75
- Pass volume and onVolumeChange to NowPlayingBar even when no track is playing
- Users can now adjust volume before playing anything (important to prevent
loud surprises when volume was left at max)
Systems without a notification daemon (e.g., minimal Linux setups) would
crash when the app tried to show notifications. Now we log a warning and
continue instead of propagating the error.
Fixes#32
1. play_track now returns PlayTrackResult with format_id from Qobuz API
- Returns actual format (5=MP3, 6=FLAC16, 7=FLAC24, 27=Hi-Res)
- Returns None for cache hits (format unknown)
2. Frontend updates track.format based on format_id
- QualityBadge can now correctly show "MP3" when format_id=5
- Previously badge showed "CD" even for MP3 because format was empty
3. Device name now set after backend system init
- PipeWire and ALSA backends now set current_device from settings
- Fixes tooltip showing no device when using backend system
Added onTrackClick handler to NowPlayingBar that opens TrackInfoModal when
the track title is clicked. Uses cursor: help for informative visual cue.
Only works for non-local tracks.
When streaming_only is enabled, prefetch is now skipped entirely.
This ensures tracks are always streamed fresh from the network
without being pre-cached in the background.
When streaming_only is disabled, prefetch works normally.
Logs now clearly show:
- [CACHE HIT] when playing from memory/disk/offline cache
- [STREAMING] when streaming from network with cache_after flag
- [DOWNLOAD] when using full download mode
- [CACHED] / [NOT CACHED] after download completes
- [Playback Settings] shows stream_first, streaming_only, buffer values
- Quality badge now has border (alpha-15) and background (alpha-10)
- Added 5px top margin for separation
- Title and subtitle now use ticker animation on hover for long text
- Animation matches AlbumCard behavior (scroll left then back)
- Card now has background like artist-card (bg-secondary, rounded)
- Artwork reduced to 148x148 with 6px padding around
- Quality badge moved to bottom of card (outside artwork)
- Genre only visible on hover overlay with slide-in animation
- Text centered and sized down for consistency
- Quality badge now at bottom-right with lighter background (0.55 opacity)
- Genre badge at top-left for albums (tracks don't have genre data)
- Both badges use consistent styling with blur backdrop
vicrodh