diff --git a/API.js b/API.js index 542c06c..8153cab 100644 --- a/API.js +++ b/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); }, diff --git a/components/Media.js b/components/Media.js index c5084e0..a51ba1f 100644 --- a/components/Media.js +++ b/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 ? : 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 ? : undefined; + const vimeo = videosFiles.length ? : null; return ( - - { - imagesTag.map((image, i) => { - return ( - //{post.content} - - ) - }) - } - - - {vimeo} + + { + imagesTag.map((image, i) => { + return ( + //{post.content} + + ) + }) + } + + {vimeo} ); } @@ -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, diff --git a/components/VideoPlayer.js b/components/VideoPlayer.js new file mode 100644 index 0000000..281b3b9 --- /dev/null +++ b/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 ( +