Video Working

API.js

@@ -132,6 +132,9 @@ const API = {
     getPost(postid) {
         return getCall("/post/" + postid);
     },
+    getVideo(videoId) {
+        return getCall("/post/video/" + videoId);
+    },
     deletePost(postid){
         return deleteCall("/post/" + postid);
     },

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,19 +38,25 @@ 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"}}>
+            <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} />
+                            <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,
+  },
+});

package-lock.json

@@ -1363,6 +1363,11 @@
         "xmlbuilder": "^14.0.0"
       }
     },
+    "@expo/sdk-runtime-versions": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@expo/sdk-runtime-versions/-/sdk-runtime-versions-1.0.0.tgz",
+      "integrity": "sha512-Doz2bfiPndXYFPMRwPyGa1k5QaKDVpY806UJj570epIiMzWaYyCtobasyfC++qfIXVb5Ocy7r3tP9d62hAQ7IQ=="
+    },
     "@expo/vector-icons": {
       "version": "12.0.5",
       "resolved": "https://registry.npmjs.org/@expo/vector-icons/-/vector-icons-12.0.5.tgz",
@@ -1477,6 +1482,14 @@
         "fastq": "^1.6.0"
       }
     },
+    "@react-native-async-storage/async-storage": {
+      "version": "1.15.17",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.15.17.tgz",
+      "integrity": "sha512-NQCFs47aFEch9kya/bqwdpvSdZaVRtzU7YB02L8VrmLSLpKgQH/1VwzFUBPcc1/JI1s3GU4yOLVrEbwxq+Fqcw==",
+      "requires": {
+        "merge-options": "^3.0.4"
+      }
+    },
     "@react-native-community/cli": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-5.0.1.tgz",
@@ -3338,6 +3351,137 @@
         "url-parse": "^1.4.4"
       }
     },
+    "expo-av": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/expo-av/-/expo-av-10.1.3.tgz",
+      "integrity": "sha512-zYhpYthdQ5UPuhNn3XWaMJu94XyXUNw6WEifRnKH5xUHo0Oy0XrV5JAk8iO+7WDgfGo9oHlgvnSWrMNQsbF80A==",
+      "requires": {
+        "@expo/config-plugins": "^4.0.2",
+        "expo-modules-core": "~0.4.7"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "@expo/config-plugins": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-4.1.0.tgz",
+          "integrity": "sha512-+Uq7kzi1StUZZZivnnqNV6+v8b+SMF6MDgH+cEZxCoM9uwLXOK0rTAURzBGtl+C6EEbKnoZmnKGuzABBGPRP7A==",
+          "requires": {
+            "@expo/config-types": "^44.0.0",
+            "@expo/json-file": "8.2.34",
+            "@expo/plist": "0.0.17",
+            "@expo/sdk-runtime-versions": "^1.0.0",
+            "@react-native/normalize-color": "^2.0.0",
+            "chalk": "^4.1.2",
+            "debug": "^4.3.1",
+            "find-up": "~5.0.0",
+            "fs-extra": "9.0.0",
+            "getenv": "^1.0.0",
+            "glob": "7.1.6",
+            "resolve-from": "^5.0.0",
+            "semver": "^7.3.5",
+            "slash": "^3.0.0",
+            "xcode": "^3.0.1",
+            "xml2js": "0.4.23"
+          }
+        },
+        "@expo/config-types": {
+          "version": "44.0.0",
+          "resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-44.0.0.tgz",
+          "integrity": "sha512-d+gpdKOAhqaD5RmcMzGgKzNtvE1w+GCqpFQNSXLliYlXjj+Tv0eL8EPeAdPtvke0vowpPFwd5McXLA90dgY6Jg=="
+        },
+        "@expo/json-file": {
+          "version": "8.2.34",
+          "resolved": "https://registry.npmjs.org/@expo/json-file/-/json-file-8.2.34.tgz",
+          "integrity": "sha512-ZxtBodAZGxdLtgKzmsC+8ViUxt1mhFW642Clu2OuG3f6PAyAFsU/SqEGag9wKFaD3x3Wt8VhL+3y5fMJmUFgPw==",
+          "requires": {
+            "@babel/code-frame": "~7.10.4",
+            "json5": "^1.0.1",
+            "write-file-atomic": "^2.3.0"
+          }
+        },
+        "@expo/plist": {
+          "version": "0.0.17",
+          "resolved": "https://registry.npmjs.org/@expo/plist/-/plist-0.0.17.tgz",
+          "integrity": "sha512-5Ul3d/YOYE6mfum0jCE25XUnkKHZ5vGlU/X2275ZmCtGrpRn1Fl8Nq+jQKSaks3NqTfxdyXROi/TgH8Zxeg2wg==",
+          "requires": {
+            "@xmldom/xmldom": "~0.7.0",
+            "base64-js": "^1.2.3",
+            "xmlbuilder": "^14.0.0"
+          }
+        },
+        "@react-native/normalize-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/@react-native/normalize-color/-/normalize-color-2.0.0.tgz",
+          "integrity": "sha512-Wip/xsc5lw8vsBlmY2MO/gFLp3MvuZ2baBZjDeTjjndMgM0h5sxz7AZR62RDPGgstp8Np7JzjvVqVT7tpFZqsw=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "expo-constants": {
       "version": "12.1.3",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-12.1.3.tgz",
@@ -4183,6 +4327,11 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
+    "is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA=="
+    },
     "is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -4791,6 +4940,14 @@
         "buffer-alloc": "^1.1.0"
       }
     },
+    "merge-options": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
+      "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
+      "requires": {
+        "is-plain-obj": "^2.1.0"
+      }
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -5396,6 +5553,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -27,7 +27,8 @@
     "react-native-vector-icons": "^9.1.0",
     "react-native-web": "0.17.1",
     "react-native-webview": "^11.17.2",
-    "@react-native-async-storage/async-storage": "~1.15.0"
+    "@react-native-async-storage/async-storage": "~1.15.0",
+    "expo-av": "~10.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"