feat: Implement colored blur backgrounds
This commit is contained in:
Lei Nelissen
@@ -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') }} />
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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')}
|
||||
|
||||
@@ -1,51 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Dimensions, View, StyleSheet } from 'react-native';
|
||||
import { View } from 'react-native';
|
||||
import useCurrentTrack from 'utility/useCurrentTrack';
|
||||
import styled from 'styled-components/native';
|
||||
import FastImage from 'react-native-fast-image';
|
||||
import useDefaultStyles from 'components/Colors';
|
||||
import Text from 'components/Text';
|
||||
import CoverImage from 'components/CoverImage';
|
||||
import { Header, SubHeader } from 'components/Typography';
|
||||
|
||||
const Screen = Dimensions.get('screen');
|
||||
|
||||
const Artwork = styled(FastImage)`
|
||||
border-radius: 10px;
|
||||
width: ${Screen.width * 0.8}px;
|
||||
height: ${Screen.width * 0.8}px;
|
||||
margin: 25px auto;
|
||||
const Artwork = styled(CoverImage)`
|
||||
margin: 0 auto 25px auto;
|
||||
`;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
artist: {
|
||||
fontWeight: 'bold',
|
||||
fontSize: 24,
|
||||
marginBottom: 12,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
marginBottom: 12,
|
||||
textAlign: 'center',
|
||||
paddingLeft: 20,
|
||||
paddingRight: 20,
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
export default function NowPlaying() {
|
||||
const { track } = useCurrentTrack();
|
||||
const defaultStyles = useDefaultStyles();
|
||||
|
||||
return (
|
||||
<View style={{ alignItems: 'center' }}>
|
||||
<View>
|
||||
<Artwork
|
||||
style={defaultStyles.imageBackground}
|
||||
source={{
|
||||
uri: track?.artwork as string | undefined,
|
||||
priority: FastImage.priority.high,
|
||||
}}
|
||||
src={track?.artwork as string}
|
||||
margin={80}
|
||||
/>
|
||||
<Text style={styles.artist}>{track?.artist}</Text>
|
||||
<Text style={styles.title}>{track?.title}</Text>
|
||||
<Header>{track?.title}</Header>
|
||||
<SubHeader>{track?.artist}{track?.album && ` — ${track.album}`}</SubHeader>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -6,12 +6,11 @@ import NowPlaying from './components/NowPlaying';
|
||||
import Queue from './components/Queue';
|
||||
import useDefaultStyles from 'components/Colors';
|
||||
import ConnectionNotice from './components/ConnectionNotice';
|
||||
import { DismissableScrollView } from 'components/DismissableScrollView';
|
||||
import { ScrollView } from 'react-native-gesture-handler';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
inner: {
|
||||
padding: 25,
|
||||
padding: 40,
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user