first-pass context menu for albums

app/screens/ArtistView.tsx

@@ -1,8 +1,9 @@
+import { AlbumContextPressable } from '@app/components/ContextMenu'
 import CoverArt from '@app/components/CoverArt'
+import GradientBackground from '@app/components/GradientBackground'
 import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
-import PressableOpacity from '@app/components/PressableOpacity'
 import { useArtistInfo } from '@app/hooks/music'
 import { useSetQueue } from '@app/hooks/trackplayer'
 import { Album, Song } from '@app/models/music'
@@ -11,7 +12,7 @@ import font from '@app/styles/font'
 import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
 
 const AlbumItem = React.memo<{
@@ -21,14 +22,20 @@ const AlbumItem = React.memo<{
 }>(({ album, height, width }) => {
   const navigation = useNavigation()
 
+  if (height <= 0 || width <= 0) {
+    return <></>
+  }
+
   return (
-    <PressableOpacity
+    <AlbumContextPressable
+      album={album}
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
-      style={[styles.albumItem, { width }]}>
+      menuStyle={[styles.albumItem, { width }]}
+      triggerOuterWrapperStyle={{ 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>
+    </AlbumContextPressable>
   )
 })
 
@@ -54,6 +61,12 @@ const TopSongs = React.memo<{
   )
 })
 
+const ArtistDetailsFallback = React.memo(() => (
+  <GradientBackground style={styles.fallback}>
+    <ActivityIndicator size="large" color={colors.accent} />
+  </GradientBackground>
+))
+
 const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
   const artist = useArtistInfo(id)
   const albumsLayout = useLayout()
@@ -62,7 +75,7 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
   const albumSize = albumsLayout.width / 2 - styles.container.paddingHorizontal / 2
 
   if (!artist) {
-    return <></>
+    return <ArtistDetailsFallback />
   }
 
   const _albums = [...artist.albums]
@@ -117,6 +130,10 @@ const styles = StyleSheet.create({
   scroll: {
     flex: 1,
   },
+  fallback: {
+    alignItems: 'center',
+    paddingTop: 100,
+  },
   scrollContent: {
     alignItems: 'center',
   },

app/screens/Home.tsx

@@ -1,8 +1,8 @@
+import { AlbumContextPressable } from '@app/components/ContextMenu'
 import CoverArt from '@app/components/CoverArt'
 import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import NothingHere from '@app/components/NothingHere'
-import PressableOpacity from '@app/components/PressableOpacity'
 import { useActiveListRefresh2 } from '@app/hooks/server'
 import { AlbumListItem } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
@@ -14,6 +14,7 @@ import { GetAlbumListType } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
 import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
+import FastImage from 'react-native-fast-image'
 
 const titles: { [key in GetAlbumListType]?: string } = {
   recent: 'Recent Albums',
@@ -28,18 +29,22 @@ const AlbumItem = React.memo<{
   const navigation = useNavigation()
 
   return (
-    <PressableOpacity
-      onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
-      key={album.id}
-      style={styles.item}>
-      <CoverArt coverArt={album.coverArt} style={{ height: styles.item.width, width: styles.item.width }} />
+    <AlbumContextPressable
+      album={album}
+      triggerWrapperStyle={styles.item}
+      onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
+      <CoverArt
+        coverArt={album.coverArt}
+        style={{ height: styles.item.width, width: styles.item.width }}
+        resizeMode={FastImage.resizeMode.cover}
+      />
       <Text style={styles.title} numberOfLines={1}>
         {album.name}
       </Text>
       <Text style={styles.subtitle} numberOfLines={1}>
         {album.artist}
       </Text>
-    </PressableOpacity>
+    </AlbumContextPressable>
   )
 })
 
@@ -138,9 +143,9 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
   },
   item: {
+    flex: 1,
     marginRight: 10,
     width: 150,
-    alignItems: 'flex-start',
   },
   title: {
     fontFamily: font.semiBold,

app/screens/LibraryAlbums.tsx

@@ -1,8 +1,8 @@
+import { AlbumContextPressable } from '@app/components/ContextMenu'
 import CoverArt from '@app/components/CoverArt'
 import GradientFlatList from '@app/components/GradientFlatList'
-import PressableOpacity from '@app/components/PressableOpacity'
 import { useActiveListRefresh2 } from '@app/hooks/server'
-import { Album } from '@app/models/music'
+import { Album, AlbumListItem } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
@@ -13,44 +13,37 @@ import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
 import FastImage from 'react-native-fast-image'
 
 const AlbumItem = React.memo<{
-  id: string
-  name: string
+  album: AlbumListItem
   size: number
   height: number
-  artist?: string
-  coverArt?: string
-}>(({ id, name, artist, size, height, coverArt }) => {
+}>(({ album, size, height }) => {
   const navigation = useNavigation()
 
   return (
-    <PressableOpacity
-      style={[styles.item, { maxWidth: size, height }]}
-      onPress={() => navigation.navigate('album', { id, title: name })}>
-      <CoverArt coverArt={coverArt} style={{ height: size, width: size }} resizeMode={FastImage.resizeMode.cover} />
+    <AlbumContextPressable
+      album={album}
+      triggerWrapperStyle={[styles.item, { maxWidth: size, height }]}
+      onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
+      <CoverArt
+        coverArt={album.coverArt}
+        style={{ height: size, width: size }}
+        resizeMode={FastImage.resizeMode.cover}
+      />
       <View style={styles.itemDetails}>
         <Text style={styles.title} numberOfLines={1}>
-          {name}
+          {album.name}
         </Text>
         <Text style={styles.subtitle} numberOfLines={1}>
-          {artist}
+          {album.artist}
         </Text>
       </View>
-    </PressableOpacity>
+    </AlbumContextPressable>
   )
 })
 
 const AlbumListRenderItem: React.FC<{
   item: { album: Album; size: number; height: number }
-}> = ({ item }) => (
-  <AlbumItem
-    id={item.album.id}
-    coverArt={item.album.coverArt}
-    name={item.album.name}
-    artist={item.album.artist}
-    size={item.size}
-    height={item.height}
-  />
-)
+}> = ({ item }) => <AlbumItem album={item.album} size={item.size} height={item.height} />
 
 const AlbumsList = () => {
   const list = useStore(selectMusic.albums)
@@ -96,14 +89,14 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   item: {
-    alignItems: 'center',
+    // alignItems: 'center',
     marginVertical: 4,
     marginHorizontal: 3,
     flex: 1 / 3,
   },
   itemDetails: {
     flex: 1,
-    width: '100%',
+    // width: '100%',
   },
   title: {
     fontSize: 12,