javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Readjust track popup

Browse Source
This commit is contained in:
Lei Nelissen
2022-05-11 22:13:42 +02:00
parent b9016f9ba6
commit b7a5c0267c
2 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Colors.tsx
View File

@@ -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',

45
src/screens/modals/TrackPopupMenu.tsx
View File

@@ -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>
);
}