LBRYCommunity/lbry-fdroid
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity

Explore page redesign (#518)

Browse source
This commit is contained in:
Akinwale Ariwodola 2019-04-24 15:31:44 +01:00 committed by GitHub
parent d0226ab4cc
commit 73d469dc8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 8340 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8169
app/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

6
app/package.json
View file

@ -8,8 +8,8 @@
"dependencies": {
"base-64": "^0.1.0",
"@expo/vector-icons": "^8.1.0",
"lbry-redux": "lbryio/lbry-redux#sync",
"lbryinc": "lbryio/lbryinc#sync",
"lbry-redux": "lbryio/lbry-redux",
"lbryinc": "lbryio/lbryinc",
"lodash": ">=4.17.11",
"merge": ">=1.2.1",
"moment": "^2.22.1",
@ -22,7 +22,7 @@
"react-native-gesture-handler": "^1.1.0",
"react-native-image-zoom-viewer": "^2.2.5",
"react-native-phone-input": "lbryio/react-native-phone-input",
"react-native-vector-icons": "^5.0.0",
"react-native-vector-icons": "^6.4.2",
"react-native-video": "lbryio/react-native-video#exoplayer-lbry-android",
"react-navigation": "^3.6.1",
"react-navigation-redux-helpers": "^3.0.0",

4
app/src/component/categoryList/index.js Normal file
View file

@ -0,0 +1,4 @@
import { connect } from 'react-redux';
import CategoryList from './view';
export default connect(null, null)(CategoryList);

36
app/src/component/categoryList/view.js Normal file
View file

@ -0,0 +1,36 @@
import React from 'react';
import NavigationActions from 'react-navigation';
import { FlatList, Text, View } from 'react-native';
import { normalizeURI } from 'lbry-redux';
import FileItem from '/component/fileItem';
import discoverStyle from 'styles/discover';
class CategoryList extends React.PureComponent {
render() {
const { category, categoryMap, navigation } = this.props;
return (
<FlatList
style={discoverStyle.horizontalScrollContainer}
contentContainerStyle={discoverStyle.horizontalScrollPadding}
renderItem={ ({item}) => (
<FileItem
style={discoverStyle.fileItem}
mediaStyle={discoverStyle.fileItemMedia}
key={item}
uri={normalizeURI(item)}
navigation={navigation}
showDetails={true}
compactView={false} />
)
}
horizontal={true}
showsHorizontalScrollIndicator={false}
data={categoryMap[category]}
keyExtractor={(item, index) => item}
/>
);
}
}
export default CategoryList;

9
app/src/component/fileItem/view.js
View file

@ -70,7 +70,7 @@ class FileItem extends React.PureComponent {
return (
<View style={style}>
<TouchableOpacity style={discoverStyle.container} onPress={this.navigateToFileUri}>
{!compactView && titleBeforeThumbnail && <Text style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>}
{!compactView && titleBeforeThumbnail && <Text numberOfLines={1} style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>}
<FileItemMedia title={title}
thumbnail={thumbnail}
blurRadius={obscureNsfw ? 15 : 0}
@ -78,10 +78,11 @@ class FileItem extends React.PureComponent {
isResolvingUri={isResolvingUri}
style={mediaStyle} />
{!compactView && <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />}
{(!compactView && fileInfo && fileInfo.completed) && <Icon style={discoverStyle.downloadedIcon} solid={true} color={Colors.BrightGreen} name={"folder"} size={16} />}
{(!compactView && (!fileInfo || !fileInfo.completed)) && <FilePrice uri={uri} style={discoverStyle.filePriceContainer} textStyle={discoverStyle.filePriceText} />}
{!compactView && <View style={isRewardContent ? discoverStyle.rewardTitleContainer : null}>
<Text style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>
{isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={20} />}
<Text numberOfLines={1} style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>
{isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={14} />}
</View>}
{(!compactView && showDetails) &&
<View style={discoverStyle.detailsRow}>

4
app/src/component/fileList/view.js
View file

@ -3,7 +3,7 @@ import * as React from 'react';
import { buildURI } from 'lbry-redux';
import { FlatList } from 'react-native';
import FileItem from 'component/fileItem';
import discoverStyle from 'styles/discover';
import fileListStyle from 'styles/fileList';
// In the future, all Flow types need to be specified in a common source (lbry-redux, perhaps?)
type FileInfo = {
@ -183,7 +183,7 @@ class FileList extends React.PureComponent<Props, State> {
onEndReached={onEndReached}
keyExtractor={(item, index) => item}
renderItem={({item}) => (
<FileItem style={discoverStyle.fileItem}
<FileItem style={fileListStyle.fileItem}
uri={item}
navigation={navigation}
showDetails={true}

2
app/src/component/fileListItem/view.js
View file

@ -12,6 +12,7 @@ import { navigateToUri, formatBytes } from 'utils/helper';
import Colors from 'styles/colors';
import DateTime from 'component/dateTime';
import FileItemMedia from 'component/fileItemMedia';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from 'component/link';
import NsfwOverlay from 'component/nsfwOverlay';
import fileListStyle from 'styles/fileList';
@ -85,6 +86,7 @@ class FileListItem extends React.PureComponent {
resizeMode="cover"
title={(title || name)}
thumbnail={metadata ? metadata.thumbnail : null} />
{fileInfo && fileInfo.completed && <Icon style={fileListStyle.downloadedIcon} solid={true} color={Colors.BrightGreen} name={"folder"} size={16} />}
<View style={fileListStyle.detailsContainer}>
{featuredResult && <Text style={fileListStyle.featuredUri} numberOfLines={1}>{uri}</Text>}

4
app/src/component/subscribeButton/view.js
View file

@ -25,14 +25,14 @@ class SubscribeButton extends React.PureComponent {
const iconColor = isSubscribed ? null : Colors.Red;
const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
const subscriptionLabel = isSubscribed ? __('Unsubscribe') : __('Subscribe');
const subscriptionLabel = isSubscribed ? null : __('Subscribe');
const { claimName } = parseURI(uri);
return (
<Button
style={styles}
theme={"light"}
icon={"heart"}
icon={isSubscribed ? "heart-broken" : "heart"}
iconColor={iconColor}
solid={isSubscribed ? false : true}
text={subscriptionLabel}

4
app/src/page/discover/index.js
View file

@ -1,6 +1,8 @@
import { connect } from 'react-redux';
import {
doFileList,
selectBalance,
selectFileInfosDownloaded,
} from 'lbry-redux';
import {
doFetchFeaturedUris,
@ -24,6 +26,7 @@ const select = state => ({
enabledChannelNotifications: selectEnabledChannelNotifications(state),
featuredUris: selectFeaturedUris(state),
fetchingFeaturedUris: selectFetchingFeaturedUris(state),
fileInfos: selectFileInfosDownloaded(state),
ratingReminderDisabled: makeSelectClientSetting(Constants.SETTING_RATING_REMINDER_DISABLED)(state),
ratingReminderLastShown: makeSelectClientSetting(Constants.SETTING_RATING_REMINDER_LAST_SHOWN)(state),
unreadSubscriptions: selectUnreadSubscriptions(state),
@ -33,6 +36,7 @@ const perform = dispatch => ({
fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()),
fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
fetchSubscriptions: () => dispatch(doFetchMySubscriptions()),
fileList: () => dispatch(doFileList()),
removeUnreadSubscriptions: () => dispatch(doRemoveUnreadSubscriptions()),
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value))
});

32
app/src/page/discover/view.js
View file

@ -12,11 +12,11 @@ import {
import { Lbry, normalizeURI, parseURI } from 'lbry-redux';
import AsyncStorage from '@react-native-community/async-storage';
import moment from 'moment';
import CategoryList from 'component/categoryList';
import Constants from 'constants';
import Colors from 'styles/colors';
import discoverStyle from 'styles/discover';
import FloatingWalletBalance from 'component/floatingWalletBalance';
import FileItem from 'component/fileItem';
import UriBar from 'component/uriBar';
class DiscoverPage extends React.PureComponent {
@ -46,12 +46,14 @@ class DiscoverPage extends React.PureComponent {
const {
fetchFeaturedUris,
fetchRewardedContent,
fetchSubscriptions
fetchSubscriptions,
fileList
} = this.props;
fetchFeaturedUris();
fetchRewardedContent();
fetchSubscriptions();
fileList();
this.showRatingReminder();
}
@ -150,6 +152,10 @@ class DiscoverPage extends React.PureComponent {
setClientSetting(Constants.SETTING_RATING_REMINDER_LAST_SHOWN, settingString);
}
trimClaimIdFromCategory(category) {
return category.split('#')[0];
}
render() {
const { featuredUris, fetchingFeaturedUris, navigation } = this.props;
const hasContent = typeof featuredUris === 'object' && Object.keys(featuredUris).length,
@ -165,22 +171,20 @@ class DiscoverPage extends React.PureComponent {
</View>
)}
{(!!hasContent) &&
(<SectionList style={discoverStyle.scrollContainer}
(<SectionList
style={discoverStyle.scrollContainer}
contentContainerStyle={discoverStyle.scrollPadding}
renderItem={ ({item, index, section}) => (
<FileItem
style={discoverStyle.fileItem}
mediaStyle={discoverStyle.fileItemMedia}
key={item}
uri={normalizeURI(item)}
navigation={navigation}
compactView={false}
showDetails={true} />
)
}
<CategoryList
key={item}
category={item}
categoryMap={featuredUris}
navigation={navigation} />
)}
renderSectionHeader={
({section: {title}}) => (<Text style={discoverStyle.categoryName}>{title}</Text>)
}
sections={Object.keys(featuredUris).map(category => ({ title: category, data: featuredUris[category] }))}
sections={Object.keys(featuredUris).map(category => ({ title: this.trimClaimIdFromCategory(category), data: [category] }))}
keyExtractor={(item, index) => item}
/>)
}

18
app/src/page/downloads/view.js
View file

@ -9,15 +9,15 @@ import {
View,
ScrollView
} from 'react-native';
import { navigateToUri, uriFromFileInfo } from '../../utils/helper';
import Colors from '../../styles/colors';
import PageHeader from '../../component/pageHeader';
import FileListItem from '../../component/fileListItem';
import FloatingWalletBalance from '../../component/floatingWalletBalance';
import StorageStatsCard from '../../component/storageStatsCard';
import UriBar from '../../component/uriBar';
import downloadsStyle from '../../styles/downloads';
import fileListStyle from '../../styles/fileList';
import { navigateToUri, uriFromFileInfo } from 'utils/helper';
import Colors from 'styles/colors';
import PageHeader from 'component/pageHeader';
import FileListItem from 'component/fileListItem';
import FloatingWalletBalance from 'component/floatingWalletBalance';
import StorageStatsCard from 'component/storageStatsCard';
import UriBar from 'component/uriBar';
import downloadsStyle from 'styles/downloads';
import fileListStyle from 'styles/fileList';
class DownloadsPage extends React.PureComponent {
static navigationOptions = {

1
app/src/page/file/view.js
View file

@ -555,6 +555,7 @@ class FilePage extends React.PureComponent {
fileInfo.written_bytes < fileInfo.total_bytes &&
!this.state.stopDownloadConfirmed &&
<Button style={filePageStyle.actionButton}
icon={"stop"}
theme={"light"}
text={"Stop Download"}
onPress={this.onStopDownloadPressed} />

2
app/src/page/settings/view.js
View file

@ -29,7 +29,7 @@ class SettingsPage extends React.PureComponent {
const actualKeepDaemonRunning = (keepDaemonRunning === null || keepDaemonRunning === undefined) ? true : keepDaemonRunning;
return (
<View>
<View style={settingsStyle.container}>
<PageHeader title={"Settings"}
onBackPressed={() => navigateBack(navigation, drawerStack, popDrawerStack)} />
<ScrollView style={settingsStyle.scrollContainer}>

6
app/src/page/subscriptions/view.js
View file

@ -16,7 +16,7 @@ import moment from 'moment';
import Button from 'component/button';
import Colors from 'styles/colors';
import Constants from 'constants';
import discoverStyle from 'styles/discover';
import fileListStyle from 'styles/fileList';
import subscriptionsStyle from 'styles/subscriptions';
import FloatingWalletBalance from 'component/floatingWalletBalance';
import FileItem from 'component/fileItem';
@ -104,7 +104,7 @@ class SubscriptionsPage extends React.PureComponent {
renderItem={ ({item}) => (
<FileItem
style={subscriptionsStyle.fileItem}
mediaStyle={discoverStyle.fileItemMedia}
mediaStyle={fileListStyle.fileItemMedia}
key={item}
uri={uriFromFileInfo(item)}
navigation={navigation}
@ -128,7 +128,7 @@ class SubscriptionsPage extends React.PureComponent {
return uris.map(uri => (
<FileItem
style={subscriptionsStyle.fileItem}
mediaStyle={discoverStyle.fileItemMedia}
mediaStyle={fileListStyle.fileItemMedia}
key={uri}
uri={uri}
navigation={navigation}

7
app/src/page/trending/view.js
View file

@ -10,8 +10,9 @@ import {
import { normalizeURI } from 'lbry-redux';
import AsyncStorage from '@react-native-community/async-storage';
import moment from 'moment';
import FileItem from '/component/fileItem';
import FileItem from 'component/fileItem';
import discoverStyle from 'styles/discover';
import fileListStyle from 'styles/fileList';
import Colors from 'styles/colors';
import FloatingWalletBalance from 'component/floatingWalletBalance';
import UriBar from 'component/uriBar';
@ -41,8 +42,8 @@ class TrendingPage extends React.PureComponent {
<FlatList style={discoverStyle.trendingContainer}
renderItem={ ({item}) => (
<FileItem
style={discoverStyle.fileItem}
mediaStyle={discoverStyle.fileItemMedia}
style={fileListStyle.fileItem}
mediaStyle={fileListStyle.fileItemMedia}
key={item}
uri={normalizeURI(item)}
navigation={navigation}

2
app/src/page/wallet/view.js
View file

@ -39,7 +39,7 @@ class WalletPage extends React.PureComponent {
}
return (
<View>
<View style={walletStyle.container}>
<UriBar navigation={navigation} />
<ScrollView keyboardShouldPersistTaps={'handled'}>
<View style={walletStyle.warningCard}>

3
app/src/styles/about.js
View file

@ -3,7 +3,8 @@ import Colors from './colors';
const aboutStyle = StyleSheet.create({
container: {
flex: 1
flex: 1,
backgroundColor: Colors.PageBackground
},
scrollContainer: {
flex: 1

3
app/src/styles/channelPage.js
View file

@ -5,6 +5,7 @@ const channelPageStyle = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: Colors.PageBackground
},
content: {
flex: 1
@ -67,7 +68,7 @@ const channelPageStyle = StyleSheet.create({
backgroundColor: Colors.White,
paddingLeft: 16,
paddingRight: 16
}
},
});
export default channelPageStyle;

3
app/src/styles/colors.js
View file

@ -1,9 +1,12 @@
const Colors = {
PageBackground: '#efeff4',
Black: '#000000',
ChannelGrey: '#9b9b9b',
DarkGrey: '#555555',
DescriptionGrey: '#999999',
LbryGreen: '#2f9176',
BrightGreen: '#61fcd8',
BrighterLbryGreen: '#40b887',
LightGrey: '#cccccc',
LighterGrey: '#e5e5e5',

47
app/src/styles/discover.js
View file

@ -11,10 +11,14 @@ export const horizontalMargin = 48; // left and right margins (24 + 24)
export const verticalMargin = (screenWidthPixels > 720 && screenHeightPixels > 1920) ? 0 : ((screenWidthPixels <= 720) ? 20 : 16);
export const mediaWidth = screenWidth - horizontalMargin;
export const mediaHeight = ((screenWidth / screenHeight) * ((screenWidthPixels <= 720) ? screenWidth : mediaWidth)) - verticalMargin;
export const fileItemWidth = screenWidth * 3/5;
export const fileItemMediaWidth = fileItemWidth;
export const fileItemMediaHeight = fileItemWidth * 9/16;
const discoverStyle = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.PageBackground
},
scrollContainer: {
flex: 1,
@ -40,40 +44,44 @@ const discoverStyle = StyleSheet.create({
},
categoryName: {
fontFamily: 'Inter-UI-SemiBold',
fontSize: 20,
fontSize: 18,
marginLeft: 24,
marginTop: 16,
marginBottom: 16,
marginTop: 12,
marginBottom: 6,
color: Colors.Black
},
fileItem: {
marginLeft: 24,
marginRight: 24,
marginBottom: 48
width: fileItemWidth,
marginRight: 12
},
fileItemMedia: {
width: mediaWidth,
height: mediaHeight,
width: fileItemMediaWidth,
height: fileItemMediaHeight,
alignItems: 'center',
justifyContent: 'center'
},
fileItemName: {
fontFamily: 'Inter-UI-Bold',
fontFamily: 'Inter-UI-SemiBold',
marginTop: 8,
fontSize: 18
fontSize: 14
},
channelName: {
fontFamily: 'Inter-UI-SemiBold',
fontSize: 16,
fontSize: 12,
marginTop: 4,
color: Colors.LbryGreen
},
downloadedIcon: {
position: 'absolute',
right: 8,
top: 8
},
filePriceContainer: {
backgroundColor: '#61fcd8',
backgroundColor: Colors.BrightGreen,
justifyContent: 'center',
position: 'absolute',
right: 16,
top: 16,
right: 8,
top: 8,
width: 56,
height: 24,
borderRadius: 4
@ -144,8 +152,17 @@ const discoverStyle = StyleSheet.create({
},
dateTimeText: {
fontFamily: 'Inter-UI-Regular',
fontSize: 14,
fontSize: 12,
color: Colors.DescriptionGrey
},
scrollPadding: {
paddingBottom: 24
},
horizontalScrollContainer: {
marginBottom: 12
},
horizontalScrollPadding: {
paddingLeft: 20
}
});

4
app/src/styles/downloads.js
View file

@ -1,8 +1,10 @@
import { StyleSheet } from 'react-native';
import Colors from './colors';
const downloadsStyle = StyleSheet.create({
container: {
flex: 1
flex: 1,
backgroundColor: Colors.PageBackground
},
busyContainer: {
flex: 1,

17
app/src/styles/fileList.js
View file

@ -1,4 +1,5 @@
import { Dimensions, PixelRatio, StyleSheet } from 'react-native';
import { mediaWidth, mediaHeight } from './discover';
import Colors from './colors';
const screenDimension = Dimensions.get('window');
@ -81,6 +82,22 @@ const fileListStyle = StyleSheet.create({
backgroundColor: Colors.LbryGreen,
opacity: 0.2
},
downloadedIcon: {
position: 'absolute',
top: 8,
left: 8
},
fileItem: {
marginLeft: 24,
marginRight: 24,
marginBottom: 48
},
fileItemMedia: {
width: mediaWidth,
height: mediaHeight,
alignItems: 'center',
justifyContent: 'center'
},
});
export default fileListStyle;

8
app/src/styles/filePage.js
View file

@ -10,9 +10,11 @@ const filePageStyle = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: Colors.PageBackground
},
pageContainer: {
flex: 1
flex: 1,
backgroundColor: Colors.PageBackground
},
divider: {
backgroundColor: Colors.LighterGrey,
@ -73,11 +75,13 @@ const filePageStyle = StyleSheet.create({
marginBottom: 16,
},
subscriptionRow: {
flex: 0.5,
flexDirection: 'row',
justifyContent: 'flex-end',
marginTop: 8
},
publishInfo: {
width: '50%',
flex: 0.5,
marginTop: 6,
},
channelName: {

3
app/src/styles/reward.js
View file

@ -3,7 +3,8 @@ import Colors from './colors';
const rewardStyle = StyleSheet.create({
container: {
flex: 1
flex: 1,
backgroundColor: Colors.PageBackground
},
row: {
flexDirection: 'row',

1
app/src/styles/search.js
View file

@ -4,6 +4,7 @@ import Colors from 'styles/colors';
const searchStyle = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.PageBackground
},
scrollContainer: {
flex: 1,

4
app/src/styles/settings.js
View file

@ -1,6 +1,10 @@
import { StyleSheet } from 'react-native';
import Colors from './colors';
const settingsStyle = StyleSheet.create({
container: {
backgroundColor: Colors.PageBackground
},
title: {
fontSize: 20,
fontWeight: 'bold',

1
app/src/styles/subscriptions.js
View file

@ -10,6 +10,7 @@ import Colors from 'styles/colors';
const subscriptionsStyle = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.PageBackground
},
subContainer: {
flex: 1,

3
app/src/styles/wallet.js
View file

@ -2,6 +2,9 @@ import { StyleSheet } from 'react-native';
import Colors from './colors';
const walletStyle = StyleSheet.create({
container: {
backgroundColor: Colors.PageBackground
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',

BIN
src/main/assets/fonts/Feather.ttf Executable file → Normal file
View file

Binary file not shown.

BIN
src/main/assets/fonts/FontAwesome5_Brands.ttf
View file

Binary file not shown.

BIN
src/main/assets/fonts/FontAwesome5_Regular.ttf
View file

Binary file not shown.

BIN
src/main/assets/fonts/FontAwesome5_Solid.ttf
View file

Binary file not shown.