Explore page redesign (#518)

app/package.json

@@ -8,8 +8,8 @@
     "dependencies": {
         "base-64": "^0.1.0",
         "@expo/vector-icons": "^8.1.0",
-        "lbry-redux": "lbryio/lbry-redux#sync",
+        "lbry-redux": "lbryio/lbry-redux",
-        "lbryinc": "lbryio/lbryinc#sync",
+        "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",

app/src/component/categoryList/index.js

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

app/src/component/categoryList/view.js

@@ -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;

app/src/component/fileItem/view.js

@@ -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>
+            <Text numberOfLines={1} style={[discoverStyle.fileItemName, discoverStyle.rewardTitle]}>{title}</Text>
-            {isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={20} />}
+            {isRewardContent && <Icon style={discoverStyle.rewardIcon} name="award" size={14} />}
           </View>}
           {(!compactView && showDetails) &&
           <View style={discoverStyle.detailsRow}>

app/src/component/fileList/view.js

@@ -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}

app/src/component/fileListItem/view.js

@@ -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>}
 

app/src/component/subscribeButton/view.js

@@ -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}

app/src/page/discover/index.js

@@ -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))
 });

app/src/page/discover/view.js

@@ -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
+              <CategoryList
-                  style={discoverStyle.fileItem}
-                  mediaStyle={discoverStyle.fileItemMedia}
                 key={item}
-                  uri={normalizeURI(item)}
+                category={item}
-                  navigation={navigation}
+                categoryMap={featuredUris}
-                  compactView={false}
+                navigation={navigation} />
-                  showDetails={true} />
+            )}
-              )
-            }
             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}
           />)
         }

app/src/page/downloads/view.js

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

app/src/page/file/view.js

@@ -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} />

app/src/page/settings/view.js

@@ -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}>

app/src/page/subscriptions/view.js

@@ -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}

app/src/page/trending/view.js

@@ -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}
+                  style={fileListStyle.fileItem}
-                  mediaStyle={discoverStyle.fileItemMedia}
+                  mediaStyle={fileListStyle.fileItemMedia}
                   key={item}
                   uri={normalizeURI(item)}
                   navigation={navigation}

app/src/page/wallet/view.js

@@ -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}>

app/src/styles/about.js

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

app/src/styles/channelPage.js

@@ -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;

app/src/styles/colors.js

@@ -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',

app/src/styles/discover.js

@@ -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,
+    marginTop: 12,
-    marginBottom: 16,
+    marginBottom: 6,
     color: Colors.Black
   },
   fileItem: {
-    marginLeft: 24,
+    width: fileItemWidth,
-    marginRight: 24,
+    marginRight: 12
-    marginBottom: 48
   },
   fileItemMedia: {
-    width: mediaWidth,
+    width: fileItemMediaWidth,
-    height: mediaHeight,
+    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,
+    right: 8,
-    top: 16,
+    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
   }
 });
 

app/src/styles/downloads.js

@@ -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,

app/src/styles/fileList.js

@@ -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;

app/src/styles/filePage.js

@@ -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: {

app/src/styles/reward.js

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

app/src/styles/search.js

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

app/src/styles/settings.js

@@ -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',

app/src/styles/subscriptions.js

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

app/src/styles/wallet.js

@@ -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',