search item press events

app/components/ListItem.tsx

@@ -2,6 +2,7 @@ import { ListableItem } from '@app/models/music'
 import { currentTrackAtom } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
+import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useState } from 'react'
 import { GestureResponderEvent, StyleSheet, Text, View } from 'react-native'
@@ -45,6 +46,7 @@ const ListItem: React.FC<{
   subtitle?: string
 }> = ({ item, onPress, showArt, showStar, subtitle, listStyle }) => {
   const [starred, setStarred] = useState(false)
+  const navigation = useNavigation()
 
   showStar = showStar === undefined ? true : showStar
   listStyle = listStyle || 'small'
@@ -52,6 +54,32 @@ const ListItem: React.FC<{
   const artSource = item.itemType === 'artist' ? { artistId: item.id } : { coverArt: item.coverArt }
   const sizeStyle = listStyle === 'big' ? bigStyles : smallStyles
 
+  if (!onPress) {
+    switch (item.itemType) {
+      case 'album':
+        onPress = () => navigation.navigate('AlbumView', { id: item.id, title: item.name })
+        break
+      case 'artist':
+        onPress = () => navigation.navigate('ArtistView', { id: item.id, title: item.name })
+        break
+      case 'playlist':
+        onPress = () => navigation.navigate('PlaylistView', { id: item.id, title: item.name })
+        break
+    }
+  }
+
+  if (!subtitle) {
+    switch (item.itemType) {
+      case 'song':
+      case 'album':
+        subtitle = item.artist
+        break
+      case 'playlist':
+        subtitle = item.comment
+        break
+    }
+  }
+
   return (
     <View style={[styles.container, sizeStyle.container]}>
       <PressableOpacity onPress={onPress} style={styles.item}>

app/navigation/BottomTabNavigator.tsx

@@ -57,6 +57,7 @@ const PlaylistScreen: React.FC<PlaylistScreenProps> = ({ route }) => (
 const styles = StyleSheet.create({
   stackheaderStyle: {
     backgroundColor: colors.gradient.high,
+    // backgroundColor: 'transparent',
   },
   stackheaderTitleStyle: {
     fontSize: 18,
@@ -71,6 +72,7 @@ const itemScreenOptions = {
   headerHideShadow: true,
   headerTintColor: 'white',
   headerTitleStyle: styles.stackheaderTitleStyle,
+  // headerTranslucent: true,
 }
 
 function createTabStackNavigator(Component: React.ComponentType<any>) {

app/screens/LibraryArtists.tsx

@@ -2,26 +2,13 @@ import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import { Artist } from '@app/models/music'
 import { artistsAtom, artistsUpdatingAtom, useUpdateArtists } from '@app/state/music'
-import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
 import { StyleSheet } from 'react-native'
 
-const ArtistItem = React.memo<{ item: Artist }>(({ item }) => {
+const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => (
-  const navigation = useNavigation()
+  <ListItem item={item} showArt={true} showStar={false} listStyle="big" />
-
+)
-  return (
-    <ListItem
-      item={item}
-      showArt={true}
-      showStar={false}
-      listStyle="big"
-      onPress={() => navigation.navigate('ArtistView', { id: item.id, title: item.name })}
-    />
-  )
-})
-
-const ArtistRenderItem: React.FC<{ item: Artist }> = ({ item }) => <ArtistItem item={item} />
 
 const ArtistsList = () => {
   const artists = useAtomValue(artistsAtom)

app/screens/LibraryPlaylists.tsx

@@ -2,27 +2,13 @@ import GradientFlatList from '@app/components/GradientFlatList'
 import ListItem from '@app/components/ListItem'
 import { PlaylistListItem } from '@app/models/music'
 import { playlistsAtom, playlistsUpdatingAtom, useUpdatePlaylists } from '@app/state/music'
-import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
 import { StyleSheet } from 'react-native'
 
-const PlaylistItem = React.memo<{ item: PlaylistListItem }>(({ item }) => {
+const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => (
-  const navigation = useNavigation()
+  <ListItem item={item} showArt={true} showStar={false} listStyle="big" />
-
+)
-  return (
-    <ListItem
-      item={item}
-      showArt={true}
-      showStar={false}
-      listStyle="big"
-      subtitle={item.comment}
-      onPress={() => navigation.navigate('PlaylistView', { id: item.id, title: item.name })}
-    />
-  )
-})
-
-const PlaylistRenderItem: React.FC<{ item: PlaylistListItem }> = ({ item }) => <PlaylistItem item={item} />
 
 const PlaylistsList = () => {
   const playlists = useAtomValue(playlistsAtom)

app/screens/Search.tsx

@@ -2,8 +2,9 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
-import { ListableItem, SearchResults } from '@app/models/music'
+import { ListableItem, SearchResults, Song } from '@app/models/music'
 import { searchResultsAtom, searchResultsUpdatingAtom, useUpdateSearchResults } from '@app/state/music'
+import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useAtomValue } from 'jotai/utils'
@@ -11,17 +12,18 @@ import debounce from 'lodash.debounce'
 import React, { useCallback, useMemo, useState } from 'react'
 import { ActivityIndicator, StatusBar, StyleSheet, TextInput, View } from 'react-native'
 
-function getSubtitle(item: ListableItem) {
+const SongItem = React.memo<{ item: Song }>(({ item }) => {
-  switch (item.itemType) {
+  const setQueue = useSetQueue()
-    case 'playlist':
+
-      return item.comment
+  return (
-    case 'album':
+    <ListItem
-    case 'song':
+      item={item}
-      return item.artist
+      showArt={true}
-    default:
+      showStar={false}
-      return undefined
+      onPress={() => setQueue([item], `Search: ${item.title}`, 0)}
-  }
+    />
-}
+  )
+})
 
 const ResultsCategory = React.memo<{
   name: string
@@ -34,9 +36,13 @@ const ResultsCategory = React.memo<{
   return (
     <>
       <Header>{name}</Header>
-      {items.map(a => (
+      {items.map(a =>
-        <ListItem key={a.id} item={a} showArt={true} showStar={false} subtitle={getSubtitle(a)} />
+        a.itemType === 'song' ? (
-      ))}
+          <SongItem key={a.id} item={a} />
+        ) : (
+          <ListItem key={a.id} item={a} showArt={true} showStar={false} />
+        ),
+      )}
     </>
   )
 })