feat: show artist in playlist view

This commit is contained in:
Lei Nelissen
2023-04-22 23:41:41 +02:00
parent 1d7db11328
commit c3c32ae565
2 changed files with 29 additions and 10 deletions

View File

@@ -39,6 +39,7 @@ const Playlist: React.FC = () => {
shuffleButtonText={t('shuffle-playlist')} shuffleButtonText={t('shuffle-playlist')}
downloadButtonText={t('download-playlist')} downloadButtonText={t('download-playlist')}
deleteButtonText={t('delete-playlist')} deleteButtonText={t('delete-playlist')}
itemDisplayStyle='playlist'
/> />
); );
}; };

View File

@@ -47,6 +47,7 @@ const TrackContainer = styled.View<{ isPlaying: boolean }>`
padding: 12px 4px; padding: 12px 4px;
flex-direction: row; flex-direction: row;
border-radius: 6px; border-radius: 6px;
align-items: flex-start;
${props => props.isPlaying && css` ${props => props.isPlaying && css`
margin: 0 -12px; margin: 0 -12px;
@@ -65,6 +66,7 @@ interface TrackListViewProps {
downloadButtonText: string; downloadButtonText: string;
deleteButtonText: string; deleteButtonText: string;
listNumberingStyle?: 'album' | 'index'; listNumberingStyle?: 'album' | 'index';
itemDisplayStyle?: 'album' | 'playlist';
} }
const TrackListView: React.FC<TrackListViewProps> = ({ const TrackListView: React.FC<TrackListViewProps> = ({
@@ -78,6 +80,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
downloadButtonText, downloadButtonText,
deleteButtonText, deleteButtonText,
listNumberingStyle = 'album', listNumberingStyle = 'album',
itemDisplayStyle = 'album',
}) => { }) => {
const defaultStyles = useDefaultStyles(); const defaultStyles = useDefaultStyles();
const navigatorPadding = useNavigatorPadding(); const navigatorPadding = useNavigatorPadding();
@@ -154,16 +157,31 @@ const TrackListView: React.FC<TrackListViewProps> = ({
? i + 1 ? i + 1
: tracks[trackId]?.IndexNumber} : tracks[trackId]?.IndexNumber}
</Text> </Text>
<Text <View>
style={{ <Text
...currentTrack?.backendId === trackId && styles.activeText, style={{
flexShrink: 1, ...currentTrack?.backendId === trackId && styles.activeText,
marginRight: 4, flexShrink: 1,
}} marginRight: 4,
numberOfLines={1} }}
> numberOfLines={1}
{tracks[trackId]?.Name} >
</Text> {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' }}> <View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
<Text <Text
style={[ style={[