Some UI improvements

components/Media.js

@@ -93,15 +93,15 @@ let Media = (props) => {
             )
     ) :
         (videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
-    const video2 = (hlsUrl && !props.skiptVideo) ? ( 
-        loaded ? 
+    const video2 = (hlsUrl && !props.skiptVideo) ? (
+        loaded ?
             <VideoPlayer videoUrl={hlsUrl} postId={props.postId} /> :
             <TouchableHighlight onPress={() => {
-                    //setLoaded(true)
-                    GlobalState.currentMedia = hlsUrl;
-                    GlobalState.mediaPost = props.post;
-                }}>
-                {poster ? 
+                //setLoaded(true)
+                GlobalState.currentMedia = hlsUrl;
+                GlobalState.mediaPost = props.post;
+            }}>
+                {poster ?
                     <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} /> :
                     <Button
                         icon={"subscriptions"}
@@ -110,38 +110,38 @@ let Media = (props) => {
                     ></Button>
                 }
             </TouchableHighlight>
-    ): <></>;
+    ) : <></>;
     const iframe = iframeSrc.length ?
         <WebView
             style={styles.iframe}
             source={{ uri: iframeSrc[1] }}
         /> : <></>;
-    const youtubeEmb = youtubeId.length ? 
+    const youtubeEmb = youtubeId.length ?
         <WebView
             style={styles.iframe}
             source={{ uri: "https://www.youtube.com/embed/" + youtubeId + "?fs=0" }}
         /> : <></>;
     const renderImages = (({ item, index }) => {
         return (
-            <TouchableWithoutFeedback style={styles.flatlistImages} 
-            onPress={()=>{
-                //alert("hello");
-                navigation.navigate('Slideshow', { images: imagesTag, startIndex: index});
-            }}
-            onLongPress={()=>{
-                Share.share({
-                    //message: image[1],
-                    url: item[1],
-                });
-            }}>
-                <Image source={{ uri: item[1] }}  style={styles.flatlistImages}/>
+            <TouchableWithoutFeedback style={styles.flatlistImages}
+                onPress={() => {
+                    //alert("hello");
+                    navigation.navigate('Slideshow', { images: imagesTag, startIndex: index });
+                }}
+                onLongPress={() => {
+                    Share.share({
+                        //message: image[1],
+                        url: item[1],
+                    });
+                }}>
+                <Image source={{ uri: item[1] }} style={styles.flatlistImages} />
             </TouchableWithoutFeedback>
-            );
+        );
     });
     let progress = <></>;
-    if(viewer.data && viewer.data[props.postId]) {
+    if (viewer.data && viewer.data[props.postId]) {
         const percent = Math.round(viewer.data[props.postId].time / viewer.data[props.postId].duration * 100);
-        if(percent)
+        if (percent)
             progress =
                 <>
                     <Text>{percent}% {Moment(viewer.data[props.postId].ts).fromNow()}</Text>
@@ -149,7 +149,12 @@ let Media = (props) => {
                 </>;
     }
     return (
-        <View>
+        <View
+            style={{
+                paddingTop: 10,
+                paddingBottom: 3,
+            }}
+        >
             {
                 (imagesTag.length > 2) ?
                     <FlatList
@@ -158,22 +163,29 @@ let Media = (props) => {
                         renderItem={renderImages}
                         keyExtractor={item => item[1]}
                         initialNumToRender={2}
+                        style={{
+                            transform: [{
+                                scale: 1.1
+                            }],
+                            paddingTop: 5,
+                        }}
+                        showsHorizontalScrollIndicator={false}
                     /> :
                     <View style={{ flexDirection: "row" }}>
                         {
                             imagesTag.map((image, i) => {
                                 return (
                                     //<Text key={i}>{post.content}</Text>
-                                    <TouchableWithoutFeedback 
-                                    onPress={()=>{
-                                        navigation.navigate('Slideshow', { images: imagesTag, startIndex: i });
-                                    }}
-                                    onLongPress={()=>{
-                                        Share.share({
-                                            //message: image[1],
-                                            url: image[1],
-                                        });
-                                    }}>
+                                    <TouchableWithoutFeedback
+                                        onPress={() => {
+                                            navigation.navigate('Slideshow', { images: imagesTag, startIndex: i });
+                                        }}
+                                        onLongPress={() => {
+                                            Share.share({
+                                                //message: image[1],
+                                                url: image[1],
+                                            });
+                                        }}>
                                         <Image source={{ uri: image[1] }} key={image[1]} style={imageStyle} />
                                     </TouchableWithoutFeedback>
                                 )
@@ -196,6 +208,7 @@ const styles = StyleSheet.create({
     image: {
         width: "100%",
         aspectRatio: 1,
+        borderRadius: 15,
     },
     poster: {
         width: "100%",
@@ -204,12 +217,14 @@ const styles = StyleSheet.create({
     multipleImage: {
         width: "49%",
         aspectRatio: 1,
-        margin: 2,
+        margin: 3,
+        borderRadius: 15,
     },
     flatlistImages: {
         width: 300,
         aspectRatio: 1,
-        margin: 2,
+        margin: 5,
+        borderRadius: 15,
     },
     iframe: {
         width: "100%",