[Android] Some optimizations for lineup C-1348 (#2150)

* some optimiztions for lineup

* pr review

Co-authored-by: Nikki Kang <kangaroo233@gmail.com>

packages/common/src/store/lineup/actions.ts

@@ -177,13 +177,12 @@ export class LineupActions {
     }
   }
 
-  togglePlay(uid: UID, id: ID, source: PlaybackSource, isPlayingUid: boolean) {
+  togglePlay(uid: UID, id: ID, source: PlaybackSource) {
     return {
       type: addPrefix(this.prefix, TOGGLE_PLAY),
       uid,
       id,
-      source,
-      isPlayingUid
+      source
     }
   }
 

packages/mobile/src/components/lineup-tile/CollectionTile.tsx

@@ -136,10 +136,9 @@ const CollectionTileComponent = ({
     togglePlay({
       uid: currentTrack?.uid ?? tracks[0]?.uid ?? null,
       id: currentTrack?.track_id ?? tracks[0]?.track_id ?? null,
-      source: PlaybackSource.PLAYLIST_TILE_TRACK,
-      isPlayingUid
+      source: PlaybackSource.PLAYLIST_TILE_TRACK
     })
-  }, [currentTrack, togglePlay, tracks, isPlayingUid])
+  }, [currentTrack, togglePlay, tracks])
 
   const handlePressTitle = useCallback(() => {
     navigation.push('Collection', { id: playlist_id })

packages/mobile/src/components/lineup-tile/LineupTile.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 
-import type { CommonState } from '@audius/common'
-import { accountSelectors, playerSelectors } from '@audius/common'
+import { accountSelectors } from '@audius/common'
 import { Animated, Easing } from 'react-native'
 import { useSelector } from 'react-redux'
 
@@ -18,7 +17,6 @@ import { LineupTileRoot } from './LineupTileRoot'
 import { LineupTileStats } from './LineupTileStats'
 import { LineupTileTopRight } from './LineupTileTopRight'
 const getUserId = accountSelectors.getUserId
-const { getPlaying } = playerSelectors
 
 export const LineupTile = ({
   children,
@@ -30,7 +28,6 @@ export const LineupTile = ({
   id,
   imageUrl,
   index,
-  isPlayingUid,
   isTrending,
   isUnlisted,
   onLoad,
@@ -47,7 +44,8 @@ export const LineupTile = ({
   title,
   item,
   uid,
-  user
+  user,
+  isPlayingUid
 }: LineupTileProps) => {
   const {
     has_current_user_reposted,
@@ -58,10 +56,6 @@ export const LineupTile = ({
   const { _artist_pick, name, user_id } = user
   const currentUserId = useSelector(getUserId)
 
-  const isPlaying = useSelector(
-    (state: CommonState) => getPlaying(state) && isPlayingUid
-  )
-
   const [artworkLoaded, setArtworkLoaded] = useState(false)
 
   const opacity = useRef(new Animated.Value(0.5)).current
@@ -79,7 +73,7 @@ export const LineupTile = ({
         useNativeDriver: true
       }).start()
     }
-  }, [onLoad, isLoaded, index, opacity])
+  }, [onLoad, isLoaded, index, opacity, title])
 
   return (
     <LineupTileRoot onPress={onPress}>
@@ -101,10 +95,11 @@ export const LineupTile = ({
           coSign={coSign}
           imageUrl={imageUrl}
           onPressTitle={onPressTitle}
-          isPlaying={isPlaying}
           setArtworkLoaded={setArtworkLoaded}
+          uid={uid}
           title={title}
           user={user}
+          isPlayingUid={isPlayingUid}
         />
         {coSign ? <LineupTileCoSign coSign={coSign} /> : null}
         <LineupTileStats

packages/mobile/src/components/lineup-tile/LineupTileMetadata.tsx

@@ -1,7 +1,9 @@
 import { useCallback } from 'react'
 
-import type { Remix, User } from '@audius/common'
+import { playerSelectors } from '@audius/common'
+import type { Remix, User, UID, CommonState } from '@audius/common'
 import { TouchableOpacity, View } from 'react-native'
+import { useSelector } from 'react-redux'
 
 import IconVolume from 'app/assets/images/iconVolume.svg'
 import Text from 'app/components/text'
@@ -44,6 +46,7 @@ const useStyles = makeStyles(({ palette }) => ({
     textTransform: 'uppercase'
   }
 }))
+const { getPlaying } = playerSelectors
 
 const messages = {
   coSign: 'Co-Sign'
@@ -53,32 +56,36 @@ type Props = {
   artistName: string
   coSign?: Remix | null
   imageUrl?: string
-  isPlaying: boolean
   onPressTitle?: GestureResponderHandler
   setArtworkLoaded: (loaded: boolean) => void
   title: string
   user: User
+  uid: UID
+  isPlayingUid: boolean
 }
 
 export const LineupTileMetadata = ({
   artistName,
   coSign,
   imageUrl,
-  isPlaying,
   onPressTitle,
   setArtworkLoaded,
   title,
-  user
+  user,
+  isPlayingUid
 }: Props) => {
   const navigation = useNavigation()
   const styles = useStyles()
   const trackTileStyles = useTrackTileStyles()
   const { primary } = useThemeColors()
 
+  const isActive = useSelector(
+    (state: CommonState) => getPlaying(state) && isPlayingUid
+  )
+
   const handleArtistPress = useCallback(() => {
     navigation.push('Profile', { handle: user.handle })
   }, [navigation, user])
-
   return (
     <View style={styles.metadata}>
       <LineupTileArt
@@ -91,13 +98,13 @@ export const LineupTileMetadata = ({
         <TouchableOpacity style={trackTileStyles.title} onPress={onPressTitle}>
           <>
             <Text
-              style={[styles.titleText, isPlaying && styles.titlesActive]}
+              style={[styles.titleText, isActive && styles.titlesActive]}
               weight='bold'
               numberOfLines={1}
             >
               {title}
             </Text>
-            {!isPlaying ? null : (
+            {!isActive ? null : (
               <IconVolume fill={primary} style={styles.playingIndicator} />
             )}
           </>
@@ -108,7 +115,7 @@ export const LineupTileMetadata = ({
         >
           <>
             <Text
-              style={[styles.titleText, isPlaying && styles.titlesActive]}
+              style={[styles.titleText, isActive && styles.titlesActive]}
               weight='medium'
               numberOfLines={1}
             >

packages/mobile/src/components/lineup-tile/TrackTile.tsx

@@ -1,9 +1,8 @@
 import { useCallback } from 'react'
 
-import type { CommonState, Track, User } from '@audius/common'
+import type { Track, User, CommonState } from '@audius/common'
 import {
   removeNullable,
-  playerSelectors,
   PlaybackSource,
   FavoriteSource,
   RepostSource,
@@ -17,7 +16,8 @@ import {
   OverflowSource,
   mobileOverflowMenuUIActions,
   shareModalUIActions,
-  RepostType
+  RepostType,
+  playerSelectors
 } from '@audius/common'
 import { useNavigationState } from '@react-navigation/native'
 import { useDispatch, useSelector } from 'react-redux'
@@ -27,6 +27,7 @@ import { useNavigation } from 'app/hooks/useNavigation'
 import { useTrackCoverArt } from 'app/hooks/useTrackCoverArt'
 
 import { LineupTile } from './LineupTile'
+
 const { getUid } = playerSelectors
 const { requestOpen: requestOpenShareModal } = shareModalUIActions
 const { open: openOverflowMenu } = mobileOverflowMenuUIActions
@@ -97,10 +98,9 @@ const TrackTileComponent = ({
     togglePlay({
       uid: lineupTileProps.uid,
       id: track_id,
-      source: PlaybackSource.TRACK_TILE,
-      isPlayingUid
+      source: PlaybackSource.TRACK_TILE
     })
-  }, [togglePlay, lineupTileProps.uid, track_id, isPlayingUid])
+  }, [togglePlay, lineupTileProps.uid, track_id])
 
   const handlePressTitle = useCallback(() => {
     navigation.push('Track', { id: track_id })
@@ -166,8 +166,8 @@ const TrackTileComponent = ({
   return (
     <LineupTile
       {...lineupTileProps}
-      isPlayingUid={isPlayingUid}
       duration={duration}
+      isPlayingUid={isPlayingUid}
       favoriteType={FavoriteType.TRACK}
       repostType={RepostType.TRACK}
       hideShare={hideShare}

packages/mobile/src/components/lineup-tile/types.ts

@@ -33,12 +33,7 @@ export type LineupItemProps = {
   showRankIcon?: boolean
 
   /** Function that will toggle play of a track */
-  togglePlay: (args: {
-    uid: UID
-    id: ID
-    source: PlaybackSource
-    isPlayingUid: boolean
-  }) => void
+  togglePlay: (args: { uid: UID; id: ID; source: PlaybackSource }) => void
 
   /** Uid of the item */
   uid: UID
@@ -68,9 +63,6 @@ export type LineupTileProps = Omit<LineupItemProps, 'togglePlay'> & {
   /** Url of the image */
   imageUrl?: string
 
-  /** Does the tile uid match the playing uid */
-  isPlayingUid: boolean
-
   /** The item (track or collection) */
   item: Track | Collection
 
@@ -103,4 +95,7 @@ export type LineupTileProps = Omit<LineupItemProps, 'togglePlay'> & {
 
   /** User associated with the item */
   user: User
+
+  /** Does the tile uid match the playing uid */
+  isPlayingUid: boolean
 }