CodyGarciaa/Prea-Pages-Cont (#20)

* changed page setup to render supabase data * display is now sorted based on page number * passing in full data for each language to video page * new videos kinda working, just not playing rip; having problems with useState not being instant * lowk finished, but useState making solution a bit scuffed... video's not playing anymore. but all the interactivity with supabase and within the app works lol * not much, only rerendered on index now, comments for better understanding, video still not playing rip * finished sprint, video plays bc of useref instead of usestate * fixed very minor bug where the first page wont display * 5 create resources sub pages (#15) * seek help to resource list * seek help to resource list * fixed some things * removed unused import --------- Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> * 8-healing-resource-pages (#19) * [feat] resources rendered and scrolling by buttons * good work arfa, minor adjustments --------- Co-authored-by: philipye314 <philipye314@gmail.com> * [bug fix] removed extra type file * Charlottelaw/jdi 14 tab navigation (#12) * navigation * got rid of unused files * 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 * 5 create resources sub pages (#15) * seek help to resource list * seek help to resource list * fixed some things * removed unused import --------- Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> * 8-healing-resource-pages (#19) * [feat] resources rendered and scrolling by buttons * good work arfa, minor adjustments --------- Co-authored-by: philipye314 <philipye314@gmail.com> * [bug fix] removed extra type file * navigation * got rid of unused files * [fix] 🐐🐐🐐 * [fix] did screen props * deleted unused files --------- Co-authored-by: philipye314 <philipye314@gmail.com> Co-authored-by: CodyGarciaa <112846683+CodyGarciaa@users.noreply.github.com> Co-authored-by: angelinetu <157329739+angelinetu@users.noreply.github.com> Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> Co-authored-by: Arfa Momin <113748174+arfamomin@users.noreply.github.com> * fixed some style, tried video player a bit * Charlottelaw/jdi 14 tab navigation (#12) * navigation * got rid of unused files * 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 * 5 create resources sub pages (#15) * seek help to resource list * seek help to resource list * fixed some things * removed unused import --------- Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> * 8-healing-resource-pages (#19) * [feat] resources rendered and scrolling by buttons * good work arfa, minor adjustments --------- Co-authored-by: philipye314 <philipye314@gmail.com> * [bug fix] removed extra type file * navigation * got rid of unused files * [fix] 🐐🐐🐐 * [fix] did screen props * deleted unused files --------- Co-authored-by: philipye314 <philipye314@gmail.com> Co-authored-by: CodyGarciaa <112846683+CodyGarciaa@users.noreply.github.com> Co-authored-by: angelinetu <157329739+angelinetu@users.noreply.github.com> Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> Co-authored-by: Arfa Momin <113748174+arfamomin@users.noreply.github.com> * changed page setup to render supabase data * passing in full data for each language to video page * fixed type errors * deleted unnecessary files * fixed philip's comments besides english/spanishModule's defualt usestate * fixed some pretty warnings * done seekHelp midfi (#21) * done seekHelp midfi * moved caret + made button collapsable * styling changes * minor styling changes * minor == fix --------- Co-authored-by: philipye314 <philipye314@gmail.com> * changed page setup to render supabase data * display is now sorted based on page number * passing in full data for each language to video page * new videos kinda working, just not playing rip; having problems with useState not being instant * lowk finished, but useState making solution a bit scuffed... video's not playing anymore. but all the interactivity with supabase and within the app works lol * not much, only rerendered on index now, comments for better understanding, video still not playing rip * finished sprint, video plays bc of useref instead of usestate * fixed very minor bug where the first page wont display * Charlottelaw/jdi 14 tab navigation (#12) * navigation * got rid of unused files * 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 * 5 create resources sub pages (#15) * seek help to resource list * seek help to resource list * fixed some things * removed unused import --------- Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> * 8-healing-resource-pages (#19) * [feat] resources rendered and scrolling by buttons * good work arfa, minor adjustments --------- Co-authored-by: philipye314 <philipye314@gmail.com> * [bug fix] removed extra type file * navigation * got rid of unused files * [fix] 🐐🐐🐐 * [fix] did screen props * deleted unused files --------- Co-authored-by: philipye314 <philipye314@gmail.com> Co-authored-by: CodyGarciaa <112846683+CodyGarciaa@users.noreply.github.com> Co-authored-by: angelinetu <157329739+angelinetu@users.noreply.github.com> Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> Co-authored-by: Arfa Momin <113748174+arfamomin@users.noreply.github.com> * fixed some style, tried video player a bit * Charlottelaw/jdi 14 tab navigation (#12) * navigation * got rid of unused files * 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 * 5 create resources sub pages (#15) * seek help to resource list * seek help to resource list * fixed some things * removed unused import --------- Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> * 8-healing-resource-pages (#19) * [feat] resources rendered and scrolling by buttons * good work arfa, minor adjustments --------- Co-authored-by: philipye314 <philipye314@gmail.com> * [bug fix] removed extra type file * navigation * got rid of unused files * [fix] 🐐🐐🐐 * [fix] did screen props * deleted unused files --------- Co-authored-by: philipye314 <philipye314@gmail.com> Co-authored-by: CodyGarciaa <112846683+CodyGarciaa@users.noreply.github.com> Co-authored-by: angelinetu <157329739+angelinetu@users.noreply.github.com> Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> Co-authored-by: Arfa Momin <113748174+arfamomin@users.noreply.github.com> * changed page setup to render supabase data * passing in full data for each language to video page * fixed type errors * deleted unnecessary files * fixed philip's comments besides english/spanishModule's defualt usestate * fixed some pretty warnings * deleted useless file --------- Co-authored-by: angelinetu <157329739+angelinetu@users.noreply.github.com> Co-authored-by: Philip Ye <97428041+philipye314@users.noreply.github.com> Co-authored-by: philipye314 <philipye@berkeley.edu> Co-authored-by: Arfa Momin <113748174+arfamomin@users.noreply.github.com> Co-authored-by: philipye314 <philipye314@gmail.com> Co-authored-by: Charlotte Law <69742430+CharlotteLaw@users.noreply.github.com>
calblueprint · Nov 1, 2024 · 98a8000 · 98a8000
1 parent 51c12ec
commit 98a8000
Show file tree

Hide file tree

Showing 9 changed files with 1,397 additions and 3,144 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,10 +28,13 @@
     "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-video": "^6.6.4"
+    "react-native-slider": "^0.11.0",
+    "react-native-video": "^6.6.4",
+    "react-native-video-controls": "^2.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/src/navigation/types.tsx b/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 = {

diff --git a/src/screens/LegalRights/VideoPage/index.tsx b/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>

diff --git a/src/screens/LegalRights/VideoPage/styles.ts b/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,

diff --git a/src/screens/LegalRights/index.tsx b/src/screens/LegalRights/index.tsx
@@ -1,117 +1,64 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Image, Pressable, ScrollView, Text, View } from 'react-native';
 import placeholderPoster from '@/assets/images/placeholder.png';
 import { LegalScreenProps } from '@/navigation/types';
+import { getPreaByLanguage } from '@/supabase/queries/generalQueries';
+import { VideoResource } from '@/types/types';
 import { styles } from './styles';
 
 export default function LegalRights({
   navigation,
 }: LegalScreenProps<'LegalRights'>) {
-  const rickRolls = () => {
-    navigation.navigate('VideoPage');
-  };
+  const [englishPressed, setEnglishPressed] = useState(true); // english or spanish 🧍‍♂️
 
-  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,
-    },
-  ];
+  // english pages var mhm
+  const [englishModules, setEnglishModules] = useState<VideoResource[]>([
+    {
+      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 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,
-    },
-  ];
+  // spanish pages var mhm
+  const [spanishModules, setSpanishModules] = useState<VideoResource[]>([
+    {
+      id: 'string',
+      is_short_answer: true,
+      page_number: 0,
+      parent_id: 'string',
+      short_answer: 'string',
+      spanish: true,
+      survey: 'string',
+      video_id: 'Título de la Sección 1',
+    },
+  ]);
+
+  // get data from supabase on render; only once fr
+  useEffect(() => {
+    fetchData();
+  }, []);
 
-  const [spanishPressed, setSpanishPressed] = useState(false);
+  async function fetchData() {
+    setEnglishModules(await getPreaByLanguage(false)); // update relative useStates
+    setSpanishModules(await getPreaByLanguage(true));
+  }
 
-  const currentModules = spanishPressed
-    ? placeholderModulesEnglish
-    : placeholderModulesSpanish;
+  const currentModules = englishPressed ? englishModules : spanishModules; // pages actually being rendered; conditiioned on lanugage boolean
+
+  // navigate to video player
+  const goToVideo = (pageNumber: number, language: string) => {
+    navigation.navigate('VideoPage', {
+      currentModules: currentModules,
+      pageNumber: pageNumber - 1,
+      language: language,
+    });
+  };
 
   return (
     <>
@@ -120,11 +67,11 @@ export default function LegalRights({
         <Pressable
           style={[
             styles.captionButtons,
-            spanishPressed && styles.captionButtonsPressed,
+            englishPressed && styles.captionButtonsPressed,
           ]}
           onPress={() => {
-            if (!spanishPressed) {
-              setSpanishPressed(!spanishPressed);
+            if (!englishPressed) {
+              setEnglishPressed(!englishPressed);
             }
           }}
         >
@@ -133,11 +80,11 @@ export default function LegalRights({
         <Pressable
           style={[
             styles.captionButtons,
-            !spanishPressed && styles.captionButtonsPressed,
+            !englishPressed && styles.captionButtonsPressed,
           ]}
           onPress={() => {
-            if (spanishPressed) {
-              setSpanishPressed(!spanishPressed);
+            if (englishPressed) {
+              setEnglishPressed(!englishPressed);
             }
           }}
         >
@@ -149,14 +96,15 @@ export default function LegalRights({
           {currentModules.map((section, index) => (
             <Pressable
               style={styles.preaModule}
-              onPress={section['onClickFunction']}
-              key={index}
+              onPress={() =>
+                goToVideo(
+                  section['page_number'],
+                  section['spanish'] ? 'spanish' : 'english',
+                )
+              }
             >
-              <Image
-                style={styles.modulePoster}
-                source={section['poster_url']}
-              />
-              <Text style={styles.moduleTitle}>{section['title']}</Text>
+              <Image style={styles.modulePoster} source={placeholderPoster} />
+              <Text style={styles.moduleTitle}>{section.video_id}</Text>
             </Pressable>
           ))}
         </View>

diff --git a/src/supabase/queries/generalQueries.tsx b/src/supabase/queries/generalQueries.tsx
@@ -1,4 +1,4 @@
-import { HealingResource, Resource } from '@/types/types';
+import { HealingResource, Resource, VideoResource } from '@/types/types';
 import supabase from '../createClient';
 
 export const getHealingResourceData = async (): Promise<HealingResource[]> => {
@@ -25,3 +25,17 @@ export const getSeekHelpData = async (): Promise<Resource[]> => {
   }
   return data as Resource[];
 };
+
+export const getPreaByLanguage = async (
+  languageBool: boolean,
+): Promise<VideoResource[]> => {
+  const { data, error } = await supabase // grab all the not spanish pages from the supabase table
+    .from('prea_page')
+    .select()
+    .eq('spanish', languageBool);
+  if (error) {
+    throw error;
+  }
+  data.sort((a, b) => a.page_number - b.page_number); // sort the array based on pages' page_number yur
+  return data;
+};