Livestream tile/list: show viewer count if data is available

As of this commit, only the Channel Page is fetching the data through the new API, which has the viewer count correctly populated.

For both "0" and "undefined", continue to show as "LIVE".

ui/component/claimPreview/index.js

@@ -15,7 +15,7 @@ import { makeSelectCollectionIsMine } from 'redux/selectors/collections';
 import { doResolveUri } from 'redux/actions/claims';
 import { doFileGet } from 'redux/actions/file';
 import { selectBanStateForUri } from 'lbryinc';
-import { selectIsActiveLivestreamForUri } from 'redux/selectors/livestream';
+import { selectIsActiveLivestreamForUri, selectViewersForId } from 'redux/selectors/livestream';
 import { selectLanguage, selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
 import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
@@ -48,6 +48,7 @@ const select = (state, props) => {
     wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
     isLivestream,
     isLivestreamActive: isLivestream && selectIsActiveLivestreamForUri(state, props.uri),
+    livestreamViewerCount: isLivestream && claim ? selectViewersForId(state, claim.claim_id) : undefined,
     isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
     lang: selectLanguage(state),
   };

ui/component/claimPreview/view.jsx

@@ -12,6 +12,7 @@ import { formatLbryUrlForWeb } from 'util/url';
 import { formatClaimPreviewTitle } from 'util/formatAriaLabel';
 import { toCompactNotation } from 'util/string';
 import ClaimPreviewProgress from 'component/claimPreviewProgress';
+import Icon from 'component/common/icon';
 import Tooltip from 'component/common/tooltip';
 import FileThumbnail from 'component/fileThumbnail';
 import UriIndicator from 'component/uriIndicator';
@@ -34,6 +35,7 @@ import ClaimPreviewHidden from './claim-preview-no-mature';
 import ClaimPreviewNoContent from './claim-preview-no-content';
 import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
 import CollectionEditButtons from 'component/collectionEditButtons';
+import * as ICONS from 'constants/icons';
 import { useIsMobile } from 'effects/use-screensize';
 
 const AbandonedChannelPreview = lazyImport(() =>
@@ -80,6 +82,7 @@ type Props = {
   hideMenu?: boolean,
   isLivestream?: boolean,
   isLivestreamActive: boolean,
+  livestreamViewerCount: ?number,
   collectionId?: string,
   isCollectionMine: boolean,
   disableNavigation?: boolean, // DEPRECATED - use 'nonClickable'. Remove this when channel-finder is consolidated (#810)
@@ -146,6 +149,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     // repostUrl,
     isLivestream,
     isLivestreamActive,
+    livestreamViewerCount,
     collectionId,
     isCollectionMine,
     disableNavigation,
@@ -333,8 +337,16 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
 
   let liveProperty = null;
   if (isLivestreamActive === true) {
+    if (livestreamViewerCount) {
+      liveProperty = (claim) => (
+        <span className="livestream__viewer-count">
+          {livestreamViewerCount} <Icon icon={ICONS.EYE} />
+        </span>
+      );
+    } else {
       liveProperty = (claim) => <>LIVE</>;
     }
+  }
 
   return (
     <WrapperElement

ui/component/claimPreviewTile/index.js

@@ -8,7 +8,7 @@ import {
 import { doFileGet } from 'redux/actions/file';
 import { doResolveUri } from 'redux/actions/claims';
 import { selectViewCountForUri, selectBanStateForUri } from 'lbryinc';
-import { selectIsActiveLivestreamForUri } from 'redux/selectors/livestream';
+import { selectIsActiveLivestreamForUri, selectViewersForId } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { isClaimNsfw, isStreamPlaceholderClaim, getThumbnailFromClaim } from 'util/claim';
 import ClaimPreviewTile from './view';
@@ -32,6 +32,7 @@ const select = (state, props) => {
     isMature: claim ? isClaimNsfw(claim) : false,
     isLivestream,
     isLivestreamActive: isLivestream && selectIsActiveLivestreamForUri(state, props.uri),
+    livestreamViewerCount: isLivestream && claim ? selectViewersForId(state, claim.claim_id) : undefined,
     viewCount: selectViewCountForUri(state, props.uri),
   };
 };

ui/component/claimPreviewTile/view.jsx

@@ -5,6 +5,7 @@ import { NavLink, withRouter } from 'react-router-dom';
 import ClaimPreviewProgress from 'component/claimPreviewProgress';
 import FileThumbnail from 'component/fileThumbnail';
 import UriIndicator from 'component/uriIndicator';
+import Icon from 'component/common/icon';
 import TruncatedText from 'component/common/truncated-text';
 import DateTime from 'component/dateTime';
 import LivestreamDateTime from 'component/livestreamDateTime';
@@ -22,6 +23,7 @@ import FileWatchLaterLink from 'component/fileWatchLaterLink';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import ClaimMenuList from 'component/claimMenuList';
 import CollectionPreviewOverlay from 'component/collectionPreviewOverlay';
+import * as ICONS from 'constants/icons';
 import { FYP_ID } from 'constants/urlParams';
 // $FlowFixMe cannot resolve ...
 import PlaceholderTx from 'static/img/placeholderTx.gif';
@@ -50,6 +52,7 @@ type Props = {
   isLivestream: boolean,
   viewCount: string,
   isLivestreamActive: boolean,
+  livestreamViewerCount: ?number,
   swipeLayout: boolean,
 };
 
@@ -75,6 +78,7 @@ function ClaimPreviewTile(props: Props) {
     showNoSourceClaims,
     isLivestream,
     isLivestreamActive,
+    livestreamViewerCount,
     collectionId,
     fypId,
     mediaDuration,
@@ -187,9 +191,17 @@ function ClaimPreviewTile(props: Props) {
   }
 
   let liveProperty = null;
-  if (isLivestream === true) {
+  if (isLivestream) {
+    if (isLivestreamActive === true && livestreamViewerCount) {
+      liveProperty = (claim) => (
+        <span className="livestream__viewer-count">
+          {livestreamViewerCount} <Icon icon={ICONS.EYE} />
+        </span>
+      );
+    } else {
       liveProperty = (claim) => <>LIVE</>;
     }
+  }
 
   return (
     <li