74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
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'
|
|
|
|
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 0;
|
|
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);
|
|
console.log(videosId);
|
|
const vimeo = videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : undefined;
|
|
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>
|
|
);
|
|
}
|
|
|
|
export default Media;
|
|
|
|
const styles = StyleSheet.create({
|
|
image:{
|
|
width: "100%",
|
|
aspectRatio: 1,
|
|
},
|
|
multipleImage:{
|
|
width: "49%",
|
|
aspectRatio: 1,
|
|
margin: 2,
|
|
}
|
|
});
|