From c3c32ae565ca40f17249c59f66843e15701398f4 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Sat, 22 Apr 2023 23:41:41 +0200
Subject: [PATCH] feat: show artist in playlist view

---
 src/screens/Music/stacks/Playlist.tsx         |  1 +
 .../Music/stacks/components/TrackListView.tsx | 38 ++++++++++++++-----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/screens/Music/stacks/Playlist.tsx b/src/screens/Music/stacks/Playlist.tsx
index f0a8352..2e667e9 100644
--- a/src/screens/Music/stacks/Playlist.tsx
+++ b/src/screens/Music/stacks/Playlist.tsx
@@ -39,6 +39,7 @@ const Playlist: React.FC = () => {
             shuffleButtonText={t('shuffle-playlist')}
             downloadButtonText={t('download-playlist')} 
             deleteButtonText={t('delete-playlist')}
+            itemDisplayStyle='playlist'
         />
     );
 };
diff --git a/src/screens/Music/stacks/components/TrackListView.tsx b/src/screens/Music/stacks/components/TrackListView.tsx
index 0cbb1c3..eaf8783 100644
--- a/src/screens/Music/stacks/components/TrackListView.tsx
+++ b/src/screens/Music/stacks/components/TrackListView.tsx
@@ -47,6 +47,7 @@ const TrackContainer = styled.View<{ isPlaying: boolean }>`
     padding: 12px 4px;
     flex-direction: row;
     border-radius: 6px;
+    align-items: flex-start;
 
     ${props => props.isPlaying && css`
         margin: 0 -12px;
@@ -65,6 +66,7 @@ interface TrackListViewProps {
     downloadButtonText: string;
     deleteButtonText: string;
     listNumberingStyle?: 'album' | 'index';
+    itemDisplayStyle?: 'album' | 'playlist';
 }
 
 const TrackListView: React.FC<TrackListViewProps> = ({
@@ -78,6 +80,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
     downloadButtonText,
     deleteButtonText,
     listNumberingStyle = 'album',
+    itemDisplayStyle = 'album',
 }) => {
     const defaultStyles = useDefaultStyles();
     const navigatorPadding = useNavigatorPadding();
@@ -154,16 +157,31 @@ const TrackListView: React.FC<TrackListViewProps> = ({
                                     ? i + 1
                                     : tracks[trackId]?.IndexNumber}
                             </Text>
-                            <Text
-                                style={{ 
-                                    ...currentTrack?.backendId === trackId && styles.activeText,
-                                    flexShrink: 1,
-                                    marginRight: 4,
-                                }}
-                                numberOfLines={1}
-                            >
-                                {tracks[trackId]?.Name}
-                            </Text>
+                            <View>
+                                <Text
+                                    style={{ 
+                                        ...currentTrack?.backendId === trackId && styles.activeText,
+                                        flexShrink: 1,
+                                        marginRight: 4,
+                                    }}
+                                    numberOfLines={1}
+                                >
+                                    {tracks[trackId]?.Name}
+                                </Text>
+                                {itemDisplayStyle === 'playlist' && (
+                                    <Text
+                                        style={{ 
+                                            ...currentTrack?.backendId === trackId && styles.activeText,
+                                            flexShrink: 1,
+                                            marginRight: 4,
+                                            opacity:currentTrack?.backendId === trackId ? 0.5 : 0.25,
+                                        }}
+                                        numberOfLines={1}
+                                    >
+                                        {tracks[trackId]?.Artists.join(', ')}
+                                    </Text>
+                                )}
+                            </View>
                             <View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
                                 <Text
                                     style={[