Emily/bottom play bar

package.json

@@ -19,7 +19,9 @@
     "@react-navigation/stack": "^6.3.16",
     "dotenv": "^16.0.3",
     "expo": "~47.0.12",
-    "expo-build-properties": "~0.4.1",
+    "expo-av": "~13.0.3",
+    "expo-build-properties": "^0.4.1",
+    "expo-cli": "^6.3.2",
     "expo-font": "~11.0.1",
     "expo-splash-screen": "~0.17.5",
     "expo-status-bar": "~1.4.2",
@@ -29,15 +31,14 @@
     "react-i18next": "^12.1.5",
     "react-native": "0.70.5",
     "react-native-dotenv": "^3.4.7",
-    "react-native-gesture-handler": "~2.8.0",
+    "react-native-gesture-handler": "^2.9.0",
     "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0",
     "react-native-svg": "13.4.0",
-    "react-navigation": "^4.4.4",
-    "react-native-web": "~0.18.9",
-    "react-dom": "18.1.0",
-    "@expo/webpack-config": "^0.17.2"
+    "react-native-text-ticker": "^1.14.0",
+    "react-native-track-player": "^3.2.0",
+    "react-navigation": "^4.4.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

src/AudioContext.tsx

@@ -0,0 +1,46 @@
+import { Audio } from 'expo-av';
+import {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useMemo,
+  useState,
+} from 'react';
+
+export type AudioPlayerState = {
+  soundRef: Audio.Sound;
+  url: string;
+  title: string;
+  artist: string;
+  isPlaying: boolean;
+  thumbnail: string;
+  scLink: string;
+  theme: string[];
+};
+
+interface IAudioContext {
+  audio: AudioPlayerState;
+  setAudio: Dispatch<SetStateAction<AudioPlayerState>>;
+}
+
+const AudioContext = createContext<IAudioContext>({} as IAudioContext);
+
+export function AudioProvider({ children }: { children: React.ReactNode }) {
+  const [audioState, setAudioState] = useState<AudioPlayerState>(
+    {} as AudioPlayerState,
+  );
+  //   const value = { audio: audioState, setAudio: setAudioState };
+  const value = useMemo(
+    () => ({
+      audio: audioState,
+      setAudio: setAudioState,
+    }),
+    [audioState],
+  );
+
+  return (
+    <AudioContext.Provider value={value}>{children}</AudioContext.Provider>
+  );
+}
+
+export default AudioContext;

src/components/BottomPlayBar.tsx

@@ -0,0 +1,81 @@
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import Icon from '../../assets/icons';
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#D9D9D9',
+    width: 400,
+    height: 78,
+    borderRadius: 5,
+    margin: 0,
+  },
+  title: {
+    fontSize: 12,
+    marginLeft: 15,
+    marginTop: 9,
+  },
+  meta: {
+    marginTop: 10,
+    marginLeft: 15,
+    fontSize: 9,
+    flexWrap: 'wrap',
+  },
+});
+
+type BottomPlayBarProps = {
+  onPress?: () => void;
+  children: React.ReactNode;
+  style?: object;
+};
+
+function BottomPlayBar({ onPress, children, style }: BottomPlayBarProps) {
+  return (
+    <Pressable style={[styles.card, style]} onPress={onPress}>
+      {children}
+    </Pressable>
+  );
+}
+
+type SearchBottomPlayBarProps = {
+  name: string;
+  onPress?: () => void;
+  author: string;
+  previewImage?: string;
+};
+
+export default function SearchBottomPlayBarCard({
+  name,
+  onPress,
+  author,
+  previewImage,
+}: SearchBottomPlayBarProps) {
+  return (
+    <BottomPlayBar
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+      }}
+      onPress={onPress}
+    >
+      <Image
+        source={{ uri: previewImage }}
+        style={{
+          height: 63,
+          width: 63,
+          marginTop: 6.5,
+          marginLeft: 5,
+          backgroundColor: '#F3F2F2',
+          borderRadius: 5,
+        }}
+      />
+      <View style={{ width: 250 }}>
+        <Text style={styles.title}>{name}</Text>
+        <Text style={styles.meta}>{author}</Text>
+      </View>
+      <View style={{ marginTop: 13, marginRight: 8 }}>
+        <Icon type="play_button" />
+      </View>
+    </BottomPlayBar>
+  );
+}

src/components/CategoryCard.tsx

