CodyGarciaa/Prea-Pages-Cont

package.json

@@ -19,16 +19,22 @@
     "@react-navigation/material-bottom-tabs": "^6.2.29",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
+    "@rneui/base": "^4.0.0-rc.7",
+    "@rneui/themed": "^4.0.0-rc.8",
     "@supabase/supabase-js": "^2.45.6",
     "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-elements": "^3.4.3",
+    "react-native-media-controls": "^2.3.0",
     "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
+    "react-native-slider": "^0.11.0",
     "react-native-video": "^6.6.4",
-    "expo-av": "~14.0.7"
+    "react-native-video-controls": "^2.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/Resource/Resource.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { ListItem } from '@rneui/themed';
+import { SeekHelpProps } from '@/types/types';
+import { styles } from './styles';
+
+export default function ResourceT({
+  org_name,
+  summary,
+  address,
+  phone_number,
+  office_hours,
+}: SeekHelpProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <View style={styles.resourceCard}>
+      <ListItem.Accordion
+        content={
+          <TouchableOpacity
+            style={styles.headerContent}
+            onPress={() => setExpanded(!expanded)}
+          >
+            <Text style={styles.orgName}>{org_name}</Text>
+            {!expanded && (
+              <Text style={styles.summaryPreview}>
+                {summary.slice(0, 60)}...
+              </Text>
+            )}
+          </TouchableOpacity>
+        }
+        isExpanded={expanded}
+        onPress={() => setExpanded(!expanded)} // Handles toggling when header is pressed
+        containerStyle={{ padding: 0 }}
+      >
+        {expanded && (
+          <TouchableOpacity
+            style={styles.expandedContent}
+            onPress={() => setExpanded(false)} // Collapses content when expanded section is pressed
+          >
+            <Text style={styles.summary}>{summary}</Text>
+
+            <View style={styles.infoContainer}>
+              <Text style={styles.label}>Address:</Text>
+              <Text style={styles.info}>{address}</Text>
+            </View>
+
+            <View style={styles.infoContainer}>
+              <Text style={styles.label}>Office:</Text>
+              <Text style={styles.info}>{phone_number}</Text>
+            </View>
+
+            <View style={styles.infoContainer}>
+              <Text style={styles.label}>Office Hours:</Text>
+              <Text style={styles.info}>{office_hours}</Text>
+            </View>
+          </TouchableOpacity>
+        )}
+      </ListItem.Accordion>
+    </View>
+  );
+}

src/components/Resource/styles.tsx

@@ -0,0 +1,49 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  resourceCard: {
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    padding: 15,
+    margin: 20,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 5,
+    shadowOffset: { width: 0, height: 2 },
+  },
+  headerContent: {
+    flexDirection: 'column',
+    width: '95%',
+  },
+  orgName: {
+    fontSize: 18,
+    paddingTop: 5,
+    fontWeight: 'bold',
+  },
+  summaryPreview: {
+    fontSize: 14,
+    color: '#666',
+    paddingBottom: 5,
+  },
+  expandedContent: {
+    marginTop: 10,
+  },
+  summary: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 10,
+  },
+  infoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  label: {
+    fontWeight: '600',
+    marginRight: 5,
+  },
+  info: {
+    fontSize: 14,
+    color: '#333',
+  },
+});

src/navigation/types.tsx

