[PAY-2398] Support stems mobile web (#7504)

AudiusProject · Feb 7, 2024 · 152b1f4 · 152b1f4
1 parent c092b7c
commit 152b1f4
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 51 deletions.
diff --git a/packages/web/src/components/track/DownloadSection.tsx b/packages/web/src/components/track/DownloadSection.tsx
@@ -184,6 +184,7 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
     <Box border='default' borderRadius='m' css={{ overflow: 'hidden' }}>
       <Flex direction='column'>
         <Flex
+          gap='m'
           direction='row'
           justifyContent='space-between'
           alignItems='center'
@@ -193,56 +194,63 @@ export const DownloadSection = ({ trackId }: DownloadSectionProps) => {
             cursor: 'pointer'
           }}
         >
-          <Flex direction='row' alignItems='center' gap='s'>
-            <Icon icon={IconReceive} size='large' />
-            <Text variant='label' size='l' strength='strong'>
-              {messages.title}
-            </Text>
-          </Flex>
-          <Flex gap='l' alignItems='center'>
-            {shouldDisplayPremiumDownloadLocked &&
-            formattedPrice !== undefined ? (
-              <Button
-                variant='primary'
-                size='small'
-                color='lightGreen'
-                onClick={handlePurchaseClick}
-              >
-                {messages.unlockAll(formattedPrice)}
-              </Button>
-            ) : null}
-            {shouldDisplayPremiumDownloadUnlocked ? (
-              <Flex gap='s'>
-                <Flex
-                  borderRadius='3xl'
-                  ph='s'
-                  css={{
-                    backgroundColor: 'var(--special-light-green)',
-                    paddingTop: '1px',
-                    paddingBottom: '1px'
-                  }}
+          <Flex
+            justifyContent='space-between'
+            wrap='wrap'
+            gap='m'
+            css={{ flexGrow: 1 }}
+          >
+            <Flex direction='row' alignItems='center' gap='s'>
+              <Icon icon={IconReceive} size='large' />
+              <Text variant='label' size='l' strength='strong'>
+                {messages.title}
+              </Text>
+            </Flex>
+            <Flex gap='l' alignItems='center'>
+              {shouldDisplayPremiumDownloadLocked &&
+              formattedPrice !== undefined ? (
+                <Button
+                  variant='primary'
+                  size='small'
+                  color='lightGreen'
+                  onClick={handlePurchaseClick}
                 >
-                  <IconLockUnlocked color='staticWhite' size='xs' />
+                  {messages.unlockAll(formattedPrice)}
+                </Button>
+              ) : null}
+              {shouldDisplayPremiumDownloadUnlocked ? (
+                <Flex gap='s'>
+                  <Flex
+                    borderRadius='3xl'
+                    ph='s'
+                    css={{
+                      backgroundColor: 'var(--special-light-green)',
+                      paddingTop: '1px',
+                      paddingBottom: '1px'
+                    }}
+                  >
+                    <IconLockUnlocked color='staticWhite' size='xs' />
+                  </Flex>
+                  <Text
+                    variant='label'
+                    size='l'
+                    strength='strong'
+                    color='subdued'
+                  >
+                    {messages.purchased}
+                  </Text>
                 </Flex>
-                <Text
-                  variant='label'
-                  size='l'
-                  strength='strong'
-                  color='subdued'
-                >
-                  {messages.purchased}
-                </Text>
-              </Flex>
-            ) : null}
-            <IconCaretDown
-              css={{
-                transition: 'transform var(--harmony-expressive)',
-                transform: expanded ? 'rotate(-180deg)' : undefined
-              }}
-              size='m'
-              color='default'
-            />
+              ) : null}
+            </Flex>
           </Flex>
+          <IconCaretDown
+            css={{
+              transition: 'transform var(--harmony-expressive)',
+              transform: expanded ? 'rotate(-180deg)' : undefined
+            }}
+            size='m'
+            color='default'
+          />
         </Flex>
         {shouldDisplayOwnerPremiumDownloads && formattedPrice ? (
           <Flex pl='l' pr='l' pb='l'>

diff --git a/packages/web/src/pages/track-page/components/mobile/TrackHeader.module.css b/packages/web/src/pages/track-page/components/mobile/TrackHeader.module.css
@@ -12,6 +12,7 @@
   border-radius: var(--unit-2);
   box-shadow: 0 0 1px 0 var(--tile-shadow-1), 0 1px 0 0 var(--tile-shadow-2),
     0 2px 5px -2px var(--tile-shadow-3);
+  text-align: left;
 }
 
 .borderOffset {

diff --git a/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx b/packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { Suspense, useCallback } from 'react'
 
 import { imageBlank as placeholderArt } from '@audius/common/assets'
 import {
@@ -12,7 +12,11 @@ import {
   AccessConditions
 } from '@audius/common/models'
 import { FeatureFlags } from '@audius/common/services'
-import { OverflowAction } from '@audius/common/store'
+import {
+  CommonState,
+  OverflowAction,
+  cacheTracksSelectors
+} from '@audius/common/store'
 import {
   getCanonicalName,
   formatSeconds,
@@ -27,10 +31,12 @@ import {
   IconPause,
   IconPlay,
   IconSpecialAccess,
-  IconCart
+  IconCart,
+  Box
 } from '@audius/harmony'
 import { Button, ButtonSize, ButtonType } from '@audius/stems'
 import cn from 'classnames'
+import { shallowEqual, useSelector } from 'react-redux'
 
 import CoSign from 'components/co-sign/CoSign'
 import HoverInfo from 'components/co-sign/HoverInfo'
@@ -42,6 +48,7 @@ import { UserLink } from 'components/link'
 import { SearchTag } from 'components/search/SearchTag'
 import { AiTrackSection } from 'components/track/AiTrackSection'
 import Badge from 'components/track/Badge'
+import { DownloadSection } from 'components/track/DownloadSection'
 import { GatedTrackSection } from 'components/track/GatedTrackSection'
 import { UserGeneratedText } from 'components/user-generated-text'
 import { useFlag } from 'hooks/useRemoteConfig'
@@ -194,7 +201,17 @@ const TrackHeader = ({
   goToFavoritesPage,
   goToRepostsPage
 }: TrackHeaderProps) => {
+  const isLosslessDownloadsEnabled = useFlag(
+    FeatureFlags.LOSSLESS_DOWNLOADS_ENABLED
+  )
   const { isEnabled: isEditAlbumsEnabled } = useFlag(FeatureFlags.EDIT_ALBUMS)
+  const { getTrack } = cacheTracksSelectors
+  const track = useSelector(
+    (state: CommonState) => getTrack(state, { id: trackId }),
+    shallowEqual
+  )
+  const hasDownloadableAssets =
+    track?.is_downloadable || (track?._stems?.length ?? 0) > 0
 
   const showSocials = !isUnlisted && hasStreamAccess
   const isUSDCPurchaseGated = isContentUSDCPurchaseGated(streamConditions)
@@ -486,8 +503,15 @@ const TrackHeader = ({
       <div className={cn(styles.infoSection, styles.withSectionDivider)}>
         {renderTrackLabels()}
       </div>
-      {renderDownloadButtons()}
       {renderTags()}
+      {!isLosslessDownloadsEnabled ? renderDownloadButtons() : null}
+      {isLosslessDownloadsEnabled && hasDownloadableAssets ? (
+        <Box pt='l' w='100%'>
+          <Suspense>
+            <DownloadSection trackId={trackId} />
+          </Suspense>
+        </Box>
+      ) : null}
     </div>
   )
 }