Some style fixes

components/Comment.js

@@ -3,6 +3,7 @@ import { Text, View, ScrollView, StyleSheet } from 'react-native';
 import { FAB, Button, Card, Title, IconButton } from 'react-native-paper';
 import API from './../API.js';
 import UserName from './UserName.js';
+import Media from './Media.js';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
 import Moment from 'moment';
@@ -14,6 +15,7 @@ let Comment = ({ comment, postid }) => {
     const gState = useSnapshot(GlobalState);
     const viewer = gState.me;
     let [likes, changeLikes] = useState(Object.keys(comment.reactions).length);
+    let cleanContent = comment.content.replace(/@[A-z]+:.+\w/g, '');
     const newCommentReaction = () => {
         if (!comment.reactions[viewer._id]) {
             comment.reactions[viewer._id] = { type: "like" };
@@ -44,8 +46,8 @@ let Comment = ({ comment, postid }) => {
                         >{likes ? likes : ''}</Button>
                     </View>
                 </View>
-                <Text style={{fontSize: 16}}>{comment.content}</Text>
-                
+                <Text style={{fontSize: 14}}>{cleanContent}</Text>
+                <Media content={comment.content} postId={postid} skiptVideo={true}/>
             </Card.Content>
         </Card>
     );

components/GroupCard.js

@@ -88,7 +88,7 @@ const styles = StyleSheet.create({
     content: {
         margin: 4,
         padding: 0,
-        borderRadius: 10,
+        borderRadius: 5,
     },
     centerItems: {
         justifyContent: 'center',

components/Media.js

@@ -82,7 +82,7 @@ let Media = (props) => {
             subscribed = false;
         };
     }, [props.content])
-    const video = videosFiles.length ? (
+    const video = (videosFiles.length && !props.skiptVideo) ? (
         loaded ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
             (
                 <TouchableHighlight onPress={() => setLoaded(true)}>
@@ -91,7 +91,7 @@ let Media = (props) => {
             )
     ) :
         (videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
-    const video2 = hlsUrl ? ( 
+    const video2 = (hlsUrl && !props.skiptVideo) ? ( 
         loaded ? 
             <VideoPlayer videoUrl={hlsUrl} postId={props.postId} /> :
             <TouchableHighlight onPress={() => {

components/Post.js

@@ -69,7 +69,7 @@ let Post = (props) => {
                                     {" " + Moment(post.createdAt).fromNow()}
                                 </Text>
                             </Text>
-                            <Text style={{ fontSize: 18 }}>{cleanContent}</Text>
+                            <Text style={{ fontSize: 16, paddingBottom:5 }}>{cleanContent}</Text>
                             <Media content={post.content} postId={post._id} post={post} />
                         </View> :
                         <View>
@@ -120,12 +120,12 @@ const styles = StyleSheet.create({
         fontSize: 14,
         fontWeight: 'bold',
         marginBottom: 5,
-        fontSize: 18,
+        fontSize: 17,
     },
     card: {
         margin: 8,
         backgroundColor: "#FFFFFF",
-        borderRadius: 10,
+        borderRadius: 5,
     },
     comment: {
         margin: 8,

components/UserName.js

@@ -50,6 +50,7 @@ let UserName = ({ profileid, hideIcon }) => {
     icon = icon === "person-outline" && profile.subscription && profile.subscription > (new Date() - 0) ? "assignment-ind" : icon;
     icon = icon === "group" && profile.isCourse ? "subscriptions" : icon;
     icon = icon === "group" && profile.isPrivate ? "screen-lock-portrait" : icon;
+    const fullName = " " + profile.profile?.firstName + " " + profile.profile?.lastName;
 
     const onPress = () => {
         return navigation.navigate('Profile', { profileid })
@@ -57,11 +58,9 @@ let UserName = ({ profileid, hideIcon }) => {
 
     return (
         <Text onPress={onPress}>
-            <Text style={{ paddingTop: 10 }}>
-                {!hideIcon ? <Icon name={icon} size={18} /> : <></>}
-            </Text>
-            <Text> {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}</Text>
-
+            {!hideIcon ? 
+                <Icon name={icon} style={{fontSize:13, marginRight: 10}} /> : <></>}
+            {fullName}
         </Text>
     );
 }