Merge pull request #415 from lbryio/relative-publish-time
display relative published time for claims
This commit is contained in:
commit
5b02ed9b0b
8 changed files with 128 additions and 27 deletions
16
app/src/component/dateTime/index.js
Normal file
16
app/src/component/dateTime/index.js
Normal 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);
|
52
app/src/component/dateTime/view.js
Normal file
52
app/src/component/dateTime/view.js
Normal 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;
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
@ -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) } ]} />
|
||||
|
|
|
@ -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))
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue