still working on video, added real arrows to page tho (forgot style lol)

package.json

@@ -33,7 +33,7 @@
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.0.0",
     "react-native-slider": "^0.11.0",
-    "react-native-video": "^6.6.4",
+    "react-native-video": "^6.8.0",
     "react-native-video-controls": "^2.8.1"
   },
   "devDependencies": {

src/screens/LegalRights/VideoPage/index.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
-import { Pressable, ScrollView, Text, View } from 'react-native';
-import Video from 'react-native-video';
+import { Image, Pressable, ScrollView, Text, View } from 'react-native';
+import { Video } from 'expo-av';
+import leftArrow from '@/assets/images/left-arrow.png';
+import rightArrow from '@/assets/images/right-arrow.png';
 import { LegalScreenProps } from '@/navigation/types';
 import { getVideoLink } from '@/supabase/queries/storageQueries';
 import { styles } from './styles';
@@ -10,6 +12,8 @@ export default function VideoPage({
   route,
 }: LegalScreenProps<'VideoPage'>) {
   const { currentModules, pageNumber, language } = route.params;
+
+  // var for array of all the pages for the current language
   const [preaData, setPreaData] = useState([
     {
       id: 'string',
@@ -23,16 +27,14 @@ export default function VideoPage({
     },
   ]);
   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 [paused, setPaused] = useState(false);
-  const [duration, setDuration] = useState(0);
-  const [currentTime, setCurrentTime] = useState(0);
 
   const nextPage = () => {
     setIndex(prevIndex => Math.min(prevIndex + 1, preaData.length - 1)); // next index in array of pages
@@ -57,37 +59,27 @@ export default function VideoPage({
     fetchVideoLink();
   }, [index]); // run useEffect every time value of index changes
 
-  const onLoad = (data: any) => {
-    setDuration(data.duration);
-  };
-
-  const onProgress = (data: any) => {
-    setCurrentTime(data.currentTime);
-  };
-
   return (
     <ScrollView style={styles.container}>
       <Video
-        key={renderTrigger}
+        key={renderTrigger} // changing the key forces re-mount and playback reset
         source={{ uri: videoLinkRef.current }}
         rate={1.0}
         volume={1.0}
-        paused={paused}
-        muted={false}
-        resizeMode="contain"
-        onLoad={onLoad}
-        onProgress={onProgress}
-        onEnd={() => console.log('Video finished')}
-        repeat
+        isMuted={false}
+        shouldPlay
+        isLooping
         style={styles.video}
       />
 
       <View style={styles.buttonContainer}>
         <Pressable style={[styles.captionButtons]} onPress={prevPage}>
-          <Text style={styles.buttonText}>{'<   Previous Section'}</Text>
+          <Image style={[styles.arrows]} source={leftArrow} />
+          <Text style={styles.buttonText}>{'Previous Section'}</Text>
         </Pressable>
         <Pressable style={[styles.captionButtons]} onPress={nextPage}>
-          <Text style={styles.buttonText}>{'Next Section   >'}</Text>
+          <Text style={styles.buttonText}>{'Next Section'}</Text>
+          <Image style={[styles.arrows]} source={rightArrow} />
         </Pressable>
       </View>
     </ScrollView>

src/screens/LegalRights/VideoPage/styles.ts

@@ -19,6 +19,9 @@ export const styles = StyleSheet.create({
     paddingVertical: 25,
   },
   captionButtons: {
+    display: 'flex',
+    gap: 10,
+    flexDirection: 'row',
     borderRadius: 10,
     width: 180,
     height: 50,
@@ -31,4 +34,8 @@ export const styles = StyleSheet.create({
   buttonText: {
     fontWeight: 'bold',
   },
+  arrows: {
+    width: 20,
+    height: 20,
+  },
 });

src/screens/LegalRights/index.tsx

@@ -3,7 +3,7 @@ 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 { getPosterLink } from '@/supabase/queries/storageQueries 2';
+import { getPosterLink } from '@/supabase/queries/storageQueries';
 import { VideoResource } from '@/types/types';
 import { styles } from './styles';
 

src/supabase/queries/storageQueries.tsx

@@ -7,3 +7,14 @@ export const getVideoLink = (language: string, videoName: string): string => {
 
   return data.publicUrl;
 };
+
+export const getPosterLink = (
+  language: string,
+  videoName: string,
+): string | null => {
+  let { data } = supabase.storage
+    .from('PREA_videos')
+    .getPublicUrl(`${language}/${videoName}.png`);
+
+  return data.publicUrl;
+};