diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 4c9ea32..656dbce 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,23 +1,38 @@ -import React from 'react'; -import styled from 'styled-components/native'; -import { SafeAreaView } from 'react-native'; +import React, { useCallback } from 'react'; +import styled, { css } from 'styled-components/native'; +import { SafeAreaView, Pressable } from 'react-native'; import { colors } from './Colors'; +import { useNavigation, StackActions } from '@react-navigation/native'; -const Background = styled.View` +interface Props { + fullSize?: boolean; +} + +const Background = styled(Pressable)` padding: 100px 25px; flex: 1; + justify-content: center; `; -const Container = styled.View` +const Container = styled(Pressable)>` border-radius: 20px; - flex: 1; + margin: auto 0; + + ${props => props.fullSize && css` + flex: 1; + `} `; -const Modal: React.FC = ({ children }) => { +const Modal: React.FC = ({ children, fullSize = true }) => { + const navigation = useNavigation(); + const closeModal = useCallback(() => { + navigation.dispatch(StackActions.popToTop()); + }, [navigation]); + return ( - + - + {children} diff --git a/src/components/TouchableHandler.tsx b/src/components/TouchableHandler.tsx index c7f7f50..b91cf01 100644 --- a/src/components/TouchableHandler.tsx +++ b/src/components/TouchableHandler.tsx @@ -1,24 +1,41 @@ import React, { useCallback } from 'react'; -import { TouchableOpacity } from 'react-native'; +import { Pressable, ViewStyle } from 'react-native'; interface TouchableHandlerProps { id: string; onPress: (id: string) => void; + onLongPress?: (id: string) => void; +} + +function TouchableStyles({ pressed }: { pressed: boolean }): ViewStyle { + if (pressed) { + return { opacity: 0.5 }; + } else { + return { opacity: 1 }; + } } /** * This is a generic handler that accepts id as a prop, and return it when it is * pressed. This comes in handy with lists in which albums / tracks need to be selected. */ -const TouchableHandler: React.FC = ({ id, onPress, children }) => { +const TouchableHandler: React.FC = ({ id, onPress, onLongPress, children }) => { const handlePress = useCallback(() => { return onPress(id); }, [id, onPress]); + const handleLongPress = useCallback(() => { + return onLongPress ? onLongPress(id) : undefined; + }, [id, onLongPress]); + return ( - + {children} - + ); }; diff --git a/src/screens/Music/stacks/Album.tsx b/src/screens/Music/stacks/Album.tsx index b93c4f5..34024d0 100644 --- a/src/screens/Music/stacks/Album.tsx +++ b/src/screens/Music/stacks/Album.tsx @@ -1,9 +1,9 @@ -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { StackParams } from '../types'; import { Text, ScrollView, Dimensions, Button, RefreshControl, StyleSheet } from 'react-native'; import { useGetImage } from 'utility/JellyfinApi'; import styled, { css } from 'styled-components/native'; -import { useRoute, RouteProp } from '@react-navigation/native'; +import { useRoute, RouteProp, useNavigation } from '@react-navigation/native'; import FastImage from 'react-native-fast-image'; import { useDispatch } from 'react-redux'; import { differenceInDays } from 'date-fns'; @@ -11,10 +11,10 @@ import { useTypedSelector } from 'store'; import { fetchTracksByAlbum } from 'store/music/actions'; import { ALBUM_CACHE_AMOUNT_OF_DAYS, THEME_COLOR } from 'CONSTANTS'; import usePlayAlbum from 'utility/usePlayAlbum'; -import usePlayTrack from 'utility/usePlayTrack'; import TouchableHandler from 'components/TouchableHandler'; import useCurrentTrack from 'utility/useCurrentTrack'; import { colors } from 'components/Colors'; +import TrackPlayer from 'react-native-track-player'; type Route = RouteProp; @@ -71,11 +71,26 @@ const Album: React.FC = () => { const getImage = useGetImage(); const playAlbum = usePlayAlbum(); const currentTrack = useCurrentTrack(); + const navigation = useNavigation(); // Setup callbacks const selectAlbum = useCallback(() => { playAlbum(id); }, [playAlbum, id]); - const selectTrack = usePlayTrack(); const refresh = useCallback(() => { dispatch(fetchTracksByAlbum(id)); }, [id, dispatch]); + const selectTrack = useCallback(async (trackId) => { + const tracks = await playAlbum(id, false); + + if (tracks) { + const track = tracks.find((t) => t.id.startsWith(trackId)); + + if (track) { + await TrackPlayer.skip(track.id); + await TrackPlayer.play(); + } + } + }, [playAlbum, id]); + const longPressTrack = useCallback((trackId: string) => { + navigation.navigate('TrackPopupMenu', { trackId }); + }, [navigation]); // Retrieve album tracks on load useEffect(() => { @@ -101,7 +116,12 @@ const Album: React.FC = () => { {album?.AlbumArtist}