MinSuper: handle the display of comments below MinSuper

- If minSuper is unmet:
   - Hide it from the Super Chat list at the header.
   - Display the comment as usual, but don't embellish it .
This commit is contained in:
infinite-persistence 2021-08-09 22:12:45 +08:00
parent 9520a15629
commit fd5693b448
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 15 additions and 4 deletions

View file

@ -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, {

View file

@ -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<Comment>,
superChatsTotalAmount: number,
myChannels: ?Array<ChannelClaim>,
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) {
</div>
)}
<div ref={commentsRef} className="livestream__comments-wrapper">
{viewMode === VIEW_MODE_CHAT && superChatsTotalAmount > 0 && superChats && (
{viewMode === VIEW_MODE_CHAT && superChatsTotalAmount > 0 && superChatFiltered && (
<div className="livestream-superchats__wrapper">
<div className="livestream-superchats__inner">
{superChats.map((superChat: Comment) => (
{superChatFiltered.map((superChat: Comment) => (
<Tooltip key={superChat.comment_id} label={superChat.comment}>
<div className="livestream-superchat">
<div className="livestream-superchat__thumbnail">
@ -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)}
/>