HoneyandClaude Sonnet 4.6
76ecfe2268
player.js - Replace `_native()` function with `const HAS_BRIDGE` (evaluated once at module load so bridge detection is rock-solid) - Add `buildTrackList()` — maps S.queue to NSBridge Track array with 1024px artworkUrl so lock-screen cover is crisp on high-DPR displays - Add `_pushQueueIfBridge()` — called by `fillRadioQueue()` so radio top-ups are pushed to ExoPlayer in real time (fixes autoplay gap after radio refill) - `playQueue`: route through `NSBridge.setQueue` when bridge present; old `S.audio` path retained for browser/PWA fallback - `playCurrent`: `NSBridge.seekToIndex + play` in bridge mode - `nextSong / prevSong / togglePlay / onEnded`: delegate to bridge, skip local S.qIdx manipulation (native sends onTrackChanged callback instead) - `seekTo / _initBarScrub`: use `_lastDurationMs` for ms-accurate seeks - `onTrackChanged`: guard with `p.index !== S.qIdx` to avoid redundant redraws - `updateMediaSession`: artwork sizes 96/300/512 → 256/512/1024 - Player-bar cover: 100 → 256px; NP cover/bg: 400 → 1024px; queue items: 60 → 128px; preload hint sizes: 96/300/512 → 256/512/1024 main.js - Wrap watchdog setInterval in `typeof window.NSBridge === 'undefined'` guard; the foreground service keeps ExoPlayer alive — JS watchdog not needed there views.js - Album detail / playlist detail covers: 300 → 512px - Playlist grid cards: 200 → 512px - Search result song cards: 200 → 256px - Artist top-songs / all-songs thumbnails: 60 → 128px - Partial album art in _renderArtistAlbums: 300 → 512px components.js - makeAlbumCard: 200 → 512px - makeSongItem: 60 → 128px nowplaying.js - NP queue items: 60 → 128px - NP action sheet thumb: 80 → 256px sw.js - Bump CACHE to ns-v41 so stale small-cover entries are evicted on next load Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
NovaSonic
A self-hosted music streaming PWA for Navidrome / Subsonic-compatible servers.
Built with Vite + vanilla ES modules, served via nginx in Docker.
Features
- Stream music from your Navidrome / Subsonic library
- Browse artists, albums, playlists, starred tracks and random picks
- Queue management with shuffle, repeat (all / once) and radio mode (endless random)
- Now Playing overlay with swipe-to-dismiss and lock screen media controls (Android/iOS)
- iTunes / Last.fm integration — charts, global search, 30s previews, recommendations
- Download tracks from YouTube/SoundCloud via yt-dlp directly into your music library
- Duplicate detection — skips tracks that already exist on the server
- Edit playlists (name, description, cover art, public toggle)
- PWA — installable, offline-capable via service worker
- Dark theme, mobile-first responsive layout
Project Structure
Music_App/
├── src/ # ES modules (Vite entry)
│ ├── state.js # Shared mutable state (S object)
│ ├── utils.js # md5, esc, formatDur, toast
│ ├── api.js # Subsonic API, Navidrome REST, iTunes API
│ ├── player.js # Playback, transport, queue, media session, preview
│ ├── views.js # Navigation, page loaders, card makers, search
│ ├── ui.js # Modals, overlays, sidebar, settings, context menu
│ ├── pwa.js # Service worker registration + update banner
│ └── main.js # App init, audio wiring, window globals
├── public/ # Static assets (copied as-is to dist/)
│ ├── sw.js # Service worker
│ ├── manifest.json # PWA manifest
│ ├── icon.svg # App icon
│ └── config.js # Runtime config placeholder (generated by Docker)
├── backend/
│ └── novasonic-server.js # Node.js download backend (yt-dlp + ffmpeg)
├── index.html # App shell + Vite entry point
├── styles.css # All styles
├── vite.config.js
├── Dockerfile # Multi-stage: Node build → nginx serve
├── docker-compose.yml
├── nginx.conf
└── docker-entrypoint.sh # Injects NS_SERVER_URL / NS_BACKEND_URL at startup
Docker Setup
Frontend only
docker compose up -d
Environment variables (set in docker-compose.yml or via -e):
| Variable | Description |
|---|---|
NS_SERVER_URL |
Pre-fills the Navidrome server URL on the login screen |
NS_BACKEND_URL |
Pre-fills the download backend URL |
With download backend
The backend requires yt-dlp and ffmpeg. A separate docker-compose.yml lives in backend/.
cd backend
docker compose up -d
Environment variables for the backend:
| Variable | Default | Description |
|---|---|---|
PORT |
3700 |
Port the backend listens on |
MUSIC_PATH |
/music |
Path to your Navidrome music folder (mount as volume) |
AUDIO_FMT |
mp3 |
Output format (mp3, flac, opus, …) |
AUDIO_QUALITY |
0 |
yt-dlp audio quality (0 = best) |
MAX_PARALLEL |
2 |
Maximum concurrent downloads |
Development
npm install
npm run dev # Vite dev server with HMR
npm run build # Production build → dist/
npm run preview # Preview the production build locally
First Launch
- Open the app in a browser
- Enter your Navidrome server URL, username and password
- Optionally add a Last.fm API key (Settings) for recommendations and similar artists
- Optionally add the backend URL (Settings) to enable yt-dlp downloads