feat: add blurview to headers as well

leinelissen · Apr 22, 2023 · 1a5e4ae · 1a5e4ae
1 parent e2c1c03
commit 1a5e4ae
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/screens/Music/index.tsx b/src/screens/Music/index.tsx
@@ -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') }} />

diff --git a/src/screens/Music/stacks/Album.tsx b/src/screens/Music/stacks/Album.tsx
@@ -1,14 +1,14 @@
 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';
 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>();

diff --git a/src/screens/Music/stacks/Albums.tsx b/src/screens/Music/stacks/Albums.tsx
@@ -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>
+        </>
     );
 };
 

diff --git a/src/screens/Music/stacks/Playlist.tsx b/src/screens/Music/stacks/Playlist.tsx
@@ -1,14 +1,14 @@
 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';
 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>();

diff --git a/src/screens/Music/stacks/Playlists.tsx b/src/screens/Music/stacks/Playlists.tsx
@@ -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}`}

diff --git a/src/screens/Music/stacks/components/TrackListView.tsx b/src/screens/Music/stacks/components/TrackListView.tsx
@@ -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>

diff --git a/src/screens/Search/index.tsx b/src/screens/Search/index.tsx
@@ -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') }} />

diff --git a/src/screens/Settings/components/Cache.tsx b/src/screens/Settings/components/Cache.tsx
@@ -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>

diff --git a/src/screens/Settings/components/Library.tsx b/src/screens/Settings/components/Library.tsx
@@ -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} />

diff --git a/src/screens/Settings/components/Sentry.tsx b/src/screens/Settings/components/Sentry.tsx
@@ -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>
     );
 }