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,

components/VideoPlayer.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { View, StyleSheet, Button } from 'react-native';
+import { Video, AVPlaybackStatus } from 'expo-av';
+
+const VideoPlayer = ({videosFiles}) => {
+  //console.log(videosFiles)
+  const video = React.useRef(null);
+  const [status, setStatus] = React.useState({});
+  
+  return (
+    <Video
+      ref={video}
+      style={styles.video}
+      source={{
+        uri: videosFiles[0].link,
+      }}
+      useNativeControls
+      resizeMode="contain"
+      isLooping
+      onPlaybackStatusUpdate={status => setStatus(() => status)}
+    />
+  );
+}
+
+export default VideoPlayer;
+
+const styles = StyleSheet.create({
+  video: {
+    alignSelf: 'center',
+    width: 320,
+    height: 200,
+  },
+});