From 6e34282cdc3719e2de0e487b169e3ada6af38381 Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Fri, 15 Apr 2022 19:02:51 +0800 Subject: [PATCH] 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 | 3 ++- ui/component/claimPreview/view.jsx | 14 +++++++++++++- ui/component/claimPreviewTile/index.js | 3 ++- ui/component/claimPreviewTile/view.jsx | 16 ++++++++++++++-- 4 files changed, 31 insertions(+), 5 deletions(-) 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 (