From ef69e9d51763359cbdca4aa2ff30fbd40206334d Mon Sep 17 00:00:00 2001 From: austinried <4966622+austinried@users.noreply.github.com> Date: Mon, 28 Jun 2021 15:01:35 +0900 Subject: [PATCH] started album view switched to native material top tabs (w/style) --- App.tsx | 4 +- res/arrow_left-fill.png | Bin 0 -> 4810 bytes src/components/common/AlbumView.tsx | 40 +++++++ src/components/common/TopTabBar.tsx | 48 -------- src/components/library/AlbumsTab.tsx | 25 ++-- .../navigation/LibraryTopTabNavigator.tsx | 107 +++++++++++++++--- src/state/music.ts | 18 ++- src/styles/text.ts | 2 +- 8 files changed, 167 insertions(+), 77 deletions(-) create mode 100644 res/arrow_left-fill.png create mode 100644 src/components/common/AlbumView.tsx delete mode 100644 src/components/common/TopTabBar.tsx diff --git a/App.tsx b/App.tsx index 5029abe..9e52df4 100644 --- a/App.tsx +++ b/App.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { NavigationContainer } from '@react-navigation/native'; +import { DarkTheme, NavigationContainer } from '@react-navigation/native'; import SplashPage from './src/components/SplashPage'; import RootNavigator from './src/components/navigation/RootNavigator'; import { Provider } from 'jotai'; @@ -7,7 +7,7 @@ import { Provider } from 'jotai'; const App = () => ( - + diff --git a/res/arrow_left-fill.png b/res/arrow_left-fill.png new file mode 100644 index 0000000000000000000000000000000000000000..16aa6e55b3946536eb0dc12a83ba79778a12e467 GIT binary patch literal 4810 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 literal 0 HcmV?d00001 diff --git a/src/components/common/AlbumView.tsx b/src/components/common/AlbumView.tsx new file mode 100644 index 0000000..0f32c44 --- /dev/null +++ b/src/components/common/AlbumView.tsx @@ -0,0 +1,40 @@ +import { useNavigation } from '@react-navigation/native'; +import { useAtomValue } from 'jotai/utils'; +import React, { useEffect } from 'react'; +import { View, Text } from 'react-native'; +import { albumAtomFamily } from '../../state/music'; +import TopTabContainer from './TopTabContainer'; + +const AlbumDetails: React.FC<{ + id: string, +}> = ({ id }) => { + const navigation = useNavigation(); + const album = useAtomValue(albumAtomFamily(id)); + + useEffect(() => { + if (!album) { + return; + } + navigation.setOptions({ title: album.name }); + }); + + return ( + <> + Name: {album?.name} + Artist: {album?.artist} + + ); +} + +const AlbumView: React.FC<{ + id: string, +}> = ({ id }) => ( + + {id} + Loading...}> + + + +); + +export default React.memo(AlbumView); diff --git a/src/components/common/TopTabBar.tsx b/src/components/common/TopTabBar.tsx deleted file mode 100644 index be3bb97..0000000 --- a/src/components/common/TopTabBar.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { Text, View } from 'react-native'; -import { MaterialTopTabBarProps } from '@react-navigation/material-top-tabs'; -import colors from '../../styles/colors'; -import textStyles from '../../styles/text'; - -const TopTabBar: React.FC = ({ state, descriptors }) => { - return ( - - {state.routes.map((route, index) => { - const { options } = descriptors[route.key]; - const label = - options.tabBarLabel !== undefined - ? options.tabBarLabel - : options.title !== undefined - ? options.title - : route.name; - - const isFocused = state.index === index; - const color = isFocused ? colors.text.primary : colors.text.secondary; - const borderBottomColor = isFocused ? colors.accent : colors.gradient.high; - - return ( - - {label} - - ); - })} - - ); -} - -export default TopTabBar; diff --git a/src/components/library/AlbumsTab.tsx b/src/components/library/AlbumsTab.tsx index 436e504..462a287 100644 --- a/src/components/library/AlbumsTab.tsx +++ b/src/components/library/AlbumsTab.tsx @@ -1,6 +1,7 @@ +import { useNavigation } from '@react-navigation/native'; import { useAtomValue } from 'jotai/utils'; import React, { useEffect } from 'react'; -import { FlatList, Text, View } from 'react-native'; +import { FlatList, Pressable, Text, View } from 'react-native'; import FastImage from 'react-native-fast-image'; import LinearGradient from 'react-native-linear-gradient'; import { Album } from '../../models/music'; @@ -42,18 +43,24 @@ const AlbumArt: React.FC<{ const MemoAlbumArt = React.memo(AlbumArt); const AlbumItem: React.FC<{ + id: string; name: string, artist?: string, coverArtUri?: string -} > = ({ name, artist, coverArtUri }) => { +} > = ({ id, name, artist, coverArtUri }) => { + const navigation = useNavigation(); + const size = 125; return ( - + navigation.navigate('AlbumView', { id })} + > - + ); } const MemoAlbumItem = React.memo(AlbumItem); const AlbumListRenderItem: React.FC<{ item: Album }> = ({ item }) => ( - + ); const AlbumsList = () => { diff --git a/src/components/navigation/LibraryTopTabNavigator.tsx b/src/components/navigation/LibraryTopTabNavigator.tsx index 129252d..4daa161 100644 --- a/src/components/navigation/LibraryTopTabNavigator.tsx +++ b/src/components/navigation/LibraryTopTabNavigator.tsx @@ -4,29 +4,104 @@ import { createMaterialTopTabNavigator } from '@react-navigation/material-top-ta import AlbumsTab from '../library/AlbumsTab'; import ArtistsTab from '../library/ArtistsTab'; import PlaylistsTab from '../library/PlaylistsTab'; -import TopTabBar from '../common/TopTabBar'; +import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack'; +import AlbumView from '../common/AlbumView'; +import { RouteProp } from '@react-navigation/native'; +import text from '../../styles/text'; +import colors from '../../styles/colors'; +import FastImage from 'react-native-fast-image'; const Tab = createMaterialTopTabNavigator(); const LibraryTopTabNavigator = () => ( - - - + + + +); + +type LibraryStackParamList = { + LibraryTopTabs: undefined, + AlbumView: { id: string }; +} + +type AlbumScreenNavigationProp = StackNavigationProp; +type AlbumScreenRouteProp = RouteProp; +type AlbumScreenProps = { + route: AlbumScreenRouteProp, + navigation: AlbumScreenNavigationProp, +}; + +const AlbumScreen: React.FC = ({ route }) => ( + +); + +const Stack = createStackNavigator(); + +const LibraryStackNavigator = () => ( + + + - , + }} /> - - + ); -export default LibraryTopTabNavigator; +export default LibraryStackNavigator; diff --git a/src/state/music.ts b/src/state/music.ts index fd513d1..fd0a841 100644 --- a/src/state/music.ts +++ b/src/state/music.ts @@ -1,5 +1,5 @@ import { atom, useAtom } from 'jotai'; -import { useAtomValue, useUpdateAtom } from 'jotai/utils'; +import { atomFamily, useAtomValue, useUpdateAtom } from 'jotai/utils'; import { Album, Artist } from '../models/music'; import { SubsonicApiClient } from '../subsonic/api'; import { activeServerAtom } from './settings'; @@ -70,3 +70,19 @@ export const useUpdateAlbums = () => { setUpdating(false); } } + +export const albumAtomFamily = atomFamily((id: string) => atom(async (get) => { + const server = get(activeServerAtom); + if (!server) { + return undefined; + } + + const client = new SubsonicApiClient(server); + const response = await client.getAlbum({ id }); + + return { + id, + name: response.data.album.name, + artist: response.data.album.artist, + }; +})); diff --git a/src/styles/text.ts b/src/styles/text.ts index 3d6a363..bb071a8 100644 --- a/src/styles/text.ts +++ b/src/styles/text.ts @@ -12,7 +12,7 @@ const paragraph: TextStyle = { const header: TextStyle = { ...paragraph, - fontSize: 20, + fontSize: 19, fontFamily: fontSemiBold, };