src/index.js

@@ -27,6 +27,7 @@ import {
   homepageReducer,
   rewardsReducer,
   selectUserVerifiedEmail,
+  statsReducer,
   subscriptionsReducer,
   syncReducer,
   userReducer,
@@ -140,6 +141,7 @@ const reducers = persistCombineReducers(persistOptions, {
   rewards: rewardsReducer,
   settings: settingsReducer,
   search: searchReducer,
+  stats: statsReducer,
   subscriptions: subscriptionsReducer,
   sync: syncReducer,
   tags: tagsReducer,

src/page/channel/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import { doAbandonClaim, doFetchChannelListMine, makeSelectClaimForUri, selectMyChannelClaims } from 'lbry-redux';
+import { doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
 import { doPopDrawerStack } from 'redux/actions/drawer';
 import { doSetSortByItem, doSetTimeItem } from 'redux/actions/settings';
 import { selectDrawerStack } from 'redux/selectors/drawer';
@@ -11,12 +12,14 @@ const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
   drawerStack: selectDrawerStack(state),
   sortByItem: selectSortByItem(state),
+  subCount: makeSelectSubCountForUri(props.uri)(state),
   timeItem: selectTimeItem(state),
 });
 
 const perform = dispatch => ({
   abandonClaim: (txid, nout) => dispatch(doAbandonClaim(txid, nout)),
   fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
+  fetchSubCount: claimId => dispatch(doFetchSubCount(claimId)),
   popDrawerStack: () => dispatch(doPopDrawerStack()),
   setSortByItem: item => dispatch(doSetSortByItem(item)),
   setTimeItem: item => dispatch(doSetTimeItem(item)),

src/page/channel/view.js

@@ -51,9 +51,12 @@ class ChannelPage extends React.PureComponent {
   }
 
   componentDidMount() {
-    const { fetchChannelListMine } = this.props;
+    const { claim, fetchChannelListMine, fetchSubCount } = this.props;
     NativeModules.Firebase.setCurrentScreen('Channel');
     fetchChannelListMine();
+    if (claim) {
+      fetchSubCount(claim.claim_id);
+    }
   }
 
   handleSortByItemSelected = item => {
@@ -213,7 +216,7 @@ class ChannelPage extends React.PureComponent {
   };
 
   render() {
-    const { channels, claim, navigation, uri, drawerStack, popDrawerStack, timeItem } = this.props;
+    const { channels, claim, navigation, uri, drawerStack, popDrawerStack, subCount, timeItem } = this.props;
     const { name, permanent_url: permanentUrl } = claim;
     const { autoStyle, currentSortByItem, showSortPicker, showTimePicker, showTipView } = this.state;
     const ownedChannel = channels ? channels.map(channel => channel.permanent_url).includes(permanentUrl) : false;
@@ -258,6 +261,10 @@ class ChannelPage extends React.PureComponent {
 
             <View style={channelPageStyle.channelHeader}>
               <Text style={channelPageStyle.channelName}>{title && title.trim().length > 0 ? title : name}</Text>
+              <Text style={channelPageStyle.followerCount}>
+                {subCount === 1 && __('%follower% follower', { follower: subCount })}
+                {subCount > 1 && __('%follower% followers', { follower: subCount })}
+              </Text>
             </View>
 
             <View style={[channelPageStyle.avatarImageContainer, autoStyle]}>

src/page/file/index.js

@@ -33,7 +33,9 @@ import {
 import {
   doClaimEligiblePurchaseRewards,
   doFetchCostInfoForUri,
+  doFetchViewCount,
   makeSelectCostInfoForUri,
+  makeSelectViewCountForUri,
   selectRewardContentClaimIds,
   selectBlackListedOutpoints,
 } from 'lbryinc';
@@ -76,6 +78,7 @@ const select = (state, props) => {
     title: makeSelectTitleForUri(contentUri)(state),
     recommendedContent: makeSelectRecommendedContentForUri(contentUri)(state),
     isSearchingRecommendContent: selectIsSearching(state),
+    viewCount: makeSelectViewCountForUri(contentUri)(state),
   };
 };
 
@@ -89,6 +92,7 @@ const perform = dispatch => ({
   fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)),
   fetchMyClaims: () => dispatch(doFetchClaimListMine()),
   fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
+  fetchViewCount: claimId => dispatch(doFetchViewCount(claimId)),
   fileGet: (uri, saveFile) => dispatch(doFileGet(uri, saveFile)),
   notify: data => dispatch(doToast(data)),
   popDrawerStack: () => dispatch(doPopDrawerStack()),

src/page/file/view.js

@@ -68,6 +68,7 @@ class FilePage extends React.PureComponent {
       creditsInputFocused: false,
       downloadButtonShown: false,
       downloadPressed: false,
+      didSearchRecommended: false,
       fileViewLogged: false,
       fullscreenMode: false,
       fileGetStarted: false,
@@ -87,7 +88,7 @@ class FilePage extends React.PureComponent {
       uriVars: null,
       stopDownloadConfirmed: false,
       streamingMode: false,
-      didSearchRecommended: false,
+      viewCountFetched: false,
     };
   }
 
@@ -114,6 +115,7 @@ class FilePage extends React.PureComponent {
 
     this.fetchFileInfo(this.props);
     this.fetchCostInfo(this.props);
+
     fetchMyClaims();
 
     if (NativeModules.Firebase) {
@@ -144,6 +146,7 @@ class FilePage extends React.PureComponent {
       claim,
       currentRoute,
       failedPurchaseUris: prevFailedPurchaseUris,
+      fetchViewCount,
       purchasedUris: prevPurchasedUris,
       navigation,
       contentType,
@@ -209,6 +212,10 @@ class FilePage extends React.PureComponent {
         showWebView: false,
       });
     }
+
+    if (claim && !this.state.viewCountFetched) {
+      this.setState({ viewCountFetched: true }, () => fetchViewCount(claim.claim_id));
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -692,6 +699,7 @@ class FilePage extends React.PureComponent {
       recommendedContent,
       thumbnail,
       title,
+      viewCount,
     } = this.props;
     const { uri, autoplay } = navigation.state.params;
 
@@ -978,14 +986,20 @@ class FilePage extends React.PureComponent {
                   style={filePageStyle.titleTouch}
                   onPress={() => this.setState({ showDescription: !this.state.showDescription })}
                 >
-                  <View style={filePageStyle.titleRow}>
+                  <View style={filePageStyle.titleArea}>
-                    <Text style={filePageStyle.title} selectable>
+                    <View style={filePageStyle.titleRow}>
-                      {title}
+                      <Text style={filePageStyle.title} selectable>
-                    </Text>
+                        {title}
-                    {isRewardContent && <Icon name="award" style={filePageStyle.rewardIcon} size={16} />}
+                      </Text>
-                    <View style={filePageStyle.descriptionToggle}>
+                      {isRewardContent && <Icon name="award" style={filePageStyle.rewardIcon} size={16} />}
-                      <Icon name={this.state.showDescription ? 'caret-up' : 'caret-down'} size={24} />
+                      <View style={filePageStyle.descriptionToggle}>
+                        <Icon name={this.state.showDescription ? 'caret-up' : 'caret-down'} size={24} />
+                      </View>
                     </View>
+                    <Text style={filePageStyle.viewCount}>
+                      {viewCount === 1 && __('%view% view', { view: viewCount })}
+                      {viewCount > 1 && __('%view% views', { view: viewCount })}
+                    </Text>
                   </View>
                 </TouchableWithoutFeedback>
 

src/styles/channelPage.js

@@ -145,7 +145,7 @@ const channelPageStyle = StyleSheet.create({
     position: 'absolute',
     overflow: 'hidden',
     left: 24,
-    bottom: -40,
+    bottom: -24,
     zIndex: 100,
     alignItems: 'center',
     justifyContent: 'center',
@@ -179,6 +179,12 @@ const channelPageStyle = StyleSheet.create({
   tipButton: {
     marginRight: 8,
   },
+  followerCount: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 12,
+    color: Colors.White,
+    marginTop: 2,
+  },
 });
 
 export default channelPageStyle;

src/styles/filePage.js

@@ -446,6 +446,13 @@ const filePageStyle = StyleSheet.create({
   relatedLoading: {
     marginTop: 16,
   },
+  viewCount: {
+    fontFamily: 'Inter-UI-Regular',
+    fontSize: 12,
+    color: Colors.DescriptionGrey,
+    marginLeft: 12,
+    marginRight: 12,
+  },
   balance: {
     alignItems: 'center',
     flexDirection: 'row',