[C-2365] Update play buttons on web and mobile to show resume when tr…

…ack is current (#3101)

packages/mobile/src/components/details-tile/DetailsTile.tsx

@@ -1,12 +1,13 @@
 import { useCallback } from 'react'
 
-import type { Track } from '@audius/common'
+import type { CommonState, Track } from '@audius/common'
 import {
   FeatureFlags,
   Genre,
   usePremiumContentAccess,
   squashNewLines,
   accountSelectors,
+  playerSelectors,
   playbackPositionSelectors
 } from '@audius/common'
 import { TouchableOpacity, View } from 'react-native'
@@ -38,6 +39,7 @@ import { DetailsTileNoAccess } from './DetailsTileNoAccess'
 import { DetailsTileStats } from './DetailsTileStats'
 import type { DetailsTileProps } from './types'
 
+const { getTrackId } = playerSelectors
 const { getTrackPosition } = playbackPositionSelectors
 
 const messages = {
@@ -220,6 +222,9 @@ export const DetailsTile = ({
   const navigation = useNavigation()
 
   const currentUserId = useSelector(accountSelectors.getUserId)
+  const isCurrentTrack = useSelector((state: CommonState) => {
+    return track && track.track_id === getTrackId(state)
+  })
 
   const isOwner = user?.user_id === currentUserId
   const isLongFormContent =
@@ -295,13 +300,15 @@ export const DetailsTile = ({
 
   const playText =
     isNewPodcastControlsEnabled && playbackPositionInfo?.status
-      ? playbackPositionInfo?.status === 'IN_PROGRESS'
+      ? playbackPositionInfo?.status === 'IN_PROGRESS' || isCurrentTrack
         ? messages.resume
         : messages.replay
       : messages.play
 
   const PlayIcon =
-    isNewPodcastControlsEnabled && playbackPositionInfo?.status === 'COMPLETED'
+    isNewPodcastControlsEnabled &&
+    playbackPositionInfo?.status === 'COMPLETED' &&
+    !isCurrentTrack
       ? IconRepeat
       : IconPlay
 

packages/web/src/components/track/PlayPauseButton.tsx

@@ -1,6 +1,7 @@
 import {
   FeatureFlags,
   ID,
+  playerSelectors,
   playbackPositionSelectors,
   CommonState
 } from '@audius/common'
@@ -12,6 +13,7 @@ import { useFlag } from 'hooks/useRemoteConfig'
 
 import styles from './GiantTrackTile.module.css'
 
+const { getTrackId } = playerSelectors
 const { getTrackPosition } = playbackPositionSelectors
 
 type PlayPauseButtonProps = {
@@ -45,16 +47,21 @@ export const PlayPauseButton = ({
   const trackPlaybackInfo = useSelector((state: CommonState) =>
     getTrackPosition(state, { trackId })
   )
+  const isCurrentTrack = useSelector(
+    (state: CommonState) => trackId === getTrackId(state)
+  )
 
   const playText =
     isNewPodcastControlsEnabled && trackPlaybackInfo
-      ? trackPlaybackInfo.status === 'IN_PROGRESS'
+      ? trackPlaybackInfo.status === 'IN_PROGRESS' || isCurrentTrack
         ? messages.resume
         : messages.replay
       : messages.play
 
   const playIcon =
-    isNewPodcastControlsEnabled && trackPlaybackInfo?.status === 'COMPLETED' ? (
+    isNewPodcastControlsEnabled &&
+    trackPlaybackInfo?.status === 'COMPLETED' &&
+    !isCurrentTrack ? (
       <IconRepeat />
     ) : (
       <IconPlay />