From b6be3583d4be91ce640d0d8eb87e2ed400e6f4d7 Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Mon, 6 May 2024 14:51:32 -0400 Subject: [PATCH 1/3] [PAY-2809] Mobile premium album tracklist UI updates --- .../components/track-list/TrackListItem.tsx | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/packages/mobile/src/components/track-list/TrackListItem.tsx b/packages/mobile/src/components/track-list/TrackListItem.tsx index 9129b409fba..71992d04e5a 100644 --- a/packages/mobile/src/components/track-list/TrackListItem.tsx +++ b/packages/mobile/src/components/track-list/TrackListItem.tsx @@ -5,7 +5,14 @@ import { useGatedContentAccess, useIsGatedContentPlaylistAddable } from '@audius/common/hooks' -import type { Collection, ID, UID, Track, User } from '@audius/common/models' +import { + type Collection, + type ID, + type UID, + type Track, + type User, + isContentUSDCPurchaseGated +} from '@audius/common/models' import { FeatureFlags } from '@audius/common/services' import { accountSelectors, @@ -41,7 +48,6 @@ import { import UserBadges from 'app/components/user-badges' import { useFeatureFlag } from 'app/hooks/useRemoteConfig' import { flexRowCentered, font, makeStyles } from 'app/styles' -import { useColor } from 'app/utils/theme' import { TrackDownloadStatusIndicator } from '../offline-downloads/TrackDownloadStatusIndicator' @@ -238,7 +244,8 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => { title, track_id, owner_id, - ddex_app: ddexApp + ddex_app: ddexApp, + stream_conditions: streamConditions } = track const { isEnabled: isEditAlbumsEnabled } = useFeatureFlag( FeatureFlags.EDIT_ALBUMS @@ -266,11 +273,11 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => { return isActive && getPlaying(state) }) const isPlaylistAddable = useIsGatedContentPlaylistAddable(track) + const isPlayable = !isLocked || isContentUSDCPurchaseGated(streamConditions) const messages = getMessages({ isDeleted }) const styles = useStyles() const dispatch = useDispatch() - const white = useColor('white') const { spacing } = useTheme() const [titleWidth, setTitleWidth] = useState(0) @@ -285,7 +292,12 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => { ) const onPressTrack = () => { - if (uid && !isLocked && !isDeleted && togglePlay) { + if ( + uid && + (!isLocked || isContentUSDCPurchaseGated(streamConditions)) && + !isDeleted && + togglePlay + ) { togglePlay(uid, track_id) } } @@ -407,7 +419,7 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => { {!hideArt ? ( { isPlaying={isPlaying} isUnlisted={isUnlisted} /> - ) : isActive && !isDeleted && !isLocked ? ( + ) : isActive && !isDeleted && isPlayable ? ( { { {!isDeleted && isLocked ? ( - - - {messages.locked} - + ) : null} {trackItemAction === 'overflow' ? ( Date: Mon, 6 May 2024 18:30:38 -0400 Subject: [PATCH 2/3] PR comments --- .../mobile/src/components/track-list/TrackListItem.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/mobile/src/components/track-list/TrackListItem.tsx b/packages/mobile/src/components/track-list/TrackListItem.tsx index 71992d04e5a..585012dc025 100644 --- a/packages/mobile/src/components/track-list/TrackListItem.tsx +++ b/packages/mobile/src/components/track-list/TrackListItem.tsx @@ -273,6 +273,8 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => { return isActive && getPlaying(state) }) const isPlaylistAddable = useIsGatedContentPlaylistAddable(track) + // Unlike other types of gated tracks, USDC-gated tracks have previews so we + // should show the play button for them. const isPlayable = !isLocked || isContentUSDCPurchaseGated(streamConditions) const messages = getMessages({ isDeleted }) @@ -292,12 +294,7 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => { ) const onPressTrack = () => { - if ( - uid && - (!isLocked || isContentUSDCPurchaseGated(streamConditions)) && - !isDeleted && - togglePlay - ) { + if (uid && isPlayable && !isDeleted && togglePlay) { togglePlay(uid, track_id) } } From 88fcea969b34538eb2c82b81a053d32ea979b37a Mon Sep 17 00:00:00 2001 From: Dharit Tantiviramanond Date: Mon, 6 May 2024 18:52:30 -0400 Subject: [PATCH 3/3] incorporate isDelete --- .../src/components/track-list/TrackListItem.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mobile/src/components/track-list/TrackListItem.tsx b/packages/mobile/src/components/track-list/TrackListItem.tsx index 585012dc025..ad33cb4d7b5 100644 --- a/packages/mobile/src/components/track-list/TrackListItem.tsx +++ b/packages/mobile/src/components/track-list/TrackListItem.tsx @@ -273,9 +273,9 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => { return isActive && getPlaying(state) }) const isPlaylistAddable = useIsGatedContentPlaylistAddable(track) - // Unlike other types of gated tracks, USDC-gated tracks have previews so we - // should show the play button for them. - const isPlayable = !isLocked || isContentUSDCPurchaseGated(streamConditions) + // Unlike other gated tracks, USDC purchase gated tracks are playable because they have previews + const isPlayable = + !isDeleted && (!isLocked || isContentUSDCPurchaseGated(streamConditions)) const messages = getMessages({ isDeleted }) const styles = useStyles() @@ -294,7 +294,7 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => { ) const onPressTrack = () => { - if (uid && isPlayable && !isDeleted && togglePlay) { + if (uid && isPlayable && togglePlay) { togglePlay(uid, track_id) } } @@ -416,7 +416,7 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => { {!hideArt ? ( { isPlaying={isPlaying} isUnlisted={isUnlisted} /> - ) : isActive && !isDeleted && isPlayable ? ( + ) : isActive && isPlayable ? ( {