feat(mobile): dense track rows on catalog lineups behind track_rows

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

@@ -0,0 +1,253 @@
+import { memo, useCallback, useContext } from 'react'
+
+import { useCurrentUserId, useTrack, useUser } from '@audius/common/api'
+import { useGatedTrackAccess } from '@audius/common/hooks'
+import {
+  ModalSource,
+  PlaybackSource,
+  SquareSizes,
+  isContentUSDCPurchaseGated
+} from '@audius/common/models'
+import {
+  PurchaseableContentType,
+  gatedContentActions,
+  playbackPositionSelectors,
+  playbackSelectors,
+  usePremiumContentPurchaseModal
+} from '@audius/common/store'
+import type { CommonState } from '@audius/common/store'
+import { Genre, formatLineupTileDuration } from '@audius/common/utils'
+import { View } from 'react-native'
+import { useDispatch, useSelector } from 'react-redux'
+
+import {
+  Flex,
+  IconPin,
+  IconPlay,
+  IconText,
+  Text,
+  TrackRow
+} from '@audius/harmony-native'
+import { LineupContext } from 'app/components/lineup/LineupContext'
+import type { TrackTileProps } from 'app/components/lineup-tile/types'
+import { AnimatedEqBars } from 'app/components/track-list/AnimatedEqBars'
+import { UserBadges } from 'app/components/user-badges'
+import * as haptics from 'app/haptics'
+import { useIsUSDCEnabled } from 'app/hooks/useIsUSDCEnabled'
+import { setVisibility } from 'app/store/drawers/slice'
+
+import { TrackImage } from '../image/TrackImage'
+
+import { LineupTileAccessStatus } from './LineupTileAccessStatus'
+import { useOpenTrackOverflow } from './useOpenTrackOverflow'
+
+const { getTrackId, getPlaying } = playbackSelectors
+const { getTrackPosition } = playbackPositionSelectors
+const { setLockedContentId } = gatedContentActions
+
+const messages = {
+  artistPick: 'Artist Pick',
+  timeLeft: 'left',
+  played: 'Played',
+  play: (title: string) => `Play ${title}`,
+  pause: (title: string) => `Pause ${title}`
+}
+
+const overlayStyle = {
+  position: 'absolute' as const,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  // Above Artwork's image, which sets zIndex 2
+  zIndex: 3,
+  alignItems: 'center' as const,
+  backgroundColor: 'rgba(0,0,0,0.45)'
+}
+
+const TrackRowTileComponent = (props: TrackTileProps) => {
+  const {
+    id,
+    uid,
+    index,
+    isTrending,
+    togglePlay,
+    onPress,
+    showArtistPick = false,
+    source
+  } = props
+
+  const dispatch = useDispatch()
+  const { isOnArtistsTracksTab } = useContext(LineupContext)
+  const { data: currentUserId } = useCurrentUserId()
+  const { onOpen: openPremiumContentPurchaseModal } =
+    usePremiumContentPurchaseModal()
+  const isUSDCEnabled = useIsUSDCEnabled()
+  const { hasStreamAccess } = useGatedTrackAccess(id)
+
+  const { data: track } = useTrack(id, {
+    select: (track) => ({
+      track_id: track.track_id,
+      title: track.title,
+      owner_id: track.owner_id,
+      duration: track.duration,
+      genre: track.genre,
+      stream_conditions: track.stream_conditions,
+      preview_cid: track.preview_cid,
+      is_delete: track.is_delete
+    })
+  })
+  const { data: user } = useUser(track?.owner_id, {
+    select: (user) => ({
+      name: user.name,
+      artist_pick_track_id: user.artist_pick_track_id,
+      is_deactivated: user.is_deactivated
+    })
+  })
+
+  const isActive = useSelector((state: CommonState) => getTrackId(state) === id)
+  const isPlaying = useSelector(
+    (state: CommonState) => getTrackId(state) === id && getPlaying(state)
+  )
+  const playbackPosition = useSelector((state) =>
+    getTrackPosition(state, { trackId: id, userId: currentUserId })
+  )
+
+  const handlePressOverflow = useOpenTrackOverflow(id, {
+    includeSocial: true,
+    hideViewArtist: isOnArtistsTracksTab
+  })
+
+  const handleLongPress = useCallback(() => {
+    haptics.medium()
+    handlePressOverflow()
+  }, [handlePressOverflow])
+
+  const handlePress = useCallback(() => {
+    if (!track) return
+    const isStreamGated = !!track.stream_conditions
+    if (isStreamGated && !hasStreamAccess && !track.preview_cid) {
+      if (
+        isUSDCEnabled &&
+        isContentUSDCPurchaseGated(track.stream_conditions)
+      ) {
+        openPremiumContentPurchaseModal(
+          {
+            contentId: track.track_id,
+            contentType: PurchaseableContentType.TRACK
+          },
+          { source: ModalSource.LineUpTrackTile }
+        )
+      } else {
+        dispatch(setLockedContentId({ id: track.track_id }))
+        dispatch(setVisibility({ drawer: 'LockedContent', visible: true }))
+      }
+      return
+    }
+    togglePlay({ uid, id: track.track_id, source: PlaybackSource.TRACK_TILE })
+    onPress?.(track.track_id)
+  }, [
+    track,
+    hasStreamAccess,
+    isUSDCEnabled,
+    openPremiumContentPurchaseModal,
+    dispatch,
+    togglePlay,
+    uid,
+    onPress
+  ])
+
+  const rank = isTrending && index !== undefined ? index + 1 : undefined
+
+  if (!track || !user) return <TrackRow isLoading rank={rank} />
+  if (track.is_delete || user.is_deactivated) return null
+
+  const isOwner = currentUserId === track.owner_id
+  const isLocked = !!track.stream_conditions && !hasStreamAccess && !isOwner
+  const isLongForm =
+    track.genre === Genre.Podcasts || track.genre === Genre.Audiobooks
+
+  const duration = !track.duration
+    ? undefined
+    : isLongForm && playbackPosition?.status === 'COMPLETED'
+      ? messages.played
+      : isLongForm && playbackPosition?.status === 'IN_PROGRESS'
+        ? `${formatLineupTileDuration(
+            track.duration - playbackPosition.playbackPosition,
+            true
+          )} ${messages.timeLeft}`
+        : formatLineupTileDuration(track.duration, isLongForm)
+
+  const isArtistPick =
+    showArtistPick && user.artist_pick_track_id === track.track_id
+
+  return (
+    <TrackRow
+      rank={rank}
+      artwork={
+        <>
+          <TrackImage
+            trackId={track.track_id}
+            size={SquareSizes.SIZE_150_BY_150}
+            style={{ width: 48, height: 48 }}
+          />
+          {isActive ? (
+            <View
+              pointerEvents='none'
+              style={[
+                overlayStyle,
+                { justifyContent: isPlaying ? 'flex-end' : 'center' }
+              ]}
+            >
+              {isPlaying ? (
+                <AnimatedEqBars isPlaying />
+              ) : (
+                <IconPlay color='white' size='m' />
+              )}
+            </View>
+          ) : null}
+        </>
+      }
+      title={track.title}
+      subtitle={
+        <Flex row alignItems='center' gap='xs'>
+          <Text
+            variant='body'
+            size='s'
+            color='subdued'
+            numberOfLines={1}
+            style={{ flexShrink: 1 }}
+          >
+            {user.name}
+          </Text>
+          <UserBadges userId={track.owner_id} badgeSize='xs' />
+        </Flex>
+      }
+      context={
+        isArtistPick ? (
+          <IconText icons={[{ icon: IconPin }]}>{messages.artistPick}</IconText>
+        ) : undefined
+      }
+      status={
+        isLocked && track.stream_conditions ? (
+          <LineupTileAccessStatus
+            contentId={track.track_id}
+            contentType={PurchaseableContentType.TRACK}
+            streamConditions={track.stream_conditions}
+            hasStreamAccess={hasStreamAccess}
+            source={source}
+          />
+        ) : undefined
+      }
+      duration={duration}
+      isActive={isActive}
+      onPress={handlePress}
+      onLongPress={handleLongPress}
+      accessibilityLabel={
+        isPlaying ? messages.pause(track.title) : messages.play(track.title)
+      }
+    />
+  )
+}
+
+export const TrackRowTile = memo(TrackRowTileComponent)

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

