diff --git a/ui/component/claimPreviewSubtitle/index.js b/ui/component/claimPreviewSubtitle/index.js index c0166d2b8..2c4874422 100644 --- a/ui/component/claimPreviewSubtitle/index.js +++ b/ui/component/claimPreviewSubtitle/index.js @@ -9,11 +9,13 @@ import { } from 'lbry-redux'; import { push } from 'connected-react-router'; import ClaimPreviewSubtitle from './view'; +import { doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), pending: makeSelectClaimIsPending(props.uri)(state), isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state), + subCount: makeSelectSubCountForUri(props.uri)(state), }); const perform = (dispatch) => ({ @@ -22,6 +24,7 @@ const perform = (dispatch) => ({ dispatch(doPrepareEdit({ name })); dispatch(push(`/$/${PAGES.UPLOAD}`)); }, + fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)), }); export default connect(select, perform)(ClaimPreviewSubtitle); diff --git a/ui/component/claimPreviewSubtitle/view.jsx b/ui/component/claimPreviewSubtitle/view.jsx index f26e08498..6759c1628 100644 --- a/ui/component/claimPreviewSubtitle/view.jsx +++ b/ui/component/claimPreviewSubtitle/view.jsx @@ -14,13 +14,21 @@ type Props = { type: string, beginPublish: (string) => void, isLivestream: boolean, + fetchSubCount: (string) => void, + subCount: number, }; // previews used in channel overview and homepage (and other places?) function ClaimPreviewSubtitle(props: Props) { - const { pending, uri, claim, type, beginPublish, isLivestream } = props; + const { pending, uri, claim, type, beginPublish, isLivestream, fetchSubCount, subCount } = props; const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; + const claimId = (claim && claim.claim_id) || '0'; + const formattedSubCount = Number(subCount).toLocaleString(); + React.useEffect(() => { + fetchSubCount(claimId); + }, [uri, fetchSubCount, claimId]); + let isChannel; let name; try { @@ -34,9 +42,14 @@ function ClaimPreviewSubtitle(props: Props) { {' '} {!pending && claim && ( <> - {isChannel && - type !== 'inline' && - `${claimsInChannel} ${claimsInChannel === 1 ? __('upload') : __('uploads')}`} + {isChannel && type !== 'inline' && ( + <> + + {formattedSubCount} {subCount !== 1 ? __('Followers') : __('Follower')} +  • {claimsInChannel} {claimsInChannel === 1 ? __('upload') : __('uploads')} + + + )} {!isChannel && (isLivestream && ENABLE_NO_SOURCE_CLAIMS ? ( diff --git a/ui/component/fileViewCountInline/view.jsx b/ui/component/fileViewCountInline/view.jsx index 640cababf..4a735b07a 100644 --- a/ui/component/fileViewCountInline/view.jsx +++ b/ui/component/fileViewCountInline/view.jsx @@ -30,6 +30,9 @@ export default function FileViewCountInline(props: Props) { // clean up (only one place edit/remove). const isChannelPage = window.location.pathname.startsWith('/@'); + // Checks if search page and gives a bullet between claim name and ago. + const isSearchPage = window.location.pathname.startsWith('/$/search'); + // dont show if no view count, if it's a repost, a livestream or isn't a channel page if (!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage) { // (1) Currently, makeSelectViewCountForUri doesn't differentiate between @@ -37,7 +40,12 @@ export default function FileViewCountInline(props: Props) { // ideal to highlight that a view has 0 count, let's just not show anything. // (2) No idea how to get the repost source's claim ID from the repost claim, // so hiding it for now. - return null; + if (isSearchPage) { + return <> •  ; + } + else { + return null; + } } return ( diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index 8aed6c484..fed7570bf 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -297,6 +297,13 @@ flex: 1; } +.claim-preview-metadata-sub-upload { + position: relative; + //margin-left: 4px; + display: flex; + text-align: left; +} + .claim-preview-info { align-items: flex-start; }