[C-2336, C-2388] Playlist style and bug fixes (#3149)

AudiusProject · Apr 3, 2023 · cbd5814 · cbd5814
1 parent 1abd3f6
commit cbd5814
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/apps/audius-client/packages/mobile/src/components/details-tile/DetailsTile.tsx b/apps/audius-client/packages/mobile/src/components/details-tile/DetailsTile.tsx
@@ -194,6 +194,7 @@ export const DetailsTile = ({
   hideRepostCount,
   hideShare,
   isPlaying,
+  isPlayable = true,
   onPressFavorites,
   onPressOverflow,
   onPressPlay,
@@ -370,6 +371,7 @@ export const DetailsTile = ({
                 iconPosition='left'
                 icon={isPlaying ? IconPause : PlayIcon}
                 onPress={handlePressPlay}
+                disabled={!isPlayable}
                 fullWidth
               />
             ) : null}

diff --git a/apps/audius-client/packages/mobile/src/components/details-tile/types.ts b/apps/audius-client/packages/mobile/src/components/details-tile/types.ts
@@ -61,6 +61,9 @@ export type DetailsTileProps = {
   /** Is the item playing */
   isPlaying?: boolean
 
+  /** Is the item loaded and in a playable state */
+  isPlayable?: boolean
+
   /** Function to call when the favorites count is pressed */
   onPressFavorites?: GestureResponderHandler
 

diff --git a/...dius-client/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx b/...dius-client/packages/mobile/src/screens/collection-screen/CollectionScreenDetailsTile.tsx
@@ -173,7 +173,7 @@ export const CollectionScreenDetailsTile = ({
     } else if (!isPlaying && isQueued) {
       dispatch(tracksActions.play())
       recordPlay(playingTrackId)
-    } else if (trackCount > 0) {
+    } else if (trackCount > 0 && firstTrack) {
       dispatch(tracksActions.play(firstTrack.uid))
       recordPlay(firstTrack.id)
     }
@@ -222,6 +222,8 @@ export const CollectionScreenDetailsTile = ({
     trackCount
   ])
 
+  const isPlayable = isQueued || (trackCount > 0 && !!firstTrack)
+
   return (
     <DetailsTile
       {...detailsTileProps}
@@ -236,6 +238,7 @@ export const CollectionScreenDetailsTile = ({
       renderHeader={renderHeader}
       renderImage={renderImage}
       onPressPlay={handlePressPlay}
+      isPlayable={isPlayable}
     />
   )
 }
diff --git a/...audius-client/packages/mobile/src/screens/mood-collection-screen/MoodCollectionScreen.tsx b/...audius-client/packages/mobile/src/screens/mood-collection-screen/MoodCollectionScreen.tsx
@@ -13,6 +13,7 @@ import { CollectionList } from 'app/components/collection-list'
 import { Screen, ScreenContent, ScreenHeader } from 'app/components/core'
 import { WithLoader } from 'app/components/with-loader/WithLoader'
 import type { ExploreMoodCollection } from 'app/screens/explore-screen/collections'
+import { spacing } from 'app/styles/spacing'
 const { getCollections, getStatus } = explorePageCollectionsSelectors
 const { fetch } = explorePageCollectionsActions
 
@@ -45,7 +46,10 @@ export const MoodCollectionScreen = ({
       <ScreenHeader text={`${collection.title} Playlists`} />
       <ScreenContent>
         <WithLoader loading={status === Status.LOADING}>
-          <CollectionList collection={exploreData} />
+          <CollectionList
+            collection={exploreData}
+            style={{ marginBottom: spacing(12) }}
+          />
         </WithLoader>
       </ScreenContent>
     </Screen>