feat: sub counts on own channels

- [ ] move to the bottom right of channel uri?

src/ui/page/channel/index.js

@@ -9,7 +9,7 @@ import {
   makeSelectClaimForUri,
   selectChannelIsBlocked,
 } from 'lbry-redux';
-import { selectBlackListedOutpoints } from 'lbryinc';
+import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
 import { doOpenModal } from 'redux/actions/app';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
@@ -26,10 +26,12 @@ const select = (state, props) => ({
   channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
   blackListedOutpoints: selectBlackListedOutpoints(state),
   supportOption: makeSelectClientSetting(settings.SUPPORT_OPTION)(state),
+  subCount: makeSelectSubCountForUri(props.uri)(state),
 });
 
 const perform = dispatch => ({
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  fetchSubCount: claimId => dispatch(doFetchSubCount(claimId)),
 });
 
 export default connect(

src/ui/page/channel/view.jsx

@@ -44,6 +44,8 @@ type Props = {
   }>,
   openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
   supportOption: boolean,
+  fetchSubCount: string => void,
+  subCount: number,
 };
 
 function ChannelPage(props: Props) {
@@ -62,6 +64,8 @@ function ChannelPage(props: Props) {
     blackListedOutpoints,
     openModal,
     supportOption,
+    fetchSubCount,
+    subCount,
   } = props;
 
   const { channelName } = parseURI(uri);
@@ -122,6 +126,10 @@ function ChannelPage(props: Props) {
     );
   }
 
+  if (channelIsMine) {
+    fetchSubCount(claim.claim_id);
+  }
+
   React.useEffect(() => {
     setSearchResults(null);
     setSearchQuery('');
@@ -182,6 +190,11 @@ function ChannelPage(props: Props) {
             <h2 className="channel__url">
               <ClaimUri uri={uri} />
             </h2>
+            {channelIsMine && (
+              <span>
+                {subCount} {subCount !== 1 ? __('Subscribers') : __('Subscriber')}
+              </span>
+            )}
           </div>
         </header>
         <Tabs onChange={onTabChange} index={tabIndex}>