feat(mobile): now playing indicator with animated eq bars (#14369)

## Summary
- Adds a now-playing indicator to track rows in playlist / track list
views on mobile
- Active track row now uses a subtle purple background tint
(`rgba(130,86,220,0.07)`) and a purple title color (`#8256DC`)
- While the track is playing, the artwork shows an animated equalizer
overlay (4 bars, `#CC5DE8`, height ~4→18px, staggered durations /
delays) using React Native `Animated` with `useNativeDriver: false`
- New reusable `AnimatedEqBars` component lives next to `TrackArtwork`
in `packages/mobile/src/components/track-list/`

The paused-but-active state (active row, not currently playing) still
shows the existing play-icon overlay — only the playing state swaps in
the equalizer animation.

## Files changed
- `packages/mobile/src/components/track-list/AnimatedEqBars.tsx` (new)
- `packages/mobile/src/components/track-list/TrackArtwork.tsx`
- `packages/mobile/src/components/track-list/TrackListItem.tsx`

## Test plan
- [ ] Open a playlist on iOS, tap a track to play it
  - [ ] That row gets a purple tint and the title turns purple
- [ ] Bars animate over the artwork (4 bars, anchored bottom-center,
staggered)
- [ ] Pause playback
- [ ] Row stays purple-tinted; artwork shows the play icon (no
animation)
- [ ] Skip to another track in the same list
- [ ] Indicator follows to the new row; old row reverts to default
styling
- [ ] Same checks on Android
- [ ] Reorderable playlist (drag mode): tinted row still renders
correctly
- [ ] Locked / unlisted / deleted tracks remain unaffected when not
active

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: dylanjeffers

packages/mobile/src/components/track-list/AnimatedEqBars.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useRef } from 'react'
+
+import { Animated, Easing, StyleSheet, View } from 'react-native'
+
+const BAR_COUNT = 4
+const BAR_MIN_HEIGHT = 4
+const BAR_MAX_HEIGHT = 18
+const BAR_COLOR = '#CC5DE8'
+
+const BAR_DURATIONS_MS = [520, 410, 640, 470]
+const BAR_DELAYS_MS = [0, 180, 90, 260]
+
+type AnimatedEqBarsProps = {
+  isPlaying: boolean
+}
+
+export const AnimatedEqBars = ({ isPlaying }: AnimatedEqBarsProps) => {
+  const heights = useRef(
+    Array.from({ length: BAR_COUNT }, () => new Animated.Value(BAR_MIN_HEIGHT))
+  ).current
+
+  useEffect(() => {
+    if (!isPlaying) {
+      heights.forEach((h) => h.stopAnimation())
+      return
+    }
+
+    const loops = heights.map((value, i) =>
+      Animated.loop(
+        Animated.sequence([
+          Animated.delay(BAR_DELAYS_MS[i]),
+          Animated.timing(value, {
+            toValue: BAR_MAX_HEIGHT,
+            duration: BAR_DURATIONS_MS[i],
+            easing: Easing.inOut(Easing.quad),
+            useNativeDriver: false
+          }),
+          Animated.timing(value, {
+            toValue: BAR_MIN_HEIGHT,
+            duration: BAR_DURATIONS_MS[i],
+            easing: Easing.inOut(Easing.quad),
+            useNativeDriver: false
+          })
+        ])
+      )
+    )
+
+    loops.forEach((loop) => loop.start())
+
+    return () => {
+      loops.forEach((loop) => loop.stop())
+    }
+  }, [isPlaying, heights])
+
+  return (
+    <View style={styles.container} pointerEvents='none'>
+      {heights.map((height, i) => (
+        <Animated.View key={i} style={[styles.bar, { height }]} />
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    gap: 3,
+    height: BAR_MAX_HEIGHT,
+    paddingBottom: 2
+  },
+  bar: {
+    width: 4,
+    borderRadius: 2,
+    backgroundColor: BAR_COLOR
+  }
+})

packages/mobile/src/components/track-list/TrackArtwork.tsx

@@ -2,16 +2,14 @@ import type { Track } from '@audius/common/models'
 import { SquareSizes } from '@audius/common/models'
 import { View } from 'react-native'
 
-import {
-  IconVisibilityHidden,
-  IconPause,
-  IconPlay
-} from '@audius/harmony-native'
+import { IconVisibilityHidden, IconPlay } from '@audius/harmony-native'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
 
 import { TrackImage } from '../image/TrackImage'
 
+import { AnimatedEqBars } from './AnimatedEqBars'
+
 type TrackArtworkProps = {
   track: Track
   isActive?: boolean
@@ -33,6 +31,14 @@ const useStyles = makeStyles(({ spacing }) => ({
     alignItems: 'center',
     borderRadius: 4,
     backgroundColor: 'rgba(0,0,0,0.4)'
+  },
+  nowPlayingOverlay: {
+    height: '100%',
+    width: '100%',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    borderRadius: 4,
+    backgroundColor: 'rgba(0,0,0,0.45)'
   }
 }))
 
@@ -41,8 +47,6 @@ export const TrackArtwork = (props: TrackArtworkProps) => {
   const styles = useStyles()
   const { staticWhite } = useThemeColors()
 
-  const ActiveIcon = isPlaying ? IconPause : IconPlay
-
   return (
     <TrackImage
       trackId={track.track_id}
@@ -54,9 +58,13 @@ export const TrackArtwork = (props: TrackArtworkProps) => {
           <IconVisibilityHidden fill={staticWhite} />
         </View>
       ) : null}
-      {isActive ? (
+      {isActive && isPlaying ? (
+        <View style={styles.nowPlayingOverlay}>
+          <AnimatedEqBars isPlaying={isPlaying} />
+        </View>
+      ) : isActive ? (
         <View style={styles.artworkIcon}>
-          <ActiveIcon color='white' style={{ opacity: 0.8 }} />
+          <IconPlay color='white' style={{ opacity: 0.8 }} />
         </View>
       ) : null}
     </TrackImage>

packages/mobile/src/components/track-list/TrackListItem.tsx

@@ -66,7 +66,7 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
     backgroundColor: palette.white
   },
   trackContainerActive: {
-    backgroundColor: palette.neutralLight9
+    backgroundColor: 'rgba(130,86,220,0.07)'
   },
   trackContainerDisabled: {
     backgroundColor: palette.neutralLight9
@@ -102,6 +102,9 @@ const useStyles = makeStyles(({ palette, spacing, typography }) => ({
     paddingTop: 2,
     color: palette.neutral
   },
+  trackTitleTextActive: {
+    color: '#8256DC'
+  },
   downloadIndicator: {
     marginLeft: spacing(1)
   },
@@ -405,11 +408,21 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
               <View style={styles.trackTitle}>
                 <Text
                   numberOfLines={1}
-                  style={[styles.trackTitleText, { maxWidth: titleMaxWidth }]}
+                  style={[
+                    styles.trackTitleText,
+                    isActive && styles.trackTitleTextActive,
+                    { maxWidth: titleMaxWidth }
+                  ]}
                 >
                   {title}
                 </Text>
-                <Text numberOfLines={1} style={[styles.trackTitleText]}>
+                <Text
+                  numberOfLines={1}
+                  style={[
+                    styles.trackTitleText,
+                    isActive && styles.trackTitleTextActive
+                  ]}
+                >
                   {messages.deleted}
                 </Text>
               </View>