feat(ui): add Now Playing panel and integrate now playing count updates #4209
Conversation
This comment was marked as duplicate.
This comment was marked as duplicate.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Code Review
This pull request introduces a "Now Playing" panel to the UI, providing real-time updates on currently playing tracks across all users. The backend changes involve enhancing the play tracker to send NowPlayingCount events, and the frontend adds the NowPlayingPanel component with Material-UI, event stream handling for count updates, and responsive design.
Overall, the changes are well-implemented, particularly the backend event handling and the structure of the new UI component. The tests for both backend and frontend additions are comprehensive.
There are a couple of areas to consider for improvement:
- The conditional rendering of the
NowPlayingPanelin theAppBarseems to restrict its visibility to admins under a development flag, which might not align with the feature's goal of system-wide visibility. This should be clarified. - Error handling in the
fetchListmethod withinNowPlayingPanel.jsxcould be enhanced to provide better diagnostics during development or to inform the user if data fetching fails.
Signed-off-by: Deluan <deluan@navidrome.org>
…ndling Signed-off-by: Deluan <deluan@navidrome.org>
…layout Signed-off-by: Deluan <deluan@navidrome.org>
…garbage collection Signed-off-by: Deluan <deluan@navidrome.org>
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new “Now Playing” panel to the Navidrome UI that displays real‐time information about currently playing tracks, and it also integrates corresponding backend event updates. Key changes include updates to the cache with expiration callbacks, expanded event stream handling with a new nowPlayingCount event, and new frontend components and tests for the panel.
Reviewed Changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| utils/cache/simple_cache_test.go | Added tests for the OnExpiration callback in the cache |
| utils/cache/simple_cache.go | Added Len() and OnExpiration methods to the generic cache |
| ui/src/subsonic/index.js & index.test.js | Introduced getNowPlaying and getAvatarUrl with respective tests |
| ui/src/reducers/activityReducer(.js/.test.js) | Added nowPlayingCount support in Redux state and tests |
| ui/src/layout/NowPlayingPanel(.jsx/.test.jsx) | Implemented the main panel component with supporting tests |
| ui/src/layout/AppBar.jsx | Integrated the Now Playing panel into the admin’s app bar |
| ui/src/eventStream.js | Subscribed to nowPlayingCount events |
| ui/src/actions/serverEvents.js | Added action and event type for nowPlayingCount |
| server/events/events.go | Added a NowPlayingCount event type |
| core/scrobbler/play_tracker(.go/.test.go) | Updated play tracker to emit nowPlayingCount events on changes |
| i18n and translation files | Added new translation keys for the Now Playing panel |
Comments suppressed due to low confidence (1)
ui/src/layout/AppBar.jsx:123
- [nitpick] Consider using a more descriptive configuration flag (e.g., config.showNowPlayingPanel) to clearly indicate that the feature toggles the Now Playing panel rather than activity in general.
{config.devActivityPanel && permissions === 'admin' && (<NowPlayingPanel />)}
Summary
This PR adds a "Now Playing" panel to the Navidrome UI that displays currently playing tracks from all users. The panel shows real-time information about what music is being played across the system. This panel is only visible to admins.
Features
Technical Implementation
Backend Changes
NowPlayingCountevents via the event brokerFrontend Changes
NowPlayingPanelcomponent with Material-UI designKey Components
NowPlayingPanel.jsx: Main panel component with data fetching and display logicnowPlayingCounteventsTesting
Breaking Changes
None. This is a purely additive feature that doesn't modify existing functionality.