initial Explore page redesign

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}
@@ -80,8 +80,8 @@ class FileItem extends React.PureComponent {
 
           {!compactView && <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/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 {
@@ -150,6 +150,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,
@@ -167,20 +171,16 @@ class DiscoverPage extends React.PureComponent {
         {(!!hasContent) &&
           (<SectionList style={discoverStyle.scrollContainer}
             renderItem={ ({item, index, section}) => (
-                <FileItem
+              <CategoryList
-                  style={discoverStyle.fileItem}
+                key={item}
-                  mediaStyle={discoverStyle.fileItemMedia}
+                category={item}
-                  key={item}
+                categoryMap={featuredUris}
-                  uri={normalizeURI(item)}
+                navigation={navigation} />
-                  navigation={navigation}
+            )}
-                  compactView={false}
-                  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/styles/discover.js

@@ -11,6 +11,9 @@ 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: {
@@ -40,31 +43,30 @@ const discoverStyle = StyleSheet.create({
   },
   categoryName: {
     fontFamily: 'Inter-UI-SemiBold',
-    fontSize: 20,
+    fontSize: 18,
     marginLeft: 24,
-    marginTop: 16,
+    marginTop: 12,
-    marginBottom: 16,
+    marginBottom: 12,
     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
   },
@@ -144,8 +146,14 @@ const discoverStyle = StyleSheet.create({
   },
   dateTimeText: {
     fontFamily: 'Inter-UI-Regular',
-    fontSize: 14,
+    fontSize: 12,
     color: Colors.DescriptionGrey
+  },
+  horizontalScrollContainer: {
+    marginBottom: 12
+  },
+  horizontalScrollPadding: {
+    paddingLeft: 20
   }
 });