Feed showing posts

components/Media.js

@@ -0,0 +1,73 @@
+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,
+    }
+});