diff --git a/app/src/constants.js b/app/src/constants.js
index 3949e99..e2ff915 100644
--- a/app/src/constants.js
+++ b/app/src/constants.js
@@ -4,6 +4,7 @@ const Constants = {
KEY_EMAIL_VERIFY_PENDING: "emailVerifyPending",
SETTING_ALPHA_UNDERSTANDS_RISKS: "alphaUnderstandRisks",
+ SETTING_SUBSCRIPTIONS_VIEW_MODE: "subscriptionsViewMode",
ACTION_DELETE_COMPLETED_BLOBS: "DELETE_COMPLETED_BLOBS",
ACTION_FIRST_RUN_PAGE_CHANGED: "FIRST_RUN_PAGE_CHANGED",
@@ -23,7 +24,10 @@ const Constants = {
DRAWER_ROUTE_REWARDS: "Rewards",
DRAWER_ROUTE_WALLET: "Wallet",
DRAWER_ROUTE_SETTINGS: "Settings",
- DRAWER_ROUTE_ABOUT: "About"
+ DRAWER_ROUTE_ABOUT: "About",
+
+ SUBSCRIPTIONS_VIEW_ALL: 'view_all',
+ SUBSCRIPTIONS_VIEW_LATEST_FIRST: 'view_latest_first'
};
export default Constants;
diff --git a/app/src/page/subscriptions/index.js b/app/src/page/subscriptions/index.js
index 9d75052..7de3864 100644
--- a/app/src/page/subscriptions/index.js
+++ b/app/src/page/subscriptions/index.js
@@ -3,8 +3,6 @@ import {
doFetchMySubscriptions,
doSetViewMode,
doFetchRecommendedSubscriptions,
- doCompleteFirstRun,
- doShowSuggestedSubs,
selectSubscriptionClaims,
selectSubscriptions,
selectSubscriptionsBeingFetched,
@@ -15,6 +13,8 @@ import {
selectShowSuggestedSubs
} from 'lbryinc';
import { doPushDrawerStack } from 'redux/actions/drawer';
+import { doSetClientSetting } from 'redux/actions/settings';
+import { makeSelectClientSetting } from 'redux/selectors/settings';
import Constants from 'constants';
import SubscriptionsPage from './view';
@@ -23,6 +23,7 @@ const select = state => ({
selectIsFetchingSubscriptions(state) ||
Boolean(Object.keys(selectSubscriptionsBeingFetched(state)).length),
subscribedChannels: selectSubscriptions(state),
+ subscriptionsViewMode: makeSelectClientSetting(Constants.SETTING_SUBSCRIPTIONS_VIEW_MODE)(state),
allSubscriptions: selectSubscriptionClaims(state),
unreadSubscriptions: selectUnreadSubscriptions(state),
viewMode: selectViewMode(state),
@@ -33,7 +34,9 @@ const select = state => ({
const perform = dispatch => ({
doFetchMySubscriptions: () => dispatch(doFetchMySubscriptions()),
doFetchRecommendedSubscriptions: () => dispatch(doFetchRecommendedSubscriptions()),
- pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_SUBSCRIPTIONS))
+ doSetViewMode: (viewMode) => dispatch(doSetViewMode(viewMode)),
+ pushDrawerStack: () => dispatch(doPushDrawerStack(Constants.DRAWER_ROUTE_SUBSCRIPTIONS)),
+ setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
});
export default connect(select, perform)(SubscriptionsPage);
diff --git a/app/src/page/subscriptions/view.js b/app/src/page/subscriptions/view.js
index bde78c9..875e0d1 100644
--- a/app/src/page/subscriptions/view.js
+++ b/app/src/page/subscriptions/view.js
@@ -13,10 +13,12 @@ import { buildURI } from 'lbry-redux';
import { uriFromFileInfo } from 'utils/helper';
import moment from 'moment';
import Colors from 'styles/colors';
+import Constants from 'constants';
import discoverStyle from 'styles/discover';
import subscriptionsStyle from 'styles/subscriptions';
import FloatingWalletBalance from 'component/floatingWalletBalance';
import FileItem from 'component/fileItem';
+import Link from 'component/link';
import SuggestedSubscriptions from 'component/suggestedSubscriptions';
import UriBar from 'component/uriBar';
@@ -33,6 +35,17 @@ class SubscriptionsPage extends React.PureComponent {
doFetchRecommendedSubscriptions();
}
+ componentDidMount() {
+ const { doSetViewMode, subscriptionsViewMode } = this.props;
+ doSetViewMode(subscriptionsViewMode ? subscriptionsViewMode : Constants.SUBSCRIPTIONS_VIEW_ALL);
+ }
+
+ changeViewMode = (viewMode) => {
+ const { setClientSetting, doSetViewMode } = this.props;
+ setClientSetting(Constants.SETTING_SUBSCRIPTIONS_VIEW_MODE, viewMode);
+ doSetViewMode(viewMode);
+ }
+
render() {
const {
subscribedChannels,
@@ -46,7 +59,7 @@ class SubscriptionsPage extends React.PureComponent {
doShowSuggestedSubs,
showSuggestedSubs,
unreadSubscriptions,
- navigation
+ navigation,
} = this.props;
const numberOfSubscriptions = subscribedChannels ? subscribedChannels.length : 0;
const hasSubscriptions = numberOfSubscriptions > 0;
@@ -55,6 +68,24 @@ class SubscriptionsPage extends React.PureComponent {
<View style={subscriptionsStyle.container}>
{hasSubscriptions && !loading &&
+ <View style={subscriptionsStyle.viewModeRow}>
+ <Link
+ text={'All Subscriptions'}
+ style={[subscriptionsStyle.viewModeLink,
+ ((viewMode === Constants.SUBSCRIPTIONS_VIEW_ALL) ? subscriptionsStyle.activeMode : subscriptionsStyle.inactiveMode)]}
+ onPress={() => this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_ALL)}
+ />
+ <Link
+ text={'Latest First'}
+ style={[subscriptionsStyle.viewModeLink,
+ ((viewMode === Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST) ? subscriptionsStyle.activeMode : subscriptionsStyle.inactiveMode)]}
+ onPress={() => this.changeViewMode(Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST)}
+ />
+ </View>}
+
+ {(hasSubscriptions && !loading) &&
+ <View style={subscriptionsStyle.container}>
+ {(viewMode === Constants.SUBSCRIPTIONS_VIEW_ALL) &&
<FlatList
style={subscriptionsStyle.scrollContainer}
contentContainerStyle={subscriptionsStyle.scrollPadding}
@@ -64,7 +95,9 @@ class SubscriptionsPage extends React.PureComponent {
mediaStyle={discoverStyle.fileItemMedia}
key={item}
uri={uriFromFileInfo(item)}
- navigation={navigation} />
+ navigation={navigation}
+ compactView={false}
+ showDetails={true} />
)
}
data={allSubscriptions.sort((a, b) => {
@@ -72,13 +105,41 @@ class SubscriptionsPage extends React.PureComponent {
})}
keyExtractor={(item, index) => uriFromFileInfo(item)} />}
- {hasSubscriptions && loading &&
+ {(viewMode === Constants.SUBSCRIPTIONS_VIEW_LATEST_FIRST) &&
+ <View style={subscriptionsStyle.container}>
+ {unreadSubscriptions.length ?
+ (<ScrollView
+ style={subscriptionsStyle.scrollContainer}
+ contentContainerStyle={subscriptionsStyle.scrollPadding}>
+ {unreadSubscriptions.map(({ channel, uris }) => {
+ const { claimName } = parseURI(channel);
+ return uris.map(uri => (
+ <FileItem
+ style={subscriptionsStyle.fileItem}
+ mediaStyle={discoverStyle.fileItemMedia}
+ key={uri}
+ uri={uri}
+ navigation={navigation}
+ compactView={false}
+ showDetails={true} />));
+ })}
+ </ScrollView>) :
+ (<View style={subscriptionsStyle.contentContainer}>
+ <Text style={subscriptionsStyle.contentText}>All caught up! You might like the channels below.</Text>
+ <SuggestedSubscriptions navigation={navigation} />
+ </View>)
+ }
+ </View>}
+
+ </View>}
+
+ {(hasSubscriptions && loading) &&
<View style={subscriptionsStyle.busyContainer}>
<ActivityIndicator size="large" color={Colors.LbryGreen} style={subscriptionsStyle.loading} />
</View>
}
- {!hasSubscriptions &&
+ {(!hasSubscriptions && !loading) &&
<View style={subscriptionsStyle.container}>
<Text style={subscriptionsStyle.infoText}>
You are not subscribed to any channels at the moment. Here are some channels that we think you might enjoy.
diff --git a/app/src/styles/subscriptions.js b/app/src/styles/subscriptions.js
index cadd3af..cb7174a 100644
--- a/app/src/styles/subscriptions.js
+++ b/app/src/styles/subscriptions.js
@@ -33,9 +33,21 @@ const subscriptionsStyle = StyleSheet.create({
suggestedContainer: {
flex: 1,
},
+ contentContainer: {
+ flex: 1,
+ marginTop: 16
+ },
+ contentText: {
+ fontFamily: 'Inter-UI-Regular',
+ fontSize: 16,
+ marginLeft: 24,
+ marginRight: 24,
+ marginBottom: 8
+ },
fileItem: {
marginLeft: 24,
marginRight: 24,
+ marginBottom: 24
},
compactItems: {
flex: 1,
@@ -85,6 +97,23 @@ const subscriptionsStyle = StyleSheet.create({
backgroundColor: Colors.White,
paddingLeft: 16,
paddingRight: 16,
+ },
+ viewModeRow: {
+ flexDirection: 'row',
+ marginLeft: 24,
+ marginRight: 24,
+ marginTop: 24
+ },
+ viewModeLink: {
+ marginRight: 24,
+ fontSize: 18,
+ color: Colors.LbryGreen
+ },
+ inactiveMode: {
+ fontFamily: 'Inter-UI-Regular'
+ },
+ activeMode: {
+ fontFamily: 'Inter-UI-SemiBold'
}
});