Bugfix/large playlist crash (#111)

* get all song coverArt as they are rendered

doing it all up front was too heavy
temporarily disabled mapping artwork in setQueue, need to fix this

* use cache data for track artwork when available

* fix round art in context menu for songs

* set only the first artwork at play time

then set the rest in the playback service

* handle both cached images and fetching images

* remove commented code

* fix shuffle

fix first thumbnail not being updated on shuffle for now playing background

app/screens/ArtistView.tsx

@@ -49,7 +49,7 @@ const TopSongs = withSuspenseMemo<{
   name: string
 }>(
   ({ songs, name }) => {
-    const { setQueue, isReady, contextId } = useSetQueue('artist', songs)
+    const { setQueue, contextId } = useSetQueue('artist', songs)
     const { t } = useTranslation()
 
     return (
@@ -64,7 +64,6 @@ const TopSongs = withSuspenseMemo<{
             showArt={true}
             subtitle={s.album}
             onPress={() => setQueue({ title: name, playTrack: i })}
-            disabled={!isReady}
           />
         ))}
       </>

app/screens/NowPlayingView.tsx

@@ -90,11 +90,11 @@ const headerStyles = StyleSheet.create({
 })
 
 const SongCoverArt = () => {
-  const coverArt = useStore(store => store.currentTrack?.coverArt)
+  const albumId = useStore(store => store.currentTrack?.albumId)
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt type="cover" size="original" coverArt={coverArt} style={coverArtStyles.image} />
+      <CoverArt type="album" size="original" albumId={albumId} style={coverArtStyles.image} />
     </View>
   )
 }

app/screens/Search.tsx

@@ -26,7 +26,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 const SongItem = React.memo<{ item: Song }>(({ item }) => {
-  const { setQueue, isReady, contextId } = useSetQueue('song', [item])
+  const { setQueue, contextId } = useSetQueue('song', [item])
 
   return (
     <ListItem
@@ -36,7 +36,6 @@ const SongItem = React.memo<{ item: Song }>(({ item }) => {
       showArt={true}
       showStar={false}
       onPress={() => setQueue({ title: item.title, playTrack: 0 })}
-      disabled={!isReady}
     />
   )
 }, equal)

app/screens/SearchResultsView.tsx

@@ -13,7 +13,7 @@ import { StyleSheet } from 'react-native'
 type SearchListItemType = Album | Song | Artist
 
 const SongResultsListItem: React.FC<{ item: Song }> = ({ item }) => {
-  const { setQueue, isReady, contextId } = useSetQueue('song', [item])
+  const { setQueue, contextId } = useSetQueue('song', [item])
 
   return (
     <ListItem
@@ -25,7 +25,6 @@ const SongResultsListItem: React.FC<{ item: Song }> = ({ item }) => {
       listStyle="small"
       onPress={() => setQueue({ title: item.title, playTrack: 0 })}
       style={styles.listItem}
-      disabled={!isReady}
     />
   )
 }

app/screens/SongListView.tsx

@@ -69,13 +69,13 @@ const SongListDetails = React.memo<{
     }
   }
 
-  const { setQueue, isReady, contextId } = useSetQueue(type, _songs)
+  const { setQueue, contextId } = useSetQueue(type, _songs)
 
   if (!songList) {
     return <SongListDetailsFallback />
   }
 
-  const disabled = !isReady || _songs.length === 0
+  const disabled = _songs.length === 0
   const play = (track?: number, shuffle?: boolean) => () =>
     setQueue({ title: songList.name, playTrack: track, shuffle })