diff --git a/App.tsx b/App.tsx index 237c3d3..a76526e 100644 --- a/App.tsx +++ b/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() { + ); diff --git a/graphics.d.ts b/graphics.d.ts index a156e49..d2ae3fb 100644 --- a/graphics.d.ts +++ b/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; +} diff --git a/package-lock.json b/package-lock.json index 7888c56..6612237 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,11 +12,13 @@ "@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", "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" }, "devDependencies": { "@babel/core": "^7.20.0", @@ -8555,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", @@ -12885,6 +12896,16 @@ "react-native": "*" } }, + "node_modules/react-native-video": { + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-6.6.4.tgz", + "integrity": "sha512-YBaStWAhWZMDaRG7Q9u173Si7ho7I3xwrS1SCKnProeXfdaS7vZNbt84ueFwufa4YxZ0JZoyOypH0tA0JZK3GQ==", + "license": "MIT", + "peerDependencies": { + "react": "*", + "react-native": "*" + } + }, "node_modules/react-native/node_modules/@jest/types": { "version": "26.6.2", "license": "MIT", diff --git a/package.json b/package.json index 50dc697..95beb2e 100644 --- a/package.json +++ b/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", diff --git a/src/assets/images/placeholder.png b/src/assets/images/placeholder.png new file mode 100644 index 0000000..d665a29 Binary files /dev/null and b/src/assets/images/placeholder.png differ diff --git a/src/assets/videos/da_link.mp4 b/src/assets/videos/da_link.mp4 new file mode 100644 index 0000000..a44a47c Binary files /dev/null and b/src/assets/videos/da_link.mp4 differ diff --git a/src/navigation/LegalRightsNav.tsx b/src/navigation/LegalRightsNav.tsx new file mode 100644 index 0000000..3a2859e --- /dev/null +++ b/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 ( +// <> +// +// +// +// ); +// } diff --git a/src/screens/LegalRights/VideoPage/index.tsx b/src/screens/LegalRights/VideoPage/index.tsx new file mode 100644 index 0000000..6e15a3b --- /dev/null +++ b/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 ( + + + ); +} diff --git a/src/screens/LegalRights/VideoPage/styles.ts b/src/screens/LegalRights/VideoPage/styles.ts new file mode 100644 index 0000000..64b855e --- /dev/null +++ b/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', + }, +}); diff --git a/src/screens/LegalRights/index.tsx b/src/screens/LegalRights/index.tsx index 2154438..5ed2121 100644 --- a/src/screens/LegalRights/index.tsx +++ b/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 LEGAL RIGHTS!!; +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 ( + <> + Legal Rights + + { + if (!spanishPressed) { + setSpanishPressed(!spanishPressed); + } + }} + > + English CC + + { + if (spanishPressed) { + setSpanishPressed(!spanishPressed); + } + }} + > + Spanish CC + + + + + {currentModules.map(section => ( + + + {section['title']} + + ))} + + + + ); } diff --git a/src/screens/LegalRights/styles.ts b/src/screens/LegalRights/styles.ts new file mode 100644 index 0000000..2f4aee2 --- /dev/null +++ b/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, + }, +});