@@ -18,20 +18,16 @@ import {
 } from '@audius/common/models'
 import {
   tracksSocialActions,
-  mobileOverflowMenuUIActions,
   shareModalUIActions,
-  OverflowAction,
-  OverflowSource,
   playbackSelectors,
-  playbackPositionSelectors,
   trackPageActions,
   PurchaseableContentType,
   gatedContentActions,
   usePremiumContentPurchaseModal,
   usePublishConfirmationModal
 } from '@audius/common/store'
 import type { CommonState } from '@audius/common/store'
-import { Genre, removeNullable } from '@audius/common/utils'
+import { Genre } from '@audius/common/utils'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { Paper, type ImageProps } from '@audius/harmony-native'
@@ -48,12 +44,11 @@ import { LineupTileActionButtons } from './LineupTileActionButtons'
 import { LineupTileMetadata } from './LineupTileMetadata'
 import { TilePressBlockContext } from './TilePressBlockContext'
 import { TrackTileStats } from './TrackTileStats'
+import { useOpenTrackOverflow } from './useOpenTrackOverflow'
 
 const { getTrackId } = playbackSelectors
 const { requestOpen: requestOpenShareModal } = shareModalUIActions
-const { open: openOverflowMenu } = mobileOverflowMenuUIActions
 const { repostTrack, undoRepostTrack } = tracksSocialActions
