From 3615ec9ab685de393b8cccde00a43a21e1bbb178 Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Mon, 26 Jul 2021 11:01:39 +0900
Subject: [PATCH] coverart error fallback image

---
 app/components/CoverArt.tsx    |  72 ++++++++++++++++++++++-----------
 app/components/NothingHere.tsx |   2 +-
 res/fallback.png               | Bin 0 -> 5050 bytes
 3 files changed, 50 insertions(+), 24 deletions(-)
 create mode 100644 res/fallback.png

diff --git a/app/components/CoverArt.tsx b/app/components/CoverArt.tsx
index 440b88c..7d9a624 100644
--- a/app/components/CoverArt.tsx
+++ b/app/components/CoverArt.tsx
@@ -16,6 +16,7 @@ type BaseProps = {
 type BaseImageProps = BaseProps & {
   enableLoading: () => void
   disableLoading: () => void
+  fallbackError: () => void
 }
 
 type ArtistIdProp = {
@@ -32,7 +33,7 @@ type CoverArtImageProps = BaseImageProps & CoverArtProp
 type CoverArtProps = BaseProps & CoverArtProp & Partial<ArtistIdProp>
 
 const ArtistIdImageLoaded = React.memo<ArtistIdImageProps>(
-  ({ artistId, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading }) => {
+  ({ artistId, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
     const artistInfo = useAtomValue(artistInfoAtomFamily(artistId))
 
     const uri = imageSize === 'thumbnail' ? artistInfo?.smallImageUrl : artistInfo?.largeImageUrl
@@ -44,6 +45,7 @@ const ArtistIdImageLoaded = React.memo<ArtistIdImageProps>(
         resizeMode={resizeMode || FastImage.resizeMode.contain}
         onProgress={enableLoading}
         onLoadEnd={disableLoading}
+        onError={fallbackError}
       />
     )
   },
@@ -68,7 +70,7 @@ const ArtistIdImage = React.memo<ArtistIdImageProps>(props => {
 })
 
 const CoverArtImage = React.memo<CoverArtImageProps>(
-  ({ coverArt, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading }) => {
+  ({ coverArt, imageSize, style, imageStyle, resizeMode, enableLoading, disableLoading, fallbackError }) => {
     const coverArtUri = useCoverArtUri()
 
     return (
@@ -78,6 +80,7 @@ const CoverArtImage = React.memo<CoverArtImageProps>(
         resizeMode={resizeMode || FastImage.resizeMode.contain}
         onProgress={enableLoading}
         onLoadEnd={disableLoading}
+        onError={fallbackError}
       />
     )
   },
@@ -85,9 +88,14 @@ const CoverArtImage = React.memo<CoverArtImageProps>(
 
 const CoverArt: React.FC<CoverArtProps> = ({ coverArt, artistId, resizeMode, imageSize, style, imageStyle, round }) => {
   const [loading, setLoading] = useState(false)
+  const [fallback, setFallback] = useState(false)
 
   const enableLoading = React.useCallback(() => setLoading(true), [])
   const disableLoading = React.useCallback(() => setLoading(false), [])
+  const fallbackError = React.useCallback(() => {
+    setFallback(true)
+    setLoading(false)
+  }, [])
 
   imageSize = imageSize === undefined ? 'thumbnail' : 'original'
   round = round === undefined ? artistId !== undefined : round
@@ -97,29 +105,47 @@ const CoverArt: React.FC<CoverArtProps> = ({ coverArt, artistId, resizeMode, ima
     viewStyles.push(styles.round)
   }
 
+  let ImageComponent
+  if (artistId) {
+    ImageComponent = (
+      <ArtistIdImage
+        artistId={artistId}
+        imageSize={imageSize}
+        style={style}
+        imageStyle={imageStyle}
+        resizeMode={resizeMode}
+        enableLoading={enableLoading}
+        disableLoading={disableLoading}
+        fallbackError={fallbackError}
+      />
+    )
+  } else {
+    ImageComponent = (
+      <CoverArtImage
+        coverArt={coverArt}
+        imageSize={imageSize}
+        style={style}
+        imageStyle={imageStyle}
+        resizeMode={resizeMode}
+        enableLoading={enableLoading}
+        disableLoading={disableLoading}
+        fallbackError={fallbackError}
+      />
+    )
+  }
+
+  if (fallback) {
+    ImageComponent = (
+      <FastImage
+        source={require('@res/fallback.png')}
+        style={[{ height: style?.height, width: style?.width }, imageStyle]}
+      />
+    )
+  }
+
   return (
     <View style={viewStyles}>
-      {artistId ? (
-        <ArtistIdImage
-          artistId={artistId}
-          imageSize={imageSize}
-          style={style}
-          imageStyle={imageStyle}
-          resizeMode={resizeMode}
-          enableLoading={enableLoading}
-          disableLoading={disableLoading}
-        />
-      ) : (
-        <CoverArtImage
-          coverArt={coverArt}
-          imageSize={imageSize}
-          style={style}
-          imageStyle={imageStyle}
-          resizeMode={resizeMode}
-          enableLoading={enableLoading}
-          disableLoading={disableLoading}
-        />
-      )}
+      {ImageComponent}
       <ActivityIndicator animating={loading} size="large" color={colors.accent} style={styles.indicator} />
     </View>
   )
diff --git a/app/components/NothingHere.tsx b/app/components/NothingHere.tsx
index 8d0ecda..42f2274 100644
--- a/app/components/NothingHere.tsx
+++ b/app/components/NothingHere.tsx
@@ -12,7 +12,7 @@ const NothingHere = React.memo<{
 
   return (
     <View style={[styles.container, { height, width }]}>
-      <Icon name="music-note-outline" color={styles.text.color} size={width / 2} />
+      <Icon name="music-rest-quarter" color={styles.text.color} size={width / 2} />
       <Text style={[styles.text, { fontSize: width / 8 }]}>Nothing here...</Text>
     </View>
   )
diff --git a/res/fallback.png b/res/fallback.png
new file mode 100644
index 0000000000000000000000000000000000000000..508f1ebc0ac3a916ad3afa7f301da47fe63fbc2b
GIT binary patch
literal 5050
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
ZkIvdw6@OHYW?*1o@O1TaS?83{1ORwU7>@t|

literal 0
HcmV?d00001