Client uses cids in requests to CN for images (#3882)

packages/common/src/models/Collection.ts

@@ -45,6 +45,7 @@ export type CollectionMetadata = {
   playlist_id: ID
   cover_art: CID | null
   cover_art_sizes: Nullable<CID>
+  cover_art_cids?: Nullable<CoverArtSizes>
   permalink?: string
   playlist_name: string
   playlist_owner_id: ID
@@ -105,4 +106,5 @@ export type SmartCollection = {
 export type CollectionImage = {
   cover_art: Nullable<CID>
   cover_art_sizes: Nullable<CID>
+  cover_art_cids?: Nullable<CoverArtSizes>
 }

packages/common/src/models/Track.ts

@@ -182,6 +182,7 @@ export type TrackMetadata = {
   track_segments: TrackSegment[]
   cover_art: Nullable<CID>
   cover_art_sizes: Nullable<CID>
+  cover_art_cids?: Nullable<CoverArtSizes>
   is_unlisted: boolean
   is_available: boolean
   is_premium: boolean
@@ -267,4 +268,7 @@ export type StemUserTrack = UserTrack & Required<Pick<Track, 'stem_of'>>
 export type RemixTrack = Track & Required<Pick<Track, 'remix_of'>>
 export type RemixUserTrack = UserTrack & Required<Pick<Track, 'remix_of'>>
 
-export type TrackImage = Pick<Track, 'cover_art' | 'cover_art_sizes'>
+export type TrackImage = Pick<
+  Track,
+  'cover_art' | 'cover_art_sizes' | 'cover_art_cids'
+>

packages/common/src/models/User.ts

@@ -33,7 +33,9 @@ export type UserMetadata = {
   repost_count: number
   track_count: number
   cover_photo_sizes: Nullable<CID>
+  cover_photo_cids?: Nullable<CoverPhotoSizes>
   profile_picture_sizes: Nullable<CID>
+  profile_picture_cids?: Nullable<ProfilePictureSizes>
   metadata_multihash: Nullable<CID>
   erc_wallet: WalletAddress
   spl_wallet: Nullable<SolanaWalletAddress>
@@ -81,8 +83,10 @@ export type UserImage = Pick<
   User,
   | 'cover_photo'
   | 'cover_photo_sizes'
+  | 'cover_photo_cids'
   | 'profile_picture'
   | 'profile_picture_sizes'
+  | 'profile_picture_cids'
 >
 
 export type UserMultihash = Pick<

packages/common/src/services/audius-api-client/ResponseAdapter.ts

@@ -78,8 +78,8 @@ export const makeUser = (
     current_user_followee_follow_count,
     does_current_user_follow,
     user_id: decodedUserId,
-    cover_photo: user.cover_photo_sizes || user.cover_photo_legacy,
-    profile_picture: user.profile_picture_sizes || user.profile_picture_legacy,
+    cover_photo: user.cover_photo_legacy,
+    profile_picture: user.profile_picture_legacy,
     metadata_multihash: user.metadata_multihash || null,
     supporter_count,
     supporting_count,
@@ -454,6 +454,7 @@ export const makeStemTrack = (stem: APIStem): StemTrackMetadata | undefined => {
     track_segments: [],
     cover_art: null,
     cover_art_sizes: null,
+    cover_art_cids: null,
     is_unlisted: false,
     stem_of: {
       parent_track_id: parentId,

packages/common/src/services/audius-api-client/types.ts

@@ -50,8 +50,10 @@ export type APIUser = {
   handle_lc: string
   updated_at: string
   cover_photo_sizes: Nullable<CID>
+  cover_photo_cids: Nullable<CoverPhotoSizes>
   cover_photo_legacy: Nullable<CID>
   profile_picture_sizes: Nullable<CID>
+  profile_picture_cids: Nullable<ProfilePictureSizes>
   profile_picture_legacy: Nullable<CID>
   metadata_multihash: Nullable<CID>
   erc_wallet: WalletAddress
@@ -115,6 +117,7 @@ export type APITrack = {
   created_at: string
   credits_splits: Nullable<string>
   cover_art_sizes: string
+  cover_art_cids: Nullable<CoverArtSizes>
   download: Download
   isrc: Nullable<string>
   license: Nullable<License>
@@ -191,6 +194,7 @@ export type APIPlaylist = {
   track_count: number
   cover_art: Nullable<string>
   cover_art_sizes: Nullable<string>
+  cover_art_cids: Nullable<CoverArtSizes>
 }
 
 export type APISearchPlaylist = Omit<

packages/common/src/services/audius-backend/AudiusBackend.ts

@@ -462,14 +462,28 @@ export const audiusBackend = ({
     }
   }
 
-  async function fetchImageCID(cid: CID, size?: SquareSizes | WidthSizes) {
-    const cidFileName = size ? `${cid}/${size}.jpg` : `${cid}.jpg`
+  async function fetchImageCID(
+    cid: CID,
+    size?: SquareSizes | WidthSizes,
+    cidMap: Nullable<{ [key: string]: string }> = null
+  ) {
+    let cidFileName = size ? `${cid}/${size}.jpg` : `${cid}.jpg`
+    // For v2 CIDs (aka job IDs), cidMap contains cids for each
+    // image variant. Use the CID for the desired image
+    // size from this map to accurately select the preferred
+    // rendezvous node to query.
+    if (size && cidMap && cidMap[size]) {
+      cidFileName = cidMap[size]
+    }
     if (CIDCache.has(cidFileName)) {
       return CIDCache.get(cidFileName) as string
     }
 
     const storageNodeSelector = await getStorageNodeSelector()
-    const storageNodes = storageNodeSelector.getNodes(cid)
+    // Only rendezvous hash the cid for extremely old legacy
+    // images that do not have size variants
+    const cidToHash = size ? cidFileName : cid
+    const storageNodes = storageNodeSelector.getNodes(cidToHash)
     for (const storageNode of storageNodes) {
       const imageUrl = `${storageNode}/content/${cidFileName}`
 
@@ -495,11 +509,12 @@ export const audiusBackend = ({
 
   async function getImageUrl(
     cid: Nullable<CID>,
-    size?: SquareSizes | WidthSizes
+    size?: SquareSizes | WidthSizes,
+    cidMap: Nullable<{ [key: string]: string }> = null
   ) {
     if (!cid) return ''
     try {
-      return await fetchImageCID(cid, size)
+      return await fetchImageCID(cid, size, cidMap)
     } catch (e) {
       console.error(e)
       return ''

packages/common/src/utils/updatePlaylistArtwork.ts

@@ -95,10 +95,11 @@ export const updatePlaylistArtwork = async (
     } else {
       const trackUrls = await Promise.all(
         tracksForImage.map(async (track) => {
-          const { cover_art_sizes, cover_art } = track
+          const { cover_art_cids, cover_art_sizes, cover_art } = track
           return await context.audiusBackend.getImageUrl(
             cover_art_sizes ?? cover_art,
-            SquareSizes.SIZE_1000_BY_1000
+            SquareSizes.SIZE_1000_BY_1000,
+            cover_art_cids
           )
         })
       )

packages/mobile/src/components/audio/GoogleCast.tsx

@@ -56,7 +56,8 @@ export const useChromecast = () => {
       if (client && track && owner && streamingUri) {
         const imageUrl = await audiusBackendInstance.getImageUrl(
           track.cover_art_sizes,
-          SquareSizes.SIZE_1000_BY_1000
+          SquareSizes.SIZE_1000_BY_1000,
+          track.cover_art_cids
         )
 
         client.loadMedia({

packages/mobile/src/components/image/CollectionImage.tsx

@@ -27,6 +27,7 @@ type UseCollectionImageOptions = {
       Collection | SearchPlaylist,
       | 'playlist_id'
       | 'cover_art_sizes'
+      | 'cover_art_cids'
       | 'cover_art'
       | 'playlist_owner_id'
       | '_cover_art_sizes'
@@ -74,7 +75,8 @@ export const useCollectionImage = (options: UseCollectionImageOptions) => {
     cid,
     size,
     fallbackImageSource: imageEmpty,
-    localSource: localSourceUri ? { uri: localSourceUri } : null
+    localSource: localSourceUri ? { uri: localSourceUri } : null,
+    cidMap: collection?.cover_art_cids
   })
 
   return contentNodeSource

packages/mobile/src/components/image/TrackImage.tsx

@@ -28,7 +28,11 @@ type UseTrackImageOptions = {
   track: Nullable<
     Pick<
       Track | SearchTrack,
-      'track_id' | 'cover_art_sizes' | 'cover_art' | '_cover_art_sizes'
+      | 'track_id'
+      | 'cover_art_sizes'
+      | 'cover_art_cids'
+      | 'cover_art'
+      | '_cover_art_sizes'
     >
   >
   size: SquareSizes
@@ -53,6 +57,7 @@ const useLocalTrackImageUri = (trackId: Maybe<ID>) => {
 
 export const useTrackImage = ({ track, size }: UseTrackImageOptions) => {
   const cid = track ? track.cover_art_sizes || track.cover_art : null
+
   const optimisticCoverArt = track?._cover_art_sizes?.OVERRIDE
 
   const localTrackImageUri = useLocalTrackImageUri(track?.track_id)
@@ -62,7 +67,8 @@ export const useTrackImage = ({ track, size }: UseTrackImageOptions) => {
     cid,
     size,
     fallbackImageSource: imageEmpty,
-    localSource: localSourceUri ? { uri: localSourceUri } : null
+    localSource: localSourceUri ? { uri: localSourceUri } : null,
+    cidMap: track?.cover_art_cids
   })
 
   return contentNodeSource

packages/mobile/src/components/image/UserCoverImage.tsx

@@ -25,7 +25,13 @@ const interpolateImageTranslate = (animatedValue: Animated.Value) =>
   })
 
 type CoverImageUser = Nullable<
-  Pick<User, 'cover_photo_sizes' | 'cover_photo' | 'updatedCoverPhoto'>
+  Pick<
+    User,
+    | 'cover_photo_sizes'
+    | 'cover_photo_cids'
+    | 'cover_photo'
+    | 'updatedCoverPhoto'
+  >
 >
 
 export const useUserCoverImage = (user: CoverImageUser) => {
@@ -34,7 +40,8 @@ export const useUserCoverImage = (user: CoverImageUser) => {
   const contentNodeImage = useContentNodeImage({
     cid,
     size: WidthSizes.SIZE_640,
-    fallbackImageSource: imageCoverPhotoBlank
+    fallbackImageSource: imageCoverPhotoBlank,
+    cidMap: user?.cover_photo_cids
   })
 
   if (user?.updatedCoverPhoto) {

packages/mobile/src/components/image/UserImage.tsx

@@ -10,7 +10,10 @@ type UseUserImageOptions = {
   user: Nullable<
     Pick<
       User,
-      'profile_picture_sizes' | 'profile_picture' | 'updatedProfilePicture'
+      | 'profile_picture_sizes'
+      | 'profile_picture_cids'
+      | 'profile_picture'
+      | 'updatedProfilePicture'
     >
   >
   size: SquareSizes
@@ -22,7 +25,8 @@ export const useUserImage = ({ user, size }: UseUserImageOptions) => {
   const contentNodeImage = useContentNodeImage({
     cid,
     size,
-    fallbackImageSource: profilePicEmpty
+    fallbackImageSource: profilePicEmpty,
+    cidMap: user?.profile_picture_cids
   })
 
   if (user?.updatedProfilePicture) {

packages/mobile/src/components/share-drawer/ShareToStorySticker.tsx

@@ -20,6 +20,7 @@ const messages = {
 type ShareToStoryStickerProps = {
   track: Pick<
     Track,
+    | 'cover_art_cids'
     | 'cover_art_sizes'
     | 'cover_art'
     | 'owner_id'

packages/mobile/src/hooks/useContentNodeImage.ts

@@ -46,20 +46,29 @@ export const createAllImageSources = ({
   cid,
   endpoints,
   size,
-  localSource
+  localSource,
+  cidMap = null
 }: {
   cid: Nullable<CID>
   endpoints: string[]
   size: SquareSizes | WidthSizes
   localSource?: ImageURISource | null
+  cidMap?: Nullable<{ [key: string]: string }>
 }) => {
   if (!cid || !endpoints) {
     return []
   }
+  let cidForSize: Nullable<string> = null
+  if (cidMap && cidMap[size]) {
+    cidForSize = cidMap[size]
+  }
 
   const newImageSources = createImageSourcesForEndpoints({
     endpoints,
-    createUri: (endpoint) => `${endpoint}/content/${cid}/${size}.jpg`
+    createUri: (endpoint) =>
+      cidForSize
+        ? `${endpoint}/content/${cidForSize}`
+        : `${endpoint}/content/${cid}/${size}.jpg`
   })
 
   // These can be removed when all the data on Content Node has
@@ -96,6 +105,7 @@ type UseContentNodeImageOptions = {
   size: SquareSizes | WidthSizes
   fallbackImageSource: ImageSourcePropType
   localSource?: ImageURISource | null
+  cidMap?: Nullable<{ [key: string]: string }>
 }
 
 /**
@@ -113,7 +123,7 @@ type UseContentNodeImageOptions = {
 export const useContentNodeImage = (
   options: UseContentNodeImageOptions
 ): ContentNodeImageSource => {
-  const { cid, size, fallbackImageSource, localSource } = options
+  const { cid, size, fallbackImageSource, localSource, cidMap } = options
   const [imageSourceIndex, setImageSourceIndex] = useState(0)
   const [failedToLoad, setFailedToLoad] = useState(false)
   const { storageNodeSelector } = useAppContext()
@@ -130,9 +140,10 @@ export const useContentNodeImage = (
       cid,
       endpoints,
       localSource,
-      size
+      size,
+      cidMap
     })
-  }, [cid, endpoints, localSource, size])
+  }, [cid, endpoints, localSource, size, cidMap])
 
   const handleError = useCallback(() => {
     if (imageSourceIndex < imageSources.length - 1) {

packages/mobile/src/models/Collection.ts

@@ -1,6 +1,7 @@
-import type { CID, Nullable } from '@audius/common'
+import type { CID, CoverArtSizes, Nullable } from '@audius/common'
 
 export type CollectionImage = {
   cover_art: Nullable<CID>
   cover_art_sizes: Nullable<CID>
+  cover_art_cids: Nullable<CoverArtSizes>
 }

packages/mobile/src/models/Track.ts

@@ -1,3 +1,6 @@
 import type { Track } from '@audius/common'
 
-export type TrackImage = Pick<Track, 'cover_art' | 'cover_art_sizes'>
+export type TrackImage = Pick<
+  Track,
+  'cover_art' | 'cover_art_sizes' | 'cover_art_cids'
+>

packages/mobile/src/models/User.ts

@@ -4,8 +4,10 @@ export type UserImage = Pick<
   User,
   | 'cover_photo'
   | 'cover_photo_sizes'
+  | 'cover_photo_cids'
   | 'profile_picture'
   | 'profile_picture_sizes'
+  | 'profile_picture_cids'
 >
 
 export type UserMultihash = Pick<

packages/mobile/src/screens/profile-screen/CoverPhoto.tsx

@@ -40,6 +40,7 @@ export const CoverPhoto = ({ scrollY }: { scrollY?: Animated.Value }) => {
   const styles = useStyles()
   const user = useSelectProfile([
     'user_id',
+    'cover_photo_cids',
     'cover_photo_sizes',
     'cover_photo',
     'creator_node_endpoint',

packages/mobile/src/screens/profile-screen/ProfilePicture.tsx

@@ -7,6 +7,7 @@ export const ProfilePicture = (props: Partial<ProfilePictureProps>) => {
   const profile = useSelectProfile([
     'user_id',
     'profile_picture',
+    'profile_picture_cids',
     'profile_picture_sizes',
     'creator_node_endpoint',
     'updatedProfilePicture'

packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadCollectionWorker.ts

@@ -149,14 +149,15 @@ function* downloadCollectionAsync(
 }
 
 function* downloadCollectionCoverArt(collection: CollectionMetadata) {
-  const { cover_art_sizes, cover_art, playlist_id } = collection
+  const { cover_art_cids, cover_art_sizes, cover_art, playlist_id } = collection
   const cid = cover_art_sizes ?? cover_art
   const storageNodeSelector = yield* call(getStorageNodeSelector)
 
   const imageSources = createAllImageSources({
     cid,
     endpoints: cid ? storageNodeSelector.getNodes(cid) : [],
-    size: SquareSizes.SIZE_1000_BY_1000
+    size: SquareSizes.SIZE_1000_BY_1000,
+    cidMap: cover_art_cids
   })
 
   const coverArtUris = imageSources.map(({ uri }) => uri).filter(removeNullable)