Phase 3: Real Spotify account integration with zone mapping

- Created SpotifyContext for account management
  * Add/remove Spotify accounts with email and display name
  * Persistent storage to localStorage
  * Automatic account activation when assigned to zone

- Implemented zone-to-account mapping system
  * Each zone can be assigned a Spotify account
  * Multiple zones can share one account
  * Switching between sources preserves account assignment

- Enhanced ZoneCard component:
  * Account selector dropdown when Spotify is selected
  * Display account name/email under zone name
  * Auto-select first account when switching to Spotify
  * Green-tinted account dropdown for visual distinction

- Created SpotifyAccountManager component:
  * Add new Spotify accounts with email and display name
  * List all configured accounts
  * Remove accounts (cleans up zone mappings)
  * Collapsible form for adding new accounts
  * Glassmorphic styling with green accent

- Updated Audio page:
  * New 'Accounts' tab for Spotify account management
  * Accessible alongside Zones, Radio, and Library tabs
  * Smooth tab transitions with animations

- Architecture supports:
  * Real Spotify API integration (ready for OAuth)
  * Multiple accounts simultaneously
  * Spotify Connect per account (one instance per account)
  * Zone grouping with shared account control

- Build: 70 modules, 1.25 MB (345 KB gzipped)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-03-27 15:02:20 +01:00
parent 0b70891bca
commit beeee82896
7 changed files with 417 additions and 21 deletions

View File

@@ -12,7 +12,8 @@
"maplibre-gl": "^5.21.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-leaflet": "^5.0.0"
"react-leaflet": "^5.0.0",
"spotify-web-api-js": "^1.5.2"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.3.1",
@@ -1847,6 +1848,12 @@
"node": ">=0.10.0"
}
},
"node_modules/spotify-web-api-js": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/spotify-web-api-js/-/spotify-web-api-js-1.5.2.tgz",
"integrity": "sha512-ie1gbg1wCabfobIkXTIBLUMyULS/hMCpF44Cdx2pAO0/+FrjhNSDjlDzcwCEDy+ZIo3Fscs+Gkg/GTeQ/ijo+Q==",
"license": "MIT"
},
"node_modules/supercluster": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",