@@ -1,9 +1,14 @@
 import { MaterialBottomTabNavigationProp } from '@react-navigation/material-bottom-tabs';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { VideoResource } from '@/types/types';
 
 export type LegalStackParams = {
   LegalRights: undefined;
-  VideoPage: undefined;
+  VideoPage: {
+    currentModules: VideoResource[];
+    pageNumber: number;
+    language: string;
+  };
 };
 
 export type HealingStackParams = {

src/screens/LegalRights/VideoPage/index.tsx

@@ -1,25 +1,108 @@
+import { useEffect, useRef, useState } from 'react';
 import { Pressable, ScrollView, Text, View } from 'react-native';
+// import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';
 import { Video } from 'expo-av';
+import { LegalScreenProps } from '@/navigation/types';
+import { getVideoLink } from '@/supabase/queries/storageQueries';
 import { styles } from './styles';
 
-export default function VideoPage() {
+export default function VideoPage({
+  navigation,
+  route,
+}: LegalScreenProps<'VideoPage'>) {
+  const { currentModules, pageNumber, language } = route.params;
+
+  // const [currentTime, setCurrentTime] = useState(0);
+  // const [duration, setDuration] = useState(0);
+  // const [isFullScreen, setIsFullScreen] = useState(false);
+  // const [isLoading, setIsLoading] = useState(true);
+  // const [paused, setPaused] = useState(false);
+  // const [playerState, setPlayerState] = useState(PLAYER_STATES.PLAYING);
+
+  // var for array of all the pages for the current language
+  const [preaData, setPreaData] = useState([
+    {
+      id: 'string',
+      is_short_answer: true,
+      page_number: 0,
+      parent_id: 'string',
+      short_answer: 'string',
+      spanish: false,
+      survey: 'string',
+      video_id: 'Section Title 1',
+    },
+  ]);
+  const [index, setIndex] = useState(10); // index of current page in full array of pages; have to set to infinite or else if the first page (actually index 0) is pressed, the videopage wont update
+  // const [language, setLanguage] = useState('english'); // which language associated to array of pages
+
+  const videoLinkRef = useRef(
+    'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
+  );
+
+  //
+  const [renderTrigger, setRenderTrigger] = useState(0);
+
+  const nextPage = () => {
+    setIndex(prevIndex => Math.min(prevIndex + 1, preaData.length - 1)); // next index in array of pages
+  };
+
+  const prevPage = () => {
+    setIndex(prevIndex => Math.max(prevIndex - 1, 0)); // previous index in array of pages
+  };
+
+  // read in all the variables passed in from legal rights page; only once when initally rendered
+  useEffect(() => {
+    setPreaData(currentModules);
+    setIndex(pageNumber);
+  }, []);
+
+  useEffect(() => {
+    const fetchVideoLink = async () => {
+      videoLinkRef.current = getVideoLink(language, preaData[index].video_id); // Update the ref with the new video link
+      setRenderTrigger(prev => prev + 1); // Trigger a re-render to apply the new link
+    };
+
+    fetchVideoLink();
+  }, [index]); // run useEffect every time value of index changes
+
   return (
     <ScrollView style={styles.container}>
       <Video
-        source={require('@/assets/videos/da_link.mp4')}
+        key={renderTrigger} // changing the key forces re-mount and playback reset
+        source={{ uri: videoLinkRef.current }}
         rate={1.0}
         volume={1.0}
         isMuted={false}
         shouldPlay
         isLooping
         style={styles.video}
       />
+      {/* <MediaControls
+        isFullScreen={false}
+        duration={duration}
+        isLoading={isLoading}
+        mainColor="orange"
+        containerStyle={styles.videoContainer}
+        // onFullScreen={noop}
+        onPaused={() => console.log('paused')}
+        onReplay={() => console.log('replay')}
+        onSeek={() => setPlayerState(PLAYER_STATES.PLAYING)}
+        onSeeking={() => console.log('seeking')}
+        playerState={playerState}
+        progress={currentTime}
+      >
+        <MediaControls.Toolbar>
+          <View>
+            <Text>I'm a custom toolbar </Text>
+          </View>
+        </MediaControls.Toolbar>
+      </MediaControls> */}
 
       <View style={styles.buttonContainer}>
-        <Pressable style={[styles.captionButtons]}>
+        <Pressable style={[styles.captionButtons]} onPress={prevPage}>
           <Text style={styles.buttonText}>{'<   Previous Section'}</Text>
         </Pressable>
-        <Pressable style={[styles.captionButtons]}>
+        <Pressable style={[styles.captionButtons]} onPress={nextPage}>
           <Text style={styles.buttonText}>{'Next Section   >'}</Text>
         </Pressable>
       </View>

src/screens/LegalRights/VideoPage/styles.ts

@@ -7,6 +7,7 @@ export const styles = StyleSheet.create({
     marginTop: 10,
     padding: 30,
   },
+  videoContainer: {},
   video: {
     width: '100%',
     height: 630,