-const { getTrackPosition } = playbackPositionSelectors
 const { setLockedContentId } = gatedContentActions
 
 const TrackTileComponent = (props: TrackTileProps) => {
@@ -195,60 +190,9 @@ const TrackTileComponent = (props: TrackTileProps) => {
     childPressedRef.current = true
   }, [])
 
-  const playbackPositionInfo = useSelector((state) =>
-    getTrackPosition(state, {
-      trackId: track?.track_id ?? 0,
-      userId: currentUserId
-    })
-  )
-
-  const handlePressOverflow = useCallback(() => {
-    if (!track) return
-    const isLongFormContent =
-      track.genre === Genre.Podcasts || track.genre === Genre.Audiobooks
-    const isOwner = currentUserId === track.owner_id
-    const isArtistPick =
-      isOwner && user?.artist_pick_track_id === track.track_id
-
-    const overflowActions = [
-      !track.is_unlisted || isOwner ? OverflowAction.PLAY_NEXT : null,
-      !track.is_unlisted || isOwner ? OverflowAction.ADD_TO_QUEUE : null,
-      isOwner && !track.ddex_app ? OverflowAction.ADD_TO_ALBUM : null,
-      !track.is_unlisted || isOwner ? OverflowAction.ADD_TO_PLAYLIST : null,
-      isLongFormContent
-        ? OverflowAction.VIEW_EPISODE_PAGE
-        : OverflowAction.VIEW_TRACK_PAGE,
-      track.album_backlink ? OverflowAction.VIEW_ALBUM_PAGE : null,
-      isLongFormContent
-        ? playbackPositionInfo?.status === 'COMPLETED'
-          ? OverflowAction.MARK_AS_UNPLAYED
-          : OverflowAction.MARK_AS_PLAYED
-        : null,
-      isOwner && !isArtistPick ? OverflowAction.SET_ARTIST_PICK : null,
-      isArtistPick ? OverflowAction.UNSET_ARTIST_PICK : null,
-      isOnArtistsTracksTab ? null : OverflowAction.VIEW_ARTIST_PAGE,
-      isOwner && !track.ddex_app ? OverflowAction.EDIT_TRACK : null,
-      isOwner && track?.is_scheduled_release && track?.is_unlisted
-        ? OverflowAction.RELEASE_NOW
-        : null,
-      isOwner && !track.ddex_app ? OverflowAction.DELETE_TRACK : null
-    ].filter(removeNullable)
-
-    dispatch(
-      openOverflowMenu({
-        source: OverflowSource.TRACKS,
-        id: track.track_id,
-        overflowActions
-      })
-    )
-  }, [
-    track,
-    currentUserId,
-    user?.artist_pick_track_id,
-    isOnArtistsTracksTab,
-    playbackPositionInfo?.status,
-    dispatch
-  ])
+  const handlePressOverflow = useOpenTrackOverflow(id, {
+    hideViewArtist: isOnArtistsTracksTab
+  })
 
   const handlePressShare = useCallback(() => {
     if (!track) return

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

@@ -2,3 +2,4 @@ export { CollectionTile } from './CollectionTile'
 export { CollectionTileSkeleton } from './CollectionTileSkeleton'
 export { LineupTileSkeleton } from './LineupTileSkeleton'
 export { TrackTile } from './TrackTile'
+export { TrackRowTile } from './TrackRowTile'