Video Working

components/Media.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Text, View, ScrollView, Image, StyleSheet } from 'react-native';
 import API from './../API.js';
-import VimeoPlayer from './VimeoPlayer.js'
+import VideoPlayer from './VideoPlayer.js';
 
 const videoIdF = (content) => {
     let vimeoTag = content.match(/@vimeo:[0-9]+/);
@@ -38,21 +38,27 @@ let Media = (props) => {
     const imagesTag = imagesTagF(props.content);
     const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
     const videosId = videoIdF(props.content);
-    const vimeo = videosId.length ? <VimeoPlayer videoId={videosId[1]}  /> : undefined;
+    let [videosFiles, setVideosFiles] = useState([]);
+    useEffect(async ()=>{
+        if(!videosId[1]) return 0;
+        let videoObj = await API.getVideo(videosId[1]);
+        setVideosFiles(videoObj.files);
+    }, [props.content])
+    //const vimeo = videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : undefined;
+    const vimeo = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} /> : null;
     return (
         <View>
-        <View style={{flexDirection: "row"}}>
-            {
-                imagesTag.map((image, i) => {
-                    return (
-                        //<Text key={i}>{post.content}</Text>
-                        <Image source={{uri: image[1]}} key={image[1]} style={imageStyle} />
-                    )
-                })
-            }
-            
-        </View>
-        {vimeo}
+            <View style={{ flexDirection: "row" }}>
+                {
+                    imagesTag.map((image, i) => {
+                        return (
+                            //<Text key={i}>{post.content}</Text>
+                            <Image source={{ uri: image[1] }} key={image[1]} style={imageStyle} />
+                        )
+                    })
+                }
+            </View>
+            {vimeo}
         </View>
     );
 }
@@ -60,11 +66,11 @@ let Media = (props) => {
 export default Media;
 
 const styles = StyleSheet.create({
-    image:{
+    image: {
         width: "100%",
         aspectRatio: 1,
     },
-    multipleImage:{
+    multipleImage: {
         width: "49%",
         aspectRatio: 1,
         margin: 2,