fix current idx not being set on toggle shuffle

switch to passing params instead of function

app/components/ListItem.tsx

@@ -1,4 +1,5 @@
 import { useStarred } from '@app/hooks/music'
+import { useIsPlaying } from '@app/hooks/trackplayer'
 import { AlbumListItem, Artist, ListableItem, Song } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
@@ -16,15 +17,16 @@ import PressableOpacity from './PressableOpacity'
 import Star from './Star'
 
 const TitleTextSong = React.memo<{
-  isPlaying?: () => boolean
+  contextId?: string
+  queueId: number
   title?: string
-}>(({ isPlaying, title }) => {
-  const playing = () => isPlaying && isPlaying()
+}>(({ contextId, queueId, title }) => {
+  const playing = useIsPlaying(contextId, queueId)
 
   return (
     <View style={styles.textLine}>
-      <Text style={[styles.title, { color: playing() ? colors.accent : colors.text.primary }]}>
-        {playing() ? (
+      <Text style={[styles.title, { color: playing ? colors.accent : colors.text.primary }]}>
+        {playing ? (
           <View style={styles.playingIcon}>
             <IconFA5 name="play" size={9} color={colors.accent} />
           </View>
@@ -49,13 +51,14 @@ const TitleText = React.memo<{
 
 const ListItem: React.FC<{
   item: ListableItem
-  isPlaying?: () => boolean
+  contextId?: string
+  queueId?: number
   onPress?: () => void
   showArt?: boolean
   showStar?: boolean
   listStyle?: 'big' | 'small'
   subtitle?: string
-}> = ({ item, isPlaying, onPress, showArt, showStar, subtitle, listStyle }) => {
+}> = ({ item, contextId, queueId, onPress, showArt, showStar, subtitle, listStyle }) => {
   const navigation = useNavigation()
   const starred = useStarred(item.id, item.itemType)
 
@@ -138,6 +141,13 @@ const ListItem: React.FC<{
     starItem(item.id, item.itemType, starred)
   }, [item.id, item.itemType, starItem, starred])
 
+  let title = <></>
+  if (item.itemType === 'song' && queueId !== undefined) {
+    title = <TitleTextSong contextId={contextId} queueId={queueId} title={item.title} />
+  } else if (item.itemType !== 'song') {
+    title = <TitleText title={item.name} />
+  }
+
   return (
     <View style={[styles.container, sizeStyle.container]}>
       <PressableComponent>
@@ -151,11 +161,7 @@ const ListItem: React.FC<{
           <></>
         )}
         <View style={styles.text}>
-          {item.itemType === 'song' ? (
-            <TitleTextSong isPlaying={isPlaying} title={item.title} />
-          ) : (
-            <TitleText title={item.name} />
-          )}
+          {title}
           {subtitle ? (
             <View style={styles.textLine}>
               {starred ? (

app/hooks/trackplayer.ts

@@ -135,6 +135,7 @@ function unshuffleTracks(tracks: TrackExt[], shuffleOrder: number[]): TrackExt[]
 }
 
 export const useToggleShuffle = () => {
+  const setCurrentTrackIdx = useStore(selectTrackPlayer.setCurrentTrackIdx)
   const setQueue = useStore(selectTrackPlayer.setQueue)
   const setShuffleOrder = useStore(selectTrackPlayer.setShuffleOrder)
   const getShuffleOrder = useCallback(() => useStore.getState().shuffleOrder, [])
@@ -176,6 +177,7 @@ export const useToggleShuffle = () => {
       }
 
       setQueue(await getQueue())
+      setCurrentTrackIdx(await getCurrentTrack())
       setProgress(progress)
     })
   }
@@ -243,21 +245,23 @@ export const useSetQueue = () => {
     })
 }
 
-export const useIsPlaying = () => {
+export const useIsPlaying = (contextId: string | undefined, track: number) => {
   const queueContextId = useStore(selectTrackPlayer.queueContextId)
   const currentTrackIdx = useStore(selectTrackPlayer.currentTrackIdx)
   const shuffleOrder = useStore(selectTrackPlayer.shuffleOrder)
 
-  return (contextId: string | undefined, track: number) => {
-    if (contextId === undefined) {
-      return track === currentTrackIdx
-    }
-    if (shuffleOrder) {
-      const shuffledTrack = shuffleOrder.findIndex(i => i === track)
-      track = shuffledTrack !== undefined ? shuffledTrack : -1
-    }
-    return contextId === queueContextId && track === currentTrackIdx
+  if (contextId === undefined) {
+    console.log(currentTrackIdx)
+    return track === currentTrackIdx
   }
+
+  if (shuffleOrder) {
+    console.log('asdf')
+    const shuffledTrack = shuffleOrder.findIndex(i => i === track)
+    track = shuffledTrack !== undefined ? shuffledTrack : -1
+  }
+
+  return contextId === queueContextId && track === currentTrackIdx
 }
 
 function mapSongToTrack(song: Song, coverArtUri: (coverArt?: string) => string | undefined): TrackExt {

app/screens/ArtistView.tsx

@@ -5,7 +5,7 @@ import GradientScrollView from '@app/components/GradientScrollView'
 import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import { useArtistInfo } from '@app/hooks/music'
-import { useIsPlaying, useSetQueue } from '@app/hooks/trackplayer'
+import { useSetQueue } from '@app/hooks/trackplayer'
 import { Album, Song } from '@app/models/music'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
@@ -45,7 +45,6 @@ const TopSongs = React.memo<{
   artistId: string
 }>(({ songs, name, artistId }) => {
   const setQueue = useSetQueue()
-  const isPlaying = useIsPlaying()
 
   return (
     <>
@@ -54,7 +53,8 @@ const TopSongs = React.memo<{
         <ListItem
           key={i}
           item={s}
-          isPlaying={() => isPlaying(artistId, i)}
+          contextId={artistId}
+          queueId={i}
           showArt={true}
           subtitle={s.album}
           onPress={() => setQueue(songs, name, 'artist', artistId, i)}

app/screens/NowPlayingQueue.tsx

@@ -1,7 +1,7 @@
 import GradientScrollView from '@app/components/GradientScrollView'
 import ListItem from '@app/components/ListItem'
 import NowPlayingBar from '@app/components/NowPlayingBar'
-import { mapTrackExtToSong, useIsPlaying, useSkipTo } from '@app/hooks/trackplayer'
+import { mapTrackExtToSong, useSkipTo } from '@app/hooks/trackplayer'
 import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
 import React from 'react'
@@ -10,7 +10,6 @@ import { StyleSheet, View } from 'react-native'
 const NowPlayingQueue = React.memo<{}>(() => {
   const queue = useStore(selectTrackPlayer.queue)
   const skipTo = useSkipTo()
-  const isPlaying = useIsPlaying()
 
   return (
     <View style={styles.outerContainer}>
@@ -20,7 +19,7 @@ const NowPlayingQueue = React.memo<{}>(() => {
             <ListItem
               key={i}
               item={song}
-              isPlaying={() => isPlaying(undefined, i)}
+              queueId={i}
               onPress={() => skipTo(i)}
               showArt={true}
               subtitle={`${song.artist} • ${song.album}`}

app/screens/NowPlayingView.tsx

@@ -327,7 +327,7 @@ const PlayerControls = () => {
     <View style={controlsStyles.container}>
       <View style={controlsStyles.top}>
         <View style={controlsStyles.center}>
-          <PressableOpacity onPress={() => toggleRepeat()} disabled={disabled}>
+          <PressableOpacity onPress={() => toggleRepeat()} disabled={disabled} hitSlop={16}>
             <Icon name="repeat" size={26} color={repeatMode === RepeatMode.Off ? 'white' : colors.accent} />
             <Text style={[controlsStyles.repeatExt, repeatMode === RepeatMode.Track ? { opacity: 1 } : {}]}>1</Text>
           </PressableOpacity>
@@ -346,16 +346,16 @@ const PlayerControls = () => {
         </View>
 
         <View style={controlsStyles.center}>
-          <PressableOpacity onPress={() => toggleShuffle()} disabled={disabled}>
+          <PressableOpacity onPress={() => toggleShuffle()} disabled={disabled} hitSlop={16}>
             <Icon name="shuffle" size={26} color={shuffled ? colors.accent : 'white'} />
           </PressableOpacity>
         </View>
       </View>
       <View style={controlsStyles.bottom}>
-        <PressableOpacity onPress={undefined} disabled={true}>
+        <PressableOpacity onPress={undefined} disabled={true} hitSlop={16}>
           <IconMatCom name="cast-audio" size={20} color="white" />
         </PressableOpacity>
-        <PressableOpacity onPress={() => navigation.navigate('queue')} disabled={disabled}>
+        <PressableOpacity onPress={() => navigation.navigate('queue')} disabled={disabled} hitSlop={16}>
           <IconMatCom name="playlist-play" size={24} color="white" />
         </PressableOpacity>
       </View>

app/screens/Search.tsx

@@ -3,7 +3,7 @@ import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
 import { useActiveListRefresh2 } from '@app/hooks/server'
-import { useIsPlaying, useSetQueue } from '@app/hooks/trackplayer'
+import { useSetQueue } from '@app/hooks/trackplayer'
 import { ListableItem, SearchResults, Song } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
@@ -15,12 +15,12 @@ import { ActivityIndicator, StatusBar, StyleSheet, TextInput, View } from 'react
 
 const SongItem = React.memo<{ item: Song }>(({ item }) => {
   const setQueue = useSetQueue()
-  const isPlaying = useIsPlaying()
 
   return (
     <ListItem
       item={item}
-      isPlaying={() => isPlaying(item.id, 0)}
+      contextId={item.id}
+      queueId={0}
       showArt={true}
       showStar={false}
       onPress={() => setQueue([item], item.title, 'song', item.id, 0)}

app/screens/SongListView.tsx

@@ -5,7 +5,7 @@ import ListItem from '@app/components/ListItem'
 import ListPlayerControls from '@app/components/ListPlayerControls'
 import NothingHere from '@app/components/NothingHere'
 import { useAlbumWithSongs, useCoverArtUri, usePlaylistWithSongs } from '@app/hooks/music'
-import { useIsPlaying, useSetQueue } from '@app/hooks/trackplayer'
+import { useSetQueue } from '@app/hooks/trackplayer'
 import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
@@ -28,7 +28,6 @@ const Songs = React.memo<{
   itemId: string
 }>(({ songs, name, type, itemId }) => {
   const setQueue = useSetQueue()
-  const isPlaying = useIsPlaying()
 
   const _songs = [...songs]
   let typeName = ''
@@ -57,7 +56,8 @@ const Songs = React.memo<{
           <ListItem
             key={i}
             item={s}
-            isPlaying={() => isPlaying(itemId, i)}
+            contextId={itemId}
+            queueId={i}
             subtitle={s.artist}
             onPress={() => setQueue(songs, name, type, itemId, i)}
             showArt={type === 'playlist'}