fix duplicate songs showing as playing

made playing icon in line with text (doesn't work well with scaling)

app/components/ListItem.tsx

@@ -2,7 +2,6 @@ import { useStarred } from '@app/hooks/music'
 import { AlbumListItem, Artist, ListableItem, Song } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
-import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
@@ -17,16 +16,23 @@ import PressableOpacity from './PressableOpacity'
 import Star from './Star'
 
 const TitleTextSong = React.memo<{
-  id: string
+  isPlaying?: () => boolean
   title?: string
-}>(({ id, title }) => {
-  const currentTrack = useStore(selectTrackPlayer.currentTrack)
-  const playing = currentTrack?.id === id
+}>(({ isPlaying, title }) => {
+  const playing = () => isPlaying && isPlaying()
 
   return (
     <View style={styles.textLine}>
-      {playing ? <IconFA5 name="play" size={10} color={colors.accent} style={styles.playingIcon} /> : <></>}
-      <Text style={[styles.title, { color: playing ? colors.accent : colors.text.primary }]}>{title}</Text>
+      <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>
+        ) : (
+          <></>
+        )}
+        {title}
+      </Text>
     </View>
   )
 })
@@ -43,12 +49,13 @@ const TitleText = React.memo<{
 
 const ListItem: React.FC<{
   item: ListableItem
+  isPlaying?: () => boolean
   onPress?: () => void
   showArt?: boolean
   showStar?: boolean
   listStyle?: 'big' | 'small'
   subtitle?: string
-}> = ({ item, onPress, showArt, showStar, subtitle, listStyle }) => {
+}> = ({ item, isPlaying, onPress, showArt, showStar, subtitle, listStyle }) => {
   const navigation = useNavigation()
   const starred = useStarred(item.id, item.itemType)
 
@@ -145,7 +152,7 @@ const ListItem: React.FC<{
         )}
         <View style={styles.text}>
           {item.itemType === 'song' ? (
-            <TitleTextSong id={item.id} title={item.title} />
+            <TitleTextSong isPlaying={isPlaying} title={item.title} />
           ) : (
             <TitleText title={item.name} />
           )}
@@ -211,8 +218,8 @@ const styles = StyleSheet.create({
     color: colors.text.primary,
   },
   playingIcon: {
-    marginRight: 5,
-    marginLeft: 1,
+    paddingRight: 4,
+    paddingBottom: 1,
   },
   downloadedIcon: {
     marginRight: 2,

app/hooks/trackplayer.ts

@@ -243,6 +243,18 @@ export const useSetQueue = () => {
     })
 }
 
+export const useIsPlaying = () => {
+  const queueContextId = useStore(selectTrackPlayer.queueContextId)
+  const currentTrackIdx = useStore(selectTrackPlayer.currentTrackIdx)
+
+  return (contextId: string | undefined, track: number) => {
+    if (contextId === undefined) {
+      return track === currentTrackIdx
+    }
+    return contextId === queueContextId && track === currentTrackIdx
+  }
+}
+
 function mapSongToTrack(song: Song, coverArtUri: (coverArt?: string) => string | undefined): TrackExt {
   return {
     id: song.id,

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 { useSetQueue } from '@app/hooks/trackplayer'
+import { useIsPlaying, 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,6 +45,7 @@ const TopSongs = React.memo<{
   artistId: string
 }>(({ songs, name, artistId }) => {
   const setQueue = useSetQueue()
+  const isPlaying = useIsPlaying()
 
   return (
     <>
@@ -53,6 +54,7 @@ const TopSongs = React.memo<{
         <ListItem
           key={i}
           item={s}
+          isPlaying={() => isPlaying(artistId, 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, useSkipTo } from '@app/hooks/trackplayer'
+import { mapTrackExtToSong, useIsPlaying, useSkipTo } from '@app/hooks/trackplayer'
 import { useStore } from '@app/state/store'
 import { selectTrackPlayer } from '@app/state/trackplayer'
 import React from 'react'
@@ -10,6 +10,7 @@ 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}>
@@ -19,6 +20,7 @@ const NowPlayingQueue = React.memo<{}>(() => {
             <ListItem
               key={i}
               item={song}
+              isPlaying={() => isPlaying(undefined, i)}
               onPress={() => skipTo(i)}
               showArt={true}
               subtitle={`${song.artist} • ${song.album}`}

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 { useSetQueue } from '@app/hooks/trackplayer'
+import { useIsPlaying, 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,10 +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)}
       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 { useSetQueue } from '@app/hooks/trackplayer'
+import { useIsPlaying, 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,6 +28,7 @@ const Songs = React.memo<{
   itemId: string
 }>(({ songs, name, type, itemId }) => {
   const setQueue = useSetQueue()
+  const isPlaying = useIsPlaying()
 
   const _songs = [...songs]
   let typeName = ''
@@ -56,6 +57,7 @@ const Songs = React.memo<{
           <ListItem
             key={i}
             item={s}
+            isPlaying={() => isPlaying(itemId, i)}
             subtitle={s.artist}
             onPress={() => setQueue(songs, name, type, itemId, i)}
             showArt={type === 'playlist'}