improved large album/playlist performance

switched to flatlist for all of those

app/screens/LibraryAlbums.tsx

@@ -72,7 +72,6 @@ const AlbumsList = () => {
   return (
     <View style={styles.container}>
       <GradientFlatList
-        contentContainerStyle={styles.listContent}
         data={list.map(album => ({ album, size, height }))}
         renderItem={AlbumListRenderItem}
         keyExtractor={item => item.album.id}
@@ -100,9 +99,6 @@ const AlbumsList = () => {
 }
 
 const styles = StyleSheet.create({
-  listContent: {
-    minHeight: '100%',
-  },
   container: {
     flex: 1,
   },

app/screens/LibraryArtists.tsx

@@ -11,7 +11,7 @@ import React, { useEffect, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 
 const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
-  <ListItem item={item} showArt={true} showStar={false} listStyle="big" />
+  <ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
 )
 
 const filterOptions: OptionData[] = [
@@ -44,7 +44,6 @@ const ArtistsList = () => {
   return (
     <View style={styles.container}>
       <GradientFlatList
-        contentContainerStyle={styles.listContent}
         data={sortedList}
         renderItem={ArtistRenderItem}
         keyExtractor={item => item.id}
@@ -52,6 +51,7 @@ const ArtistsList = () => {
         refreshing={refreshing}
         overScrollMode="never"
         windowSize={3}
+        contentMarginTop={6}
       />
       <FilterButton
         data={filterOptions}
@@ -71,10 +71,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  listContent: {
-    minHeight: '100%',
+  listItem: {
     paddingHorizontal: 10,
-    paddingTop: 6,
   },
 })
 

app/screens/LibraryPlaylists.tsx

@@ -8,7 +8,7 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 
 const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
-  <ListItem item={item} showArt={true} showStar={false} listStyle="big" />
+  <ListItem item={item} showArt={true} showStar={false} listStyle="big" style={styles.listItem} />
 )
 
 const PlaylistsList = () => {
@@ -17,7 +17,6 @@ const PlaylistsList = () => {
 
   return (
     <GradientFlatList
-      contentContainerStyle={styles.listContent}
       data={list}
       renderItem={PlaylistRenderItem}
       keyExtractor={item => item.id}
@@ -25,15 +24,14 @@ const PlaylistsList = () => {
       refreshing={refreshing}
       overScrollMode="never"
       windowSize={5}
+      contentMarginTop={6}
     />
   )
 }
 
 const styles = StyleSheet.create({
-  listContent: {
-    minHeight: '100%',
+  listItem: {
     paddingHorizontal: 10,
-    paddingTop: 6,
   },
 })
 

app/screens/NowPlayingQueue.tsx

@@ -1,49 +1,56 @@
-import GradientScrollView from '@app/components/GradientScrollView'
+import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import NowPlayingBar from '@app/components/NowPlayingBar'
 import { useSkipTo } from '@app/hooks/trackplayer'
+import { Song } from '@app/models/music'
 import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
 import { selectTrackPlayerMap } from '@app/state/trackplayermap'
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
+const SongRenderItem: React.FC<{
+  item: {
+    song: Song
+    i: number
+    onPress: () => void
+  }
+}> = ({ item }) => (
+  <ListItem
+    item={item.song}
+    queueId={item.i}
+    onPress={item.onPress}
+    showArt={true}
+    style={styles.listItem}
+    subtitle={`${item.song.artist} • ${item.song.album}`}
+  />
+)
+
 const NowPlayingQueue = React.memo<{}>(() => {
   const queue = useStore(selectTrackPlayer.queue)
   const mapTrackExtToSong = useStore(selectTrackPlayerMap.mapTrackExtToSong)
   const skipTo = useSkipTo()
 
   return (
-    <View style={styles.outerContainer}>
-      <GradientScrollView style={styles.container}>
-        <View style={styles.content}>
-          {queue.map(mapTrackExtToSong).map((song, i) => (
-            <ListItem
-              key={i}
-              item={song}
-              queueId={i}
-              onPress={() => skipTo(i)}
-              showArt={true}
-              subtitle={`${song.artist} • ${song.album}`}
-            />
-          ))}
-        </View>
-      </GradientScrollView>
+    <View style={styles.container}>
+      <GradientFlatList
+        data={queue.map(mapTrackExtToSong).map((song, i) => ({ song, i, onPress: () => skipTo(i) }))}
+        renderItem={SongRenderItem}
+        keyExtractor={(item, i) => i.toString()}
+        overScrollMode="never"
+        windowSize={7}
+        contentMarginTop={10}
+      />
       <NowPlayingBar />
     </View>
   )
 })
 
 const styles = StyleSheet.create({
-  outerContainer: {
-    flex: 1,
-  },
   container: {
     flex: 1,
   },
-  content: {
-    alignItems: 'center',
-    paddingTop: 10,
+  listItem: {
     paddingHorizontal: 20,
   },
 })

app/screens/SearchResultsView.tsx

@@ -28,6 +28,7 @@ const ResultsListItem: React.FC<{ item: SearchListItemType }> = ({ item }) => {
       showStar={false}
       listStyle="small"
       onPress={onPress}
+      style={styles.listItem}
     />
   )
 }
@@ -69,25 +70,24 @@ const SearchResultsView: React.FC<{
 
   return (
     <GradientFlatList
-      contentContainerStyle={styles.listContent}
       data={list}
       renderItem={SearchResultsRenderItem}
-      keyExtractor={item => item.id}
+      keyExtractor={(item, i) => i.toString()}
       onRefresh={refresh}
       refreshing={refreshing}
       overScrollMode="never"
       onEndReached={fetchNextPage}
       removeClippedSubviews={true}
       onEndReachedThreshold={2}
+      contentMarginTop={6}
+      windowSize={5}
     />
   )
 }
 
 const styles = StyleSheet.create({
-  listContent: {
-    minHeight: '100%',
+  listItem: {
     paddingHorizontal: 10,
-    paddingTop: 6,
   },
 })
 

app/screens/SongListView.tsx

@@ -1,10 +1,9 @@
 import CoverArt from '@app/components/CoverArt'
 import GradientBackground from '@app/components/GradientBackground'
 import HeaderBar from '@app/components/HeaderBar'
-import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
+import ImageGradientFlatList from '@app/components/ImageGradientFlatList'
 import ListItem from '@app/components/ListItem'
 import ListPlayerControls from '@app/components/ListPlayerControls'
-import NothingHere from '@app/components/NothingHere'
 import { useCoverArtFile } from '@app/hooks/cache'
 import { useAlbumWithSongs, usePlaylistWithSongs } from '@app/hooks/music'
 import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
@@ -23,15 +22,42 @@ const SongListDetailsFallback = React.memo(() => (
   </GradientBackground>
 ))
 
-const Songs = React.memo<{
-  songs: Song[]
-  name: string
+const SongRenderItem: React.FC<{
+  item: {
+    song: Song
+    contextId?: string
+    queueId?: number
+    subtitle?: string
+    onPress?: () => void
+    showArt?: boolean
+  }
+}> = ({ item }) => (
+  <ListItem
+    item={item.song}
+    contextId={item.contextId}
+    queueId={item.queueId}
+    subtitle={item.subtitle}
+    onPress={item.onPress}
+    showArt={item.showArt}
+    style={styles.listItem}
+  />
+)
+
+const SongListDetails = React.memo<{
+  title: string
   type: SongListType
-  itemId: string
-}>(({ songs, name, type, itemId }) => {
+  songList?: AlbumWithSongs | PlaylistWithSongs
+  subtitle?: string
+}>(({ title, songList, subtitle, type }) => {
+  const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
+  const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
   const setQueue = useStore(selectTrackPlayer.setQueue)
 
-  const _songs = [...songs]
+  if (!songList) {
+    return <SongListDetailsFallback />
+  }
+
+  const _songs = [...songList.songs]
   let typeName = ''
 
   if (type === 'album') {
@@ -49,46 +75,6 @@ const Songs = React.memo<{
     typeName = 'Playlist'
   }
 
-  return (
-    <>
-      <ListPlayerControls
-        style={styles.controls}
-        songs={_songs}
-        typeName={typeName}
-        queueName={name}
-        queueContextId={itemId}
-        queueContextType={type}
-      />
-      <View style={styles.songs}>
-        {_songs.map((s, i) => (
-          <ListItem
-            key={i}
-            item={s}
-            contextId={itemId}
-            queueId={i}
-            subtitle={s.artist}
-            onPress={() => setQueue(_songs, name, type, itemId, i)}
-            showArt={false}
-          />
-        ))}
-      </View>
-    </>
-  )
-})
-
-const SongListDetails = React.memo<{
-  title: string
-  type: SongListType
-  songList?: AlbumWithSongs | PlaylistWithSongs
-  subtitle?: string
-}>(({ title, songList, subtitle, type }) => {
-  const coverArtFile = useCoverArtFile(songList?.coverArt, 'thumbnail')
-  const [headerColor, setHeaderColor] = useState<string | undefined>(undefined)
-
-  if (!songList) {
-    return <SongListDetailsFallback />
-  }
-
   return (
     <View style={styles.container}>
       <HeaderBar
@@ -96,21 +82,43 @@ const SongListDetails = React.memo<{
         title={title}
         contextItem={songList.itemType === 'album' ? songList : undefined}
       />
-      <ImageGradientScrollView
-        imagePath={coverArtFile?.file?.path}
-        style={styles.container}
-        onGetColor={setHeaderColor}>
-        <View style={styles.content}>
-          <CoverArt type="cover" size="original" coverArt={songList.coverArt} style={styles.cover} />
-          <Text style={styles.title}>{songList.name}</Text>
-          {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
-          {songList.songs.length > 0 ? (
-            <Songs songs={songList.songs} name={songList.name} type={type} itemId={songList.id} />
-          ) : (
-            <NothingHere height={300} width={250} />
-          )}
-        </View>
-      </ImageGradientScrollView>
+      <ImageGradientFlatList
+        data={_songs.map((s, i) => ({
+          song: s,
+          contextId: songList.id,
+          queueId: i,
+          subtitle: s.artist,
+          onPress: () => setQueue(_songs, songList.name, type, songList.id, i),
+          showArt: songList.itemType === 'playlist',
+        }))}
+        renderItem={SongRenderItem}
+        keyExtractor={(item, i) => i.toString()}
+        backgroundProps={{
+          imagePath: coverArtFile?.file?.path,
+          style: styles.container,
+          onGetColor: setHeaderColor,
+        }}
+        overScrollMode="never"
+        windowSize={7}
+        contentMarginTop={26}
+        ListHeaderComponent={
+          <View style={styles.content}>
+            <CoverArt type="cover" size="original" coverArt={songList.coverArt} style={styles.cover} />
+            <Text style={styles.title}>{songList.name}</Text>
+            {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
+            {songList.songs.length > 0 && (
+              <ListPlayerControls
+                style={styles.controls}
+                songs={_songs}
+                typeName={typeName}
+                queueName={songList.name}
+                queueContextId={songList.id}
+                queueContextType={type}
+              />
+            )}
+          </View>
+        }
+      />
     </View>
   )
 })
@@ -185,6 +193,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingTop: 100,
   },
+  listItem: {
+    paddingHorizontal: 20,
+  },
 })
 
 export default SongListView