Merge pull request #415 from lbryio/relative-publish-time

display relative published time for claims
This commit is contained in:
Akinwale Ariwodola 2019-01-25 18:35:48 +01:00 committed by GitHub
commit 5b02ed9b0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 128 additions and 27 deletions

View file

@ -0,0 +1,16 @@
import { connect } from 'react-redux';
import { doFetchBlock, makeSelectBlockDate } from 'lbry-redux';
import DateTime from './view';
const select = (state, props) => ({
date: !props.date && props.block ? makeSelectBlockDate(props.block)(state) : props.date,
});
const perform = dispatch => ({
fetchBlock: height => dispatch(doFetchBlock(height)),
});
export default connect(
select,
perform
)(DateTime);

View file

@ -0,0 +1,52 @@
// @flow
import React from 'react';
import moment from 'moment';
import { View, Text } from 'react-native';
type Props = {
date?: number,
timeAgo?: boolean,
formatOptions: {},
show?: string,
};
class DateTime extends React.PureComponent<Props> {
static SHOW_DATE = 'date';
static SHOW_TIME = 'time';
static SHOW_BOTH = 'both';
static defaultProps = {
formatOptions: {
month: 'long',
day: 'numeric',
year: 'numeric',
},
};
render() {
const { date, formatOptions, timeAgo, style, textStyle } = this.props;
const show = this.props.show || DateTime.SHOW_BOTH;
const locale = 'en-US'; // default to en-US until we get a working i18n module for RN
if (timeAgo) {
return date ? <View style={style}><Text style={textStyle}>{moment(date).from(moment())}</Text></View> : null;
}
return (
<View style={style}>
<Text style={textStyle}>
{date &&
(show === DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
date.toLocaleDateString([locale, 'en-US'], formatOptions)}
{show === DateTime.SHOW_BOTH && ' '}
{date &&
(show === DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
date.toLocaleTimeString()}
{!date && '...'}
</Text>
</View>
);
}
}
export default DateTime;

View file

@ -2,14 +2,15 @@ import React from 'react';
import { normalizeURI } from 'lbry-redux';
import { NavigationActions } from 'react-navigation';
import { NativeModules, Text, View, TouchableOpacity } from 'react-native';
import { navigateToUri } from '../../utils/helper';
import Colors from '../../styles/colors';
import FileItemMedia from '../fileItemMedia';
import FilePrice from '../filePrice';
import { navigateToUri } from 'utils/helper';
import Colors from 'styles/colors';
import DateTime from 'component/dateTime';
import FileItemMedia from 'component/fileItemMedia';
import FilePrice from 'component/filePrice';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from '../link';
import NsfwOverlay from '../nsfwOverlay';
import discoverStyle from '../../styles/discover';
import Link from 'component/link';
import NsfwOverlay from 'component/nsfwOverlay';
import discoverStyle from 'styles/discover';
class FileItem extends React.PureComponent {
constructor(props) {
@ -50,6 +51,7 @@ class FileItem extends React.PureComponent {
const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
const channelName = claim ? claim.channel_name : null;
const height = claim ? claim.height : null;
return (
<View style={style}>
@ -71,11 +73,14 @@ class FileItem extends React.PureComponent {
<Text style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>
{isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={20} />}
</View>
{channelName &&
<Link style={discoverStyle.channelName} text={channelName} onPress={() => {
const channelUri = normalizeURI(channelName);
navigateToUri(navigation, channelUri);
}} />}
<View style={discoverStyle.detailsRow}>
{channelName &&
<Link style={discoverStyle.channelName} text={channelName} onPress={() => {
const channelUri = normalizeURI(channelName);
navigateToUri(navigation, channelUri);
}} />}
<DateTime style={discoverStyle.dateTime} textStyle={discoverStyle.dateTimeText} timeAgo block={height} />
</View>
</TouchableOpacity>
{obscureNsfw && <NsfwOverlay onPress={() => navigation.navigate({ routeName: 'Settings', key: 'settingsPage' })} />}
</View>

View file

@ -8,12 +8,13 @@ import {
TouchableOpacity,
View
} from 'react-native';
import { navigateToUri, formatBytes } from '../../utils/helper';
import Colors from '../../styles/colors';
import FileItemMedia from '../fileItemMedia';
import Link from '../../component/link';
import NsfwOverlay from '../../component/nsfwOverlay';
import fileListStyle from '../../styles/fileList';
import { navigateToUri, formatBytes } from 'utils/helper';
import Colors from 'styles/colors';
import DateTime from 'component/dateTime';
import FileItemMedia from 'component/fileItemMedia';
import Link from 'component/link';
import NsfwOverlay from 'component/nsfwOverlay';
import fileListStyle from 'styles/fileList';
class FileListItem extends React.PureComponent {
getStorageForFileInfo = (fileInfo) => {
@ -62,11 +63,11 @@ class FileListItem extends React.PureComponent {
const isResolving = !fileInfo && isResolvingUri;
const title = fileInfo ? fileInfo.metadata.title : metadata && metadata.title ? metadata.title : parseURI(uri).contentName;
let name;
let channel;
let name, channel, height;
if (claim) {
name = claim.name;
channel = claim.channel_name;
height = claim.height;
}
return (
@ -93,9 +94,13 @@ class FileListItem extends React.PureComponent {
navigateToUri(navigation, channelUri);
}} />}
<View style={fileListStyle.info}>
{fileInfo && <Text style={fileListStyle.infoText}>{this.getStorageForFileInfo(fileInfo)}</Text>}
<DateTime style={fileListStyle.publishInfo} textStyle={fileListStyle.infoText} timeAgo block={height} />
</View>
{fileInfo &&
<View style={fileListStyle.downloadInfo}>
<Text style={fileListStyle.downloadStorage}>{this.getStorageForFileInfo(fileInfo)}</Text>
{!fileInfo.completed &&
<View style={fileListStyle.progress}>
<View style={[fileListStyle.progressCompleted, { flex: this.getDownloadProgress(fileInfo) } ]} />

View file

@ -1,5 +1,5 @@
import { connect } from 'react-redux';
import { doBalanceSubscribe, doBlackListedOutpointsSubscribe, doToast } from 'lbry-redux';
import { doBalanceSubscribe, doBlackListedOutpointsSubscribe, doUpdateBlockHeight, doToast } from 'lbry-redux';
import {
doAuthenticate,
doCheckSubscriptionsInit,
@ -11,7 +11,7 @@ import {
selectUser,
selectEmailToVerify
} from 'lbryinc';
import { doDeleteCompleteBlobs } from '../../redux/actions/file';
import { doDeleteCompleteBlobs } from 'redux/actions/file';
import SplashScreen from './view';
const select = state => ({
@ -29,6 +29,7 @@ const perform = dispatch => ({
fetchSubscriptions: (callback) => dispatch(doFetchMySubscriptions(callback)),
notify: data => dispatch(doToast(data)),
setEmailToVerify: email => dispatch(doUserEmailToVerify(email)),
updateBlockHeight: () => dispatch(doUpdateBlockHeight()),
verifyUserEmail: (token, recaptcha) => dispatch(doUserEmailVerify(token, recaptcha)),
verifyUserEmailFailure: error => dispatch(doUserEmailVerifyFailure(error))
});

View file

@ -18,6 +18,8 @@ import Colors from '../../styles/colors';
import Constants from '../../constants';
import splashStyle from '../../styles/splash';
const BLOCK_HEIGHT_INTERVAL = 1000 * 60 * 2.5; // every 2.5 minutes
class SplashScreen extends React.PureComponent {
static navigationOptions = {
title: 'Splash'
@ -147,6 +149,7 @@ class SplashScreen extends React.PureComponent {
balanceSubscribe,
blacklistedOutpointsSubscribe,
checkSubscriptionsInit,
updateBlockHeight,
navigation,
notify
} = this.props;
@ -154,6 +157,8 @@ class SplashScreen extends React.PureComponent {
balanceSubscribe();
blacklistedOutpointsSubscribe();
checkSubscriptionsInit();
updateBlockHeight();
setInterval(() => { updateBlockHeight(); }, BLOCK_HEIGHT_INTERVAL);
NativeModules.VersionInfo.getAppVersion().then(appVersion => {
this.setState({ shouldAuthenticate: true });
authenticate(appVersion, Platform.OS);

View file

@ -134,6 +134,18 @@ const discoverStyle = StyleSheet.create({
},
titleText: {
fontFamily: 'Inter-UI-Regular'
},
detailsRow: {
flexDirection: 'row',
justifyContent: 'space-between'
},
dateTime: {
marginTop: 2
},
dateTimeText: {
fontFamily: 'Inter-UI-Regular',
fontSize: 14,
color: Colors.DescriptionGrey
}
});

View file

@ -45,14 +45,19 @@ const fileListStyle = StyleSheet.create({
loading: {
position: 'absolute'
},
downloadInfo: {
marginTop: (screenWidthPixels <= 720) ? 4 : 8
info: {
marginTop: (screenWidthPixels <= 720) ? 1 : 2,
flexDirection: 'row',
justifyContent: 'space-between'
},
downloadStorage: {
infoText: {
fontFamily: 'Inter-UI-Regular',
fontSize: (screenWidthPixels <= 720) ? 12 : 14,
color: Colors.ChannelGrey
},
downloadInfo: {
marginTop: 2
},
progress: {
marginTop: (screenWidthPixels <= 720) ? 2 : 4,
height: 3,
@ -65,7 +70,7 @@ const fileListStyle = StyleSheet.create({
progressRemaining: {
backgroundColor: Colors.LbryGreen,
opacity: 0.2
}
},
});
export default fileListStyle;