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

230 lines
7.7 KiB
React
Raw Normal View History

// @flow
import * as ICONS from 'constants/icons';
2021-07-19 23:22:39 +02:00
import * as MODALS from 'constants/modal_types';
import React from 'react';
import { MenuList, MenuItem } from '@reach/menu-button';
import ChannelThumbnail from 'component/channelThumbnail';
import Icon from 'component/common/icon';
import { parseURI } from 'lbry-redux';
type Props = {
2021-06-16 04:27:58 +02:00
claim: ?Claim,
clearPlayingUri: () => void,
authorUri: string, // full LBRY Channel URI: lbry://@channel#123...
commentId: string, // sha256 digest identifying the comment
commentIsMine: boolean, // if this comment was signed by an owned channel
isPinned: boolean,
pinComment: (string, string, boolean) => Promise<any>,
2021-06-11 22:49:18 +02:00
muteChannel: (string) => void,
handleEditComment: () => void,
contentChannelPermanentUrl: any,
activeChannelClaim: ?ChannelClaim,
isTopLevel: boolean,
commentModBlock: (string) => void,
2021-06-16 04:27:58 +02:00
commentModBlockAsAdmin: (string, string) => void,
commentModBlockAsModerator: (string, string, string) => void,
commentModAddDelegate: (string, string, ChannelClaim) => void,
2021-03-08 19:19:25 +01:00
playingUri: ?PlayingUri,
disableEdit?: boolean,
disableRemove?: boolean,
2021-06-16 04:27:58 +02:00
moderationDelegatorsById: { [string]: { global: boolean, delegators: { name: string, claimId: string } } },
2021-07-19 23:22:39 +02:00
openModal: (id: string, {}) => void,
supportAmount?: any,
};
function CommentMenuList(props: Props) {
const {
2021-06-16 04:27:58 +02:00
claim,
authorUri,
commentIsMine,
commentId,
2021-06-11 22:49:18 +02:00
muteChannel,
pinComment,
clearPlayingUri,
activeChannelClaim,
contentChannelPermanentUrl,
isTopLevel,
isPinned,
handleEditComment,
commentModBlock,
2021-06-16 04:27:58 +02:00
commentModBlockAsAdmin,
commentModBlockAsModerator,
commentModAddDelegate,
playingUri,
disableEdit,
disableRemove,
2021-06-16 04:27:58 +02:00
moderationDelegatorsById,
2021-07-19 23:22:39 +02:00
openModal,
supportAmount,
} = props;
2021-06-16 04:27:58 +02:00
const contentChannelClaim = !claim
? null
: claim.value_type === 'channel'
? claim
: claim.signing_channel && claim.is_channel_signature_valid
? claim.signing_channel
: null;
const activeModeratorInfo = activeChannelClaim && moderationDelegatorsById[activeChannelClaim.claim_id];
const activeChannelIsCreator = activeChannelClaim && activeChannelClaim.permanent_url === contentChannelPermanentUrl;
2021-06-16 04:27:58 +02:00
const activeChannelIsAdmin = activeChannelClaim && activeModeratorInfo && activeModeratorInfo.global;
const activeChannelIsModerator =
activeChannelClaim &&
contentChannelClaim &&
activeModeratorInfo &&
Object.values(activeModeratorInfo.delegators).includes(contentChannelClaim.claim_id);
function handlePinComment(commentId, claimId, remove) {
pinComment(commentId, claimId, remove);
}
function handleDeleteComment() {
if (playingUri && playingUri.source === 'comment') {
clearPlayingUri();
}
2021-07-19 23:22:39 +02:00
openModal(MODALS.CONFIRM_REMOVE_COMMENT, { commentId, commentIsMine, contentChannelPermanentUrl, supportAmount });
}
function handleCommentBlock() {
2021-04-19 21:02:23 +02:00
commentModBlock(authorUri);
}
function handleCommentMute() {
2021-06-11 22:49:18 +02:00
muteChannel(authorUri);
}
function assignAsModerator() {
if (activeChannelClaim && authorUri) {
const { channelName, channelClaimId } = parseURI(authorUri);
commentModAddDelegate(channelClaimId, channelName, activeChannelClaim);
}
}
2021-06-16 04:27:58 +02:00
function blockCommentAsModerator() {
if (activeChannelClaim && contentChannelClaim) {
commentModBlockAsModerator(authorUri, contentChannelClaim.claim_id, activeChannelClaim.claim_id);
}
}
function blockCommentAsAdmin() {
if (activeChannelClaim) {
commentModBlockAsAdmin(authorUri, activeChannelClaim.claim_id);
}
}
return (
<MenuList className="menu__list">
{activeChannelIsCreator && <div className="comment__menu-title">{__('Creator tools')}</div>}
{activeChannelIsCreator && isTopLevel && (
<MenuItem
className="comment__menu-option menu__link"
onSelect={() => handlePinComment(commentId, claim ? claim.claim_id : '', isPinned)}
>
<span className={'button__content'}>
<Icon aria-hidden icon={ICONS.PIN} className={'icon'} />
{isPinned ? __('Unpin') : __('Pin')}
</span>
</MenuItem>
)}
{activeChannelIsCreator && (
<MenuItem className="comment__menu-option" onSelect={assignAsModerator}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.ADD} />
{__('Add as moderator')}
</div>
<span className="comment__menu-help">
{__('Assign this user to moderate %channel%', {
channel: activeChannelClaim ? activeChannelClaim.name : __('your channel'),
})}
</span>
</MenuItem>
)}
{!disableRemove &&
activeChannelClaim &&
(activeChannelClaim.permanent_url === authorUri ||
activeChannelClaim.permanent_url === contentChannelPermanentUrl) && (
<MenuItem className="comment__menu-option" onSelect={handleDeleteComment}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.DELETE} />
{__('Remove')}
</div>
</MenuItem>
)}
{commentIsMine && activeChannelClaim && activeChannelClaim.permanent_url === authorUri && !disableEdit && (
<MenuItem className="comment__menu-option menu__link" onSelect={handleEditComment}>
<Icon aria-hidden icon={ICONS.EDIT} />
{__('Edit')}
</MenuItem>
)}
{!commentIsMine && (
<MenuItem className="comment__menu-option" onSelect={handleCommentBlock}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.BLOCK} />
{__('Block')}
</div>
{activeChannelIsCreator && (
<span className="comment__menu-help">{__('Prevent this channel from interacting with you.')}</span>
)}
</MenuItem>
)}
{!commentIsMine && (
<MenuItem className="comment__menu-option" onSelect={handleCommentMute}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.MUTE} />
{__('Mute')}
</div>
{activeChannelIsCreator && (
<span className="comment__menu-help">{__('Hide this channel for you only.')}</span>
)}
</MenuItem>
)}
2021-06-16 04:27:58 +02:00
{(activeChannelIsAdmin || activeChannelIsModerator) && (
<div className="comment__menu-title">{__('Moderator tools')}</div>
)}
{!commentIsMine && activeChannelIsAdmin && (
<MenuItem className="comment__menu-option" onSelect={blockCommentAsAdmin}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.GLOBE} />
{__('Global Block')}
</div>
<span className="comment__menu-help">{__('Block this channel as global admin')}</span>
</MenuItem>
)}
{!commentIsMine && activeChannelIsModerator && (
<MenuItem className="comment__menu-option" onSelect={blockCommentAsModerator}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.BLOCK} />
{__('Moderator Block')}
</div>
<span className="comment__menu-help">
{__('Block this channel on behalf of %creator%', {
creator: contentChannelClaim ? contentChannelClaim.name : __('creator'),
})}
</span>
</MenuItem>
)}
{activeChannelClaim && (
<div className="comment__menu-active">
ChannelThumbnail improvements - [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src. - Reverted that ugly transparent image fix. - Use the browser's built-in `loading="lazy"` instead. Sorry, Safari. - [x] Size-optimization did not take "device pixel ratio" into account. - When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry. - Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores. - [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances. - The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger. - There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need. - [x] Set `width` and `height` of `<img>` to improve CLS. - Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined). - Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts. - [x] Add option to disable lazy-load Channel Thumbnails - The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`. - We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
2021-07-05 07:20:40 +02:00
<ChannelThumbnail xsmall noLazyLoad uri={activeChannelClaim.permanent_url} />
2021-02-23 03:45:55 +01:00
<div className="comment__menu-channel">
{__('Interacting as %channelName%', { channelName: activeChannelClaim.name })}
</div>
</div>
)}
</MenuList>
);
}
export default CommentMenuList;