Image load first then video when click

components/Media.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Text, View, ScrollView, Image, StyleSheet } from 'react-native';
+import { Text, View, TouchableHighlight, Image, StyleSheet } from 'react-native';
 import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
 import VimeoPlayer from './VimeoPlayer.js';
@@ -41,17 +41,25 @@ let Media = (props) => {
     const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
     const videosId = videoIdF(props.content);
     const iframeSrc = iframeTagF(props.content) || [];
-    let [videosFiles, setVideosFiles] = useState([]);
-    let [poster, setPoster] = useState('');
+    const [videosFiles, setVideosFiles] = useState([]);
+    const [poster, setPoster] = useState('');
+    const [loaded, setLoaded] = useState(false);
     useEffect(async () => {
         if (!videosId[1]) return 0;
         let videoObj = await API.getVideo(videosId[1]);
         if(videoObj && videoObj.files){
             setVideosFiles(videoObj.files);
-            setPoster(videoObj.pictures.sizes[videoObj.pictures.sizes.length - 1].link);
+            setPoster(videoObj.pictures.sizes[4].link);
         }
     }, [props.content])
-    const video = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
+    const video = videosFiles.length ? (
+            loaded ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
+            (
+                <TouchableHighlight onPress={() => setLoaded(true)}>
+                    <Image source={poster ? {uri: poster} : {}} key={poster} style={styles.poster} />
+                </TouchableHighlight>
+            )
+        ) :
         (videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
     const iframe = iframeSrc.length ?
         <WebView
@@ -83,6 +91,10 @@ const styles = StyleSheet.create({
         width: "100%",
         aspectRatio: 1,
     },
+    poster: {
+        width: "100%",
+        aspectRatio: 9/6,
+    },
     multipleImage: {
         width: "49%",
         aspectRatio: 1,

components/VideoPlayer.js

@@ -17,6 +17,7 @@ const VideoPlayer = ({ videosFiles, videoId, poster }) => {
 
   const onLoad = ()=>{
     if(!viewer.data[videoId]) return 0;
+    console.log(videoId + " loaded")
     video.current.setPositionAsync(viewer.data[videoId].time*1000);
   };
 
@@ -25,16 +26,11 @@ const VideoPlayer = ({ videosFiles, videoId, poster }) => {
       ref={video}
       style={styles.video}
       source={{
-        uri: chosenVideo[0].link,
+        uri: chosenVideo[chosenVideo.length-1].link,
       }}
-      usePoster={true}
-      posterSource={poster ? {
-        uri: poster
-      } : ''}
       useNativeControls
+      shouldPlay={true}
       resizeMode="contain"
-      isLooping
-      shouldPlay={false}
       onPlaybackStatusUpdate={status => setStatus(() => status)}
       onLoad={onLoad}
     />