Fix mobile track artist centering

Author: raymondjacobson

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

@@ -5,14 +5,16 @@ import { useSelector } from 'react-redux'
 
 import { IconVolumeLevel2 } from '@audius/harmony-native'
 import { Text, FadeInView } from 'app/components/core'
-import { UserLink } from 'app/components/user-link'
+import { UserBadges } from 'app/components/user-badges'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles } from 'app/styles'
 import type { GestureResponderHandler } from 'app/types/gesture'
 import { useThemeColors } from 'app/utils/theme'
 
 import { LineupTileArt } from './LineupTileArt'
 import { LineupTileTopRight } from './LineupTileTopRight'
+import type { ArtistNameCollaborator } from './artistNames'
+import { getTrackArtistNames } from './artistNames'
 import { useStyles as useTileStyles } from './styles'
 import type { RenderImage } from './types'
 
@@ -27,6 +29,9 @@ const useStyles = makeStyles(({ palette }) => ({
   playingIndicator: {
     marginLeft: 8
   },
+  artistText: {
+    flexShrink: 1
+  },
   coSignLabel: {
     position: 'absolute',
     bottom: -3,
@@ -45,6 +50,8 @@ type Props = {
   renderImage: RenderImage
   title: string
   userId: ID
+  userName: string
+  collaborators?: ArtistNameCollaborator[] | null
   isPlayingUid: boolean
   type: 'track' | 'playlist' | 'album'
   trackId: ID
@@ -59,6 +66,8 @@ export const LineupTileMetadata = ({
   renderImage,
   title,
   userId,
+  userName,
+  collaborators,
   isPlayingUid,
   type,
   trackId,
@@ -72,6 +81,7 @@ export const LineupTileMetadata = ({
   const navigation = useNavigation()
 
   const isActive = isPlayingUid
+  const artistNames = getTrackArtistNames(userName, collaborators)
 
   const isPlaying = useSelector((state) => {
     return getPlaying(state) && isActive
@@ -139,15 +149,17 @@ export const LineupTileMetadata = ({
           onPressIn={onPressWithPropagationBlock}
           onPress={handlePressArtist}
           activeOpacity={0.7}
-          style={{ alignSelf: 'flex-start' }}
+          style={tileStyles.artist}
         >
-          <View pointerEvents='none'>
-            <UserLink
-              variant={isActive ? 'active' : 'default'}
-              textVariant='body'
-              userId={userId}
-            />
-          </View>
+          <Text
+            color={isActive ? 'primary' : 'neutral'}
+            numberOfLines={1}
+            ellipsizeMode='tail'
+            style={styles.artistText}
+          >
+            {artistNames}
+          </Text>
+          <UserBadges userId={userId} />
         </TouchableOpacity>
       </FadeInView>
       <LineupTileTopRight

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

@@ -85,6 +85,7 @@ const TrackTileComponent = (props: TrackTileProps) => {
       title: track.title,
       track_id: track.track_id,
       genre: track.genre,
+      collaborators: track.collaborators,
       stream_conditions: track.stream_conditions,
 
       ddex_app: track.ddex_app,
@@ -100,6 +101,7 @@ const TrackTileComponent = (props: TrackTileProps) => {
   const { data: user } = useUser(track?.owner_id, {
     select: (user) => ({
       artist_pick_track_id: user.artist_pick_track_id,
+      name: user.name,
       user_id: user.user_id,
       is_deactivated: user.is_deactivated
     })
@@ -309,6 +311,8 @@ const TrackTileComponent = (props: TrackTileProps) => {
           onPressWithPropagationBlock={handlePressWithPropagationBlock}
           title={track.title}
           userId={user.user_id}
+          userName={user.name}
+          collaborators={track.collaborators}
           isPlayingUid={isPlayingUid}
           type='track'
           trackId={track.track_id}

packages/mobile/src/components/lineup-tile/artistNames.test.ts

@@ -0,0 +1,19 @@
+import { getTrackArtistNames } from './artistNames'
+
+describe('getTrackArtistNames', () => {
+  it('combines owner and collaborator names', () => {
+    expect(
+      getTrackArtistNames('ray61626b', [{ name: 'dj g8r' }, { name: 'tim' }])
+    ).toBe('ray61626b, dj g8r, tim')
+  })
+
+  it('omits missing collaborator names', () => {
+    expect(
+      getTrackArtistNames('ray61626b', [
+        { name: null },
+        { name: undefined },
+        { name: 'dj g8r' }
+      ])
+    ).toBe('ray61626b, dj g8r')
+  })
+})

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

@@ -0,0 +1,14 @@
+export type ArtistNameCollaborator = {
+  name?: string | null
+}
+
+export const getTrackArtistNames = (
+  userName: string,
+  collaborators?: ArtistNameCollaborator[] | null
+) => {
+  const collaboratorNames =
+    collaborators?.map((collaborator) => collaborator.name).filter(Boolean) ??
+    []
+
+  return [userName, ...collaboratorNames].join(', ')
+}

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

@@ -56,6 +56,9 @@ export const useStyles = makeStyles(({ palette }) => ({
   },
   artist: {
     ...flexRowCentered(),
+    justifyContent: 'flex-start',
+    gap: spacing(1),
+    width: '100%',
     marginBottom: 'auto',
     paddingRight: spacing(10),
     minHeight: 20

packages/mobile/src/components/user-link/TrackArtists.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react-native'
+
+import { TrackArtists } from './TrackArtists'
+
+jest.mock(
+  '@audius/harmony-native',
+  () => {
+    const React = require('react')
+    const { Text, View } = require('react-native')
+
+    return {
+      Flex: ({ children, style }: any) =>
+        React.createElement(View, { style }, children),
+      Text: ({ children }: any) => React.createElement(Text, null, children)
+    }
+  },
+  { virtual: true }
+)
+
+jest.mock('./UserLink', () => {
+  const React = require('react')
+  const { Text } = require('react-native')
+
+  return {
+    UserLink: ({
+      hideBadges,
+      userId
+    }: {
+      hideBadges?: boolean
+      userId: number
+    }) =>
+      React.createElement(
+        Text,
+        null,
+        `${userId}:${hideBadges ? 'badges-hidden' : 'badges-visible'}`
+      )
+  }
+})
+
+describe('TrackArtists', () => {
+  it('hides inline badges so the artist names stay centered', () => {
+    render(<TrackArtists userId={1} collaborators={[{ user_id: 2 }]} />)
+
+    expect(screen.getByText('1:badges-hidden')).toBeOnTheScreen()
+    expect(screen.getByText('2:badges-hidden')).toBeOnTheScreen()
+    expect(screen.queryByText(/badges-visible/)).toBeNull()
+  })
+})

packages/mobile/src/components/user-link/TrackArtists.tsx

@@ -45,16 +45,19 @@ export const CollaboratorLinks = ({
   )
 }
 
-type TrackArtistsProps = Omit<ComponentProps<typeof UserLink>, 'style'> & {
+type TrackArtistsProps = Omit<
+  ComponentProps<typeof UserLink>,
+  'style' | 'hideBadges'
+> & {
   /** Accepted collaborator artists embedded on the track. */
   collaborators?: Collaborator[] | null
   style?: StyleProp<ViewStyle>
 }
 
 /**
- * A track's artist line for mobile: the owner `<UserLink>` plus accepted
- * collaborators. With the flag off (or no collaborators) it renders just the
- * owner — a safe drop-in for an existing owner `<UserLink>`.
+ * A track's centered artist line for mobile: the owner `<UserLink>` plus
+ * accepted collaborators. Inline user badges are omitted here so the names,
+ * rather than names plus badge width, stay visually centered.
  */
 export const TrackArtists = ({
   collaborators,
@@ -69,8 +72,12 @@ export const TrackArtists = ({
       w='100%'
       style={[styles.artistRow, style]}
     >
-      <UserLink {...userLinkProps} style={styles.artistLink} />
-      <CollaboratorLinks collaborators={collaborators} {...userLinkProps} />
+      <UserLink {...userLinkProps} hideBadges style={styles.artistLink} />
+      <CollaboratorLinks
+        collaborators={collaborators}
+        {...userLinkProps}
+        hideBadges
+      />
     </Flex>
   )
 }

packages/mobile/src/components/user-link/UserLink.tsx

@@ -24,6 +24,7 @@ type UserLinkProps = Omit<TextLinkProps<ParamList>, 'to' | 'children'> & {
   badgeSize?: IconSize
   textLinkStyle?: StyleProp<TextStyle>
   disabled?: boolean
+  hideBadges?: boolean
   hideFanClubBadge?: boolean
   mint?: string
 }
@@ -35,6 +36,7 @@ export const UserLink = (props: UserLinkProps) => {
     style,
     textLinkStyle,
     disabled,
+    hideBadges,
     hideFanClubBadge,
     mint,
     ...other
@@ -89,12 +91,14 @@ export const UserLink = (props: UserLinkProps) => {
         >
           {userName}
         </TextLink>
-        <UserBadges
-          userId={userId}
-          badgeSize={badgeSize}
-          mint={mint}
-          hideFanClubBadge={hideFanClubBadge}
-        />
+        {hideBadges ? null : (
+          <UserBadges
+            userId={userId}
+            badgeSize={badgeSize}
+            mint={mint}
+            hideFanClubBadge={hideFanClubBadge}
+          />
+        )}
       </AnimatedFlex>
     </Pressable>
   )

packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx

@@ -630,7 +630,6 @@ export const TrackScreenDetailsTile = ({
               userId={user.user_id}
               collaborators={collaborators}
               size='l'
-              badgeSize='s'
               style={{ justifyContent: 'center' }}
             />
           ) : null}