[PAY-2709, PAY-2710, PAY-2708] Various CollectionTile fixes (#8145)

AudiusProject · Apr 19, 2024 · 6825c33 · 6825c33
1 parent 7ad1e89
commit 6825c33
Show file tree

Hide file tree

Showing 12 changed files with 178 additions and 148 deletions.
diff --git a/packages/mobile/src/components/lineup-tile/CollectionTile.tsx b/packages/mobile/src/components/lineup-tile/CollectionTile.tsx
@@ -268,7 +268,11 @@ const CollectionTileComponent = ({
       user={user}
       variant={variant}
     >
-      <CollectionTileTrackList tracks={tracks} onPress={handlePressTitle} />
+      <CollectionTileTrackList
+        tracks={tracks}
+        onPress={handlePressTitle}
+        isAlbum={is_album}
+      />
     </LineupTile>
   )
 }
diff --git a/packages/mobile/src/components/lineup-tile/CollectionTileTrackList.tsx b/packages/mobile/src/components/lineup-tile/CollectionTileTrackList.tsx
@@ -13,11 +13,16 @@ const { getUid } = playerSelectors
 // Max number of tracks to display
 const DISPLAY_TRACK_COUNT = 5
 
+const messages = {
+  by: 'by'
+}
+
 type LineupTileTrackListProps = {
   isLoading?: boolean
   onPress: GestureResponderHandler
   trackCount?: number
   tracks: LineupTrack[]
+  isAlbum: boolean
 }
 
 const useStyles = makeStyles(({ palette, spacing, typography }) => ({
@@ -66,9 +71,11 @@ type TrackItemProps = {
   index: number
   track?: LineupTrack
   uid?: UID
+  isAlbum?: boolean
 }
 
-const TrackItem = ({ track, index, showSkeleton, uid }: TrackItemProps) => {
+const TrackItem = (props: TrackItemProps) => {
+  const { showSkeleton, index, track, uid, isAlbum } = props
   const styles = useStyles()
   const isPlayingUid = useSelector(
     (state: CommonState) => getUid(state) === uid
@@ -90,36 +97,34 @@ const TrackItem = ({ track, index, showSkeleton, uid }: TrackItemProps) => {
             >
               {track.title}
             </Text>
-            <Text
-              style={[
-                styles.text,
-                styles.artist,
-                isPlayingUid && styles.active
-              ]}
-              numberOfLines={1}
-            >
-              {`by ${track.user.name}`}
-            </Text>
+            {!isAlbum ? (
+              <Text
+                style={[
+                  styles.text,
+                  styles.artist,
+                  isPlayingUid && styles.active
+                ]}
+                numberOfLines={1}
+              >
+                {`${messages.by} ${track.user.name}`}
+              </Text>
+            ) : null}
           </>
         )}
       </View>
     </>
   )
 }
 
-export const CollectionTileTrackList = ({
-  isLoading,
-  onPress,
-  trackCount,
-  tracks
-}: LineupTileTrackListProps) => {
+export const CollectionTileTrackList = (props: LineupTileTrackListProps) => {
+  const { isLoading, onPress, trackCount, tracks, isAlbum } = props
   const styles = useStyles()
 
   if (!tracks.length && isLoading) {
     return (
       <>
         {range(DISPLAY_TRACK_COUNT).map((i) => (
-          <TrackItem key={i} index={i} showSkeleton />
+          <TrackItem key={i} index={i} showSkeleton isAlbum={isAlbum} />
         ))}
       </>
     )
@@ -133,6 +138,7 @@ export const CollectionTileTrackList = ({
           uid={track.uid}
           index={index}
           track={track}
+          isAlbum={isAlbum}
         />
       ))}
       {trackCount && trackCount > 5 ? (

diff --git a/packages/mobile/src/components/lineup-tile/LineupTile.tsx b/packages/mobile/src/components/lineup-tile/LineupTile.tsx
@@ -67,6 +67,7 @@ export const LineupTile = ({
   const currentUserId = useSelector(getUserId)
   const isOwner = user_id === currentUserId
   const isCollection = 'playlist_id' in item
+  const isAlbum = 'is_album' in item && item.is_album
   const isTrack = 'track_id' in item
   const contentId = isTrack ? item.track_id : item.playlist_id
   const streamConditions = item.stream_conditions ?? null
@@ -122,6 +123,7 @@ export const LineupTile = ({
           title={title}
           user={user}
           isPlayingUid={isPlayingUid}
+          type={isTrack ? 'track' : isAlbum ? 'album' : 'playlist'}
         />
         {coSign ? <LineupTileCoSign coSign={coSign} /> : null}
         <LineupTileStats

diff --git a/packages/mobile/src/components/lineup-tile/LineupTileMetadata.tsx b/packages/mobile/src/components/lineup-tile/LineupTileMetadata.tsx
@@ -53,6 +53,7 @@ type Props = {
   title: string
   user: User
   isPlayingUid: boolean
+  type: 'track' | 'playlist' | 'album'
 }
 
 export const LineupTileMetadata = ({
@@ -62,7 +63,8 @@ export const LineupTileMetadata = ({
   renderImage,
   title,
   user,
-  isPlayingUid
+  isPlayingUid,
+  type
 }: Props) => {
   const navigation = useNavigation()
   const styles = useStyles()
@@ -90,6 +92,16 @@ export const LineupTileMetadata = ({
         startOpacity={0}
         duration={500}
       >
+        {type !== 'track' ? (
+          <Text
+            variant='label'
+            fontSize='xs'
+            textTransform='uppercase'
+            color='textIconSubdued'
+          >
+            {type}
+          </Text>
+        ) : null}
         <TouchableOpacity style={trackTileStyles.title} onPress={onPressTitle}>
           <Text
             color={isActive ? 'primary' : 'neutral'}

diff --git a/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx b/packages/mobile/src/components/lineup-tile/LineupTileStats.tsx
@@ -164,7 +164,7 @@ export const LineupTileStats = ({
 
   const renderLockedContentOrPlayCount = () => {
     if (streamConditions && !isOwner) {
-      if (isPurchase) {
+      if (isPurchase && isReadonly) {
         return (
           <LineupTileAccessStatus
             contentId={id}

diff --git a/packages/web/src/components/track/desktop/ConnectedPlaylistTile.tsx b/packages/web/src/components/track/desktop/ConnectedPlaylistTile.tsx
@@ -78,10 +78,6 @@ const {
 const { getCollection, getTracksFromCollection } = cacheCollectionsSelectors
 const getUserHandle = accountSelectors.getUserHandle
 
-const messages = {
-  createdBy: 'Created by'
-}
-
 type OwnProps = {
   uid: UID
   ordered: boolean
@@ -326,7 +322,6 @@ const ConnectedPlaylistTile = ({
 
   const userName = (
     <Text variant='body' ellipses css={{ display: 'inline-flex', gap: 4 }}>
-      <Text color='subdued'>{messages.createdBy}</Text>
       <UserLink
         ellipses
         userId={user_id}
@@ -436,6 +431,7 @@ const ConnectedPlaylistTile = ({
           index={i}
           key={i}
           isLoading={true}
+          isAlbum={isAlbum}
           forceSkeleton
           active={false}
           size={size}
@@ -460,6 +456,7 @@ const ConnectedPlaylistTile = ({
           index={i}
           key={`${track.title}+${i}`}
           isLoading={isLoading}
+          isAlbum={isAlbum}
           active={playingUid === track.uid}
           size={size}
           disableActions={disableActions}
@@ -468,12 +465,14 @@ const ConnectedPlaylistTile = ({
           togglePlay={togglePlay}
           goToRoute={goToRoute}
           artistHandle={handle}
+          isLastTrack={i === tracks.length - 1}
         />
       </Draggable>
     ))
   }, [
     tracks,
     isLoading,
+    isAlbum,
     userHandle,
     playingUid,
     size,

diff --git a/packages/web/src/components/track/desktop/PlaylistTile.tsx b/packages/web/src/components/track/desktop/PlaylistTile.tsx
@@ -126,11 +126,7 @@ const PlaylistTile = ({
           hasStreamAccess={hasStreamAccess}
         />
       </TileTrackContainer>
-      <Box
-        backgroundColor='surface1'
-        borderTop='default'
-        borderBottom='default'
-      >
+      <Box backgroundColor='surface1' borderTop='strong' borderBottom='strong'>
         {renderTracks()}
         {renderMoreTracks()}
       </Box>

diff --git a/packages/web/src/components/track/desktop/TrackListItem.module.css b/packages/web/src/components/track/desktop/TrackListItem.module.css
@@ -49,6 +49,10 @@
   opacity: 1;
 }
 
+.playlistTrack.lastTrack {
+  border-bottom: none;
+}
+
 .wrapper {
   display: flex;
   align-items: center;

diff --git a/packages/web/src/components/track/desktop/TrackListItem.tsx b/packages/web/src/components/track/desktop/TrackListItem.tsx
@@ -26,6 +26,7 @@ const makeStrings = ({ deleted }: { deleted: boolean }) => ({
 type TrackListItemProps = {
   index: number
   isLoading: boolean
+  isAlbum: boolean
   active: boolean
   size: TrackTileSize
   disableActions: boolean
@@ -35,6 +36,7 @@ type TrackListItemProps = {
   artistHandle: string
   track?: EnhancedCollectionTrack
   forceSkeleton?: boolean
+  isLastTrack?: boolean
 }
 
 const TrackListItem = ({
@@ -47,6 +49,8 @@ const TrackListItem = ({
   goToRoute,
   togglePlay,
   isLoading,
+  isAlbum,
+  isLastTrack,
   forceSkeleton = false
 }: TrackListItemProps) => {
   const menuRef = useRef<HTMLDivElement>(null)
@@ -135,7 +139,8 @@ const TrackListItem = ({
         [styles.deleted]: deleted,
         [styles.active]: active,
         [styles.disabled]: disableActions || deleted,
-        [styles.noBorder]: isLoading
+        [styles.noBorder]: isLoading,
+        [styles.lastTrack]: isLastTrack
       })}
       onClick={onPlayTrack}
     >
@@ -161,16 +166,18 @@ const TrackListItem = ({
             {track.title}
             {strings.deleted}
           </div>
-          <div className={styles.artistName} onClick={onClickArtistName}>
-            <div className={styles.by}>{strings.by}</div>
-            {track.user.is_deactivated ? (
-              `${track.user.name} [Deactivated]`
-            ) : (
-              <ArtistPopover handle={track.user.handle}>
-                {track.user.name}
-              </ArtistPopover>
-            )}
-          </div>
+          {!isAlbum ? (
+            <div className={styles.artistName} onClick={onClickArtistName}>
+              <div className={styles.by}>{strings.by}</div>
+              {track.user.is_deactivated ? (
+                `${track.user.name} [Deactivated]`
+              ) : (
+                <ArtistPopover handle={track.user.handle}>
+                  {track.user.name}
+                </ArtistPopover>
+              )}
+            </div>
+          ) : null}
         </div>
         <div className={styles.duration}>
           {track.duration && formatSeconds(track.duration)}

diff --git a/packages/web/src/components/track/desktop/TrackTile.module.css b/packages/web/src/components/track/desktop/TrackTile.module.css
@@ -3,6 +3,7 @@
   position: relative;
   background: var(--harmony-white);
   border: var(--border-width) solid var(--harmony-n-100);
+  border-bottom: 0;
   border-radius: var(--harmony-unit-2) var(--harmony-unit-2) 0px 0px;
   display: inline-flex;
   width: 100%;
@@ -11,6 +12,7 @@
 }
 
 .container.standalone {
+  border: var(--border-width) solid var(--harmony-n-100);
   transform: scale3d(1, 1, 1);
   border-radius: var(--harmony-unit-2);
   box-shadow: 0px 2px 5px var(--tile-shadow-3), 0px 1px 0px var(--tile-shadow-2),

diff --git a/packages/web/src/components/track/mobile/PlaylistTile.module.css b/packages/web/src/components/track/mobile/PlaylistTile.module.css
@@ -71,11 +71,6 @@
 }
 
 .statItem {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0px 10px;
-  margin-right: 12px;
   transform: scale(1);
   transition: transform 0.07s ease-in-out;
 }
@@ -104,30 +99,6 @@
   top: 0;
 }
 
-.stats {
-  display: flex;
-  flex: 0 0 30px;
-  align-items: center;
-  justify-content: space-between;
-  margin: var(--harmony-unit-2);
-  background-color: var(--harmony-static-white);
-}
-
-.statText {
-  font-weight: var(--harmony-font-medium);
-  font-size: var(--harmony-font-xs);
-  letter-spacing: 0.2px;
-  line-height: 11px;
-  color: var(--harmony-n-400);
-}
-
-.stats svg {
-  width: 14px;
-  height: 14px;
-  position: relative;
-  bottom: 1px;
-}
-
 .albumArtContainer {
   height: 72px;
   margin: 10px 12px 0px 10px;