diff --git a/app/src/component/suggestedSubscriptionItem/view.js b/app/src/component/suggestedSubscriptionItem/view.js index 86a6187d..209751cc 100644 --- a/app/src/component/suggestedSubscriptionItem/view.js +++ b/app/src/component/suggestedSubscriptionItem/view.js @@ -43,7 +43,7 @@ class SuggestedSubscriptionItem extends React.PureComponent { return ( <View style={subscriptionsStyle.suggestedContainer}> <FileItem - style={subscriptionsStyle.fileItem} + style={subscriptionsStyle.compactMainFileItem} mediaStyle={subscriptionsStyle.fileItemMedia} uri={this.uriForClaim(claims[0])} navigation={navigation} /> diff --git a/app/src/page/subscriptions/view.js b/app/src/page/subscriptions/view.js index 8f2b82fd..a52f09fe 100644 --- a/app/src/page/subscriptions/view.js +++ b/app/src/page/subscriptions/view.js @@ -13,6 +13,7 @@ import { import { buildURI, parseURI } from 'lbry-redux'; import { uriFromFileInfo } from 'utils/helper'; import moment from 'moment'; +import Button from 'component/button'; import Colors from 'styles/colors'; import Constants from 'constants'; import discoverStyle from 'styles/discover'; @@ -24,6 +25,10 @@ import SuggestedSubscriptions from 'component/suggestedSubscriptions'; import UriBar from 'component/uriBar'; class SubscriptionsPage extends React.PureComponent { + state = { + showingSuggestedSubs: false + }; + componentWillMount() { const { doFetchMySubscriptions, @@ -62,14 +67,19 @@ class SubscriptionsPage extends React.PureComponent { unreadSubscriptions, navigation, } = this.props; + const numberOfSubscriptions = subscribedChannels ? subscribedChannels.length : 0; const hasSubscriptions = numberOfSubscriptions > 0; + if (!hasSubscriptions && !this.state.showingSuggestedSubs) { + this.setState({ showingSuggestedSubs: true }); + } + return ( <View style={subscriptionsStyle.container}> <UriBar navigation={navigation} /> - {hasSubscriptions && !loading && + {(!this.state.showingSuggestedSubs && hasSubscriptions && !loading) && <View style={subscriptionsStyle.viewModeRow}> <Link text={'All Subscriptions'} @@ -85,9 +95,8 @@ class SubscriptionsPage extends React.PureComponent { /> </View>} - {(hasSubscriptions && !loading) && + {(!this.state.showingSuggestedSubs && hasSubscriptions && !loading) && <View style={subscriptionsStyle.subContainer}> - <UriBar navigation={navigation} /> {(viewMode === Constants.SUBSCRIPTIONS_VIEW_ALL) && <FlatList style={subscriptionsStyle.scrollContainer} @@ -142,11 +151,25 @@ class SubscriptionsPage extends React.PureComponent { </View> } - {(!hasSubscriptions && !loading) && - <View style={subscriptionsStyle.subContainer}> + {this.state.showingSuggestedSubs && + <View style={subscriptionsStyle.suggestedSubsContainer}> + {!hasSubscriptions && <Text style={subscriptionsStyle.infoText}> You are not subscribed to any channels at the moment. Here are some channels that we think you might enjoy. - </Text> + </Text>} + + {hasSubscriptions && + <View> + <Text style={subscriptionsStyle.infoText}> + You are currently subscribed to {numberOfSubscriptions} channel{(numberOfSubscriptions > 1) ? 's' : ''}. + </Text> + <Button + style={subscriptionsStyle.button} + text={"View my subscriptions"} + onPress={() => this.setState({ showingSuggestedSubs: false })} /> + </View> + } + {loadingSuggested && <ActivityIndicator size="large" colors={Colors.LbryGreen} style={subscriptionsStyle.loading} />} {!loadingSuggested && <SuggestedSubscriptions navigation={navigation} />} </View>} diff --git a/app/src/styles/subscriptions.js b/app/src/styles/subscriptions.js index 131556b8..d848028b 100644 --- a/app/src/styles/subscriptions.js +++ b/app/src/styles/subscriptions.js @@ -13,8 +13,19 @@ const subscriptionsStyle = StyleSheet.create({ }, subContainer: { flex: 1, + }, + suggestedSubsContainer: { + flex: 1, marginTop: 60 }, + button: { + alignSelf: 'flex-start', + backgroundColor: Colors.LbryGreen, + paddingLeft: 16, + paddingRight: 16, + marginLeft: 16, + marginBottom: 16 + }, busyContainer: { flex: 1, justifyContent: 'center', @@ -52,6 +63,10 @@ const subscriptionsStyle = StyleSheet.create({ marginRight: 24, marginBottom: 24 }, + compactMainFileItem: { + marginLeft: 24, + marginRight: 24 + }, compactItems: { flex: 1, marginTop: 6, @@ -105,7 +120,7 @@ const subscriptionsStyle = StyleSheet.create({ flexDirection: 'row', marginLeft: 24, marginRight: 24, - marginTop: 24 + marginTop: 84 }, viewModeLink: { marginRight: 24,