imprv CoverArt perf and interface

app/components/ArtistArt.tsx

@@ -1,11 +1,12 @@
-import { useAtomValue } from 'jotai/utils'
+import CoverArt from '@app/components/CoverArt'
-import React, { useState } from 'react'
-import { ActivityIndicator, LayoutChangeEvent, StyleSheet, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
-import LinearGradient from 'react-native-linear-gradient'
 import { artistArtAtomFamily } from '@app/state/music'
 import colors from '@app/styles/colors'
-import CoverArt from '@app/components/CoverArt'
+import { useLayout } from '@react-native-community/hooks'
+import { useAtomValue } from 'jotai/utils'
+import React from 'react'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
+import LinearGradient from 'react-native-linear-gradient'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 
 interface ArtistArtSizeProps {
@@ -23,15 +24,11 @@ interface ArtistArtProps extends ArtistArtSizeProps {
 }
 
 const PlaceholderContainer: React.FC<ArtistArtSizeProps> = ({ height, width, children }) => {
-  const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
+  const layout = useLayout()
-
-  const onLayout = (event: LayoutChangeEvent) => {
-    setLayout(event.nativeEvent.layout)
-  }
 
   return (
     <LinearGradient
-      onLayout={onLayout}
+      onLayout={layout.onLayout}
       colors={[colors.accent, colors.accentLow]}
       style={[styles.placeholderContainer, { height, width }]}>
       <IconFA5 name="microphone" color="black" size={layout.width / 1.8} style={styles.placeholderIcon} />
@@ -142,10 +139,8 @@ const ArtistArt = React.memo<ArtistArtProps>(({ id, height, width, round }) => {
   round = round === undefined ? true : round
 
   const Placeholder = () => {
-    const none = <NoneUp height={height} width={width} />
+    if (!artistArt) {
-
+      return <NoneUp height={height} width={width} />
-    if (!artistArt || !artistArt.albumCoverUris) {
-      return none
     }
     const { albumCoverUris } = artistArt
 
@@ -162,15 +157,14 @@ const ArtistArt = React.memo<ArtistArtProps>(({ id, height, width, round }) => {
       return <OneUp height={height} width={width} albumCoverUris={albumCoverUris} />
     }
 
-    return none
+    return <NoneUp height={height} width={width} />
   }
 
   return (
     <View style={[styles.container, round ? { borderRadius: height / 2 } : {}]}>
       <CoverArt
-        PlaceholderComponent={Placeholder}
+        FallbackComponent={Placeholder}
-        height={height}
+        style={{ height, width }}
-        width={width}
         coverArtUri={artistArt?.uri}
         resizeMode={FastImage.resizeMode.cover}
       />

app/components/CoverArt.tsx

@@ -1,77 +1,84 @@
-import React, { useEffect, useState } from 'react'
-import { ActivityIndicator, LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native'
-import FastImage from 'react-native-fast-image'
 import colors from '@app/styles/colors'
-import IconFA5 from 'react-native-vector-icons/FontAwesome5'
+import React, { useState } from 'react'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+import FastImage, { ImageStyle } from 'react-native-fast-image'
 import LinearGradient from 'react-native-linear-gradient'
 
+type CoverImageProps = {
+  uri?: string
+  style?: ImageStyle
+  resizeMode?: keyof typeof FastImage.resizeMode
+  onProgress?: () => void
+  onLoadEnd?: () => void
+  onError?: () => void
+}
+
+const CoverImage = React.memo<CoverImageProps>(({ uri, style, resizeMode, onProgress, onLoadEnd, onError }) => (
+  <FastImage
+    source={{ uri }}
+    style={style}
+    resizeMode={resizeMode || FastImage.resizeMode.contain}
+    onProgress={onProgress}
+    onLoadEnd={onLoadEnd}
+    onError={onError}
+  />
+))
+
+const Fallback = React.memo<{}>(({}) => {
+  return <LinearGradient colors={[colors.accent, colors.accentLow]} style={styles.fallback} />
+})
+
 const CoverArt: React.FC<{
-  PlaceholderComponent?: () => JSX.Element
+  FallbackComponent?: () => JSX.Element
   placeholderIcon?: string
   height?: string | number
   width?: string | number
   coverArtUri?: string
   resizeMode?: keyof typeof FastImage.resizeMode
-  style?: ViewStyle
+  style?: ImageStyle
-}> = ({ PlaceholderComponent, placeholderIcon, height, width, coverArtUri, resizeMode, style }) => {
+}> = ({ FallbackComponent, coverArtUri, resizeMode, style }) => {
-  const [placeholderVisible, setPlaceholderVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
-  const [loading, setLoading] = useState(true)
+  const [fallbackVisible, setFallbackVisible] = useState(false)
-  const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 })
 
-  useEffect(() => {
+  const enableLoading = React.useCallback(() => setLoading(true), [])
-    if (!coverArtUri) {
+  const disableLoading = React.useCallback(() => setLoading(false), [])
-      setLoading(false)
+  const enableFallback = React.useCallback(() => setFallbackVisible(true), [])
-    }
-  }, [coverArtUri, setLoading])
-
-  const Image = () => (
-    <FastImage
-      source={{ uri: coverArtUri, priority: 'high' }}
-      style={{ ...styles.image, opacity: placeholderVisible ? 0 : 1 }}
-      resizeMode={resizeMode || FastImage.resizeMode.contain}
-      onError={() => {
-        setLoading(false)
-        setPlaceholderVisible(true)
-      }}
-      onLoadEnd={() => setLoading(false)}
-    />
-  )
-
-  const Placeholder = () => (
-    <LinearGradient colors={[colors.accent, colors.accentLow]} style={styles.placeholder}>
-      <IconFA5 name={placeholderIcon || 'record-vinyl'} color="black" size={layout.width / 1.5} />
-    </LinearGradient>
-  )
-
-  const onLayout = (event: LayoutChangeEvent) => {
-    setLayout(event.nativeEvent.layout)
-  }
 
   return (
-    <View style={[style, { height, width }]} onLayout={onLayout}>
+    <View style={style}>
-      {coverArtUri ? <Image /> : <></>}
+      <CoverImage
-      <View style={{ ...styles.placeholderContainer, opacity: placeholderVisible ? 1 : 0 }}>
+        uri={coverArtUri}
-        {PlaceholderComponent ? <PlaceholderComponent /> : <Placeholder />}
+        style={style}
-      </View>
+        resizeMode={resizeMode}
-      <ActivityIndicator style={styles.indicator} animating={loading} size={'large'} color={colors.accent} />
+        onProgress={enableLoading}
+        onLoadEnd={disableLoading}
+        onError={enableFallback}
+      />
+      {fallbackVisible ? (
+        FallbackComponent ? (
+          <View style={styles.fallback}>
+            <FallbackComponent />
+          </View>
+        ) : (
+          <Fallback />
+        )
+      ) : (
+        <></>
+      )}
+      <ActivityIndicator animating={loading} size="large" color={colors.accent} style={styles.indicator} />
     </View>
   )
 }
 
 const styles = StyleSheet.create({
-  container: {},
   image: {
     height: '100%',
     width: '100%',
   },
-  placeholderContainer: {
+  fallback: {
     height: '100%',
     width: '100%',
     position: 'absolute',
-  },
-  placeholder: {
-    height: '100%',
-    width: '100%',
     justifyContent: 'center',
     alignItems: 'center',
   },

app/components/NowPlayingBar.tsx

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

app/components/SongItem.tsx

@@ -23,7 +23,7 @@ const SongItem: React.FC<{
   return (
     <View style={styles.container}>
       <PressableOpacity onPress={onPress} style={styles.item}>
-        {showArt ? <CoverArt coverArtUri={song.coverArtThumbUri} style={styles.art} height={50} width={50} /> : <></>}
+        {showArt ? <CoverArt coverArtUri={song.coverArtThumbUri} style={styles.art} /> : <></>}
         <View style={styles.text}>
           <Text style={[styles.title, { color: currentTrack?.id === song.id ? colors.accent : colors.text.primary }]}>
             {song.title}
@@ -58,6 +58,8 @@ const styles = StyleSheet.create({
   },
   art: {
     marginRight: 10,
+    height: 50,
+    width: 50,
   },
   text: {
     flex: 1,

app/screens/AlbumView.tsx

@@ -28,9 +28,7 @@ const AlbumDetails: React.FC<{
       imageKey={`${album.name}${album.artist}`}
       style={styles.container}>
       <View style={styles.content}>
-        <View style={styles.cover}>
+        <CoverArt coverArtUri={album.coverArtUri} style={styles.cover} />
-          <CoverArt coverArtUri={album.coverArtUri} height="100%" width="100%" />
-        </View>
         <Text style={styles.title}>{album.name}</Text>
         <Text style={styles.subtitle}>
           {album.artist}

app/screens/ArtistView.tsx

@@ -26,7 +26,7 @@ const AlbumItem = React.memo<{
     <PressableOpacity
       onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
       style={[styles.albumItem, { width }]}>
-      <CoverArt coverArtUri={album.coverArtThumbUri} height={height} width={width} />
+      <CoverArt coverArtUri={album.coverArtThumbUri} style={{ height, width }} />
       <Text style={styles.albumTitle}>{album.name}</Text>
       <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
     </PressableOpacity>
@@ -73,11 +73,9 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
       style={styles.scroll}
       contentContainerStyle={styles.scrollContent}>
       <CoverArt
-        PlaceholderComponent={ArtistCoverFallback}
+        FallbackComponent={ArtistCoverFallback}
         coverArtUri={artist.largeImageUrl}
         style={styles.artistCover}
-        height={artistCoverHeight}
-        width={coverLayout.width}
         resizeMode={FastImage.resizeMode.cover}
       />
       <View style={styles.titleContainer}>
@@ -151,8 +149,8 @@ const styles = StyleSheet.create({
   },
   artistCover: {
     position: 'absolute',
-    width: '100%',
     height: artistCoverHeight,
+    width: '100%',
   },
   albums: {
     width: '100%',

app/screens/Home.tsx

@@ -6,11 +6,19 @@ import { homeListsAtom, homeListsUpdatingAtom, useUpdateHomeLists } from '@app/s
 import { homeListTypesAtom, useActiveServerRefresh } from '@app/state/settings'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
+import { GetAlbumListType } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React from 'react'
 import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
 
+const titles: { [key in GetAlbumListType]?: string } = {
+  recent: 'Recent Albums',
+  random: 'Random Albums',
+  frequent: 'Frequent Albums',
+  starred: 'Starred Albums',
+}
+
 const AlbumItem = React.memo<{
   album: AlbumListItem
 }>(({ album }) => {
@@ -21,7 +29,7 @@ const AlbumItem = React.memo<{
       onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
       key={album.id}
       style={styles.item}>
-      <CoverArt coverArtUri={album.coverArtThumbUri} height={styles.item.width} width={styles.item.width} />
+      <CoverArt coverArtUri={album.coverArtThumbUri} style={{ height: styles.item.width, width: styles.item.width }} />
       <Text style={styles.title} numberOfLines={1}>
         {album.name}
       </Text>
@@ -33,7 +41,7 @@ const AlbumItem = React.memo<{
 })
 
 const Category = React.memo<{
-  name: string
+  name?: string
   data: AlbumListItem[]
 }>(({ name, data }) => {
   return (
@@ -75,7 +83,7 @@ const Home = () => {
       }>
       <View style={styles.content}>
         {types.map(type => (
-          <Category key={type} name={type} data={type in lists ? lists[type] : []} />
+          <Category key={type} name={titles[type as GetAlbumListType]} data={type in lists ? lists[type] : []} />
         ))}
       </View>
     </GradientScrollView>

app/screens/LibraryAlbums.tsx

@@ -25,7 +25,7 @@ const AlbumItem = React.memo<{
     <PressableOpacity
       style={[styles.item, { maxWidth: size, height }]}
       onPress={() => navigation.navigate('AlbumView', { id, title: name })}>
-      <CoverArt coverArtUri={coverArtUri} height={size} width={size} />
+      <CoverArt coverArtUri={coverArtUri} style={{ height: size, width: size }} />
       <View style={styles.itemDetails}>
         <Text style={styles.title} numberOfLines={1}>
           {name}

app/screens/NowPlayingLayout.tsx

@@ -73,7 +73,7 @@ const SongCoverArt = () => {
 
   return (
     <View style={coverArtStyles.container}>
-      <CoverArt height="100%" width="100%" coverArtUri={track?.artwork as string} />
+      <CoverArt coverArtUri={track?.artwork as string} style={coverArtStyles.image} />
     </View>
   )
 }
@@ -84,6 +84,10 @@ const coverArtStyles = StyleSheet.create({
     alignItems: 'center',
     paddingBottom: 20,
   },
+  image: {
+    height: '100%',
+    width: '100%',
+  },
 })
 
 const SongInfo = () => {