Comment badge to reflect mod and admin status.

## Issue
6467 Add status indicators for messages from creator, delegated moderator, global moderator

## Changes
- Added the required icons.
- Added tooltip.

## Notes
- Left out "creator" since we are already highlighting the creator's name.
- Note that currently the status is only available via websocket deltas. `comment.List` does not provide the data.
- When `comment.List` includes the info, regular comments will automatically include these badges.

flow-typed/Comment.js

@@ -14,6 +14,9 @@ declare type Comment = {
   is_pinned: boolean,
   support_amount: number,
   replies: number, // number of direct replies (i.e. excluding nested replies).
+  is_moderator: boolean,
+  is_creator: boolean,
+  is_global_mod: boolean,
   is_fiat?: boolean,
 };
 

static/app-strings.json

@@ -1729,6 +1729,7 @@
   "Are you sure you want to view this content? Viewing will not unmute @%channel%": "Are you sure you want to view this content? Viewing will not unmute @%channel%",
   "View Content": "View Content",
   "Global": "Global",
+  "Global Admin": "Global Admin",
   "Moderator": "Moderator",
   "Global Unblock Channel": "Global Unblock Channel",
   "Global Block Channel": "Global Block Channel",

ui/component/comment/view.jsx

@@ -10,6 +10,7 @@ import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import Expandable from 'component/expandable';
 import MarkdownPreview from 'component/common/markdown-preview';
+import Tooltip from 'component/common/tooltip';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { Menu, MenuButton } from '@reach/menu-button';
 import Icon from 'component/common/icon';
@@ -59,7 +60,9 @@ type Props = {
   stakedLevel: number,
   supportAmount: number,
   numDirectReplies: number,
-  isFiat: boolean
+  isModerator: boolean,
+  isGlobalMod: boolean,
+  isFiat: boolean,
 };
 
 const LENGTH_TO_COLLAPSE = 300;
@@ -92,6 +95,8 @@ function Comment(props: Props) {
     stakedLevel,
     supportAmount,
     numDirectReplies,
+    isModerator,
+    isGlobalMod,
     isFiat,
   } = props;
 
@@ -225,6 +230,22 @@ function Comment(props: Props) {
         <div className="comment__body-container">
           <div className="comment__meta">
             <div className="comment__meta-information">
+              {isGlobalMod && (
+                <Tooltip label={__('Admin')}>
+                  <span className="comment__badge comment__badge--global-mod">
+                    <Icon icon={ICONS.BADGE_MOD} size={20} />
+                  </span>
+                </Tooltip>
+              )}
+
+              {isModerator && (
+                <Tooltip label={__('Moderator')}>
+                  <span className="comment__badge comment__badge--mod">
+                    <Icon icon={ICONS.BADGE_MOD} size={20} />
+                  </span>
+                </Tooltip>
+              )}
+
               {!author ? (
                 <span className="comment__author">{__('Anonymous')}</span>
               ) : (

ui/component/commentsList/view.jsx

@@ -316,6 +316,8 @@ function CommentList(props: Props) {
                     isPinned={comment.is_pinned}
                     supportAmount={comment.support_amount}
                     numDirectReplies={comment.replies}
+                    isModerator={comment.is_moderator}
+                    isGlobalMod={comment.is_global_mod}
                     isFiat={comment.is_fiat}
                   />
                 );

ui/component/commentsReplies/view.jsx

@@ -97,6 +97,8 @@ function CommentsReplies(props: Props) {
                         commentingEnabled={commentingEnabled}
                         supportAmount={comment.support_amount}
                         numDirectReplies={comment.replies}
+                        isModerator={comment.is_moderator}
+                        isGlobalMod={comment.is_global_mod}
                       />
                     );
                   })}

ui/component/common/icon-custom.jsx

@@ -2331,4 +2331,37 @@ export const icons = {
       <path d="M4.954 14.753l3.535 3.535-1.768 1.768-3.535-3.535z" />
     </g>
   ),
+  [ICONS.BADGE_MOD]: (props: IconProps) => (
+    <svg
+      {...props}
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlSpace="preserve"
+    >
+      <style type="text/css">{'.st0{fill:FF3850}.st1{fill:#181021}.st2{fill:#FFFFFF}'}</style>
+      <g>
+        <g>
+          <path
+            className="st0"
+            d="M11.69,6.77c4.86,0,7.55,0.9,8.52,1.31c1.29-1.46,3.28-4.14,3.28-6.76c0,0-4.17,4.86-6.92,5.12 c-1.25-0.87-2.77-1.38-4.41-1.38c0,0-3.21-0.06-4.63,1.31C4.81,6.44,0.51,1.32,0.51,1.32c0,2.61,1.97,5.27,3.25,6.74 C4.71,7.59,7.03,6.77,11.69,6.77z M19.87,19.38c0.02-0.13,0.04-0.27,0.04-0.4V12.8c0-1.03-0.21-2.02-0.58-2.92 c-0.83-0.33-3.25-1.11-7.64-1.11c-4.29,0-6.33,0.75-7,1.06c-0.38,0.91-0.6,1.91-0.6,2.97v6.18c0,0.13,0.02,0.26,0.04,0.39 C1.6,19.73,0,22.54,0,22.54L12,24l12-1.46C24,22.54,22.36,19.79,19.87,19.38z"
+          />
+        </g>
+      </g>
+      <path
+        className="st1"
+        d="M13,18.57H11c-2.27,0-4.12-0.82-4.12-2.88v-2.46c0-2.77,2.17-3.94,5.11-3.94s5.11,1.17,5.11,3.94v2.46 C17.11,17.75,15.27,18.57,13,18.57z"
+      />
+      <path
+        className="st2"
+        d="M15.06,15.25c-0.28,0-0.5-0.22-0.5-0.5v-1.42c0-0.32,0-1.31-1.63-1.31c-0.28,0-0.5-0.22-0.5-0.5 s0.22-0.5,0.5-0.5c1.65,0,2.63,0.86,2.63,2.31v1.42C15.56,15.02,15.33,15.25,15.06,15.25z"
+      />
+    </svg>
+  ),
 };

