diff --git a/src/localisation/lang/en/locale.json b/src/localisation/lang/en/locale.json index 84f1d6d..bc2d6ba 100644 --- a/src/localisation/lang/en/locale.json +++ b/src/localisation/lang/en/locale.json @@ -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?", diff --git a/src/screens/Downloads/index.tsx b/src/screens/Downloads/index.tsx index 8f9f63a..70e0cd3 100644 --- a/src/screens/Downloads/index.tsx +++ b/src/screens/Downloads/index.tsx @@ -182,7 +182,7 @@ function Downloads() { ); } - + return ( {ListHeaderComponent} diff --git a/src/screens/Music/index.tsx b/src/screens/Music/index.tsx index ba6ce35..4eafce3 100644 --- a/src/screens/Music/index.tsx +++ b/src/screens/Music/index.tsx @@ -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(); function MusicStack() { const defaultStyles = useDefaultStyles(); + const scheme = useUserOrSystemScheme(); return ( - - , - }}> - - - - - ({ headerTitle: route.params.Name })} /> - - - - - + + + + , + }}> + + + + + ({ headerTitle: route.params.Name })} /> + + + + + + ); } diff --git a/src/screens/Music/stacks/RecentAlbums.tsx b/src/screens/Music/stacks/RecentAlbums.tsx index 9b2881e..c34f745 100644 --- a/src/screens/Music/stacks/RecentAlbums.tsx +++ b/src/screens/Music/stacks/RecentAlbums.tsx @@ -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 ( <> @@ -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(); @@ -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 ( - + { )} /> - + ); }; diff --git a/src/screens/Search/index.tsx b/src/screens/Search/index.tsx index dc8cdc7..f79ae2c 100644 --- a/src/screens/Search/index.tsx +++ b/src/screens/Search/index.tsx @@ -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(); @@ -16,27 +17,29 @@ function SearchStack() { const [isInitialRoute, setIsInitialRoute] = useState(true); return ( - - , - }} - screenListeners={{ - state: (e) => { - const { state: { routes } } = e.data as { state: { routes?: { key: string, name: string }[] } }; - setIsInitialRoute(routes?.length === 1); - } - }} - > - - - - - + + + , + }} + screenListeners={{ + state: (e) => { + const { state: { routes } } = e.data as { state: { routes?: { key: string, name: string }[] } }; + setIsInitialRoute(routes?.length === 1); + } + }} + > + + + + + + ); } diff --git a/src/screens/Search/stacks/Search/index.tsx b/src/screens/Search/stacks/Search/index.tsx index 79cbb5e..7f64329 100644 --- a/src/screens/Search/stacks/Search/index.tsx +++ b/src/screens/Search/stacks/Search/index.tsx @@ -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 ( - + - + ); } \ No newline at end of file diff --git a/src/screens/Settings/stacks/PlaybackReporting.tsx b/src/screens/Settings/stacks/PlaybackReporting.tsx index 4cbe535..acb1155 100644 --- a/src/screens/Settings/stacks/PlaybackReporting.tsx +++ b/src/screens/Settings/stacks/PlaybackReporting.tsx @@ -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 ( - - - {t('playback-reporting-description')} - - {t('playback-reporting')} - - - - + + {t('playback-reporting-description')} + + {t('playback-reporting')} + + + ); } \ No newline at end of file diff --git a/src/screens/index.tsx b/src/screens/index.tsx index 1a86898..b48b4a0 100644 --- a/src/screens/index.tsx +++ b/src/screens/index.tsx @@ -98,7 +98,7 @@ export default function Routes() { }} id="MAIN"> - + diff --git a/src/screens/modals/Player/components/Backbutton.tsx b/src/screens/modals/Player/components/Backbutton.tsx index 6639969..6a6eb2e 100644 --- a/src/screens/modals/Player/components/Backbutton.tsx +++ b/src/screens/modals/Player/components/Backbutton.tsx @@ -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 ( - - - - + + ); } diff --git a/src/screens/modals/Player/index.tsx b/src/screens/modals/Player/index.tsx index 2c1cf35..88ba452 100644 --- a/src/screens/modals/Player/index.tsx +++ b/src/screens/modals/Player/index.tsx @@ -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 ( - {Platform.OS === 'android' && ()} + {Platform.OS === 'android' && ( + + )} diff --git a/src/screens/modals/TrackPopupMenu.tsx b/src/screens/modals/TrackPopupMenu.tsx index 38f4232..6badfd0 100644 --- a/src/screens/modals/TrackPopupMenu.tsx +++ b/src/screens/modals/TrackPopupMenu.tsx @@ -75,7 +75,7 @@ function TrackPopupMenu() { }, [trackId, dispatch, closeModal]); return ( - +
{track?.Name}