diff --git a/ui/component/claimPreview/index.js b/ui/component/claimPreview/index.js index eab1ffda4..65fb1a3d0 100644 --- a/ui/component/claimPreview/index.js +++ b/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), }; diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index eae023c63..c8760d9bd 100644 --- a/ui/component/claimPreview/view.jsx +++ b/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((props: Props, ref: any) => { // repostUrl, isLivestream, isLivestreamActive, + livestreamViewerCount, collectionId, isCollectionMine, disableNavigation, @@ -333,7 +337,15 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { let liveProperty = null; if (isLivestreamActive === true) { - liveProperty = (claim) => <>LIVE; + if (livestreamViewerCount) { + liveProperty = (claim) => ( + + {livestreamViewerCount} + + ); + } else { + liveProperty = (claim) => <>LIVE; + } } return ( diff --git a/ui/component/claimPreviewTile/index.js b/ui/component/claimPreviewTile/index.js index f4e0b0bda..4e4f0a6b0 100644 --- a/ui/component/claimPreviewTile/index.js +++ b/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), }; }; diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index f998b065d..e8ca7fffe 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/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,8 +191,16 @@ function ClaimPreviewTile(props: Props) { } let liveProperty = null; - if (isLivestream === true) { - liveProperty = (claim) => <>LIVE; + if (isLivestream) { + if (isLivestreamActive === true && livestreamViewerCount) { + liveProperty = (claim) => ( + + {livestreamViewerCount} + + ); + } else { + liveProperty = (claim) => <>LIVE; + } } return (