[PAY-1366] Fix web chat tile artwork and mobile link preview bugs (#3528

)

Co-authored-by: Saliou Diallo <saliou@audius.co>

packages/mobile/src/components/lineup-tile/types.ts

@@ -7,9 +7,9 @@ import type {
   Collection,
   FavoriteType,
   Track,
-  LineupTrack,
   User,
-  RepostType
+  RepostType,
+  EnhancedCollectionTrack
 } from '@audius/common'
 import type { StyleProp, ViewStyle } from 'react-native'
 
@@ -53,7 +53,7 @@ export type LineupItemProps = {
   collection?: Collection
 
   /** Optionally passed in tracks to override  */
-  tracks?: LineupTrack[]
+  tracks?: EnhancedCollectionTrack[]
 
   /** Passed in styles */
   styles?: StyleProp<ViewStyle>

packages/mobile/src/screens/chat-screen/ChatMessageListItem.tsx

@@ -305,7 +305,10 @@ export const ChatMessageListItem = memo(function ChatMessageListItem(
                       isPressed={isPressed}
                       onEmpty={onLinkPreviewEmpty}
                       onSuccess={onLinkPreviewSuccess}
-                      style={{ ...chatStyles, borderBottomWidth: 1 }}
+                      style={{
+                        ...chatStyles,
+                        borderBottomWidth: hideMessage ? 0 : 1
+                      }}
                     />
                   ) : null}
                   {!hideMessage ? (

packages/mobile/src/screens/chat-screen/ChatMessagePlaylist.tsx

@@ -44,17 +44,17 @@ export const ChatMessagePlaylist = ({
     },
     { disabled: !playlistId }
   )
+
   const collection = useMemo(() => {
     return playlist
       ? {
           ...playlist,
-          // todo: make sure good value is passed in here
+          // Include this field to conform with the component prop type.
           _cover_art_sizes: {}
         }
       : null
   }, [playlist])
 
-  const uid = playlist ? makeUid(Kind.COLLECTIONS, playlist.playlist_id) : null
   const trackIds =
     playlist?.playlist_contents?.track_ids?.map((t) => t.track) ?? []
   const { data: tracks } = useGetTracksByIds(
@@ -65,17 +65,28 @@ export const ChatMessagePlaylist = ({
     { disabled: !trackIds.length }
   )
 
+  const collectionId = playlist?.playlist_id
+
+  const uid = useMemo(() => {
+    return collectionId ? makeUid(Kind.COLLECTIONS, collectionId) : null
+  }, [collectionId])
+
   const uidMap = useMemo(() => {
     return trackIds.reduce((result: { [id: ID]: string }, id) => {
       result[id] = makeUid(Kind.TRACKS, id)
       return result
     }, {})
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playlist?.playlist_id])
+  }, [collectionId])
+
+  /**
+   * Include uids for the tracks as those are used to play the tracks,
+   * and also to determine which track is currently playing.
+   * Also include the other properties to conform with the component.
+   */
   const tracksWithUids = useMemo(() => {
     return (tracks || []).map((track) => ({
       ...track,
-      // todo: make sure good value is passed in here
       _cover_art_sizes: {},
       user: {
         ...track.user,
@@ -86,6 +97,7 @@ export const ChatMessagePlaylist = ({
       uid: uidMap[track.track_id]
     }))
   }, [tracks, uidMap])
+
   const entries = useMemo(() => {
     return (tracks || []).map((track) => ({
       id: track.track_id,

packages/mobile/src/screens/chat-screen/ChatMessageTrack.tsx

@@ -34,26 +34,8 @@ export const ChatMessageTrack = ({
     },
     { disabled: !permalink }
   )
-  const item = useMemo(() => {
-    return track
-      ? {
-          ...track,
-          // todo: make sure good value is passed in here
-          _cover_art_sizes: {}
-        }
-      : null
-  }, [track])
 
-  const user = useMemo(() => {
-    return track
-      ? {
-          ...track.user,
-          // todo: make sure good values are passed in here
-          _profile_picture_sizes: {},
-          _cover_photo_sizes: {}
-        }
-      : null
-  }, [track])
+  const user = useMemo(() => (track ? { ...track.user } : null), [track])
 
   const trackId = track?.track_id
   const uid = useMemo(() => {
@@ -82,14 +64,14 @@ export const ChatMessageTrack = ({
   })
 
   useEffect(() => {
-    if (item && user && uid) {
+    if (track && user && uid) {
       onSuccess?.()
     } else {
       onEmpty?.()
     }
-  }, [item, user, uid, onSuccess, onEmpty])
+  }, [track, user, uid, onSuccess, onEmpty])
 
-  return item && user && uid ? (
+  return track && user && uid ? (
     <TrackTile
       index={0}
       togglePlay={togglePlay}

packages/web/src/common/store/cache/collections/commonSagas.js

@@ -1065,18 +1065,13 @@ function* watchFetchCoverArt() {
           coverArtSize,
           gateways
         )
+        collection._cover_art_sizes = {
+          ...collection._cover_art_sizes,
+          [coverArtSize || DefaultSizes.OVERRIDE]: url
+        }
         yield put(
           cacheActions.update(Kind.COLLECTIONS, [
-            {
-              id: collectionId,
-              metadata: {
-                ...collection,
-                _cover_art_sizes: {
-                  ...collection._cover_art_sizes,
-                  [coverArtSize || DefaultSizes.OVERRIDE]: url
-                }
-              }
-            }
+            { id: collectionId, metadata: collection }
           ])
         )
       } catch (e) {

packages/web/src/pages/chat-page/components/ChatMessagePlaylist.tsx

@@ -14,21 +14,28 @@ import {
   usePlayTrack,
   usePauseTrack,
   ChatMessageTileProps,
-  parsePlaylistIdFromPermalink
+  parsePlaylistIdFromPermalink,
+  SquareSizes,
+  cacheCollectionsActions,
+  cacheCollectionsSelectors,
+  CommonState
 } from '@audius/common'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import MobilePlaylistTile from 'components/track/mobile/ConnectedPlaylistTile'
 
 const { getUserId } = accountSelectors
 const { getTrackId } = playerSelectors
+const { getCollection } = cacheCollectionsSelectors
+const { fetchCoverArt } = cacheCollectionsActions
 
 export const ChatMessagePlaylist = ({
   link,
   onEmpty,
   onSuccess,
   className
 }: ChatMessageTileProps) => {
+  const dispatch = useDispatch()
   const currentUserId = useSelector(getUserId)
   const playingTrackId = useSelector(getTrackId)
 
@@ -42,17 +49,22 @@ export const ChatMessagePlaylist = ({
     },
     { disabled: !playlistId || !currentUserId }
   )
-  const collection = useMemo(() => {
-    return playlist
-      ? {
-          ...playlist,
-          // todo: make sure good value is passed in here
-          _cover_art_sizes: {}
-        }
-      : null
-  }, [playlist])
-
-  const uid = playlist ? makeUid(Kind.COLLECTIONS, playlist.playlist_id) : null
+
+  const collectionId = playlist?.playlist_id
+  const collection = useSelector((state: CommonState) =>
+    getCollection(state, { id: collectionId })
+  )
+
+  useEffect(() => {
+    if (collectionId) {
+      dispatch(fetchCoverArt(collectionId, SquareSizes.SIZE_150_BY_150))
+    }
+  }, [collectionId, dispatch])
+
+  const uid = useMemo(() => {
+    return collectionId ? makeUid(Kind.COLLECTIONS, collectionId) : null
+  }, [collectionId])
+
   const trackIds =
     playlist?.playlist_contents?.track_ids?.map((t) => t.track) ?? []
   const { data: tracks } = useGetTracksByIds(
@@ -69,11 +81,16 @@ export const ChatMessagePlaylist = ({
       return result
     }, {})
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playlist?.playlist_id])
+  }, [collectionId])
+
+  /**
+   * Include uids for the tracks as those are used to play the tracks,
+   * and also to determine which track is currently playing.
+   * Also include the other properties to conform with the component.
+   */
   const tracksWithUids = useMemo(() => {
     return (tracks || []).map((track) => ({
       ...track,
-      // todo: make sure good value is passed in here
       _cover_art_sizes: {},
       user: {
         ...track.user,
@@ -84,6 +101,7 @@ export const ChatMessagePlaylist = ({
       uid: uidMap[track.track_id]
     }))
   }, [tracks, uidMap])
+
   const entries = useMemo(() => {
     return (tracks || []).map((track) => ({
       id: track.track_id,

packages/web/src/pages/chat-page/components/ChatMessageTrack.tsx

@@ -12,14 +12,17 @@ import {
   useToggleTrack,
   ID,
   TrackPlayback,
-  ChatMessageTileProps
+  ChatMessageTileProps,
+  cacheTracksActions,
+  SquareSizes
 } from '@audius/common'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { make } from 'common/store/analytics/actions'
 import MobileTrackTile from 'components/track/mobile/ConnectedTrackTile'
 
 const { getUserId } = accountSelectors
+const { fetchCoverArt } = cacheTracksActions
 
 export const ChatMessageTrack = ({
   link,
@@ -40,6 +43,13 @@ export const ChatMessageTrack = ({
   )
 
   const trackId = track?.track_id
+
+  useEffect(() => {
+    if (trackId) {
+      dispatch(fetchCoverArt(trackId, SquareSizes.SIZE_150_BY_150))
+    }
+  }, [trackId, dispatch])
+
   const uid = useMemo(() => {
     return trackId ? makeUid(Kind.TRACKS, trackId) : null
   }, [trackId])