Search explore milestone 2: for you, recent premium, best selling

packages/common/src/api/index.ts

@@ -29,6 +29,7 @@ export * from './tan-query/events'
 
 // Explore
 export * from './tan-query/collection/useExploreContent'
+export * from './tan-query/explore/useBestSelling'
 
 // Lineups
 export * from './tan-query/lineups/useFeed'
@@ -95,6 +96,8 @@ export * from './tan-query/tracks/useFileSizes'
 export * from './tan-query/tracks/useTrackFileInfo'
 export * from './tan-query/tracks/useUpdateTrack'
 export * from './tan-query/tracks/useRemixedTracks'
+export * from './tan-query/tracks/useRecommendedTracks'
+export * from './tan-query/tracks/useRecentPremiumTracks'
 export * from './tan-query/tracks/useSuggestedPlaylistTracks'
 
 // Users

packages/common/src/api/tan-query/explore/useBestSelling.ts

@@ -0,0 +1,70 @@
+import { HashId, Id, BestSellingItem } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userCollectionMetadataFromSDK } from '~/adapters'
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import {
+ primeCollectionData,
+ primeTrackData,
+ useQueryContext
+} from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseBestSellingArgs = {
+ userId: ID | null | undefined
+}
+
+export type BestSellingItemWithId = BestSellingItem & { id: ID }
+
+export const getBestSellingQueryKey = ({ userId }: UseBestSellingArgs) => {
+ return [QUERY_KEYS.bestSellingAlbums, userId] as unknown as QueryKey<
+ BestSellingItemWithId[]
+ >
+}
+
+export const useBestSelling = <TResult = BestSellingItemWithId[]>(
+ options?: SelectableQueryOptions<BestSellingItemWithId[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+ return useQuery({
+ queryKey: getBestSellingQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [], related = {} } =
+ await sdk.full.explore.getFullBestSelling({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(
+ related?.tracks,
+ userTrackMetadataFromSDK
+ )
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ const playlists = transformAndCleanList(
+ related?.playlists,
+ userCollectionMetadataFromSDK
+ )
+
+ primeCollectionData({
+ collections: playlists,
+ queryClient
+ })
+
+ return data.map((item) => ({ ...item, id: HashId.parse(item.contentId) }))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -29,6 +29,7 @@ export const QUERY_KEYS = {
  userTracksByHandle: 'userTracksByHandle',
  userPlaylists: 'userPlaylists',
  userAlbums: 'userAlbums',
+ bestSellingAlbums: 'bestSellingAlbums',
  userCollectibles: 'userCollectibles',
  collection: 'collection',
  collections: 'collections',
@@ -71,6 +72,8 @@ export const QUERY_KEYS = {
  purchasers: 'purchasers',
  purchasersCount: 'purchasersCount',
  remixedTracks: 'remixedTracks',
+ recommendedTracks: 'recommendedTracks',
+ recentPremiumTracks: 'recentPremiumTracks',
  mutedUsers: 'mutedUsers',
  salesAggregate: 'salesAggregate',
  usdcTransactionsCount: 'usdcTransactionsCount',

packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts

@@ -0,0 +1,49 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecentPremiumTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecentPremiumTracksQueryKey = ({
+ userId
+}: UseRecentPremiumTracksArgs) => {
+ return [QUERY_KEYS.recentPremiumTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecentPremiumTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecentPremiumTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.tracks.getRecentPremiumTracks({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/tracks/useRecommendedTracks.ts

@@ -0,0 +1,51 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecommendedTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecommendedTracksQueryKey = ({
+ userId
+}: UseRecommendedTracksArgs) => {
+ return [QUERY_KEYS.recommendedTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecommendedTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecommendedTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ if (!currentUserId) return []
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.users.getUserRecommendedTracks({
+ id: Id.parse(currentUserId),
+ userId: Id.parse(currentUserId)
+ })
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/messages/explore.ts

@@ -4,6 +4,9 @@ export const exploreMessages = {
  searchPlaceholder: 'What do you want to listen to?',
  featuredPlaylists: 'Community Playlists',
  featuredRemixContests: 'Featured Remix Contests',
+ forYou: 'For You',
+ recentlyListedForSale: 'Recently Listed for Sale',
+ bestSelling: 'Best Selling',
  artistSpotlight: 'Artist Spotlight',
  labelSpotlight: 'Label Spotlight',
  exploreByMood: 'Explore by Mood',

packages/common/src/store/queue/types.ts

@@ -25,7 +25,8 @@ export enum QueueSource {
  CHAT_TRACKS = 'CHAT_TRACKS',
  CHAT_PLAYLIST_TRACKS = 'CHAT_PLAYLIST_TRACKS',
  EXPLORE_PREMIUM_TRACKS = 'EXPLORE_PREMIUM_TRACKS',
- PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS'
+ PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS',
+ EXPLORE = 'EXPLORE'
 }
 
 export type Queueable = {

packages/mobile/src/components/track/TrackCard.tsx

@@ -0,0 +1,157 @@
+import { useCallback } from 'react'
+
+import { useTrack, useCurrentUserId } from '@audius/common/api'
+import type { ID } from '@audius/common/models'
+import { SquareSizes, isContentUSDCPurchaseGated } from '@audius/common/models'
+import { formatCount, formatSeconds } from '@audius/common/utils'
+import { pick } from 'lodash'
+import type { GestureResponderEvent } from 'react-native'
+
+import {
+ Divider,
+ Flex,
+ IconHeart,
+ IconRepost,
+ Paper,
+ Text
+} from '@audius/harmony-native'
+import { UserLink } from 'app/components/user-link'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { LockedStatusBadge } from '../core'
+import { TrackImage } from '../image/TrackImage'
+import { TrackDownloadStatusIndicator } from '../offline-downloads'
+
+import { TrackCardSkeleton } from './TrackCardSkeleton'
+
+const messages = {
+ repost: 'Reposts',
+ favorites: 'Favorites',
+ hidden: 'Hidden'
+}
+
+type TrackCardProps = {
+ id: ID
+ onPress?: (e: GestureResponderEvent) => void
+ noNavigation?: boolean
+}
+
+export const TrackCard = (props: TrackCardProps) => {
+ const { id, onPress, noNavigation } = props
+
+ const { data: partialTrack } = useTrack(id, {
+ select: (track) =>
+ pick(
+ track,
+ 'title',
+ 'owner_id',
+ 'repost_count',
+ 'save_count',
+ 'is_unlisted',
+ 'access',
+ 'stream_conditions',
+ 'duration',
+ 'offline'
+ )
+ })
+ const {
+ title,
+ owner_id,
+ repost_count,
+ save_count,
+ is_unlisted,
+ access,
+ stream_conditions,
+ duration,
+ offline
+ } = partialTrack ?? {}
+ const { data: accountId } = useCurrentUserId()
+
+ const navigation = useNavigation()
+
+ const handlePress = useCallback(
+ (e: GestureResponderEvent) => {
+ onPress?.(e)
+ if (noNavigation) return
+ navigation.navigate('Track', { id })
+ },
+ [onPress, noNavigation, navigation, id]
+ )
+
+ if (!partialTrack) {
+ console.warn('Track missing for TrackCard, preventing render')
+ return <TrackCardSkeleton />
+ }
+
+ const isOwner = accountId === owner_id
+ const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+ return (
+ <Paper border='default' onPress={handlePress}>
+ <Flex p='s' gap='s'>
+ <TrackImage
+ trackId={id}
+ size={SquareSizes.SIZE_480_BY_480}
+ style={{ flex: 1 }}
+ />
+ <Text variant='title' textAlign='center' numberOfLines={1}>
+ {title}
+ </Text>
+ <UserLink
+ userId={owner_id!}
+ textAlign='center'
+ style={{ justifyContent: 'center' }}
+ />
+ {duration && (
+ <Text variant='body' size='s' textAlign='center' color='subdued'>
+ {formatSeconds(duration)}
+ </Text>
+ )}
+ </Flex>
+ <Divider orientation='horizontal' />
+ <Flex
+ direction='row'
+ gap='l'
+ pv='s'
+ justifyContent='center'
+ backgroundColor='surface1'
+ borderBottomLeftRadius='m'
+ borderBottomRightRadius='m'
+ >
+ {is_unlisted ? (
+ <Text
+ variant='body'
+ size='s'
+ strength='strong'
+ color='subdued'
+ // Ensures footer height is not affected
+ style={{ lineHeight: 16 }}
+ >
+ {messages.hidden}
+ </Text>
+ ) : (
+ <>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconRepost size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(repost_count ?? 0)}
+ </Text>
+ </Flex>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconHeart size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(save_count ?? 0)}
+ </Text>
+ </Flex>
+ </>
+ )}
+ {isPurchase && !isOwner ? (
+ <LockedStatusBadge variant='premium' locked={!access?.stream} />
+ ) : null}
+ {offline ? (
+ <TrackDownloadStatusIndicator trackId={id} size='s' />
+ ) : null}
+ </Flex>
+ </Paper>
+ )
+}

packages/common/src/api/index.ts

@@ -29,6 +29,7 @@ export * from './tan-query/events'
 
 // Explore
 export * from './tan-query/collection/useExploreContent'
+export * from './tan-query/explore/useBestSelling'
 
 // Lineups
 export * from './tan-query/lineups/useFeed'
@@ -95,6 +96,8 @@ export * from './tan-query/tracks/useFileSizes'
 export * from './tan-query/tracks/useTrackFileInfo'
 export * from './tan-query/tracks/useUpdateTrack'
 export * from './tan-query/tracks/useRemixedTracks'
+export * from './tan-query/tracks/useRecommendedTracks'
+export * from './tan-query/tracks/useRecentPremiumTracks'
 export * from './tan-query/tracks/useSuggestedPlaylistTracks'
 
 // Users

packages/common/src/api/tan-query/explore/useBestSelling.ts

@@ -0,0 +1,70 @@
+import { HashId, Id, BestSellingItem } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userCollectionMetadataFromSDK } from '~/adapters'
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import {
+ primeCollectionData,
+ primeTrackData,
+ useQueryContext
+} from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseBestSellingArgs = {
+ userId: ID | null | undefined
+}
+
+export type BestSellingItemWithId = BestSellingItem & { id: ID }
+
+export const getBestSellingQueryKey = ({ userId }: UseBestSellingArgs) => {
+ return [QUERY_KEYS.bestSellingAlbums, userId] as unknown as QueryKey<
+ BestSellingItemWithId[]
+ >
+}
+
+export const useBestSelling = <TResult = BestSellingItemWithId[]>(
+ options?: SelectableQueryOptions<BestSellingItemWithId[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+ return useQuery({
+ queryKey: getBestSellingQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [], related = {} } =
+ await sdk.full.explore.getFullBestSelling({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(
+ related?.tracks,
+ userTrackMetadataFromSDK
+ )
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ const playlists = transformAndCleanList(
+ related?.playlists,
+ userCollectionMetadataFromSDK
+ )
+
+ primeCollectionData({
+ collections: playlists,
+ queryClient
+ })
+
+ return data.map((item) => ({ ...item, id: HashId.parse(item.contentId) }))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -29,6 +29,7 @@ export const QUERY_KEYS = {
  userTracksByHandle: 'userTracksByHandle',
  userPlaylists: 'userPlaylists',
  userAlbums: 'userAlbums',
+ bestSellingAlbums: 'bestSellingAlbums',
  userCollectibles: 'userCollectibles',
  collection: 'collection',
  collections: 'collections',
@@ -71,6 +72,8 @@ export const QUERY_KEYS = {
  purchasers: 'purchasers',
  purchasersCount: 'purchasersCount',
  remixedTracks: 'remixedTracks',
+ recommendedTracks: 'recommendedTracks',
+ recentPremiumTracks: 'recentPremiumTracks',
  mutedUsers: 'mutedUsers',
  salesAggregate: 'salesAggregate',
  usdcTransactionsCount: 'usdcTransactionsCount',

packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts

@@ -0,0 +1,49 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecentPremiumTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecentPremiumTracksQueryKey = ({
+ userId
+}: UseRecentPremiumTracksArgs) => {
+ return [QUERY_KEYS.recentPremiumTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecentPremiumTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecentPremiumTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.tracks.getRecentPremiumTracks({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/tracks/useRecommendedTracks.ts

@@ -0,0 +1,51 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecommendedTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecommendedTracksQueryKey = ({
+ userId
+}: UseRecommendedTracksArgs) => {
+ return [QUERY_KEYS.recommendedTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecommendedTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecommendedTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ if (!currentUserId) return []
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.users.getUserRecommendedTracks({
+ id: Id.parse(currentUserId),
+ userId: Id.parse(currentUserId)
+ })
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/messages/explore.ts

@@ -4,6 +4,9 @@ export const exploreMessages = {
  searchPlaceholder: 'What do you want to listen to?',
  featuredPlaylists: 'Community Playlists',
  featuredRemixContests: 'Featured Remix Contests',
+ forYou: 'For You',
+ recentlyListedForSale: 'Recently Listed for Sale',
+ bestSelling: 'Best Selling',
  artistSpotlight: 'Artist Spotlight',
  labelSpotlight: 'Label Spotlight',
  exploreByMood: 'Explore by Mood',

packages/common/src/store/queue/types.ts

@@ -25,7 +25,8 @@ export enum QueueSource {
  CHAT_TRACKS = 'CHAT_TRACKS',
  CHAT_PLAYLIST_TRACKS = 'CHAT_PLAYLIST_TRACKS',
  EXPLORE_PREMIUM_TRACKS = 'EXPLORE_PREMIUM_TRACKS',
- PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS'
+ PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS',
+ EXPLORE = 'EXPLORE'
 }
 
 export type Queueable = {

packages/mobile/src/components/track/TrackCard.tsx

@@ -0,0 +1,157 @@
+import { useCallback } from 'react'
+
+import { useTrack, useCurrentUserId } from '@audius/common/api'
+import type { ID } from '@audius/common/models'
+import { SquareSizes, isContentUSDCPurchaseGated } from '@audius/common/models'
+import { formatCount, formatSeconds } from '@audius/common/utils'
+import { pick } from 'lodash'
+import type { GestureResponderEvent } from 'react-native'
+
+import {
+ Divider,
+ Flex,
+ IconHeart,
+ IconRepost,
+ Paper,
+ Text
+} from '@audius/harmony-native'
+import { UserLink } from 'app/components/user-link'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { LockedStatusBadge } from '../core'
+import { TrackImage } from '../image/TrackImage'
+import { TrackDownloadStatusIndicator } from '../offline-downloads'
+
+import { TrackCardSkeleton } from './TrackCardSkeleton'
+
+const messages = {
+ repost: 'Reposts',
+ favorites: 'Favorites',
+ hidden: 'Hidden'
+}
+
+type TrackCardProps = {
+ id: ID
+ onPress?: (e: GestureResponderEvent) => void
+ noNavigation?: boolean
+}
+
+export const TrackCard = (props: TrackCardProps) => {
+ const { id, onPress, noNavigation } = props
+
+ const { data: partialTrack } = useTrack(id, {
+ select: (track) =>
+ pick(
+ track,
+ 'title',
+ 'owner_id',
+ 'repost_count',
+ 'save_count',
+ 'is_unlisted',
+ 'access',
+ 'stream_conditions',
+ 'duration',
+ 'offline'
+ )
+ })
+ const {
+ title,
+ owner_id,
+ repost_count,
+ save_count,
+ is_unlisted,
+ access,
+ stream_conditions,
+ duration,
+ offline
+ } = partialTrack ?? {}
+ const { data: accountId } = useCurrentUserId()
+
+ const navigation = useNavigation()
+
+ const handlePress = useCallback(
+ (e: GestureResponderEvent) => {
+ onPress?.(e)
+ if (noNavigation) return
+ navigation.navigate('Track', { id })
+ },
+ [onPress, noNavigation, navigation, id]
+ )
+
+ if (!partialTrack) {
+ console.warn('Track missing for TrackCard, preventing render')
+ return <TrackCardSkeleton />
+ }
+
+ const isOwner = accountId === owner_id
+ const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+ return (
+ <Paper border='default' onPress={handlePress}>
+ <Flex p='s' gap='s'>
+ <TrackImage
+ trackId={id}
+ size={SquareSizes.SIZE_480_BY_480}
+ style={{ flex: 1 }}
+ />
+ <Text variant='title' textAlign='center' numberOfLines={1}>
+ {title}
+ </Text>
+ <UserLink
+ userId={owner_id!}
+ textAlign='center'
+ style={{ justifyContent: 'center' }}
+ />
+ {duration && (
+ <Text variant='body' size='s' textAlign='center' color='subdued'>
+ {formatSeconds(duration)}
+ </Text>
+ )}
+ </Flex>
+ <Divider orientation='horizontal' />
+ <Flex
+ direction='row'
+ gap='l'
+ pv='s'
+ justifyContent='center'
+ backgroundColor='surface1'
+ borderBottomLeftRadius='m'
+ borderBottomRightRadius='m'
+ >
+ {is_unlisted ? (
+ <Text
+ variant='body'
+ size='s'
+ strength='strong'
+ color='subdued'
+ // Ensures footer height is not affected
+ style={{ lineHeight: 16 }}
+ >
+ {messages.hidden}
+ </Text>
+ ) : (
+ <>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconRepost size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(repost_count ?? 0)}
+ </Text>
+ </Flex>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconHeart size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(save_count ?? 0)}
+ </Text>
+ </Flex>
+ </>
+ )}
+ {isPurchase && !isOwner ? (
+ <LockedStatusBadge variant='premium' locked={!access?.stream} />
+ ) : null}
+ {offline ? (
+ <TrackDownloadStatusIndicator trackId={id} size='s' />
+ ) : null}
+ </Flex>
+ </Paper>
+ )
+}

packages/common/src/api/index.ts

@@ -29,6 +29,7 @@ export * from './tan-query/events'
 
 // Explore
 export * from './tan-query/collection/useExploreContent'
+export * from './tan-query/explore/useBestSelling'
 
 // Lineups
 export * from './tan-query/lineups/useFeed'
@@ -95,6 +96,8 @@ export * from './tan-query/tracks/useFileSizes'
 export * from './tan-query/tracks/useTrackFileInfo'
 export * from './tan-query/tracks/useUpdateTrack'
 export * from './tan-query/tracks/useRemixedTracks'
+export * from './tan-query/tracks/useRecommendedTracks'
+export * from './tan-query/tracks/useRecentPremiumTracks'
 export * from './tan-query/tracks/useSuggestedPlaylistTracks'
 
 // Users

packages/common/src/api/tan-query/explore/useBestSelling.ts

@@ -0,0 +1,70 @@
+import { HashId, Id, BestSellingItem } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userCollectionMetadataFromSDK } from '~/adapters'
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import {
+ primeCollectionData,
+ primeTrackData,
+ useQueryContext
+} from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseBestSellingArgs = {
+ userId: ID | null | undefined
+}
+
+export type BestSellingItemWithId = BestSellingItem & { id: ID }
+
+export const getBestSellingQueryKey = ({ userId }: UseBestSellingArgs) => {
+ return [QUERY_KEYS.bestSellingAlbums, userId] as unknown as QueryKey<
+ BestSellingItemWithId[]
+ >
+}
+
+export const useBestSelling = <TResult = BestSellingItemWithId[]>(
+ options?: SelectableQueryOptions<BestSellingItemWithId[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+ return useQuery({
+ queryKey: getBestSellingQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [], related = {} } =
+ await sdk.full.explore.getFullBestSelling({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(
+ related?.tracks,
+ userTrackMetadataFromSDK
+ )
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ const playlists = transformAndCleanList(
+ related?.playlists,
+ userCollectionMetadataFromSDK
+ )
+
+ primeCollectionData({
+ collections: playlists,
+ queryClient
+ })
+
+ return data.map((item) => ({ ...item, id: HashId.parse(item.contentId) }))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -29,6 +29,7 @@ export const QUERY_KEYS = {
  userTracksByHandle: 'userTracksByHandle',
  userPlaylists: 'userPlaylists',
  userAlbums: 'userAlbums',
+ bestSellingAlbums: 'bestSellingAlbums',
  userCollectibles: 'userCollectibles',
  collection: 'collection',
  collections: 'collections',
@@ -71,6 +72,8 @@ export const QUERY_KEYS = {
  purchasers: 'purchasers',
  purchasersCount: 'purchasersCount',
  remixedTracks: 'remixedTracks',
+ recommendedTracks: 'recommendedTracks',
+ recentPremiumTracks: 'recentPremiumTracks',
  mutedUsers: 'mutedUsers',
  salesAggregate: 'salesAggregate',
  usdcTransactionsCount: 'usdcTransactionsCount',

packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts

@@ -0,0 +1,49 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecentPremiumTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecentPremiumTracksQueryKey = ({
+ userId
+}: UseRecentPremiumTracksArgs) => {
+ return [QUERY_KEYS.recentPremiumTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecentPremiumTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecentPremiumTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.tracks.getRecentPremiumTracks({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/tracks/useRecommendedTracks.ts

@@ -0,0 +1,51 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecommendedTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecommendedTracksQueryKey = ({
+ userId
+}: UseRecommendedTracksArgs) => {
+ return [QUERY_KEYS.recommendedTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecommendedTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecommendedTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ if (!currentUserId) return []
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.users.getUserRecommendedTracks({
+ id: Id.parse(currentUserId),
+ userId: Id.parse(currentUserId)
+ })
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/messages/explore.ts

@@ -4,6 +4,9 @@ export const exploreMessages = {
  searchPlaceholder: 'What do you want to listen to?',
  featuredPlaylists: 'Community Playlists',
  featuredRemixContests: 'Featured Remix Contests',
+ forYou: 'For You',
+ recentlyListedForSale: 'Recently Listed for Sale',
+ bestSelling: 'Best Selling',
  artistSpotlight: 'Artist Spotlight',
  labelSpotlight: 'Label Spotlight',
  exploreByMood: 'Explore by Mood',

packages/common/src/store/queue/types.ts

@@ -25,7 +25,8 @@ export enum QueueSource {
  CHAT_TRACKS = 'CHAT_TRACKS',
  CHAT_PLAYLIST_TRACKS = 'CHAT_PLAYLIST_TRACKS',
  EXPLORE_PREMIUM_TRACKS = 'EXPLORE_PREMIUM_TRACKS',
- PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS'
+ PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS',
+ EXPLORE = 'EXPLORE'
 }
 
 export type Queueable = {

packages/mobile/src/components/track/TrackCard.tsx

@@ -0,0 +1,157 @@
+import { useCallback } from 'react'
+
+import { useTrack, useCurrentUserId } from '@audius/common/api'
+import type { ID } from '@audius/common/models'
+import { SquareSizes, isContentUSDCPurchaseGated } from '@audius/common/models'
+import { formatCount, formatSeconds } from '@audius/common/utils'
+import { pick } from 'lodash'
+import type { GestureResponderEvent } from 'react-native'
+
+import {
+ Divider,
+ Flex,
+ IconHeart,
+ IconRepost,
+ Paper,
+ Text
+} from '@audius/harmony-native'
+import { UserLink } from 'app/components/user-link'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { LockedStatusBadge } from '../core'
+import { TrackImage } from '../image/TrackImage'
+import { TrackDownloadStatusIndicator } from '../offline-downloads'
+
+import { TrackCardSkeleton } from './TrackCardSkeleton'
+
+const messages = {
+ repost: 'Reposts',
+ favorites: 'Favorites',
+ hidden: 'Hidden'
+}
+
+type TrackCardProps = {
+ id: ID
+ onPress?: (e: GestureResponderEvent) => void
+ noNavigation?: boolean
+}
+
+export const TrackCard = (props: TrackCardProps) => {
+ const { id, onPress, noNavigation } = props
+
+ const { data: partialTrack } = useTrack(id, {
+ select: (track) =>
+ pick(
+ track,
+ 'title',
+ 'owner_id',
+ 'repost_count',
+ 'save_count',
+ 'is_unlisted',
+ 'access',
+ 'stream_conditions',
+ 'duration',
+ 'offline'
+ )
+ })
+ const {
+ title,
+ owner_id,
+ repost_count,
+ save_count,
+ is_unlisted,
+ access,
+ stream_conditions,
+ duration,
+ offline
+ } = partialTrack ?? {}
+ const { data: accountId } = useCurrentUserId()
+
+ const navigation = useNavigation()
+
+ const handlePress = useCallback(
+ (e: GestureResponderEvent) => {
+ onPress?.(e)
+ if (noNavigation) return
+ navigation.navigate('Track', { id })
+ },
+ [onPress, noNavigation, navigation, id]
+ )
+
+ if (!partialTrack) {
+ console.warn('Track missing for TrackCard, preventing render')
+ return <TrackCardSkeleton />
+ }
+
+ const isOwner = accountId === owner_id
+ const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+ return (
+ <Paper border='default' onPress={handlePress}>
+ <Flex p='s' gap='s'>
+ <TrackImage
+ trackId={id}
+ size={SquareSizes.SIZE_480_BY_480}
+ style={{ flex: 1 }}
+ />
+ <Text variant='title' textAlign='center' numberOfLines={1}>
+ {title}
+ </Text>
+ <UserLink
+ userId={owner_id!}
+ textAlign='center'
+ style={{ justifyContent: 'center' }}
+ />
+ {duration && (
+ <Text variant='body' size='s' textAlign='center' color='subdued'>
+ {formatSeconds(duration)}
+ </Text>
+ )}
+ </Flex>
+ <Divider orientation='horizontal' />
+ <Flex
+ direction='row'
+ gap='l'
+ pv='s'
+ justifyContent='center'
+ backgroundColor='surface1'
+ borderBottomLeftRadius='m'
+ borderBottomRightRadius='m'
+ >
+ {is_unlisted ? (
+ <Text
+ variant='body'
+ size='s'
+ strength='strong'
+ color='subdued'
+ // Ensures footer height is not affected
+ style={{ lineHeight: 16 }}
+ >
+ {messages.hidden}
+ </Text>
+ ) : (
+ <>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconRepost size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(repost_count ?? 0)}
+ </Text>
+ </Flex>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconHeart size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(save_count ?? 0)}
+ </Text>
+ </Flex>
+ </>
+ )}
+ {isPurchase && !isOwner ? (
+ <LockedStatusBadge variant='premium' locked={!access?.stream} />
+ ) : null}
+ {offline ? (
+ <TrackDownloadStatusIndicator trackId={id} size='s' />
+ ) : null}
+ </Flex>
+ </Paper>
+ )
+}

packages/common/src/api/index.ts

@@ -29,6 +29,7 @@ export * from './tan-query/events'
 
 // Explore
 export * from './tan-query/collection/useExploreContent'
+export * from './tan-query/explore/useBestSelling'
 
 // Lineups
 export * from './tan-query/lineups/useFeed'
@@ -95,6 +96,8 @@ export * from './tan-query/tracks/useFileSizes'
 export * from './tan-query/tracks/useTrackFileInfo'
 export * from './tan-query/tracks/useUpdateTrack'
 export * from './tan-query/tracks/useRemixedTracks'
+export * from './tan-query/tracks/useRecommendedTracks'
+export * from './tan-query/tracks/useRecentPremiumTracks'
 export * from './tan-query/tracks/useSuggestedPlaylistTracks'
 
 // Users

packages/common/src/api/tan-query/explore/useBestSelling.ts

@@ -0,0 +1,70 @@
+import { HashId, Id, BestSellingItem } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userCollectionMetadataFromSDK } from '~/adapters'
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import {
+ primeCollectionData,
+ primeTrackData,
+ useQueryContext
+} from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseBestSellingArgs = {
+ userId: ID | null | undefined
+}
+
+export type BestSellingItemWithId = BestSellingItem & { id: ID }
+
+export const getBestSellingQueryKey = ({ userId }: UseBestSellingArgs) => {
+ return [QUERY_KEYS.bestSellingAlbums, userId] as unknown as QueryKey<
+ BestSellingItemWithId[]
+ >
+}
+
+export const useBestSelling = <TResult = BestSellingItemWithId[]>(
+ options?: SelectableQueryOptions<BestSellingItemWithId[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+ return useQuery({
+ queryKey: getBestSellingQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [], related = {} } =
+ await sdk.full.explore.getFullBestSelling({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(
+ related?.tracks,
+ userTrackMetadataFromSDK
+ )
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ const playlists = transformAndCleanList(
+ related?.playlists,
+ userCollectionMetadataFromSDK
+ )
+
+ primeCollectionData({
+ collections: playlists,
+ queryClient
+ })
+
+ return data.map((item) => ({ ...item, id: HashId.parse(item.contentId) }))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -29,6 +29,7 @@ export const QUERY_KEYS = {
  userTracksByHandle: 'userTracksByHandle',
  userPlaylists: 'userPlaylists',
  userAlbums: 'userAlbums',
+ bestSellingAlbums: 'bestSellingAlbums',
  userCollectibles: 'userCollectibles',
  collection: 'collection',
  collections: 'collections',
@@ -71,6 +72,8 @@ export const QUERY_KEYS = {
  purchasers: 'purchasers',
  purchasersCount: 'purchasersCount',
  remixedTracks: 'remixedTracks',
+ recommendedTracks: 'recommendedTracks',
+ recentPremiumTracks: 'recentPremiumTracks',
  mutedUsers: 'mutedUsers',
  salesAggregate: 'salesAggregate',
  usdcTransactionsCount: 'usdcTransactionsCount',

packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts

@@ -0,0 +1,49 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecentPremiumTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecentPremiumTracksQueryKey = ({
+ userId
+}: UseRecentPremiumTracksArgs) => {
+ return [QUERY_KEYS.recentPremiumTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecentPremiumTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecentPremiumTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.tracks.getRecentPremiumTracks({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/tracks/useRecommendedTracks.ts

@@ -0,0 +1,51 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecommendedTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecommendedTracksQueryKey = ({
+ userId
+}: UseRecommendedTracksArgs) => {
+ return [QUERY_KEYS.recommendedTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecommendedTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecommendedTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ if (!currentUserId) return []
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.users.getUserRecommendedTracks({
+ id: Id.parse(currentUserId),
+ userId: Id.parse(currentUserId)
+ })
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/messages/explore.ts

@@ -4,6 +4,9 @@ export const exploreMessages = {
  searchPlaceholder: 'What do you want to listen to?',
  featuredPlaylists: 'Community Playlists',
  featuredRemixContests: 'Featured Remix Contests',
+ forYou: 'For You',
+ recentlyListedForSale: 'Recently Listed for Sale',
+ bestSelling: 'Best Selling',
  artistSpotlight: 'Artist Spotlight',
  labelSpotlight: 'Label Spotlight',
  exploreByMood: 'Explore by Mood',

packages/common/src/store/queue/types.ts

@@ -25,7 +25,8 @@ export enum QueueSource {
  CHAT_TRACKS = 'CHAT_TRACKS',
  CHAT_PLAYLIST_TRACKS = 'CHAT_PLAYLIST_TRACKS',
  EXPLORE_PREMIUM_TRACKS = 'EXPLORE_PREMIUM_TRACKS',
- PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS'
+ PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS',
+ EXPLORE = 'EXPLORE'
 }
 
 export type Queueable = {

packages/mobile/src/components/track/TrackCard.tsx

@@ -0,0 +1,157 @@
+import { useCallback } from 'react'
+
+import { useTrack, useCurrentUserId } from '@audius/common/api'
+import type { ID } from '@audius/common/models'
+import { SquareSizes, isContentUSDCPurchaseGated } from '@audius/common/models'
+import { formatCount, formatSeconds } from '@audius/common/utils'
+import { pick } from 'lodash'
+import type { GestureResponderEvent } from 'react-native'
+
+import {
+ Divider,
+ Flex,
+ IconHeart,
+ IconRepost,
+ Paper,
+ Text
+} from '@audius/harmony-native'
+import { UserLink } from 'app/components/user-link'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { LockedStatusBadge } from '../core'
+import { TrackImage } from '../image/TrackImage'
+import { TrackDownloadStatusIndicator } from '../offline-downloads'
+
+import { TrackCardSkeleton } from './TrackCardSkeleton'
+
+const messages = {
+ repost: 'Reposts',
+ favorites: 'Favorites',
+ hidden: 'Hidden'
+}
+
+type TrackCardProps = {
+ id: ID
+ onPress?: (e: GestureResponderEvent) => void
+ noNavigation?: boolean
+}
+
+export const TrackCard = (props: TrackCardProps) => {
+ const { id, onPress, noNavigation } = props
+
+ const { data: partialTrack } = useTrack(id, {
+ select: (track) =>
+ pick(
+ track,
+ 'title',
+ 'owner_id',
+ 'repost_count',
+ 'save_count',
+ 'is_unlisted',
+ 'access',
+ 'stream_conditions',
+ 'duration',
+ 'offline'
+ )
+ })
+ const {
+ title,
+ owner_id,
+ repost_count,
+ save_count,
+ is_unlisted,
+ access,
+ stream_conditions,
+ duration,
+ offline
+ } = partialTrack ?? {}
+ const { data: accountId } = useCurrentUserId()
+
+ const navigation = useNavigation()
+
+ const handlePress = useCallback(
+ (e: GestureResponderEvent) => {
+ onPress?.(e)
+ if (noNavigation) return
+ navigation.navigate('Track', { id })
+ },
+ [onPress, noNavigation, navigation, id]
+ )
+
+ if (!partialTrack) {
+ console.warn('Track missing for TrackCard, preventing render')
+ return <TrackCardSkeleton />
+ }
+
+ const isOwner = accountId === owner_id
+ const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+ return (
+ <Paper border='default' onPress={handlePress}>
+ <Flex p='s' gap='s'>
+ <TrackImage
+ trackId={id}
+ size={SquareSizes.SIZE_480_BY_480}
+ style={{ flex: 1 }}
+ />
+ <Text variant='title' textAlign='center' numberOfLines={1}>
+ {title}
+ </Text>
+ <UserLink
+ userId={owner_id!}
+ textAlign='center'
+ style={{ justifyContent: 'center' }}
+ />
+ {duration && (
+ <Text variant='body' size='s' textAlign='center' color='subdued'>
+ {formatSeconds(duration)}
+ </Text>
+ )}
+ </Flex>
+ <Divider orientation='horizontal' />
+ <Flex
+ direction='row'
+ gap='l'
+ pv='s'
+ justifyContent='center'
+ backgroundColor='surface1'
+ borderBottomLeftRadius='m'
+ borderBottomRightRadius='m'
+ >
+ {is_unlisted ? (
+ <Text
+ variant='body'
+ size='s'
+ strength='strong'
+ color='subdued'
+ // Ensures footer height is not affected
+ style={{ lineHeight: 16 }}
+ >
+ {messages.hidden}
+ </Text>
+ ) : (
+ <>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconRepost size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(repost_count ?? 0)}
+ </Text>
+ </Flex>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconHeart size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(save_count ?? 0)}
+ </Text>
+ </Flex>
+ </>
+ )}
+ {isPurchase && !isOwner ? (
+ <LockedStatusBadge variant='premium' locked={!access?.stream} />
+ ) : null}
+ {offline ? (
+ <TrackDownloadStatusIndicator trackId={id} size='s' />
+ ) : null}
+ </Flex>
+ </Paper>
+ )
+}

packages/common/src/api/index.ts

@@ -29,6 +29,7 @@ export * from './tan-query/events'
 
 // Explore
 export * from './tan-query/collection/useExploreContent'
+export * from './tan-query/explore/useBestSelling'
 
 // Lineups
 export * from './tan-query/lineups/useFeed'
@@ -95,6 +96,8 @@ export * from './tan-query/tracks/useFileSizes'
 export * from './tan-query/tracks/useTrackFileInfo'
 export * from './tan-query/tracks/useUpdateTrack'
 export * from './tan-query/tracks/useRemixedTracks'
+export * from './tan-query/tracks/useRecommendedTracks'
+export * from './tan-query/tracks/useRecentPremiumTracks'
 export * from './tan-query/tracks/useSuggestedPlaylistTracks'
 
 // Users

packages/common/src/api/tan-query/explore/useBestSelling.ts

@@ -0,0 +1,70 @@
+import { HashId, Id, BestSellingItem } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userCollectionMetadataFromSDK } from '~/adapters'
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import {
+ primeCollectionData,
+ primeTrackData,
+ useQueryContext
+} from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseBestSellingArgs = {
+ userId: ID | null | undefined
+}
+
+export type BestSellingItemWithId = BestSellingItem & { id: ID }
+
+export const getBestSellingQueryKey = ({ userId }: UseBestSellingArgs) => {
+ return [QUERY_KEYS.bestSellingAlbums, userId] as unknown as QueryKey<
+ BestSellingItemWithId[]
+ >
+}
+
+export const useBestSelling = <TResult = BestSellingItemWithId[]>(
+ options?: SelectableQueryOptions<BestSellingItemWithId[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+ return useQuery({
+ queryKey: getBestSellingQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [], related = {} } =
+ await sdk.full.explore.getFullBestSelling({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(
+ related?.tracks,
+ userTrackMetadataFromSDK
+ )
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ const playlists = transformAndCleanList(
+ related?.playlists,
+ userCollectionMetadataFromSDK
+ )
+
+ primeCollectionData({
+ collections: playlists,
+ queryClient
+ })
+
+ return data.map((item) => ({ ...item, id: HashId.parse(item.contentId) }))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -29,6 +29,7 @@ export const QUERY_KEYS = {
  userTracksByHandle: 'userTracksByHandle',
  userPlaylists: 'userPlaylists',
  userAlbums: 'userAlbums',
+ bestSellingAlbums: 'bestSellingAlbums',
  userCollectibles: 'userCollectibles',
  collection: 'collection',
  collections: 'collections',
@@ -71,6 +72,8 @@ export const QUERY_KEYS = {
  purchasers: 'purchasers',
  purchasersCount: 'purchasersCount',
  remixedTracks: 'remixedTracks',
+ recommendedTracks: 'recommendedTracks',
+ recentPremiumTracks: 'recentPremiumTracks',
  mutedUsers: 'mutedUsers',
  salesAggregate: 'salesAggregate',
  usdcTransactionsCount: 'usdcTransactionsCount',

packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts

@@ -0,0 +1,49 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecentPremiumTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecentPremiumTracksQueryKey = ({
+ userId
+}: UseRecentPremiumTracksArgs) => {
+ return [QUERY_KEYS.recentPremiumTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecentPremiumTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecentPremiumTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.tracks.getRecentPremiumTracks({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/tracks/useRecommendedTracks.ts

@@ -0,0 +1,51 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecommendedTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecommendedTracksQueryKey = ({
+ userId
+}: UseRecommendedTracksArgs) => {
+ return [QUERY_KEYS.recommendedTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecommendedTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecommendedTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ if (!currentUserId) return []
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.users.getUserRecommendedTracks({
+ id: Id.parse(currentUserId),
+ userId: Id.parse(currentUserId)
+ })
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/messages/explore.ts

@@ -4,6 +4,9 @@ export const exploreMessages = {
  searchPlaceholder: 'What do you want to listen to?',
  featuredPlaylists: 'Community Playlists',
  featuredRemixContests: 'Featured Remix Contests',
+ forYou: 'For You',
+ recentlyListedForSale: 'Recently Listed for Sale',
+ bestSelling: 'Best Selling',
  artistSpotlight: 'Artist Spotlight',
  labelSpotlight: 'Label Spotlight',
  exploreByMood: 'Explore by Mood',

packages/common/src/store/queue/types.ts

@@ -25,7 +25,8 @@ export enum QueueSource {
  CHAT_TRACKS = 'CHAT_TRACKS',
  CHAT_PLAYLIST_TRACKS = 'CHAT_PLAYLIST_TRACKS',
  EXPLORE_PREMIUM_TRACKS = 'EXPLORE_PREMIUM_TRACKS',
- PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS'
+ PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS',
+ EXPLORE = 'EXPLORE'
 }
 
 export type Queueable = {

packages/mobile/src/components/track/TrackCard.tsx

@@ -0,0 +1,157 @@
+import { useCallback } from 'react'
+
+import { useTrack, useCurrentUserId } from '@audius/common/api'
+import type { ID } from '@audius/common/models'
+import { SquareSizes, isContentUSDCPurchaseGated } from '@audius/common/models'
+import { formatCount, formatSeconds } from '@audius/common/utils'
+import { pick } from 'lodash'
+import type { GestureResponderEvent } from 'react-native'
+
+import {
+ Divider,
+ Flex,
+ IconHeart,
+ IconRepost,
+ Paper,
+ Text
+} from '@audius/harmony-native'
+import { UserLink } from 'app/components/user-link'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { LockedStatusBadge } from '../core'
+import { TrackImage } from '../image/TrackImage'
+import { TrackDownloadStatusIndicator } from '../offline-downloads'
+
+import { TrackCardSkeleton } from './TrackCardSkeleton'
+
+const messages = {
+ repost: 'Reposts',
+ favorites: 'Favorites',
+ hidden: 'Hidden'
+}
+
+type TrackCardProps = {
+ id: ID
+ onPress?: (e: GestureResponderEvent) => void
+ noNavigation?: boolean
+}
+
+export const TrackCard = (props: TrackCardProps) => {
+ const { id, onPress, noNavigation } = props
+
+ const { data: partialTrack } = useTrack(id, {
+ select: (track) =>
+ pick(
+ track,
+ 'title',
+ 'owner_id',
+ 'repost_count',
+ 'save_count',
+ 'is_unlisted',
+ 'access',
+ 'stream_conditions',
+ 'duration',
+ 'offline'
+ )
+ })
+ const {
+ title,
+ owner_id,
+ repost_count,
+ save_count,
+ is_unlisted,
+ access,
+ stream_conditions,
+ duration,
+ offline
+ } = partialTrack ?? {}
+ const { data: accountId } = useCurrentUserId()
+
+ const navigation = useNavigation()
+
+ const handlePress = useCallback(
+ (e: GestureResponderEvent) => {
+ onPress?.(e)
+ if (noNavigation) return
+ navigation.navigate('Track', { id })
+ },
+ [onPress, noNavigation, navigation, id]
+ )
+
+ if (!partialTrack) {
+ console.warn('Track missing for TrackCard, preventing render')
+ return <TrackCardSkeleton />
+ }
+
+ const isOwner = accountId === owner_id
+ const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+ return (
+ <Paper border='default' onPress={handlePress}>
+ <Flex p='s' gap='s'>
+ <TrackImage
+ trackId={id}
+ size={SquareSizes.SIZE_480_BY_480}
+ style={{ flex: 1 }}
+ />
+ <Text variant='title' textAlign='center' numberOfLines={1}>
+ {title}
+ </Text>
+ <UserLink
+ userId={owner_id!}
+ textAlign='center'
+ style={{ justifyContent: 'center' }}
+ />
+ {duration && (
+ <Text variant='body' size='s' textAlign='center' color='subdued'>
+ {formatSeconds(duration)}
+ </Text>
+ )}
+ </Flex>
+ <Divider orientation='horizontal' />
+ <Flex
+ direction='row'
+ gap='l'
+ pv='s'
+ justifyContent='center'
+ backgroundColor='surface1'
+ borderBottomLeftRadius='m'
+ borderBottomRightRadius='m'
+ >
+ {is_unlisted ? (
+ <Text
+ variant='body'
+ size='s'
+ strength='strong'
+ color='subdued'
+ // Ensures footer height is not affected
+ style={{ lineHeight: 16 }}
+ >
+ {messages.hidden}
+ </Text>
+ ) : (
+ <>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconRepost size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(repost_count ?? 0)}
+ </Text>
+ </Flex>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconHeart size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(save_count ?? 0)}
+ </Text>
+ </Flex>
+ </>
+ )}
+ {isPurchase && !isOwner ? (
+ <LockedStatusBadge variant='premium' locked={!access?.stream} />
+ ) : null}
+ {offline ? (
+ <TrackDownloadStatusIndicator trackId={id} size='s' />
+ ) : null}
+ </Flex>
+ </Paper>
+ )
+}

packages/common/src/api/index.ts

@@ -29,6 +29,7 @@ export * from './tan-query/events'
 
 // Explore
 export * from './tan-query/collection/useExploreContent'
+export * from './tan-query/explore/useBestSelling'
 
 // Lineups
 export * from './tan-query/lineups/useFeed'
@@ -95,6 +96,8 @@ export * from './tan-query/tracks/useFileSizes'
 export * from './tan-query/tracks/useTrackFileInfo'
 export * from './tan-query/tracks/useUpdateTrack'
 export * from './tan-query/tracks/useRemixedTracks'
+export * from './tan-query/tracks/useRecommendedTracks'
+export * from './tan-query/tracks/useRecentPremiumTracks'
 export * from './tan-query/tracks/useSuggestedPlaylistTracks'
 
 // Users

packages/common/src/api/tan-query/explore/useBestSelling.ts

@@ -0,0 +1,70 @@
+import { HashId, Id, BestSellingItem } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userCollectionMetadataFromSDK } from '~/adapters'
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import {
+ primeCollectionData,
+ primeTrackData,
+ useQueryContext
+} from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseBestSellingArgs = {
+ userId: ID | null | undefined
+}
+
+export type BestSellingItemWithId = BestSellingItem & { id: ID }
+
+export const getBestSellingQueryKey = ({ userId }: UseBestSellingArgs) => {
+ return [QUERY_KEYS.bestSellingAlbums, userId] as unknown as QueryKey<
+ BestSellingItemWithId[]
+ >
+}
+
+export const useBestSelling = <TResult = BestSellingItemWithId[]>(
+ options?: SelectableQueryOptions<BestSellingItemWithId[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+ return useQuery({
+ queryKey: getBestSellingQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [], related = {} } =
+ await sdk.full.explore.getFullBestSelling({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(
+ related?.tracks,
+ userTrackMetadataFromSDK
+ )
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ const playlists = transformAndCleanList(
+ related?.playlists,
+ userCollectionMetadataFromSDK
+ )
+
+ primeCollectionData({
+ collections: playlists,
+ queryClient
+ })
+
+ return data.map((item) => ({ ...item, id: HashId.parse(item.contentId) }))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -29,6 +29,7 @@ export const QUERY_KEYS = {
  userTracksByHandle: 'userTracksByHandle',
  userPlaylists: 'userPlaylists',
  userAlbums: 'userAlbums',
+ bestSellingAlbums: 'bestSellingAlbums',
  userCollectibles: 'userCollectibles',
  collection: 'collection',
  collections: 'collections',
@@ -71,6 +72,8 @@ export const QUERY_KEYS = {
  purchasers: 'purchasers',
  purchasersCount: 'purchasersCount',
  remixedTracks: 'remixedTracks',
+ recommendedTracks: 'recommendedTracks',
+ recentPremiumTracks: 'recentPremiumTracks',
  mutedUsers: 'mutedUsers',
  salesAggregate: 'salesAggregate',
  usdcTransactionsCount: 'usdcTransactionsCount',

packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts

@@ -0,0 +1,49 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecentPremiumTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecentPremiumTracksQueryKey = ({
+ userId
+}: UseRecentPremiumTracksArgs) => {
+ return [QUERY_KEYS.recentPremiumTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecentPremiumTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecentPremiumTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.tracks.getRecentPremiumTracks({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/tracks/useRecommendedTracks.ts

@@ -0,0 +1,51 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecommendedTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecommendedTracksQueryKey = ({
+ userId
+}: UseRecommendedTracksArgs) => {
+ return [QUERY_KEYS.recommendedTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecommendedTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecommendedTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ if (!currentUserId) return []
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.users.getUserRecommendedTracks({
+ id: Id.parse(currentUserId),
+ userId: Id.parse(currentUserId)
+ })
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/messages/explore.ts

@@ -4,6 +4,9 @@ export const exploreMessages = {
  searchPlaceholder: 'What do you want to listen to?',
  featuredPlaylists: 'Community Playlists',
  featuredRemixContests: 'Featured Remix Contests',
+ forYou: 'For You',
+ recentlyListedForSale: 'Recently Listed for Sale',
+ bestSelling: 'Best Selling',
  artistSpotlight: 'Artist Spotlight',
  labelSpotlight: 'Label Spotlight',
  exploreByMood: 'Explore by Mood',

packages/common/src/store/queue/types.ts

@@ -25,7 +25,8 @@ export enum QueueSource {
  CHAT_TRACKS = 'CHAT_TRACKS',
  CHAT_PLAYLIST_TRACKS = 'CHAT_PLAYLIST_TRACKS',
  EXPLORE_PREMIUM_TRACKS = 'EXPLORE_PREMIUM_TRACKS',
- PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS'
+ PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS',
+ EXPLORE = 'EXPLORE'
 }
 
 export type Queueable = {

packages/mobile/src/components/track/TrackCard.tsx

@@ -0,0 +1,157 @@
+import { useCallback } from 'react'
+
+import { useTrack, useCurrentUserId } from '@audius/common/api'
+import type { ID } from '@audius/common/models'
+import { SquareSizes, isContentUSDCPurchaseGated } from '@audius/common/models'
+import { formatCount, formatSeconds } from '@audius/common/utils'
+import { pick } from 'lodash'
+import type { GestureResponderEvent } from 'react-native'
+
+import {
+ Divider,
+ Flex,
+ IconHeart,
+ IconRepost,
+ Paper,
+ Text
+} from '@audius/harmony-native'
+import { UserLink } from 'app/components/user-link'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { LockedStatusBadge } from '../core'
+import { TrackImage } from '../image/TrackImage'
+import { TrackDownloadStatusIndicator } from '../offline-downloads'
+
+import { TrackCardSkeleton } from './TrackCardSkeleton'
+
+const messages = {
+ repost: 'Reposts',
+ favorites: 'Favorites',
+ hidden: 'Hidden'
+}
+
+type TrackCardProps = {
+ id: ID
+ onPress?: (e: GestureResponderEvent) => void
+ noNavigation?: boolean
+}
+
+export const TrackCard = (props: TrackCardProps) => {
+ const { id, onPress, noNavigation } = props
+
+ const { data: partialTrack } = useTrack(id, {
+ select: (track) =>
+ pick(
+ track,
+ 'title',
+ 'owner_id',
+ 'repost_count',
+ 'save_count',
+ 'is_unlisted',
+ 'access',
+ 'stream_conditions',
+ 'duration',
+ 'offline'
+ )
+ })
+ const {
+ title,
+ owner_id,
+ repost_count,
+ save_count,
+ is_unlisted,
+ access,
+ stream_conditions,
+ duration,
+ offline
+ } = partialTrack ?? {}
+ const { data: accountId } = useCurrentUserId()
+
+ const navigation = useNavigation()
+
+ const handlePress = useCallback(
+ (e: GestureResponderEvent) => {
+ onPress?.(e)
+ if (noNavigation) return
+ navigation.navigate('Track', { id })
+ },
+ [onPress, noNavigation, navigation, id]
+ )
+
+ if (!partialTrack) {
+ console.warn('Track missing for TrackCard, preventing render')
+ return <TrackCardSkeleton />
+ }
+
+ const isOwner = accountId === owner_id
+ const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+ return (
+ <Paper border='default' onPress={handlePress}>
+ <Flex p='s' gap='s'>
+ <TrackImage
+ trackId={id}
+ size={SquareSizes.SIZE_480_BY_480}
+ style={{ flex: 1 }}
+ />
+ <Text variant='title' textAlign='center' numberOfLines={1}>
+ {title}
+ </Text>
+ <UserLink
+ userId={owner_id!}
+ textAlign='center'
+ style={{ justifyContent: 'center' }}
+ />
+ {duration && (
+ <Text variant='body' size='s' textAlign='center' color='subdued'>
+ {formatSeconds(duration)}
+ </Text>
+ )}
+ </Flex>
+ <Divider orientation='horizontal' />
+ <Flex
+ direction='row'
+ gap='l'
+ pv='s'
+ justifyContent='center'
+ backgroundColor='surface1'
+ borderBottomLeftRadius='m'
+ borderBottomRightRadius='m'
+ >
+ {is_unlisted ? (
+ <Text
+ variant='body'
+ size='s'
+ strength='strong'
+ color='subdued'
+ // Ensures footer height is not affected
+ style={{ lineHeight: 16 }}
+ >
+ {messages.hidden}
+ </Text>
+ ) : (
+ <>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconRepost size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(repost_count ?? 0)}
+ </Text>
+ </Flex>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconHeart size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(save_count ?? 0)}
+ </Text>
+ </Flex>
+ </>
+ )}
+ {isPurchase && !isOwner ? (
+ <LockedStatusBadge variant='premium' locked={!access?.stream} />
+ ) : null}
+ {offline ? (
+ <TrackDownloadStatusIndicator trackId={id} size='s' />
+ ) : null}
+ </Flex>
+ </Paper>
+ )
+}

packages/common/src/api/index.ts

@@ -29,6 +29,7 @@ export * from './tan-query/events'
 
 // Explore
 export * from './tan-query/collection/useExploreContent'
+export * from './tan-query/explore/useBestSelling'
 
 // Lineups
 export * from './tan-query/lineups/useFeed'
@@ -95,6 +96,8 @@ export * from './tan-query/tracks/useFileSizes'
 export * from './tan-query/tracks/useTrackFileInfo'
 export * from './tan-query/tracks/useUpdateTrack'
 export * from './tan-query/tracks/useRemixedTracks'
+export * from './tan-query/tracks/useRecommendedTracks'
+export * from './tan-query/tracks/useRecentPremiumTracks'
 export * from './tan-query/tracks/useSuggestedPlaylistTracks'
 
 // Users

packages/common/src/api/tan-query/explore/useBestSelling.ts

@@ -0,0 +1,70 @@
+import { HashId, Id, BestSellingItem } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userCollectionMetadataFromSDK } from '~/adapters'
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import {
+ primeCollectionData,
+ primeTrackData,
+ useQueryContext
+} from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseBestSellingArgs = {
+ userId: ID | null | undefined
+}
+
+export type BestSellingItemWithId = BestSellingItem & { id: ID }
+
+export const getBestSellingQueryKey = ({ userId }: UseBestSellingArgs) => {
+ return [QUERY_KEYS.bestSellingAlbums, userId] as unknown as QueryKey<
+ BestSellingItemWithId[]
+ >
+}
+
+export const useBestSelling = <TResult = BestSellingItemWithId[]>(
+ options?: SelectableQueryOptions<BestSellingItemWithId[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+ return useQuery({
+ queryKey: getBestSellingQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [], related = {} } =
+ await sdk.full.explore.getFullBestSelling({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(
+ related?.tracks,
+ userTrackMetadataFromSDK
+ )
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ const playlists = transformAndCleanList(
+ related?.playlists,
+ userCollectionMetadataFromSDK
+ )
+
+ primeCollectionData({
+ collections: playlists,
+ queryClient
+ })
+
+ return data.map((item) => ({ ...item, id: HashId.parse(item.contentId) }))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -29,6 +29,7 @@ export const QUERY_KEYS = {
  userTracksByHandle: 'userTracksByHandle',
  userPlaylists: 'userPlaylists',
  userAlbums: 'userAlbums',
+ bestSellingAlbums: 'bestSellingAlbums',
  userCollectibles: 'userCollectibles',
  collection: 'collection',
  collections: 'collections',
@@ -71,6 +72,8 @@ export const QUERY_KEYS = {
  purchasers: 'purchasers',
  purchasersCount: 'purchasersCount',
  remixedTracks: 'remixedTracks',
+ recommendedTracks: 'recommendedTracks',
+ recentPremiumTracks: 'recentPremiumTracks',
  mutedUsers: 'mutedUsers',
  salesAggregate: 'salesAggregate',
  usdcTransactionsCount: 'usdcTransactionsCount',

packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts

@@ -0,0 +1,49 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecentPremiumTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecentPremiumTracksQueryKey = ({
+ userId
+}: UseRecentPremiumTracksArgs) => {
+ return [QUERY_KEYS.recentPremiumTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecentPremiumTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecentPremiumTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.tracks.getRecentPremiumTracks({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/tracks/useRecommendedTracks.ts

@@ -0,0 +1,51 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecommendedTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecommendedTracksQueryKey = ({
+ userId
+}: UseRecommendedTracksArgs) => {
+ return [QUERY_KEYS.recommendedTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecommendedTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecommendedTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ if (!currentUserId) return []
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.users.getUserRecommendedTracks({
+ id: Id.parse(currentUserId),
+ userId: Id.parse(currentUserId)
+ })
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/messages/explore.ts

@@ -4,6 +4,9 @@ export const exploreMessages = {
  searchPlaceholder: 'What do you want to listen to?',
  featuredPlaylists: 'Community Playlists',
  featuredRemixContests: 'Featured Remix Contests',
+ forYou: 'For You',
+ recentlyListedForSale: 'Recently Listed for Sale',
+ bestSelling: 'Best Selling',
  artistSpotlight: 'Artist Spotlight',
  labelSpotlight: 'Label Spotlight',
  exploreByMood: 'Explore by Mood',

packages/common/src/store/queue/types.ts

@@ -25,7 +25,8 @@ export enum QueueSource {
  CHAT_TRACKS = 'CHAT_TRACKS',
  CHAT_PLAYLIST_TRACKS = 'CHAT_PLAYLIST_TRACKS',
  EXPLORE_PREMIUM_TRACKS = 'EXPLORE_PREMIUM_TRACKS',
- PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS'
+ PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS',
+ EXPLORE = 'EXPLORE'
 }
 
 export type Queueable = {

packages/mobile/src/components/track/TrackCard.tsx

@@ -0,0 +1,157 @@
+import { useCallback } from 'react'
+
+import { useTrack, useCurrentUserId } from '@audius/common/api'
+import type { ID } from '@audius/common/models'
+import { SquareSizes, isContentUSDCPurchaseGated } from '@audius/common/models'
+import { formatCount, formatSeconds } from '@audius/common/utils'
+import { pick } from 'lodash'
+import type { GestureResponderEvent } from 'react-native'
+
+import {
+ Divider,
+ Flex,
+ IconHeart,
+ IconRepost,
+ Paper,
+ Text
+} from '@audius/harmony-native'
+import { UserLink } from 'app/components/user-link'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { LockedStatusBadge } from '../core'
+import { TrackImage } from '../image/TrackImage'
+import { TrackDownloadStatusIndicator } from '../offline-downloads'
+
+import { TrackCardSkeleton } from './TrackCardSkeleton'
+
+const messages = {
+ repost: 'Reposts',
+ favorites: 'Favorites',
+ hidden: 'Hidden'
+}
+
+type TrackCardProps = {
+ id: ID
+ onPress?: (e: GestureResponderEvent) => void
+ noNavigation?: boolean
+}
+
+export const TrackCard = (props: TrackCardProps) => {
+ const { id, onPress, noNavigation } = props
+
+ const { data: partialTrack } = useTrack(id, {
+ select: (track) =>
+ pick(
+ track,
+ 'title',
+ 'owner_id',
+ 'repost_count',
+ 'save_count',
+ 'is_unlisted',
+ 'access',
+ 'stream_conditions',
+ 'duration',
+ 'offline'
+ )
+ })
+ const {
+ title,
+ owner_id,
+ repost_count,
+ save_count,
+ is_unlisted,
+ access,
+ stream_conditions,
+ duration,
+ offline
+ } = partialTrack ?? {}
+ const { data: accountId } = useCurrentUserId()
+
+ const navigation = useNavigation()
+
+ const handlePress = useCallback(
+ (e: GestureResponderEvent) => {
+ onPress?.(e)
+ if (noNavigation) return
+ navigation.navigate('Track', { id })
+ },
+ [onPress, noNavigation, navigation, id]
+ )
+
+ if (!partialTrack) {
+ console.warn('Track missing for TrackCard, preventing render')
+ return <TrackCardSkeleton />
+ }
+
+ const isOwner = accountId === owner_id
+ const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+ return (
+ <Paper border='default' onPress={handlePress}>
+ <Flex p='s' gap='s'>
+ <TrackImage
+ trackId={id}
+ size={SquareSizes.SIZE_480_BY_480}
+ style={{ flex: 1 }}
+ />
+ <Text variant='title' textAlign='center' numberOfLines={1}>
+ {title}
+ </Text>
+ <UserLink
+ userId={owner_id!}
+ textAlign='center'
+ style={{ justifyContent: 'center' }}
+ />
+ {duration && (
+ <Text variant='body' size='s' textAlign='center' color='subdued'>
+ {formatSeconds(duration)}
+ </Text>
+ )}
+ </Flex>
+ <Divider orientation='horizontal' />
+ <Flex
+ direction='row'
+ gap='l'
+ pv='s'
+ justifyContent='center'
+ backgroundColor='surface1'
+ borderBottomLeftRadius='m'
+ borderBottomRightRadius='m'
+ >
+ {is_unlisted ? (
+ <Text
+ variant='body'
+ size='s'
+ strength='strong'
+ color='subdued'
+ // Ensures footer height is not affected
+ style={{ lineHeight: 16 }}
+ >
+ {messages.hidden}
+ </Text>
+ ) : (
+ <>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconRepost size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(repost_count ?? 0)}
+ </Text>
+ </Flex>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconHeart size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(save_count ?? 0)}
+ </Text>
+ </Flex>
+ </>
+ )}
+ {isPurchase && !isOwner ? (
+ <LockedStatusBadge variant='premium' locked={!access?.stream} />
+ ) : null}
+ {offline ? (
+ <TrackDownloadStatusIndicator trackId={id} size='s' />
+ ) : null}
+ </Flex>
+ </Paper>
+ )
+}

packages/common/src/api/index.ts

@@ -29,6 +29,7 @@ export * from './tan-query/events'
 
 // Explore
 export * from './tan-query/collection/useExploreContent'
+export * from './tan-query/explore/useBestSelling'
 
 // Lineups
 export * from './tan-query/lineups/useFeed'
@@ -95,6 +96,8 @@ export * from './tan-query/tracks/useFileSizes'
 export * from './tan-query/tracks/useTrackFileInfo'
 export * from './tan-query/tracks/useUpdateTrack'
 export * from './tan-query/tracks/useRemixedTracks'
+export * from './tan-query/tracks/useRecommendedTracks'
+export * from './tan-query/tracks/useRecentPremiumTracks'
 export * from './tan-query/tracks/useSuggestedPlaylistTracks'
 
 // Users

packages/common/src/api/tan-query/explore/useBestSelling.ts

@@ -0,0 +1,70 @@
+import { HashId, Id, BestSellingItem } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userCollectionMetadataFromSDK } from '~/adapters'
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import {
+ primeCollectionData,
+ primeTrackData,
+ useQueryContext
+} from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseBestSellingArgs = {
+ userId: ID | null | undefined
+}
+
+export type BestSellingItemWithId = BestSellingItem & { id: ID }
+
+export const getBestSellingQueryKey = ({ userId }: UseBestSellingArgs) => {
+ return [QUERY_KEYS.bestSellingAlbums, userId] as unknown as QueryKey<
+ BestSellingItemWithId[]
+ >
+}
+
+export const useBestSelling = <TResult = BestSellingItemWithId[]>(
+ options?: SelectableQueryOptions<BestSellingItemWithId[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+ return useQuery({
+ queryKey: getBestSellingQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [], related = {} } =
+ await sdk.full.explore.getFullBestSelling({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(
+ related?.tracks,
+ userTrackMetadataFromSDK
+ )
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ const playlists = transformAndCleanList(
+ related?.playlists,
+ userCollectionMetadataFromSDK
+ )
+
+ primeCollectionData({
+ collections: playlists,
+ queryClient
+ })
+
+ return data.map((item) => ({ ...item, id: HashId.parse(item.contentId) }))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/queryKeys.ts

@@ -29,6 +29,7 @@ export const QUERY_KEYS = {
  userTracksByHandle: 'userTracksByHandle',
  userPlaylists: 'userPlaylists',
  userAlbums: 'userAlbums',
+ bestSellingAlbums: 'bestSellingAlbums',
  userCollectibles: 'userCollectibles',
  collection: 'collection',
  collections: 'collections',
@@ -71,6 +72,8 @@ export const QUERY_KEYS = {
  purchasers: 'purchasers',
  purchasersCount: 'purchasersCount',
  remixedTracks: 'remixedTracks',
+ recommendedTracks: 'recommendedTracks',
+ recentPremiumTracks: 'recentPremiumTracks',
  mutedUsers: 'mutedUsers',
  salesAggregate: 'salesAggregate',
  usdcTransactionsCount: 'usdcTransactionsCount',

packages/common/src/api/tan-query/tracks/useRecentPremiumTracks.ts

@@ -0,0 +1,49 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecentPremiumTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecentPremiumTracksQueryKey = ({
+ userId
+}: UseRecentPremiumTracksArgs) => {
+ return [QUERY_KEYS.recentPremiumTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecentPremiumTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecentPremiumTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.tracks.getRecentPremiumTracks({
+ userId: currentUserId ? Id.parse(currentUserId) : undefined
+ })
+
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/api/tan-query/tracks/useRecommendedTracks.ts

@@ -0,0 +1,51 @@
+import { HashId, Id } from '@audius/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { userTrackMetadataFromSDK } from '~/adapters/track'
+import { transformAndCleanList } from '~/adapters/utils'
+import { primeTrackData, useQueryContext } from '~/api/tan-query/utils'
+import { ID } from '~/models'
+
+import { QUERY_KEYS } from '../queryKeys'
+import { QueryKey, SelectableQueryOptions } from '../types'
+import { useCurrentUserId } from '../users/account/useCurrentUserId'
+
+export type UseRecommendedTracksArgs = {
+ userId: ID | null | undefined
+}
+
+export const getRecommendedTracksQueryKey = ({
+ userId
+}: UseRecommendedTracksArgs) => {
+ return [QUERY_KEYS.recommendedTracks, userId] as unknown as QueryKey<ID[]>
+}
+
+export const useRecommendedTracks = <TResult = ID[]>(
+ options?: SelectableQueryOptions<ID[], TResult>
+) => {
+ const { audiusSdk } = useQueryContext()
+ const { data: currentUserId } = useCurrentUserId()
+ const queryClient = useQueryClient()
+
+ return useQuery({
+ queryKey: getRecommendedTracksQueryKey({ userId: currentUserId }),
+ queryFn: async () => {
+ if (!currentUserId) return []
+ const sdk = await audiusSdk()
+ const { data = [] } = await sdk.full.users.getUserRecommendedTracks({
+ id: Id.parse(currentUserId),
+ userId: Id.parse(currentUserId)
+ })
+ const tracks = transformAndCleanList(data, userTrackMetadataFromSDK)
+
+ primeTrackData({
+ tracks,
+ queryClient
+ })
+
+ return data.map((item) => HashId.parse(item.id))
+ },
+ ...options,
+ enabled: options?.enabled !== false
+ })
+}

packages/common/src/messages/explore.ts

@@ -4,6 +4,9 @@ export const exploreMessages = {
  searchPlaceholder: 'What do you want to listen to?',
  featuredPlaylists: 'Community Playlists',
  featuredRemixContests: 'Featured Remix Contests',
+ forYou: 'For You',
+ recentlyListedForSale: 'Recently Listed for Sale',
+ bestSelling: 'Best Selling',
  artistSpotlight: 'Artist Spotlight',
  labelSpotlight: 'Label Spotlight',
  exploreByMood: 'Explore by Mood',

packages/common/src/store/queue/types.ts

@@ -25,7 +25,8 @@ export enum QueueSource {
  CHAT_TRACKS = 'CHAT_TRACKS',
  CHAT_PLAYLIST_TRACKS = 'CHAT_PLAYLIST_TRACKS',
  EXPLORE_PREMIUM_TRACKS = 'EXPLORE_PREMIUM_TRACKS',
- PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS'
+ PICK_WINNERS_TRACKS = 'PICK_WINNERS_TRACKS',
+ EXPLORE = 'EXPLORE'
 }
 
 export type Queueable = {

packages/mobile/src/components/track/TrackCard.tsx

@@ -0,0 +1,157 @@
+import { useCallback } from 'react'
+
+import { useTrack, useCurrentUserId } from '@audius/common/api'
+import type { ID } from '@audius/common/models'
+import { SquareSizes, isContentUSDCPurchaseGated } from '@audius/common/models'
+import { formatCount, formatSeconds } from '@audius/common/utils'
+import { pick } from 'lodash'
+import type { GestureResponderEvent } from 'react-native'
+
+import {
+ Divider,
+ Flex,
+ IconHeart,
+ IconRepost,
+ Paper,
+ Text
+} from '@audius/harmony-native'
+import { UserLink } from 'app/components/user-link'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { LockedStatusBadge } from '../core'
+import { TrackImage } from '../image/TrackImage'
+import { TrackDownloadStatusIndicator } from '../offline-downloads'
+
+import { TrackCardSkeleton } from './TrackCardSkeleton'
+
+const messages = {
+ repost: 'Reposts',
+ favorites: 'Favorites',
+ hidden: 'Hidden'
+}
+
+type TrackCardProps = {
+ id: ID
+ onPress?: (e: GestureResponderEvent) => void
+ noNavigation?: boolean
+}
+
+export const TrackCard = (props: TrackCardProps) => {
+ const { id, onPress, noNavigation } = props
+
+ const { data: partialTrack } = useTrack(id, {
+ select: (track) =>
+ pick(
+ track,
+ 'title',
+ 'owner_id',
+ 'repost_count',
+ 'save_count',
+ 'is_unlisted',
+ 'access',
+ 'stream_conditions',
+ 'duration',
+ 'offline'
+ )
+ })
+ const {
+ title,
+ owner_id,
+ repost_count,
+ save_count,
+ is_unlisted,
+ access,
+ stream_conditions,
+ duration,
+ offline
+ } = partialTrack ?? {}
+ const { data: accountId } = useCurrentUserId()
+
+ const navigation = useNavigation()
+
+ const handlePress = useCallback(
+ (e: GestureResponderEvent) => {
+ onPress?.(e)
+ if (noNavigation) return
+ navigation.navigate('Track', { id })
+ },
+ [onPress, noNavigation, navigation, id]
+ )
+
+ if (!partialTrack) {
+ console.warn('Track missing for TrackCard, preventing render')
+ return <TrackCardSkeleton />
+ }
+
+ const isOwner = accountId === owner_id
+ const isPurchase = isContentUSDCPurchaseGated(stream_conditions)
+
+ return (
+ <Paper border='default' onPress={handlePress}>
+ <Flex p='s' gap='s'>
+ <TrackImage
+ trackId={id}
+ size={SquareSizes.SIZE_480_BY_480}
+ style={{ flex: 1 }}
+ />
+ <Text variant='title' textAlign='center' numberOfLines={1}>
+ {title}
+ </Text>
+ <UserLink
+ userId={owner_id!}
+ textAlign='center'
+ style={{ justifyContent: 'center' }}
+ />
+ {duration && (
+ <Text variant='body' size='s' textAlign='center' color='subdued'>
+ {formatSeconds(duration)}
+ </Text>
+ )}
+ </Flex>
+ <Divider orientation='horizontal' />
+ <Flex
+ direction='row'
+ gap='l'
+ pv='s'
+ justifyContent='center'
+ backgroundColor='surface1'
+ borderBottomLeftRadius='m'
+ borderBottomRightRadius='m'
+ >
+ {is_unlisted ? (
+ <Text
+ variant='body'
+ size='s'
+ strength='strong'
+ color='subdued'
+ // Ensures footer height is not affected
+ style={{ lineHeight: 16 }}
+ >
+ {messages.hidden}
+ </Text>
+ ) : (
+ <>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconRepost size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(repost_count ?? 0)}
+ </Text>
+ </Flex>
+ <Flex direction='row' gap='xs' alignItems='center'>
+ <IconHeart size='s' color='subdued' />
+ <Text variant='label' color='subdued'>
+ {formatCount(save_count ?? 0)}
+ </Text>
+ </Flex>
+ </>
+ )}
+ {isPurchase && !isOwner ? (
+ <LockedStatusBadge variant='premium' locked={!access?.stream} />
+ ) : null}
+ {offline ? (
+ <TrackDownloadStatusIndicator trackId={id} size='s' />
+ ) : null}
+ </Flex>
+ </Paper>
+ )
+}