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

feat: add blurview to headers as well

Browse Source
This commit is contained in:
Lei Nelissen
2023-04-22 23:31:37 +02:00
parent e2c1c0300f
commit 1a5e4aee12
14 changed files with 105 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"@react-native-community/blur": "^4.3.0",
"@react-native-community/netinfo": "^9.3.6",
"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/elements": "^1.3.17",
"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.9.1",
"@react-navigation/stack": "^6.3.4",
@@ -3403,9 +3404,9 @@
}
},
"node_modules/@react-navigation/elements": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.6.tgz",
"integrity": "sha512-pNJ8R9JMga6SXOw6wGVN0tjmE6vegwPmJBL45SEMX2fqTfAk2ykDnlJHodRpHpAgsv0DaI8qX76z3A+aqKSU0w==",
"version": "1.3.17",
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.17.tgz",
"integrity": "sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA==",
"peerDependencies": {
"@react-navigation/native": "^6.0.0",
"react": "*",
@@ -19014,9 +19015,9 @@
}
},
"@react-navigation/elements": {
"version": "1.3.6",
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.6.tgz",
"integrity": "sha512-pNJ8R9JMga6SXOw6wGVN0tjmE6vegwPmJBL45SEMX2fqTfAk2ykDnlJHodRpHpAgsv0DaI8qX76z3A+aqKSU0w=="
"version": "1.3.17",
"resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.17.tgz",
"integrity": "sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA=="
},
"@react-navigation/native": {
"version": "6.0.13",

1
package.json
View File

@@ -17,6 +17,7 @@
"@react-native-community/blur": "^4.3.0",
"@react-native-community/netinfo": "^9.3.6",
"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/elements": "^1.3.17",
"@react-navigation/native": "^6.0.13",
"@react-navigation/native-stack": "^6.9.1",
"@react-navigation/stack": "^6.3.4",

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

@@ -3,7 +3,7 @@ import { createStackNavigator } from '@react-navigation/stack';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { THEME_COLOR } from 'CONSTANTS';
import { t } from '@localisation';
import useDefaultStyles from 'components/Colors';
import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
import { StackParams } from 'screens/types';
import NowPlaying from './overlays/NowPlaying';
@@ -12,6 +12,7 @@ import Albums from './stacks/Albums';
import Album from './stacks/Album';
import Playlists from './stacks/Playlists';
import Playlist from './stacks/Playlist';
import { StyleSheet } from 'react-native';
const Stack = createStackNavigator<StackParams>();
@@ -24,8 +25,10 @@ function MusicStack() {
headerTintColor: THEME_COLOR,
headerTitleStyle: defaultStyles.stackHeader,
cardStyle: defaultStyles.view,
headerTransparent: true,
headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
}}>
<Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums') }} />
<Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums'), headerShown: false }} />
<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') }} />

4
src/screens/Music/stacks/Album.tsx
View File

