lbry-desktop/ui/component/livestreamComment/view.jsx

132 lines
3.9 KiB
React
Raw Normal View History

2021-04-23 21:59:48 +02:00
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
2021-04-29 21:30:45 +02:00
import { parseURI } from 'lbry-redux';
2021-04-23 21:59:48 +02:00
import MarkdownPreview from 'component/common/markdown-preview';
import Tooltip from 'component/common/tooltip';
2021-04-23 21:59:48 +02:00
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';
2021-04-29 21:30:45 +02:00
import Button from 'component/button';
2021-04-23 21:59:48 +02:00
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,
isModerator: boolean,
isGlobalMod: boolean,
isFiat: boolean,
2021-08-09 08:26:03 +02:00
isPinned: boolean,
2021-04-23 21:59:48 +02:00
};
function LivestreamComment(props: Props) {
2021-08-09 08:26:03 +02:00
const {
claim,
uri,
authorUri,
message,
commentIsMine,
commentId,
stakedLevel,
supportAmount,
isModerator,
isGlobalMod,
2021-08-09 08:26:03 +02:00
isFiat,
isPinned,
} = props;
2021-04-23 21:59:48 +02:00
const [mouseIsHovering, setMouseHover] = React.useState(false);
const commentByOwnerOfContent = claim && claim.signing_channel && claim.signing_channel.permanent_url === authorUri;
2021-04-29 21:30:45 +02:00
const { claimName } = parseURI(authorUri);
2021-04-23 21:59:48 +02:00
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 isFiat={isFiat} amount={supportAmount} superChat className="livestream-superchat__amount" />
2021-04-23 21:59:48 +02:00
</div>
)}
<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>
)}
2021-04-29 21:30:45 +02:00
<Button
className={classnames('button--uri-indicator comment__author', {
2021-04-23 21:59:48 +02:00
'comment__author--creator': commentByOwnerOfContent,
})}
2021-04-29 21:30:45 +02:00
target="_blank"
navigate={authorUri}
>
{claimName}
</Button>
2021-04-23 21:59:48 +02:00
2021-08-09 08:26:03 +02:00
{isPinned && (
<span className="comment__pin">
<Icon icon={ICONS.PIN} size={14} />
{__('Pinned')}
</span>
)}
2021-04-23 21:59:48 +02:00
<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
2021-08-09 08:26:03 +02:00
isTopLevel
isPinned={isPinned}
disableRemove={supportAmount > 0}
/>
2021-04-23 21:59:48 +02:00
</Menu>
</div>
</li>
);
}
export default LivestreamComment;