feat: added basic routing

app.json

@@ -18,17 +18,37 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.mirahi.floatingPlayer"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#FFFFFF"
-      }
+      },
+      "package": "com.mirahi.floatingPlayer"
     },
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "scheme": "expo-floating-player"
+    "scheme": "expo-floating-player",
+    "extra": {
+      "eas": {
+        "projectId": "8c631569-90dd-4dfa-b70c-678499d28672"
+      }
+    },
+    "plugins": [
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "compileSdkVersion": 33,
+            "targetSdkVersion": 31,
+            "buildToolsVersion": "31.0.0",
+            "kotlinVersion": "1.7.20"
+          }
+        }
+      ]
+    ]
   }
 }

app/(tabs)/_layout.tsx

@@ -0,0 +1,17 @@
+import {Tabs} from 'expo-router';
+import React from 'react';
+
+export default function Layout() {
+  return (
+    <Tabs initialRouteName="index">
+      <Tabs.Screen
+        name="index"
+        options={{title: 'Home', tabBarLabel: 'Home'}}
+      />
+      <Tabs.Screen
+        name="library"
+        options={{title: 'Library', tabBarLabel: 'Library'}}
+      />
+    </Tabs>
+  );
+}

app/(tabs)/index.tsx

@@ -0,0 +1,33 @@
+import React, {FC} from 'react';
+import {Button, StyleSheet, View} from 'react-native';
+import {useLink} from 'expo-router';
+import {RootStackScreenProps, Routes} from '../../routes.types';
+import {songs} from '../../songs';
+
+const HomeScreen: FC<RootStackScreenProps<Routes.HOME>> = () => {
+  const {push} = useLink();
+
+  return (
+    <View style={styles.centered_horizontal}>
+      <Button
+        title="Open player"
+        onPress={() =>
+          push({
+            pathname: 'player',
+            params: {index: 0, queue: songs},
+          })
+        }
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  centered_horizontal: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default HomeScreen;

app/(tabs)/library.tsx

@@ -0,0 +1,12 @@
+import {Text, View} from 'react-native';
+import React from 'react';
+
+const Library = () => {
+  return (
+    <View>
+      <Text>Library</Text>
+    </View>
+  );
+};
+
+export default Library;

app/_layout.tsx

@@ -0,0 +1,14 @@
+import {Stack} from 'expo-router';
+import React from 'react';
+
+export default function Layout() {
+  return (
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{headerShown: false}} />
+      <Stack.Screen
+        name="player"
+        options={{title: 'Player', presentation: 'modal'}}
+      />
+    </Stack>
+  );
+}

app/player.tsx

@@ -0,0 +1,79 @@
+import {Text, View} from 'react-native';
+import React from 'react';
+import {useHref} from 'expo-router';
+
+const Player = () => {
+  const {pathname, href} = useHref();
+
+  console.log('/home pathname', pathname, 'href', href);
+
+  return (
+    <View>
+      <Text>Player</Text>
+    </View>
+  );
+};
+export default Player;
+
+// import React, {FC, useEffect} from 'react';
+// import {ActivityIndicator, Image, StyleSheet, Text, View} from 'react-native';
+// import TrackPlayer from 'react-native-track-player';
+// import {RootStackScreenProps, Routes} from '../routes.types';
+// import {usePlayerControls} from '../player.utils';
+// import {Controls} from '../components/Controls';
+//
+// const Player: FC<RootStackScreenProps<Routes.PLAYER>> = ({
+//   route: {
+//     params: {position = 0, index, queue},
+//   },
+// }) => {
+//   const {controls, currentTrack} = usePlayerControls();
+//
+//   useEffect(() => {
+//     const handleQueue = async () => {
+//       await TrackPlayer.add(queue);
+//       if (index >= 0) {
+//         await TrackPlayer.skip(index);
+//       }
+//       if (position && position > 0) {
+//         await TrackPlayer.seekTo(position);
+//       }
+//     };
+//
+//     handleQueue();
+//   }, [index, queue, position]);
+//
+//   if (!currentTrack) {
+//     return <ActivityIndicator style={styles.centered_horizontal} />;
+//   }
+//
+//   return (
+//     <View style={styles.centered_horizontal}>
+//       <Text>
+//         {currentTrack.title} - {currentTrack.artist}
+//       </Text>
+//       {currentTrack.artwork && typeof currentTrack.artwork === 'string' && (
+//         <Image
+//           resizeMode="cover"
+//           style={styles.image_dimensions}
+//           source={{uri: currentTrack.artwork}}
+//         />
+//       )}
+//       <Controls {...controls} />
+//     </View>
+//   );
+// };
+//
+// const styles = StyleSheet.create({
+//   centered_horizontal: {
+//     flex: 1,
+//     alignItems: 'center',
+//     justifyContent: 'center',
+//   },
+//   image_dimensions: {
+//     width: 400,
+//     height: 500,
+//   },
+// });
+//
+// export default Player;

components/Controls.tsx

@@ -0,0 +1,32 @@
+import {Button, StyleSheet, View} from 'react-native';
+import React, {FC} from 'react';
+import Slider from '@react-native-community/slider';
+import {Controls as ControlProps} from '../player.utils';
+
+export const Controls: FC<ControlProps> = ({
+  startTrack,
+  skipToNextTrack,
+  skipToPreviousTrack,
+  duration,
+  position,
+  isPlaying,
+}) => {
+  return (
+    <View>
+      <Slider maximumValue={duration} minimumValue={0} value={position} />
+      <View style={styles.row_spaced_evenly}>
+        <Button title="prev" onPress={skipToPreviousTrack} />
+        <Button title={isPlaying ? 'play' : 'pause'} onPress={startTrack} />
+        <Button title="next" onPress={skipToNextTrack} />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  row_spaced_evenly: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    flexDirection: 'row',
+  },
+});

