CodyGarciaa/Legal-Rights-Prea-Pages

App.tsx

@@ -3,7 +3,8 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import HealingResources from '@/screens/HealingResources';
 import Home from '@/screens/Home';
-import LegalRights from '@/screens/LegalRights';
+import LegalRights from '@/screens/LegalRights/index';
+import VideoPage from '@/screens/LegalRights/VideoPage';
 import SeekHelp from '@/screens/SeekHelp';
 
 const Stack = createNativeStackNavigator();
@@ -16,6 +17,7 @@ export default function App() {
         <Stack.Screen name="Healing Resources" component={HealingResources} />
         <Stack.Screen name="Legal Rights" component={LegalRights} />
         <Stack.Screen name="Seek Help" component={SeekHelp} />
+        <Stack.Screen name="Video Page" component={VideoPage} />
       </Stack.Navigator>
     </NavigationContainer>
   );

graphics.d.ts

@@ -21,3 +21,8 @@ declare module '*.jpeg' {
   const value: ImageSourcePropType;
   export default value;
 }
+
+declare module '*.mp4' {
+  const source: { uri: string };
+  export default source;
+}

package.json

@@ -23,7 +23,9 @@
     "react": "18.2.0",
     "react-native": "^0.74.5",
     "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1"
+    "react-native-screens": "3.31.1",
+    "react-native-video": "^6.6.4",
+    "expo-av": "~14.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/navigation/LegalRightsNav.tsx

@@ -0,0 +1,15 @@
+// import * as React from 'react';
+// import { createNativeStackNavigator } from '@react-navigation/native-stack';
+// import VideoPage from '@/screens/LegalRights/VideoPage';
+// import LegalRights from '@/screens/LegalRights/';
+
+// const Stack = createNativeStackNavigator();
+
+// export default function LegalRightsNav() {
+//   return (
+//     <>
+//       <Stack.Screen name="Legal Rights" component={LegalRights} />
+//       <Stack.Screen name="Video Page" component={VideoPage} />
+//    </>
+//   );
+// }

src/screens/LegalRights/VideoPage/index.tsx

@@ -0,0 +1,28 @@
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { Video } from 'expo-av';
+import { styles } from './styles';
+
+export default function VideoPage() {
+  return (
+    <ScrollView style={styles.container}>
+      <Video
+        source={require('@/assets/videos/da_link.mp4')}
+        rate={1.0}
+        volume={1.0}
+        isMuted={false}
+        shouldPlay
+        isLooping
+        style={styles.video}
+      />
+
+      <View style={styles.buttonContainer}>
+        <Pressable style={[styles.captionButtons]}>
+          <Text style={styles.buttonText}>{'<   Previous Section'}</Text>
+        </Pressable>
+        <Pressable style={[styles.captionButtons]}>
+          <Text style={styles.buttonText}>{'Next Section   >'}</Text>
+        </Pressable>
+      </View>
+    </ScrollView>
+  );
+}

src/screens/LegalRights/VideoPage/styles.ts

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: 10,
+    padding: 30,
+  },
+  video: {
+    width: '100%',
+    height: 630,
+  },
+  buttonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 25,
+  },
+  captionButtons: {
+    borderRadius: 10,
+    width: 180,
+    height: 50,
+    borderWidth: 1,
+    backgroundColor: '#D9D9D9',
+    borderColor: '#D9D9D9',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontWeight: 'bold',
+  },
+});

src/screens/LegalRights/index.tsx

@@ -1,5 +1,162 @@
-import { Text } from 'react-native';
+import { useState } from 'react';
+import { Image, Pressable, ScrollView, Text, View } from 'react-native';
+import placeholderPoster from '@/assets/images/placeholder.png';
+import { styles } from './styles';
 
-export default function LegalRights() {
-  return <Text>LEGAL RIGHTS!!</Text>;
+export default function LegalRights({ navigation }: { navigation: any }) {
+  const rickRolls = () => {
+    navigation.navigate('Video Page');
+  };
+
+  const placeholderModulesEnglish = [
+    {
+      title: 'Section Title 1',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Section Title 2',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Section Title 3',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Section Title 4',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Section Title 5',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Section Title 6',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Section Title 7',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Section Title 8',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Section Title 9',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+  ];
+
+  const placeholderModulesSpanish = [
+    {
+      title: 'Título de la Sección 1',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Título de la Sección 2',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Título de la Sección 3',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Título de la Sección 4',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Título de la Sección 5',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Título de la Sección 6',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Título de la Sección 7',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Título de la Sección 8',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+    {
+      title: 'Título de la Sección 9',
+      poster_url: placeholderPoster,
+      onClickFunction: rickRolls,
+    },
+  ];
+
+  const [spanishPressed, setSpanishPressed] = useState(false);
+
+  const currentModules = spanishPressed
+    ? placeholderModulesEnglish
+    : placeholderModulesSpanish;
+
+  return (
+    <>
+      <Text style={styles.title}>Legal Rights</Text>
+      <View style={styles.buttonContainer}>
+        <Pressable
+          style={[
+            styles.captionButtons,
+            spanishPressed && styles.captionButtonsPressed,
+          ]}
+          onPress={() => {
+            if (!spanishPressed) {
+              setSpanishPressed(!spanishPressed);
+            }
+          }}
+        >
+          <Text style={styles.buttonText}>English CC</Text>
+        </Pressable>
+        <Pressable
+          style={[
+            styles.captionButtons,
+            !spanishPressed && styles.captionButtonsPressed,
+          ]}
+          onPress={() => {
+            if (spanishPressed) {
+              setSpanishPressed(!spanishPressed);
+            }
+          }}
+        >
+          <Text style={styles.buttonText}>Spanish CC</Text>
+        </Pressable>
+      </View>
+      <ScrollView>
+        <View style={styles.preaModulesView}>
+          {currentModules.map(section => (
+            <Pressable
+              style={styles.preaModule}
+              onPress={section['onClickFunction']}
+            >
+              <Image
+                style={styles.modulePoster}
+                source={section['poster_url']}
+              />
+              <Text style={styles.moduleTitle}>{section['title']}</Text>
+            </Pressable>
+          ))}
+        </View>
+      </ScrollView>
+    </>
+  );
 }

src/screens/LegalRights/styles.ts

@@ -0,0 +1,56 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  title: {
+    fontWeight: 'bold',
+    fontSize: 30,
+    padding: 10,
+    marginLeft: 20,
+  },
+  buttonContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 20,
+    paddingBottom: 15,
+  },
+  captionButtons: {
+    borderRadius: 30,
+    width: 400,
+    height: 50,
+    borderWidth: 1,
+    borderColor: '#D9D9D9',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  captionButtonsPressed: {
+    backgroundColor: '#D9D9D9',
+  },
+  buttonText: {
+    fontWeight: 'bold',
+  },
+  preaModulesView: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    gap: 20,
+  },
+  preaModule: {
+    paddingTop: 15,
+  },
+  moduleTitle: {
+    paddingTop: 10,
+    fontSize: 20,
+    fontWeight: 'semibold',
+  },
+  modulePoster: {
+    width: 300,
+    height: 200,
+    borderRadius: 10,
+  },
+  tinyLogo: {
+    width: 20,
+    height: 20,
+  },
+});