@@ -5,20 +5,27 @@ import {
   StyleSheet,
   ImageSourcePropType,
   Pressable,
+  View,
 } from 'react-native';
 import Colors from '../styles/Colors';
 
 const styles = StyleSheet.create({
+  shadow: {
+    shadowColor: Colors.shadowDark,
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+  },
   container: {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'flex-start',
     overflow: 'hidden',
     borderRadius: 8,
-    height: 120,
-    width: 166,
-    padding: 14,
-    margin: 8,
+    height: 100,
+    width: 160,
+    padding: 12,
+    marginVertical: 8,
   },
   title: {
     color: Colors.textWhite,
@@ -31,6 +38,8 @@ const styles = StyleSheet.create({
     right: 0,
     marginRight: -24,
     marginBottom: -24,
+    height: 86,
+    width: 86,
   },
 });
 
@@ -48,13 +57,15 @@ function CategoryCard({
   backgroundColor,
 }: CategoryCardProps) {
   return (
-    <Pressable
-      style={[styles.container, { backgroundColor }]}
-      onPress={pressFunction}
-    >
-      <Text style={styles.title}>{title}</Text>
-      <Image style={styles.image} source={img} />
-    </Pressable>
+    <View style={styles.shadow}>
+      <Pressable
+        style={[styles.container, { backgroundColor }]}
+        onPress={pressFunction}
+      >
+        <Text style={styles.title}>{title}</Text>
+        <Image style={styles.image} source={img} />
+      </Pressable>
+    </View>
   );
 }
 

src/components/NowPlayingWrapper.tsx

@@ -0,0 +1,26 @@
+import { View } from 'react-native';
+import globalStyles from '../globalStyles';
+import BottomPlayBar from './BottomPlayBar';
+
+type NowPlayingWrapperProps = {
+  children?: React.ReactNode;
+  // TODO FIX THIS NAV TYPE
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  navigation: any;
+};
+
+export default function NowPlayingWrapperContainer({
+  children,
+  navigation,
+}: NowPlayingWrapperProps) {
+  return (
+    <View style={globalStyles.container}>
+      {children}
+      <BottomPlayBar
+        name="Green Colonization: An Interview With Maja Kristine Jama"
+        author="Shaldon Ferris"
+        onPress={() => navigation.navigate('Play')}
+      />
+    </View>
+  );
+}

src/components/RecentUpload.tsx

@@ -0,0 +1,58 @@
+import {
+  Text,
+  Image,
+  StyleSheet,
+  View,
+  GestureResponderEvent,
+  Pressable,
+} from 'react-native';
+import globalStyles from '../globalStyles';
+
+const styles = StyleSheet.create({
+  recentsCard: {
+    paddingRight: 16,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    height: 190,
+  },
+  image: {
+    height: 150,
+    width: 150,
+    backgroundColor: 'black',
+  },
+  textContainer: {
+    width: 150,
+  },
+});
+
+type RecentUploadProps = {
+  title: string;
+  artist: string;
+  image: string;
+  pressFunction: (event: GestureResponderEvent) => void;
+};
+
+function RecentUpload({
+  title,
+  artist,
+  image,
+  pressFunction,
+}: RecentUploadProps) {
+  return (
+    <Pressable onPress={pressFunction}>
+      <View style={styles.recentsCard}>
+        <Image style={styles.image} source={{ uri: image }} />
+        <View style={styles.textContainer}>
+          <Text style={globalStyles.body1} numberOfLines={1}>
+            {title}
+          </Text>
+          <Text style={globalStyles.body2} numberOfLines={1}>
+            {artist}
+          </Text>
+        </View>
+      </View>
+    </Pressable>
+  );
+}
+
+export default RecentUpload;

src/i18n/i18n.ts

@@ -7,6 +7,7 @@ const createI18n = (language: string): i18nInstance => {
   const i18n = i18next.createInstance().use(initReactI18next);
 
   i18n.init({
+    compatibilityJSON: 'v3',
     lng: language,
     fallbackLng: language,
     resources: {

src/navigation/RootNavigator.tsx

@@ -1,11 +1,27 @@
 import { NavigationContainer } from '@react-navigation/native';
-
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import PlayScreen from '../screens/PlayScreen/Play';
 import NavigationBar from './NavigationBar';
+import { RootStackParamList } from '../types/navigation';
+import { AudioProvider } from '../AudioContext';
+
+const RootStack = createNativeStackNavigator<RootStackParamList>();
 
 export default function RootNavigation() {
   return (
-    <NavigationContainer>
-      <NavigationBar />
-    </NavigationContainer>
+    <AudioProvider>
+      <NavigationContainer>
+        <RootStack.Navigator
+          screenOptions={{
+            headerShown: false,
+          }}
+        >
+          <RootStack.Screen name="NavigationBar" component={NavigationBar} />
+          <RootStack.Group screenOptions={{ presentation: 'modal' }}>
+            <RootStack.Screen name="Play" component={PlayScreen} />
+          </RootStack.Group>
+        </RootStack.Navigator>
+      </NavigationContainer>
+    </AudioProvider>
   );
 }