From 3672504aaf6930b8477f05ae993427e952667401 Mon Sep 17 00:00:00 2001 From: Frank Stellmacher <171614930+Psychotoxical@users.noreply.github.com> Date: Sat, 25 Apr 2026 20:36:27 +0200 Subject: [PATCH 1/7] Update README.md --- README.md | 273 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 152 insertions(+), 121 deletions(-) diff --git a/README.md b/README.md index 9cab7bc6..d8cb2652 100644 --- a/README.md +++ b/README.md @@ -1,165 +1,196 @@ -
- Psysonic Logo - -

A modern, gorgeous, and blazing fast desktop client for Subsonic API compatible music servers (Navidrome, Gonic, etc.).

- -

- Latest Release - License: GPL v3 - Built with Tauri - AUR - AUR (bin) - Cachix - Discord -

-
- -> [!WARNING] -> **Psysonic is under heavy active development.** Bugs and rough edges are to be expected. We reserve the right to change, remove, or rework existing features at any time without prior notice. - ---- +# Psysonic
- - Join Discord - -

Have questions, ideas, or just want to hang out? Come chat in our Discord server!

+ Psysonic Logo + +## The Ultimate Desktop Client for Self-Hosted Music Libraries + +**Fast. Beautiful. Native. Feature-packed.** +Built primarily for **Navidrome**. Also compatible with **Gonic**, **Airsonic**, **LMS** and other Subsonic-compatible servers with partial feature support. + +
+ + + +

