lbry-desktop/ui/component/livestreamComment/view.jsx
infinite-persistence c32a95a885
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).
2021-05-04 11:08:36 -04:00

88 lines
2.9 KiB
JavaScript

// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import { parseURI } from 'lbry-redux';
import MarkdownPreview from 'component/common/markdown-preview';
import ChannelThumbnail from 'component/channelThumbnail';
import { Menu, MenuButton } from '@reach/menu-button';
import Icon from 'component/common/icon';
import classnames from 'classnames';
import CommentMenuList from 'component/commentMenuList';
import Button from 'component/button';
import CreditAmount from 'component/common/credit-amount';
type Props = {
uri: string,
claim: StreamClaim,
authorUri: string,
commentId: string,
message: string,
commentIsMine: boolean,
stakedLevel: number,
supportAmount: number,
};
function Comment(props: Props) {
const { claim, uri, authorUri, message, commentIsMine, commentId, stakedLevel, supportAmount } = props;
const [mouseIsHovering, setMouseHover] = React.useState(false);
const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
const { claimName } = parseURI(authorUri);
return (
<li
className={classnames('livestream-comment', {
'livestream-comment--superchat': supportAmount > 0,
})}
onMouseOver={() => setMouseHover(true)}
onMouseOut={() => setMouseHover(false)}
>
{supportAmount > 0 && (
<div className="super-chat livestream-superchat__banner">
<div className="livestream-superchat__banner-corner" />
<CreditAmount amount={supportAmount} superChat className="livestream-superchat__amount" />
</div>
)}
<div className="livestream-comment__body">
{supportAmount > 0 && <ChannelThumbnail uri={authorUri} xsmall />}
<div className="livestream-comment__info">
<Button
className={classnames('button--uri-indicator comment__author', {
'comment__author--creator': commentByOwnerOfContent,
})}
target="_blank"
navigate={authorUri}
>
{claimName}
</Button>
<div className="livestream-comment__text">
<MarkdownPreview content={message} promptLinks stakedLevel={stakedLevel} />
</div>
</div>
</div>
<div className="livestream-comment__menu">
<Menu>
<MenuButton className="menu__button">
<Icon
size={18}
className={mouseIsHovering ? 'comment__menu-icon--hovering' : 'comment__menu-icon'}
icon={ICONS.MORE_VERTICAL}
/>
</MenuButton>
<CommentMenuList
uri={uri}
commentId={commentId}
authorUri={authorUri}
commentIsMine={commentIsMine}
disableEdit
disableRemove={supportAmount > 0}
/>
</Menu>
</div>
</li>
);
}
export default Comment;