diff --git a/android/app/src/main/assets/fonts/AntDesign.ttf b/android/app/src/main/assets/fonts/AntDesign.ttf new file mode 100644 index 0000000..2abf035 Binary files /dev/null and b/android/app/src/main/assets/fonts/AntDesign.ttf differ diff --git a/android/app/src/main/assets/fonts/Entypo.ttf b/android/app/src/main/assets/fonts/Entypo.ttf new file mode 100644 index 0000000..1c8f5e9 Binary files /dev/null and b/android/app/src/main/assets/fonts/Entypo.ttf differ diff --git a/android/app/src/main/assets/fonts/EvilIcons.ttf b/android/app/src/main/assets/fonts/EvilIcons.ttf new file mode 100644 index 0000000..6868f7b Binary files /dev/null and b/android/app/src/main/assets/fonts/EvilIcons.ttf differ diff --git a/android/app/src/main/assets/fonts/Feather.ttf b/android/app/src/main/assets/fonts/Feather.ttf new file mode 100644 index 0000000..a3c58c5 Binary files /dev/null and b/android/app/src/main/assets/fonts/Feather.ttf differ diff --git a/android/app/src/main/assets/fonts/FontAwesome.ttf b/android/app/src/main/assets/fonts/FontAwesome.ttf new file mode 100644 index 0000000..35acda2 Binary files /dev/null and b/android/app/src/main/assets/fonts/FontAwesome.ttf differ diff --git a/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf b/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf new file mode 100644 index 0000000..948a2a6 Binary files /dev/null and b/android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf differ diff --git a/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf b/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf new file mode 100644 index 0000000..abe99e2 Binary files /dev/null and b/android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf differ diff --git a/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf b/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf new file mode 100644 index 0000000..5b97903 Binary files /dev/null and b/android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf differ diff --git a/android/app/src/main/assets/fonts/Fontisto.ttf b/android/app/src/main/assets/fonts/Fontisto.ttf new file mode 100755 index 0000000..96e2e81 Binary files /dev/null and b/android/app/src/main/assets/fonts/Fontisto.ttf differ diff --git a/android/app/src/main/assets/fonts/Foundation.ttf b/android/app/src/main/assets/fonts/Foundation.ttf new file mode 100644 index 0000000..6cce217 Binary files /dev/null and b/android/app/src/main/assets/fonts/Foundation.ttf differ diff --git a/android/app/src/main/assets/fonts/Ionicons.ttf b/android/app/src/main/assets/fonts/Ionicons.ttf new file mode 100644 index 0000000..719442d Binary files /dev/null and b/android/app/src/main/assets/fonts/Ionicons.ttf differ diff --git a/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf b/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf new file mode 100644 index 0000000..522dc31 Binary files /dev/null and b/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf differ diff --git a/android/app/src/main/assets/fonts/MaterialIcons.ttf b/android/app/src/main/assets/fonts/MaterialIcons.ttf new file mode 100644 index 0000000..e50801b Binary files /dev/null and b/android/app/src/main/assets/fonts/MaterialIcons.ttf differ diff --git a/android/app/src/main/assets/fonts/Octicons.ttf b/android/app/src/main/assets/fonts/Octicons.ttf new file mode 100644 index 0000000..ceac75d Binary files /dev/null and b/android/app/src/main/assets/fonts/Octicons.ttf differ diff --git a/android/app/src/main/assets/fonts/SimpleLineIcons.ttf b/android/app/src/main/assets/fonts/SimpleLineIcons.ttf new file mode 100644 index 0000000..6ecb686 Binary files /dev/null and b/android/app/src/main/assets/fonts/SimpleLineIcons.ttf differ diff --git a/android/app/src/main/assets/fonts/Zocial.ttf b/android/app/src/main/assets/fonts/Zocial.ttf new file mode 100644 index 0000000..e4ae46c Binary files /dev/null and b/android/app/src/main/assets/fonts/Zocial.ttf differ diff --git a/android/app/src/main/java/com/subsonify/MainApplication.java b/android/app/src/main/java/com/subsonify/MainApplication.java index 2f22c97..59ded7e 100644 --- a/android/app/src/main/java/com/subsonify/MainApplication.java +++ b/android/app/src/main/java/com/subsonify/MainApplication.java @@ -4,6 +4,7 @@ import android.app.Application; import android.content.Context; import com.facebook.react.PackageList; import com.facebook.react.ReactApplication; +import com.oblador.vectoricons.VectorIconsPackage; import com.rnfs.RNFSPackage; import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactNativeHost; diff --git a/android/settings.gradle b/android/settings.gradle index 3450a70..63da5eb 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -1,4 +1,6 @@ rootProject.name = 'SubSonify' +include ':react-native-vector-icons' +project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') include ':react-native-fs' project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android') apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) diff --git a/ios/Podfile b/ios/Podfile index 6fba822..e73d64d 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -14,6 +14,8 @@ target 'SubSonify' do pod 'RNFS', :path => '../node_modules/react-native-fs' + pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' + target 'SubSonifyTests' do inherit! :complete # Pods for testing diff --git a/ios/SubSonify.xcodeproj/project.pbxproj b/ios/SubSonify.xcodeproj/project.pbxproj index ac58a1f..a3356e2 100644 --- a/ios/SubSonify.xcodeproj/project.pbxproj +++ b/ios/SubSonify.xcodeproj/project.pbxproj @@ -30,6 +30,22 @@ 1C2DD90415D147FB94C8D10B /* Metropolis-SemiBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = FBDA54C202524518896BC94A /* Metropolis-SemiBoldItalic.otf */; }; AAC8571827CB4AFFBD337043 /* Metropolis-Thin.otf in Resources */ = {isa = PBXBuildFile; fileRef = 55F76E87376B41A6819E5049 /* Metropolis-Thin.otf */; }; 3698E9E7AE4446818C4E5DAB /* Metropolis-ThinItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = 0A742EE66CEC48B5984D1DAB /* Metropolis-ThinItalic.otf */; }; + EE744D04506647E5853398C5 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B34C2644DECE40A2899AD6AF /* AntDesign.ttf */; }; + 3698494B9C5C49D9A2E5A325 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FC19790F54E545F9ADE056C3 /* Entypo.ttf */; }; + B24D71B1E6AE45DCAE09CF49 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CAABB21861B04490930EB938 /* EvilIcons.ttf */; }; + CA05C73F64124A5BA13B7652 /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D4F0C60E3AAB41919FBFA2B0 /* Feather.ttf */; }; + 8D6ED2E54A8F4CBCAD2D164B /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1A8527EE22F446E4B067E564 /* FontAwesome.ttf */; }; + 5D58E34F18864C4BB68B9EB9 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4FC78144CBEB4B5992BCE269 /* FontAwesome5_Brands.ttf */; }; + 300E37B9E29F48088865888A /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FCB88C9A03214E3C8618FE89 /* FontAwesome5_Regular.ttf */; }; + 04670ECA3CE8486DBA07E762 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7749962EF1324DF68ED71F6E /* FontAwesome5_Solid.ttf */; }; + F78303F27C674A489E05D99C /* Fontisto.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E2833DB2351F4EE0A9F11E3E /* Fontisto.ttf */; }; + F98666B871D349669346343E /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B979343B0506407192CB4398 /* Foundation.ttf */; }; + DF33D5F42A5341CAA0094D2C /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 8690DE43639E494AA0E0C44D /* Ionicons.ttf */; }; + B0EF26A9FF99462E830121F8 /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 152A0811821D4402AD65A88F /* MaterialCommunityIcons.ttf */; }; + 2D9C331806954E5093015065 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 79E0530BB912468EA6B53B9B /* MaterialIcons.ttf */; }; + 82B69B2602364752AB31CC61 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 436737B827214D6183FCA76D /* Octicons.ttf */; }; + C4CC5DA88DF0438BA4D157CD /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A260BE9A793A4032B82A29DF /* SimpleLineIcons.ttf */; }; + AB230364459D49B2A063B309 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 13D610D8ECEF4A5BAA028AA0 /* Zocial.ttf */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -148,6 +164,22 @@ FBDA54C202524518896BC94A /* Metropolis-SemiBoldItalic.otf */ = {isa = PBXFileReference; name = "Metropolis-SemiBoldItalic.otf"; path = "../assets/fonts/Metropolis-SemiBoldItalic.otf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; 55F76E87376B41A6819E5049 /* Metropolis-Thin.otf */ = {isa = PBXFileReference; name = "Metropolis-Thin.otf"; path = "../assets/fonts/Metropolis-Thin.otf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; 0A742EE66CEC48B5984D1DAB /* Metropolis-ThinItalic.otf */ = {isa = PBXFileReference; name = "Metropolis-ThinItalic.otf"; path = "../assets/fonts/Metropolis-ThinItalic.otf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + B34C2644DECE40A2899AD6AF /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + FC19790F54E545F9ADE056C3 /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + CAABB21861B04490930EB938 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + D4F0C60E3AAB41919FBFA2B0 /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 1A8527EE22F446E4B067E564 /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 4FC78144CBEB4B5992BCE269 /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + FCB88C9A03214E3C8618FE89 /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 7749962EF1324DF68ED71F6E /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + E2833DB2351F4EE0A9F11E3E /* Fontisto.ttf */ = {isa = PBXFileReference; name = "Fontisto.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + B979343B0506407192CB4398 /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 8690DE43639E494AA0E0C44D /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 152A0811821D4402AD65A88F /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 79E0530BB912468EA6B53B9B /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 436737B827214D6183FCA76D /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + A260BE9A793A4032B82A29DF /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 13D610D8ECEF4A5BAA028AA0 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -334,6 +366,22 @@ FBDA54C202524518896BC94A /* Metropolis-SemiBoldItalic.otf */, 55F76E87376B41A6819E5049 /* Metropolis-Thin.otf */, 0A742EE66CEC48B5984D1DAB /* Metropolis-ThinItalic.otf */, + B34C2644DECE40A2899AD6AF /* AntDesign.ttf */, + FC19790F54E545F9ADE056C3 /* Entypo.ttf */, + CAABB21861B04490930EB938 /* EvilIcons.ttf */, + D4F0C60E3AAB41919FBFA2B0 /* Feather.ttf */, + 1A8527EE22F446E4B067E564 /* FontAwesome.ttf */, + 4FC78144CBEB4B5992BCE269 /* FontAwesome5_Brands.ttf */, + FCB88C9A03214E3C8618FE89 /* FontAwesome5_Regular.ttf */, + 7749962EF1324DF68ED71F6E /* FontAwesome5_Solid.ttf */, + E2833DB2351F4EE0A9F11E3E /* Fontisto.ttf */, + B979343B0506407192CB4398 /* Foundation.ttf */, + 8690DE43639E494AA0E0C44D /* Ionicons.ttf */, + 152A0811821D4402AD65A88F /* MaterialCommunityIcons.ttf */, + 79E0530BB912468EA6B53B9B /* MaterialIcons.ttf */, + 436737B827214D6183FCA76D /* Octicons.ttf */, + A260BE9A793A4032B82A29DF /* SimpleLineIcons.ttf */, + 13D610D8ECEF4A5BAA028AA0 /* Zocial.ttf */, ); name = Resources; sourceTree = ""; @@ -523,6 +571,22 @@ 1C2DD90415D147FB94C8D10B /* Metropolis-SemiBoldItalic.otf in Resources */, AAC8571827CB4AFFBD337043 /* Metropolis-Thin.otf in Resources */, 3698E9E7AE4446818C4E5DAB /* Metropolis-ThinItalic.otf in Resources */, + EE744D04506647E5853398C5 /* AntDesign.ttf in Resources */, + 3698494B9C5C49D9A2E5A325 /* Entypo.ttf in Resources */, + B24D71B1E6AE45DCAE09CF49 /* EvilIcons.ttf in Resources */, + CA05C73F64124A5BA13B7652 /* Feather.ttf in Resources */, + 8D6ED2E54A8F4CBCAD2D164B /* FontAwesome.ttf in Resources */, + 5D58E34F18864C4BB68B9EB9 /* FontAwesome5_Brands.ttf in Resources */, + 300E37B9E29F48088865888A /* FontAwesome5_Regular.ttf in Resources */, + 04670ECA3CE8486DBA07E762 /* FontAwesome5_Solid.ttf in Resources */, + F78303F27C674A489E05D99C /* Fontisto.ttf in Resources */, + F98666B871D349669346343E /* Foundation.ttf in Resources */, + DF33D5F42A5341CAA0094D2C /* Ionicons.ttf in Resources */, + B0EF26A9FF99462E830121F8 /* MaterialCommunityIcons.ttf in Resources */, + 2D9C331806954E5093015065 /* MaterialIcons.ttf in Resources */, + 82B69B2602364752AB31CC61 /* Octicons.ttf in Resources */, + C4CC5DA88DF0438BA4D157CD /* SimpleLineIcons.ttf in Resources */, + AB230364459D49B2A063B309 /* Zocial.ttf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/ios/SubSonify/Info.plist b/ios/SubSonify/Info.plist index 4522858..e99daa0 100644 --- a/ios/SubSonify/Info.plist +++ b/ios/SubSonify/Info.plist @@ -71,6 +71,22 @@ Metropolis-SemiBoldItalic.otf Metropolis-Thin.otf Metropolis-ThinItalic.otf + AntDesign.ttf + Entypo.ttf + EvilIcons.ttf + Feather.ttf + FontAwesome.ttf + FontAwesome5_Brands.ttf + FontAwesome5_Regular.ttf + FontAwesome5_Solid.ttf + Fontisto.ttf + Foundation.ttf + Ionicons.ttf + MaterialCommunityIcons.ttf + MaterialIcons.ttf + Octicons.ttf + SimpleLineIcons.ttf + Zocial.ttf diff --git a/package.json b/package.json index ccbe08a..aebebdd 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react-native-screens": "^3.4.0", "react-native-tab-view": "^2.16.0", "react-native-track-player": "https://github.com/austinried/react-native-track-player", + "react-native-vector-icons": "^8.1.0", "uuid": "^8.3.2", "xmldom": "^0.5.0" }, @@ -42,6 +43,7 @@ "@types/jest": "^26.0.23", "@types/md5": "^2.3.0", "@types/react-native": "^0.64.5", + "@types/react-native-vector-icons": "^6.4.7", "@types/react-test-renderer": "^16.9.2", "@types/uuid": "^8.3.0", "@types/xmldom": "^0.1.30", diff --git a/src/components/NowPlayingLayout.tsx b/src/components/NowPlayingLayout.tsx index 544af18..b33d3d4 100644 --- a/src/components/NowPlayingLayout.tsx +++ b/src/components/NowPlayingLayout.tsx @@ -3,6 +3,11 @@ import { useAtomValue } from 'jotai/utils' import React from 'react' import { 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' +import Icon from 'react-native-vector-icons/Ionicons' +import IconMatCom from 'react-native-vector-icons/MaterialCommunityIcons' +import IconMat from 'react-native-vector-icons/MaterialIcons' import { currentTrackAtom, playerStateAtom, @@ -14,11 +19,11 @@ import { useProgress, } from '../state/trackplayer' import colors from '../styles/colors' -import text, { Font } from '../styles/text' +import { Font } from '../styles/text' import { formatDuration } from '../util' import CoverArt from './common/CoverArt' import ImageGradientBackground from './common/ImageGradientBackground' -import PressableImage from './common/PressableImage' +import PressableOpacity from './common/PressableOpacity' const NowPlayingHeader = () => { const queueName = useAtomValue(queueNameAtom) @@ -26,27 +31,15 @@ const NowPlayingHeader = () => { return ( - navigation.goBack()} - source={require('../../res/arrow_left-fill.png')} - style={headerStyles.icons} - tintColor="white" - hitSlop={12} - ripple={true} - padding={18} - /> - + navigation.goBack()} style={headerStyles.icons} ripple={true}> + + + {queueName || 'Nothing playing...'} - {}} - source={require('../../res/more_vertical.png')} - style={headerStyles.icons} - tintColor="white" - hitSlop={12} - ripple={true} - padding={18} - /> + + + ) } @@ -54,6 +47,7 @@ const NowPlayingHeader = () => { const headerStyles = StyleSheet.create({ container: { height: 58, + width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', @@ -64,7 +58,11 @@ const headerStyles = StyleSheet.create({ marginHorizontal: 8, }, queueName: { - ...text.paragraph, + fontFamily: Font.bold, + fontSize: 16, + color: colors.text.primary, + flex: 1, + textAlign: 'center', }, }) @@ -87,7 +85,7 @@ const coverArtStyles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', - padding: 20, + paddingBottom: 20, }, }) @@ -96,12 +94,19 @@ const SongInfo = () => { return ( - - {track?.title} - - - {track?.artist} - + + + {track?.title} + + + {track?.artist} + + + + + + + ) } @@ -109,18 +114,26 @@ const SongInfo = () => { const infoStyles = StyleSheet.create({ container: { width: '100%', - alignItems: 'center', - paddingHorizontal: 20, + flexDirection: 'row', + }, + details: { + flex: 1, + marginRight: 20, + }, + controls: { + justifyContent: 'center', }, title: { - ...text.songListTitle, + height: 28, + fontFamily: Font.bold, fontSize: 22, - textAlign: 'center', + color: colors.text.primary, }, artist: { - ...text.songListSubtitle, - fontSize: 14, - textAlign: 'center', + height: 20, + fontFamily: Font.regular, + fontSize: 16, + color: colors.text.secondary, }, }) @@ -151,7 +164,6 @@ const seekStyles = StyleSheet.create({ container: { width: '100%', marginTop: 26, - paddingHorizontal: 20, }, barContainer: { flexDirection: 'row', @@ -194,7 +206,7 @@ const PlayerControls = () => { const next = useNext() const previous = usePrevious() - let playPauseIcon: number + let playPauseIcon: string let playPauseAction: undefined | (() => void) let disabled: boolean @@ -203,41 +215,56 @@ const PlayerControls = () => { case State.Buffering: case State.Connecting: disabled = false - playPauseIcon = require('../../res/pause_circle-fill.png') + playPauseIcon = 'pause-circle' playPauseAction = pause break case State.Paused: disabled = false - playPauseIcon = require('../../res/play_circle-fill.png') + playPauseIcon = 'play-circle' playPauseAction = play break default: disabled = true - playPauseIcon = require('../../res/play_circle-fill.png') + playPauseIcon = 'play-circle' playPauseAction = undefined break } return ( - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) } @@ -245,19 +272,27 @@ const PlayerControls = () => { const controlsStyles = StyleSheet.create({ container: { width: '100%', + }, + top: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingBottom: 8, + }, + bottom: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + paddingTop: 10, + paddingBottom: 34, + }, + play: { + marginHorizontal: 30, + }, + center: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - marginBottom: 75, - }, - skip: { - height: 40, - width: 40, - marginHorizontal: 18, - }, - play: { - height: 90, - width: 90, }, }) @@ -265,19 +300,28 @@ const NowPlayingLayout = () => { const track = useAtomValue(currentTrackAtom) return ( - + - - - - + + + + + + ) } +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: StatusBar.currentHeight, + }, + content: { + flex: 1, + paddingHorizontal: 30, + }, +}) + export default NowPlayingLayout diff --git a/src/components/common/PressableOpacity.tsx b/src/components/common/PressableOpacity.tsx new file mode 100644 index 0000000..9977c11 --- /dev/null +++ b/src/components/common/PressableOpacity.tsx @@ -0,0 +1,44 @@ +import React, { useEffect, useState } from 'react' +import { LayoutRectangle, Pressable, PressableProps } from 'react-native' + +type PressableOpacityProps = PressableProps & { + ripple?: boolean +} + +const PressableOpacity: React.FC = props => { + const [opacity, setOpacity] = useState(1) + const [dimensions, setDimensions] = useState(undefined) + + useEffect(() => { + props.disabled === true ? setOpacity(0.3) : setOpacity(1) + }, [props.disabled]) + + return ( + setDimensions(event.nativeEvent.layout)} + onPressIn={() => { + if (!props.disabled) { + setOpacity(0.4) + } + }} + onPressOut={() => { + if (!props.disabled) { + setOpacity(1) + } + }}> + {props.children} + + ) +} + +export default PressableOpacity diff --git a/yarn.lock b/yarn.lock index d4b8e8a..d50fa1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1320,7 +1320,15 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== -"@types/react-native@^0.64.5": +"@types/react-native-vector-icons@^6.4.7": + version "6.4.7" + resolved "https://registry.yarnpkg.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.7.tgz#862039d668afcff42690b179b2a61dc762b84f73" + integrity sha512-srU4IWO5ghzm96dwyiKRYJCGD+Q0Lcu8NsWOXLi4pRPH24mb68XhrqW5Gb63AeiXlAOFsaOl2Irlsg79BNYt4A== + dependencies: + "@types/react" "*" + "@types/react-native" "*" + +"@types/react-native@*", "@types/react-native@^0.64.5": version "0.64.10" resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.10.tgz#5eb6a72c77ce0f7e6e14b19c61a6bc585975eef5" integrity sha512-3Kb9QM5/WZ6p58yZ7VPbvjvi6Wc/ZkESgJhKso1gKkNuHBe/4WL6586R2JRDiz9Tsxal9lMnbj3fligBVGl8PA== @@ -2101,6 +2109,15 @@ cliui@^6.0.0: strip-ansi "^6.0.0" wrap-ansi "^6.2.0" +cliui@^7.0.2: + version "7.0.4" + resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f" + integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ== + dependencies: + string-width "^4.2.0" + strip-ansi "^6.0.0" + wrap-ansi "^7.0.0" + clone-deep@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387" @@ -3118,7 +3135,7 @@ gensync@^1.0.0-beta.2: resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== -get-caller-file@^2.0.1: +get-caller-file@^2.0.1, get-caller-file@^2.0.5: version "2.0.5" resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== @@ -4335,6 +4352,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash._reinterpolate@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" + integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0= + lodash.clonedeep@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" @@ -4345,11 +4367,51 @@ lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= +lodash.frompairs@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz#bc4e5207fa2757c136e573614e9664506b2b1bd2" + integrity sha1-vE5SB/onV8E25XNhTpZkUGsrG9I= + +lodash.isequal@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" + integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA= + +lodash.isstring@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451" + integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE= + lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== +lodash.omit@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60" + integrity sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA= + +lodash.pick@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3" + integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM= + +lodash.template@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab" + integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A== + dependencies: + lodash._reinterpolate "^3.0.0" + lodash.templatesettings "^4.0.0" + +lodash.templatesettings@^4.0.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33" + integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ== + dependencies: + lodash._reinterpolate "^3.0.0" + lodash.throttle@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" @@ -5475,6 +5537,20 @@ react-native-tab-view@^2.16.0: version "2.0.0-rc16" resolved "https://github.com/austinried/react-native-track-player#358fd07b817575a494688dca5b093eebc0865a5d" +react-native-vector-icons@^8.1.0: + version "8.1.0" + resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz#e8ee2b17bc4d9f636da1c6f67feee8e2a850c3d8" + integrity sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg== + dependencies: + lodash.frompairs "^4.0.1" + lodash.isequal "^4.5.0" + lodash.isstring "^4.0.1" + lodash.omit "^4.5.0" + lodash.pick "^4.4.0" + lodash.template "^4.5.0" + prop-types "^15.7.2" + yargs "^16.1.1" + react-native@0.64.1: version "0.64.1" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.64.1.tgz#cd38f5b47b085549686f34eb0c9dcd466f307635" @@ -6780,6 +6856,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrappy@1: version "1.0.2" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" @@ -6869,6 +6954,11 @@ y18n@^4.0.0: resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf" integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ== +y18n@^5.0.5: + version "5.0.8" + resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55" + integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA== + yallist@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72" @@ -6882,6 +6972,11 @@ yargs-parser@^18.1.2: camelcase "^5.0.0" decamelize "^1.2.0" +yargs-parser@^20.2.2: + version "20.2.9" + resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee" + integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w== + yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1: version "15.4.1" resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8" @@ -6898,3 +6993,16 @@ yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1: which-module "^2.0.0" y18n "^4.0.0" yargs-parser "^18.1.2" + +yargs@^16.1.1: + version "16.2.0" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66" + integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw== + dependencies: + cliui "^7.0.2" + escalade "^3.1.1" + get-caller-file "^2.0.5" + require-directory "^2.1.1" + string-width "^4.2.0" + y18n "^5.0.5" + yargs-parser "^20.2.2"