diff --git a/app/src/component/fileItem/view.js b/app/src/component/fileItem/view.js index 1743e5b2..939f654a 100644 --- a/app/src/component/fileItem/view.js +++ b/app/src/component/fileItem/view.js @@ -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 ( { @@ -65,12 +56,16 @@ class FileItem extends React.PureComponent { navigation.navigate({ routeName: 'File', key: uri, params: { uri } }); } }> - + {title} {channelName && { - const channelUri = normalizeURI(channelName); + const channelUri = normalizeURI(channelName); navigation.navigate({ routeName: 'File', key: channelUri, params: { uri: channelUri }}); }} />} diff --git a/app/src/component/fileItemMedia/view.js b/app/src/component/fileItemMedia/view.js index d5159c38..9541916a 100644 --- a/app/src/component/fileItemMedia/view.js +++ b/app/src/component/fileItemMedia/view.js @@ -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 ( ); } - + return ( - {title && + {isResolvingUri && ( + + + Resolving... + + )} + {!isResolvingUri && {title && title .replace(/\s+/g, '') .substring(0, Math.min(title.replace(' ', '').length, 5)) - .toUpperCase()} + .toUpperCase()}} ); } diff --git a/app/src/styles/fileItemMedia.js b/app/src/styles/fileItemMedia.js index cd9c5ceb..2c50d2c0 100644 --- a/app/src/styles/fileItemMedia.js +++ b/app/src/styles/fileItemMedia.js @@ -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%',