Some UI improvements

This commit is contained in:
Adolfo Reyna
2023-07-17 17:08:32 -04:00
parent 940bd14d6e
commit 919cd4be3b
3 changed files with 70 additions and 45 deletions

View File

@@ -97,10 +97,10 @@ let Media = (props) => {
loaded ?
<VideoPlayer videoUrl={hlsUrl} postId={props.postId} /> :
<TouchableHighlight onPress={() => {
//setLoaded(true)
GlobalState.currentMedia = hlsUrl;
GlobalState.mediaPost = props.post;
}}>
//setLoaded(true)
GlobalState.currentMedia = hlsUrl;
GlobalState.mediaPost = props.post;
}}>
{poster ?
<Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} /> :
<Button
@@ -110,7 +110,7 @@ let Media = (props) => {
></Button>
}
</TouchableHighlight>
): <></>;
) : <></>;
const iframe = iframeSrc.length ?
<WebView
style={styles.iframe}
@@ -124,24 +124,24 @@ let Media = (props) => {
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}/>
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,6 +163,13 @@ let Media = (props) => {
renderItem={renderImages}
keyExtractor={item => item[1]}
initialNumToRender={2}
style={{
transform: [{
scale: 1.1
}],
paddingTop: 5,
}}
showsHorizontalScrollIndicator={false}
/> :
<View style={{ flexDirection: "row" }}>
{
@@ -165,15 +177,15 @@ let Media = (props) => {
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],
});
}}>
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%",

View File

@@ -60,7 +60,10 @@ let Post = (props) => {
);
return (
<Card style={styles.card}>
<Card.Content>
<Card.Content style={{
padding: 0,
margin: 0,
}}>
<Hyperlink linkDefault={true} linkStyle={{ color: '#2980b9' }}>
{!post.nonOrganicType ?
<View>
@@ -71,7 +74,10 @@ let Post = (props) => {
{" " + Moment(post.createdAt).fromNow()}
</Text>
</View>
<Text style={{ fontSize: 15, padding: 0 }}>{cleanContent}</Text>
{ cleanContent.length ?
<Text style={{ fontSize: 15, padding: 0 }}>{cleanContent}</Text>
: <></>
}
<View style={{paddingTop: 5}}>
<Media content={post.content} postId={post._id} post={post} />
</View>
@@ -142,9 +148,10 @@ const styles = StyleSheet.create({
},
card: {
margin: 0,
backgroundColor: "#FFFAFA",
backgroundColor: "#FAFAFA",
borderRadius: 0,
marginBottom: 2
marginBottom: 2,
padding: 0
},
comment: {
margin: 8,

View File

@@ -2,12 +2,13 @@ import React, { useState, useEffect } from 'react';
import { Avatar } from 'react-native-paper';
import { View, StyleSheet, Text } from 'react-native';
import API from './../API.js';
import { useNavigation } from '@react-navigation/native';
const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
const ProfileHeader = ({ profileid, withName = false, small = false }) => {
let [profile, setProfile] = useState({});
const navigation = useNavigation();
useEffect(() => {
let subscribed = true;
let getData = async () => {
@@ -22,14 +23,16 @@ const ProfileHeader = ({ profileid, withName = false, small = false }) => {
}, [profileid]);
let photoUrl = profile.profile && profile.profile.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
const fullName = " " + profile.profile?.firstName + " " + profile.profile?.lastName;
console.log(photoUrl);
const onPress = () => {
return navigation.navigate('Profile', { profileid })
}
return (
<View style={styles.container}>
<View style={styles.avatarContainer}>
<Avatar.Image size={small ? 20 : 30} source={{ uri: photoUrl }} />
<Avatar.Image size={small ? 20 : 30} source={{ uri: photoUrl }} onPress={onPress} />
</View>
<View style={styles.textContainer}>
<Text style={small ? styles.smallProfileName : styles.profileName}>{fullName}</Text>
<Text style={small ? styles.smallProfileName : styles.profileName} onPress={onPress}>{fullName}</Text>
</View>
</View>
);