Livestream comment delete/edit fix (#5971)

* Fix ability to delete own comments in livestream

## Issue
5832: can't remove own comments in live stream mode (if you have multiple channels?)

Looks like it was just missing `commentIsMine` for the new component.

* Disable editing livestream comments

It doesn't do anything at the moment, anyways.

* Disable deleting hyperchats

The "total tipped" will get deducted when hyperchats are deleted, which doesn't make sense (doesn't reflect actual total that the creator received).

ui/component/commentMenuList/view.jsx

@@ -23,6 +23,8 @@ type Props = {
   isTopLevel: boolean,
   commentModBlock: (string) => void,
   playingUri: ?PlayingUri,
+  disableEdit?: boolean,
+  disableRemove?: boolean,
 };
 
 function CommentMenuList(props: Props) {
@@ -43,6 +45,8 @@ function CommentMenuList(props: Props) {
     fetchComments,
     commentModBlock,
     playingUri,
+    disableEdit,
+    disableRemove,
   } = props;
   const activeChannelIsCreator = activeChannelClaim && activeChannelClaim.permanent_url === contentChannelPermanentUrl;
 
@@ -81,7 +85,8 @@ function CommentMenuList(props: Props) {
         </MenuItem>
       )}
 
-      {activeChannelClaim &&
+      {!disableRemove &&
+        activeChannelClaim &&
         (activeChannelClaim.permanent_url === authorUri ||
           activeChannelClaim.permanent_url === contentChannelPermanentUrl) && (
           <MenuItem className="comment__menu-option" onSelect={handleDeleteComment}>
@@ -92,7 +97,7 @@ function CommentMenuList(props: Props) {
           </MenuItem>
         )}
 
-      {commentIsMine && activeChannelClaim && activeChannelClaim.permanent_url === authorUri && (
+      {commentIsMine && activeChannelClaim && activeChannelClaim.permanent_url === authorUri && !disableEdit && (
         <MenuItem className="comment__menu-option menu__link" onSelect={handleEditComment}>
           <Icon aria-hidden icon={ICONS.EDIT} />
           {__('Edit')}

ui/component/livestreamComment/view.jsx

@@ -71,7 +71,14 @@ function Comment(props: Props) {
               icon={ICONS.MORE_VERTICAL}
             />
           </MenuButton>
-          <CommentMenuList uri={uri} commentId={commentId} authorUri={authorUri} commentIsMine={commentIsMine} />
+          <CommentMenuList
+            uri={uri}
+            commentId={commentId}
+            authorUri={authorUri}
+            commentIsMine={commentIsMine}
+            disableEdit
+            disableRemove={supportAmount > 0}
+          />
         </Menu>
       </div>
     </li>

ui/component/livestreamComments/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectClaimForUri, selectMyChannelClaims } from 'lbry-redux';
 import { doCommentSocketConnect, doCommentSocketDisconnect } from 'redux/actions/websocket';
 import { doCommentList, doSuperChatList } from 'redux/actions/comments';
 import {
@@ -16,6 +16,7 @@ const select = (state, props) => ({
   fetchingComments: selectIsFetchingComments(state),
   superChats: makeSelectSuperChatsForUri(props.uri)(state),
   superChatsTotalAmount: makeSelectSuperChatTotalAmountForUri(props.uri)(state),
+  myChannels: selectMyChannelClaims(state),
 });
 
 export default connect(select, {

ui/component/livestreamComments/view.jsx

@@ -23,6 +23,7 @@ type Props = {
   doSuperChatList: (string) => void,
   superChats: Array<Comment>,
   superChatsTotalAmount: number,
+  myChannels: ?Array<ChannelClaim>,
 };
 
 const VIEW_MODE_CHAT = 'view_chat';
@@ -41,6 +42,7 @@ export default function LivestreamComments(props: Props) {
     doSuperChatList,
     superChats,
     superChatsTotalAmount,
+    myChannels,
   } = props;
   const commentsRef = React.createRef();
   const hasScrolledComments = React.useRef();
@@ -50,6 +52,18 @@ export default function LivestreamComments(props: Props) {
   const commentsLength = comments && comments.length;
   const commentsToDisplay = viewMode === VIEW_MODE_CHAT ? comments : superChats;
 
+  // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine
+  function isMyComment(channelId: string) {
+    if (myChannels != null && channelId != null) {
+      for (let i = 0; i < myChannels.length; i++) {
+        if (myChannels[i].claim_id === channelId) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   React.useEffect(() => {
     if (claimId) {
       doCommentList(uri);
@@ -177,6 +191,7 @@ export default function LivestreamComments(props: Props) {
                   commentId={comment.comment_id}
                   message={comment.comment}
                   supportAmount={comment.support_amount}
+                  commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
                 />
               ))}
             </div>