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 .

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

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<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)}
                 />