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