ui/component/livestreamComment/view.jsx

@@ -3,6 +3,7 @@ import * as ICONS from 'constants/icons';
 import React from 'react';
 import { parseURI } from 'lbry-redux';
 import MarkdownPreview from 'component/common/markdown-preview';
+import Tooltip from 'component/common/tooltip';
 import ChannelThumbnail from 'component/channelThumbnail';
 import { Menu, MenuButton } from '@reach/menu-button';
 import Icon from 'component/common/icon';
@@ -20,6 +21,8 @@ type Props = {
   commentIsMine: boolean,
   stakedLevel: number,
   supportAmount: number,
+  isModerator: boolean,
+  isGlobalMod: boolean,
   isFiat: boolean,
   isPinned: boolean,
 };
@@ -34,6 +37,8 @@ function LivestreamComment(props: Props) {
     commentId,
     stakedLevel,
     supportAmount,
+    isModerator,
+    isGlobalMod,
     isFiat,
     isPinned,
   } = props;
@@ -59,6 +64,22 @@ function LivestreamComment(props: Props) {
       <div className="livestream-comment__body">
         {supportAmount > 0 && <ChannelThumbnail uri={authorUri} xsmall />}
         <div className="livestream-comment__info">
+          {isGlobalMod && (
+            <Tooltip label={__('Admin')}>
+              <span className="comment__badge comment__badge--global-mod">
+                <Icon icon={ICONS.BADGE_MOD} size={16} />
+              </span>
+            </Tooltip>
+          )}
+
+          {isModerator && (
+            <Tooltip label={__('Moderator')}>
+              <span className="comment__badge comment__badge--mod">
+                <Icon icon={ICONS.BADGE_MOD} size={16} />
+              </span>
+            </Tooltip>
+          )}
+
           <Button
             className={classnames('button--uri-indicator comment__author', {
               'comment__author--creator': commentByOwnerOfContent,

ui/component/livestreamComments/view.jsx

@@ -252,6 +252,8 @@ export default function LivestreamComments(props: Props) {
                 commentId={pinnedComment.comment_id}
                 message={pinnedComment.comment}
                 supportAmount={pinnedComment.support_amount}
+                isModerator={pinnedComment.is_moderator}
+                isGlobalMod={pinnedComment.is_global_mod}
                 isFiat={pinnedComment.is_fiat}
                 isPinned={pinnedComment.is_pinned}
                 commentIsMine={pinnedComment.channel_id && isMyComment(pinnedComment.channel_id)}
@@ -271,6 +273,8 @@ export default function LivestreamComments(props: Props) {
                     commentId={comment.comment_id}
                     message={comment.comment}
                     supportAmount={comment.support_amount}
+                    isModerator={comment.is_moderator}
+                    isGlobalMod={comment.is_global_mod}
                     isFiat={comment.is_fiat}
                     commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                   />
@@ -286,6 +290,8 @@ export default function LivestreamComments(props: Props) {
                     commentId={comment.comment_id}
                     message={comment.comment}
                     supportAmount={comment.support_amount}
+                    isModerator={comment.is_moderator}
+                    isGlobalMod={comment.is_global_mod}
                     isFiat={comment.is_fiat}
                     commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                   />

ui/constants/icons.js

@@ -165,3 +165,4 @@ export const GLOBE = 'globe';
 export const RSS = 'rss';
 export const STAR = 'star';
 export const MUSIC = 'MusicCategory';
+export const BADGE_MOD = 'BadgeMod';

ui/scss/component/_comments.scss

@@ -224,6 +224,28 @@ $thumbnailWidthSmall: 1rem;
   }
 }
 
+.comment__badge {
+  padding-right: var(--spacing-xxs);
+
+  .icon {
+    margin-bottom: -3px;
+  }
+}
+
+.comment__badge--global-mod {
+  .st0 {
+    // @see: ICONS.BADGE_MOD
+    fill: #fe7500;
+  }
+}
+
+.comment__badge--mod {
+  .st0 {
+    // @see: ICONS.BADGE_MOD
+    fill: #ff3850;
+  }
+}
+
 .comment__message {
   word-break: break-word;
   max-width: 35rem;