Fix mobile image fallback logic (#12549)

Author: raymondjacobson

packages/common/src/hooks/useImageSize.ts

@@ -57,13 +57,14 @@ export const useImageSize = <
   preloadImageFn?: (url: string) => Promise<void>
 }) => {
   const [imageUrl, setImageUrl] = useState<Maybe<string>>(undefined)
+  const [failedUrls, setFailedUrls] = useState<Set<string>>(new Set())
 
   const fetchWithFallback = useCallback(
     async (url: string) => {
       const mirrors = [...(artwork?.mirrors ?? [])]
       let currentUrl = url
 
-      while (mirrors.length > 0) {
+      while (mirrors.length >= 0) {
         try {
           await preloadImageFn?.(currentUrl)
           return currentUrl
@@ -81,6 +82,25 @@ export const useImageSize = <
     [artwork?.mirrors, preloadImageFn]
   )
 
+  const getNextMirrorUrl = useCallback(
+    (originalUrl: string, failedUrls: Set<string>) => {
+      const mirrors = artwork?.mirrors ?? []
+      if (mirrors.length === 0) return null
+
+      for (const mirror of mirrors) {
+        const nextUrl = new URL(originalUrl)
+        nextUrl.hostname = new URL(mirror).hostname
+        const mirrorUrl = nextUrl.toString()
+
+        if (!failedUrls.has(mirrorUrl)) {
+          return mirrorUrl
+        }
+      }
+      return null
+    },
+    [artwork?.mirrors]
+  )
+
   const resolveImageUrl = useCallback(async () => {
     if (!artwork) {
       return
@@ -91,6 +111,15 @@ export const useImageSize = <
       return
     }
 
+    // If the original URL failed, try mirrors
+    if (failedUrls.has(targetUrl)) {
+      const mirrorUrl = getNextMirrorUrl(targetUrl, failedUrls)
+      if (mirrorUrl) {
+        setImageUrl(mirrorUrl)
+        return
+      }
+    }
+
     if (IMAGE_CACHE.has(targetUrl)) {
       setImageUrl(targetUrl)
       return
@@ -136,11 +165,25 @@ export const useImageSize = <
     } catch (e) {
       console.error(`Unable to load image ${targetUrl} after retries: ${e}`)
     }
-  }, [artwork, targetSize, fetchWithFallback, defaultImage])
+  }, [
+    artwork,
+    targetSize,
+    fetchWithFallback,
+    defaultImage,
+    failedUrls,
+    getNextMirrorUrl
+  ])
+
+  const onError = useCallback(
+    (url: string) => {
+      setFailedUrls((prev) => new Set(prev).add(url))
+    },
+    [setFailedUrls]
+  )
 
   useEffect(() => {
     resolveImageUrl()
   }, [resolveImageUrl])
 
-  return imageUrl
+  return { imageUrl, onError }
 }

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

@@ -43,7 +43,7 @@ export const useChromecast = () => {
   const previousCastState = usePrevious(castState)
 
   const [internalCounter, setInternalCounter] = useState(0)
-  const imageUrl = useImageSize({
+  const { imageUrl } = useImageSize({
     artwork: track?.artwork,
     targetSize: SquareSizes.SIZE_1000_BY_1000
   })

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

@@ -1,3 +1,5 @@
+import { useCallback } from 'react'
+
 import { useCollection } from '@audius/common/api'
 import { useImageSize } from '@audius/common/hooks'
 import type { SquareSizes, ID } from '@audius/common/models'
@@ -49,7 +51,7 @@ export const useCollectionImage = ({
   const { data: artwork } = useCollection(collectionId, {
     select: (collection) => collection.artwork
   })
-  const image = useImageSize({
+  const { imageUrl, onError } = useImageSize({
     artwork,
     targetSize: size,
     defaultImage: '',
@@ -58,10 +60,11 @@ export const useCollectionImage = ({
     }
   })
 
-  if (image === '') {
+  if (imageUrl === '') {
     return {
       source: imageEmpty,
-      isFallbackImage: true
+      isFallbackImage: true,
+      onError
     }
   }
 
@@ -73,13 +76,15 @@ export const useCollectionImage = ({
     return {
       // @ts-ignore
       source: primitiveToImageSource(artwork.url),
-      isFallbackImage: false
+      isFallbackImage: false,
+      onError
     }
   }
 
   return {
-    source: primitiveToImageSource(image),
-    isFallbackImage: false
+    source: primitiveToImageSource(imageUrl),
+    isFallbackImage: false,
+    onError
   }
 }
 
@@ -98,10 +103,20 @@ export const CollectionImage = (props: CollectionImageProps) => {
   const collectionImageSource = useCollectionImage({ collectionId, size })
   const { cornerRadius } = useTheme()
   const { skeleton } = useThemeColors()
-  const { source: loadedSource, isFallbackImage } = collectionImageSource
+  const {
+    source: loadedSource,
+    isFallbackImage,
+    onError
+  } = collectionImageSource
 
   const source = loadedSource ?? localCollectionImageUri
 
+  const handleError = useCallback(() => {
+    if (source && typeof source === 'object' && 'uri' in source && source.uri) {
+      onError(source.uri)
+    }
+  }, [source, onError])
+
   return (
     <FastImage
       {...other}
@@ -112,8 +127,9 @@ export const CollectionImage = (props: CollectionImageProps) => {
         },
         style
       ]}
-      source={source ?? { uri: '' }}
+      source={source}
       onLoad={onLoad}
+      onError={handleError}
     />
   )
 }

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

@@ -1,3 +1,5 @@
+import { useCallback } from 'react'
+
 import { useUser } from '@audius/common/api'
 import { useImageSize } from '@audius/common/hooks'
 import type { ID } from '@audius/common/models'
@@ -40,7 +42,7 @@ export const useCoverPhoto = ({
   })
   const { cover_photo, updatedCoverPhoto } = partialUser ?? {}
   const coverPhoto = cover_photo
-  const image = useImageSize({
+  const { imageUrl, onError } = useImageSize({
     artwork: coverPhoto,
     targetSize: size,
     defaultImage: '',
@@ -49,20 +51,21 @@ export const useCoverPhoto = ({
     }
   })
 
-  const isDefaultCover = image === ''
+  const isDefaultCover = imageUrl === ''
   const shouldBlur = isDefaultCover && !isDefaultProfile
 
   if (updatedCoverPhoto && !shouldBlur) {
     return {
       source: primitiveToImageSource(updatedCoverPhoto.url),
-      shouldBlur
+      shouldBlur,
+      onError
     }
   }
 
   if (shouldBlur) {
-    return { source: profilePicture, shouldBlur }
+    return { source: profilePicture, shouldBlur, onError }
   }
-  return { source: primitiveToImageSource(image), shouldBlur }
+  return { source: primitiveToImageSource(imageUrl), shouldBlur, onError }
 }
 
 type CoverPhotoProps = {
@@ -73,7 +76,7 @@ export const CoverPhoto = (props: CoverPhotoProps) => {
   const { userId, ...imageProps } = props
   const scrollY = useCurrentTabScrollY()
 
-  const { source, shouldBlur } = useCoverPhoto({
+  const { source, shouldBlur, onError } = useCoverPhoto({
     userId,
     size: WidthSizes.SIZE_640
   })
@@ -104,11 +107,17 @@ export const CoverPhoto = (props: CoverPhotoProps) => {
     })
   }))
 
+  const handleError = useCallback(() => {
+    if (source && typeof source === 'object' && 'uri' in source && source.uri) {
+      onError(source.uri)
+    }
+  }, [source, onError])
+
   if (!source) return null
 
   return (
     <Animated.View style={animatedStyle}>
-      <FastImage source={source} {...imageProps}>
+      <FastImage source={source} {...imageProps} onError={handleError}>
         {shouldBlur || scrollY ? (
           <AnimatedBlurView
             blurType='light'

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

@@ -1,3 +1,5 @@
+import { useCallback } from 'react'
+
 import { useTrack } from '@audius/common/api'
 import { useImageSize } from '@audius/common/hooks'
 import type { SquareSizes, ID } from '@audius/common/models'
@@ -49,7 +51,7 @@ export const useTrackImage = ({
       return track.artwork
     }
   })
-  const image = useImageSize({
+  const { imageUrl, onError } = useImageSize({
     artwork,
     targetSize: size,
     defaultImage: '',
@@ -58,10 +60,11 @@ export const useTrackImage = ({
     }
   })
 
-  if (image === '') {
+  if (imageUrl === '') {
     return {
       source: imageEmpty,
-      isFallbackImage: true
+      isFallbackImage: true,
+      onError
     }
   }
 
@@ -73,13 +76,15 @@ export const useTrackImage = ({
     return {
       // @ts-ignore
       source: primitiveToImageSource(artwork.url),
-      isFallbackImage: false
+      isFallbackImage: false,
+      onError
     }
   }
 
   return {
-    source: primitiveToImageSource(image),
-    isFallbackImage: false
+    source: primitiveToImageSource(imageUrl),
+    isFallbackImage: false,
+    onError
   }
 }
 
@@ -89,6 +94,7 @@ type TrackImageProps = {
   style?: FastImageProps['style']
   borderRadius?: CornerRadiusOptions
   onLoad?: FastImageProps['onLoad']
+  onError?: FastImageProps['onError']
   children?: React.ReactNode
 }
 
@@ -106,10 +112,21 @@ export const TrackImage = (props: TrackImageProps) => {
   const trackImageSource = useTrackImage({ trackId, size })
   const { cornerRadius } = useTheme()
   const { skeleton } = useThemeColors()
-  const { source: loadedSource, isFallbackImage } = trackImageSource
+  const { source: loadedSource, isFallbackImage, onError } = trackImageSource
 
   const source = loadedSource ?? localTrackImageUri
 
+  const handleError = useCallback(() => {
+    if (
+      source &&
+      typeof source === 'object' &&
+      'uri' in source &&
+      typeof source.uri === 'string'
+    ) {
+      onError(source.uri)
+    }
+  }, [source, onError])
+
   return (
     <FastImage
       {...other}
@@ -120,7 +137,8 @@ export const TrackImage = (props: TrackImageProps) => {
         },
         style
       ]}
-      source={source ?? { uri: '' }}
+      source={source}
+      onError={handleError}
       onLoad={onLoad}
     />
   )

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

@@ -1,3 +1,5 @@
+import { useCallback } from 'react'
+
 import { useUser } from '@audius/common/api'
 import { useImageSize } from '@audius/common/hooks'
 import type { SquareSizes, ID } from '@audius/common/models'
@@ -28,7 +30,7 @@ export const useProfilePicture = ({
   })
 
   const { profile_picture, updatedProfilePicture } = partialUser ?? {}
-  const image = useImageSize({
+  const { imageUrl, onError } = useImageSize({
     artwork: profile_picture,
     targetSize: size,
     defaultImage: '',
@@ -37,31 +39,40 @@ export const useProfilePicture = ({
     }
   })
 
-  if (image === '') {
+  if (imageUrl === '') {
     return {
       source: profilePicEmpty,
-      isFallbackImage: true
+      isFallbackImage: true,
+      onError
     }
   }
 
   if (updatedProfilePicture) {
     return {
       source: primitiveToImageSource(updatedProfilePicture.url),
-      isFallbackImage: false
+      isFallbackImage: false,
+      onError
     }
   }
 
   return {
-    source: primitiveToImageSource(image),
-    isFallbackImage: false
+    source: primitiveToImageSource(imageUrl),
+    isFallbackImage: false,
+    onError
   }
 }
 
 export type UserImageProps = UseUserImageOptions & Partial<FastImageProps>
 
 export const UserImage = (props: UserImageProps) => {
   const { userId, size, ...imageProps } = props
-  const { source } = useProfilePicture({ userId, size })
+  const { source, onError } = useProfilePicture({ userId, size })
+
+  const handleError = useCallback(() => {
+    if (source && typeof source === 'object' && 'uri' in source && source.uri) {
+      onError(source.uri)
+    }
+  }, [source, onError])
 
-  return <FastImage {...imageProps} source={source ?? { uri: '' }} />
+  return <FastImage {...imageProps} source={source} onError={handleError} />
 }