diff --git a/ui/component/livestreamComments/index.js b/ui/component/livestreamComments/index.js index a90e75abe..a723f63a7 100644 --- a/ui/component/livestreamComments/index.js +++ b/ui/component/livestreamComments/index.js @@ -7,6 +7,7 @@ import { selectIsFetchingComments, makeSelectSuperChatsForUri, makeSelectSuperChatTotalAmountForUri, + selectSettingsByChannelId, } from 'redux/selectors/comments'; import LivestreamComments from './view'; @@ -17,6 +18,7 @@ const select = (state, props) => ({ superChats: makeSelectSuperChatsForUri(props.uri)(state), superChatsTotalAmount: makeSelectSuperChatTotalAmountForUri(props.uri)(state), myChannels: selectMyChannelClaims(state), + settingsByChannelId: selectSettingsByChannelId(state), }); export default connect(select, { diff --git a/ui/component/livestreamComments/view.jsx b/ui/component/livestreamComments/view.jsx index f4b073fef..2f6678dde 100644 --- a/ui/component/livestreamComments/view.jsx +++ b/ui/component/livestreamComments/view.jsx @@ -9,6 +9,7 @@ import UriIndicator from 'component/uriIndicator'; import CreditAmount from 'component/common/credit-amount'; import ChannelThumbnail from 'component/channelThumbnail'; import Tooltip from 'component/common/tooltip'; +import { getChannelIdFromClaim } from 'util/claim'; type Props = { uri: string, @@ -24,6 +25,7 @@ type Props = { superChats: Array, superChatsTotalAmount: number, myChannels: ?Array, + settingsByChannelId: { [channelId: string]: PerChannelSettings }, }; const VIEW_MODE_CHAT = 'view_chat'; @@ -45,15 +47,22 @@ export default function LivestreamComments(props: Props) { superChats, superChatsTotalAmount, myChannels, + settingsByChannelId, } = props; + const channelId = getChannelIdFromClaim(claim); + const channelSettings = channelId ? settingsByChannelId[channelId] : undefined; + const minSuper = (channelSettings && channelSettings.min_tip_amount_super_chat) || 0; + + const superChatFiltered = superChats ? superChats.filter((x) => x.support_amount >= minSuper) : []; + const commentsRef = React.createRef(); const [scrollBottom, setScrollBottom] = React.useState(true); const [viewMode, setViewMode] = React.useState(VIEW_MODE_CHAT); const [performedInitialScroll, setPerformedInitialScroll] = React.useState(false); const claimId = claim && claim.claim_id; const commentsLength = comments && comments.length; - const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? comments : superChats; + const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? comments : superChatFiltered; const discussionElement = document.querySelector('.livestream__comments'); const commentElement = document.querySelector('.livestream-comment'); @@ -161,10 +170,10 @@ export default function LivestreamComments(props: Props) { )}
- {viewMode === VIEW_MODE_CHAT && superChatsTotalAmount > 0 && superChats && ( + {viewMode === VIEW_MODE_CHAT && superChatsTotalAmount > 0 && superChatFiltered && (
- {superChats.map((superChat: Comment) => ( + {superChatFiltered.map((superChat: Comment) => (
@@ -196,7 +205,7 @@ export default function LivestreamComments(props: Props) { authorUri={comment.channel_url} commentId={comment.comment_id} message={comment.comment} - supportAmount={comment.support_amount} + supportAmount={comment.support_amount >= minSuper ? comment.support_amount : 0} isFiat={comment.is_fiat} commentIsMine={comment.channel_id && isMyComment(comment.channel_id)} />