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 const ArtistIdImageLoaded = React.memo( - ({ 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( resizeMode={resizeMode || FastImage.resizeMode.contain} onProgress={enableLoading} onLoadEnd={disableLoading} + onError={fallbackError} /> ) }, @@ -68,7 +70,7 @@ const ArtistIdImage = React.memo(props => { }) const CoverArtImage = React.memo( - ({ 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( resizeMode={resizeMode || FastImage.resizeMode.contain} onProgress={enableLoading} onLoadEnd={disableLoading} + onError={fallbackError} /> ) }, @@ -85,9 +88,14 @@ const CoverArtImage = React.memo( const CoverArt: React.FC = ({ 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 = ({ coverArt, artistId, resizeMode, ima viewStyles.push(styles.round) } + let ImageComponent + if (artistId) { + ImageComponent = ( + + ) + } else { + ImageComponent = ( + + ) + } + + if (fallback) { + ImageComponent = ( + + ) + } + return ( - {artistId ? ( - - ) : ( - - )} + {ImageComponent} ) 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 ( - + Nothing here... ) diff --git a/res/fallback.png b/res/fallback.png new file mode 100644 index 0000000..508f1eb Binary files /dev/null and b/res/fallback.png differ