((props: Props, ref: any) => {
{(pending || !!reflectingProgress) && }
+ {channelSubscribers}
{type !== 'small' && (
diff --git a/ui/component/fileTitleSection/index.js b/ui/component/fileTitleSection/index.js
index a6a79fd5f..7af998148 100644
--- a/ui/component/fileTitleSection/index.js
+++ b/ui/component/fileTitleSection/index.js
@@ -1,4 +1,5 @@
import { connect } from 'react-redux';
+import { doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
import { makeSelectTitleForUri, makeSelectClaimForUri } from 'lbry-redux';
import { makeSelectInsufficientCreditsForUri } from 'redux/selectors/content';
import { makeSelectViewersForId } from 'redux/selectors/livestream';
@@ -7,11 +8,21 @@ import FileTitleSection from './view';
const select = (state, props) => {
const claim = makeSelectClaimForUri(props.uri)(state);
const viewers = claim && makeSelectViewersForId(claim.claim_id)(state);
+ const channelClaimId = claim && claim.signing_channel ? claim.signing_channel.claim_id : undefined;
+ const channelUri = claim && claim.signing_channel ? claim.signing_channel.canonical_url : undefined;
+ const subCount = channelUri && makeSelectSubCountForUri(channelUri)(state);
+
return {
viewers,
isInsufficientCredits: makeSelectInsufficientCreditsForUri(props.uri)(state),
title: makeSelectTitleForUri(props.uri)(state),
+ channelClaimId,
+ subCount,
};
};
-export default connect(select)(FileTitleSection);
+const perform = (dispatch) => ({
+ fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
+});
+
+export default connect(select, perform)(FileTitleSection);
diff --git a/ui/component/fileTitleSection/view.jsx b/ui/component/fileTitleSection/view.jsx
index eb4fa2e7a..3b641a133 100644
--- a/ui/component/fileTitleSection/view.jsx
+++ b/ui/component/fileTitleSection/view.jsx
@@ -23,12 +23,32 @@ type Props = {
livestream?: boolean,
isLive?: boolean,
viewers?: number,
+ subCount: number,
+ channelClaimId?: string,
+ fetchSubCount: (string) => void,
};
function FileTitleSection(props: Props) {
- const { title, uri, nsfw, isNsfwBlocked, livestream = false, isLive = false, viewers } = props;
+ const {
+ title,
+ uri,
+ nsfw,
+ isNsfwBlocked,
+ livestream = false,
+ isLive = false,
+ viewers,
+ subCount,
+ channelClaimId,
+ fetchSubCount,
+ } = props;
const [hasAcknowledgedSec, setHasAcknowledgedSec] = usePersistedState('sec-nag', false);
+ React.useEffect(() => {
+ if (channelClaimId) {
+ fetchSubCount(channelClaimId);
+ }
+ }, [channelClaimId, fetchSubCount]);
+
return (
<>
{!hasAcknowledgedSec && (
@@ -108,7 +128,7 @@ function FileTitleSection(props: Props) {
) : (
-
+
)
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index a7215f379..dc963bd6b 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -276,6 +276,11 @@
color: var(--color-text);
}
+.claim-preview__channel-sub-count {
+ color: var(--color-text-subtitle);
+ font-size: var(--font-small);
+}
+
.claim-preview__custom-properties {
text-align: right;
display: flex;