LBRYCommunity/lbry-react-native
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity

unified display of channel results #108

Merged
akinwale merged 5 commits from channel-results into master 2020-01-09 17:19:31 +01:00
Conversation 0 Commits 5 Files changed 11 +146 -37
6 changed files with 146 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c88d9f71f8 - Show all commits

55
src/component/fileListItem/view.js
View file

@ -1,8 +1,10 @@
import React from 'react'; import React from 'react';
import { normalizeURI, parseURI } from 'lbry-redux'; 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 { navigateToUri, formatBytes } from 'utils/helper';
import Colors from 'styles/colors'; 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 Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
import DateTime from 'component/dateTime'; import DateTime from 'component/dateTime';
import FileItemMedia from 'component/fileItemMedia'; import FileItemMedia from 'component/fileItemMedia';
@ -15,6 +17,7 @@ import fileListStyle from 'styles/fileList';
class FileListItem extends React.PureComponent { class FileListItem extends React.PureComponent {
state = { state = {
autoStyle: null,
url: null, url: null,
}; };
@ -45,6 +48,11 @@ class FileListItem extends React.PureComponent {
if (!claim && !batchResolve) { if (!claim && !batchResolve) {
resolveUri(uri); resolveUri(uri);
} }
this.setState({
autoStyle:
ChannelIconItem.AUTO_THUMB_STYLES[Math.floor(Math.random() * ChannelIconItem.AUTO_THUMB_STYLES.length)],
});
} }
componentDidUpdate() { componentDidUpdate() {
@ -135,10 +143,13 @@ class FileListItem extends React.PureComponent {
return null; return null;
} }
const isChannel = name && name.startsWith('@');
const hasThumbnail = !!thumbnail;
return ( return (
<View style={style}> <View style={style}>
<TouchableOpacity <TouchableOpacity
style={style} style={[style, isChannel ? fileListStyle.channelContainer : null]}
onPress={this.onPressHandler} onPress={this.onPressHandler}
onLongPress={() => { onLongPress={() => {
if (onLongPress) { if (onLongPress) {
@ -146,13 +157,31 @@ class FileListItem extends React.PureComponent {
} }
}} }}
> >
<FileItemMedia {!isChannel && (
style={fileListStyle.thumbnail} <FileItemMedia
duration={duration} style={fileListStyle.thumbnail}
resizeMode="cover" duration={duration}
title={title || name || normalizeURI(uri).substring(7)} resizeMode="cover"
thumbnail={thumbnail} title={title || name || normalizeURI(uri).substring(7)}
/> thumbnail={thumbnail}
/>
)}
{isChannel && (
<View style={fileListStyle.thumbnail}>
<View style={fileListStyle.channelThumbnailContainer}>
{hasThumbnail && (
<Image style={fileListStyle.channelThumbnail} resizeMode={'cover'} source={{ uri: thumbnail }} />
)}
{!hasThumbnail && (
<Text style={channelIconStyle.autothumbCharacter}>
{title ? title.substring(0, 1).toUpperCase() : claim.name.substring(1, 2).toUpperCase()}
</Text>
)}
</View>
</View>
)}
{selected && ( {selected && (
<View style={fileListStyle.selectedOverlay}> <View style={fileListStyle.selectedOverlay}>
<Icon name={'check-circle'} solid color={Colors.NextLbryGreen} size={32} /> <Icon name={'check-circle'} solid color={Colors.NextLbryGreen} size={32} />
@ -206,17 +235,17 @@ class FileListItem extends React.PureComponent {
</View> </View>
)} )}
{channel && !hideChannel && ( {(channel || isChannel) && !hideChannel && (
<Link <Link
style={fileListStyle.publisher} style={fileListStyle.publisher}
text={channel} text={isChannel ? name : channel}
onPress={() => { onPress={() => {
navigateToUri( navigateToUri(
navigation, navigation,
normalizeURI(shortChannelUri || fullChannelUri), normalizeURI(isChannel ? uri : shortChannelUri || fullChannelUri),
null, null,
false, false,
fullChannelUri, isChannel ? claim && claim.permanent_url : fullChannelUri,
); );
}} }}
/> />

82
src/component/fileResultItem/view.js
View file

@ -3,8 +3,11 @@ import { normalizeURI, parseURI } from 'lbry-redux';
import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native'; import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native';
import { navigateToUri, formatBytes } from 'utils/helper'; import { navigateToUri, formatBytes } from 'utils/helper';
import Colors from 'styles/colors'; 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 Constants from 'constants'; // eslint-disable-line node/no-deprecated-api
import DateTime from 'component/dateTime'; import DateTime from 'component/dateTime';
import FastImage from 'react-native-fast-image';
import FileItemMedia from 'component/fileItemMedia'; import FileItemMedia from 'component/fileItemMedia';
import FilePrice from 'component/filePrice'; import FilePrice from 'component/filePrice';
import Icon from 'react-native-vector-icons/FontAwesome5'; import Icon from 'react-native-vector-icons/FontAwesome5';
@ -14,6 +17,17 @@ import ProgressBar from 'component/progressBar';
import fileListStyle from 'styles/fileList'; import fileListStyle from 'styles/fileList';
class FileResultItem extends React.PureComponent { 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 => { getStorageForFileInfo = fileInfo => {
if (!fileInfo.completed) { if (!fileInfo.completed) {
const written = formatBytes(fileInfo.written_bytes); const written = formatBytes(fileInfo.written_bytes);
@ -58,6 +72,8 @@ class FileResultItem extends React.PureComponent {
title, title,
} = result; } = result;
const isChannel = name && name.startsWith('@');
const hasThumbnail = !!thumbnailUrl;
const obscure = obscureNsfw && nsfw; const obscure = obscureNsfw && nsfw;
const url = normalizeURI(`${name}#${claimId}`); const url = normalizeURI(`${name}#${claimId}`);
const hasChannel = !!channel; const hasChannel = !!channel;
@ -66,14 +82,39 @@ class FileResultItem extends React.PureComponent {
return ( return (
<View style={style}> <View style={style}>
<TouchableOpacity style={style} onPress={this.onPressHandler}> <TouchableOpacity
<FileItemMedia style={[style, isChannel ? fileListStyle.channelContainer : null]}
style={fileListStyle.thumbnail} onPress={this.onPressHandler}
duration={duration} >
resizeMode="cover" {!isChannel && (
title={title || name || normalizeURI(url).substring(7)} <FileItemMedia
thumbnail={thumbnailUrl} style={fileListStyle.thumbnail}
/> duration={duration}
resizeMode="cover"
title={title || name || normalizeURI(url).substring(7)}
thumbnail={thumbnailUrl}
/>
)}
{isChannel && (
<View style={fileListStyle.thumbnail}>
<View style={fileListStyle.channelThumbnailContainer}>
{hasThumbnail && (
<FastImage
style={fileListStyle.channelThumbnail}
resizeMode={FastImage.resizeMode.cover}
source={{ uri: thumbnailUrl }}
/>
)}
{!hasThumbnail && (
<Text style={channelIconStyle.autothumbCharacter}>
{title ? title.substring(0, 1).toUpperCase() : name.substring(1, 2).toUpperCase()}
</Text>
)}
</View>
</View>
)}
{fileInfo && fileInfo.completed && fileInfo.download_path && ( {fileInfo && fileInfo.completed && fileInfo.download_path && (
<Icon <Icon
style={featuredResult ? fileListStyle.featuredDownloadedIcon : fileListStyle.downloadedIcon} style={featuredResult ? fileListStyle.featuredDownloadedIcon : fileListStyle.downloadedIcon}
@ -100,15 +141,22 @@ class FileResultItem extends React.PureComponent {
</View> </View>
)} )}
{hasChannel && ( {hasChannel ||
<Link (isChannel && (
style={fileListStyle.publisher} <Link
text={channel} style={fileListStyle.publisher}
onPress={() => { text={isChannel ? name : channel}
navigateToUri(navigation, normalizeURI(channelUrl), null, false, channelUrl); onPress={() => {
}} navigateToUri(
/> navigation,
)} normalizeURI(isChannel ? url : channelUrl),
null,
false,
isChannel ? url : channelUrl,
);
}}
/>
))}
<View style={fileListStyle.info}> <View style={fileListStyle.info}>
{fileInfo && !isNaN(fileInfo.written_bytes) && fileInfo.written_bytes > 0 && ( {fileInfo && !isNaN(fileInfo.written_bytes) && fileInfo.written_bytes > 0 && (

27
src/component/suggestedSubscriptionItem/view.js
View file

@ -3,6 +3,8 @@ import { buildURI, normalizeURI } from 'lbry-redux';
import { ActivityIndicator, FlatList, Image, Text, View } from 'react-native'; import { ActivityIndicator, FlatList, Image, Text, View } from 'react-native';
import { navigateToUri } from 'utils/helper'; import { navigateToUri } from 'utils/helper';
import Colors from 'styles/colors'; import Colors from 'styles/colors';
import ChannelIconItem from 'component/channelIconItem';
import channelIconStyle from 'styles/channelIcon';
import discoverStyle from 'styles/discover'; import discoverStyle from 'styles/discover';
import FileItem from 'component/fileItem'; import FileItem from 'component/fileItem';
import SubscribeButton from 'component/subscribeButton'; import SubscribeButton from 'component/subscribeButton';
@ -11,11 +13,20 @@ import Link from 'component/link';
import Tag from 'component/tag'; import Tag from 'component/tag';
class SuggestedSubscriptionItem extends React.PureComponent { class SuggestedSubscriptionItem extends React.PureComponent {
state = {
autoStyle: null,
};
componentDidMount() { componentDidMount() {
const { claim, uri, resolveUri } = this.props; const { claim, uri, resolveUri } = this.props;
if (!claim) { if (!claim) {
resolveUri(uri); resolveUri(uri);
} }
this.setState({
autoStyle:
ChannelIconItem.AUTO_THUMB_STYLES[Math.floor(Math.random() * ChannelIconItem.AUTO_THUMB_STYLES.length)],
});
} }
render() { render() {
@ -28,6 +39,7 @@ class SuggestedSubscriptionItem extends React.PureComponent {
} }
} }
const hasThumbnail = !!thumbnail;
if (isResolvingUri) { if (isResolvingUri) {
return ( return (
<View style={subscriptionsStyle.itemLoadingContainer}> <View style={subscriptionsStyle.itemLoadingContainer}>
@ -38,12 +50,15 @@ class SuggestedSubscriptionItem extends React.PureComponent {
return ( return (
<View style={subscriptionsStyle.suggestedItem}> <View style={subscriptionsStyle.suggestedItem}>
<View style={subscriptionsStyle.suggestedItemThumbnailContainer}> <View style={[subscriptionsStyle.suggestedItemThumbnailContainer, this.state.autoStyle]}>
<Image {hasThumbnail && (
style={subscriptionsStyle.suggestedItemThumbnail} <Image style={subscriptionsStyle.suggestedItemThumbnail} resizeMode={'cover'} source={{ uri: thumbnail }} />
resizeMode={'cover'} )}
source={thumbnail ? { uri: thumbnail } : require('../../assets/default_avatar.jpg')} {!hasThumbnail && (
/> <Text style={channelIconStyle.autothumbCharacter}>
{title ? title.substring(0, 1).toUpperCase() : claim ? claim.name.substring(1, 2).toUpperCase() : ''}
</Text>
)}
</View> </View>
<View style={subscriptionsStyle.suggestedItemDetails}> <View style={subscriptionsStyle.suggestedItemDetails}>

2
src/page/subscriptions/view.js
View file

@ -73,7 +73,7 @@ class SubscriptionsPage extends React.PureComponent {
}; };
componentDidMount() { componentDidMount() {
// this.onComponentFocused(); this.onComponentFocused();
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {

15
src/styles/fileList.js
View file

@ -38,6 +38,18 @@ const fileListStyle = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: '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: { selectedOverlay: {
position: 'absolute', position: 'absolute',
left: 0, left: 0,
@ -63,6 +75,9 @@ const fileListStyle = StyleSheet.create({
marginTop: screenWidthPixels <= 720 ? 1 : 3, marginTop: screenWidthPixels <= 720 ? 1 : 3,
color: Colors.LbryGreen, color: Colors.LbryGreen,
}, },
channelContainer: {
alignItems: 'center',
},
loading: { loading: {
position: 'absolute', position: 'absolute',
}, },

2
src/styles/subscriptions.js
View file

@ -199,6 +199,8 @@ const subscriptionsStyle = StyleSheet.create({
height: 70, height: 70,
borderRadius: 140, borderRadius: 140,
overflow: 'hidden', overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
}, },
suggestedItemThumbnail: { suggestedItemThumbnail: {
width: '100%', width: '100%',