display publish date on file page

This commit is contained in:
Akinwale Ariwodola 2019-01-30 20:31:22 +01:00
parent e3bb5d0fb5
commit 529385bc5b
3 changed files with 35 additions and 13 deletions

View file

@ -32,12 +32,15 @@ class DateTime extends React.PureComponent<Props> {
return date ? <View style={style}><Text style={textStyle}>{moment(date).from(moment())}</Text></View> : null; return date ? <View style={style}><Text style={textStyle}>{moment(date).from(moment())}</Text></View> : null;
} }
// TODO: formatOptions not working as expected in RN
// date.toLocaleDateString([locale, 'en-US'], formatOptions)}
return ( return (
<View style={style}> <View style={style}>
<Text style={textStyle}> <Text style={textStyle}>
{date && {date &&
(show === DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) && (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
date.toLocaleDateString([locale, 'en-US'], formatOptions)} moment(date).format('MMMM D, YYYY')}
{show === DateTime.SHOW_BOTH && ' '} {show === DateTime.SHOW_BOTH && ' '}
{date && {date &&
(show === DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) && (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&

View file

@ -20,6 +20,7 @@ import ImageViewer from 'react-native-image-zoom-viewer';
import Button from 'component/button'; import Button from 'component/button';
import Colors from 'styles/colors'; import Colors from 'styles/colors';
import ChannelPage from 'page/channel'; import ChannelPage from 'page/channel';
import DateTime from 'component/dateTime';
import FileDownloadButton from 'component/fileDownloadButton'; import FileDownloadButton from 'component/fileDownloadButton';
import FileItemMedia from 'component/fileItemMedia'; import FileItemMedia from 'component/fileItemMedia';
import FilePrice from 'component/filePrice'; import FilePrice from 'component/filePrice';
@ -567,15 +568,23 @@ class FilePage extends React.PureComponent {
<Text style={filePageStyle.title} selectable={true}>{title}</Text> <Text style={filePageStyle.title} selectable={true}>{title}</Text>
{channelName && {channelName &&
<View style={filePageStyle.channelRow}> <View style={filePageStyle.channelRow}>
<Link style={filePageStyle.channelName} <View style={filePageStyle.publishInfo}>
selectable={true} <Link style={filePageStyle.channelName}
text={channelName} selectable={true}
numberOfLines={1} text={channelName}
ellipsizeMode={"tail"} numberOfLines={1}
onPress={() => { ellipsizeMode={"tail"}
const channelUri = normalizeURI(channelName); onPress={() => {
navigateToUri(navigation, channelUri); const channelUri = normalizeURI(channelName);
}} /> navigateToUri(navigation, channelUri);
}} />
<DateTime
style={filePageStyle.publishDate}
textStyle={filePageStyle.publishDateText}
block={height}
formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}
show={DateTime.SHOW_DATE} />
</View>
<View style={filePageStyle.subscriptionRow}> <View style={filePageStyle.subscriptionRow}>
<SubscribeButton <SubscribeButton
style={filePageStyle.actionButton} style={filePageStyle.actionButton}

View file

@ -68,15 +68,25 @@ const filePageStyle = StyleSheet.create({
}, },
subscriptionRow: { subscriptionRow: {
flexDirection: 'row', flexDirection: 'row',
alignSelf: 'flex-end' marginTop: 8
},
publishInfo: {
width: '50%',
marginTop: 6,
}, },
channelName: { channelName: {
fontFamily: 'Inter-UI-SemiBold', fontFamily: 'Inter-UI-SemiBold',
fontSize: 20, fontSize: 20,
marginTop: 6,
width: '49%',
color: Colors.LbryGreen color: Colors.LbryGreen
}, },
publishDateText: {
fontFamily: 'Inter-UI-SemiBold',
fontSize: 12,
color: Colors.DescriptionGrey
},
publishDate: {
marginTop: 4
},
description: { description: {
color: Colors.DescriptionGrey, color: Colors.DescriptionGrey,
fontFamily: 'Inter-UI-Regular', fontFamily: 'Inter-UI-Regular',