switch to new album list/cover art, remove old

app/screens/AlbumView.tsx

@@ -8,11 +8,11 @@ import { albumAtomFamily } from '@app/state/music'
 import { currentTrackAtom, useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
-import AlbumArt from '@app/components/AlbumArt'
 import Button from '@app/components/Button'
 import GradientBackground from '@app/components/GradientBackground'
 import ImageGradientScrollView from '@app/components/ImageGradientScrollView'
 import PressableOpacity from '@app/components/PressableOpacity'
+import CoverArt from '@app/components/CoverArt'
 
 const SongItem: React.FC<{
   id: string
@@ -91,7 +91,7 @@ const AlbumDetails: React.FC<{
       style={styles.container}>
       <View style={styles.content}>
         <View style={styles.cover}>
-          <AlbumArt id={album.id} height="100%" width="100%" />
+          <CoverArt coverArtUri={album.coverArtUri} height="100%" width="100%" />
         </View>
         <Text style={styles.title}>{album.name}</Text>
         <Text style={styles.subtitle}>

app/screens/Home.tsx

@@ -1,6 +1,7 @@
 import CoverArt from '@app/components/CoverArt'
 import GradientScrollView from '@app/components/GradientScrollView'
 import PressableOpacity from '@app/components/PressableOpacity'
+import { AlbumListItem } from '@app/models/music'
 import { albumLists } from '@app/state/music'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
@@ -9,13 +10,38 @@ import { useAtomValue } from 'jotai/utils'
 import React from 'react'
 import { ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
 
-const Category: React.FC<{
-  name: string
-  stateKey: string
-}> = ({ name, stateKey }) => {
+const AlbumItem: React.FC<{
+  album: AlbumListItem
+}> = ({ album }) => {
   const navigation = useNavigation()
 
-  const state = albumLists[stateKey]
+  return (
+    <PressableOpacity
+      onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
+      key={album.id}
+      style={styles.item}>
+      <CoverArt
+        PlaceholderComponent={() => <></>}
+        coverArtUri={album.coverArtThumbUri}
+        height={styles.item.width}
+        width={styles.item.width}
+      />
+      <Text style={styles.title} numberOfLines={1}>
+        {album.name}
+      </Text>
+      <Text style={styles.subtitle} numberOfLines={1}>
+        {album.artist}
+      </Text>
+    </PressableOpacity>
+  )
+}
+const MemoAlbumItem = React.memo(AlbumItem)
+
+const Category: React.FC<{
+  name: string
+  type: string
+}> = ({ name, type }) => {
+  const state = albumLists[type]
   const list = useAtomValue(state.listAtom)
   const updating = useAtomValue(state.updatingAtom)
   const updateList = state.useUpdateList()
@@ -28,40 +54,26 @@ const Category: React.FC<{
       <ScrollView
         horizontal={true}
         showsHorizontalScrollIndicator={false}
+        overScrollMode={'never'}
         style={styles.artScroll}
         contentContainerStyle={styles.artScrollContent}>
         {list.map(album => (
-          <PressableOpacity
-            onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
-            key={album.id}
-            style={styles.item}>
-            <CoverArt
-              PlaceholderComponent={() => <></>}
-              coverArtUri={album.coverArtThumbUri}
-              height={styles.item.width}
-              width={styles.item.width}
-            />
-            <Text style={styles.title} numberOfLines={1}>
-              {album.name}
-            </Text>
-            <Text style={styles.subtitle} numberOfLines={1}>
-              {album.artist}
-            </Text>
-          </PressableOpacity>
+          <MemoAlbumItem key={album.id} album={album} />
         ))}
       </ScrollView>
     </View>
   )
 }
+const MemoCategory = React.memo(Category)
 
 const Home = () => (
   <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
     <View style={styles.content}>
-      <Category name="Random Albums" stateKey="random" />
-      <Category name="Newest Albums" stateKey="newest" />
-      <Category name="Recent Albums" stateKey="recent" />
-      <Category name="Frequent Albums" stateKey="frequent" />
-      <Category name="Starred Albums" stateKey="starred" />
+      <MemoCategory name="Random Albums" type="random" />
+      <MemoCategory name="Newest Albums" type="newest" />
+      <MemoCategory name="Recent Albums" type="recent" />
+      <MemoCategory name="Frequent Albums" type="frequent" />
+      <MemoCategory name="Starred Albums" type="starred" />
     </View>
   </GradientScrollView>
 )

app/screens/LibraryAlbums.tsx

@@ -1,14 +1,14 @@
+import CoverArt from '@app/components/CoverArt'
+import GradientFlatList from '@app/components/GradientFlatList'
+import PressableOpacity from '@app/components/PressableOpacity'
+import { Album } from '@app/models/music'
+import { albumLists } from '@app/state/music'
+import colors from '@app/styles/colors'
+import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
-import { Album } from '@app/models/music'
-import { albumsAtom, albumsUpdatingAtom, useUpdateAlbums } from '@app/state/music'
-import font from '@app/styles/font'
-import AlbumArt from '@app/components/AlbumArt'
-import GradientFlatList from '@app/components/GradientFlatList'
-import colors from '@app/styles/colors'
-import PressableOpacity from '@app/components/PressableOpacity'
 
 const AlbumItem: React.FC<{
   id: string
@@ -16,14 +16,15 @@ const AlbumItem: React.FC<{
   size: number
   height: number
   artist?: string
-}> = ({ id, name, artist, size, height }) => {
+  coverArtUri?: string
+}> = ({ id, name, artist, size, height, coverArtUri }) => {
   const navigation = useNavigation()
 
   return (
     <PressableOpacity
       style={[styles.item, { maxWidth: size, height }]}
       onPress={() => navigation.navigate('AlbumView', { id, title: name })}>
-      <AlbumArt id={id} height={size} width={size} />
+      <CoverArt coverArtUri={coverArtUri} height={size} width={size} />
       <View style={styles.itemDetails}>
         <Text style={styles.title} numberOfLines={1}>
           {name}
@@ -42,6 +43,7 @@ const AlbumListRenderItem: React.FC<{
 }> = ({ item }) => (
   <MemoAlbumItem
     id={item.album.id}
+    coverArtUri={item.album.coverArtThumbUri}
     name={item.album.name}
     artist={item.album.artist}
     size={item.size}
@@ -50,19 +52,21 @@ const AlbumListRenderItem: React.FC<{
 )
 
 const AlbumsList = () => {
-  const albums = useAtomValue(albumsAtom)
-  const updating = useAtomValue(albumsUpdatingAtom)
-  const updateAlbums = useUpdateAlbums()
+  const state = albumLists.alphabeticalByArtist
+  const list = useAtomValue(state.listAtom)
+  const updating = useAtomValue(state.updatingAtom)
+  const updateList = state.useUpdateList()
+
   const layout = useWindowDimensions()
 
   const size = layout.width / 3 - styles.item.marginHorizontal * 2
   const height = size + 44
 
-  const albumsList = Object.values(albums).map(album => ({ album, size, height }))
+  const albumsList = list.map(album => ({ album, size, height }))
 
   useEffect(() => {
     if (albumsList.length === 0) {
-      updateAlbums()
+      updateList()
     }
   })
 
@@ -75,7 +79,7 @@ const AlbumsList = () => {
         numColumns={3}
         removeClippedSubviews={true}
         refreshing={updating}
-        onRefresh={updateAlbums}
+        onRefresh={updateList}
         overScrollMode="never"
         getItemLayout={(_data, index) => ({
           length: height,

app/screens/NowPlayingLayout.tsx

@@ -73,12 +73,7 @@ const SongCoverArt = () => {
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt
-        PlaceholderComponent={() => <View style={{ height: '100%', width: '100%' }} />}
-        height={'100%'}
-        width={'100%'}
-        coverArtUri={track?.artwork as string}
-      />
+      <CoverArt height="100%" width="100%" coverArtUri={track?.artwork as string} />
     </View>
   )
 }