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

11
src/components/Colors.tsx
View File

@@ -2,7 +2,9 @@ import { BlurView, BlurViewProperties } from '@react-native-community/blur';
import { THEME_COLOR } from 'CONSTANTS';
import React, { PropsWithChildren } from 'react';
import { useContext } from 'react';
import { ColorSchemeName, StyleSheet, useColorScheme } from 'react-native';
import { ColorSchemeName, Platform, StyleSheet, useColorScheme } from 'react-native';
const majorPlatformVersion = typeof Platform.Version === 'string' ? parseInt(Platform.Version, 10) : Platform.Version;
/**
* Function for generating both the dark and light stylesheets, so that they
@@ -92,6 +94,11 @@ export function ColoredBlurView(props: PropsWithChildren<BlurViewProperties>) {
const scheme = useColorScheme();
return (
<BlurView {...props} blurType={scheme === 'dark' ? 'extraDark' : 'xlight'} />
<BlurView
{...props}
blurType={Platform.OS === 'ios' && majorPlatformVersion >= 13
? 'material'
: scheme === 'dark' ? 'extraDark' : 'xlight'
} />
);
}

85
src/components/CoverImage.tsx Normal file
View File

@@ -0,0 +1,85 @@
import React, { useMemo } from 'react';
import { Dimensions, ViewProps } from 'react-native';
import { Canvas, Blur, Image as SkiaImage, useImage, Offset, Mask, RoundedRect, Shadow } from '@shopify/react-native-skia';
import useDefaultStyles from './Colors';
import styled from 'styled-components/native';
const Screen = Dimensions.get('screen');
const Container = styled.View<{ size: number }>`
width: ${(props) => props.size}px;
height: ${(props) => props.size}px;
position: relative;
`;
const BlurContainer = styled(Canvas)<{ size: number, offset: number }>`
position: absolute;
left: -${(props) => props.offset}px;
top: -${(props) => props.offset}px;
width: ${(props) => props.size}px;
height: ${(props) => props.size}px;
z-index: 2;
`;
interface Props {
blurRadius?: number;
opacity?: number;
margin?: number;
radius?: number;
style?: ViewProps['style'];
src: string;
}
/**
* This will take a cover image, and apply shadows and a really nice background
* blur to the image in question. Additionally, we'll add some margin and radius
* to the corners.
*/
function CoverImage({
blurRadius = 256,
opacity = 0.85,
margin = 112,
radius = 12,
style,
src,
}: Props) {
const defaultStyles = useDefaultStyles();
const image = useImage(src || '');
const { canvasSize, imageSize } = useMemo(() => {
const imageSize = Screen.width - margin;
const canvasSize = imageSize + blurRadius * 2;
return { imageSize, canvasSize };
}, [blurRadius, margin]);
return (
<Container size={imageSize} style={style}>
<BlurContainer size={canvasSize} offset={blurRadius}>
<RoundedRect x={blurRadius} y={blurRadius} width={imageSize} height={imageSize} color={defaultStyles.imageBackground.backgroundColor} r={12}>
<Shadow dx={0} dy={1} blur={2} color="#0000000d" />
<Shadow dx={0} dy={2} blur={4} color="#0000000d" />
<Shadow dx={0} dy={4} blur={8} color="#0000000d" />
<Shadow dx={0} dy={8} blur={16} color="#0000000d" />
<Shadow dx={0} dy={16} blur={32} color="#0000000d" />
</RoundedRect>
{image ? (
<>
<SkiaImage image={image} width={imageSize} height={imageSize} opacity={opacity}>
<Offset x={blurRadius} y={blurRadius} />
<Blur blur={blurRadius / 2} />
</SkiaImage>
<Mask mask={<RoundedRect width={imageSize} height={imageSize} x={blurRadius} y={blurRadius} r={radius} />}>
{image ? (
<SkiaImage image={image} width={imageSize} height={imageSize}>
<Offset x={blurRadius} y={blurRadius} />
</SkiaImage>
) : null}
</Mask>
</>
) : null}
</BlurContainer>
</Container>
);
}
export default CoverImage;

26
src/components/DismissableScrollView.tsx
View File

@@ -1,26 +0,0 @@
import {GestureHandlerRefContext} from '@react-navigation/stack';
import React, {PropsWithChildren, useCallback, useState} from 'react';
import {ScrollViewProps} from 'react-native';
import {ScrollView} from 'react-native-gesture-handler';
export const DismissableScrollView = (
props: PropsWithChildren<ScrollViewProps>,
) => {
const [scrolledTop, setScrolledTop] = useState(true);
const onScroll = useCallback(({nativeEvent}) => {
console.log(nativeEvent.contentOffset);
setScrolledTop(nativeEvent.contentOffset.y <= 0);
}, []);
return (
<GestureHandlerRefContext.Consumer>
{(ref) => (
<ScrollView
waitFor={scrolledTop ? ref : undefined}
onScroll={onScroll}
scrollEventThrottle={16}
{...props}
/>
)}
</GestureHandlerRefContext.Consumer>
);
};

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')}

46
src/screens/modals/Player/components/NowPlaying.tsx
View File

@@ -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>
);
}

3
src/screens/modals/Player/index.tsx
View File

@@ -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,
}
});