diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index a8ca692..0c46fc2 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -1,26 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/App.tsx b/app/App.tsx index 3018d9b..a5b96ed 100644 --- a/app/App.tsx +++ b/app/App.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { DarkTheme, NavigationContainer } from '@react-navigation/native' import SplashPage from '@app/screens/SplashPage' import RootNavigator from '@app/navigation/RootNavigator' import { Provider } from 'jotai' @@ -7,18 +6,13 @@ import { StatusBar, View } from 'react-native' import colors from '@app/styles/colors' import TrackPlayerState from '@app/components/TrackPlayerState' -const theme = { ...DarkTheme } -theme.colors.background = colors.gradient.high - const App = () => ( - - - + diff --git a/app/components/ListItem.tsx b/app/components/ListItem.tsx index cc72bef..475349f 100644 --- a/app/components/ListItem.tsx +++ b/app/components/ListItem.tsx @@ -57,13 +57,13 @@ const ListItem: React.FC<{ if (!onPress) { switch (item.itemType) { case 'album': - onPress = () => navigation.navigate('AlbumView', { id: item.id, title: item.name }) + onPress = () => navigation.navigate('album', { id: item.id, title: item.name }) break case 'artist': - onPress = () => navigation.navigate('ArtistView', { id: item.id, title: item.name }) + onPress = () => navigation.navigate('artist', { id: item.id, title: item.name }) break case 'playlist': - onPress = () => navigation.navigate('PlaylistView', { id: item.id, title: item.name }) + onPress = () => navigation.navigate('playlist', { id: item.id, title: item.name }) break } } diff --git a/app/components/NowPlayingBar.tsx b/app/components/NowPlayingBar.tsx index 6c2a67d..21e88ed 100644 --- a/app/components/NowPlayingBar.tsx +++ b/app/components/NowPlayingBar.tsx @@ -64,7 +64,7 @@ const NowPlayingBar = () => { return ( navigation.navigate('NowPlaying')} + onPress={() => navigation.navigate('now-playing')} style={{ ...styles.container, display: track ? 'flex' : 'none' }}> diff --git a/app/navigation/BottomTabNavigator.tsx b/app/navigation/BottomTabNavigator.tsx index 421e250..b7403da 100644 --- a/app/navigation/BottomTabNavigator.tsx +++ b/app/navigation/BottomTabNavigator.tsx @@ -15,14 +15,14 @@ import { StyleSheet } from 'react-native' import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack' type TabStackParamList = { - TabMain: { toTop?: boolean } - AlbumView: { id: string; title: string } - ArtistView: { id: string; title: string } - PlaylistView: { id: string; title: string } + main: { toTop?: boolean } + album: { id: string; title: string } + artist: { id: string; title: string } + playlist: { id: string; title: string } } -type AlbumScreenNavigationProp = NativeStackNavigationProp -type AlbumScreenRouteProp = RouteProp +type AlbumScreenNavigationProp = NativeStackNavigationProp +type AlbumScreenRouteProp = RouteProp type AlbumScreenProps = { route: AlbumScreenRouteProp navigation: AlbumScreenNavigationProp @@ -32,8 +32,8 @@ const AlbumScreen: React.FC = ({ route }) => ( ) -type ArtistScreenNavigationProp = NativeStackNavigationProp -type ArtistScreenRouteProp = RouteProp +type ArtistScreenNavigationProp = NativeStackNavigationProp +type ArtistScreenRouteProp = RouteProp type ArtistScreenProps = { route: ArtistScreenRouteProp navigation: ArtistScreenNavigationProp @@ -43,8 +43,8 @@ const ArtistScreen: React.FC = ({ route }) => ( ) -type PlaylistScreenNavigationProp = NativeStackNavigationProp -type PlaylistScreenRouteProp = RouteProp +type PlaylistScreenNavigationProp = NativeStackNavigationProp +type PlaylistScreenRouteProp = RouteProp type PlaylistScreenProps = { route: PlaylistScreenRouteProp navigation: PlaylistScreenNavigationProp @@ -86,11 +86,11 @@ function createTabStackNavigator(Component: React.ComponentType) { }) return ( - - - - - + + + + + ) } @@ -106,11 +106,11 @@ const Tab = createBottomTabNavigator() const BottomTabNavigator = () => { return ( - - - - - + + + + + ) } diff --git a/app/navigation/LibraryTopTabNavigator.tsx b/app/navigation/LibraryTopTabNavigator.tsx index 7701457..9140c6f 100644 --- a/app/navigation/LibraryTopTabNavigator.tsx +++ b/app/navigation/LibraryTopTabNavigator.tsx @@ -16,10 +16,11 @@ const LibraryTopTabNavigator = () => ( style: styles.tabBar, labelStyle: styles.tablabelStyle, indicatorStyle: styles.tabindicatorStyle, - }}> - - - + }} + initialRouteName="albums"> + + + ) diff --git a/app/navigation/RootNavigator.tsx b/app/navigation/RootNavigator.tsx index 08812f3..31e1cd3 100644 --- a/app/navigation/RootNavigator.tsx +++ b/app/navigation/RootNavigator.tsx @@ -1,18 +1,40 @@ +import BottomTabNavigator from '@app/navigation/BottomTabNavigator' +import NowPlayingLayout from '@app/screens/NowPlayingLayout' +import colors from '@app/styles/colors' +import { DarkTheme, NavigationContainer } from '@react-navigation/native' import React from 'react' import { createNativeStackNavigator } from 'react-native-screens/native-stack' -import NowPlayingLayout from '@app/screens/NowPlayingLayout' -import BottomTabNavigator from '@app/navigation/BottomTabNavigator' const RootStack = createNativeStackNavigator() +const theme = { ...DarkTheme } +theme.colors.background = colors.gradient.high + const RootNavigator = () => ( - - - - + + + + + ) export default RootNavigator diff --git a/app/screens/ArtistView.tsx b/app/screens/ArtistView.tsx index dcf40ce..8b75598 100644 --- a/app/screens/ArtistView.tsx +++ b/app/screens/ArtistView.tsx @@ -24,7 +24,7 @@ const AlbumItem = React.memo<{ return ( navigation.navigate('AlbumView', { id: album.id, title: album.name })} + onPress={() => navigation.navigate('album', { id: album.id, title: album.name })} style={[styles.albumItem, { width }]}> {album.name} diff --git a/app/screens/Home.tsx b/app/screens/Home.tsx index 4689234..a36727a 100644 --- a/app/screens/Home.tsx +++ b/app/screens/Home.tsx @@ -28,7 +28,7 @@ const AlbumItem = React.memo<{ return ( navigation.navigate('AlbumView', { id: album.id, title: album.name })} + onPress={() => navigation.navigate('album', { id: album.id, title: album.name })} key={album.id} style={styles.item}> diff --git a/app/screens/LibraryAlbums.tsx b/app/screens/LibraryAlbums.tsx index 4f99090..ada2402 100644 --- a/app/screens/LibraryAlbums.tsx +++ b/app/screens/LibraryAlbums.tsx @@ -24,7 +24,7 @@ const AlbumItem = React.memo<{ return ( navigation.navigate('AlbumView', { id, title: name })}> + onPress={() => navigation.navigate('album', { id, title: name })}> diff --git a/app/screens/NowPlayingLayout.tsx b/app/screens/NowPlayingLayout.tsx index 49b6330..59adc73 100644 --- a/app/screens/NowPlayingLayout.tsx +++ b/app/screens/NowPlayingLayout.tsx @@ -1,7 +1,6 @@ -import { useNavigation } from '@react-navigation/native' import { useAtomValue } from 'jotai/utils' -import React, { useEffect } from 'react' -import { StatusBar, StyleSheet, Text, View } from 'react-native' +import React, { useCallback, useEffect } from 'react' +import { BackHandler, StatusBar, StyleSheet, Text, View } from 'react-native' import { State } from 'react-native-track-player' import IconFA from 'react-native-vector-icons/FontAwesome' import IconFA5 from 'react-native-vector-icons/FontAwesome5' @@ -28,14 +27,17 @@ import ImageGradientBackground from '@app/components/ImageGradientBackground' import PressableOpacity from '@app/components/PressableOpacity' import dimensions from '@app/styles/dimensions' import { NativeStackScreenProps } from 'react-native-screens/native-stack' +import { useFocusEffect } from '@react-navigation/native' -const NowPlayingHeader = () => { +// eslint-disable-next-line no-spaced-func +const NowPlayingHeader = React.memo<{ + backHandler: () => void +}>(({ backHandler }) => { const queueName = useAtomValue(queueNameAtom) - const navigation = useNavigation() return ( - navigation.goBack()} style={headerStyles.icons} ripple={true}> + @@ -46,7 +48,7 @@ const NowPlayingHeader = () => { ) -} +}) const headerStyles = StyleSheet.create({ container: { @@ -302,24 +304,41 @@ const controlsStyles = StyleSheet.create({ }) type RootStackParamList = { - Main: undefined - NowPlaying: undefined + main: undefined + 'now-playing': undefined } -type NowPlayingProps = NativeStackScreenProps +type NowPlayingProps = NativeStackScreenProps const NowPlayingLayout: React.FC = ({ navigation }) => { const track = useAtomValue(currentTrackAtom) - useEffect(() => { - if (!track && navigation.canGoBack()) { + const back = useCallback(() => { + if (navigation.canGoBack()) { navigation.popToTop() + } else { + navigation.navigate('main') + } + return true + }, [navigation]) + + useEffect(() => { + if (!track) { + back() } }) + useFocusEffect( + useCallback(() => { + BackHandler.addEventListener('hardwareBackPress', back) + + return () => BackHandler.removeEventListener('hardwareBackPress', back) + }, [back]), + ) + return ( - + diff --git a/app/screens/Settings.tsx b/app/screens/Settings.tsx index b63845b..5f41bc0 100644 --- a/app/screens/Settings.tsx +++ b/app/screens/Settings.tsx @@ -18,7 +18,7 @@ const TestControls = () => { return (