fix(ui): elapsed time for scans

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

ui/src/layout/ActivityPanel.jsx

@@ -21,6 +21,7 @@ import { GiMagnifyingGlass } from 'react-icons/gi'
 import subsonic from '../subsonic'
 import { scanStatusUpdate } from '../actions'
 import { useInterval } from '../common'
+import { useScanElapsedTime } from './useScanElapsedTime'
 import { formatDuration, formatShortDuration } from '../utils'
 import config from '../config'
 
@@ -70,6 +71,10 @@ const ActivityPanel = () => {
   const serverStart = useSelector((state) => state.activity.serverStart)
   const up = serverStart.startTime
   const scanStatus = useSelector((state) => state.activity.scanStatus)
+  const elapsed = useScanElapsedTime(
+    scanStatus.scanning,
+    scanStatus.elapsedTime,
+  )
   const classes = useStyles({ up: up && !scanStatus.error })
   const translate = useTranslate()
   const notify = useNotify()
@@ -178,7 +183,7 @@ const ActivityPanel = () => {
                 {translate('activity.elapsedTime')}:
               </Box>
               <Box component="span" flex={1}>
-                {formatShortDuration(scanStatus.elapsedTime)}
+                {formatShortDuration(elapsed)}
               </Box>
             </Box>
 

ui/src/layout/useScanElapsedTime.jsx

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+import { useInterval } from '../common'
+
+export const useScanElapsedTime = (scanning, elapsedTime) => {
+  const [elapsed, setElapsed] = useState(Number(elapsedTime) || 0)
+
+  useEffect(() => {
+    setElapsed(Number(elapsedTime) || 0)
+  }, [elapsedTime])
+
+  useInterval(() => setElapsed((prev) => prev + 1e9), scanning ? 1000 : null)
+
+  return elapsed
+}

ui/src/layout/useScanElapsedTime.test.jsx

@@ -0,0 +1,50 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { vi } from 'vitest'
+import { useScanElapsedTime } from './useScanElapsedTime'
+
+describe('useScanElapsedTime', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('increments elapsed time while scanning', () => {
+    const { result } = renderHook(
+      ({ scanning, elapsed }) => useScanElapsedTime(scanning, elapsed),
+      {
+        initialProps: { scanning: true, elapsed: 0 },
+      },
+    )
+
+    act(() => {
+      vi.advanceTimersByTime(3000)
+    })
+
+    expect(result.current).toBe(3e9)
+  })
+
+  it('stops incrementing when not scanning', () => {
+    const { result, rerender } = renderHook(
+      ({ scanning, elapsed }) => useScanElapsedTime(scanning, elapsed),
+      {
+        initialProps: { scanning: false, elapsed: 2e9 },
+      },
+    )
+
+    act(() => {
+      vi.advanceTimersByTime(2000)
+    })
+
+    expect(result.current).toBe(2e9)
+
+    rerender({ scanning: true, elapsed: 2e9 })
+    act(() => {
+      vi.advanceTimersByTime(1000)
+    })
+
+    expect(result.current).toBe(3e9)
+  })
+})