feat(web): ping last_active_at on page load and tab focus

packages/mobile/src/hooks/useActivityPing.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import { useCurrentUserId, useQueryContext } from '@audius/common/api'
 
@@ -9,18 +9,24 @@ export const useActivityPing = () => {
   const { data: currentUserId } = useCurrentUserId()
   const { audiusSdk } = useQueryContext()
 
-  useEnterForeground(
-    useCallback(async () => {
-      if (!currentUserId) return
-      try {
-        const sdk = await audiusSdk()
-        await audiusBackendInstance.pingActivity({
-          sdk,
-          userId: currentUserId
-        })
-      } catch {
-        // Fire-and-forget
-      }
-    }, [currentUserId, audiusSdk])
-  )
+  const pingActivity = useCallback(async () => {
+    if (!currentUserId) return
+    try {
+      const sdk = await audiusSdk()
+      await audiusBackendInstance.pingActivity({
+        sdk,
+        userId: currentUserId
+      })
+    } catch {
+      // Fire-and-forget
+    }
+  }, [currentUserId, audiusSdk])
+
+  // Ping on initial app open (AppState starts as 'active' with no transition)
+  useEffect(() => {
+    pingActivity()
+  }, [pingActivity])
+
+  // Ping on subsequent foreground transitions
+  useEnterForeground(pingActivity)
 }

packages/web/src/app/web-player/WebPlayer.tsx

@@ -67,6 +67,7 @@
 import { RewardClaimedToast } from 'components/reward-claimed-toast/RewardClaimedToast'
 import { USDCBalanceFetcher } from 'components/usdc-balance-fetcher/USDCBalanceFetcher'
 import { useEnvironment } from 'hooks/useEnvironment'
+import { useActivityPing } from 'hooks/useActivityPing'
 import { usePlaybackPositionPersistence } from 'hooks/usePlaybackPositionPersistence'
 import { usePlaybackPositionPolling } from 'hooks/usePlaybackPositionPolling'
 import { usePlaybackRatePersistence } from 'hooks/usePlaybackRatePersistence'
@@ -498,6 +499,7 @@
   const frostedSurfaceIntensity =
     useSelector(getFrostedSurfaceIntensity) ?? FrostedSurfaceIntensity.DEFAULT
 
+  useActivityPing()
   usePlaybackRatePersistence()
   usePlaybackPositionPersistence()
   usePlaybackPositionPolling()

packages/web/src/hooks/useActivityPing.ts

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+import { useCurrentUserId, useQueryContext } from '@audius/common/api'
+
+import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance'
+
+const PING_DEBOUNCE_MS = 5 * 60 * 1000
+
+export const useActivityPing = () => {
+  const { data: currentUserId } = useCurrentUserId()
+  const { audiusSdk } = useQueryContext()
+  const lastPingRef = useRef(0)
+
+  const pingActivity = useCallback(async () => {
+    if (!currentUserId) return
+    const now = Date.now()
+    if (now - lastPingRef.current < PING_DEBOUNCE_MS) return
+    lastPingRef.current = now
+    try {
+      const sdk = await audiusSdk()
+      await audiusBackendInstance.pingActivity({
+        sdk,
+        userId: currentUserId
+      })
+    } catch {
+      // Fire-and-forget
+    }
+  }, [currentUserId, audiusSdk])
+
+  // Ping on initial page load
+  useEffect(() => {
+    pingActivity()
+  }, [pingActivity])
+
+  // Ping when tab becomes visible again
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        pingActivity()
+      }
+    }
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [pingActivity])
+}