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

Fixed Android Safe View Areas (#294)

Browse Source 
* Fixed Android safe view areas

* fix: xmark positioning

* fix: redundant safeareaprovider

* fix: roll back redundant changes

* fix: linter

---------

Co-authored-by: Lei Nelissen <lei@codified.nl>
This commit is contained in:
Kris
2025-08-04 15:03:40 -07:00
committed by GitHub
parent 63481d0240
commit c4838b3b9e
11 changed files with 92 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
import React from 'react';
import { StyleSheet } from 'react-native';
import { StatusBar, StyleSheet } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { t } from '@/localisation';
import useDefaultStyles, { ColoredBlurView } from '@/components/Colors';
import useDefaultStyles, { ColoredBlurView, useUserOrSystemScheme } from '@/components/Colors';
import { StackParams } from '@/screens/types';
import NowPlaying from './overlays/NowPlaying';
@@ -14,31 +14,36 @@ import Playlists from './stacks/Playlists';
import Playlist from './stacks/Playlist';
import Artists from './stacks/Artists';
import Artist from './stacks/Artist';
import { SafeAreaProvider } from 'react-native-safe-area-context';
const Stack = createStackNavigator<StackParams>();
function MusicStack() {
const defaultStyles = useDefaultStyles();
const scheme = useUserOrSystemScheme();
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<Stack.Navigator initialRouteName="RecentAlbums" screenOptions={{
headerTintColor: defaultStyles.themeColor.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'), 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="Artists" component={Artists} options={{ headerTitle: t('artists') }} />
<Stack.Screen name="Artist" component={Artist} options={({ route }) => ({ headerTitle: route.params.Name })} />
<Stack.Screen name="Playlists" component={Playlists} options={{ headerTitle: t('playlists') }} />
<Stack.Screen name="Playlist" component={Playlist} options={{ headerTitle: t('playlist') }} />
</Stack.Navigator>
<NowPlaying />
</GestureHandlerRootView>
<SafeAreaProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<StatusBar backgroundColor="transparent" barStyle={scheme === 'dark' ? 'light-content' : 'dark-content'} />
<Stack.Navigator initialRouteName="RecentAlbums" screenOptions={{
headerTintColor: defaultStyles.themeColor.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'), 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="Artists" component={Artists} options={{ headerTitle: t('artists') }} />
<Stack.Screen name="Artist" component={Artist} options={({ route }) => ({ headerTitle: route.params.Name })} />
<Stack.Screen name="Playlists" component={Playlists} options={{ headerTitle: t('playlists') }} />
<Stack.Screen name="Playlist" component={Playlist} options={{ headerTitle: t('playlist') }} />
</Stack.Navigator>
<NowPlaying />
</GestureHandlerRootView>
</SafeAreaProvider>
);
}

23
src/screens/Music/stacks/RecentAlbums.tsx
View File

@@ -1,6 +1,6 @@
import React, { useCallback, useEffect } from 'react';
import { useGetImage } from '@/utility/JellyfinApi/lib';
import { Text, SafeAreaView, StyleSheet } from 'react-native';
import { Text, StyleSheet, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useAppDispatch, useTypedSelector } from '@/store';
import { fetchRecentAlbums } from '@/store/music/actions';
@@ -18,6 +18,7 @@ import styled from 'styled-components/native';
import { ShadowWrapper } from '@/components/Shadow';
import { NavigationProp } from '@/screens/types';
import { SafeFlatList } from '@/components/SafeNavigatorView';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const styles = StyleSheet.create({
columnWrapper: {
@@ -36,7 +37,7 @@ const NavigationHeader: React.FC = () => {
const handleAllAlbumsClick = useCallback(() => { navigation.navigate('Albums'); }, [navigation]);
const handlePlaylistsClick = useCallback(() => { navigation.navigate('Playlists'); }, [navigation]);
const handleArtistsClick = useCallback(() => { navigation.navigate('Artists'); }, [navigation]);
return (
<>
<ListButton onPress={handleAllAlbumsClick} testID="all-albums">
@@ -65,7 +66,7 @@ const RecentAlbums: React.FC = () => {
const { entities: albums } = useTypedSelector((state) => state.music.albums);
const recentAlbums = useRecentAlbums(24);
const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
// Initialise helpers
const dispatch = useAppDispatch();
const navigation = useNavigation<NavigationProp>();
@@ -74,14 +75,20 @@ const RecentAlbums: React.FC = () => {
// Set callbacks
const retrieveData = useCallback(() => dispatch(fetchRecentAlbums()), [dispatch]);
const selectAlbum = useCallback((id: string) => navigation.navigate('Album', { id, album: albums[id] as Album }), [navigation, albums]);
// Retrieve data on mount
useEffect(() => { retrieveData(); }, [retrieveData]);
const insets = useSafeAreaInsets();
return (
<SafeAreaView>
<View
style={{
paddingTop: insets.top,
paddingBottom: 1 * insets.bottom,
}}>
<SafeFlatList
data={recentAlbums as string[]}
data={recentAlbums as string[]}
refreshing={isLoading}
onRefresh={retrieveData}
numColumns={2}
@@ -100,7 +107,7 @@ const RecentAlbums: React.FC = () => {
</TouchableHandler>
)}
/>
</SafeAreaView>
</View>
);
};