Improve video and padding in tabs

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