full reworked images to download (cache) first

app/screens/ArtistView.tsx

@@ -35,7 +35,12 @@ const AlbumItem = React.memo<{
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
       menuStyle={[styles.albumItem, { width }]}
       triggerOuterWrapperStyle={{ width }}>
-      <CoverArt coverArt={album.coverArt} style={{ height, width }} resizeMode={FastImage.resizeMode.cover} />
+      <CoverArt
+        type="cover"
+        coverArt={album.coverArt}
+        style={{ height, width }}
+        resizeMode={FastImage.resizeMode.cover}
+      />
       <Text style={styles.albumTitle}>{album.name}</Text>
       <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
     </AlbumContextPressable>
@@ -111,11 +116,10 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
         contentContainerStyle={styles.scrollContent}
         onScroll={onScroll}>
         <CoverArt
+          type="artist"
           artistId={artist.id}
           style={styles.artistCover}
           resizeMode={FastImage.resizeMode.cover}
-          round={false}
-          imageSize="original"
         />
         <View style={styles.titleContainer}>
           <Text style={styles.title}>{artist.name}</Text>

app/screens/Home.tsx

@@ -34,6 +34,7 @@ const AlbumItem = React.memo<{
       triggerWrapperStyle={styles.item}
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
       <CoverArt
+        type="cover"
         coverArt={album.coverArt}
         style={{ height: styles.item.width, width: styles.item.width }}
         resizeMode={FastImage.resizeMode.cover}

app/screens/LibraryAlbums.tsx

@@ -26,6 +26,7 @@ const AlbumItem = React.memo<{
       triggerWrapperStyle={[styles.itemWrapper, { height }]}
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
       <CoverArt
+        type="cover"
         coverArt={album.coverArt}
         style={{ height: size, width: size }}
         resizeMode={FastImage.resizeMode.cover}

app/screens/NowPlayingView.tsx

@@ -107,7 +107,7 @@ const SongCoverArt = () => {
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt coverArt={track?.coverArt} style={coverArtStyles.image} imageSize="original" />
+      <CoverArt type="cover" coverArt={track?.coverArt} style={coverArtStyles.image} />
     </View>
   )
 }
@@ -390,9 +390,11 @@ const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
     }
   })
 
+  const imagePath = typeof track?.artwork === 'string' ? track?.artwork.replace('file://', '') : undefined
+
   return (
     <View style={styles.container}>
-      <ImageGradientBackground imageUri={track?.artwork as string} imageKey={`${track?.album}${track?.artist}`} />
+      <ImageGradientBackground imagePath={imagePath} />
       <NowPlayingHeader />
       <View style={styles.content}>
         <SongCoverArt />

app/screens/SongListView.tsx

@@ -4,7 +4,7 @@ import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
 import ListItem from '@app/components/ListItem'
 import ListPlayerControls from '@app/components/ListPlayerControls'
 import NothingHere from '@app/components/NothingHere'
-import { useAlbumWithSongs, useCoverArtUri, usePlaylistWithSongs } from '@app/hooks/music'
+import { useAlbumWithSongs, useCoverArtFile, usePlaylistWithSongs } from '@app/hooks/music'
 import { useSetQueue } from '@app/hooks/trackplayer'
 import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
 import colors from '@app/styles/colors'
@@ -73,16 +73,16 @@ const SongListDetails = React.memo<{
   songList?: AlbumWithSongs | PlaylistWithSongs
   subtitle?: string
 }>(({ songList, subtitle, type }) => {
-  const coverArtUri = useCoverArtUri()
+  const coverArtFile = useCoverArtFile(songList?.coverArt)
 
   if (!songList) {
     return <SongListDetailsFallback />
   }
 
   return (
-    <ImageGradientScrollView imageUri={coverArtUri(songList.coverArt)} style={styles.container}>
+    <ImageGradientScrollView imagePath={coverArtFile?.path} style={styles.container}>
       <View style={styles.content}>
-        <CoverArt coverArt={songList.coverArt} style={styles.cover} imageSize="original" />
+        <CoverArt type="cover" coverArt={songList.coverArt} style={styles.cover} />
         <Text style={styles.title}>{songList.name}</Text>
         {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
         {songList.songs.length > 0 ? (