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

2
src/localisation/lang/en/locale.json
View File

@@ -49,7 +49,7 @@
"download-track": "Download Track",
"download-album": "Download Album",
"download-playlist": "Download Playlist",
"no-downloads": "You have not yet downloaded any tracks",
"no-downloads": "You have not downloaded any tracks yet",
"delete-track": "Delete Track",
"delete-all-tracks": "Delete All Tracks",
"confirm-delete-all-tracks": "Are you sure you want to delete all currently downloaded tracks?",

2
src/screens/Downloads/index.tsx
View File

@@ -182,7 +182,7 @@ function Downloads() {
</View>
);
}
return (
<SafeAreaView style={{ flex: 1 }}>
{ListHeaderComponent}

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

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

@@ -8,6 +8,7 @@ import Album from '@/screens/Music/stacks/Album';
import { StyleSheet } from 'react-native';
import NowPlaying from '@/screens/Music/overlays/NowPlaying';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
const Stack = createStackNavigator<StackParams>();
@@ -16,27 +17,29 @@ function SearchStack() {
const [isInitialRoute, setIsInitialRoute] = useState(true);
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<Stack.Navigator initialRouteName="Search"
screenOptions={{
headerTintColor: defaultStyles.themeColor.color,
headerTitleStyle: defaultStyles.stackHeader,
cardStyle: defaultStyles.view,
headerTransparent: true,
headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
}}
screenListeners={{
state: (e) => {
const { state: { routes } } = e.data as { state: { routes?: { key: string, name: string }[] } };
setIsInitialRoute(routes?.length === 1);
}
}}
>
<Stack.Screen name="Search" component={Search} options={{ headerTitle: t('search'), headerShown: false }} />
<Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />
</Stack.Navigator>
<NowPlaying offset={isInitialRoute ? 64 : 0} />
</GestureHandlerRootView>
<SafeAreaProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<Stack.Navigator initialRouteName="Search"
screenOptions={{
headerTintColor: defaultStyles.themeColor.color,
headerTitleStyle: defaultStyles.stackHeader,
cardStyle: defaultStyles.view,
headerTransparent: true,
headerBackground: () => <ColoredBlurView style={StyleSheet.absoluteFill} />,
}}
screenListeners={{
state: (e) => {
const { state: { routes } } = e.data as { state: { routes?: { key: string, name: string }[] } };
setIsInitialRoute(routes?.length === 1);
}
}}
>
<Stack.Screen name="Search" component={Search} options={{ headerTitle: t('search'), headerShown: false }} />
<Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />
</Stack.Navigator>
<NowPlaying offset={isInitialRoute ? 64 : 0} />
</GestureHandlerRootView>
</SafeAreaProvider>
);
}

12
src/screens/Search/stacks/Search/index.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect, useCallback, useMemo } from 'react';
import Input from '@/components/Input';
import { ActivityIndicator, Animated, KeyboardAvoidingView, Platform, SafeAreaView, View } from 'react-native';
import { ActivityIndicator, Animated, KeyboardAvoidingView, Platform, View } from 'react-native';
import styled from 'styled-components/native';
import { useAppDispatch, useTypedSelector } from '@/store';
import Fuse, { IFuseOptions } from 'fuse.js';
@@ -21,6 +21,7 @@ import { ShadowWrapper } from '@/components/Shadow';
import { NavigationProp } from '@/screens/types';
import { useNavigationOffsets } from '@/components/SafeNavigatorView';
import BaseAlbumImage from '@/screens/Music/stacks/components/AlbumImage';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
// import MicrophoneIcon from '@/assets/icons/microphone.svg';
// import AlbumIcon from '@/assets/icons/collection.svg';
// import TrackIcon from '@/assets/icons/note.svg';
@@ -31,7 +32,8 @@ import BaseAlbumImage from '@/screens/Music/stacks/components/AlbumImage';
const KEYBOARD_OFFSET = Platform.select({
ios: 0,
android: 72,
// Android 15+ has edge-to-edge support, changing the keyboard offset to 0
android: Number.parseInt(Platform.Version as string) >= 35 ? 0 : 72,
});
const SEARCH_INPUT_HEIGHT = 62;
@@ -266,8 +268,10 @@ export default function Search() {
...jellyfinResults,
]), [fuseResults, jellyfinResults]);
const insets = useSafeAreaInsets();
return (
<SafeAreaView style={{ flex: 1, marginBottom: offsets.bottom }}>
<View style={{ flex: 1, paddingTop: insets.top, marginBottom: offsets.bottom }}>
<KeyboardAvoidingView behavior="height" style={{ flex: 1 }} keyboardVerticalOffset={KEYBOARD_OFFSET}>
<FlatList
keyboardShouldPersistTaps="handled"
@@ -323,6 +327,6 @@ export default function Search() {
) : null}
{SearchInput}
</KeyboardAvoidingView>
</SafeAreaView>
</View>
);
}

