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;
}