From 564343b1ac19f5237406d69dc070961834a670df Mon Sep 17 00:00:00 2001
From: aeroreyna <adolforeyna@gmail.com>
Date: Wed, 30 Mar 2022 21:37:43 -0700
Subject: [PATCH] Improve video and padding in tabs

---
 App.js                    |  1 +
 Views/Courses.js          | 37 ++++++++++++++++++++++++++++++++++---
 Views/Groups.js           |  2 +-
 Views/Profile.js          |  1 +
 Views/Search.js           |  2 +-
 components/Media.js       |  7 +++++--
 components/VideoPlayer.js | 19 +++++++++++--------
 7 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/App.js b/App.js
index 3af1eea..52fa98e 100644
--- a/App.js
+++ b/App.js
@@ -108,6 +108,7 @@ const MainNavigation = () => {
             activeColor="#0d6efd"
             inactiveColor="#FFFFFF"
             barStyle={{ backgroundColor: '#000000' }}
+            sceneContainerStyle={{paddingBottom: 0}}
         >
             <Tab.Screen
                 name="Feed"
diff --git a/Views/Courses.js b/Views/Courses.js
index c9caeb4..41169ce 100644
--- a/Views/Courses.js
+++ b/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 () => {
+        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
     },
 });
diff --git a/Views/Groups.js b/Views/Groups.js
index 70f8d58..1542ba8 100644
--- a/Views/Groups.js
+++ b/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}
diff --git a/Views/Profile.js b/Views/Profile.js
index ee9731a..f76c320 100644
--- a/Views/Profile.js
+++ b/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);
                         }}
diff --git a/Views/Search.js b/Views/Search.js
index 37e30d0..658d11a 100644
--- a/Views/Search.js
+++ b/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}
diff --git a/components/Media.js b/components/Media.js
index fd62707..de48bc0 100644
--- a/components/Media.js
+++ b/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
diff --git a/components/VideoPlayer.js b/components/VideoPlayer.js
index 4ab36f8..5413493 100644
--- a/components/VideoPlayer.js
+++ b/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]){
-        video.current.setPositionAsync(viewer.data[videoId].time*1000);
-      }
-    }, 5000);
-  }, [])
+  const onLoad = ()=>{
+    if(!viewer.data[videoId]) return 0;
+    video.current.setPositionAsync(viewer.data[videoId].time*1000);
+  };
 
   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}
     />
   );
 }