From 8694342fc6981361f728d6c98bdbfa85610344df Mon Sep 17 00:00:00 2001
From: Cody Garcia <czgarcia@berkeley.edu>
Date: Wed, 16 Oct 2024 00:32:37 -0700
Subject: [PATCH] finished pr

---
 graphics.d.ts                               |  8 +--
 package-lock.json                           | 10 +++
 package.json                                |  3 +-
 src/screens/LegalRights/VideoPage/index.tsx | 33 ++++++----
 src/screens/LegalRights/VideoPage/styles.ts | 29 ++++++++-
 src/screens/LegalRights/index.tsx           | 70 ++++++++++++++++++---
 src/screens/LegalRights/styles.ts           |  4 +-
 7 files changed, 128 insertions(+), 29 deletions(-)

diff --git a/graphics.d.ts b/graphics.d.ts
index 55f46f9..d2ae3fb 100644
--- a/graphics.d.ts
+++ b/graphics.d.ts
@@ -22,7 +22,7 @@ declare module '*.jpeg' {
   export default value;
 }
 
-// declare module '*.mp4' {
-//   const src: string;
-//   export default src;
-// }
+declare module '*.mp4' {
+  const source: { uri: string };
+  export default source;
+}
diff --git a/package-lock.json b/package-lock.json
index 512a706..6612237 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@react-navigation/native-stack": "^6.11.0",
         "@supabase/supabase-js": "^2.45.4",
         "expo": "~51.0.21",
+        "expo-av": "~14.0.7",
         "expo-status-bar": "~1.12.1",
         "react": "18.2.0",
         "react-native": "^0.74.5",
