added queue context jump

app/screens/ArtistView.tsx

@@ -42,7 +42,8 @@ const AlbumItem = React.memo<{
 const TopSongs = React.memo<{
   songs: Song[]
   name: string
-}>(({ songs, name }) => {
+  artistId: string
+}>(({ songs, name, artistId }) => {
   const setQueue = useSetQueue()
 
   return (
@@ -54,7 +55,7 @@ const TopSongs = React.memo<{
           item={s}
           showArt={true}
           subtitle={s.album}
-          onPress={() => setQueue(songs, `Top Songs: ${name}`, i)}
+          onPress={() => setQueue(songs, name, 'artist', artistId, i)}
         />
       ))}
     </>
@@ -99,7 +100,11 @@ const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
         <Text style={styles.title}>{artist.name}</Text>
       </View>
       <View style={styles.container}>
-        {artist.topSongs.length > 0 ? <TopSongs songs={artist.topSongs} name={artist.name} /> : <></>}
+        {artist.topSongs.length > 0 ? (
+          <TopSongs songs={artist.topSongs} name={artist.name} artistId={artist.id} />
+        ) : (
+          <></>
+        )}
         <Header>Albums</Header>
         <View style={styles.albums} onLayout={albumsLayout.onLayout}>
           {_albums.map(a => (

app/screens/NowPlayingView.tsx

@@ -6,7 +6,7 @@ import { useStarred } from '@app/hooks/music'
 import { useNext, usePause, usePlay, usePrevious, useToggleRepeat, useToggleShuffle } from '@app/hooks/trackplayer'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
+import { QueueContextType, selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
@@ -22,20 +22,63 @@ import Icon from 'react-native-vector-icons/Ionicons'
 import IconMatCom from 'react-native-vector-icons/MaterialCommunityIcons'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
 
-const NowPlayingHeader = React.memo<{
-  backHandler: () => void
-}>(({ backHandler }) => {
+function getContextName(type?: QueueContextType) {
+  switch (type) {
+    case 'album':
+      return 'Album'
+    case 'artist':
+      return 'Top Songs'
+    case 'playlist':
+      return 'Playlist'
+    case 'song':
+      return 'Search Results'
+    default:
+      return undefined
+  }
+}
+
+const NowPlayingHeader = React.memo(() => {
+  const navigation = useNavigation()
   const queueName = useStore(selectTrackPlayer.name)
+  const queueContextType = useStore(selectTrackPlayer.queueContextType)
+  const queueContextId = useStore(selectTrackPlayer.queueContextId)
+
+  let contextName = getContextName(queueContextType)
+
+  const back = useCallback(() => {
+    navigation.navigate('top')
+  }, [navigation])
+
+  const goToContext = useCallback(() => {
+    if (!queueContextType || !queueContextId || queueContextType === 'song') {
+      return
+    }
+    navigation.navigate('library')
+    navigation.navigate(queueContextType, { id: queueContextId, title: queueName })
+  }, [navigation, queueContextId, queueContextType, queueName])
 
   return (
     <View style={headerStyles.container}>
-      <PressableOpacity onPress={backHandler} style={headerStyles.icons} ripple={true}>
+      <PressableOpacity onPress={back} style={headerStyles.icons} ripple={true}>
         <IconMat name="arrow-back" color="white" size={25} />
       </PressableOpacity>
-      <Text numberOfLines={1} style={headerStyles.queueName}>
-        {queueName || 'Nothing playing...'}
-      </Text>
-      <PressableOpacity onPress={undefined} style={headerStyles.icons} ripple={true}>
+      <View style={headerStyles.center}>
+        {contextName ? (
+          <Text numberOfLines={1} style={headerStyles.queueType}>
+            {contextName}
+          </Text>
+        ) : (
+          <></>
+        )}
+        <Text numberOfLines={1} style={headerStyles.queueName}>
+          {queueName || 'Nothing playing...'}
+        </Text>
+      </View>
+      <PressableOpacity
+        onPress={goToContext}
+        style={headerStyles.icons}
+        disabled={queueContextType === 'song'}
+        ripple={true}>
         <IconMat name="more-vert" color="white" size={25} />
       </PressableOpacity>
     </View>
@@ -55,11 +98,21 @@ const headerStyles = StyleSheet.create({
     width: 42,
     marginHorizontal: 8,
   },
+  center: {
+    flex: 1,
+  },
+  queueType: {
+    fontFamily: font.regular,
+    fontSize: 14,
+    color: colors.text.primary,
+    // flex: 1,
+    textAlign: 'center',
+  },
   queueName: {
     fontFamily: font.bold,
     fontSize: 16,
     color: colors.text.primary,
-    flex: 1,
+    // flex: 1,
     textAlign: 'center',
   },
 })
@@ -315,20 +368,16 @@ type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'main'>
 const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
   const track = useStore(selectTrackPlayer.currentTrack)
 
-  const back = useCallback(() => {
-    navigation.navigate('top')
-  }, [navigation])
-
   useEffect(() => {
     if (!track) {
-      back()
+      navigation.navigate('top')
     }
   })
 
   return (
     <View style={styles.container}>
       <ImageGradientBackground imageUri={track?.artwork as string} imageKey={`${track?.album}${track?.artist}`} />
-      <NowPlayingHeader backHandler={back} />
+      <NowPlayingHeader />
       <View style={styles.content}>
         <SongCoverArt />
         <SongInfo />

app/screens/Search.tsx

@@ -21,7 +21,7 @@ const SongItem = React.memo<{ item: Song }>(({ item }) => {
       item={item}
       showArt={true}
       showStar={false}
-      onPress={() => setQueue([item], `Search: ${item.title}`, 0)}
+      onPress={() => setQueue([item], item.title, 'song', item.id, 0)}
     />
   )
 })

app/screens/SongListView.tsx

@@ -25,7 +25,8 @@ const Songs = React.memo<{
   songs: Song[]
   name: string
   type: SongListType
-}>(({ songs, name, type }) => {
+  itemId: string
+}>(({ songs, name, type, itemId }) => {
   const setQueue = useSetQueue()
 
   const _songs = [...songs]
@@ -42,14 +43,21 @@ const Songs = React.memo<{
 
   return (
     <>
-      <ListPlayerControls style={styles.controls} songs={_songs} typeName={typeName} queueName={name} />
+      <ListPlayerControls
+        style={styles.controls}
+        songs={_songs}
+        typeName={typeName}
+        queueName={name}
+        queueContextId={itemId}
+        queueContextType={type}
+      />
       <View style={styles.songs}>
         {_songs.map((s, i) => (
           <ListItem
             key={i}
             item={s}
             subtitle={s.artist}
-            onPress={() => setQueue(songs, name, i)}
+            onPress={() => setQueue(songs, name, type, itemId, i)}
             showArt={type === 'playlist'}
           />
         ))}
@@ -76,7 +84,7 @@ const SongListDetails = React.memo<{
         <Text style={styles.title}>{songList.name}</Text>
         {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : <></>}
         {songList.songs.length > 0 ? (
-          <Songs songs={songList.songs} name={songList.name} type={type} />
+          <Songs songs={songList.songs} name={songList.name} type={type} itemId={songList.id} />
         ) : (
           <NothingHere height={300} width={250} />
         )}