src/component/modalSuggestedSubscriptions/index.js

@@ -1,4 +1,9 @@
 import { connect } from 'react-redux';
+import { selectFetchingClaimSearch } from 'lbry-redux';
 import ModalSuggestedSubscriptions from './view';
 
-export default connect()(ModalSuggestedSubscriptions);
+const select = state => ({
+  loadingSuggested: selectFetchingClaimSearch(state),
+});
+
+export default connect(select)(ModalSuggestedSubscriptions);

src/component/modalSuggestedSubscriptions/view.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { ActivityIndicator, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import modalStyle from 'styles/modal';
 import subscriptionsStyle from 'styles/subscriptions';
 import Button from 'component/button';
@@ -10,14 +10,17 @@ import Icon from 'react-native-vector-icons/FontAwesome5';
 
 export default class ModalSuggestedSubcriptions extends React.PureComponent {
   render() {
-    const { navigation, onDonePress, onOverlayPress } = this.props;
+    const { loadingSuggested, navigation, onDonePress, onOverlayPress } = this.props;
 
     return (
       <TouchableOpacity style={modalStyle.overlay} activeOpacity={1} onPress={onOverlayPress}>
         <TouchableOpacity style={[modalStyle.container, subscriptionsStyle.modalContainer]} activeOpacity={1}>
           <SuggestedSubscriptionsGrid inModal navigation={navigation} />
-          <View style={modalStyle.buttons}>
-            <Button style={modalStyle.doneButton} text={__('Done')} onPress={onDonePress} />
+          <View style={modalStyle.wideButtons}>
+            <Button style={modalStyle.wideDoneButton} text={__('Done')} onPress={onDonePress} />
+            {loadingSuggested && (
+              <ActivityIndicator size="small" color={Colors.White} style={subscriptionsStyle.modalLoading} />
+            )}
           </View>
         </TouchableOpacity>
       </TouchableOpacity>

src/component/subscribeButtonOverlay/view.js

@@ -22,20 +22,12 @@ class SubscribeButtonOverlay extends React.PureComponent {
 
   render() {
     const { uri, isSubscribed, style } = this.props;
-
-    let styles = [];
-    if (style) {
-      if (style.length) {
-        styles = styles.concat(style);
-      } else {
-        styles.push(style);
-      }
-    }
+    let styles = style.length ? style : [style];
 
     return (
-      <TouchableOpacity style={styles} opacity={0.8} onPress={this.handlePress}>
-        {isSubscribed && <Icon name={'heart-broken'} size={20} color={Colors.DarkGrey} />}
-        {!isSubscribed && <Icon name={'heart'} size={20} solid color={Colors.Red} />}
+      <TouchableOpacity style={styles} opacity={0.7} onPress={this.handlePress}>
+        {isSubscribed && <Icon name={'heart'} size={20} solid color={Colors.Red} />}
+        {!isSubscribed && <Icon name={'heart'} size={20} color={Colors.Red} />}
       </TouchableOpacity>
     );
   }

src/component/suggestedSubscriptionItem/view.js

@@ -63,7 +63,7 @@ class SuggestedSubscriptionItem extends React.PureComponent {
         </View>
 
         <View style={subscriptionsStyle.suggestedItemDetails}>
-          <Text style={subscriptionsStyle.suggestedItemTitle} numberOfLines={1}>
+          <Text style={subscriptionsStyle.suggestedItemTitle} numberOfLines={2}>
             {title || claim.name}
           </Text>
           {tags && (

src/component/suggestedSubscriptionsGrid/index.js

@@ -6,12 +6,13 @@ import {
   selectClaimSearchByQueryLastPageReached,
   selectFollowedTags,
 } from 'lbry-redux';
-import { selectSuggestedChannels, selectIsFetchingSuggested } from 'lbryinc';
+import { selectSubscriptions, selectSuggestedChannels, selectIsFetchingSuggested } from 'lbryinc';
 import { selectShowNsfw } from 'redux/selectors/settings';
 import SuggestedSubscriptionsGrid from './view';
 
 const select = state => ({
   followedTags: selectFollowedTags(state),
+  subscriptions: selectSubscriptions(state),
   suggested: selectSuggestedChannels(state),
   loading: selectIsFetchingSuggested(state) || selectFetchingClaimSearch(state),
   claimSearchByQuery: selectClaimSearchByQuery(state),

src/component/suggestedSubscriptionsGrid/view.js

@@ -21,7 +21,7 @@ class SuggestedSubscriptionsGrid extends React.PureComponent {
   };
 
   buildClaimSearchOptions() {
-    const { showNsfwContent } = this.props;
+    const { showNsfwContent, subscriptions } = this.props;
     const { currentPage } = this.state;
 
     const options = {
@@ -34,6 +34,9 @@ class SuggestedSubscriptionsGrid extends React.PureComponent {
     if (!showNsfwContent) {
       options.not_tags = MATURE_TAGS;
     }
+    /* if (subscriptions && subscriptions.length > 0) {
+      options.not_channel_ids = subscriptions.map(subscription => subscription.uri.split('#')[1]);
+    } */
 
     return options;
   }

src/page/subscriptions/view.js

@@ -207,7 +207,7 @@ class SubscriptionsPage extends React.PureComponent {
 
             <Link
               style={subscriptionsStyle.suggestedLink}
-              text={__('Suggested')}
+              text={__('Discover')}
               onPress={() => this.setState({ showModalSuggestedSubs: true })}
             />
           </View>
@@ -239,7 +239,7 @@ class SubscriptionsPage extends React.PureComponent {
           <View style={subscriptionsStyle.suggestedSubsContainer}>
             <View style={subscriptionsStyle.infoArea}>
               <Text style={subscriptionsStyle.infoText}>
-                {__('LBRY works better if you find and follow at least 5 creators you like.')}
+                {__('LBRY works better if you follow at least 5 creators you like.')}
               </Text>
             </View>
 
@@ -269,9 +269,6 @@ class SubscriptionsPage extends React.PureComponent {
           </View>
         )}
 
-        {false && !showSortPicker && !showTimePicker && !showModalSuggestedSubs && (
-          <FloatingWalletBalance navigation={navigation} />
-        )}
         {showSortPicker && (
           <ModalPicker
             title={__('Sort content by')}

src/styles/modal.js

@@ -37,12 +37,24 @@ const modalPickerStyle = StyleSheet.create({
     bottom: 8,
     position: 'absolute',
   },
+  wideButtons: {
+    marginTop: 16,
+    left: 8,
+    bottom: 8,
+    right: 8,
+    position: 'absolute',
+  },
   doneButton: {
     alignSelf: 'flex-start',
     backgroundColor: Colors.LbryGreen,
     paddingLeft: 16,
     paddingRight: 16,
   },
+  wideDoneButton: {
+    backgroundColor: Colors.LbryGreen,
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
 });
 
 export default modalPickerStyle;

src/styles/subscriptions.js

@@ -38,7 +38,7 @@ const subscriptionsStyle = StyleSheet.create({
   },
   infoText: {
     fontFamily: 'Inter-Regular',
-    fontSize: 16,
+    fontSize: 14,
     marginTop: 8,
     marginBottom: 8,
   },
@@ -194,7 +194,7 @@ const subscriptionsStyle = StyleSheet.create({
     marginBottom: 16,
     marginLeft: 16,
     marginRight: 16,
-    height: 120,
+    height: 140,
   },
   suggestedItemThumbnailContainer: {
     width: 70,
@@ -211,6 +211,7 @@ const subscriptionsStyle = StyleSheet.create({
   suggestedItemDetails: {
     marginLeft: 16,
     marginRight: 16,
+    alignItems: 'center',
   },
   suggestedItemSubscribe: {
     backgroundColor: Colors.White,
@@ -227,8 +228,10 @@ const subscriptionsStyle = StyleSheet.create({
   },
   suggestedItemTitle: {
     fontFamily: 'Inter-Regular',
-    fontSize: 16,
-    marginBottom: 4,
+    textAlign: 'center',
+    fontSize: 14,
+    marginTop: 4,
+    marginBottom: 2,
   },
   suggestedItemName: {
     fontFamily: 'Inter-SemiBold',
@@ -284,6 +287,11 @@ const subscriptionsStyle = StyleSheet.create({
     right: 24,
     bottom: 22,
   },
+  modalLoading: {
+    position: 'absolute',
+    right: 7,
+    bottom: 7,
+  },
 });
 
 export default subscriptionsStyle;