package.json

@@ -60,7 +60,7 @@
     "keytar": "^4.3.0",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#f140db38dd73cead9e87549340fa9434da62ba8a",
-    "lbryinc": "lbryio/lbryinc#636f014f421827ab6b74caf334c364a362a1a099",
+    "lbryinc": "lbryio/lbryinc#351d0a08806b0f770b50066b61a806171f6424d4",
     "localforage": "^1.7.1",
     "mammoth": "^1.4.6",
     "mime": "^2.3.1",

src/ui/page/file/index.js

@@ -14,7 +14,12 @@ import {
   makeSelectMetadataForUri,
   makeSelectChannelForClaimUri,
 } from 'lbry-redux';
-import { makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
+import {
+  makeSelectCostInfoForUri,
+  doFetchCostInfoForUri,
+  doFetchViewCount,
+  makeSelectViewCountForUri,
+} from 'lbryinc';
 import { selectShowNsfw, makeSelectClientSetting } from 'redux/selectors/settings';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import { doPrepareEdit } from 'redux/actions/publish';
@@ -34,6 +39,7 @@ const select = (state, props) => ({
   autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
   isSubscribed: makeSelectIsSubscribed(props.uri)(state),
   channelUri: makeSelectChannelForClaimUri(props.uri, true)(state),
+  viewCount: makeSelectViewCountForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({
@@ -45,6 +51,7 @@ const perform = dispatch => ({
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
   setViewed: uri => dispatch(doSetContentHistoryItem(uri)),
   markSubscriptionRead: (channel, uri) => dispatch(doRemoveUnreadSubscription(channel, uri)),
+  fetchViewCount: claimId => dispatch(doFetchViewCount(claimId)),
 });
 
 export default connect(

src/ui/page/file/view.jsx

@@ -37,10 +37,12 @@ type Props = {
   isSubscribed: ?string,
   isSubscribed: boolean,
   channelUri: string,
+  viewCount: number,
   prepareEdit: ({}, string) => void,
   navigate: (string, ?{}) => void,
   openModal: (id: string, { uri: string }) => void,
   markSubscriptionRead: (string, string) => void,
+  fetchViewCount: string => void,
 };
 
 class FilePage extends React.Component<Props> {
@@ -58,11 +60,25 @@ class FilePage extends React.Component<Props> {
   ];
 
   componentDidMount() {
-    const { uri, fetchFileInfo, fetchCostInfo, setViewed, isSubscribed } = this.props;
+    const {
+      uri,
+      fetchFileInfo,
+      fetchCostInfo,
+      setViewed,
+      isSubscribed,
+      claimIsMine,
+      fetchViewCount,
+      claim,
+    } = this.props;
 
     if (isSubscribed) {
       this.removeFromSubscriptionNotifications();
     }
+
+    if (claimIsMine) {
+      fetchViewCount(claim.claim_id);
+    }
+
     // always refresh file info when entering file page
     fetchFileInfo(uri);
 
@@ -83,9 +99,15 @@ class FilePage extends React.Component<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    if (!prevProps.isSubscribed && this.props.isSubscribed) {
+    const { isSubscribed, claim, uri, fetchViewCount } = this.props;
+
+    if (!prevProps.isSubscribed && isSubscribed) {
       this.removeFromSubscriptionNotifications();
     }
+
+    if (prevProps.uri !== uri) {
+      fetchViewCount(claim.claim_id);
+    }
   }
 
   removeFromSubscriptionNotifications() {
@@ -110,6 +132,7 @@ class FilePage extends React.Component<Props> {
       costInfo,
       fileInfo,
       channelUri,
+      viewCount,
     } = this.props;
 
     // File info
@@ -182,11 +205,17 @@ class FilePage extends React.Component<Props> {
             <FilePrice badge uri={normalizeURI(uri)} />
           </div>
 
-          <div className="media__subtext media__subtext--large">
-            <div className="media__subtitle__channel">
-              <UriIndicator uri={uri} link />
+          <div className="media__actions media__actions--between">
+            <div className="media__subtext media__subtext--large">
+              <div className="media__subtitle__channel">
+                <UriIndicator uri={uri} link />
+              </div>
+              {__('Published on')} <DateTime block={height} show={DateTime.SHOW_DATE} />
+            </div>
+
+            <div className="media__subtext--large">
+              {viewCount} {viewCount !== 1 ? __('Views') : __('View')}
             </div>
-            {__('Published on')} <DateTime block={height} show={DateTime.SHOW_DATE} />
           </div>
 
           <div className="media__actions media__actions--between">

src/ui/store.js

@@ -14,6 +14,7 @@ import {
   costInfoReducer,
   blacklistReducer,
   homepageReducer,
+  statsReducer,
 } from 'lbryinc';
 import navigationReducer from 'redux/reducers/navigation';
 import settingsReducer from 'redux/reducers/settings';
@@ -74,6 +75,7 @@ const reducers = combineReducers({
   notifications: notificationsReducer,
   blacklist: blacklistReducer,
   homepage: homepageReducer,
+  stats: statsReducer,
 });
 
 const bulkThunk = createBulkThunkMiddleware();

yarn.lock

@@ -5980,9 +5980,9 @@ lbry-redux@lbryio/lbry-redux#f140db38dd73cead9e87549340fa9434da62ba8a:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#636f014f421827ab6b74caf334c364a362a1a099:
+lbryinc@lbryio/lbryinc#0f74a896e1b42b86e3143d79398ab27217901b01:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/636f014f421827ab6b74caf334c364a362a1a099"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/0f74a896e1b42b86e3143d79398ab27217901b01"
   dependencies:
     bluebird "^3.5.1"
     reselect "^3.0.0"