Improve video and padding in tabs

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}
     />
   );
 }