Merge pull request #186 from lbryio/discover-resolve

display activity indicator for discover and trending items while resolving
This commit is contained in:
Akinwale Ariwodola 2018-06-22 18:43:34 +01:00 committed by GitHub
commit 676617ef19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 20 deletions

View file

@ -23,7 +23,7 @@ class FileItem extends React.PureComponent {
resolve(props) {
const { isResolvingUri, resolveUri, claim, uri } = props;
if (!isResolvingUri && claim === undefined && uri) {
resolveUri(uri);
}
@ -47,15 +47,6 @@ class FileItem extends React.PureComponent {
const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
const channelName = claim ? claim.channel_name : null;
let description = '';
if (isResolvingUri && !claim) {
description = 'Loading...';
} else if (metadata && metadata.description) {
description = metadata.description;
} else if (claim === null) {
description = 'This address contains no content.';
}
return (
<View style={style}>
<TouchableOpacity style={discoverStyle.container} onPress={() => {
@ -65,12 +56,16 @@ class FileItem extends React.PureComponent {
navigation.navigate({ routeName: 'File', key: uri, params: { uri } });
}
}>
<FileItemMedia title={title} thumbnail={thumbnail} blurRadius={obscureNsfw ? 15 : 0} resizeMode="cover" />
<FileItemMedia title={title}
thumbnail={thumbnail}
blurRadius={obscureNsfw ? 15 : 0}
resizeMode="cover"
isResolvingUri={isResolvingUri} />
<FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />
<Text style={discoverStyle.fileItemName}>{title}</Text>
{channelName &&
<Link style={discoverStyle.channelName} text={channelName} onPress={() => {
const channelUri = normalizeURI(channelName);
const channelUri = normalizeURI(channelName);
navigation.navigate({ routeName: 'File', key: channelUri, params: { uri: channelUri }});
}} />}
</TouchableOpacity>

View file

@ -1,6 +1,7 @@
import React from 'react';
import { Text, Image, View } from 'react-native';
import fileItemMediaStyle from '../../styles/fileItemMedia';
import { ActivityIndicator, Image, Text, View } from 'react-native';
import Colors from '../../styles/colors';
import fileItemMediaStyle from '../../styles/fileItemMedia';
class FileItemMedia extends React.PureComponent {
static AUTO_THUMB_STYLES = [
@ -28,14 +29,14 @@ class FileItemMedia extends React.PureComponent {
render() {
let style = this.props.style;
const { title, thumbnail, blurRadius, resizeMode } = this.props;
const { blurRadius, isResolvingUri, thumbnail, title, resizeMode } = this.props;
const atStyle = this.state.autoThumbStyle;
if (thumbnail && ((typeof thumbnail) === 'string')) {
if (style == null) {
style = fileItemMediaStyle.thumbnail;
}
return (
<Image source={{uri: thumbnail}}
blurRadius={blurRadius}
@ -43,14 +44,20 @@ class FileItemMedia extends React.PureComponent {
style={style} />
);
}
return (
<View style={[style ? style : fileItemMediaStyle.autothumb, atStyle]}>
<Text style={fileItemMediaStyle.autothumbText}>{title &&
{isResolvingUri && (
<View style={fileItemMediaStyle.resolving}>
<ActivityIndicator color={Colors.White} size={"large"} />
<Text style={fileItemMediaStyle.text}>Resolving...</Text>
</View>
)}
{!isResolvingUri && <Text style={fileItemMediaStyle.autothumbText}>{title &&
title
.replace(/\s+/g, '')
.substring(0, Math.min(title.replace(' ', '').length, 5))
.toUpperCase()}</Text>
.toUpperCase()}</Text>}
</View>
);
}

View file

@ -1,6 +1,6 @@
import { StyleSheet, Dimensions } from 'react-native';
const screenDimension = Dimensions.get('window');
const screenDimension = Dimensions.get('window');
const width = screenDimension.width - 48; // screen width minus combined left and right margins
const fileItemMediaStyle = StyleSheet.create({
@ -49,6 +49,17 @@ const fileItemMediaStyle = StyleSheet.create({
autothumbOrange: {
backgroundColor: '#ffa726'
},
resolving: {
alignItems: 'center',
flex: 1,
justifyContent: 'center'
},
text: {
color: '#ffffff',
fontFamily: 'Metropolis-Regular',
fontSize: 16,
marginTop: 8
},
thumbnail: {
flex: 1,
width: '100%',