diff --git a/App.tsx b/App.tsx index 8fee37b..6cf0fa7 100644 --- a/App.tsx +++ b/App.tsx @@ -1,78 +1,12 @@ import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; -import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; - -import { Image } from 'react-native'; import { RecoilRoot } from 'recoil'; - -import SettingsView from './src/components/Settings'; -import ArtistsList from './src/components/ArtistsList'; -import NowPlayingLayout from './src/components/NowPlayingLayout'; - - -const SettingsIcon: React.FC<{ focused: boolean }> = ({ focused }) => ( - -); - -const NowPlayingIcon: React.FC<{ focused: boolean }> = ({ focused }) => ( - -); - -const ArtistsIcon: React.FC<{ focused: boolean }> = ({ focused }) => ( - -); - -const Tab = createBottomTabNavigator(); +import RootNavigator from './src/components/RootNavigator'; const App = () => ( - - - - - + ); diff --git a/android/app/src/main/assets/fonts/Rubik-VariableFont_wght.ttf b/android/app/src/main/assets/fonts/Rubik-VariableFont_wght.ttf new file mode 100644 index 0000000..af620da Binary files /dev/null and b/android/app/src/main/assets/fonts/Rubik-VariableFont_wght.ttf differ diff --git a/assets/fonts/Rubik-VariableFont_wght.ttf b/assets/fonts/Rubik-VariableFont_wght.ttf new file mode 100644 index 0000000..af620da Binary files /dev/null and b/assets/fonts/Rubik-VariableFont_wght.ttf differ diff --git a/ios/SubSonify.xcodeproj/project.pbxproj b/ios/SubSonify.xcodeproj/project.pbxproj index b26b0aa..1fd0e7d 100644 --- a/ios/SubSonify.xcodeproj/project.pbxproj +++ b/ios/SubSonify.xcodeproj/project.pbxproj @@ -12,6 +12,7 @@ 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; }; + E40802F2F4B64B50BC3D4A71 /* Rubik-VariableFont_wght.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6882041C5ED04E249BB58448 /* Rubik-VariableFont_wght.ttf */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -36,6 +37,7 @@ 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = SubSonify/main.m; sourceTree = ""; }; 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = SubSonify/LaunchScreen.storyboard; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; + 6882041C5ED04E249BB58448 /* Rubik-VariableFont_wght.ttf */ = {isa = PBXFileReference; name = "Rubik-VariableFont_wght.ttf"; path = "../assets/fonts/Rubik-VariableFont_wght.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -109,6 +111,7 @@ 00E356EF1AD99517003FC87E /* SubSonifyTests */, 83CBBA001A601CBA00E9B192 /* Products */, 2D16E6871FA4F8E400B85C8A /* Frameworks */, + 4E728597FECE42D1A816E9C1 /* Resources */, ); indentWidth = 2; sourceTree = ""; @@ -124,6 +127,15 @@ name = Products; sourceTree = ""; }; + 4E728597FECE42D1A816E9C1 /* Resources */ = { + isa = "PBXGroup"; + children = ( + 6882041C5ED04E249BB58448 /* Rubik-VariableFont_wght.ttf */, + ); + name = Resources; + sourceTree = ""; + path = ""; + }; /* End PBXGroup section */ /* Begin PBXNativeTarget section */ @@ -214,6 +226,7 @@ files = ( 81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, + E40802F2F4B64B50BC3D4A71 /* Rubik-VariableFont_wght.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/ios/SubSonify/Info.plist b/ios/SubSonify/Info.plist index 4847c01..6c6b85f 100644 --- a/ios/SubSonify/Info.plist +++ b/ios/SubSonify/Info.plist @@ -36,7 +36,7 @@ NSLocationWhenInUseUsageDescription - + UILaunchStoryboardName LaunchScreen UIRequiredDeviceCapabilities @@ -51,5 +51,9 @@ UIViewControllerBasedStatusBarAppearance + UIAppFonts + + Rubik-VariableFont_wght.ttf + diff --git a/react-native.config.js b/react-native.config.js new file mode 100644 index 0000000..3d4e0f5 --- /dev/null +++ b/react-native.config.js @@ -0,0 +1,7 @@ +module.exports = { + project: { + ios: {}, + android: {}, + }, + assets: ['./assets/fonts'] +}; diff --git a/res/chevron_right-fill.png b/res/chevron_right-fill.png new file mode 100644 index 0000000..389b631 Binary files /dev/null and b/res/chevron_right-fill.png differ diff --git a/res/chevron_right.png b/res/chevron_right.png new file mode 100644 index 0000000..8f8331c Binary files /dev/null and b/res/chevron_right.png differ diff --git a/res/home-fill.png b/res/home-fill.png new file mode 100644 index 0000000..bb11daf Binary files /dev/null and b/res/home-fill.png differ diff --git a/res/home.png b/res/home.png new file mode 100644 index 0000000..b8d9d62 Binary files /dev/null and b/res/home.png differ diff --git a/res/library-fill.png b/res/library-fill.png new file mode 100644 index 0000000..deb222e Binary files /dev/null and b/res/library-fill.png differ diff --git a/res/library.png b/res/library.png new file mode 100644 index 0000000..9313e89 Binary files /dev/null and b/res/library.png differ diff --git a/res/search-fill.png b/res/search-fill.png new file mode 100644 index 0000000..77d9101 Binary files /dev/null and b/res/search-fill.png differ diff --git a/res/search.png b/res/search.png new file mode 100644 index 0000000..e739503 Binary files /dev/null and b/res/search.png differ diff --git a/src/components/ArtistsList.tsx b/src/components/ArtistsList.tsx index 577eb69..1e76805 100644 --- a/src/components/ArtistsList.tsx +++ b/src/components/ArtistsList.tsx @@ -29,7 +29,7 @@ const List = () => { ); } -const ArtistsList = () => { +const ListPlusControls = () => { const resetArtists = useResetRecoilState(artistsState); const updateArtists = useUpdateArtists(); @@ -43,11 +43,17 @@ const ArtistsList = () => { title='Update from API' onPress={updateArtists} /> - Loading...}> - ); } +const ArtistsList = () => ( + + Loading...}> + + + +) + export default ArtistsList; diff --git a/src/components/FocusableIcon.tsx b/src/components/FocusableIcon.tsx new file mode 100644 index 0000000..aa1cf60 --- /dev/null +++ b/src/components/FocusableIcon.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Image, ImageSourcePropType } from 'react-native'; + +export type FocusableIconProps = { + focused: boolean, + source: ImageSourcePropType; + focusedSource?: ImageSourcePropType; + width?: number; + height?: number; +}; + +const FocusableIcon: React.FC = (props) => { + props.focusedSource = props.focusedSource || props.source; + props.width = props.width || 32; + props.height = props.height || 32; + + return ( + + ); +} + +export default FocusableIcon; diff --git a/src/components/Library.tsx b/src/components/Library.tsx new file mode 100644 index 0000000..e34ba3d --- /dev/null +++ b/src/components/Library.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Text, View, Image } from 'react-native'; + +const SectionHeader: React.FC<{ title: string }> = ({ title }) => { + return ( + + {title} + + + ); +} + +const AlbumCoverList = () => { + +} + +const Library = () => ( + + + + + +); + +export default Library; diff --git a/src/components/RootNavigator.tsx b/src/components/RootNavigator.tsx new file mode 100644 index 0000000..fec94f4 --- /dev/null +++ b/src/components/RootNavigator.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { createStackNavigator } from '@react-navigation/stack'; +import TabNavigator from './TabNavigator'; +import NowPlayingLayout from './NowPlayingLayout'; + +const RootStack = createStackNavigator(); + +const RootNavigator = () => ( + + + + +); + +export default RootNavigator; diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index 84fe933..a3aaae4 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -7,6 +7,7 @@ import { musicDb, settingsDb } from '../clients'; import { appSettingsState, serversState } from '../state/settings'; import { DbStorage } from '../storage/db'; import { StackScreenProps } from '@react-navigation/stack'; +import { useNavigation } from '@react-navigation/core'; const RecreateDbButton: React.FC<{ db: DbStorage, title: string }> = ({ db, title }) => { const [inProgress, setInProgress] = useState(false); @@ -31,10 +32,15 @@ const RecreateDbButton: React.FC<{ db: DbStorage, title: string }> = ({ db, titl } const DbControls = () => { + const navigation = useNavigation(); return ( +