From e15a2ebcfc196f5722acb598f93b5c0a566c9f50 Mon Sep 17 00:00:00 2001
From: austinried <4966622+austinried@users.noreply.github.com>
Date: Wed, 4 Aug 2021 20:59:19 +0900
Subject: [PATCH] fixed song list and album list sort order

sort first by name, then by year
tweak cover art scaling/size
---
 app/components/ListItem.tsx   | 11 ++++++++++-
 app/screens/ArtistView.tsx    |  8 ++++++--
 app/screens/LibraryAlbums.tsx |  7 ++++---
 app/screens/SongListView.tsx  | 14 +++++---------
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/app/components/ListItem.tsx b/app/components/ListItem.tsx
index 5fe6d08..ad71a43 100644
--- a/app/components/ListItem.tsx
+++ b/app/components/ListItem.tsx
@@ -6,6 +6,7 @@ import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
 import React, { useState } from 'react'
 import { GestureResponderEvent, StyleSheet, Text, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
 import IconFA from 'react-native-vector-icons/FontAwesome'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
@@ -83,7 +84,15 @@ const ListItem: React.FC<{
   return (
     <View style={[styles.container, sizeStyle.container]}>
       <PressableOpacity onPress={onPress} style={styles.item}>
-        {showArt ? <CoverArt {...artSource} style={{ ...styles.art, ...sizeStyle.art }} resizeMode="cover" /> : <></>}
+        {showArt ? (
+          <CoverArt
+            {...artSource}
+            style={{ ...styles.art, ...sizeStyle.art }}
+            resizeMode={FastImage.resizeMode.cover}
+          />
+        ) : (
+          <></>
+        )}
         <View style={styles.text}>
           {item.itemType === 'song' ? (
             <TitleTextSong id={item.id} title={item.title} />
diff --git a/app/screens/ArtistView.tsx b/app/screens/ArtistView.tsx
index da7e075..5240e00 100644
--- a/app/screens/ArtistView.tsx
+++ b/app/screens/ArtistView.tsx
@@ -25,7 +25,7 @@ const AlbumItem = React.memo<{
     <PressableOpacity
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
       style={[styles.albumItem, { width }]}>
-      <CoverArt coverArt={album.coverArt} style={{ height, width }} />
+      <CoverArt coverArt={album.coverArt} style={{ height, width }} resizeMode={FastImage.resizeMode.cover} />
       <Text style={styles.albumTitle}>{album.name}</Text>
       <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
     </PressableOpacity>
@@ -65,6 +65,10 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
     return <></>
   }
 
+  const _albums = [...artist.albums]
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .sort((a, b) => (b.year || 0) - (a.year || 0))
+
   return (
     <GradientScrollView
       onLayout={coverLayout.onLayout}
@@ -85,7 +89,7 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
         {artist.topSongs.length > 0 ? <TopSongs songs={artist.topSongs} name={artist.name} /> : <></>}
         <Header>Albums</Header>
         <View style={styles.albums} onLayout={albumsLayout.onLayout}>
-          {artist.albums.map(a => (
+          {_albums.map(a => (
             <AlbumItem key={a.id} album={a} height={albumSize} width={albumSize} />
           ))}
         </View>
diff --git a/app/screens/LibraryAlbums.tsx b/app/screens/LibraryAlbums.tsx
index 7c5450a..46fbdf4 100644
--- a/app/screens/LibraryAlbums.tsx
+++ b/app/screens/LibraryAlbums.tsx
@@ -10,6 +10,7 @@ import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
 
 const AlbumItem = React.memo<{
   id: string
@@ -25,7 +26,7 @@ const AlbumItem = React.memo<{
     <PressableOpacity
       style={[styles.item, { maxWidth: size, height }]}
       onPress={() => navigation.navigate('album', { id, title: name })}>
-      <CoverArt coverArt={coverArt} style={{ height: size, width: size }} />
+      <CoverArt coverArt={coverArt} style={{ height: size, width: size }} resizeMode={FastImage.resizeMode.cover} />
       <View style={styles.itemDetails}>
         <Text style={styles.title} numberOfLines={1}>
           {name}
@@ -61,7 +62,7 @@ const AlbumsList = () => {
   const layout = useWindowDimensions()
 
   const size = layout.width / 3 - styles.item.marginHorizontal * 2
-  const height = size + 38
+  const height = size + 36
 
   const albumsList = list.map(album => ({ album, size, height }))
 
@@ -97,7 +98,7 @@ const styles = StyleSheet.create({
   item: {
     alignItems: 'center',
     marginVertical: 4,
-    marginHorizontal: 2,
+    marginHorizontal: 3,
     flex: 1 / 3,
   },
   itemDetails: {
diff --git a/app/screens/SongListView.tsx b/app/screens/SongListView.tsx
index ff42197..f532426 100644
--- a/app/screens/SongListView.tsx
+++ b/app/screens/SongListView.tsx
@@ -33,13 +33,9 @@ const Songs = React.memo<{
 
   if (type === 'album') {
     typeName = 'Album'
-    _songs.sort((a, b) => {
-      if (b.track && a.track) {
-        return a.track - b.track
-      } else {
-        return a.title.localeCompare(b.title)
-      }
-    })
+    _songs
+      .sort((a, b) => a.title.localeCompare(b.title)) //
+      .sort((a, b) => (a.track || 0) - (b.track || 0))
   } else {
     typeName = 'Playlist'
   }
@@ -150,8 +146,8 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   cover: {
-    height: 220,
-    width: 220,
+    height: 240,
+    width: 240,
   },
   songs: {
     marginTop: 26,