artist context menu

app/components/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import PressableOpacity from '@app/components/PressableOpacity'
-import { AlbumListItem, Song } from '@app/models/music'
+import { AlbumListItem, Artist, Song } from '@app/models/music'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { NavigationProp, useNavigation } from '@react-navigation/native'
@@ -100,15 +100,12 @@ const ContextMenuIconTextOption = React.memo<ContextMenuIconTextOptionProps>(
 
 const MenuHeader = React.memo<{
   coverArt?: string
+  artistId?: string
   title: string
   subtitle?: string
-}>(({ coverArt, title, subtitle }) => (
+}>(({ coverArt, artistId, title, subtitle }) => (
   <View style={styles.menuHeader}>
-    {coverArt ? (
+    <CoverArt artistId={artistId} coverArt={coverArt} style={styles.coverArt} resizeMode={FastImage.resizeMode.cover} />
-      <CoverArt coverArt={coverArt} style={styles.coverArt} resizeMode={FastImage.resizeMode.cover} />
-    ) : (
-      <></>
-    )}
     <View style={styles.menuHeaderText}>
       <Text numberOfLines={1} style={styles.menuTitle}>
         {title}
@@ -223,6 +220,28 @@ export const SongContextPressable: React.FC<SongContextPressableProps> = props =
   )
 }
 
+export type ArtistContextPressableProps = ContextMenuProps & {
+  artist: Artist
+}
+
+export const ArtistContextPressable: React.FC<ArtistContextPressableProps> = props => {
+  const { artist, children } = props
+
+  return (
+    <ContextMenu
+      {...props}
+      menuHeader={<MenuHeader title={artist.name} artistId={artist.id} />}
+      menuOptions={
+        <>
+          <OptionStar />
+          <OptionDownload itemType={artist.itemType} />
+        </>
+      }>
+      {children}
+    </ContextMenu>
+  )
+}
+
 const styles = StyleSheet.create({
   optionsContainer: {
     backgroundColor: 'rgba(45, 45, 45, 0.95)',

app/components/ListItem.tsx

@@ -1,4 +1,4 @@
-import { AlbumListItem, ListableItem, Song } from '@app/models/music'
+import { AlbumListItem, Artist, ListableItem, Song } from '@app/models/music'
 import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
@@ -10,7 +10,7 @@ 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'
-import { AlbumContextPressable, SongContextPressable } from './ContextMenu'
+import { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu'
 import CoverArt from './CoverArt'
 import PressableOpacity from './PressableOpacity'
 
@@ -106,12 +106,22 @@ const ListItem: React.FC<{
     ),
     [item, onPress],
   )
+  const artistPressable = useCallback(
+    ({ children }) => (
+      <ArtistContextPressable artist={item as Artist} onPress={onPress} triggerWrapperStyle={styles.item}>
+        {children}
+      </ArtistContextPressable>
+    ),
+    [item, onPress],
+  )
 
   let PressableComponent = itemPressable
   if (item.itemType === 'album') {
     PressableComponent = albumPressable
   } else if (item.itemType === 'song') {
     PressableComponent = songPressable
+  } else if (item.itemType === 'artist') {
+    PressableComponent = artistPressable
   }
 
   return (