Skip to content

Commit adbf3a4

Browse files
author
Aylin
committed
feat: added basic routing
1 parent f35b883 commit adbf3a4

16 files changed

+828
-4
lines changed

‎app.json‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,37 @@
1818
"**/*"
1919
],
2020
"ios": {
21-
"supportsTablet": true
21+
"supportsTablet": true,
22+
"bundleIdentifier": "com.mirahi.floatingPlayer"
2223
},
2324
"android": {
2425
"adaptiveIcon": {
2526
"foregroundImage": "./assets/adaptive-icon.png",
2627
"backgroundColor": "#FFFFFF"
27-
}
28+
},
29+
"package": "com.mirahi.floatingPlayer"
2830
},
2931
"web": {
3032
"favicon": "./assets/favicon.png"
3133
},
32-
"scheme": "expo-floating-player"
34+
"scheme": "expo-floating-player",
35+
"extra": {
36+
"eas": {
37+
"projectId": "8c631569-90dd-4dfa-b70c-678499d28672"
38+
}
39+
},
40+
"plugins": [
41+
[
42+
"expo-build-properties",
43+
{
44+
"android": {
45+
"compileSdkVersion": 33,
46+
"targetSdkVersion": 31,
47+
"buildToolsVersion": "31.0.0",
48+
"kotlinVersion": "1.7.20"
49+
}
50+
}
51+
]
52+
]
3353
}
3454
}

‎app/(tabs)/_layout.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Tabs} from 'expo-router';
2+
import React from 'react';
3+
4+
export default function Layout() {
5+
return (
6+
<Tabs initialRouteName="index">
7+
<Tabs.Screen
8+
name="index"
9+
options={{title: 'Home', tabBarLabel: 'Home'}}
10+
/>
11+
<Tabs.Screen
12+
name="library"
13+
options={{title: 'Library', tabBarLabel: 'Library'}}
14+
/>
15+
</Tabs>
16+
);
17+
}

‎app/(tabs)/index.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, {FC} from 'react';
2+
import {Button, StyleSheet, View} from 'react-native';
3+
import {useLink} from 'expo-router';
4+
import {RootStackScreenProps, Routes} from '../../routes.types';
5+
import {songs} from '../../songs';
6+
7+
const HomeScreen: FC<RootStackScreenProps<Routes.HOME>> = () => {
8+
const {push} = useLink();
9+
10+
return (
11+
<View style={styles.centered_horizontal}>
12+
<Button
13+
title="Open player"
14+
onPress={() =>
15+
push({
16+
pathname: 'player',
17+
params: {index: 0, queue: songs},
18+
})
19+
}
20+
/>
21+
</View>
22+
);
23+
};
24+
25+
const styles = StyleSheet.create({
26+
centered_horizontal: {
27+
flex: 1,
28+
justifyContent: 'center',
29+
alignItems: 'center',
30+
},
31+
});
32+
33+
export default HomeScreen;

‎app/(tabs)/library.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import {Text, View} from 'react-native';
2+
import React from 'react';
3+
4+
const Library = () => {
5+
return (
6+
<View>
7+
<Text>Library</Text>
8+
</View>
9+
);
10+
};
11+
12+
export default Library;

‎app/_layout.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {Stack} from 'expo-router';
2+
import React from 'react';
3+
4+
export default function Layout() {
5+
return (
6+
<Stack>
7+
<Stack.Screen name="(tabs)" options={{headerShown: false}} />
8+
<Stack.Screen
9+
name="player"
10+
options={{title: 'Player', presentation: 'modal'}}
11+
/>
12+
</Stack>
13+
);
14+
}

‎app/player.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {Text, View} from 'react-native';
2+
import React from 'react';
3+
import {useHref} from 'expo-router';
4+
5+
const Player = () => {
6+
const {pathname, href} = useHref();
7+
8+
console.log('/home pathname', pathname, 'href', href);
9+
10+
return (
11+
<View>
12+
<Text>Player</Text>
13+
</View>
14+
);
15+
};
16+
export default Player;
17+
18+
// import React, {FC, useEffect} from 'react';
19+
// import {ActivityIndicator, Image, StyleSheet, Text, View} from 'react-native';
20+
// import TrackPlayer from 'react-native-track-player';
21+
// import {RootStackScreenProps, Routes} from '../routes.types';
22+
// import {usePlayerControls} from '../player.utils';
23+
// import {Controls} from '../components/Controls';
24+
//
25+
// const Player: FC<RootStackScreenProps<Routes.PLAYER>> = ({
26+
// route: {
27+
// params: {position = 0, index, queue},
28+
// },
29+
// }) => {
30+
// const {controls, currentTrack} = usePlayerControls();
31+
//
32+
// useEffect(() => {
33+
// const handleQueue = async () => {
34+
// await TrackPlayer.add(queue);
35+
// if (index >= 0) {
36+
// await TrackPlayer.skip(index);
37+
// }
38+
// if (position && position > 0) {
39+
// await TrackPlayer.seekTo(position);
40+
// }
41+
// };
42+
//
43+
// handleQueue();
44+
// }, [index, queue, position]);
45+
//
46+
// if (!currentTrack) {
47+
// return <ActivityIndicator style={styles.centered_horizontal} />;
48+
// }
49+
//
50+
// return (
51+
// <View style={styles.centered_horizontal}>
52+
// <Text>
53+
// {currentTrack.title} - {currentTrack.artist}
54+
// </Text>
55+
// {currentTrack.artwork && typeof currentTrack.artwork === 'string' && (
56+
// <Image
57+
// resizeMode="cover"
58+
// style={styles.image_dimensions}
59+
// source={{uri: currentTrack.artwork}}
60+
// />
61+
// )}
62+
// <Controls {...controls} />
63+
// </View>
64+
// );
65+
// };
66+
//
67+
// const styles = StyleSheet.create({
68+
// centered_horizontal: {
69+
// flex: 1,
70+
// alignItems: 'center',
71+
// justifyContent: 'center',
72+
// },
73+
// image_dimensions: {
74+
// width: 400,
75+
// height: 500,
76+
// },
77+
// });
78+
//
79+
// export default Player;

