Add profile, group, and Courses cards

components/Media.js

@@ -3,6 +3,7 @@ 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]+/);
@@ -28,7 +29,7 @@ const imagesTagF = (content) => {
 
 const iframeTagF = (content) => {
     let iframeMatch = content.match(/@iframe:.+\w/g);
-    if (!iframeMatch) return 0;
+    if (!iframeMatch) return [];
     let tag = iframeMatch[0].substring(1);
     let parts = [tag.substring(1, tag.indexOf(":")), tag.substring(tag.indexOf(":") + 1)];
     return parts;
@@ -39,14 +40,20 @@ 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 vimeo = videosFiles.length ? <VideoPlayer videosFiles={videosFiles} /> :
+    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" }}>
@@ -59,7 +66,8 @@ let Media = (props) => {
                     })
                 }
             </View>
-            {vimeo}
+            {video}
+            {iframe}
         </View>
     );
 }
@@ -75,5 +83,9 @@ const styles = StyleSheet.create({
         width: "49%",
         aspectRatio: 1,
         margin: 2,
+    },
+    iframe:{
+        width: "100%",
+        minHeight: 300,
     }
 });