switch to new album list/cover art, remove old

app/components/AlbumArt.tsx

@@ -1,57 +0,0 @@
-import { useAtomValue } from 'jotai/utils'
-import React from 'react'
-import { ActivityIndicator, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
-import LinearGradient from 'react-native-linear-gradient'
-import { albumArtAtomFamily } from '@app/state/music'
-import colors from '@app/styles/colors'
-import CoverArt from '@app/components/CoverArt'
-
-interface AlbumArtProps {
-  id: string
-  height: string | number
-  width: string | number
-}
-
-const AlbumArt: React.FC<AlbumArtProps> = ({ id, height, width }) => {
-  const albumArt = useAtomValue(albumArtAtomFamily(id))
-
-  const Placeholder = () => (
-    <LinearGradient colors={[colors.accent, colors.accentLow]}>
-      <FastImage
-        source={require('@res/icons/record.png')}
-        style={{ height, width }}
-        resizeMode={FastImage.resizeMode.contain}
-      />
-    </LinearGradient>
-  )
-
-  return (
-    <CoverArt
-      PlaceholderComponent={Placeholder}
-      height={height}
-      width={width}
-      coverArtUri={width > 200 ? albumArt?.uri : albumArt?.thumbUri}
-    />
-  )
-}
-
-const AlbumArtFallback: React.FC<AlbumArtProps> = ({ height, width }) => (
-  <View
-    style={{
-      height,
-      width,
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}>
-    <ActivityIndicator size="small" color={colors.accent} />
-  </View>
-)
-
-const AlbumArtLoader: React.FC<AlbumArtProps> = props => (
-  <React.Suspense fallback={<AlbumArtFallback {...props} />}>
-    <AlbumArt {...props} />
-  </React.Suspense>
-)
-
-export default React.memo(AlbumArtLoader)

app/components/CoverArt.tsx

@@ -4,7 +4,7 @@ import FastImage from 'react-native-fast-image'
 import colors from '@app/styles/colors'
 
 const CoverArt: React.FC<{
-  PlaceholderComponent: () => JSX.Element
+  PlaceholderComponent?: () => JSX.Element
   height?: string | number
   width?: string | number
   coverArtUri?: string
@@ -25,6 +25,7 @@ const CoverArt: React.FC<{
       resizeMode={FastImage.resizeMode.contain}
       onError={() => {
         setLoading(false)
+        console.log('asdfdsaf')
         setPlaceholderVisible(true)
       }}
       onLoadEnd={() => setLoading(false)}
@@ -35,7 +36,7 @@ const CoverArt: React.FC<{
     <View style={{ ...styles.container, height, width }}>
       {coverArtUri ? <Image /> : <></>}
       <View style={{ ...styles.placeholderContainer, opacity: placeholderVisible ? 1 : 0 }}>
-        <PlaceholderComponent />
+        {PlaceholderComponent ? <PlaceholderComponent /> : <></>}
       </View>
       <ActivityIndicator style={styles.indicator} animating={loading} size={'large'} color={colors.accent} />
     </View>

app/components/NowPlayingBar.tsx

@@ -69,7 +69,6 @@ const NowPlayingBar = () => {
       <ProgressBar />
       <View style={styles.subContainer}>
         <CoverArt
-          PlaceholderComponent={() => <Text>hi</Text>}
           height={styles.subContainer.height}
           width={styles.subContainer.height}
           coverArtUri={track?.artworkThumb}

app/models/music.ts

@@ -37,11 +37,6 @@ export interface AlbumListItem {
   coverArtThumbUri?: string
 }
 
-export interface AlbumArt {
-  uri?: string
-  thumbUri?: string
-}
-
 export interface AlbumWithSongs extends Album {
   songs: Song[]
 }

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>
   )
 }

app/state/music.ts

@@ -1,6 +1,6 @@
 import { Atom, atom, useAtom, WritableAtom } from 'jotai'
 import { atomFamily, useAtomValue, useUpdateAtom } from 'jotai/utils'
-import { Album, AlbumArt, AlbumListItem, AlbumWithSongs, Artist, ArtistArt, ArtistInfo, Song } from '@app/models/music'
+import { Album, AlbumListItem, AlbumWithSongs, Artist, ArtistArt, ArtistInfo, Song } from '@app/models/music'
 import { SubsonicApiClient } from '@app/subsonic/api'
 import { AlbumID3Element, ArtistInfo2Element, ChildElement } from '@app/subsonic/elements'
 import { GetArtistResponse } from '@app/subsonic/responses'
@@ -39,42 +39,11 @@ export const useUpdateArtists = () => {
   }
 }
 
-export const albumsAtom = atom<Record<string, Album>>({})
-export const albumsUpdatingAtom = atom(false)
-
-export const useUpdateAlbums = () => {
-  const server = useAtomValue(activeServerAtom)
-  const [updating, setUpdating] = useAtom(albumsUpdatingAtom)
-  const setAlbums = useUpdateAtom(albumsAtom)
-
-  if (!server) {
-    return () => Promise.resolve()
-  }
-
-  return async () => {
-    if (updating) {
-      return
-    }
-    setUpdating(true)
-
-    const client = new SubsonicApiClient(server)
-    const response = await client.getAlbumList2({ type: 'alphabeticalByArtist', size: 500 })
-
-    setAlbums(
-      response.data.albums.reduce((acc, next) => {
-        const album = mapAlbumID3(next, client)
-        acc[album.id] = album
-        return acc
-      }, {} as Record<string, Album>),
-    )
-    setUpdating(false)
-  }
-}
-
 const useUpdateAlbumListBase = (
   type: GetAlbumList2Type,
   albumListAtom: WritableAtom<AlbumListItem[], AlbumListItem[]>,
   updatingAtom: WritableAtom<boolean, boolean>,
+  size: number,
 ) => {
   const server = useAtomValue(activeServerAtom)
   const setAlbumList = useUpdateAtom(albumListAtom)
@@ -91,19 +60,19 @@ const useUpdateAlbumListBase = (
     setUpdating(true)
 
     const client = new SubsonicApiClient(server)
-    const response = await client.getAlbumList2({ type, size: 20 })
+    const response = await client.getAlbumList2({ type, size })
 
     setAlbumList(response.data.albums.map(a => mapAlbumID3toAlbumListItem(a, client)))
     setUpdating(false)
   }
 }
 
-function createAlbumList(type: GetAlbumList2Type) {
+function createAlbumList(type: GetAlbumList2Type, size = 20) {
   const listAtom = atom<AlbumListItem[]>([])
   const listReadAtom = atom(get => get(listAtom))
   const updatingAtom = atom(false)
   const updatingReadAtom = atom(get => get(updatingAtom))
-  const useUpdateAlbumList = () => useUpdateAlbumListBase(type, listAtom, updatingAtom)
+  const useUpdateAlbumList = () => useUpdateAlbumListBase(type, listAtom, updatingAtom, size)
 
   return { listAtom, listReadAtom, updatingAtom, updatingReadAtom, useUpdateAlbumList }
 }
@@ -114,6 +83,7 @@ type ListState<T> = {
   useUpdateList: () => () => Promise<void>
 }
 
+const alphabeticalByArtist = createAlbumList('alphabeticalByArtist', 500)
 const recent = createAlbumList('recent')
 const starred = createAlbumList('starred')
 const frequent = createAlbumList('frequent')
@@ -121,6 +91,11 @@ const random = createAlbumList('random')
 const newest = createAlbumList('newest')
 
 export const albumLists: { [key: string]: ListState<AlbumListItem> } = {
+  alphabeticalByArtist: {
+    listAtom: alphabeticalByArtist.listReadAtom,
+    updatingAtom: alphabeticalByArtist.updatingReadAtom,
+    useUpdateList: alphabeticalByArtist.useUpdateAlbumList,
+  },
   recent: {
     listAtom: recent.listReadAtom,
     updatingAtom: recent.updatingReadAtom,
@@ -148,35 +123,6 @@ export const albumLists: { [key: string]: ListState<AlbumListItem> } = {
   },
 }
 
-export const useRecentAlbums = () => {
-  const server = useAtomValue(activeServerAtom)
-  const [updating, setUpdating] = useAtom(albumsUpdatingAtom)
-  const setAlbums = useUpdateAtom(albumsAtom)
-
-  if (!server) {
-    return async () => {}
-  }
-
-  return async () => {
-    if (updating) {
-      return
-    }
-    setUpdating(true)
-
-    const client = new SubsonicApiClient(server)
-    const response = await client.getAlbumList2({ type: 'alphabeticalByArtist', size: 500 })
-
-    setAlbums(
-      response.data.albums.reduce((acc, next) => {
-        const album = mapAlbumID3(next, client)
-        acc[album.id] = album
-        return acc
-      }, {} as Record<string, Album>),
-    )
-    setUpdating(false)
-  }
-}
-
 export const albumAtomFamily = atomFamily((id: string) =>
   atom<AlbumWithSongs | undefined>(async get => {
     const server = get(activeServerAtom)
@@ -190,28 +136,6 @@ export const albumAtomFamily = atomFamily((id: string) =>
   }),
 )
 
-export const albumArtAtomFamily = atomFamily((id: string) =>
-  atom<AlbumArt | undefined>(async get => {
-    const server = get(activeServerAtom)
-    if (!server) {
-      return undefined
-    }
-
-    const albums = get(albumsAtom)
-    const album = id in albums ? albums[id] : undefined
-    if (!album) {
-      return undefined
-    }
-
-    const client = new SubsonicApiClient(server)
-
-    return {
-      uri: album.coverArt ? client.getCoverArtUri({ id: album.coverArt }) : undefined,
-      thumbUri: album.coverArt ? client.getCoverArtUri({ id: album.coverArt, size: '256' }) : undefined,
-    }
-  }),
-)
-
 export const artistInfoAtomFamily = atomFamily((id: string) =>
   atom<ArtistInfo | undefined>(async get => {
     const server = get(activeServerAtom)