Improve video and padding in tabs

App.js

@@ -108,6 +108,7 @@ const MainNavigation = () => {
             activeColor="#0d6efd"
             inactiveColor="#FFFFFF"
             barStyle={{ backgroundColor: '#000000' }}
+            sceneContainerStyle={{paddingBottom: 0}}
         >
             <Tab.Screen
                 name="Feed"

Views/Courses.js

@@ -43,9 +43,28 @@ const getCourses = async (profileObj) => {
         });
     });
     return {
-        courses,
-        popular,
-        watching: watchingArray,
+        courses: courses.slice(0,10),
+        popular: popular.slice(0,10),
+        watching: watchingArray.slice(0,10),
+    }
+}
+
+const storeCoursesCache = async (value) => {
+    try {
+        const jsonValue = JSON.stringify(value)
+        await AsyncStorage.setItem('courses', jsonValue)
+    } catch (e) {
+    }
+}
+
+const getCoursesCache= async () => {
+    try {
+        const value = await AsyncStorage.getItem('courses')
+        if (value !== null) {
+            return JSON.parse(value);
+        }
+    } catch (e) {
+        return []
     }
 }
 
@@ -59,10 +78,18 @@ const Courses = () => {
     const [queryTimer, setQueryTimer] = React.useState(0);
 
     useEffect(async () => {
-        let r = await getCourses(viewer);
+        await getCoursesCache().then((r)=>{
+            console.log("Courses Cache");
             setGroups(r.courses || []);
             setPopular(r.popular || []);
             setWatching(r.watching || []);
+        });
+        let r = await getCourses(viewer);
+        console.log("Courses Live");
+        setGroups(r.courses || []);
+        setPopular(r.popular || []);
+        setWatching(r.watching || []);
+        storeCoursesCache(r);
     }, [])
 
     const onChangeSearch = query => {
@@ -102,6 +129,7 @@ const Courses = () => {
                     data={watching}
                     renderItem={watchingCourse}
                     keyExtractor={item => item.profile._id}
+                    initialNumToRender={2}
                 />
                 <Title>Recently Added:</Title>
                 <FlatList
@@ -109,6 +137,7 @@ const Courses = () => {
                     data={groups}
                     renderItem={renderProfile}
                     keyExtractor={item => item._id}
+                    initialNumToRender={2}
                 />
                 <Title>Popular:</Title>
                 <FlatList
@@ -116,6 +145,7 @@ const Courses = () => {
                     data={popular}
                     renderItem={renderProfile}
                     keyExtractor={item => item._id}
+                    initialNumToRender={2}
                 />
             </ScrollView>
         </SafeAreaView>
@@ -126,5 +156,6 @@ export default Courses;
 
 const styles = StyleSheet.create({
     container: {
+        flex: 1
     },
 });

Views/Groups.js

@@ -39,7 +39,7 @@ const Groups = () => {
         return (<GroupCard profileObj={item} />);
     });
     return (
-        <SafeAreaView>
+        <SafeAreaView style={{flex: 1}}>
             <Searchbar
                 placeholder="Search Groups"
                 onChangeText={onChangeSearch}

Views/Profile.js

@@ -72,6 +72,7 @@ let Profile = ({ navigation, route }) => {
                         keyExtractor={item => item._id || item.createdAt}
                         ListHeaderComponent={header}
                         refreshing={Posts.length === 0}
+                        initialNumToRender={2}
                         onRefresh={() => {
                             API.getPosts(route.params.profileid).then(setPosts);
                         }}

Views/Search.js

@@ -31,7 +31,7 @@ const Search = () => {
         return (<ProfileCard profileObj={item} />);
     });
     return (
-        <SafeAreaView >
+        <SafeAreaView style={{flex:1}}>
             <Searchbar
                 placeholder="Search Users"
                 onChangeText={onChangeSearch}

components/Media.js

@@ -42,13 +42,16 @@ let Media = (props) => {
     const videosId = videoIdF(props.content);
     const iframeSrc = iframeTagF(props.content) || [];
     let [videosFiles, setVideosFiles] = useState([]);
+    let [poster, setPoster] = useState('');
     useEffect(async () => {
         if (!videosId[1]) return 0;
         let videoObj = await API.getVideo(videosId[1]);
-        if(videoObj && videoObj.files)
+        if(videoObj && videoObj.files){
             setVideosFiles(videoObj.files);
+            setPoster(videoObj.pictures.sizes[videoObj.pictures.sizes.length - 1].link);
+        }
     }, [props.content])
-    const video = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} videoId={videosId[1]} /> :
+    const video = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
         (videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
     const iframe = iframeSrc.length ?
         <WebView

components/VideoPlayer.js

@@ -5,7 +5,7 @@ import API from '../API';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
 
-const VideoPlayer = ({ videosFiles, videoId }) => {
+const VideoPlayer = ({ videosFiles, videoId, poster }) => {
   const gState = useSnapshot(GlobalState);
   const viewer = gState.me;
   let chosenVideo = []; 
@@ -15,13 +15,10 @@ const VideoPlayer = ({ videosFiles, videoId }) => {
   const video = React.useRef(null);
   const [status, setStatus] = React.useState({});
 
-  React.useEffect( async ()=>{
-    setTimeout(()=>{
-      if(viewer.data && viewer.data[videoId]){
+  const onLoad = ()=>{
+    if(!viewer.data[videoId]) return 0;
     video.current.setPositionAsync(viewer.data[videoId].time*1000);
-      }
-    }, 5000);
-  }, [])
+  };
 
   return (
     <Video
@@ -30,10 +27,16 @@ const VideoPlayer = ({ videosFiles, videoId }) => {
       source={{
         uri: chosenVideo[0].link,
       }}
+      usePoster={true}
+      posterSource={poster ? {
+        uri: poster
+      } : ''}
       useNativeControls
       resizeMode="contain"
       isLooping
+      shouldPlay={false}
       onPlaybackStatusUpdate={status => setStatus(() => status)}
+      onLoad={onLoad}
     />
   );
 }