Makussu/subtracks
1
0
Fork 0
mirror of https://github.com/austinried/subtracks.git synced 2025-12-27 00:59:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

migrating to react-native-vector-icons

Browse Source
This commit is contained in:
austinried 2021-07-07 18:39:11 +09:00
parent 7c3fea69db
commit abc9ed2bc6
25 changed files with 363 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
android/app/src/main/assets/fonts/AntDesign.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Entypo.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/EvilIcons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Feather.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome5_Brands.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome5_Regular.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/FontAwesome5_Solid.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Fontisto.ttf Executable file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Foundation.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Ionicons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/MaterialIcons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Octicons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/SimpleLineIcons.ttf Normal file
View File

Binary file not shown.

BIN
android/app/src/main/assets/fonts/Zocial.ttf Normal file
View File

Binary file not shown.

1
android/app/src/main/java/com/subsonify/MainApplication.java
View File

@ -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;

2
android/settings.gradle
View File

@ -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)

2
ios/Podfile
View File

@ -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

64
ios/SubSonify.xcodeproj/project.pbxproj
View File

@ -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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>"; 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 = "<group>";
@ -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;
};

16
ios/SubSonify/Info.plist
View File

@ -71,6 +71,22 @@
<string>Metropolis-SemiBoldItalic.otf</string>
<string>Metropolis-Thin.otf</string>
<string>Metropolis-ThinItalic.otf</string>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Fontisto.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>Octicons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Zocial.ttf</string>
</array>
</dict>
</plist>

2
package.json
View File

@ -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",

200
src/components/NowPlayingLayout.tsx
View File

@ -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 (
<View style={headerStyles.container}>
<PressableImage
onPress={() => navigation.goBack()}
source={require('../../res/arrow_left-fill.png')}
style={headerStyles.icons}
tintColor="white"
hitSlop={12}
ripple={true}
padding={18}
/>
<Text numberOfLines={2} style={headerStyles.queueName}>
<PressableOpacity onPress={() => navigation.goBack()} style={headerStyles.icons} ripple={true}>
<IconMat name="arrow-back" color="white" size={25} />
</PressableOpacity>
<Text numberOfLines={1} style={headerStyles.queueName}>
{queueName || 'Nothing playing...'}
</Text>
<PressableImage
onPress={() => {}}
source={require('../../res/more_vertical.png')}
style={headerStyles.icons}
tintColor="white"
hitSlop={12}
ripple={true}
padding={18}
/>
<PressableOpacity onPress={undefined} style={headerStyles.icons} ripple={true}>
<IconMat name="more-vert" color="white" size={25} />
</PressableOpacity>
</View>
)
}
@ -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 (
<View style={infoStyles.container}>
<Text numberOfLines={1} style={infoStyles.title}>
{track?.title}
</Text>
<Text numberOfLines={1} style={infoStyles.artist}>
{track?.artist}
</Text>
<View style={infoStyles.details}>
<Text numberOfLines={1} style={infoStyles.title}>
{track?.title}
</Text>
<Text numberOfLines={1} style={infoStyles.artist}>
{track?.artist}
</Text>
</View>
<View style={infoStyles.controls}>
<PressableOpacity onPress={undefined}>
<IconFA name="star-o" size={32} color={colors.text.secondary} />
</PressableOpacity>
</View>
</View>
)
}
@ -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 (
<View style={controlsStyles.container}>
<PressableImage
onPress={disabled ? undefined : previous}
source={require('../../res/previous-fill.png')}
style={controlsStyles.skip}
disabled={disabled}
/>
<PressableImage
onPress={playPauseAction}
source={playPauseIcon}
style={controlsStyles.play}
disabled={disabled}
/>
<PressableImage
onPress={disabled ? undefined : next}
source={require('../../res/next-fill.png')}
style={controlsStyles.skip}
disabled={disabled}
/>
<View style={controlsStyles.top}>
<View style={controlsStyles.center}>
<PressableOpacity onPress={undefined} disabled={disabled}>
<Icon name="repeat" size={26} color="white" />
</PressableOpacity>
</View>
<View style={controlsStyles.center}>
<PressableOpacity onPress={previous} disabled={disabled}>
<IconFA5 name="step-backward" size={36} color="white" />
</PressableOpacity>
<PressableOpacity onPress={playPauseAction} disabled={disabled} style={controlsStyles.play}>
<IconFA name={playPauseIcon} size={82} color="white" />
</PressableOpacity>
<PressableOpacity onPress={next} disabled={disabled}>
<IconFA5 name="step-forward" size={36} color="white" />
</PressableOpacity>
</View>
<View style={controlsStyles.center}>
<PressableOpacity onPress={undefined} disabled={disabled}>
<Icon name="shuffle" size={26} color="white" />
</PressableOpacity>
</View>
</View>
<View style={controlsStyles.bottom}>
<PressableOpacity onPress={undefined} disabled={disabled}>
<IconMatCom name="cast-audio" size={20} color="white" />
</PressableOpacity>
<PressableOpacity onPress={undefined} disabled={disabled}>
<IconMatCom name="playlist-play" size={24} color="white" />
</PressableOpacity>
</View>
</View>
)
}
@ -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 (
<View
style={{
flex: 1,
paddingTop: StatusBar.currentHeight,
}}>
<View style={styles.container}>
<ImageGradientBackground imageUri={track?.artworkThumb as string} imageKey={`${track?.album}${track?.artist}`} />
<NowPlayingHeader />
<SongCoverArt />
<SongInfo />
<SeekBar />
<PlayerControls />
<View style={styles.content}>
<SongCoverArt />
<SongInfo />
<SeekBar />
<PlayerControls />
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: StatusBar.currentHeight,
},
content: {
flex: 1,
paddingHorizontal: 30,
},
})
export default NowPlayingLayout

44
src/components/common/PressableOpacity.tsx Normal file
View File

@ -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<PressableOpacityProps> = props => {
const [opacity, setOpacity] = useState(1)
const [dimensions, setDimensions] = useState<LayoutRectangle | undefined>(undefined)
useEffect(() => {
props.disabled === true ? setOpacity(0.3) : setOpacity(1)
}, [props.disabled])
return (
<Pressable
{...props}
style={[{ justifyContent: 'center', alignItems: 'center' }, props.style as any, { opacity }]}
android_ripple={
props.ripple
? {
color: 'rgba(255,255,255,0.26)',
radius: dimensions ? dimensions.width / 2 : undefined,
}
: undefined
}
onLayout={event => setDimensions(event.nativeEvent.layout)}
onPressIn={() => {
if (!props.disabled) {
setOpacity(0.4)
}
}}
onPressOut={() => {
if (!props.disabled) {
setOpacity(1)
}
}}>
{props.children}
</Pressable>
)
}
export default PressableOpacity

112
yarn.lock
View File

@ -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"