From b7a5c0267c4342ff0bda21bae9ad3e39cd61508a Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Wed, 11 May 2022 22:13:42 +0200
Subject: [PATCH] Readjust track popup

---
 src/components/Colors.tsx             |  2 +-
 src/screens/modals/TrackPopupMenu.tsx | 45 +++++++++++++++------------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/Colors.tsx b/src/components/Colors.tsx
index da5abdf..0c28b38 100644
--- a/src/components/Colors.tsx
+++ b/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',
diff --git a/src/screens/modals/TrackPopupMenu.tsx b/src/screens/modals/TrackPopupMenu.tsx
index fd04edc..2432472 100644
--- a/src/screens/modals/TrackPopupMenu.tsx
+++ b/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;
-    flex: 0 0 auto;
+    padding: 40px;
+    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,21 +75,20 @@ function TrackPopupMenu() {
     }, [trackId, dispatch, closeModal]);
 
     return (
-        <View>
-            <Container>
-                <SubHeader style={{ textAlign: 'center' }}>{track?.Name}</SubHeader>
-                <Text style={{ marginBottom: 18, textAlign: 'center' }}>{track?.Album} - {track?.AlbumArtist}</Text>
-                <WrappableButtonRow>
-                    <WrappableButton title={t('play-next')} icon={PlayIcon} onPress={handlePlayNext} />
-                    <WrappableButton title={t('add-to-queue')} icon={QueueAppendIcon} onPress={handleAddToQueue} />
-                    {isDownloaded ? (
-                        <WrappableButton title={t('delete-track')} icon={TrashIcon} onPress={handleDelete} />
-                    ) : (
-                        <WrappableButton title={t('download-track')} icon={DownloadIcon} onPress={handleDownload} />
-                    )}
-                </WrappableButtonRow>
-            </Container>
-        </View>
+        <Container>
+            <Artwork src={getImage(track?.Id || '')} />
+            <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} />
+                {isDownloaded ? (
+                    <WrappableButton title={t('delete-track')} icon={TrashIcon} onPress={handleDelete} />
+                ) : (
+                    <WrappableButton title={t('download-track')} icon={DownloadIcon} onPress={handleDownload} />
+                )}
+            </WrappableButtonRow>
+        </Container>
     );
 }