finished pr

calblueprint · Oct 16, 2024 · 8694342 · 8694342
1 parent 3b7d847
commit 8694342
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 29 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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',