← Back to Articles
2026-05-25frontend

Audio player refactored to global Context state

  • Change: Per-viewer local audio state replaced by a single AudioPlayerProvider context wrapping the root layout. GlobalPlayerBar renders a persistent player bar at the bottom of every page. PlayerBarSpacer adds bottom padding to prevent content from being hidden behind it.
  • Why: Multiple pages (home fullscreen viewer, catalogue detail) need access to the same playing track; local state caused the player to reset on navigation.
  • Affected Modules: app/_component/audio-player-context.tsx, app/_component/global-player-bar.tsx, app/_component/player-bar.tsx, app/_component/player-bar-spacer.tsx, app/layout.tsx, app/catalogue/[id]/
  • Trade-offs:
    • Pro: Single source of truth for playback state; survives client-side navigation.
    • Con: Context lives in the root layout, so any component that calls useAudioPlayerContext() must be a client component nested inside AudioPlayerProvider; misuse will throw at runtime.