Skip to content

Commit afb1bd6

Browse files
ImHamzaAnwerImHamzaAnwer
committed
integrated audio player
1 parent 05c47c3 commit afb1bd6

File tree

12 files changed

+688
-4
lines changed

12 files changed

+688
-4
lines changed

‎babel.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
module.exports = {
2+
plugins: [
3+
'react-native-reanimated/plugin',
4+
],
25
presets: ['module:metro-react-native-babel-preset'],
36
};

‎ios/Podfile.lock

+46
Original file line numberDiff line numberDiff line change
@@ -954,9 +954,16 @@ PODS:
954954
- RCTTypeSafety
955955
- React-Core
956956
- ReactCommon/turbomodule/core
957+
- react-native-slider (4.4.2):
958+
- React-Core
957959
- react-native-track-player (3.2.0):
958960
- React-Core
959961
- SwiftAudioEx (= 0.15.3)
962+
- react-native-video (5.2.1):
963+
- React-Core
964+
- react-native-video/Video (= 5.2.1)
965+
- react-native-video/Video (5.2.1):
966+
- React-Core
960967
- React-perflogger (0.71.5)
961968
- React-RCTActionSheet (0.71.5):
962969
- React-Core/RCTActionSheetHeaders (= 0.71.5)
@@ -1054,6 +1061,33 @@ PODS:
10541061
- RNFBApp
10551062
- RNGestureHandler (2.9.0):
10561063
- React-Core
1064+
- RNReanimated (3.0.0):
1065+
- DoubleConversion
1066+
- FBLazyVector
1067+
- FBReactNativeSpec
1068+
- glog
1069+
- RCT-Folly
1070+
- RCTRequired
1071+
- RCTTypeSafety
1072+
- React-callinvoker
1073+
- React-Core
1074+
- React-Core/DevSupport
1075+
- React-Core/RCTWebSocket
1076+
- React-CoreModules
1077+
- React-cxxreact
1078+
- React-jsi
1079+
- React-jsiexecutor
1080+
- React-jsinspector
1081+
- React-RCTActionSheet
1082+
- React-RCTAnimation
1083+
- React-RCTBlob
1084+
- React-RCTImage
1085+
- React-RCTLinking
1086+
- React-RCTNetwork
1087+
- React-RCTSettings
1088+
- React-RCTText
1089+
- ReactCommon/turbomodule/core
1090+
- Yoga
10571091
- RNScreens (3.20.0):
10581092
- React-Core
10591093
- React-RCTImage
@@ -1086,7 +1120,9 @@ DEPENDENCIES:
10861120
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
10871121
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
10881122
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
1123+
- "react-native-slider (from `../node_modules/@react-native-community/slider`)"
10891124
- react-native-track-player (from `../node_modules/react-native-track-player`)
1125+
- react-native-video (from `../node_modules/react-native-video`)
10901126
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
10911127
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
10921128
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -1105,6 +1141,7 @@ DEPENDENCIES:
11051141
- "RNFBAuth (from `../node_modules/@react-native-firebase/auth`)"
11061142
- "RNFBFirestore (from `../node_modules/@react-native-firebase/firestore`)"
11071143
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
1144+
- RNReanimated (from `../node_modules/react-native-reanimated`)
11081145
- RNScreens (from `../node_modules/react-native-screens`)
11091146
- RNSVG (from `../node_modules/react-native-svg`)
11101147
- RNVectorIcons (from `../node_modules/react-native-vector-icons`)
@@ -1171,8 +1208,12 @@ EXTERNAL SOURCES:
11711208
:path: "../node_modules/react-native/ReactCommon/logger"
11721209
react-native-safe-area-context:
11731210
:path: "../node_modules/react-native-safe-area-context"
1211+
react-native-slider:
1212+
:path: "../node_modules/@react-native-community/slider"
11741213
react-native-track-player:
11751214
:path: "../node_modules/react-native-track-player"
1215+
react-native-video:
1216+
:path: "../node_modules/react-native-video"
11761217
React-perflogger:
11771218
:path: "../node_modules/react-native/ReactCommon/reactperflogger"
11781219
React-RCTActionSheet:
@@ -1209,6 +1250,8 @@ EXTERNAL SOURCES:
12091250
:path: "../node_modules/@react-native-firebase/firestore"
12101251
RNGestureHandler:
12111252
:path: "../node_modules/react-native-gesture-handler"
1253+
RNReanimated:
1254+
:path: "../node_modules/react-native-reanimated"
12121255
RNScreens:
12131256
:path: "../node_modules/react-native-screens"
12141257
RNSVG:
@@ -1255,7 +1298,9 @@ SPEC CHECKSUMS:
12551298
React-jsinspector: 14a342151ab810862998dfc99e2720746734e9b3
12561299
React-logger: 94ec392ae471683635e4bf874d4e82f675399d2d
12571300
react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc
1301+
react-native-slider: 33b8d190b59d4f67a541061bb91775d53d617d9d
12581302
react-native-track-player: 0c26d981b5097910486cbbeb6d8f5352d41be069
1303+
react-native-video: c26780b224543c62d5e1b2a7244a5cd1b50e8253
12591304
React-perflogger: 883a55a9a899535eaf06d0029108ef9ef22cce92
12601305
React-RCTActionSheet: 1a3b8416688a3d291367be645022886f71d6842a
12611306
React-RCTAnimation: e5560cb72d91ba35151d51e2eb0d467b42763f43
@@ -1274,6 +1319,7 @@ SPEC CHECKSUMS:
12741319
RNFBAuth: d30acc0f5f169bc28c7fcbf1b45cd061cc647590
12751320
RNFBFirestore: c505e6f96e70fb029ae1961c73965fd13ce92db5
12761321
RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
1322+
RNReanimated: a71e12c5fcf4f01bd7cfc286cb83467cab89e5c2
12771323
RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
12781324
RNSVG: 53c661b76829783cdaf9b7a57258f3d3b4c28315
12791325
RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8

