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

feat: Implement colored blur backgrounds

Browse Source
This commit is contained in:
Lei Nelissen
2022-05-04 22:46:19 +02:00
parent 76f2db19e5
commit f48d248144
11 changed files with 331 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,8 @@ function MusicStack() {
<>
<Stack.Navigator initialRouteName="RecentAlbums" screenOptions={{
headerTintColor: THEME_COLOR,
headerTitleStyle: defaultStyles.stackHeader
headerTitleStyle: defaultStyles.stackHeader,
cardStyle: defaultStyles.view,
}}>
<Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums') }} />
<Stack.Screen name="Albums" component={Albums} options={{ headerTitle: t('albums') }} />

7
src/screens/Music/overlays/NowPlaying/index.tsx
View File

@@ -11,7 +11,7 @@ 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';
import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
import { useNavigation } from '@react-navigation/native';
const NOW_PLAYING_POPOVER_MARGIN = 6;
@@ -78,19 +78,20 @@ const ProgressTrack = styled(Animated.View)<ProgressTrackProps>`
function SelectActionButton() {
const state = usePlaybackState();
const defaultStyles = useDefaultStyles();
switch(state) {
case State.Playing:
return (
<Pressable onPress={TrackPlayer.pause}>
<PauseIcon fill="black" height={18} width={18} />
<PauseIcon fill={defaultStyles.text.color} height={18} width={18} />
</Pressable>
);
case State.Stopped:
case State.Paused:
return (
<Pressable onPress={TrackPlayer.play}>
<PlayIcon fill="black" height={18} width={18} />
<PlayIcon fill={defaultStyles.text.color} height={18} width={18} />
</Pressable>
);
// @ts-expect-error For some reason buffering isn't stated right in the types

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

@@ -1,9 +1,8 @@
import React, { useCallback } from 'react';
import { ScrollView, Dimensions, RefreshControl, StyleSheet, View, Image } from 'react-native';
import { ScrollView, RefreshControl, StyleSheet, View } from 'react-native';
import { useGetImage } from 'utility/JellyfinApi';
import styled, { css } from 'styled-components/native';
import { useNavigation } from '@react-navigation/native';
import FastImage from 'react-native-fast-image';
import { useTypedSelector } from 'store';
import { THEME_COLOR } from 'CONSTANTS';
import TouchableHandler from 'components/TouchableHandler';
@@ -24,9 +23,7 @@ import { queueTrackForDownload, removeDownloadedTrack } from 'store/downloads/ac
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');
import CoverImage from 'components/CoverImage';
const styles = StyleSheet.create({
index: {
@@ -39,12 +36,6 @@ const styles = StyleSheet.create({
},
});
const AlbumImage = styled(FastImage)`
border-radius: 12px;
height: ${Screen.width - 112}px;
width: ${Screen.width - 112}px;
`;
const AlbumImageContainer = styled.View`
margin: 0 12px 24px 12px;
flex: 1;
@@ -122,17 +113,14 @@ const TrackListView: React.FC<TrackListViewProps> = ({
return (
<ScrollView
style={defaultStyles.view}
contentContainerStyle={{ padding: 32, paddingTop: 32, paddingBottom: 64 }}
contentContainerStyle={{ padding: 24, paddingTop: 32, paddingBottom: 64 }}
refreshControl={
<RefreshControl refreshing={isLoading} onRefresh={refresh} />
}
>
<AlbumImageContainer>
<Shadow radius={12} distance={48} startColor="#00000017">
<AlbumImage source={{ uri: getImage(entityId) }} style={defaultStyles.imageBackground} />
</Shadow>
<CoverImage src={getImage(entityId)} />
</AlbumImageContainer>
<Image source={{ uri: getImage(entityId) }} blurRadius={100} style={{ height: 120, width: 120 }} />
<Header>{title}</Header>
<SubHeader>{artist}</SubHeader>
<WrappableButtonRow>
@@ -157,12 +145,20 @@ const TrackListView: React.FC<TrackListViewProps> = ({
{ opacity: 0.25 },
currentTrack?.backendId === trackId && styles.activeText
]}
numberOfLines={1}
>
{listNumberingStyle === 'index'
? i + 1
: tracks[trackId]?.IndexNumber}
</Text>
<Text style={currentTrack?.backendId === trackId && styles.activeText}>
<Text
style={{
...currentTrack?.backendId === trackId && styles.activeText,
flexShrink: 1,
marginRight: 4,
}}
numberOfLines={1}
>
{tracks[trackId]?.Name}
</Text>
<View style={{ marginLeft: 'auto', flexDirection: 'row' }}>
@@ -171,6 +167,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
{ marginRight: 12, opacity: 0.25 },
currentTrack?.backendId === trackId && styles.activeText
]}
numberOfLines={1}
>
{Math.round(tracks[trackId]?.RunTimeTicks / 10000000 / 60)}
:{Math.round(tracks[trackId]?.RunTimeTicks / 10000000 % 60).toString().padStart(2, '0')}