components/CustomBottomTabBar.tsx

@@ -0,0 +1,11 @@
+import {BottomTabBar, BottomTabBarProps} from '@react-navigation/bottom-tabs';
+import {FloatingPlayer} from './FloatingPlayer';
+import {View} from 'react-native';
+import React from 'react';
+
+export const CustomBottomTabBar = (props: BottomTabBarProps) => (
+  <View>
+    <FloatingPlayer />
+    <BottomTabBar {...props} />
+  </View>
+);

components/FloatingPlayer.tsx

@@ -0,0 +1,56 @@
+import {Alert, Button, Pressable, StyleSheet, Text, View} from 'react-native';
+import React from 'react';
+import Slider from '@react-native-community/slider';
+import {usePlayerControls} from '../../../services/player/player.utils';
+
+export const FloatingPlayer = () => {
+  // const {navigate} = useNavigation<NavigationProp<RootStackParamList>>();
+  const {
+    currentTrackIndex,
+    currentTrack,
+    controls: {isPlaying, startTrack, position, duration},
+  } = usePlayerControls();
+
+  if (!currentTrack) {
+    return null;
+  }
+
+  const {artist, title} = currentTrack;
+
+  const playerPressHandler = () => {
+    Alert.alert('Open player');
+  };
+  // navigate(Routes.PLAYER, {
+  //   index:
+  //     currentTrackIndex && currentTrackIndex >= 0 ? currentTrackIndex : 0,
+  //   position: position,
+  //   queue: songs,
+  // });
+
+  return (
+    <Pressable onPress={playerPressHandler}>
+      <View style={styles.container}>
+        <View style={styles.centered_row_space_between}>
+          <Text>
+            {title} - {artist}
+          </Text>
+          <Button title={isPlaying ? 'play' : 'pause'} onPress={startTrack} />
+        </View>
+        <Slider maximumValue={duration} minimumValue={0} value={position} />
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  centered_row_space_between: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  container: {
+    backgroundColor: '#cecece',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+  },
+});

eas.json

@@ -0,0 +1,25 @@
+{
+  "cli": {
+    "version": ">= 3.1.1"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "development-simulator": {
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      }
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}