use commentron for live view counts

flow-typed/livestream.js

@@ -23,4 +23,5 @@ declare type LivestreamReplayData = Array<LivestreamReplayItem>;
 
 declare type LivestreamState = {
   fetchingById: {},
+  viewersById: {},
 }

ui/component/fileTitleSection/index.js

@@ -1,11 +1,17 @@
 import { connect } from 'react-redux';
-import { makeSelectTitleForUri } from 'lbry-redux';
+import { makeSelectTitleForUri, makeSelectClaimForUri } from 'lbry-redux';
 import { makeSelectInsufficientCreditsForUri } from 'redux/selectors/content';
+import { makeSelectViewersForId } from 'redux/selectors/livestream';
 import FileTitleSection from './view';
 
-const select = (state, props) => ({
-  isInsufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
-  title: makeSelectTitleForUri(props.uri)(state),
-});
+const select = (state, props) => {
+  const claim = makeSelectClaimForUri(props.uri)(state);
+  const viewers = claim && makeSelectViewersForId(claim.claim_id)(state);
+  return {
+    viewers,
+    isInsufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
+    title: makeSelectTitleForUri(props.uri)(state),
+  };
+};
 
 export default connect(select)(FileTitleSection);

ui/component/fileTitleSection/view.jsx

@@ -21,11 +21,11 @@ type Props = {
   isNsfwBlocked: boolean,
   livestream?: boolean,
   isLive?: boolean,
-  activeViewers?: number,
+  viewers?: number,
 };
 
 function FileTitleSection(props: Props) {
-  const { title, uri, nsfw, isNsfwBlocked, livestream = false, isLive = false, activeViewers } = props;
+  const { title, uri, nsfw, isNsfwBlocked, livestream = false, isLive = false, viewers } = props;
   const [hasAcknowledgedSec, setHasAcknowledgedSec] = usePersistedState('sec-nag', false);
 
   return (
@@ -57,7 +57,7 @@ function FileTitleSection(props: Props) {
         body={
           <React.Fragment>
             <ClaimInsufficientCredits uri={uri} />
-            <FileSubtitle uri={uri} isLive={isLive} livestream={livestream} activeViewers={activeViewers} />
+            <FileSubtitle uri={uri} isLive={isLive} livestream={livestream} activeViewers={viewers} />
           </React.Fragment>
         }
         actions={

ui/component/fileViewCount/view.jsx

@@ -6,6 +6,7 @@ import HelpLink from 'component/common/help-link';
 type Props = {
   claim: ?StreamClaim,
   fetchViewCount: (string) => void,
+  fetchingViewCount: boolean,
   uri: string,
   viewCount: string,
   livestream?: boolean,
@@ -36,14 +37,14 @@ function FileViewCount(props: Props) {
 
   return (
     <span className="media__subtitle--centered">
-      {activeViewers !== undefined
-        ? __('%viewer_count% currently %viewer_state%', {
-            viewer_count: activeViewers,
-            viewer_state: isLive ? __('watching') : __('waiting'),
-          })
-        : viewCount !== 1
-        ? __('%view_count% views', { view_count: formattedViewCount })
-        : __('1 view')}
+      {isLive &&
+        __('%viewer_count% currently %viewer_state%', {
+          viewer_count: activeViewers === undefined ? '...' : activeViewers,
+          viewer_state: isLive ? __('watching') : __('waiting'),
+        })}
+      {!isLive &&
+        activeViewers === undefined &&
+        (viewCount !== 1 ? __('%view_count% views', { view_count: formattedViewCount }) : __('1 view'))}
       {!SIMPLE_SITE && <HelpLink href="https://lbry.com/faq/views" />}
     </span>
   );

ui/component/livestreamLayout/view.jsx

@@ -9,12 +9,11 @@ type Props = {
   uri: string,
   claim: ?StreamClaim,
   isLive: boolean,
-  activeViewers: number,
   chatDisabled: boolean,
 };
 
 export default function LivestreamLayout(props: Props) {
-  const { claim, uri, isLive, activeViewers, chatDisabled } = props;
+  const { claim, uri, isLive, chatDisabled } = props;
   const isMobile = useIsMobile();
 
   if (!claim || !claim.signing_channel) {
@@ -55,7 +54,7 @@ export default function LivestreamLayout(props: Props) {
 
         {isMobile && <LivestreamComments uri={uri} />}
 
-        <FileTitleSection uri={uri} livestream isLive={isLive} activeViewers={activeViewers} />
+        <FileTitleSection uri={uri} livestream isLive={isLive} />
       </div>
     </>
   );

ui/constants/action_types.js

@@ -339,3 +339,4 @@ export const REPORT_CONTENT_FAILED = 'REPORT_CONTENT_FAILED';
 export const FETCH_NO_SOURCE_CLAIMS_STARTED = 'FETCH_NO_SOURCE_CLAIMS_STARTED';
 export const FETCH_NO_SOURCE_CLAIMS_COMPLETED = 'FETCH_NO_SOURCE_CLAIMS_COMPLETED';
 export const FETCH_NO_SOURCE_CLAIMS_FAILED = 'FETCH_NO_SOURCE_CLAIMS_FAILED';
+export const VIEWERS_RECEIVED = 'VIEWERS_RECEIVED';

ui/page/livestream/view.jsx

@@ -19,7 +19,6 @@ type Props = {
 
 export default function LivestreamPage(props: Props) {
   const { uri, claim, doSetPlayingUri, isAuthenticated, doUserSetReferrer, channelClaim, chatDisabled } = props;
-  const [activeViewers, setActiveViewers] = React.useState(0);
   const [isLive, setIsLive] = React.useState(false);
   const livestreamChannelId = channelClaim && channelClaim.signing_channel && channelClaim.signing_channel.claim_id;
   const [hasLivestreamClaim, setHasLivestreamClaim] = React.useState(false);
@@ -66,8 +65,6 @@ export default function LivestreamPage(props: Props) {
             return;
           }
 
-          setActiveViewers(res.data.viewCount);
-
           if (res.data.hasOwnProperty('live')) {
             setIsLive(res.data.live);
           }
@@ -120,7 +117,7 @@ export default function LivestreamPage(props: Props) {
       chatDisabled={chatDisabled}
       rightSide={!chatDisabled && <LivestreamComments uri={uri} />}
     >
-      <LivestreamLayout uri={uri} activeViewers={activeViewers} isLive={isLive} />
+      <LivestreamLayout uri={uri} isLive={isLive} />
     </Page>
   );
 }

ui/redux/actions/websocket.js

@@ -102,6 +102,13 @@ export const doCommentSocketConnect = (uri, claimId) => (dispatch) => {
         data: { comment: newComment, claimId, uri },
       });
     }
+    if (response.type === 'viewers') {
+      const connected = response.data.connected;
+      dispatch({
+        type: ACTIONS.VIEWERS_RECEIVED,
+        data: { connected, claimId },
+      });
+    }
   });
 };
 

ui/redux/reducers/livestream.js

@@ -4,6 +4,7 @@ import { handleActions } from 'util/redux-utils';
 
 const defaultState: LivestreamState = {
   fetchingById: {},
+  viewersById: {},
 };
 
 export default handleActions(
@@ -29,6 +30,12 @@ export default handleActions(
 
       return { ...state, fetchingById: newIdsFetching };
     },
+    [ACTIONS.VIEWERS_RECEIVED]: (state: LivestreamState, action: any) => {
+      const { connected, claimId } = action.data;
+      const newViewersById = Object.assign({}, state.viewersById);
+      newViewersById[claimId] = connected;
+      return { ...state, viewersById: newViewersById };
+    },
   },
   defaultState
 );

ui/redux/selectors/livestream.js

@@ -21,10 +21,14 @@ export const makeSelectLivestreamsForChannelId = (channelId: string) =>
   });
 
 export const selectFetchingLivestreams = createSelector(selectState, (state) => state.fetchingById);
+export const selectViewersById = createSelector(selectState, (state) => state.viewersById);
 
 export const makeSelectIsFetchingLivestreams = (channelId: string) =>
   createSelector(selectFetchingLivestreams, (fetchingLivestreams) => Boolean(fetchingLivestreams[channelId]));
 
+export const makeSelectViewersForId = (channelId: string) =>
+  createSelector(selectViewersById, (viewers) => viewers[channelId]);
+
 export const makeSelectPendingLivestreamsForChannelId = (channelId: string) =>
   createSelector(selectPendingClaims, (pendingClaims) => {
     return pendingClaims.filter(