‎package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"dependencies": {
1313
"@react-native-async-storage/async-storage": "^1.18.1",
14+
"@react-native-community/slider": "^4.4.2",
1415
"@react-native-firebase/app": "^17.4.2",
1516
"@react-native-firebase/auth": "^17.4.2",
1617
"@react-native-firebase/firestore": "^17.4.2",
@@ -25,11 +26,13 @@
2526
"react-native-modal": "^13.0.1",
2627
"react-native-otp-textinput": "^1.0.0",
2728
"react-native-progress": "^5.0.0",
29+
"react-native-reanimated": "3.0.0",
2830
"react-native-safe-area-context": "^4.5.0",
2931
"react-native-screens": "^3.20.0",
3032
"react-native-svg": "^13.9.0",
3133
"react-native-track-player": "^3.2.0",
32-
"react-native-vector-icons": "^9.2.0"
34+
"react-native-vector-icons": "^9.2.0",
35+
"react-native-video": "^5.2.1"
3336
},
3437
"devDependencies": {
3538
"@babel/core": "^7.20.0",

‎src/components/AudioPlayer/AlbumArt.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
3+
import {
4+
View,
5+
Text,
6+
StyleSheet,
7+
Image,
8+
TouchableHighlight,
9+
TouchableOpacity,
10+
Dimensions,
11+
} from 'react-native';
12+
import {APP_COLORS} from '../../config/colors';
13+
import AppText from '../AppText';
14+
15+
const AlbumArt = ({title, artist, url, onPress}) => (
16+
<>
17+
<View style={styles.container}>
18+
<TouchableOpacity onPress={onPress}>
19+
<View
20+
style={[
21+
styles.image,
22+
{
23+
borderRadius: 20,
24+
backgroundColor: APP_COLORS.itemBackground,
25+
},
26+
]}>
27+
<Image
28+
style={[styles.image, {borderRadius: 20}]}
29+
source={{uri: url}}
30+
/>
31+
</View>
32+
</TouchableOpacity>
33+
</View>
34+
35+
<View style={styles.trackDetailsContainer}>
36+
<AppText textType="heading" style={styles.title}>
37+
{title}
38+
</AppText>
39+
<AppText style={styles.artist}>{artist}</AppText>
40+
</View>
41+
</>
42+
);
43+
44+
export default AlbumArt;
45+
46+
const {width, height} = Dimensions.get('window');
47+
const imageSize = width - 100;
48+
49+
const styles = StyleSheet.create({
50+
container: {
51+
alignItems: 'center',
52+
marginTop: 30,
53+
paddingLeft: 24,
54+
paddingRight: 24,
55+
},
56+
image: {
57+
resizeMode: 'cover',
58+
width: imageSize,
59+
height: imageSize,
60+
},
61+
trackDetailsContainer: {
62+
marginTop: 50,
63+
paddingHorizontal: 15,
64+
},
65+
title: {
66+
fontSize: 16,
67+
marginBottom: 0,
68+
},
69+
artist: {
70+
marginBottom: 0,
71+
fontSize: 13,
72+
},
73+
});

‎src/components/AudioPlayer/AudioHeader.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {useNavigation} from '@react-navigation/native';
2+
import React from 'react';
3+
import {StyleSheet, Text, View} from 'react-native';
4+
import AppText from '../AppText';
5+
6+
const AudioHeader = ({title, message}) => {
7+
const navigation = useNavigation();
8+
return (
9+
<View style={styles.container}>
10+
<AppText
11+
style={{marginBottom: 0, width: 40}}
12+
onPress={() => navigation.goBack()}>
13+
Back
14+
</AppText>
15+
<View>
16+
<AppText style={styles.message} onPress={() => navigation.goBack()}>
17+
{message}
18+
</AppText>
19+
<AppText
20+
textType="heading"
21+
style={styles.title}
22+
onPress={() => navigation.goBack()}>
23+
{title}
24+
</AppText>
25+
</View>
26+
<View style={{width: 40}} />
27+
</View>
28+
);
29+
};
30+
31+
const styles = StyleSheet.create({
32+
container: {
33+
paddingHorizontal: 15,
34+
flexDirection: 'row',
35+
alignItems: 'center',
36+
justifyContent: 'space-between',
37+
},
38+
message: {
39+
marginBottom: 3,
40+
textTransform: 'uppercase',
41+
fontSize: 14,
42+
textAlign: 'center',
43+
},
44+
title: {
45+
textAlign: 'center',
46+
fontSize: 18,
47+
},
48+
});
49+
50+
export default AudioHeader;

‎src/components/AudioPlayer/Controls.js

+108
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import React from 'react';
2+
// import { defaultString } from '../String/defaultStringValue';
3+
4+
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
5+
6+
const Controls = ({
7+
paused,
8+
shuffleOn,
9+
repeatOn,
10+
onPressPlay,
11+
onPressPause,
12+
onBack,
13+
onForward,
14+
onPressShuffle,
15+
onPressRepeat,
16+
forwardDisabled,
17+
}) => (
18+
<View style={styles.container}>
19+
<TouchableOpacity activeOpacity={0.0} onPress={onPressShuffle}>
20+
<Image
21+
style={[
22+
{width: 15, height: 15},
23+
styles.secondaryControl,
24+
shuffleOn ? [] : styles.off,
25+
]}
26+
source={require('../../assets/images/logo.png')}
27+
/>
28+
<Text>Shuffle</Text>
29+
</TouchableOpacity>
30+
<TouchableOpacity onPress={onBack}>
31+
<Image
32+
style={{width: 20, height: 20}}
33+
source={require('../../assets/images/logo.png')}
34+
/>
35+
36+
<Text>back</Text>
37+
</TouchableOpacity>
38+
{!paused ? (
39+
<TouchableOpacity onPress={onPressPause}>
40+
<View style={styles.playButton}>
41+
<Image
42+
style={{width: 15, height: 15}}
43+
source={require('../../assets/images/logo.png')}
44+
/>
45+
46+
<Text>play</Text>
47+
</View>
48+
</TouchableOpacity>
49+
) : (
50+
<TouchableOpacity onPress={onPressPlay}>
51+
<View style={styles.playButton}>
52+
<Image
53+
style={{width: 15, height: 15}}
54+
source={require('../../assets/images/logo.png')}
55+
/>
56+
</View>
57+
</TouchableOpacity>
58+
)}
59+
<TouchableOpacity onPress={onForward} disabled={forwardDisabled}>
60+
<Image
61+
style={[{width: 15, height: 15}, forwardDisabled && {opacity: 0.3}]}
62+
source={require('../../assets/images/logo.png')}
63+
/>
64+
65+
<Text>forward</Text>
66+
</TouchableOpacity>
67+
<TouchableOpacity activeOpacity={0.0} onPress={onPressRepeat}>
68+
<Image
69+
style={[
70+
styles.secondaryControl,
71+
repeatOn ? [] : styles.off,
72+
{width: 15, height: 15},
73+
]}
74+
source={require('../../assets/images/logo.png')}
75+
/>
76+
77+
<Text>repeat</Text>
78+
</TouchableOpacity>
79+
</View>
80+
);
81+
82+
export default Controls;
83+
84+
const styles = StyleSheet.create({
85+
container: {
86+
flexDirection: 'row',
87+
alignItems: 'center',
88+
justifyContent: 'space-around',
89+
paddingTop: 8,
90+
},
91+
playButton: {
92+
height: 15,
93+
width: 15,
94+
resizeMode: 'contain',
95+
borderWidth: 1,
96+
// borderColor: defaultString.darkColor,
97+
borderRadius: 72 / 2,
98+
alignItems: 'center',
99+
justifyContent: 'center',
100+
},
101+
secondaryControl: {
102+
height: 18,
103+
width: 18,
104+
},
105+
off: {
106+
opacity: 0.3,
107+
},
108+
});

0 commit comments

Comments
 (0)