diff --git a/src/component/fileListItem/view.js b/src/component/fileListItem/view.js index 8d8ffdc..95bc9df 100644 --- a/src/component/fileListItem/view.js +++ b/src/component/fileListItem/view.js @@ -1,8 +1,10 @@ import React from 'react'; import { normalizeURI, parseURI } from 'lbry-redux'; -import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native'; +import { ActivityIndicator, Image, Platform, Text, TouchableOpacity, View } from 'react-native'; import { navigateToUri, formatBytes } from 'utils/helper'; import Colors from 'styles/colors'; +import ChannelIconItem from 'component/channelIconItem'; +import channelIconStyle from 'styles/channelIcon'; import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api import DateTime from 'component/dateTime'; import FileItemMedia from 'component/fileItemMedia'; @@ -15,6 +17,7 @@ import fileListStyle from 'styles/fileList'; class FileListItem extends React.PureComponent { state = { + autoStyle: null, url: null, }; @@ -45,6 +48,11 @@ class FileListItem extends React.PureComponent { if (!claim && !batchResolve) { resolveUri(uri); } + + this.setState({ + autoStyle: + ChannelIconItem.AUTO_THUMB_STYLES[Math.floor(Math.random() * ChannelIconItem.AUTO_THUMB_STYLES.length)], + }); } componentDidUpdate() { @@ -135,10 +143,13 @@ class FileListItem extends React.PureComponent { return null; } + const isChannel = name && name.startsWith('@'); + const hasThumbnail = !!thumbnail; + return ( { if (onLongPress) { @@ -146,13 +157,31 @@ class FileListItem extends React.PureComponent { } }} > - + {!isChannel && ( + + )} + + {isChannel && ( + + + {hasThumbnail && ( + + )} + {!hasThumbnail && ( + + {title ? title.substring(0, 1).toUpperCase() : claim.name.substring(1, 2).toUpperCase()} + + )} + + + )} + {selected && ( @@ -206,17 +235,17 @@ class FileListItem extends React.PureComponent { )} - {channel && !hideChannel && ( + {(channel || isChannel) && !hideChannel && ( { navigateToUri( navigation, - normalizeURI(shortChannelUri || fullChannelUri), + normalizeURI(isChannel ? uri : shortChannelUri || fullChannelUri), null, false, - fullChannelUri, + isChannel ? claim && claim.permanent_url : fullChannelUri, ); }} /> diff --git a/src/component/fileResultItem/view.js b/src/component/fileResultItem/view.js index 0c0b10e..8f0d584 100644 --- a/src/component/fileResultItem/view.js +++ b/src/component/fileResultItem/view.js @@ -3,8 +3,11 @@ import { normalizeURI, parseURI } from 'lbry-redux'; import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native'; import { navigateToUri, formatBytes } from 'utils/helper'; import Colors from 'styles/colors'; +import ChannelIconItem from 'component/channelIconItem'; +import channelIconStyle from 'styles/channelIcon'; import Constants from 'constants'; // eslint-disable-line node/no-deprecated-api import DateTime from 'component/dateTime'; +import FastImage from 'react-native-fast-image'; import FileItemMedia from 'component/fileItemMedia'; import FilePrice from 'component/filePrice'; import Icon from 'react-native-vector-icons/FontAwesome5'; @@ -14,6 +17,17 @@ import ProgressBar from 'component/progressBar'; import fileListStyle from 'styles/fileList'; class FileResultItem extends React.PureComponent { + state = { + autoStyle: null, + }; + + componentDidMount() { + this.setState({ + autoStyle: + ChannelIconItem.AUTO_THUMB_STYLES[Math.floor(Math.random() * ChannelIconItem.AUTO_THUMB_STYLES.length)], + }); + } + getStorageForFileInfo = fileInfo => { if (!fileInfo.completed) { const written = formatBytes(fileInfo.written_bytes); @@ -58,6 +72,8 @@ class FileResultItem extends React.PureComponent { title, } = result; + const isChannel = name && name.startsWith('@'); + const hasThumbnail = !!thumbnailUrl; const obscure = obscureNsfw && nsfw; const url = normalizeURI(`${name}#${claimId}`); const hasChannel = !!channel; @@ -66,14 +82,39 @@ class FileResultItem extends React.PureComponent { return ( - - + + {!isChannel && ( + + )} + + {isChannel && ( + + + {hasThumbnail && ( + + )} + {!hasThumbnail && ( + + {title ? title.substring(0, 1).toUpperCase() : name.substring(1, 2).toUpperCase()} + + )} + + + )} + {fileInfo && fileInfo.completed && fileInfo.download_path && ( )} - {hasChannel && ( - { - navigateToUri(navigation, normalizeURI(channelUrl), null, false, channelUrl); - }} - /> - )} + {hasChannel || + (isChannel && ( + { + navigateToUri( + navigation, + normalizeURI(isChannel ? url : channelUrl), + null, + false, + isChannel ? url : channelUrl, + ); + }} + /> + ))} {fileInfo && !isNaN(fileInfo.written_bytes) && fileInfo.written_bytes > 0 && ( diff --git a/src/component/suggestedSubscriptionItem/view.js b/src/component/suggestedSubscriptionItem/view.js index ac24a31..5f7e37c 100644 --- a/src/component/suggestedSubscriptionItem/view.js +++ b/src/component/suggestedSubscriptionItem/view.js @@ -3,6 +3,8 @@ import { buildURI, normalizeURI } from 'lbry-redux'; import { ActivityIndicator, FlatList, Image, Text, View } from 'react-native'; import { navigateToUri } from 'utils/helper'; import Colors from 'styles/colors'; +import ChannelIconItem from 'component/channelIconItem'; +import channelIconStyle from 'styles/channelIcon'; import discoverStyle from 'styles/discover'; import FileItem from 'component/fileItem'; import SubscribeButton from 'component/subscribeButton'; @@ -11,11 +13,20 @@ import Link from 'component/link'; import Tag from 'component/tag'; class SuggestedSubscriptionItem extends React.PureComponent { + state = { + autoStyle: null, + }; + componentDidMount() { const { claim, uri, resolveUri } = this.props; if (!claim) { resolveUri(uri); } + + this.setState({ + autoStyle: + ChannelIconItem.AUTO_THUMB_STYLES[Math.floor(Math.random() * ChannelIconItem.AUTO_THUMB_STYLES.length)], + }); } render() { @@ -28,6 +39,7 @@ class SuggestedSubscriptionItem extends React.PureComponent { } } + const hasThumbnail = !!thumbnail; if (isResolvingUri) { return ( @@ -38,12 +50,15 @@ class SuggestedSubscriptionItem extends React.PureComponent { return ( - - + + {hasThumbnail && ( + + )} + {!hasThumbnail && ( + + {title ? title.substring(0, 1).toUpperCase() : claim ? claim.name.substring(1, 2).toUpperCase() : ''} + + )} diff --git a/src/page/subscriptions/view.js b/src/page/subscriptions/view.js index e48487e..83b9027 100644 --- a/src/page/subscriptions/view.js +++ b/src/page/subscriptions/view.js @@ -73,7 +73,7 @@ class SubscriptionsPage extends React.PureComponent { }; componentDidMount() { - // this.onComponentFocused(); + this.onComponentFocused(); } componentWillReceiveProps(nextProps) { diff --git a/src/styles/fileList.js b/src/styles/fileList.js index fe5811b..d3d5f4f 100644 --- a/src/styles/fileList.js +++ b/src/styles/fileList.js @@ -38,6 +38,18 @@ const fileListStyle = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + channelThumbnailContainer: { + width: thumbnailHeight, // maintain same width and height + height: thumbnailHeight, + borderRadius: 140, + overflow: 'hidden', + alignItems: 'center', + justifyContent: 'center', + }, + channelThumbnail: { + width: '100%', + height: '100%', + }, selectedOverlay: { position: 'absolute', left: 0, @@ -63,6 +75,9 @@ const fileListStyle = StyleSheet.create({ marginTop: screenWidthPixels <= 720 ? 1 : 3, color: Colors.LbryGreen, }, + channelContainer: { + alignItems: 'center', + }, loading: { position: 'absolute', }, diff --git a/src/styles/subscriptions.js b/src/styles/subscriptions.js index bb1ff78..20e90d8 100644 --- a/src/styles/subscriptions.js +++ b/src/styles/subscriptions.js @@ -199,6 +199,8 @@ const subscriptionsStyle = StyleSheet.create({ height: 70, borderRadius: 140, overflow: 'hidden', + alignItems: 'center', + justifyContent: 'center', }, suggestedItemThumbnail: { width: '100%',