@@ -8556,6 +8557,15 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-av": {
+      "version": "14.0.7",
+      "resolved": "https://registry.npmjs.org/expo-av/-/expo-av-14.0.7.tgz",
+      "integrity": "sha512-FvKZxyy+2/qcCmp+e1GTK3s4zH8ZO1RfjpqNxh7ARlS1oH8HPtk1AyZAMo52tHz3yQ3UIqxQ2YbI9CFb4065lA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-constants": {
       "version": "16.0.2",
       "license": "MIT",
diff --git a/package.json b/package.json
index 10a594f..95beb2e 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "react-native": "^0.74.5",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
-    "react-native-video": "^6.6.4"
+    "react-native-video": "^6.6.4",
+    "expo-av": "~14.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/src/screens/LegalRights/VideoPage/index.tsx b/src/screens/LegalRights/VideoPage/index.tsx
index f430539..0049c94 100644
--- a/src/screens/LegalRights/VideoPage/index.tsx
+++ b/src/screens/LegalRights/VideoPage/index.tsx
@@ -1,19 +1,28 @@
-import { Button, Image, Text, View } from 'react-native';
-// import PreaVideo from '@/assets/videos/da_link.mp4';
-import Video from 'react-native-video';
+import { Pressable, ScrollView, Text, View } from 'react-native';
+import { Video } from 'expo-av';
 import { styles } from './styles';
 
 export default function VideoPage() {
   return (
-    <>
-      <Text>this is video yup</Text>
-      {/* <Video
-        source={require(PreaVideo)}
+    <ScrollView style={styles.container}>
+      <Video
+        source={require('@/assets/videos/da_link.mp4')}
+        rate={1.0}
+        volume={10.0}
+        isMuted={false}
+        shouldPlay
+        isLooping
         style={styles.video}
-        controls={true} // Show playback controls
-        resizeMode="contain" // Adjusts how the video scales within the player
-        paused={false} // Autoplay 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>
   );
 }
diff --git a/src/screens/LegalRights/VideoPage/styles.ts b/src/screens/LegalRights/VideoPage/styles.ts
index 01fbcdf..ffe838a 100644
--- a/src/screens/LegalRights/VideoPage/styles.ts
+++ b/src/screens/LegalRights/VideoPage/styles.ts
@@ -1,8 +1,35 @@
 import { StyleSheet } from 'react-native';
 
 export const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginTop: 10,
+    padding: 30,
+  },
   video: {
     width: '100%',
-    height: 300,
+    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',
+    shadowColor: 'black',
+    shadowOpacity: 0.05,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontWeight: 'bold',
   },
 });
diff --git a/src/screens/LegalRights/index.tsx b/src/screens/LegalRights/index.tsx
index a519d90..3eff458 100644
--- a/src/screens/LegalRights/index.tsx
+++ b/src/screens/LegalRights/index.tsx
@@ -9,7 +9,7 @@ export default function LegalRights({ navigation }: { navigation: any }) {
     // console.log('working');
   }
 
-  const placeholderModules = [
+  const placeholderModulesEnglish = [
     {
       title: 'Section Title 1',
       poster_url: placeholderPoster,
@@ -57,7 +57,59 @@ export default function LegalRights({ navigation }: { navigation: any }) {
     },
   ];
 
-  const [engPressed, setEngPressed] = useState(true);
+  const placeholderModulesSpanish = [
+    {
+      title: 'Título de la Sección 1',
+      poster_url: placeholderPoster,
+      onClickFunction: rick_rolls,
+    },
+    {
+      title: 'Título de la Sección 2',
+      poster_url: placeholderPoster,
+      onClickFunction: rick_rolls,
+    },
+    {
+      title: 'Título de la Sección 3',
+      poster_url: placeholderPoster,
+      onClickFunction: rick_rolls,
+    },
+    {
+      title: 'Título de la Sección 4',
+      poster_url: placeholderPoster,
+      onClickFunction: rick_rolls,
+    },
+    {
+      title: 'Título de la Sección 5',
+      poster_url: placeholderPoster,
+      onClickFunction: rick_rolls,
+    },
+    {
+      title: 'Título de la Sección 6',
+      poster_url: placeholderPoster,
+      onClickFunction: rick_rolls,
+    },
+    {
+      title: 'Título de la Sección 7',
+      poster_url: placeholderPoster,
+      onClickFunction: rick_rolls,
+    },
+    {
+      title: 'Título de la Sección 8',
+      poster_url: placeholderPoster,
+      onClickFunction: rick_rolls,
+    },
+    {
+      title: 'Título de la Sección 9',
+      poster_url: placeholderPoster,
+      onClickFunction: rick_rolls,
+    },
+  ];
+
+  const [spanishPressed, setSpanishPressed] = useState(false);
+
+  const currentModules = spanishPressed
+    ? placeholderModulesEnglish
+    : placeholderModulesSpanish;
 
   return (
     <>
@@ -66,11 +118,11 @@ export default function LegalRights({ navigation }: { navigation: any }) {
         <Pressable
           style={[
             styles.captionButtons,
-            !engPressed && styles.captionButtonsPressed,
+            spanishPressed && styles.captionButtonsPressed,
           ]}
           onPress={() => {
-            if (engPressed) {
-              setEngPressed(!engPressed);
+            if (!spanishPressed) {
+              setSpanishPressed(!spanishPressed);
             }
           }}
         >
@@ -79,11 +131,11 @@ export default function LegalRights({ navigation }: { navigation: any }) {
         <Pressable
           style={[
             styles.captionButtons,
-            engPressed && styles.captionButtonsPressed,
+            !spanishPressed && styles.captionButtonsPressed,
           ]}
           onPress={() => {
-            if (!engPressed) {
-              setEngPressed(!engPressed);
+            if (spanishPressed) {
+              setSpanishPressed(!spanishPressed);
             }
           }}
         >
@@ -92,7 +144,7 @@ export default function LegalRights({ navigation }: { navigation: any }) {
       </View>
       <ScrollView>
         <View style={styles.preaModulesView}>
-          {placeholderModules.map(section => (
+          {currentModules.map(section => (
             <Pressable
               style={styles.preaModule}
               onPress={section['onClickFunction']}
diff --git a/src/screens/LegalRights/styles.ts b/src/screens/LegalRights/styles.ts
index a42f244..2f4aee2 100644
--- a/src/screens/LegalRights/styles.ts
+++ b/src/screens/LegalRights/styles.ts
@@ -19,12 +19,12 @@ export const styles = StyleSheet.create({
     width: 400,
     height: 50,
     borderWidth: 1,
-    borderColor: 'grey',
+    borderColor: '#D9D9D9',
     justifyContent: 'center',
     alignItems: 'center',
   },
   captionButtonsPressed: {
-    backgroundColor: 'grey',
+    backgroundColor: '#D9D9D9',
   },
   buttonText: {
     fontWeight: 'bold',