CodyGarciaa/Legal-Rights-Prea-Pages (#13)

* set up legal rights skeleton, can go to video page with nothing there yet tho

* added video and testing player

* more testing with video, lowk not getting .mp4 to work

* legal rights page scrollable

* added caption buttons, lowk still to add more to it

* closed caption buttons are toggleable and XOR

* finished pr

* resolved philip's problems lol

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

@@ -27,7 +27,8 @@
     "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
-    "react-native-vector-icons": "^10.2.0"
+    "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

@@ -0,0 +1,162 @@
+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({ 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>
+    </>
+  );
+}