diff --git a/packages/mobile/src/screens/contest-screen/ContestStemsCard.tsx b/packages/mobile/src/screens/contest-screen/ContestStemsCard.tsx index c9080dad365..4a7e12ed35b 100644 --- a/packages/mobile/src/screens/contest-screen/ContestStemsCard.tsx +++ b/packages/mobile/src/screens/contest-screen/ContestStemsCard.tsx @@ -56,6 +56,7 @@ import { UserLink } from 'app/components/user-link' const messages = { heading: 'STEMS & DOWNLOADS', + downloadHeading: 'DOWNLOAD', publicFree: 'Public Free', download: 'Download', downloadAll: 'Download All', @@ -88,6 +89,7 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => { ? (source as { uri?: string }).uri : undefined const stemsCount = stems.length + const hasStems = stemsCount > 0 const { data: fileSizes } = useFileSizes( { @@ -104,7 +106,8 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => { const STEMS_COLLAPSE_THRESHOLD = 5 const stemsBelowThreshold = stemsCount <= STEMS_COLLAPSE_THRESHOLD const [expandedOverride, setExpandedOverride] = useState(null) - const expanded = expandedOverride ?? stemsBelowThreshold + const expanded = hasStems && (expandedOverride ?? stemsBelowThreshold) + const heading = hasStems ? messages.heading : messages.downloadHeading const setExpanded = (next: boolean | ((prev: boolean) => boolean)) => { setExpandedOverride((prev) => { const current = prev ?? stemsBelowThreshold @@ -186,7 +189,7 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => { return ( - {messages.heading} + {heading} {/* Inner bordered container — separates the source-track + @@ -219,27 +222,29 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => { - setExpanded((v) => !v)} - accessibilityRole='button' - accessibilityLabel={expanded ? 'Collapse stems' : 'Expand stems'} - style={{ - padding: 4, - alignItems: 'center', - justifyContent: 'center' - }} - > - setExpanded((v) => !v)} + accessibilityRole='button' + accessibilityLabel={expanded ? 'Collapse stems' : 'Expand stems'} style={{ - // Rotate the caret via transform — react-native - // doesn't support CSS transitions, so this is a - // discrete flip rather than an animated rotation. - transform: [{ rotate: expanded ? '180deg' : '0deg' }] + padding: 4, + alignItems: 'center', + justifyContent: 'center' }} > - - - + + + + + ) : null} {/* Footer row: N Stems outlined pill + Download All text. */} @@ -251,7 +256,7 @@ export const ContestStemsCard = ({ trackId }: ContestStemsCardProps) => { justifyContent='space-between' gap='m' > - {stemsCount > 0 ? ( + {hasStems ? ( { - {stemsCount > 0 ? messages.downloadAll : messages.download} + {hasStems ? messages.downloadAll : messages.download} diff --git a/packages/mobile/src/screens/track-screen/DownloadSection.tsx b/packages/mobile/src/screens/track-screen/DownloadSection.tsx index b3efc2181c1..ccaf7376a19 100644 --- a/packages/mobile/src/screens/track-screen/DownloadSection.tsx +++ b/packages/mobile/src/screens/track-screen/DownloadSection.tsx @@ -37,6 +37,7 @@ const STEM_INDEX_OFFSET_WITH_ORIGINAL_TRACK = 2 const messages = { title: 'Stems & Downloads', + downloadTitle: 'Download', // TODO: When upgrading react native to >0.74, we need to remove the $ here // and also update android to include jsc+intl // https://github.com/facebook/hermes/issues/23 @@ -152,7 +153,10 @@ export const DownloadSection = ({ trackId }: { trackId: ID }) => { ]) const hasStems = stemTracks.length > 0 + const sectionTitle = hasStems ? messages.title : messages.downloadTitle const downloadButtonText = hasStems ? messages.downloadAll : messages.download + const isSingleTrackDownload = !!track?.is_downloadable && !hasStems + const isDownloadsExpanded = !isSingleTrackDownload && isExpanded const handleDownloadButtonPress = useCallback(() => { if (hasStems) { @@ -164,15 +168,17 @@ export const DownloadSection = ({ trackId }: { trackId: ID }) => { const renderHeader = () => { return ( - + - {messages.title} + {sectionTitle} - + {isSingleTrackDownload ? null : ( + + )} {shouldDisplayPremiumDownloadLocked && formattedPrice !== undefined ? (