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

Implement new styles

Browse Source
This commit is contained in:
Lei Nelissen
2022-04-09 15:48:01 +02:00
parent c4d83d29d8
commit 7fb7fc1925
17 changed files with 369 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Button.tsx
View File

@@ -14,7 +14,7 @@ interface ButtonProps extends PressableProps {
}
const BaseButton = styled.Pressable`
padding: 16px;
padding: 12px;
border-radius: 8px;
flex-direction: row;
align-items: center;
@@ -28,7 +28,8 @@ const BaseButton = styled.Pressable`
const ButtonText = styled.Text<{ active?: boolean }>`
color: ${THEME_COLOR};
font-weight: 600;
font-weight: 500;
font-size: 14px;
${props => props.active && css`
color: white;

27
src/components/Colors.ts → src/components/Colors.tsx
View File

@@ -1,7 +1,8 @@
import { BlurView, BlurViewProperties } from '@react-native-community/blur';
import { THEME_COLOR } from 'CONSTANTS';
import React from 'react';
import React, { PropsWithChildren } from 'react';
import { useContext } from 'react';
import { ColorSchemeName, StyleSheet } from 'react-native';
import { ColorSchemeName, StyleSheet, useColorScheme } from 'react-native';
/**
* Function for generating both the dark and light stylesheets, so that they
@@ -11,12 +12,20 @@ function generateStyles(scheme: ColorSchemeName) {
return StyleSheet.create({
text: {
color: scheme === 'dark' ? '#fff' : '#000',
fontSize: 14,
fontFamily: 'Inter',
},
textHalfOpacity: {
color: scheme === 'dark' ? '#ffffff88' : '#00000088',
fontSize: 14,
// fontFamily: 'Inter',
},
textQuarterOpacity: {
color: scheme === 'dark' ? '#ffffff44' : '#00000044',
fontSize: 14,
},
view: {
backgroundColor: scheme === 'dark' ? '#111' : '#f6f6f6',
backgroundColor: scheme === 'dark' ? '#111' : '#fff',
},
border: {
borderColor: scheme === 'dark' ? '#262626' : '#ddd',
@@ -25,7 +34,7 @@ function generateStyles(scheme: ColorSchemeName) {
backgroundColor: `${THEME_COLOR}${scheme === 'dark' ? '26' : '16'}`,
},
imageBackground: {
backgroundColor: scheme === 'dark' ? '#333' : '#ddd',
backgroundColor: scheme === 'dark' ? '#161616' : '#eee',
},
modal: {
backgroundColor: scheme === 'dark' ? '#22222200' : '#eeeeee00',
@@ -34,7 +43,7 @@ function generateStyles(scheme: ColorSchemeName) {
backgroundColor: scheme === 'dark' ? '#000' : '#fff',
},
button: {
backgroundColor: scheme === 'dark' ? '#161616' : '#e6e6e6',
backgroundColor: scheme === 'dark' ? '#161616' : '#eee',
},
input: {
backgroundColor: scheme === 'dark' ? '#161616' : '#e6e6e6',
@@ -77,4 +86,12 @@ export function DefaultStylesProvider(props: DefaultStylesProviderProps) {
const defaultStyles = useDefaultStyles();
return props.children(defaultStyles);
}
export function ColoredBlurView(props: PropsWithChildren<BlurViewProperties>) {
const scheme = useColorScheme();
return (
<BlurView {...props} blurType={scheme === 'dark' ? 'extraDark' : 'xlight'} />
);
}

2
src/components/DownloadIcon.tsx
View File

@@ -30,7 +30,7 @@ const IconOverlay = styled.View`
function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) {
// determine styles
const defaultStyles = useDefaultStyles();
const iconFill = fill || defaultStyles.textHalfOpacity.color;
const iconFill = fill || defaultStyles.textQuarterOpacity.color;
// Get download icon from state
const entity = useTypedSelector((state) => state.downloads.entities[trackId]);

13
src/components/Typography.ts
View File

@@ -2,13 +2,14 @@ import styled from 'styled-components/native';
import Text from './Text';
export const Header = styled(Text)`
margin: 24px 0 12px 0;
font-size: 36px;
font-weight: bold;
margin: 0 0 6px 0;
font-size: 24px;
font-weight: 400;
`;
export const SubHeader = styled(Text)`
font-size: 24px;
margin: 12px 0;
font-weight: 500;
font-size: 14px;
margin: 0 0 6px 0;
font-weight: 400;
opacity: 0.5;
`;

2
src/components/WrappableButtonRow.tsx
View File

@@ -5,7 +5,7 @@ export const WrappableButtonRow = styled.View`
flex: 0 0 auto;
flex-direction: row;
flex-wrap: wrap;
margin: 6px -2px;
margin: 24px -2px;
`;
export const WrappableButton = styled(Button)`

24
src/screens/Music/index.tsx
View File

@@ -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
View 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;

89
src/screens/Music/stacks/components/TrackListView.tsx
View File

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

2
src/utility/formatBytes.ts
View File

@@ -5,7 +5,7 @@ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
* Convert a number of bytes to a human-readable string
* CREDIT: https://gist.github.com/zentala/1e6f72438796d74531803cc3833c039c
*/
export default function formatBytes(bytes: number, decimals: number = 2) {
export default function formatBytes(bytes: number, decimals: number = 1) {
if (bytes === 0) {
return '0 Bytes';
}

13
src/utility/usePrevious.ts Normal file
View File

@@ -0,0 +1,13 @@
import { useRef, useEffect } from 'react';
export default function usePrevious<T = unknown>(value: T) {
// The ref object is a generic container whose current property is mutable ...
// ... and can hold any value, similar to an instance property on a class
const ref = useRef<T>();
// Store current value in ref
useEffect(() => {
ref.current = value;
}, [value]); // Only re-run if value changes
// Return previous value (happens before update in useEffect above)
return ref.current;
}