adolforeyna/EMI-ExpoAPP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Video Working

Browse Source
This commit is contained in:
aeroreyna
2022-03-13 21:01:30 -07:00
parent 082abd8fbe
commit 4dc020f326
5 changed files with 222 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
API.js
View File

@@ -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);
},

38
components/Media.js
View File

@@ -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,

33
components/VideoPlayer.js Normal file
View File

@@ -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,
},
});

162
package-lock.json generated
View File

@@ -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",

3
package.json
View File

@@ -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"