aeroreyna
108 lines
3.4 KiB
JavaScript
108 lines
3.4 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Text, View, TouchableHighlight, Image, StyleSheet } from 'react-native';
|
|
import API from './../API.js';
|
|
import VideoPlayer from './VideoPlayer.js';
|
|
import VimeoPlayer from './VimeoPlayer.js';
|
|
import { WebView } from 'react-native-webview';
|
|
|
|
const videoIdF = (content) => {
|
|
let vimeoTag = content.match(/@vimeo:[0-9]+/);
|
|
let youtubeTag = content.match(/@youtube:[0-z]+/);
|
|
if (!vimeoTag && !youtubeTag) return [];
|
|
let tag = youtubeTag || vimeoTag;
|
|
tag = tag[0].substring(1);
|
|
return tag.split(':');
|
|
};
|
|
|
|
const imagesTagF = (content) => {
|
|
let images = content.match(/@image:[0-z|/|.|]+/g);
|
|
if (!images) return [];
|
|
let Tags = [];
|
|
images.forEach(i => {
|
|
let tag = i.substring(1);
|
|
let parts = [tag.substring(1, tag.indexOf(":")), tag.substring(tag.indexOf(":") + 1)];
|
|
if (parts[1].substring(0, 4) != "http") parts[1] = "https://social.emmint.com/" + parts[1];
|
|
Tags.push(parts);
|
|
});
|
|
return Tags;
|
|
};
|
|
|
|
const iframeTagF = (content) => {
|
|
let iframeMatch = content.match(/@iframe:.+\w/g);
|
|
if (!iframeMatch) return [];
|
|
let tag = iframeMatch[0].substring(1);
|
|
let parts = [tag.substring(1, tag.indexOf(":")), tag.substring(tag.indexOf(":") + 1)];
|
|
return parts;
|
|
};
|
|
|
|
|
|
let Media = (props) => {
|
|
const imagesTag = imagesTagF(props.content);
|
|
const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
|
|
const videosId = videoIdF(props.content);
|
|
const iframeSrc = iframeTagF(props.content) || [];
|
|
const [videosFiles, setVideosFiles] = useState([]);
|
|
const [poster, setPoster] = useState('');
|
|
const [loaded, setLoaded] = useState(false);
|
|
useEffect(async () => {
|
|
if (!videosId[1]) return 0;
|
|
let videoObj = await API.getVideo(videosId[1]);
|
|
if(videoObj && videoObj.files){
|
|
setVideosFiles(videoObj.files);
|
|
setPoster(videoObj.pictures.sizes[4].link);
|
|
}
|
|
}, [props.content])
|
|
const video = videosFiles.length ? (
|
|
loaded ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
|
|
(
|
|
<TouchableHighlight onPress={() => setLoaded(true)}>
|
|
<Image source={poster ? {uri: poster} : {}} key={poster} style={styles.poster} />
|
|
</TouchableHighlight>
|
|
)
|
|
) :
|
|
(videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
|
|
const iframe = iframeSrc.length ?
|
|
<WebView
|
|
style={styles.iframe}
|
|
source={{ uri: iframeSrc[1] }}
|
|
/> : <></>;
|
|
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>
|
|
{video}
|
|
{iframe}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default Media;
|
|
|
|
const styles = StyleSheet.create({
|
|
image: {
|
|
width: "100%",
|
|
aspectRatio: 1,
|
|
},
|
|
poster: {
|
|
width: "100%",
|
|
aspectRatio: 9/6,
|
|
},
|
|
multipleImage: {
|
|
width: "49%",
|
|
aspectRatio: 1,
|
|
margin: 2,
|
|
},
|
|
iframe:{
|
|
width: "100%",
|
|
minHeight: 300,
|
|
}
|
|
});
|