92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Text, View, ScrollView, 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) || [];
|
|
let [videosFiles, setVideosFiles] = useState([]);
|
|
useEffect(async () => {
|
|
if (!videosId[1]) return 0;
|
|
let videoObj = await API.getVideo(videosId[1]);
|
|
setVideosFiles(videoObj.files || []);
|
|
}, [props.content])
|
|
const video = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} /> :
|
|
(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,
|
|
},
|
|
multipleImage: {
|
|
width: "49%",
|
|
aspectRatio: 1,
|
|
margin: 2,
|
|
},
|
|
iframe:{
|
|
width: "100%",
|
|
minHeight: 300,
|
|
}
|
|
});
|