Add: Top songs in Artist screen

Author: sawyerf

app/screens/Pres/Artist.js

@@ -38,6 +38,10 @@ const Artist = ({ navigation, route: { params } }) => {
 		setSortAlbum(json.artist?.album?.sort((a, b) => (b.year || 0) - (a.year || 0)))
 	}, [params.id])
 
+	const [topSongs] = useCachedAndApi([], 'getTopSongs', { artist: params.name, count: 50 }, (json, setData) => {
+		setData(json.topSongs?.song || [])
+	}, [params.name])
+
 	const [favorited] = useCachedAndApi([], 'getStarred2', null, (json, setData) => {
 		setData(json.starred2.song.filter(song => song.artistId === params.id))
 	}, [params.id])
@@ -123,6 +127,27 @@ const Artist = ({ navigation, route: { params } }) => {
 					</>
 				) : null
 			}
+			{
+				topSongs?.length ? (
+					<>
+					<Pressable onPress={() => navigation.navigate('Songs', { title: t('Top songs'), songs: topSongs })} style={{
+						flexDirection: 'row',
+						justifyContent: 'space-between',
+						alignItems: 'center',
+						width: '100%',
+					}}>
+						<Text style={[mainStyles.titleSection(theme)]}>{t('Top songs')}</Text>
+						<Icon
+							name='angle-right'
+							color={theme.secondaryText}
+							size={size.icon.medium}
+							style={[mainStyles.titleSection(theme), { marginTop: 25, marginBottom: 12, marginEnd: 20 }]}
+						/>
+					</Pressable>
+						<SongsList songs={topSongs.slice(0, 3)} listToPlay={topSongs} />
+					</>
+				) : null
+			}
 			{
 				favorited?.length ? (
 					<>

app/screens/Pres/Songs.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { LegendList } from "@legendapp/list"
+
+import { ThemeContext } from '~/contexts/theme';
+import mainStyles from '~/styles/main';
+import OptionsSongsList from '~/components/options/OptionsSongsList';
+import Header from '~/components/Header';
+import SongItem from '~/components/item/SongItem';
+
+const Songs = ({ route: { params } }) => {
+	const insets = useSafeAreaInsets();
+	const theme = React.useContext(ThemeContext)
+	const [indexOptions, setIndexOptions] = React.useState(-1);
+
+	const renderItem = React.useCallback(({ item, index }) => (
+		<SongItem
+			song={item}
+			queue={params.songs || []}
+			index={index}
+			setIndexOptions={setIndexOptions}
+			style={{
+				paddingHorizontal: 20,
+			}}
+		/>
+	), [params.songs]);
+
+	return (
+		<>
+			<LegendList
+				data={params.songs || []}
+				keyExtractor={(item, index) => index}
+				style={mainStyles.mainContainer(theme)}
+				contentContainerStyle={mainStyles.contentMainContainer(insets, false)}
+				waitForInitialLayout={false}
+				recycleItems={true}
+				estimatedItemSize={60}
+				ListHeaderComponent={<Header title={params.title} />}
+				renderItem={renderItem}
+			/>
+			<OptionsSongsList
+				songs={params.songs || []}
+				indexOptions={indexOptions}
+				setIndexOptions={setIndexOptions}
+			/>
+		</>
+	)
+}
+
+export default Songs;

app/screens/Stacks.js

@@ -12,6 +12,7 @@ import ArtistAlbums from '~/screens/Pres/ArtistAlbums';
 import Favorited from '~/screens/Pres/Favorited';
 import Genre from '~/screens/Pres/Genre';
 import Playlist from '~/screens/Pres/Playlist';
+import Songs from '~/screens/Pres/Songs';
 
 import EditPlaylist from '~/screens/EditPlaylist';
 import UpdateRadio from '~/screens/UpdateRadio';
@@ -56,6 +57,7 @@ export const HomeStack = () => {
 			<Stack.Screen name="Album" component={Album} />
 			<Stack.Screen name="Artist" component={Artist} />
 			<Stack.Screen name="ArtistAlbums" component={ArtistAlbums} />
+			<Stack.Screen name="Songs" component={Songs} />
 			<Stack.Screen name="Genre" component={Genre} />
 			<Stack.Screen name="UpdateRadio" component={UpdateRadio} />
 			<Stack.Screen name="ShowAll" component={ShowAll} />
@@ -84,6 +86,7 @@ export const SearchStack = () => {
 			<Stack.Screen name="Album" component={Album} />
 			<Stack.Screen name="Artist" component={Artist} />
 			<Stack.Screen name="ArtistAlbums" component={ArtistAlbums} />
+			<Stack.Screen name="Songs" component={Songs} />
 			<Stack.Screen name="ArtistExplorer" component={ArtistExplorer} />
 			<Stack.Screen name="AlbumExplorer" component={AlbumExplorer} />
 			<Stack.Screen name="SongExplorer" component={SongExplorer} />
@@ -112,6 +115,7 @@ export const PlaylistsStack = () => {
 			<Stack.Screen name="Album" component={Album} />
 			<Stack.Screen name="Artist" component={Artist} />
 			<Stack.Screen name="ArtistAlbums" component={ArtistAlbums} />
+			<Stack.Screen name="Songs" component={Songs} />
 			<Stack.Screen name="EditPlaylist" component={EditPlaylist} />
 			<Stack.Screen name="Info" component={Info} />
 		</Stack.Navigator>