From 1a5e4aee12670c8835fb9cd34eadcca41b9bb16d Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Sat, 22 Apr 2023 23:31:37 +0200 Subject: [PATCH] feat: add blurview to headers as well --- package-lock.json | 13 ++++---- package.json | 1 + src/screens/Music/index.tsx | 7 ++-- src/screens/Music/stacks/Album.tsx | 4 +-- src/screens/Music/stacks/Albums.tsx | 11 +++++-- src/screens/Music/stacks/Playlist.tsx | 4 +-- src/screens/Music/stacks/Playlists.tsx | 11 +++++-- .../Music/stacks/components/TrackListView.tsx | 6 ++-- src/screens/Search/index.tsx | 6 +++- src/screens/Settings/components/Cache.tsx | 4 ++- src/screens/Settings/components/Library.tsx | 4 ++- src/screens/Settings/components/Sentry.tsx | 33 ++++++++++++------- src/screens/Settings/index.tsx | 22 +++++++------ src/utility/SafeNavigatorView.tsx | 24 ++++++++++++++ 14 files changed, 105 insertions(+), 45 deletions(-) create mode 100644 src/utility/SafeNavigatorView.tsx diff --git a/package-lock.json b/package-lock.json index 635cfec..52ae243 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 458754a..29c8e92 100644 --- 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 index 551f2e3..7934dc3 100644 --- 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(); @@ -24,8 +25,10 @@ function MusicStack() { headerTintColor: THEME_COLOR, headerTitleStyle: defaultStyles.stackHeader, cardStyle: defaultStyles.view, + headerTransparent: true, + headerBackground: () => , }}> - + diff --git a/src/screens/Music/stacks/Album.tsx b/src/screens/Music/stacks/Album.tsx index 46daf79..c876c67 100644 --- a/src/screens/Music/stacks/Album.tsx +++ b/src/screens/Music/stacks/Album.tsx @@ -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; +type Route = RouteProp; const Album: React.FC = () => { const { params: { id } } = useRoute(); diff --git a/src/screens/Music/stacks/Albums.tsx b/src/screens/Music/stacks/Albums.tsx index 64cac99..a83b76e 100644 --- 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 ( - + <> { renderSectionHeader={generateSection} renderItem={generateItem} /> - + ); }; diff --git a/src/screens/Music/stacks/Playlist.tsx b/src/screens/Music/stacks/Playlist.tsx index b2a0807..f0a8352 100644 --- a/src/screens/Music/stacks/Playlist.tsx +++ b/src/screens/Music/stacks/Playlist.tsx @@ -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; +type Route = RouteProp; const Playlist: React.FC = () => { const { params: { id } } = useRoute(); diff --git a/src/screens/Music/stacks/Playlists.tsx b/src/screens/Music/stacks/Playlists.tsx index 14ec249..80f4dda 100644 --- 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 ( + } + 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 index 6f88f79..0cbb1c3 100644 --- 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 = ({ 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 = ({ return ( + } > diff --git a/src/screens/Search/index.tsx b/src/screens/Search/index.tsx index a9bfbf3..3e4fcf7 100644 --- 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(); @@ -17,6 +18,9 @@ function SearchStack() { headerTintColor: THEME_COLOR, headerTitleStyle: defaultStyles.stackHeader, cardStyle: defaultStyles.view, + headerTransparent: true, + headerBackground: () => , + }}> diff --git a/src/screens/Settings/components/Cache.tsx b/src/screens/Settings/components/Cache.tsx index 2198c05..7b3caba 100644 --- 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 ( - + {t('setting-cache-description')} diff --git a/src/screens/Settings/components/Library.tsx b/src/screens/Settings/components/Library.tsx index 04292d3..e97e544 100644 --- 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(); const handleSetLibrary = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]); return ( - + {t('jellyfin-server-url')} diff --git a/src/screens/Settings/components/Sentry.tsx b/src/screens/Settings/components/Sentry.tsx index 6ae3324..114c11e 100644 --- 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([]); @@ -104,14 +110,17 @@ export default function Sentry() { }); return ( - - {t('error-reporting-description')} - - {t('error-reporting-rationale')} - - - - + + + {t('error-reporting-description')} + + {t('error-reporting-rationale')} + + + + + + - + ); } \ No newline at end of file diff --git a/src/screens/Settings/index.tsx b/src/screens/Settings/index.tsx index aff0d0b..4e96495 100644 --- a/src/screens/Settings/index.tsx +++ b/src/screens/Settings/index.tsx @@ -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(); const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]); const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]); const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]); return ( - - - {t('jellyfin-library')} - {t('setting-cache')} - {t('error-reporting')} - + + {t('jellyfin-library')} + {t('setting-cache')} + {t('error-reporting')} ); } @@ -34,9 +34,11 @@ export default function Settings() { const defaultStyles = useDefaultStyles(); return ( - , }}> diff --git a/src/utility/SafeNavigatorView.tsx b/src/utility/SafeNavigatorView.tsx new file mode 100644 index 0000000..2708a22 --- /dev/null +++ b/src/utility/SafeNavigatorView.tsx @@ -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 ( + + ); +} + +export default SafeNavigatorView;