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/components/ContextMenu.tsx

@@ -119,11 +119,13 @@ const ContextMenuIconTextOption = React.memo<ContextMenuIconTextOptionProps>(
 const MenuHeader = React.memo<{
   coverArt?: string
   artistId?: string
+  albumId?: string
   title: string
   subtitle?: string
-}>(({ coverArt, artistId, title, subtitle }) => (
-  <View style={styles.menuHeader}>
-    {artistId ? (
+}>(({ coverArt, artistId, albumId, title, subtitle }) => {
+  let CoverArtComponent = <></>
+  if (artistId) {
+    CoverArtComponent = (
       <CoverArt
         type="artist"
         artistId={artistId}
@@ -133,7 +135,20 @@ const MenuHeader = React.memo<{
         size="thumbnail"
         fadeDuration={0}
       />
-    ) : (
+    )
+  } else if (albumId) {
+    CoverArtComponent = (
+      <CoverArt
+        type="album"
+        albumId={albumId}
+        style={styles.coverArt}
+        resizeMode="cover"
+        size="thumbnail"
+        fadeDuration={0}
+      />
+    )
+  } else {
+    CoverArtComponent = (
       <CoverArt
         type="cover"
         coverArt={coverArt}
@@ -142,21 +157,27 @@ const MenuHeader = React.memo<{
         size="thumbnail"
         fadeDuration={0}
       />
-    )}
-    <View style={styles.menuHeaderText}>
-      <Text numberOfLines={1} style={styles.menuTitle}>
-        {title}
-      </Text>
-      {subtitle ? (
-        <Text numberOfLines={1} style={styles.menuSubtitle}>
-          {subtitle}
+    )
+  }
+
+  return (
+    <View style={styles.menuHeader}>
+      {CoverArtComponent}
+      <View style={styles.menuHeaderText}>
+        <Text numberOfLines={1} style={styles.menuTitle}>
+          {title}
         </Text>
-      ) : (
-        <></>
-      )}
+        {subtitle ? (
+          <Text numberOfLines={1} style={styles.menuSubtitle}>
+            {subtitle}
+          </Text>
+        ) : (
+          <></>
+        )}
+      </View>
     </View>
-  </View>
-))
+  )
+})
 
 const OptionStar = withSuspenseMemo<{
   id: string
@@ -260,7 +281,7 @@ export const SongContextPressable: React.FC<SongContextPressableProps> = props =
   return (
     <ContextMenu
       {...props}
-      menuHeader={<MenuHeader title={song.title} subtitle={song.artist} coverArt={song.coverArt} />}
+      menuHeader={<MenuHeader title={song.title} subtitle={song.artist} albumId={song.albumId} />}
       menuOptions={
         <>
           <OptionStar id={song.id} type={song.itemType} />
@@ -307,7 +328,7 @@ export const NowPlayingContextPressable: React.FC<NowPlayingContextPressableProp
   return (
     <ContextMenu
       {...props}
-      menuHeader={<MenuHeader title={song.title} subtitle={song.artist} coverArt={song.coverArt} />}
+      menuHeader={<MenuHeader title={song.title} subtitle={song.artist} albumId={song.albumId} />}
       menuOptions={
         <>
           <OptionStar id={song.id} type={song.itemType} />

app/components/CoverArt.tsx

@@ -1,4 +1,4 @@
-import { useQueryArtistArtPath, useQueryCoverArtPath } from '@app/hooks/query'
+import { useQueryAlbumCoverArtPath, useQueryArtistArtPath, useQueryCoverArtPath } from '@app/hooks/query'
 import { CacheImageSize } from '@app/models/cache'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
@@ -32,6 +32,11 @@ type CoverArtProps = BaseProps & {
   coverArt?: string
 }
 
+type AlbumIdProps = BaseProps & {
+  type: 'album'
+  albumId?: string
+}
+
 type ImageSourceProps = BaseProps & {
   data?: string
   isFetching: boolean
@@ -82,7 +87,13 @@ const CoverArtImage = React.memo<CoverArtProps>(props => {
   return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
 })
 
-const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps>(props => {
+const AlbumIdIamge = React.memo<AlbumIdProps>(props => {
+  const { data, isFetching, isExistingFetching } = useQueryAlbumCoverArtPath(props.albumId, props.size)
+
+  return <ImageSource data={data} isFetching={isFetching} isExistingFetching={isExistingFetching} {...props} />
+})
+
+const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps | AlbumIdProps>(props => {
   const viewStyles = [props.style]
   if (props.round) {
     viewStyles.push(styles.round)
@@ -93,6 +104,9 @@ const CoverArt = React.memo<CoverArtProps | ArtistCoverArtProps>(props => {
     case 'artist':
       imageComponent = <ArtistImage {...(props as ArtistCoverArtProps)} />
       break
+    case 'album':
+      imageComponent = <AlbumIdIamge {...(props as AlbumIdProps)} />
+      break
     default:
       imageComponent = <CoverArtImage {...(props as CoverArtProps)} />
       break

app/components/ListItem.tsx

@@ -160,6 +160,10 @@ const ListItem: React.FC<{
         size="thumbnail"
       />
     )
+  } else if (item.itemType === 'song') {
+    coverArt = (
+      <CoverArt type="album" albumId={item.albumId} style={artStyle} resizeMode={resizeMode} size="thumbnail" />
+    )
   } else {
     coverArt = (
       <CoverArt type="cover" coverArt={item.coverArt} style={artStyle} resizeMode={resizeMode} size="thumbnail" />

app/components/NowPlayingBar.tsx

@@ -79,7 +79,7 @@ const Controls = React.memo(() => {
 const NowPlayingBar = React.memo(() => {
   const navigation = useNavigation()
   const currentTrackExists = useStore(store => !!store.currentTrack)
-  const coverArt = useStore(store => store.currentTrack?.coverArt)
+  const albumId = useStore(store => store.currentTrack?.albumId)
   const title = useStore(store => store.currentTrack?.title)
   const artist = useStore(store => store.currentTrack?.artist)
 
@@ -90,9 +90,9 @@ const NowPlayingBar = React.memo(() => {
       <ProgressBar />
       <View style={styles.subContainer}>
         <CoverArt
-          type="cover"
+          type="album"
           style={{ height: styles.subContainer.height, width: styles.subContainer.height }}
-          coverArt={coverArt}
+          albumId={albumId}
           size="thumbnail"
           fadeDuration={0}
         />