diff --git a/packages/mobile/src/components/lineup-tile/LineupTile.tsx b/packages/mobile/src/components/lineup-tile/LineupTile.tsx index 1c4e565b2fb..1aedf9081e0 100644 --- a/packages/mobile/src/components/lineup-tile/LineupTile.tsx +++ b/packages/mobile/src/components/lineup-tile/LineupTile.tsx @@ -148,26 +148,28 @@ export const LineupTile = ({ {children} - + {isReadonly ? null : ( + + )} ) } diff --git a/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx b/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx index efdd17e97b9..67c0c0c390b 100644 --- a/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx +++ b/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx @@ -4,7 +4,8 @@ import { isContentUSDCPurchaseGated } from '@audius/common/models' import type { FavoriteType, ID, AccessConditions } from '@audius/common/models' import { repostsUserListActions, - favoritesUserListActions + favoritesUserListActions, + PurchaseableContentType } from '@audius/common/store' import type { RepostType } from '@audius/common/store' import { dayjs, formatCount } from '@audius/common/utils' @@ -28,6 +29,7 @@ import { makeStyles, flexRowCentered } from 'app/styles' import { spacing } from 'app/styles/spacing' import { useThemeColors } from 'app/utils/theme' +import { LineupTileAccessStatus } from './LineupTileAccessStatus' import { LineupTileGatedContentTypeTag } from './LineupTilePremiumContentTypeTag' import { LineupTileRankIcon } from './LineupTileRankIcon' import { useStyles as useTrackTileStyles } from './styles' @@ -139,6 +141,7 @@ export const LineupTileStats = ({ const navigation = useNavigation() const hasEngagement = Boolean(repostCount || saveCount) + const isPurchase = isContentUSDCPurchaseGated(streamConditions) const handlePressFavorites = useCallback(() => { dispatch(setFavorite(id, favoriteType)) @@ -158,6 +161,41 @@ export const LineupTileStats = ({ const isReadonly = variant === 'readonly' const isScheduledRelease = isUnlisted && moment(releaseDate).isAfter(moment()) + + const renderLockedContentOrPlayCount = () => { + if (streamConditions && !isOwner) { + if (isPurchase) { + return ( + + ) + } + return ( + + ) + } + + return ( + !hidePlays && + playCount !== undefined && + playCount > 0 && ( + + {formatPlayCount(playCount)} + + ) + ) + } + return ( @@ -259,18 +297,7 @@ export const LineupTileStats = ({ ) : null} - {streamConditions && !isOwner ? ( - - ) : !hidePlays ? ( - - {formatPlayCount(playCount)} - - ) : null} + {renderLockedContentOrPlayCount()} ) } diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx index 9673fc24fd7..9f69216b1d2 100644 --- a/packages/web/src/components/track/desktop/TrackTile.tsx +++ b/packages/web/src/components/track/desktop/TrackTile.tsx @@ -77,7 +77,7 @@ const RankAndIndexIndicator = ({ ) } -const renderLockedOrPlaysContent = ({ +const renderLockedContentOrPlayCount = ({ hasStreamAccess, fieldVisibility, isOwner, @@ -366,7 +366,7 @@ const TrackTile = ({ {!isLoading - ? renderLockedOrPlaysContent({ + ? renderLockedContentOrPlayCount({ hasStreamAccess, fieldVisibility, isOwner, diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx index 9c8c079a8df..8ba1251c896 100644 --- a/packages/web/src/components/track/mobile/TrackTile.tsx +++ b/packages/web/src/components/track/mobile/TrackTile.tsx @@ -86,7 +86,7 @@ type LockedOrPlaysContentProps = Pick< onClickGatedUnlockPill: (e: MouseEvent) => void } -const renderLockedOrPlaysContent = ({ +const renderLockedContentOrPlayCount = ({ hasStreamAccess, fieldVisibility, isOwner, @@ -477,7 +477,7 @@ const TrackTile = (props: CombinedProps) => { className={cn(styles.bottomRight, fadeIn)} > {!isLoading - ? renderLockedOrPlaysContent({ + ? renderLockedContentOrPlayCount({ hasStreamAccess, fieldVisibility, isOwner,