From 749c240e22c3d8df839b39d7a2347d37e21c233b Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Thu, 9 Nov 2023 20:52:25 -0800
Subject: [PATCH] [PAY-2126] Fix now playing play bar layouts (#6645)

---
 .../components/now-playing-drawer/PlayBar.tsx | 111 +++++++++++-------
 1 file changed, 67 insertions(+), 44 deletions(-)

diff --git a/packages/mobile/src/components/now-playing-drawer/PlayBar.tsx b/packages/mobile/src/components/now-playing-drawer/PlayBar.tsx
index 72b4a053dd4..ac8e0d8ea62 100644
--- a/packages/mobile/src/components/now-playing-drawer/PlayBar.tsx
+++ b/packages/mobile/src/components/now-playing-drawer/PlayBar.tsx
@@ -9,7 +9,7 @@ import {
   playerSelectors,
   usePremiumContentAccess
 } from '@audius/common'
-import { TouchableOpacity, Animated, View, Dimensions } from 'react-native'
+import { TouchableOpacity, Animated, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
 import IconLock from 'app/assets/images/iconLock.svg'
@@ -40,6 +40,7 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     alignItems: 'center',
     zIndex: zIndex.PLAY_BAR
   },
+  // Group: Favorite Button, Track Content, Play Button
   container: {
     height: '100%',
     width: '100%',
@@ -47,8 +48,28 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     paddingRight: spacing(3),
     gap: spacing(3),
     flexDirection: 'row',
+    alignItems: 'center'
+  },
+  favoriteContainer: {
+    flexShrink: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  trackContainer: {
+    paddingRight: spacing(1),
+    height: '100%',
+    width: '100%',
+    flexGrow: 1,
+    flexShrink: 1,
     alignItems: 'center',
-    justifyContent: 'flex-start'
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    gap: spacing(3)
+  },
+  playContainer: {
+    flexShrink: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   playIcon: {
     width: spacing(8),
@@ -58,46 +79,22 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     width: 28,
     height: 28
   },
-  trackInfo: {
-    height: '100%',
-    flexShrink: 1,
-    flexGrow: 1,
-    alignItems: 'center',
-    flexDirection: 'row',
-    gap: spacing(3)
-  },
+  // Group: Artwork, Text
   artworkContainer: {
-    position: 'relative',
-    height: 26,
-    width: 26,
     borderRadius: 2,
     overflow: 'hidden'
   },
-  artwork: {
-    height: '100%',
+  trackTextContainer: {
+    flexGrow: 1,
+    flexShrink: 1,
     width: '100%',
-    backgroundColor: palette.neutralLight7
-  },
-  lockOverlay: {
-    backgroundColor: '#000',
-    opacity: 0.4,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    elevation: 10,
-    zIndex: 10
-  },
-  trackText: {
     alignItems: 'center',
     flexDirection: 'row'
   },
+  // Group: Title, separator, artist
   title: {
+    flexShrink: 1,
     color: palette.neutral,
-    maxWidth: Dimensions.get('window').width / 3.5,
     fontSize: spacing(3)
   },
   separator: {
@@ -107,9 +104,29 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
     fontSize: spacing(4)
   },
   artist: {
+    flexGrow: 1,
+    flexShrink: 1,
     color: palette.neutral,
-    maxWidth: Dimensions.get('window').width / 4,
     fontSize: spacing(3)
+  },
+  // Artwork interior
+  artwork: {
+    height: 26,
+    width: 26,
+    backgroundColor: palette.neutralLight7
+  },
+  lockOverlay: {
+    backgroundColor: '#000',
+    opacity: 0.4,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 10,
+    zIndex: 10
   }
 }))
 
@@ -179,10 +196,12 @@ export const PlayBar = (props: PlayBarProps) => {
         translateYAnimation={translationAnim}
       />
       <View style={styles.container}>
-        {shouldShowPreviewLock ? null : renderFavoriteButton()}
+        {shouldShowPreviewLock ? null : (
+          <View style={styles.favoriteContainer}>{renderFavoriteButton()}</View>
+        )}
         <TouchableOpacity
           activeOpacity={1}
-          style={styles.trackInfo}
+          style={styles.trackContainer}
           onPress={onPress}
         >
           {track ? (
@@ -199,7 +218,7 @@ export const PlayBar = (props: PlayBarProps) => {
               />
             </View>
           ) : null}
-          <View style={styles.trackText}>
+          <View style={styles.trackTextContainer}>
             <Text numberOfLines={1} weight='bold' style={styles.title}>
               {track?.title ?? ''}
             </Text>
@@ -215,16 +234,20 @@ export const PlayBar = (props: PlayBarProps) => {
             </Text>
           </View>
           {shouldShowPreviewLock ? (
-            <LockedStatusBadge
-              variant='purchase'
-              locked
-              coloredWhenLocked
-              iconSize='small'
-              text={messages.preview}
-            />
+            <View>
+              <LockedStatusBadge
+                variant='purchase'
+                locked
+                coloredWhenLocked
+                iconSize='small'
+                text={messages.preview}
+              />
+            </View>
           ) : null}
         </TouchableOpacity>
-        <PlayButton wrapperStyle={styles.playIcon} />
+        <View style={styles.playContainer}>
+          <PlayButton wrapperStyle={styles.playIcon} />
+        </View>
       </View>
     </Animated.View>
   )