done merge

app.json

@@ -24,6 +24,6 @@
     "web": {
       "favicon": "./assets/bp-favicon.png"
     },
-    "plugins": ["expo-font"]
+    "plugins": ["expo-font", "expo-video"]
   }
 }

package.json

@@ -23,15 +23,17 @@
     "@rneui/base": "^4.0.0-rc.7",
     "@rneui/themed": "^4.0.0-rc.8",
     "@supabase/supabase-js": "^2.45.6",
+    "debug": "^4.3.7",
     "expo": "^52.0.5",
     "expo-av": "~15.0.1",
     "expo-status-bar": "~2.0.0",
     "metro-config": "^0.81.0",
-    "react": "18.3.1",
+    "expo-video": "~2.0.2",
+    "react": "^18.3.1",
     "react-native": "0.76.1",
     "react-native-dotenv": "^3.4.11",
     "react-native-elements": "^3.4.3",
-    "react-native-gesture-handler": "^2.21.1",
+    "react-native-gesture-handler": "^2.21.2",
     "react-native-media-controls": "^2.3.0",
     "react-native-paper": "^5.12.5",
     "react-native-reanimated": "^3.16.1",

src/components/LegalRightsItem/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import placeholderPoster from '@/assets/images/placeholder.png';
+import { getPosterLink } from '@/supabase/queries/storageQueries';
+import { VideoSectionItemProps } from '@/types/types';
+import { styles } from './styles';
+
+export default function LegalRightsItem({
+  section,
+  onPress,
+}: VideoSectionItemProps) {
+  const language = section.spanish ? 'spanish' : 'english';
+
+  return (
+    <Pressable
+      style={styles.preaModule}
+      onPress={() => onPress(section.page_number, language)}
+    >
+      <Image
+        style={styles.modulePoster}
+        source={
+          getPosterLink(language, section.video_id)
+            ? { uri: getPosterLink(language, section.video_id)! }
+            : placeholderPoster
+        }
+      />
+      <View style={{ flex: 1 }}>
+        <Text style={styles.moduleTitle} numberOfLines={2}>
+          {section.title}
+        </Text>
+      </View>
+    </Pressable>
+  );
+}

src/components/LegalRightsItem/styles.ts

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  preaModule: {
+    flex: 1,
+    margin: 5,
+    alignSelf: 'stretch',
+  },
+
+  modulePoster: {
+    width: '100%',
+    aspectRatio: 3 / 2,
+    borderRadius: 10,
+  },
+
+  moduleTitle: {
+    paddingTop: 10,
+    fontSize: 20,
+    fontWeight: '600',
+    flexWrap: 'wrap',
+    width: '100%',
+    flexShrink: 1,
+  },
+});