‎components/Controls.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import {Button, StyleSheet, View} from 'react-native';
2+
import React, {FC} from 'react';
3+
import Slider from '@react-native-community/slider';
4+
import {Controls as ControlProps} from '../player.utils';
5+
6+
export const Controls: FC<ControlProps> = ({
7+
startTrack,
8+
skipToNextTrack,
9+
skipToPreviousTrack,
10+
duration,
11+
position,
12+
isPlaying,
13+
}) => {
14+
return (
15+
<View>
16+
<Slider maximumValue={duration} minimumValue={0} value={position} />
17+
<View style={styles.row_spaced_evenly}>
18+
<Button title="prev" onPress={skipToPreviousTrack} />
19+
<Button title={isPlaying ? 'play' : 'pause'} onPress={startTrack} />
20+
<Button title="next" onPress={skipToNextTrack} />
21+
</View>
22+
</View>
23+
);
24+
};
25+
26+
const styles = StyleSheet.create({
27+
row_spaced_evenly: {
28+
display: 'flex',
29+
justifyContent: 'space-evenly',
30+
flexDirection: 'row',
31+
},
32+
});

‎components/CustomBottomTabBar.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {BottomTabBar, BottomTabBarProps} from '@react-navigation/bottom-tabs';
2+
import {FloatingPlayer} from './FloatingPlayer';
3+
import {View} from 'react-native';
4+
import React from 'react';
5+
6+
export const CustomBottomTabBar = (props: BottomTabBarProps) => (
7+
<View>
8+
<FloatingPlayer />
9+
<BottomTabBar {...props} />
10+
</View>
11+
);

‎components/FloatingPlayer.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import {Alert, Button, Pressable, StyleSheet, Text, View} from 'react-native';
2+
import React from 'react';
3+
import Slider from '@react-native-community/slider';
4+
import {usePlayerControls} from '../../../services/player/player.utils';
5+
6+
export const FloatingPlayer = () => {
7+
// const {navigate} = useNavigation<NavigationProp<RootStackParamList>>();
8+
const {
9+
currentTrackIndex,
10+
currentTrack,
11+
controls: {isPlaying, startTrack, position, duration},
12+
} = usePlayerControls();
13+
14+
if (!currentTrack) {
15+
return null;
16+
}
17+
18+
const {artist, title} = currentTrack;
19+
20+
const playerPressHandler = () => {
21+
Alert.alert('Open player');
22+
};
23+
// navigate(Routes.PLAYER, {
24+
// index:
25+
// currentTrackIndex && currentTrackIndex >= 0 ? currentTrackIndex : 0,
26+
// position: position,
27+
// queue: songs,
28+
// });
29+
30+
return (
31+
<Pressable onPress={playerPressHandler}>
32+
<View style={styles.container}>
33+
<View style={styles.centered_row_space_between}>
34+
<Text>
35+
{title} - {artist}
36+
</Text>
37+
<Button title={isPlaying ? 'play' : 'pause'} onPress={startTrack} />
38+
</View>
39+
<Slider maximumValue={duration} minimumValue={0} value={position} />
40+
</View>
41+
</Pressable>
42+
);
43+
};
44+
45+
const styles = StyleSheet.create({
46+
centered_row_space_between: {
47+
flexDirection: 'row',
48+
alignItems: 'center',
49+
justifyContent: 'space-between',
50+
},
51+
container: {
52+
backgroundColor: '#cecece',
53+
paddingHorizontal: 8,
54+
paddingVertical: 8,
55+
},
56+
});

‎eas.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"cli": {
3+
"version": ">= 3.1.1"
4+
},
5+
"build": {
6+
"development": {
7+
"developmentClient": true,
8+
"distribution": "internal"
9+
},
10+
"development-simulator": {
11+
"developmentClient": true,
12+
"distribution": "internal",
13+
"ios": {
14+
"simulator": true
15+
}
16+
},
17+
"preview": {
18+
"distribution": "internal"
19+
},
20+
"production": {}
21+
},
22+
"submit": {
23+
"production": {}
24+
}
25+
}

0 commit comments

Comments
 (0)