Readjust track popup

src/components/Colors.tsx

@@ -39,7 +39,7 @@ function generateStyles(scheme: ColorSchemeName) {
             backgroundColor: scheme === 'dark' ? '#161616' : '#eee',
         },
         modal: {
-            backgroundColor: scheme === 'dark' ? '#22222200' : '#eeeeee00',
+            backgroundColor: scheme === 'dark' ? '#000' : '#fff',
         },
         modalInner: {
             backgroundColor: scheme === 'dark' ? '#000' : '#fff',

src/screens/modals/TrackPopupMenu.tsx

@@ -2,30 +2,35 @@ import React, { useCallback } from 'react';
 import { useNavigation, StackActions, useRoute, RouteProp } from '@react-navigation/native';
 import { ModalStackParams } from 'screens/types';
 import { useTypedSelector } from 'store';
-import { SubHeader } from 'components/Typography';
+import { Header, SubHeader } from 'components/Typography';
 import styled from 'styled-components/native';
 import { t } from '@localisation';
 import PlayIcon from 'assets/icons/play.svg';
 import DownloadIcon from 'assets/icons/cloud-down-arrow.svg';
 import QueueAppendIcon from 'assets/icons/queue-append.svg';
 import TrashIcon from 'assets/icons/trash.svg';
-import { Text } from 'components/Typography';
 
 import { WrappableButton, WrappableButtonRow } from 'components/WrappableButtonRow';
+import CoverImage from 'components/CoverImage';
 import { useDispatch } from 'react-redux';
 import { queueTrackForDownload, removeDownloadedTrack } from 'store/downloads/actions';
 import usePlayTracks from 'utility/usePlayTracks';
 import { selectIsDownloaded } from 'store/downloads/selectors';
-import { View } from 'react-native';
+import { useGetImage } from 'utility/JellyfinApi';
 
 type Route = RouteProp<ModalStackParams, 'TrackPopupMenu'>;
 
 const Container = styled.View`
-    padding: 20px;
+    padding: 40px;
-    flex: 0 0 auto;
+    margin-top: 20px;
+    flex: 1 1 auto;
     flex-direction: column;
 `;
 
+const Artwork = styled(CoverImage)`
+    margin: 0 auto 25px auto;
+`;
+
 function TrackPopupMenu() {
     // Retrieve trackId from route
     const { params: { trackId } } = useRoute<Route>();
@@ -34,6 +39,7 @@ function TrackPopupMenu() {
     const navigation = useNavigation();
     const dispatch = useDispatch();
     const playTracks = usePlayTracks();
+    const getImage = useGetImage();
 
     // Retrieve data from store
     const track = useTypedSelector((state) => state.music.tracks.entities[trackId]);
@@ -69,10 +75,10 @@ function TrackPopupMenu() {
     }, [trackId, dispatch, closeModal]);
 
     return (
-        <View>
         <Container>
-                <SubHeader style={{ textAlign: 'center' }}>{track?.Name}</SubHeader>
+            <Artwork src={getImage(track?.Id || '')} />
-                <Text style={{ marginBottom: 18, textAlign: 'center' }}>{track?.Album} - {track?.AlbumArtist}</Text>
+            <Header>{track?.Name}</Header>
+            <SubHeader style={{ marginBottom: 18 }}>{track?.AlbumArtist} {track?.Album ? '— ' + track?.Album : ''}</SubHeader>
             <WrappableButtonRow>
                 <WrappableButton title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
                 <WrappableButton title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
@@ -83,7 +89,6 @@ function TrackPopupMenu() {
                 )}
             </WrappableButtonRow>
         </Container>
-        </View>
     );
 }