Implement new styles
This commit is contained in:
Lei Nelissen
@@ -9,6 +9,7 @@ import { t } from '@localisation';
|
||||
import useDefaultStyles from 'components/Colors';
|
||||
import Playlists from './stacks/Playlists';
|
||||
import Playlist from './stacks/Playlist';
|
||||
import NowPlaying from './overlays/NowPlaying';
|
||||
|
||||
const Stack = createStackNavigator<MusicStackParams>();
|
||||
|
||||
@@ -16,16 +17,19 @@ function MusicStack() {
|
||||
const defaultStyles = useDefaultStyles();
|
||||
|
||||
return (
|
||||
<Stack.Navigator initialRouteName="RecentAlbums" screenOptions={{
|
||||
headerTintColor: THEME_COLOR,
|
||||
headerTitleStyle: defaultStyles.stackHeader
|
||||
}}>
|
||||
<Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums') }} />
|
||||
<Stack.Screen name="Albums" component={Albums} options={{ headerTitle: t('albums') }} />
|
||||
<Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />
|
||||
<Stack.Screen name="Playlists" component={Playlists} options={{ headerTitle: t('playlists') }} />
|
||||
<Stack.Screen name="Playlist" component={Playlist} options={{ headerTitle: t('playlist') }} />
|
||||
</Stack.Navigator>
|
||||
<>
|
||||
<Stack.Navigator initialRouteName="RecentAlbums" screenOptions={{
|
||||
headerTintColor: THEME_COLOR,
|
||||
headerTitleStyle: defaultStyles.stackHeader
|
||||
}}>
|
||||
<Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums') }} />
|
||||
<Stack.Screen name="Albums" component={Albums} options={{ headerTitle: t('albums') }} />
|
||||
<Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />
|
||||
<Stack.Screen name="Playlists" component={Playlists} options={{ headerTitle: t('playlists') }} />
|
||||
<Stack.Screen name="Playlist" component={Playlist} options={{ headerTitle: t('playlist') }} />
|
||||
</Stack.Navigator>
|
||||
<NowPlaying />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
172
src/screens/Music/overlays/NowPlaying/index.tsx
Normal file
172
src/screens/Music/overlays/NowPlaying/index.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { ActivityIndicator, Animated, Dimensions, Easing, Pressable, View } from 'react-native';
|
||||
import FastImage from 'react-native-fast-image';
|
||||
import styled, { css } from 'styled-components/native';
|
||||
|
||||
import PlayIcon from 'assets/icons/play.svg';
|
||||
import PauseIcon from 'assets/icons/pause.svg';
|
||||
import useCurrentTrack from 'utility/useCurrentTrack';
|
||||
import TrackPlayer, { State, usePlaybackState, useProgress } from 'react-native-track-player';
|
||||
import { THEME_COLOR } from 'CONSTANTS';
|
||||
import { Shadow } from 'react-native-shadow-2';
|
||||
import usePrevious from 'utility/usePrevious';
|
||||
import Text from 'components/Text';
|
||||
import { ColoredBlurView } from 'components/Colors';
|
||||
|
||||
const NOW_PLAYING_POPOVER_MARGIN = 6;
|
||||
const NOW_PLAYING_POPOVER_WIDTH = Dimensions.get('screen').width - 2 * NOW_PLAYING_POPOVER_MARGIN;
|
||||
|
||||
const PopoverPosition = css`
|
||||
position: absolute;
|
||||
bottom: ${NOW_PLAYING_POPOVER_MARGIN}px;
|
||||
left: ${NOW_PLAYING_POPOVER_MARGIN}px;
|
||||
right: ${NOW_PLAYING_POPOVER_MARGIN}px;
|
||||
border-radius: 8px;
|
||||
overflow: visible;
|
||||
`;
|
||||
|
||||
const Container = styled.View`
|
||||
${PopoverPosition};
|
||||
`;
|
||||
|
||||
const InnerContainer = styled.Pressable`
|
||||
padding: 12px;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const ShadowOverlay = styled.View`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
`;
|
||||
|
||||
const Cover = styled(FastImage)`
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 4px;
|
||||
margin-right: 12px;
|
||||
`;
|
||||
|
||||
const TrackNameContainer = styled.View`
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
const ActionButton = styled.Pressable`
|
||||
margin-right: 8px;
|
||||
`;
|
||||
|
||||
interface ProgressTrackProps {
|
||||
opacity?: number;
|
||||
}
|
||||
|
||||
const ProgressTrack = styled(Animated.View)<ProgressTrackProps>`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: ${THEME_COLOR};
|
||||
opacity: ${(props) => props.opacity || 1};
|
||||
border-radius: 99px;
|
||||
`;
|
||||
|
||||
function SelectActionButton() {
|
||||
const state = usePlaybackState();
|
||||
|
||||
switch(state) {
|
||||
case State.Playing:
|
||||
return (
|
||||
<Pressable onPress={TrackPlayer.pause}>
|
||||
<PauseIcon fill="black" height={18} width={18} />
|
||||
</Pressable>
|
||||
);
|
||||
case State.Stopped:
|
||||
case State.Paused:
|
||||
return (
|
||||
<Pressable onPress={TrackPlayer.play}>
|
||||
<PlayIcon fill="black" height={18} width={18} />
|
||||
</Pressable>
|
||||
);
|
||||
// @ts-expect-error For some reason buffering isn't stated right in the types
|
||||
case 'buffering':
|
||||
case State.Buffering:
|
||||
case State.Connecting:
|
||||
return (
|
||||
<Pressable onPress={TrackPlayer.stop}>
|
||||
<ActivityIndicator />
|
||||
</Pressable>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function calculateProgressTranslation(position: number, reference: number) {
|
||||
const completion = position / reference;
|
||||
return (1 - (completion || 0)) * -1 * NOW_PLAYING_POPOVER_WIDTH;
|
||||
}
|
||||
|
||||
function NowPlaying() {
|
||||
const { index, track } = useCurrentTrack();
|
||||
const { buffered, duration, position } = useProgress();
|
||||
const previousIndex = usePrevious(index);
|
||||
|
||||
const bufferAnimation = useRef(new Animated.Value(0));
|
||||
const progressAnimation = useRef(new Animated.Value(0));
|
||||
|
||||
useEffect(() => {
|
||||
const hasChangedTrack = previousIndex !== index || duration === 0;
|
||||
|
||||
Animated.timing(bufferAnimation.current, {
|
||||
toValue: calculateProgressTranslation(buffered, duration),
|
||||
duration: hasChangedTrack ? 0 : 500,
|
||||
useNativeDriver: true,
|
||||
easing: Easing.ease,
|
||||
}).start();
|
||||
Animated.timing(progressAnimation.current, {
|
||||
toValue: calculateProgressTranslation(position, duration),
|
||||
duration: hasChangedTrack ? 0 : 500,
|
||||
useNativeDriver: true,
|
||||
}).start();
|
||||
}, [buffered, duration, position, index, previousIndex]);
|
||||
|
||||
if (!track) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<ShadowOverlay pointerEvents='none'>
|
||||
<Shadow distance={30} viewStyle={{ alignSelf: 'stretch', flexBasis: '100%' }} startColor="#00000017">
|
||||
<View style={{ flex: 1, borderRadius: 8 }} />
|
||||
</Shadow>
|
||||
</ShadowOverlay>
|
||||
<ColoredBlurView style={{ borderRadius: 8 }}>
|
||||
<InnerContainer>
|
||||
<Cover source={{ uri: (track.artwork || '') as string }} />
|
||||
<TrackNameContainer>
|
||||
<Text>{track.title}</Text>
|
||||
<Text style={{ opacity: 0.5 }}>{track.artist}{track.album ? ` — ${track.album}` : ''}</Text>
|
||||
</TrackNameContainer>
|
||||
<ActionButton>
|
||||
<SelectActionButton />
|
||||
</ActionButton>
|
||||
<ProgressTrack
|
||||
style={{ transform: [{ translateX: bufferAnimation.current }]}}
|
||||
opacity={0.15}
|
||||
/>
|
||||
<ProgressTrack
|
||||
style={{ transform: [{ translateX: progressAnimation.current }]}}
|
||||
/>
|
||||
</InnerContainer>
|
||||
</ColoredBlurView>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
export default NowPlaying;
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import { Text, ScrollView, Dimensions, RefreshControl, StyleSheet, View } from 'react-native';
|
||||
import { ScrollView, Dimensions, RefreshControl, StyleSheet, View, Image } from 'react-native';
|
||||
import { useGetImage } from 'utility/JellyfinApi';
|
||||
import styled, { css } from 'styled-components/native';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
@@ -22,41 +22,43 @@ import Trash from 'assets/icons/trash.svg';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { queueTrackForDownload, removeDownloadedTrack } from 'store/downloads/actions';
|
||||
import { selectDownloadedTracks } from 'store/downloads/selectors';
|
||||
import { Header, SubHeader } from 'components/Typography';
|
||||
import Text from 'components/Text';
|
||||
import { Shadow } from 'react-native-shadow-2';
|
||||
|
||||
const Screen = Dimensions.get('screen');
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
name: {
|
||||
fontSize: 36,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
artist: {
|
||||
fontSize: 24,
|
||||
opacity: 0.5,
|
||||
marginBottom: 12
|
||||
},
|
||||
index: {
|
||||
width: 20,
|
||||
opacity: 0.5,
|
||||
marginRight: 5
|
||||
}
|
||||
width: 16,
|
||||
marginRight: 8
|
||||
},
|
||||
activeText: {
|
||||
color: THEME_COLOR,
|
||||
fontWeight: '500',
|
||||
},
|
||||
});
|
||||
|
||||
const AlbumImage = styled(FastImage)`
|
||||
border-radius: 10px;
|
||||
width: ${Screen.width * 0.6}px;
|
||||
height: ${Screen.width * 0.6}px;
|
||||
margin: 10px auto;
|
||||
border-radius: 12px;
|
||||
height: ${Screen.width - 112}px;
|
||||
width: ${Screen.width - 112}px;
|
||||
`;
|
||||
|
||||
const TrackContainer = styled.View<{isPlaying: boolean}>`
|
||||
padding: 15px 4px;
|
||||
border-bottom-width: 1px;
|
||||
const AlbumImageContainer = styled.View`
|
||||
margin: 0 12px 24px 12px;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const TrackContainer = styled.View<{ isPlaying: boolean }>`
|
||||
padding: 12px 4px;
|
||||
flex-direction: row;
|
||||
border-radius: 6px;
|
||||
|
||||
${props => props.isPlaying && css`
|
||||
margin: 0 -20px;
|
||||
padding: 15px 24px;
|
||||
margin: 0 -12px;
|
||||
padding: 12px 16px;
|
||||
`}
|
||||
`;
|
||||
|
||||
@@ -119,14 +121,20 @@ const TrackListView: React.FC<TrackListViewProps> = ({
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
contentContainerStyle={{ padding: 20, paddingBottom: 50 }}
|
||||
style={defaultStyles.view}
|
||||
contentContainerStyle={{ padding: 32, paddingTop: 32, paddingBottom: 64 }}
|
||||
refreshControl={
|
||||
<RefreshControl refreshing={isLoading} onRefresh={refresh} />
|
||||
}
|
||||
>
|
||||
<AlbumImage source={{ uri: getImage(entityId) }} style={defaultStyles.imageBackground} />
|
||||
<Text style={[ defaultStyles.text, styles.name ]} >{title}</Text>
|
||||
<Text style={[ defaultStyles.text, styles.artist ]}>{artist}</Text>
|
||||
<AlbumImageContainer>
|
||||
<Shadow radius={12} distance={48} startColor="#00000017">
|
||||
<AlbumImage source={{ uri: getImage(entityId) }} style={defaultStyles.imageBackground} />
|
||||
</Shadow>
|
||||
</AlbumImageContainer>
|
||||
<Image source={{ uri: getImage(entityId) }} blurRadius={100} style={{ height: 120, width: 120 }} />
|
||||
<Header>{title}</Header>
|
||||
<SubHeader>{artist}</SubHeader>
|
||||
<WrappableButtonRow>
|
||||
<WrappableButton title={playButtonText} icon={Play} onPress={playEntity} />
|
||||
<WrappableButton title={shuffleButtonText} icon={Shuffle} onPress={shuffleEntity} />
|
||||
@@ -145,28 +153,29 @@ const TrackListView: React.FC<TrackListViewProps> = ({
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
defaultStyles.text,
|
||||
styles.index,
|
||||
currentTrack?.backendId === trackId && {
|
||||
color: THEME_COLOR,
|
||||
opacity: 1
|
||||
}
|
||||
{ opacity: 0.25 },
|
||||
currentTrack?.backendId === trackId && styles.activeText
|
||||
]}
|
||||
>
|
||||
{listNumberingStyle === 'index'
|
||||
? i + 1
|
||||
: tracks[trackId]?.IndexNumber}
|
||||
</Text>
|
||||
<Text
|
||||
style={currentTrack?.backendId === trackId
|
||||
? { color: THEME_COLOR, fontWeight: '700' }
|
||||
: defaultStyles.text
|
||||
}
|
||||
>
|
||||
<Text style={currentTrack?.backendId === trackId && styles.activeText}>
|
||||
{tracks[trackId]?.Name}
|
||||
</Text>
|
||||
<View style={{ marginLeft: 'auto' }}>
|
||||
<DownloadIcon trackId={trackId} />
|
||||
<View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
|
||||
<Text
|
||||
style={[
|
||||
{ marginRight: 12, opacity: 0.25 },
|
||||
currentTrack?.backendId === trackId && styles.activeText
|
||||
]}
|
||||
>
|
||||
{Math.round(tracks[trackId]?.RunTimeTicks / 10000000 / 60)}
|
||||
:{Math.round(tracks[trackId]?.RunTimeTicks / 10000000 % 60).toString().padStart(2, '0')}
|
||||
</Text>
|
||||
<DownloadIcon trackId={trackId} fill={currentTrack?.backendId === trackId ? `${THEME_COLOR}44` : undefined} />
|
||||
</View>
|
||||
</TrackContainer>
|
||||
</TouchableHandler>
|
||||
|
||||
Reference in New Issue
Block a user