+ +**No telemetry β€’ Native performance β€’ Massive feature set β€’ Community driven** +
--- -Psysonic is a beautiful desktop music player built completely from the ground up for the modern era. Utilizing **Tauri v2** and **React**, it offers a native-feeling, lightweight, and incredibly fast experience with a stunning UI inspired by the [Catppuccin](https://github.com/catppuccin/catppuccin) and [Nord](https://www.nordtheme.com/) aesthetics. - -Designed specifically for users hosting their own music via Navidrome or other Subsonic API servers, Psysonic aims to be the best way to interact with your personal library. - - ![Psysonic Screenshot](public/screenshot1.png) -## ✨ Features +--- -- 🎨 **Wide Theme Selection**: Dozens of themes across 8 groups β€” Open Source Classics (Catppuccin, Nord, Gruvbox, Nightfox, Dracula), Operating Systems, Games, Movies, Series, Social Media, and Psysonic originals. Glassmorphism effects, micro-animations, and a time-based **Theme Scheduler** for automatic day/night switching. -- ⚑ **Native Performance**: Built with Rust & Tauri β€” native audio engine (rodio), minimal RAM usage, no Electron overhead. -- 🎡 **Last.fm Integration**: Scrobbling, Now Playing, love/unlove, Similar Artists, and top stats β€” no Navidrome config needed. -- 🎀 **Synchronized Lyrics**: Auto-scrolling synced lyrics with click-to-seek in the sidebar and fullscreen player, powered by LRCLIB and your Navidrome server. -- πŸ“» **Radio & Infinite Queue**: Smart Radio sessions from any song or artist, built-in Internet Radio (ICY/HLS), and an Infinite Queue that silently refills when the queue runs out. -- πŸŽ›οΈ **Advanced Audio**: 10-band graphic EQ with custom presets, **AutoEQ** headphone correction, Replay Gain, gapless playback, and crossfade. -- 〰️ **10 Seekbar Styles**: Waveform, Bar, Thick Bar, Segmented, Line+Dot, Neon, Pulse Wave, Particle Trail, Liquid Fill, and Retro Tape. -- πŸ–₯️ **Fullscreen Player**: Album art, animated synced lyrics overlay, and artist image in a dedicated fullscreen view. -- πŸ“‹ **Playlists & Library**: Full playlist management with drag-and-drop reorder and smart suggestions. Genre browsing, Random Mix, Advanced Search, ratings (1–5 stars), and multi-select actions. -- πŸ’Ύ **Device Sync**: Export your library to a USB drive or portable device using a configurable filename template. -- πŸ–₯️ **CLI Control**: Control playback, switch servers, manage the queue, and more directly from the command line. -- ⌨️ **Customization**: Configurable keybindings, UI fonts, global zoom slider, system tray, backup & restore, and in-app auto-update. -- 🌍 **8 Languages**: English, German, French, Dutch, Spanish, Chinese, Norwegian, Russian. -- πŸ–₯️ **Cross-Platform**: Windows, macOS, and Linux (Arch AUR, .deb, .rpm, NixOS flake). -- ❄️ **NixOS / flakes**: First-class flake package with a public **Cachix** binary cache (`psysonic.cachix.org`) β€” `nix run github:Psychotoxical/psysonic` or add to your system config. See the [NixOS install guide](./nixos-install.md). +> [!WARNING] +> Psysonic is under heavy active development. Bugs and rough edges are to be expected. We reserve the right to change, remove, or rework existing features at any time without prior notice. -## πŸ—ΊοΈ Roadmap +## Server Compatibility -### πŸ“‹ Planned -- [ ] Theme contrast & legibility audit β€” systematic review of text/background contrast ratios across all themes -- [ ] Accessibility (a11y) β€” keyboard navigation, screen reader support, ARIA labels -- [ ] More languages +**Psysonic is optimized first and foremost for Navidrome.** + +Many advanced functions integrate directly with Navidrome APIs for the best possible experience. Other Subsonic-compatible servers generally work well, but some features may be limited depending on server capabilities. + +## Why Psysonic? + +Most Subsonic clients feel like web wrappers. + +**Psysonic does not.** + +It is a true desktop experience built with **Rust**, **Tauri v2**, and **React** for users who care about speed, aesthetics, customization, and serious music library management. + +If you host your own music, this is what the premium experience should feel like. --- -## πŸ“₯ Installation +# Core Features -Navigate to the [Releases](https://github.com/Psychotoxical/psysonic/releases) page and download the installer for your operating system. +## Playback Engine -### 🐧 Linux +* Gapless playback +* Crossfade +* ReplayGain support +* Smart Loudness Normalization +* Infinite Queue +* Smart Radio sessions +* High responsiveness with low memory usage + +## Audio Tools + +* 10-band Equalizer +* Presets +* AutoEQ headphone correction +* Per-device optimization + +## Library Power + +* Lightning-fast search +* Albums / Artists / Tracks / Genres +* Ratings system +* Multi-select bulk actions +* Drag & drop playlist management +* Huge library friendly + +## Lyrics & Discovery + +* Synced lyrics with seek support +* Auto-scroll sidebar lyrics +* Fullscreen lyric mode +* Last.fm scrobbling +* Similar artists / love tracks / stats + +## Personalization + +* Huge theme collection +* Catppuccin / Nord inspired styles +* Glassmorphism effects +* Font customization +* Zoom controls +* Keybind remapping +* Theme Scheduler (day/night auto switch) + +## Power User Extras + +* CLI controls +* USB / portable sync +* Backup & restore settings +* In-app auto updater +* LAN / remote auto switching + +--- + +# Orbit (Upcoming) + +## Listen Together. In Sync. Soon. + +Currently in final development and testing. Orbit will introduce synchronized shared listening sessions directly inside Psysonic. + +* Host-controlled playback +* Join via link +* Shared listening sessions +* Guest song suggestions +* Real-time queue interaction + +**Rolling out in an upcoming release. Community feedback will help shape the final experience.** + +--- + +# Platforms + +| OS | Support | +| ------- | ---------------------------------------- | +| Windows | Native Installer *(certificate pending)* | +| macOS | Signed DMG | +| Linux | AppImage / DEB / RPM / AUR / NixOS | + +Supports **8 languages** and growing. + +--- + +# Install + +## Linux -**Quick Install (Recommended):** ```bash curl -fsSL https://raw.githubusercontent.com/Psychotoxical/psysonic/main/scripts/install.sh | sudo bash ``` -**Manual Installation:** -- **Ubuntu / Debian**: `.deb` from GitHub Releases -- **Fedora / RHEL**: `.rpm` from GitHub Releases -- **Any distro (portable)**: `.AppImage` from GitHub Releases β€” `chmod +x` and run, no install required +## Windows -**Arch Linux (AUR):** +Download the latest installer from Releases. -| Package | Type | Description | -| :--- | :--- | :--- | -| [**psysonic**](https://aur.archlinux.org/packages/psysonic) | **Source** | Builds from source using your system's native **WebKitGTK** (no bundled libs, no EGL/Mesa compatibility issues). | -| [**psysonic-bin**](https://aur.archlinux.org/packages/psysonic-bin) | **Binary** | Pre-compiled version for faster installation. | +> SmartScreen warnings may appear until the code-signing certificate is active. -> [!TIP] -> The AUR binary package is kindly provided and maintained by [**kilyabin**](https://github.com/kilyabin). +## macOS -**❄️ NixOS (flakes):** -- `nix run github:Psychotoxical/psysonic` β€” one-shot launch -- Full guide: [`nixos-install.md`](./nixos-install.md) *(contributed by [@cucadmuh](https://github.com/cucadmuh), PR [#209](https://github.com/Psychotoxical/psysonic/pull/209))* +Download the signed DMG from Releases. -### 🍎 macOS +--- -- **macOS**: `.dmg` (Universal or Apple Silicon) β€” **signed with an Apple Developer ID and notarized by Apple**. Gatekeeper opens it with a single click, no `xattr` workaround required. - -> [!NOTE] -> Since **v1.40.0**, macOS builds include an in-app auto-updater: click **Install now** in the update notification and the signed `.app.tar.gz` is fetched, verified against the bundled minisign public key, replaced in place, and the app relaunches β€” all in one step. - -### πŸͺŸ Windows - -- **Windows**: `.exe` (NSIS installer) - -> [!WARNING] -> **SmartScreen Note:** -> Windows SmartScreen might show a warning because the installer isn't signed with an expensive developer certificate. Click on **"More info"** and then **"Run anyway"**. - -## πŸš€ Getting Started - -1. Download and install Psysonic. -2. Open the app and enter your Subsonic/Navidrome server details (URL, Username, Password). -3. If applicable, you can provide both an external URL and a local LAN IP. Psysonic allows you to quickly toggle between them in the Settings. -4. Enjoy your music! - -## πŸ› οΈ Development - -If you want to build Psysonic from source or contribute to the project: - -### Prerequisites -- [Node.js](https://nodejs.org/) (v18+) -- [Rust](https://www.rust-lang.org/) (v1.75+) -- **`cmake`** β€” required to compile the bundled libopus (Opus audio support). Install it before running `cargo build` or `npm run tauri:build`: - - Linux: `sudo apt install cmake` / `sudo pacman -S cmake` - - macOS: `brew install cmake` - - Windows: [cmake.org/download](https://cmake.org/download/) or `winget install cmake` -- OS-specific build dependencies for Tauri (see the [Tauri prerequisites guide](https://tauri.app/v2/guides/getting-started/prerequisites)). - -### Setup +# Development ```bash -# Clone the repository git clone https://github.com/Psychotoxical/psysonic.git cd psysonic - -# Install node dependencies npm install - -# Run in development mode npm run tauri:dev +``` -# Build for production +Build release: + +```bash npm run tauri:build ``` -## 🀝 Contributing +--- -Contributions are completely welcome! Whether it is translating the app into a new language, fixing a bug, or proposing a new feature. +# Privacy First -1. Fork the Project -2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) -3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) -4. Push to the Branch (`git push origin feature/AmazingFeature`) -5. Open a Pull Request +* No telemetry +* No spyware nonsense +* No analytics harvesting +* Your library stays yours -## πŸ“„ License +--- -Distributed under the **GNU General Public License v3.0**. See `LICENSE` for more information. +# Community -This means: you are free to use, study, and modify Psysonic. If you distribute a modified version, you must release it under the same GPL v3 license and keep the original copyright notice intact. You may **not** incorporate this code into proprietary software. +Join Discord, report bugs, suggest features, share themes, shape the future. -## πŸ”’ Privacy +--- -Psysonic contains no telemetry or analytics. All third-party integrations (Last.fm, LRCLIB, Discord) are opt-in. See [PRIVACY.md](PRIVACY.md) for full details. +# License + +GNU GPL v3.0 + +--- + +
+ +## Stop using boring music clients. + +## Use Psysonic. + +
From 9048e9426e5dbb55c0dc2ef5473144a7f1e345ce Mon Sep 17 00:00:00 2001 From: Frank Stellmacher <171614930+Psychotoxical@users.noreply.github.com> Date: Sat, 25 Apr 2026 20:37:53 +0200 Subject: [PATCH 2/7] Update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index d8cb2652..ef6a155f 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Built primarily for **Navidrome**. Also compatible with **Gonic**, **Airsonic**,
- +

@@ -119,11 +119,11 @@ Currently in final development and testing. Orbit will introduce synchronized sh # Platforms -| OS | Support | -| ------- | ---------------------------------------- | -| Windows | Native Installer *(certificate pending)* | -| macOS | Signed DMG | -| Linux | AppImage / DEB / RPM / AUR / NixOS | +| OS | Support | +| ------- | --------------------------------------------------------------- | +| Windows | Native Installer *(certificate pending)* | +| macOS | Signed DMG | +| Linux | AppImage / DEB / RPM / AUR (`psysonic`, `psysonic-bin`) / NixOS | Supports **8 languages** and growing. From 2fae1b4c0ea96bf005d23d567b688260764ba671 Mon Sep 17 00:00:00 2001 From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com> Date: Sat, 25 Apr 2026 22:17:16 +0200 Subject: [PATCH 3/7] chore(tauri): don't auto-open devtools on launch MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removes the #[cfg(debug_assertions)] open_devtools() block from setup(). DevTools remain available in dev builds via the standard WebKit shortcut (Ctrl+Shift+I) and right-click β†’ Inspect, but no longer pop up automatically on every dev launch. Less visual clutter when iterating without needing the inspector. Production behaviour is unchanged β€” devtools stay hard-stripped from release builds via Tauri's default `windows[].devtools=false` for release. Co-Authored-By: Claude Opus 4.7 (1M context) --- src-tauri/src/lib.rs | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index 1f586d83..a6cc1202 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -3621,14 +3621,6 @@ pub fn run() { } } - #[cfg(debug_assertions)] - { - use tauri::Manager; - if let Some(win) = app.get_webview_window("main") { - win.open_devtools(); - } - } - // ── System tray ─────────────────────────────────────────────── // Always build on startup when possible; the frontend calls toggle_tray_icon(false) // immediately after load if the user has disabled the tray icon. From d31291a463586072dbcb501ab74ba9324f99aa13 Mon Sep 17 00:00:00 2001 From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com> Date: Sat, 25 Apr 2026 23:57:44 +0200 Subject: [PATCH 4/7] perf(genres): replace icon cards with tag-cloud pills MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous genre grid mounted ~60 Lucide SVG cards per page (with Watermark icon, gradient bg, infinite scroll) and froze the WebKitGTK renderer for several seconds on libraries with many genres. The new layout flows all genres as compact pills with log-scaled font size based on albumCount β€” one -equivalent button per genre, no SVGs, no pagination needed. Pill colour is dimly tinted by the same deterministic hash-to-CTP palette used before; text picks up the genre colour on hover only, so the page reads calmly at rest. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/pages/Genres.tsx | 130 ++++++++++---------------------------- src/styles/components.css | 72 +++++++++------------ 2 files changed, 64 insertions(+), 138 deletions(-) diff --git a/src/pages/Genres.tsx b/src/pages/Genres.tsx index 66b44e72..99f1656c 100644 --- a/src/pages/Genres.tsx +++ b/src/pages/Genres.tsx @@ -1,36 +1,10 @@ -import React, { useEffect, useMemo, useRef, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { - Headphones, Zap, Music2, Music, Cpu, Mic, Radio, Cloud, - Leaf, Heart, Sun, Flame, Film, Globe, BookOpen, Podcast, Star, - Tags, type LucideIcon, -} from 'lucide-react'; +import { Tags } from 'lucide-react'; import { getGenres, SubsonicGenre } from '../api/subsonic'; import { APP_MAIN_SCROLL_VIEWPORT_ID } from '../constants/appScroll'; -function getGenreIcon(name: string): LucideIcon { - const n = name.toLowerCase(); - if (/ambient|drone|new age/.test(n)) return Cloud; - if (/metal|hardcore|thrash|death|grind|doom/.test(n)) return Zap; - if (/rock/.test(n)) return Radio; - if (/jazz/.test(n)) return Music2; - if (/classical|orchestra|chamber|baroque|opera|symphon/.test(n)) return Music; - if (/electronic|techno|edm|house|trance|electro|synth/.test(n)) return Cpu; - if (/hip.?hop|rap/.test(n)) return Mic; - if (/pop/.test(n)) return Star; - if (/folk|country|bluegrass|americana/.test(n)) return Leaf; - if (/blues/.test(n)) return Music2; - if (/soul|r.?b|funk|gospel/.test(n)) return Heart; - if (/reggae|ska|dub/.test(n)) return Sun; - if (/punk/.test(n)) return Flame; - if (/soundtrack|score|ost|film|movie|cinema/.test(n)) return Film; - if (/world|latin|afro|celtic|tribal|traditional/.test(n)) return Globe; - if (/audiobook|spoken|hΓΆrbuch|speech|comedy/.test(n)) return BookOpen; - if (/podcast/.test(n)) return Podcast; - return Headphones; -} - const CTP_COLORS = [ 'var(--ctp-rosewater)', 'var(--ctp-flamingo)', 'var(--ctp-pink)', 'var(--ctp-mauve)', 'var(--ctp-red)', 'var(--ctp-maroon)', 'var(--ctp-peach)', 'var(--ctp-yellow)', @@ -45,63 +19,39 @@ function genreColor(name: string): string { } const SCROLL_KEY = 'genres-scroll'; -const VISIBLE_KEY = 'genres-visible'; -const PAGE_SIZE = 60; +const FONT_MIN_REM = 0.78; +const FONT_MAX_REM = 1.7; export default function Genres() { const { t } = useTranslation(); const navigate = useNavigate(); const [rawGenres, setRawGenres] = useState([]); const [loading, setLoading] = useState(true); - const [visibleCount, setVisibleCount] = useState(() => { - // Restore the previous visibleCount when navigating back from a detail - // page so scroll position lines up with rendered cards. - const saved = sessionStorage.getItem(VISIBLE_KEY); - return saved ? Math.max(PAGE_SIZE, parseInt(saved, 10)) : PAGE_SIZE; - }); - const observerTarget = useRef(null); useEffect(() => { getGenres() .then(data => setRawGenres(data)) .finally(() => setLoading(false)); - }, []); // getGenres is not folder-scoped β€” no dep on musicLibraryFilterVersion + }, []); - // Memoised sort β€” without this the page re-sorted 500+ entries on every - // unrelated re-render (e.g. theme change, sidebar toggle). const genres = useMemo( () => [...rawGenres].sort((a, b) => b.albumCount - a.albumCount), [rawGenres], ); - const visible = useMemo(() => genres.slice(0, visibleCount), [genres, visibleCount]); - const hasMore = visibleCount < genres.length; + // Log-scale font sizing β€” flattens the long tail (a 1000-album genre and a + // 50-album genre look distinct, but a 1-album genre still has a readable size). + const maxLog = useMemo(() => { + if (genres.length === 0) return 1; + return Math.log(Math.max(2, genres[0].albumCount)); + }, [genres]); - // Infinite scroll β€” render the next batch when the user is ~1.5 screens - // away from the sentinel, so the rest of the watermarks never block first - // paint of the page. - useEffect(() => { - if (!hasMore) return; - const root = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID); - const observer = new IntersectionObserver( - entries => { if (entries[0].isIntersecting) setVisibleCount(c => c + PAGE_SIZE); }, - { - root: root instanceof HTMLElement ? root : null, - rootMargin: '1500px', - }, - ); - if (observerTarget.current) observer.observe(observerTarget.current); - return () => observer.disconnect(); - }, [hasMore]); - - // Restore scroll position after genres are rendered useEffect(() => { if (loading || genres.length === 0) return; const saved = sessionStorage.getItem(SCROLL_KEY); if (!saved) return; const pos = parseInt(saved, 10); sessionStorage.removeItem(SCROLL_KEY); - sessionStorage.removeItem(VISIBLE_KEY); requestAnimationFrame(() => { const el = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID); if (el) el.scrollTop = pos; @@ -110,10 +60,7 @@ export default function Genres() { const handleGenreClick = (genreValue: string) => { const el = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID); - if (el) { - sessionStorage.setItem(SCROLL_KEY, String(el.scrollTop)); - sessionStorage.setItem(VISIBLE_KEY, String(visibleCount)); - } + if (el) sessionStorage.setItem(SCROLL_KEY, String(el.scrollTop)); navigate(`/genres/${encodeURIComponent(genreValue)}`); }; @@ -132,36 +79,29 @@ export default function Genres() { {loading &&

{t('genres.loading')}

} {!loading && genres.length === 0 &&

{t('genres.empty')}

} - {!loading && visible.length > 0 && ( - <> -
- {visible.map(genre => { - const Icon = getGenreIcon(genre.value); - const color = genreColor(genre.value); - return ( -
handleGenreClick(genre.value)} - role="button" - tabIndex={0} - onKeyDown={e => e.key === 'Enter' && handleGenreClick(genre.value)} - data-tooltip={genre.value} - > -
- -
-

{genre.value}

-

- {t('genres.albumCount', { count: genre.albumCount })} -

-
- ); - })} -
- {hasMore &&
} - + {!loading && genres.length > 0 && ( +
+ {genres.map(genre => { + const ratio = Math.log(Math.max(2, genre.albumCount)) / maxLog; + const fontRem = FONT_MIN_REM + ratio * (FONT_MAX_REM - FONT_MIN_REM); + const color = genreColor(genre.value); + return ( + + ); + })} +
)}
); diff --git a/src/styles/components.css b/src/styles/components.css index 8d8368b6..9a9026c8 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -7144,55 +7144,41 @@ html.no-compositing .fs-seekbar-played { justify-content: flex-end; } -/* ─ Genre Cards ─ */ -.genre-card { - aspect-ratio: 1; - border-radius: 12px; - padding: 0.9rem; - cursor: pointer; - position: relative; - overflow: hidden; +/* ─ Genre Tag Cloud ─ */ +.genre-cloud { display: flex; - flex-direction: column; - justify-content: flex-end; - background: - linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, transparent 70%), - var(--genre-color, var(--accent)); - transition: transform 0.15s ease, box-shadow 0.15s ease; + flex-wrap: wrap; + align-items: center; + gap: 0.55rem 0.6rem; + padding-bottom: 1rem; +} + +.genre-pill { + appearance: none; + border: 1px solid color-mix(in srgb, var(--genre-color, var(--accent)) 22%, transparent); + background: color-mix(in srgb, var(--genre-color, var(--accent)) 6%, transparent); + color: var(--text-primary); + border-radius: 999px; + padding: 0.28em 0.78em; + cursor: pointer; + font-weight: 600; + line-height: 1.15; + white-space: nowrap; user-select: none; + font-family: inherit; + transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.12s ease; } -.genre-card:hover { - transform: translateY(-3px) scale(1.02); - box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32); +.genre-pill:hover { + background: color-mix(in srgb, var(--genre-color, var(--accent)) 14%, transparent); + border-color: color-mix(in srgb, var(--genre-color, var(--accent)) 45%, transparent); + color: var(--genre-color, var(--accent)); + transform: translateY(-1px); } -.genre-card-watermark { - position: absolute; - top: 50%; - right: -10px; - transform: translateY(-55%); - opacity: 0.22; - color: #fff; - pointer-events: none; -} - -.genre-card-name { - font-size: 0.86rem; - font-weight: 700; - color: #fff; - margin: 0; - line-height: 1.25; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; -} - -.genre-card-count { - font-size: 0.72rem; - color: rgba(255, 255, 255, 0.85); - margin: 0.2rem 0 0; +.genre-pill:focus-visible { + outline: 2px solid var(--genre-color, var(--accent)); + outline-offset: 2px; } /* ─ Random Landing ─ */ From 4a0bdfed92e22014334683db76971281618c6fa6 Mon Sep 17 00:00:00 2001 From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com> Date: Sun, 26 Apr 2026 00:42:44 +0200 Subject: [PATCH 5/7] chore(subsonic): log pingWithCredentials failures to console Server-switch silently returns { ok: false } when the upstream ping throws, so the user never sees why the switch refused. Surfacing the underlying error (timeout, network, CORS, 401) gives us something to work with the next time the issue reproduces. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/api/subsonic.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/api/subsonic.ts b/src/api/subsonic.ts index fef0f0f1..43a6366d 100644 --- a/src/api/subsonic.ts +++ b/src/api/subsonic.ts @@ -309,7 +309,8 @@ export async function pingWithCredentials( serverVersion: typeof data?.serverVersion === 'string' ? data.serverVersion : undefined, openSubsonic: data?.openSubsonic === true, }; - } catch { + } catch (err) { + console.warn('[psysonic] pingWithCredentials failed:', serverUrl, err); return { ok: false }; } } From ab1b1dcffad29334a8c3b279bfc8621e177543fe Mon Sep 17 00:00:00 2001 From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com> Date: Sun, 26 Apr 2026 01:32:17 +0200 Subject: [PATCH 6/7] fix(imageCache): give every cached its own object URL The previous design kept a single global Map with an LRU cap of 150 and aggressively revoked the oldest URL on overflow. On libraries with more than 150 cached covers (artist + album grids quickly exceed that), an in-use URL would get revoked because a different consumer pushed it out of the cache, producing the "Failed to load resource: blob:..." flood that several users have reported. Refactor the cache to be blob-centric: - Public API is now getCachedBlob() returning the Blob itself. - In-memory LRU now holds Blobs (cap 200), not URLs. Map-entry eviction drops the strong reference and lets the GC free the Blob once no consumer (object URL, , ) still holds it. No revoke choreography needed. - useCachedUrl creates its own URL.createObjectURL on blob arrival and revokes it on cleanup with a 500 ms grace delay so the DOM has time to finish decoding the URL we just took away. - All existing callers keep their string-returning API; no call-site changes outside the hook itself. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/CachedImage.tsx | 31 +++++++- src/components/FullscreenPlayer.tsx | 4 +- src/utils/imageCache.ts | 118 +++++++++++----------------- 3 files changed, 73 insertions(+), 80 deletions(-) diff --git a/src/components/CachedImage.tsx b/src/components/CachedImage.tsx index 9f534f55..3b46fbdc 100644 --- a/src/components/CachedImage.tsx +++ b/src/components/CachedImage.tsx @@ -1,12 +1,24 @@ import React, { useEffect, useRef, useState } from 'react'; -import { getCachedUrl } from '../utils/imageCache'; +import { getCachedBlob } from '../utils/imageCache'; interface CachedImageProps extends React.ImgHTMLAttributes { src: string; cacheKey: string; } +// Delay between the consumer dropping a cached URL and the actual revoke, +// giving the DOM time to finish its decode of the URL we just took +// away. 500 ms is comfortably above any realistic decode latency without +// being long enough to leak meaningful memory. +const URL_REVOKE_DELAY_MS = 500; + /** + * Returns an object URL for a cached image. Each call owns its own URL: it + * is created when the blob arrives and revoked (after a small grace delay) + * on cleanup. There is no shared URL pool β€” the previous global LRU caused + * "Failed to load resource" errors when an in-use URL got revoked because a + * different consumer pushed it out of the cache. + * * @param fallbackToFetch If true (default), returns the raw fetchUrl while the * blob is still resolving β€” useful for tags so the browser starts * loading immediately. Pass false for CSS background-image consumers that @@ -17,11 +29,22 @@ export function useCachedUrl(fetchUrl: string, cacheKey: string, fallbackToFetch useEffect(() => { if (!fetchUrl) { setResolved(''); return; } const controller = new AbortController(); + let createdUrl: string | null = null; setResolved(''); - getCachedUrl(fetchUrl, cacheKey, controller.signal).then(url => { - if (!controller.signal.aborted) setResolved(url); + getCachedBlob(fetchUrl, cacheKey, controller.signal).then(blob => { + if (controller.signal.aborted) return; + if (blob) { + createdUrl = URL.createObjectURL(blob); + setResolved(createdUrl); + } }); - return () => { controller.abort(); }; + return () => { + controller.abort(); + if (createdUrl) { + const url = createdUrl; + setTimeout(() => URL.revokeObjectURL(url), URL_REVOKE_DELAY_MS); + } + }; }, [fetchUrl, cacheKey]); return fallbackToFetch ? (resolved || fetchUrl) : resolved; } diff --git a/src/components/FullscreenPlayer.tsx b/src/components/FullscreenPlayer.tsx index 4d30cbee..53d681d4 100644 --- a/src/components/FullscreenPlayer.tsx +++ b/src/components/FullscreenPlayer.tsx @@ -7,7 +7,7 @@ import { import { usePlayerStore } from '../store/playerStore'; import { buildCoverArtUrl, coverArtCacheKey, getArtistInfo, star, unstar } from '../api/subsonic'; import { useCachedUrl } from './CachedImage'; -import { getCachedUrl } from '../utils/imageCache'; +import { getCachedBlob } from '../utils/imageCache'; import { extractCoverColors } from '../utils/dynamicColors'; import { useTranslation } from 'react-i18next'; import { useLyrics, type WordLyricsLine } from '../hooks/useLyrics'; @@ -740,7 +740,7 @@ export default function FullscreenPlayer({ onClose }: FullscreenPlayerProps) { if (!nextCoverArt) return; const url = buildCoverArtUrl(nextCoverArt, 300); const key = coverArtCacheKey(nextCoverArt, 300); - getCachedUrl(url, key).catch(() => {}); + getCachedBlob(url, key).catch(() => {}); }, [nextCoverArt]); // Lyrics settings popover state diff --git a/src/utils/imageCache.ts b/src/utils/imageCache.ts index c1fd6628..54bb0103 100644 --- a/src/utils/imageCache.ts +++ b/src/utils/imageCache.ts @@ -3,22 +3,18 @@ import { useAuthStore } from '../store/authStore'; const DB_NAME = 'psysonic-img-cache'; const STORE_NAME = 'images'; const MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000; // 30 days -const MAX_MEMORY_CACHE = 150; // max object URLs kept in RAM +const MAX_BLOB_CACHE = 200; // hot in-memory blob entries (LRU) const MAX_CONCURRENT_FETCHES = 5; -// In-memory map: cacheKey β†’ object URL (insertion-order = LRU approximation) -const objectUrlCache = new Map(); +// In-memory blob cache: cacheKey β†’ Blob (insertion-order = LRU approximation). +// Only the Map entry is dropped on overflow β€” the underlying Blob is freed by +// the GC once no //object URL still references it. Each consumer +// is responsible for its own URL.createObjectURL lifecycle. +const blobCache = new Map(); -// Concurrency limiter for network fetches. -// Each queue entry is a resolver that signals "slot acquired". let activeFetches = 0; const fetchQueue: Array<() => void> = []; -/** - * Acquires a fetch slot. Returns true if a slot was granted, false if the - * provided AbortSignal fired while the call was waiting in the queue (in that - * case no slot is held and the caller must NOT call releaseFetchSlot). - */ function acquireFetchSlot(signal?: AbortSignal): Promise { if (signal?.aborted) return Promise.resolve(false); if (activeFetches < MAX_CONCURRENT_FETCHES) { @@ -31,7 +27,6 @@ function acquireFetchSlot(signal?: AbortSignal): Promise { resolve(true); }; const onAbort = () => { - // Remove from queue without consuming a slot β€” no releaseFetchSlot needed. const idx = fetchQueue.indexOf(onGrant); if (idx !== -1) fetchQueue.splice(idx, 1); resolve(false); @@ -47,12 +42,13 @@ function releaseFetchSlot(): void { if (next) { activeFetches++; next(); } } -function evictMemoryIfNeeded(): void { - while (objectUrlCache.size > MAX_MEMORY_CACHE) { - const oldestKey = objectUrlCache.keys().next().value; - if (!oldestKey) break; - URL.revokeObjectURL(objectUrlCache.get(oldestKey)!); - objectUrlCache.delete(oldestKey); +function rememberBlob(key: string, blob: Blob): void { + blobCache.delete(key); // re-insert at end β†’ marks as recently used + blobCache.set(key, blob); + while (blobCache.size > MAX_BLOB_CACHE) { + const oldest = blobCache.keys().next().value; + if (!oldest) break; + blobCache.delete(oldest); } } @@ -79,7 +75,7 @@ function openDB(): Promise { return dbPromise; } -async function getBlob(key: string): Promise { +async function getBlobFromIDB(key: string): Promise { try { const database = await openDB(); return new Promise(resolve => { @@ -95,7 +91,6 @@ async function getBlob(key: string): Promise { } } -/** Evicts oldest IDB entries until total blob size is below maxBytes. Fire-and-forget. */ async function evictDiskIfNeeded(maxBytes: number): Promise { try { const database = await openDB(); @@ -116,7 +111,6 @@ async function evictDiskIfNeeded(maxBytes: number): Promise { let total = entries.reduce((acc, e) => acc + e.size, 0); if (total <= maxBytes) return; - // Oldest first entries.sort((a, b) => a.timestamp - b.timestamp); const tx = database.transaction(STORE_NAME, 'readwrite'); @@ -124,12 +118,7 @@ async function evictDiskIfNeeded(maxBytes: number): Promise { for (const entry of entries) { if (total <= maxBytes) break; store.delete(entry.key); - // Also purge from memory cache - const objUrl = objectUrlCache.get(entry.key); - if (objUrl) { - URL.revokeObjectURL(objUrl); - objectUrlCache.delete(entry.key); - } + blobCache.delete(entry.key); total -= entry.size; } } catch { @@ -146,7 +135,6 @@ async function putBlob(key: string, blob: Blob): Promise { tx.oncomplete = () => resolve(); tx.onerror = () => resolve(); }); - // Enforce disk limit after write (fire-and-forget) const maxBytes = useAuthStore.getState().maxCacheMb * 1024 * 1024; evictDiskIfNeeded(maxBytes); } catch { @@ -154,7 +142,6 @@ async function putBlob(key: string, blob: Blob): Promise { } } -/** Returns the total size in bytes of all blobs stored in IndexedDB. */ export async function getImageCacheSize(): Promise { try { const database = await openDB(); @@ -171,13 +158,8 @@ export async function getImageCacheSize(): Promise { } } -/** Removes a single cache entry from both in-memory and IndexedDB caches. */ export async function invalidateCacheKey(cacheKey: string): Promise { - const existing = objectUrlCache.get(cacheKey); - if (existing) { - URL.revokeObjectURL(existing); - objectUrlCache.delete(cacheKey); - } + blobCache.delete(cacheKey); try { const database = await openDB(); await new Promise(resolve => { @@ -191,22 +173,14 @@ export async function invalidateCacheKey(cacheKey: string): Promise { } } -/** - * Invalidates all cached sizes for a given cover art entity (artist, radio, playlist, album). - * Call this after uploading or deleting a cover image so the UI re-fetches from the server. - */ export async function invalidateCoverArt(entityId: string): Promise { const serverId = useAuthStore.getState().getActiveServer()?.id ?? '_'; const sizes = [40, 64, 128, 200, 256, 300, 500, 2000]; await Promise.all(sizes.map(size => invalidateCacheKey(`${serverId}:cover:${entityId}:${size}`))); } -/** Clears all entries from IndexedDB and revokes all in-memory object URLs. */ export async function clearImageCache(): Promise { - for (const url of objectUrlCache.values()) { - URL.revokeObjectURL(url); - } - objectUrlCache.clear(); + blobCache.clear(); try { const database = await openDB(); await new Promise(resolve => { @@ -221,49 +195,45 @@ export async function clearImageCache(): Promise { } /** - * Returns a cached object URL for an image. + * Returns the cached Blob for an image, fetching it if necessary. Callers own + * any object URL they create from the returned blob and must revoke it when + * done β€” there is no shared URL pool. + * * @param fetchUrl The actual URL to fetch from (may contain ephemeral auth params). * @param cacheKey A stable key that identifies the image across sessions. - * @param signal Optional AbortSignal β€” aborts queue-waiting and in-flight fetches - * so navigating away does not leave zombie fetches draining I/O. + * @param signal Optional AbortSignal β€” aborts queue-waiting and in-flight fetches. */ -export async function getCachedUrl(fetchUrl: string, cacheKey: string, signal?: AbortSignal): Promise { - if (!fetchUrl || signal?.aborted) return ''; +export async function getCachedBlob(fetchUrl: string, cacheKey: string, signal?: AbortSignal): Promise { + if (!fetchUrl || signal?.aborted) return null; - // 1. In-memory hit (same session) - const existing = objectUrlCache.get(cacheKey); - if (existing) return existing; - - // 2. IndexedDB hit (persisted from previous session) - const blob = await getBlob(cacheKey); - if (signal?.aborted) return ''; - if (blob) { - const objUrl = URL.createObjectURL(blob); - objectUrlCache.set(cacheKey, objUrl); - evictMemoryIfNeeded(); - return objUrl; + const memHit = blobCache.get(cacheKey); + if (memHit) { + rememberBlob(cacheKey, memHit); // refresh LRU position + return memHit; + } + + const idbHit = await getBlobFromIDB(cacheKey); + if (signal?.aborted) return null; + if (idbHit) { + rememberBlob(cacheKey, idbHit); + return idbHit; } - // 3. Network fetch with concurrency limit β†’ store in IDB β†’ return object URL. - // acquireFetchSlot returns false (without holding a slot) when aborted in queue. const acquired = await acquireFetchSlot(signal); if (!acquired || signal?.aborted) { if (acquired) releaseFetchSlot(); - return ''; + return null; } try { - const resp = await fetch(fetchUrl); - if (!resp.ok) return fetchUrl; + const resp = await fetch(fetchUrl, { signal }); + if (!resp.ok) return null; const newBlob = await resp.blob(); - if (signal?.aborted) return ''; - putBlob(cacheKey, newBlob); // fire-and-forget (includes disk eviction) - const objUrl = URL.createObjectURL(newBlob); - objectUrlCache.set(cacheKey, objUrl); - evictMemoryIfNeeded(); - return objUrl; - } catch (e) { - // AbortError β†’ return '' (component is gone). Other errors β†’ return raw URL. - return e instanceof DOMException && e.name === 'AbortError' ? '' : fetchUrl; + if (signal?.aborted) return null; + putBlob(cacheKey, newBlob); // fire-and-forget + rememberBlob(cacheKey, newBlob); + return newBlob; + } catch { + return null; } finally { releaseFetchSlot(); } From 77b2a5401a1e36435b651fe8ff60cc1ebd8eb523 Mon Sep 17 00:00:00 2001 From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com> Date: Sun, 26 Apr 2026 01:41:25 +0200 Subject: [PATCH 7/7] fix(queue): preserve scroll context when user clicks a track in the queue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Auto-scroll used to fire on every currentTrack change, including manual clicks inside the queue list itself. The clicked track would slide off screen as the list rebased onto the new "next track", which is disorienting β€” the user just acted on something specific and expects to keep seeing it. Set a one-shot suppression flag from the queue-item onClick handler so the immediately following auto-scroll effect skips its scrollIntoView call. Natural advance (track end, prev/next button, anything that does not originate inside the queue list) leaves the flag untouched and keeps the original "show what's coming next" behavior. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/QueuePanel.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/QueuePanel.tsx b/src/components/QueuePanel.tsx index 97140f32..b0249dd3 100644 --- a/src/components/QueuePanel.tsx +++ b/src/components/QueuePanel.tsx @@ -297,6 +297,12 @@ function QueuePanelHostOrSolo() { const enqueueAt = usePlayerStore(s => s.enqueueAt); const contextMenu = usePlayerStore(s => s.contextMenu); + // When the user picks a track *from* the queue list, suppress the + // upcoming auto-scroll so their click target stays in view instead of + // the list rebasing onto the next track. Auto-advance (natural playback) + // never sets this flag, so it keeps its original "show what's next" behavior. + const suppressNextAutoScrollRef = useRef(false); + const playbackSource = usePlayerStore(s => s.currentPlaybackSource); const crossfadeEnabled = useAuthStore(s => s.crossfadeEnabled); @@ -407,6 +413,10 @@ function QueuePanelHostOrSolo() { }, [enqueueAt]); useEffect(function queueAutoScroll() { + if (suppressNextAutoScrollRef.current) { + suppressNextAutoScrollRef.current = false; + return; + } if (!queueListRef.current || queueIndex < 0) return; if (activeTab !== 'queue') return; const songs = queueListRef.current!.querySelectorAll('[data-queue-idx]'); @@ -741,7 +751,10 @@ function QueuePanelHostOrSolo() {
playTrack(track, queue)} + onClick={() => { + suppressNextAutoScrollRef.current = true; + playTrack(track, queue); + }} onContextMenu={(e) => { e.preventDefault(); usePlayerStore.getState().openContextMenu(e.clientX, e.clientY, track, 'queue-item', idx);