[C-1213, C-1216] Fix album artwork corners (#2052)

AudiusProject · Oct 4, 2022 · 6b13afb · 6b13afb
1 parent 29853fe
commit 6b13afb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 63 deletions.
diff --git a/packages/mobile/src/components/track-list/TrackArtwork.tsx b/packages/mobile/src/components/track-list/TrackArtwork.tsx
@@ -8,91 +8,53 @@ import { DynamicImage } from 'app/components/core'
 import { useTrackCoverArt } from 'app/hooks/useTrackCoverArt'
 import { makeStyles } from 'app/styles'
 
-type ArtworkIconProps = {
-  isLoading: boolean
-  isPlaying: boolean
-}
-
 type TrackArtworkProps = {
   trackId: ID
-  isLoading: boolean
   isActive?: boolean
   isPlaying: boolean
   coverArtSizes: CoverArtSizes
 }
 
 const useStyles = makeStyles(({ spacing }) => ({
   artworkContainer: {
-    position: 'relative',
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 52,
     height: 52,
     width: 52,
-    marginRight: spacing(4),
-    borderRadius: 4
+    marginRight: spacing(4)
   },
-  artworkImage: {
-    position: 'absolute',
-    height: '100%',
-    width: '100%',
+  image: {
     borderRadius: 4
   },
-  artwork: {
+  artworkIcon: {
     height: '100%',
     width: '100%',
-    borderRadius: 4,
     justifyContent: 'center',
-    alignItems: 'center'
-  },
-  artworkIcon: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    borderRadius: 4
-  },
-  artworkIconSvg: {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: [{ translateX: -spacing(4) }, { translateY: -spacing(4) }]
+    alignItems: 'center',
+    borderRadius: 4,
+    backgroundColor: 'rgba(0,0,0,0.4)'
   }
 }))
 
-// TODO: Add loading animation
-const ArtworkIcon = ({ isLoading, isPlaying }: ArtworkIconProps) => {
-  const styles = useStyles()
-  const Icon = isPlaying ? IconPause : IconPlay
-  const artworkIcon = <Icon style={[styles.artworkIconSvg]} />
-
-  return <View style={styles.artworkIcon}>{artworkIcon}</View>
-}
-
-export const TrackArtwork = ({
-  trackId,
-  isPlaying,
-  isActive,
-  isLoading,
-  coverArtSizes
-}: TrackArtworkProps) => {
+export const TrackArtwork = (props: TrackArtworkProps) => {
+  const { trackId, isPlaying, isActive, coverArtSizes } = props
   const styles = useStyles()
   const image = useTrackCoverArt({
     id: trackId,
     sizes: coverArtSizes,
     size: SquareSizes.SIZE_150_BY_150
   })
 
+  const ActiveIcon = isPlaying ? IconPause : IconPlay
+
   return (
-    <View style={styles.artworkContainer}>
-      <View style={styles.artwork}>
-        <DynamicImage uri={image} style={styles.artworkImage} />
-        {isActive ? (
-          <ArtworkIcon isLoading={isLoading} isPlaying={isPlaying} />
-        ) : null}
-      </View>
-    </View>
+    <DynamicImage
+      uri={image}
+      styles={{ root: styles.artworkContainer, image: styles.image }}
+    >
+      {isActive ? (
+        <View style={styles.artworkIcon}>
+          <ActiveIcon />
+        </View>
+      ) : null}
+    </DynamicImage>
   )
 }
diff --git a/packages/mobile/src/components/track-list/TrackListItem.tsx b/packages/mobile/src/components/track-list/TrackListItem.tsx
@@ -89,7 +89,6 @@ export type TrackListItemProps = {
   hideArt?: boolean
   index: number
   isActive?: boolean
-  isLoading?: boolean
   isPlaying?: boolean
   isReorderable?: boolean
   onRemove?: (index: number) => void
@@ -105,7 +104,6 @@ export const TrackListItem = ({
   index,
   isActive,
   isReorderable = false,
-  isLoading = false,
   isPlaying = false,
   onRemove,
   onSave,
@@ -194,7 +192,6 @@ export const TrackListItem = ({
             trackId={track_id}
             coverArtSizes={_cover_art_sizes}
             isActive={isActive}
-            isLoading={isLoading}
             isPlaying={isPlaying}
           />
         ) : isActive && !isDeleted ? (

diff --git a/packages/mobile/src/screens/settings-screen/ListeningHistoryScreen.tsx b/packages/mobile/src/screens/settings-screen/ListeningHistoryScreen.tsx
@@ -83,8 +83,6 @@ export const ListeningHistoryScreen = () => {
     [dispatch, isPlaying, playingUid]
   )
 
-  console.log('rerender')
-
   return (
     <Screen title={messages.title} topbarRight={null} variant='secondary'>
       <WithLoader loading={status === Status.LOADING}>

diff --git a/packages/mobile/src/screens/smart-collection-screen/SmartCollectionScreen.tsx b/packages/mobile/src/screens/smart-collection-screen/SmartCollectionScreen.tsx
@@ -28,6 +28,9 @@ const useStyles = makeStyles(({ spacing }) => ({
     flex: 1,
     padding: spacing(3)
   },
+  image: {
+    borderRadius: 4
+  },
   imageIcon: {
     opacity: 0.3,
     maxWidth: '100%',
@@ -89,6 +92,7 @@ export const SmartCollectionScreen = (props: SmartCollectionScreenProps) => {
       <LinearGradient
         colors={smartCollection.gradientColors}
         angle={smartCollection.gradientAngle}
+        style={styles.image}
       >
         {Icon ? (
           <View style={styles.imageIcon}>