fix(ui): keep the NowPlayingPanel badge in sync.

Introduced a new event, EVENT_STREAM_RECONNECTED, to track the last
timestamp of stream reconnections. This change updates the activity
reducer to handle the new event and modifies the NowPlayingPanel to
refresh data based on server and stream status.

Signed-off-by: Deluan <deluan@navidrome.org>

ui/src/reducers/activityReducer.js

@@ -3,6 +3,7 @@ import {
   EVENT_SCAN_STATUS,
   EVENT_SERVER_START,
   EVENT_NOW_PLAYING_COUNT,
+  EVENT_STREAM_RECONNECTED,
 } from '../actions'
 import config from '../config'
 
@@ -16,6 +17,7 @@ const initialState = {
   },
   serverStart: { version: config.version },
   nowPlayingCount: 0,
+  streamReconnected: 0, // Timestamp of last reconnection
 }
 
 export const activityReducer = (previousState = initialState, payload) => {
@@ -44,6 +46,8 @@ export const activityReducer = (previousState = initialState, payload) => {
       }
     case EVENT_NOW_PLAYING_COUNT:
       return { ...previousState, nowPlayingCount: data.count }
+    case EVENT_STREAM_RECONNECTED:
+      return { ...previousState, streamReconnected: Date.now() }
     default:
       return previousState
   }

ui/src/reducers/activityReducer.test.js

@@ -3,6 +3,7 @@ import {
   EVENT_SCAN_STATUS,
   EVENT_SERVER_START,
   EVENT_NOW_PLAYING_COUNT,
+  EVENT_STREAM_RECONNECTED,
 } from '../actions'
 import config from '../config'
 
@@ -17,6 +18,7 @@ describe('activityReducer', () => {
     },
     serverStart: { version: config.version },
     nowPlayingCount: 0,
+    streamReconnected: 0,
   }
 
   it('returns the initial state when no action is specified', () => {
@@ -130,4 +132,17 @@ describe('activityReducer', () => {
     const newState = activityReducer(initialState, action)
     expect(newState.nowPlayingCount).toEqual(5)
   })
+
+  it('handles EVENT_STREAM_RECONNECTED', () => {
+    const action = {
+      type: EVENT_STREAM_RECONNECTED,
+      data: {},
+    }
+    const beforeTimestamp = Date.now()
+    const newState = activityReducer(initialState, action)
+    const afterTimestamp = Date.now()
+
+    expect(newState.streamReconnected).toBeGreaterThanOrEqual(beforeTimestamp)
+    expect(newState.streamReconnected).toBeLessThanOrEqual(afterTimestamp)
+  })
 })