Add: option in Artist Screen

Author: sawyerf

app/components/PresHeader.js

@@ -1,18 +1,36 @@
 import React from 'react';
 import { Text, View, Pressable } from 'react-native';
 import { ThemeContext } from '~/contexts/theme';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import BackButton from '~/components/button/BackButton';
 import mainStyles from '~/styles/main';
 import presStyles from '~/styles/pres';
 import ImageError from '~/components/ImageError';
+import IconButton from '~/components/button/IconButton';
 
-const PresHeader = ({ title, subTitle, imgSrc, onPressTitle = null, children = null }) => {
+const PresHeader = ({ title, subTitle, imgSrc, onPressTitle = null, onPressOption = null, children = null }) => {
 	const theme = React.useContext(ThemeContext);
+	const insets = useSafeAreaInsets();
 
 	return (
 		<>
 			<BackButton />
+			{
+				onPressOption ?
+					<IconButton
+						icon="ellipsis-h"
+						onPress={onPressOption}
+						color={'white'}
+						style={{
+							position: 'absolute',
+							padding: 20,
+							top: insets.top,
+							right: insets.left,
+							zIndex: 1
+						}}
+					/> : null
+			}
 			<ImageError
 				style={[presStyles.cover, { backgroundColor: theme.secondaryBack }]}
 				source={{ uri: imgSrc }}

app/components/lists/HorizontalArtists.js

@@ -8,7 +8,7 @@ import { urlCover } from '~/utils/api';
 import CustomFlat from '~/components/lists/CustomFlat';
 import ImageError from '~/components/ImageError';
 import mainStyles from '~/styles/main';
-import OptionsArtist from '~/components/options/OptionsArtist';
+import OptionsArtists from '~/components/options/OptionsArtists';
 import size from '~/styles/size';
 
 const HorizontalArtists = ({ artists, onPress = () => { } }) => {
@@ -48,7 +48,7 @@ const HorizontalArtists = ({ artists, onPress = () => { } }) => {
 				widthItem={size.image.medium + 10}
 			/>
 
-			<OptionsArtist
+			<OptionsArtists
 				artists={artists}
 				indexOptions={indexOptions}
 				setIndexOptions={setIndexOptions}

app/components/options/OptionsArtist.js

@@ -2,46 +2,62 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { ConfigContext } from '~/contexts/config'
-import { getApiNetworkFirst } from '~/utils/api'
+import { getApiCacheFirst } from '~/utils/api'
 import { playSong } from '~/utils/player'
 import { SongDispatchContext } from '~/contexts/song'
 import OptionsPopup from '~/components/popup/OptionsPopup'
 
-const OptionsArtist = ({ artists, indexOptions, setIndexOptions }) => {
+const OptionsArtist = ({ artist, isOption, setIsOption }) => {
   const songDispatch = React.useContext(SongDispatchContext)
   const config = React.useContext(ConfigContext)
   const { t } = useTranslation()
   const refOption = React.useRef()
 
-	const playSimilarSongs = () => {
-		getApiNetworkFirst(config, 'getSimilarSongs', `id=${artists[indexOptions].id}&count=50`)
-			.then((json) => {
-				if (json.similarSongs?.song) {
-					playSong(config, songDispatch, json.similarSongs.song, 0)
-				}
-			})
-			.catch(() => { })
-		refOption.current.close()
-	}
+  const playSimilarSongs = () => {
+    getApiCacheFirst(config, 'getSimilarSongs', `id=${artist.id}&count=50`)
+      .then((json) => {
+        if (json.similarSongs?.song) {
+          playSong(config, songDispatch, json.similarSongs.song, 0)
+        }
+      })
+      .catch(() => { })
+    refOption.current.close()
+  }
+
+  const playTopSongs = () => {
+    getApiCacheFirst(config, 'getTopSongs', { artist: artist.name, count: 50 })
+      .then((json) => {
+        if (json.topSongs?.song) {
+          playSong(config, songDispatch, json.topSongs.song, 0)
+        }
+      })
+      .catch(() => { })
+    refOption.current.close()
+  }
 
   return (
     <OptionsPopup
       ref={refOption}
-      visible={indexOptions >= 0}
-      close={() => { setIndexOptions(-1) }}
-      item={indexOptions >= 0 ? artists[indexOptions] : null}
+      visible={isOption}
+      close={() => { setIsOption(false) }}
+      item={isOption ? artist : null}
       options={[
         {
           name: t('Play similar songs'),
-					icon: 'play',
-					onPress: playSimilarSongs
+          icon: 'play',
+          onPress: playSimilarSongs
+        },
+        {
+          name: t('Play top songs'),
+          icon: 'arrow-up',
+          onPress: playTopSongs
         },
         {
           name: t('Info'),
           icon: 'info',
           onPress: () => {
-            refOption.current.showInfo(artists[indexOptions])
-            setIndexOptions(-1)
+            refOption.current.showInfo(artist)
+            refOption.current.close()
           }
         }
       ]}

app/components/options/OptionsArtists.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { ConfigContext } from '~/contexts/config'
+import { getApiNetworkFirst } from '~/utils/api'
+import { playSong } from '~/utils/player'
+import { SongDispatchContext } from '~/contexts/song'
+import OptionsPopup from '~/components/popup/OptionsPopup'
+
+const OptionsArtists = ({ artists, indexOptions, setIndexOptions }) => {
+  const songDispatch = React.useContext(SongDispatchContext)
+  const config = React.useContext(ConfigContext)
+  const { t } = useTranslation()
+  const refOption = React.useRef()
+
+	const playSimilarSongs = () => {
+		getApiNetworkFirst(config, 'getSimilarSongs', `id=${artists[indexOptions].id}&count=50`)
+			.then((json) => {
+				if (json.similarSongs?.song) {
+					playSong(config, songDispatch, json.similarSongs.song, 0)
+				}
+			})
+			.catch(() => { })
+		refOption.current.close()
+	}
+
+  return (
+    <OptionsPopup
+      ref={refOption}
+      visible={indexOptions >= 0}
+      close={() => { setIndexOptions(-1) }}
+      item={indexOptions >= 0 ? artists[indexOptions] : null}
+      options={[
+        {
+          name: t('Play similar songs'),
+					icon: 'play',
+					onPress: playSimilarSongs
+        },
+        {
+          name: t('Info'),
+          icon: 'info',
+          onPress: () => {
+            refOption.current.showInfo(artists[indexOptions])
+            refOption.current.close()
+          }
+        }
+      ]}
+    />
+  )
+}
+
+export default OptionsArtists

app/i18next/de.json

@@ -148,6 +148,7 @@
     "Pin playlist": "Wiedergabeliste anheften",
     "Play next": "Nächstes abspielen",
     "Play similar songs": "Ähnliche Songs abspielen",
+    "Play top songs": "Top Songs abspielen",
     "Player": "Player",
     "Playlist": "Wiedergabeliste",
     "Playlists": "Wiedergabelisten",

app/i18next/en.json

@@ -148,6 +148,7 @@
     "Pin playlist": "Pin playlist",
     "Play next": "Play next",
     "Play similar songs": "Play similar songs",
+    "Play top songs": "Play top songs",
     "Player": "Player",
     "Playlist": "Playlist",
     "Playlists": "Playlists",

app/i18next/fr.json

@@ -148,6 +148,7 @@
     "Pin playlist": "Épingler la playlist",
     "Play next": "Lire ensuite",
     "Play similar songs": "Jouer des titres similaires",
+    "Play top songs": "Jouer les meilleurs titres",
     "Player": "Lecteur",
     "Playlist": "Playlist",
     "Playlists": "Playlists",

app/i18next/it.json

@@ -148,6 +148,7 @@
     "Pin playlist": "Fissa playlist",
     "Play next": "Riproduci successivo",
     "Play similar songs": "Riproduci brani simili",
+    "Play top songs": "Riproduci i brani migliori",
     "Player": "Lettore",
     "Playlist": "Playlist",
     "Playlists": "Playlist",

app/i18next/ru.json

@@ -148,6 +148,7 @@
     "Pin playlist": "Закрепить плейлист",
     "Play next": "Следующий трек",
     "Play similar songs": "Похожие",
+    "Play top songs": "Лучшие треки",
     "Player": "Плеер",
     "Playlist": "Плейлист",
     "Playlists": "Плейлисты",

app/i18next/zh-Hans.json

@@ -148,6 +148,7 @@
     "Pin playlist": "固定歌单",
     "Play next": "下一首",
     "Play similar songs": "播放相似歌曲",
+    "Play top songs": "播放热门歌曲",
     "Player": "播放器",
     "Playlist": "歌单",
     "Playlists": "歌单",