17
src/screens/Settings/stacks/PlaybackReporting.tsx
View File

@@ -2,7 +2,6 @@ import { Paragraph } from '@/components/Typography';
import React, { useCallback } from 'react';
import { Switch } from 'react-native-gesture-handler';
import { t } from '@/localisation';
import { SafeScrollView } from '@/components/SafeNavigatorView';
import { useAppDispatch, useTypedSelector } from '@/store';
import { setEnablePlaybackReporting } from '@/store/settings/actions';
import Container from '../components/Container';
@@ -17,14 +16,12 @@ export default function PlaybackReporting() {
}, [isEnabled, dispatch]);
return (
<SafeScrollView>
<Container>
<Paragraph>{t('playback-reporting-description')}</Paragraph>
<SwitchContainer>
<SwitchLabel>{t('playback-reporting')}</SwitchLabel>
<Switch value={isEnabled} onValueChange={toggleSwitch} />
</SwitchContainer>
</Container>
</SafeScrollView>
<Container>
<Paragraph>{t('playback-reporting-description')}</Paragraph>
<SwitchContainer>
<SwitchLabel>{t('playback-reporting')}</SwitchLabel>
<Switch value={isEnabled} onValueChange={toggleSwitch} />
</SwitchContainer>
</Container>
);
}

2
src/screens/index.tsx
View File

@@ -98,7 +98,7 @@ export default function Routes() {
}} id="MAIN">
<Stack.Screen name="Screens" component={Screens} />
<Stack.Screen name="SetJellyfinServer" component={SetJellyfinServer} />
<Stack.Screen name="TrackPopupMenu" component={TrackPopupMenu} options={{ presentation: 'formSheet' }} />
<Stack.Screen name="TrackPopupMenu" component={TrackPopupMenu} options={{ presentation: 'formSheet', sheetCornerRadius: 10, sheetAllowedDetents: [0.85, 1.0]}} />
<Stack.Screen name="ErrorReporting" component={ErrorReportingPopup} />
<Stack.Screen name="Player" component={Player} />
<Stack.Screen name="Lyrics" component={Lyrics} />

12
src/screens/modals/Player/components/Backbutton.tsx
View File

@@ -1,11 +1,11 @@
import React, { useCallback } from 'react';
import { useNavigation } from '@react-navigation/native';
import XmarkIcon from '@/assets/icons/xmark.svg';
import { TouchableOpacity } from 'react-native';
import styled from 'styled-components/native';
const Container = styled.View`
padding: 6px 12px;
const Container = styled.TouchableOpacity`
padding: 12px 0px;
z-index: 2;
`;
function BackButton() {
@@ -16,10 +16,8 @@ function BackButton() {
}, [navigation]);
return (
<Container>
<TouchableOpacity onPress={handlePress}>
<XmarkIcon />
</TouchableOpacity>
<Container onPress={handlePress}>
<XmarkIcon />
</Container>
);
}

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

@@ -6,7 +6,7 @@ import Queue from './components/Queue';
import ConnectionNotice from './components/ConnectionNotice';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import StreamStatus from './components/StreamStatus';
import {Platform} from 'react-native';
import { Platform } from 'react-native';
import BackButton from './components/Backbutton';
import Timer from './components/Timer';
import styled from 'styled-components/native';
@@ -23,9 +23,11 @@ export default function Player() {
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<ColoredBlurView>
{Platform.OS === 'android' && (<BackButton />)}
<Queue header={(
<>
{Platform.OS === 'android' && (
<BackButton />
)}
<NowPlaying />
<ConnectionNotice />
<StreamStatus />

2
src/screens/modals/TrackPopupMenu.tsx
View File

@@ -75,7 +75,7 @@ function TrackPopupMenu() {
}, [trackId, dispatch, closeModal]);
return (
<ColoredBlurView>
<ColoredBlurView style={{flex: 1}}>
<Container>
<Artwork src={getImage(track)} />
<Header>{track?.Name}</Header>