Some UI improvements
This commit is contained in:
@@ -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%",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user