@@ -1,5 +1,4 @@
import React, { useCallback, useEffect } from 'react';
import { MusicStackParams } from '../types';
import { useRoute, RouteProp } from '@react-navigation/native';
import { useAppDispatch, useTypedSelector } from 'store';
import TrackListView from './components/TrackListView';
@@ -7,8 +6,9 @@ import { fetchTracksByAlbum } from 'store/music/actions';
import { differenceInDays } from 'date-fns';
import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
import { t } from '@localisation';
import { StackParams } from 'screens/types';
type Route = RouteProp<MusicStackParams, 'Album'>;
type Route = RouteProp<StackParams, 'Album'>;
const Album: React.FC = () => {
const { params: { id } } = useRoute<Route>();

11
src/screens/Music/stacks/Albums.tsx
View File

@@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useRef, ReactText, useMemo } from 'react';
import { useGetImage } from 'utility/JellyfinApi';
import { SafeAreaView, SectionList, View } from 'react-native';
import { SectionList, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { differenceInDays } from 'date-fns';
import { useAppDispatch, useTypedSelector } from 'store';
@@ -17,6 +17,7 @@ import { Album } from 'store/music/types';
import { Text } from 'components/Typography';
import { ShadowWrapper } from 'components/Shadow';
import { NavigationProp } from 'screens/types';
import { useNavigatorPadding } from 'utility/SafeNavigatorView';
const HeadingHeight = 50;
@@ -79,6 +80,8 @@ const GeneratedAlbumItem = React.memo(function GeneratedAlbumItem(props: Generat
});
const Albums: React.FC = () => {
const navigatorPadding = useNavigatorPadding();
// Retrieve data from store
const { entities: albums } = useTypedSelector((state) => state.music.albums);
const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
@@ -168,9 +171,11 @@ const Albums: React.FC = () => {
});
return (
<SafeAreaView>
<>
<AlphabetScroller onSelect={selectLetter} />
<SectionList
contentInset={{ top: navigatorPadding.paddingTop }}
contentContainerStyle={navigatorPadding}
sections={sections}
refreshing={isLoading}
onRefresh={retrieveData}
@@ -180,7 +185,7 @@ const Albums: React.FC = () => {
renderSectionHeader={generateSection}
renderItem={generateItem}
/>
</SafeAreaView>
</>
);
};

4
src/screens/Music/stacks/Playlist.tsx
View File

@@ -1,5 +1,4 @@
import React, { useCallback, useEffect } from 'react';
import { MusicStackParams } from '../types';
import { useRoute, RouteProp } from '@react-navigation/native';
import { useAppDispatch, useTypedSelector } from 'store';
import TrackListView from './components/TrackListView';
@@ -7,8 +6,9 @@ import { fetchTracksByPlaylist } from 'store/music/actions';
import { differenceInDays } from 'date-fns';
import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
import { t } from '@localisation';
import { StackParams } from 'screens/types';
type Route = RouteProp<MusicStackParams, 'Album'>;
type Route = RouteProp<StackParams, 'Album'>;
const Playlist: React.FC = () => {
const { params: { id } } = useRoute<Route>();

11
src/screens/Music/stacks/Playlists.tsx
View File

@@ -1,6 +1,6 @@
import React, { useCallback, useEffect, useRef, ReactText } from 'react';
import { useGetImage } from 'utility/JellyfinApi';
import { Text, View, FlatList, ListRenderItem } from 'react-native';
import { Text, View, FlatList, ListRenderItem, RefreshControl } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { differenceInDays } from 'date-fns';
import { useAppDispatch, useTypedSelector } from 'store';
@@ -11,6 +11,7 @@ import AlbumImage, { AlbumItem } from './components/AlbumImage';
import { EntityId } from '@reduxjs/toolkit';
import useDefaultStyles from 'components/Colors';
import { NavigationProp } from 'screens/types';
import { useNavigatorPadding } from 'utility/SafeNavigatorView';
interface GeneratedAlbumItemProps {
id: ReactText;
@@ -34,6 +35,8 @@ const GeneratedPlaylistItem = React.memo(function GeneratedPlaylistItem(props: G
});
const Playlists: React.FC = () => {
const navigatorPadding = useNavigatorPadding();
// Retrieve data from store
const { entities, ids } = useTypedSelector((state) => state.music.playlists);
const isLoading = useTypedSelector((state) => state.music.playlists.isLoading);
@@ -94,9 +97,11 @@ const Playlists: React.FC = () => {
return (
<FlatList
refreshControl={
<RefreshControl refreshing={isLoading} onRefresh={retrieveData} progressViewOffset={navigatorPadding.paddingTop} />
}
contentContainerStyle={navigatorPadding}
data={ids}
refreshing={isLoading}
onRefresh={retrieveData}
getItemLayout={getItemLayout}
ref={listRef}
keyExtractor={(item, index) => `${item}_${index}`}

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

@@ -25,6 +25,7 @@ import { Text } from 'components/Typography';
import CoverImage from 'components/CoverImage';
import ticksToDuration from 'utility/ticksToDuration';
import { useNavigatorPadding } from 'utility/SafeNavigatorView';
const styles = StyleSheet.create({
index: {
@@ -79,6 +80,7 @@ const TrackListView: React.FC<TrackListViewProps> = ({
listNumberingStyle = 'album',
}) => {
const defaultStyles = useDefaultStyles();
const navigatorPadding = useNavigatorPadding();
// Retrieve state
const tracks = useTypedSelector((state) => state.music.tracks.entities);
@@ -113,9 +115,9 @@ const TrackListView: React.FC<TrackListViewProps> = ({
return (
<ScrollView
style={defaultStyles.view}
contentContainerStyle={{ padding: 24, paddingTop: 32, paddingBottom: 64 }}
contentContainerStyle={[{ padding: 24, paddingTop: 32 + navigatorPadding.paddingTop, paddingBottom: 64 + navigatorPadding.paddingBottom } ]}
refreshControl={
<RefreshControl refreshing={isLoading} onRefresh={refresh} />
<RefreshControl refreshing={isLoading} onRefresh={refresh} progressViewOffset={navigatorPadding.paddingTop} />
}
>
<AlbumImageContainer>

6
src/screens/Search/index.tsx
View File

@@ -2,10 +2,11 @@ import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { THEME_COLOR } from 'CONSTANTS';
import { t } from '@localisation';
import useDefaultStyles from 'components/Colors';
import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
import { StackParams } from 'screens/types';
import Search from './stacks/Search';
import Album from 'screens/Music/stacks/Album';
import { StyleSheet } from 'react-native';
const Stack = createStackNavigator<StackParams>();
@@ -17,6 +18,9 @@ function SearchStack() {
headerTintColor: THEME_COLOR,
headerTitleStyle: defaultStyles.stackHeader,
cardStyle: defaultStyles.view,
headerTransparent: true,
headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
}}>
<Stack.Screen name="Search" component={Search} options={{ headerTitle: t('search'), headerShown: false }} />
<Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />

4
src/screens/Settings/components/Cache.tsx
View File

@@ -6,6 +6,7 @@ import Button from 'components/Button';
import styled from 'styled-components/native';
import { Text } from 'components/Typography';
import { useAppDispatch } from 'store';
import { useHeaderHeight } from '@react-navigation/elements';
const ClearCache = styled(Button)`
@@ -17,6 +18,7 @@ const Container = styled.ScrollView`
`;
export default function CacheSettings() {
const headerHeight = useHeaderHeight();
const dispatch = useAppDispatch();
const handleClearCache = useCallback(() => {
// Dispatch an action to reset the music subreducer state
@@ -27,7 +29,7 @@ export default function CacheSettings() {
}, [dispatch]);
return (
<Container>
<Container contentInset={{ top: headerHeight }}>
<Text>{t('setting-cache-description')}</Text>
<ClearCache title={t('reset-cache')} onPress={handleClearCache} />
</Container>

4
src/screens/Settings/components/Library.tsx
View File

@@ -7,6 +7,7 @@ import { useTypedSelector } from 'store';
import { t } from '@localisation';
import Button from 'components/Button';
import { Text } from 'components/Typography';
import { useHeaderHeight } from '@react-navigation/elements';
const InputContainer = styled.View`
@@ -25,12 +26,13 @@ const Container = styled.ScrollView`
export default function LibrarySettings() {
const defaultStyles = useDefaultStyles();
const headerHeight = useHeaderHeight();
const { jellyfin } = useTypedSelector(state => state.settings);
const navigation = useNavigation<NavigationProp>();
const handleSetLibrary = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
return (
<Container>
<Container contentInset={{ top: headerHeight }}>
<InputContainer>
<Text style={defaultStyles.text}>{t('jellyfin-server-url')}</Text>
<Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={defaultStyles.input} />

33
src/screens/Settings/components/Sentry.tsx
View File

@@ -9,8 +9,10 @@ import ChevronIcon from 'assets/icons/chevron-right.svg';
import { THEME_COLOR } from 'CONSTANTS';
import useDefaultStyles, { DefaultStylesProvider } from 'components/Colors';
import { t } from '@localisation';
import { ScrollView } from 'react-native';
import { useHeaderHeight } from '@react-navigation/elements';
const Container = styled.ScrollView`
const Container = styled.View`
padding: 24px;
`;
@@ -25,7 +27,9 @@ const HeaderContainer = styled.View<{ isActive?: boolean }>`
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 16px 0 4px 0;
padding: 16px 24px;
border-radius: 8px;
overflow: hidden;
${props => props.isActive && css`
background-color: ${THEME_COLOR};
@@ -37,7 +41,8 @@ const HeaderText = styled(Text)`
`;
const ContentContainer = styled.View`
margin-top: 8px;
margin-bottom: 8px;
padding: 8px 24px;
`;
const Label = styled(Text)`
@@ -94,6 +99,7 @@ function renderContent(question: Question) {
export default function Sentry() {
const defaultStyles = useDefaultStyles();
const headerHeight = useHeaderHeight();
const [isReportingEnabled, setReporting] = useState(isSentryEnabled);
const [activeSections, setActiveSections] = useState<number[]>([]);
@@ -104,14 +110,17 @@ export default function Sentry() {
});
return (
<Container>
<Text>{t('error-reporting-description')}</Text>
<Text />
<Text>{t('error-reporting-rationale')}</Text>
<SwitchContainer>
<Label>{t('error-reporting')}</Label>
<Switch value={isReportingEnabled} onValueChange={toggleSwitch} />
</SwitchContainer>
<ScrollView contentInset={{ top: headerHeight }}>
<Container>
<Text>{t('error-reporting-description')}</Text>
<Text />
<Text>{t('error-reporting-rationale')}</Text>
<SwitchContainer>
<Label>{t('error-reporting')}</Label>
<Switch value={isReportingEnabled} onValueChange={toggleSwitch} />
</SwitchContainer>
</Container>
<Accordion
sections={questions}
renderHeader={renderHeader}
@@ -120,6 +129,6 @@ export default function Sentry() {
onChange={setActiveSections}
underlayColor={defaultStyles.activeBackground.backgroundColor}
/>
</Container>
</ScrollView>
);
}

22
src/screens/Settings/index.tsx
View File

@@ -1,8 +1,8 @@
import React, { useCallback } from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import { ScrollView, StyleSheet } from 'react-native';
import Library from './components/Library';
import Cache from './components/Cache';
import useDefaultStyles from 'components/Colors';
import useDefaultStyles, { ColoredBlurView } from 'components/Colors';
import { t } from '@localisation';
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';
@@ -10,20 +10,20 @@ import ListButton from 'components/ListButton';
import { THEME_COLOR } from 'CONSTANTS';
import Sentry from './components/Sentry';
import { SettingsNavigationProp } from './types';
import { useHeaderHeight } from '@react-navigation/elements';
export function SettingsList() {
const headerHeight = useHeaderHeight();
const navigation = useNavigation<SettingsNavigationProp>();
const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);
return (
<ScrollView>
<SafeAreaView>
<ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
<ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
<ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
</SafeAreaView>
<ScrollView contentInset={{ top: headerHeight }}>
<ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
<ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
<ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
</ScrollView>
);
}
@@ -34,9 +34,11 @@ export default function Settings() {
const defaultStyles = useDefaultStyles();
return (
<Stack.Navigator initialRouteName="SettingList" screenOptions={{
<Stack.Navigator initialRouteName="SettingList" screenOptions={{
headerTintColor: THEME_COLOR,
headerTitleStyle: defaultStyles.stackHeader
headerTitleStyle: defaultStyles.stackHeader,
headerTransparent: true,
headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
}}>
<Stack.Screen name="SettingList" component={SettingsList} options={{ headerTitle: t('settings') }} />
<Stack.Screen name="Library" component={Library} options={{ headerTitle: t('jellyfin-library') }} />

24
src/utility/SafeNavigatorView.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { useHeaderHeight } from '@react-navigation/elements';
import React from 'react';
import { View, ViewProps } from 'react-native';
import useCurrentTrack from './useCurrentTrack';
export function useNavigatorPadding() {
const headerHeight = useHeaderHeight();
const { index } = useCurrentTrack();
return {
paddingTop: headerHeight,
paddingBottom: index ? 68 : 0
};
}
function SafeNavigatorView({ style, ...props }: ViewProps) {
const headerHeight = useHeaderHeight();
return (
<View {...props} style={[{ paddingTop: headerHeight }, style]} />
);
}
export default SafeNavigatorView;