Explain that "Block" leads to modal with more options. (#7039)

## Issue
7035 Make it clearer that delegated mods can block via Block menu
This commit is contained in:
infinite-persistence 2021-09-08 09:31:45 -07:00 committed by GitHub
parent 4ddf75f836
commit 23f273356a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 87 additions and 16 deletions

View file

@ -1718,6 +1718,10 @@
"Level %current_level%": "Level %current_level%",
"Creator tools": "Creator tools",
"Prevent this channel from interacting with you.": "Prevent this channel from interacting with you.",
"Choose a permanent or temporary ban.": "Choose a permanent or temporary ban.",
"Personal | Moderator | Admin": "Personal | Moderator | Admin",
"Personal | Moderator": "Personal | Moderator",
"Personal | Admin": "Personal | Admin",
"Hide this channel for you only.": "Hide this channel for you only.",
"Interacting as %channelName%": "Interacting as %channelName%",
"Page Not Found": "Page Not Found",

View file

@ -7,7 +7,7 @@ import { doOpenModal } from 'redux/actions/app';
import { doSetPlayingUri } from 'redux/actions/content';
import { selectActiveChannelClaim } from 'redux/selectors/app';
import { selectPlayingUri } from 'redux/selectors/content';
import { selectModerationDelegatorsById } from 'redux/selectors/comments';
import CommentMenuList from './view';
const select = (state, props) => ({
@ -16,6 +16,7 @@ const select = (state, props) => ({
contentChannelPermanentUrl: makeSelectChannelPermUrlForClaimUri(props.uri)(state),
activeChannelClaim: selectActiveChannelClaim(state),
playingUri: selectPlayingUri(state),
moderationDelegatorsById: selectModerationDelegatorsById(state),
});
const perform = (dispatch) => ({

View file

@ -6,6 +6,7 @@ import { MenuList, MenuItem } from '@reach/menu-button';
import ChannelThumbnail from 'component/channelThumbnail';
import Icon from 'component/common/icon';
import { parseURI } from 'lbry-redux';
import { getChannelFromClaim } from 'util/claim';
type Props = {
uri: ?string,
@ -24,6 +25,7 @@ type Props = {
contentChannelPermanentUrl: any,
activeChannelClaim: ?ChannelClaim,
playingUri: ?PlayingUri,
moderationDelegatorsById: { [string]: { global: boolean, delegators: { name: string, claimId: string } } },
// --- perform ---
openModal: (id: string, {}) => void,
clearPlayingUri: () => void,
@ -50,6 +52,7 @@ function CommentMenuList(props: Props) {
handleEditComment,
commentModAddDelegate,
playingUri,
moderationDelegatorsById,
disableEdit,
disableRemove,
openModal,
@ -57,7 +60,15 @@ function CommentMenuList(props: Props) {
setQuickReply,
} = props;
const contentChannelClaim = getChannelFromClaim(claim);
const activeModeratorInfo = activeChannelClaim && moderationDelegatorsById[activeChannelClaim.claim_id];
const activeChannelIsCreator = activeChannelClaim && activeChannelClaim.permanent_url === contentChannelPermanentUrl;
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);
@ -91,6 +102,59 @@ function CommentMenuList(props: Props) {
}
}
function getBlockOptionElem() {
const isPersonalBlockTheOnlyOption = !activeChannelIsModerator && !activeChannelIsAdmin;
const isTimeoutBlockAvailable = (claim && claim.is_my_output) || activeChannelIsModerator;
const personalPermanentBlockOnly = isPersonalBlockTheOnlyOption && !isTimeoutBlockAvailable;
function getSubtitle() {
if (personalPermanentBlockOnly) {
return {
line1: __('Prevent this channel from interacting with you.'),
line2: null,
};
} else {
if (activeChannelIsModerator && activeChannelIsAdmin) {
return {
line1: __('Personal | Moderator | Admin'),
line2: __('Choose a permanent or temporary ban.'),
};
} else if (activeChannelIsModerator && !activeChannelIsAdmin) {
return {
line1: __('Personal | Moderator'),
line2: __('Choose a permanent or temporary ban.'),
};
} else if (!activeChannelIsModerator && activeChannelIsAdmin) {
return {
line1: __('Personal | Admin'),
line2: __('Choose a permanent or temporary ban.'),
};
} else {
return {
line1: null,
line2: __('Choose a permanent or temporary ban.'),
};
}
}
}
const subtitle = getSubtitle();
return (
<>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.BLOCK} />
{__('Block')}
</div>
{subtitle.line1 && <span className="comment__menu-help">{subtitle.line1}</span>}
{subtitle.line2 && (
<span className="comment__menu-help">
{subtitle.line2} {!personalPermanentBlockOnly && <Icon aria-hidden icon={ICONS.EXTERNAL} />}
</span>
)}
</>
);
}
return (
<MenuList className="menu__list">
{activeChannelIsCreator && <div className="comment__menu-title">{__('Creator tools')}</div>}
@ -142,13 +206,7 @@ function CommentMenuList(props: Props) {
{!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>
)}
{getBlockOptionElem()}
</MenuItem>
)}

View file

@ -11,6 +11,7 @@ import Icon from 'component/common/icon';
import * as ICONS from 'constants/icons';
import usePersistedState from 'effects/use-persisted-state';
import { Modal } from 'modal/modal';
import { getChannelFromClaim } from 'util/claim';
const TAB = {
PERSONAL: 'personal',
@ -49,14 +50,7 @@ export default function ModalBlockChannel(props: Props) {
commentModBlockAsModerator,
} = props;
const contentChannelClaim = !contentClaim
? null
: contentClaim.value_type === 'channel'
? contentClaim
: contentClaim.signing_channel && contentClaim.is_channel_signature_valid
? contentClaim.signing_channel
: null;
const contentChannelClaim = getChannelFromClaim(contentClaim);
const activeModeratorInfo = activeChannelClaim && moderationDelegatorsById[activeChannelClaim.claim_id];
const activeChannelIsAdmin = activeChannelClaim && activeModeratorInfo && activeModeratorInfo.global;
const activeChannelIsModerator =

View file

@ -353,6 +353,10 @@ $thumbnailWidthSmall: 1rem;
padding-left: calc(18px + var(--spacing-s));
max-width: 15rem;
white-space: pre-line;
.icon {
vertical-align: top;
}
}
.comment__actions {

View file

@ -9,3 +9,13 @@ export function getChannelIdFromClaim(claim: ?Claim) {
}
}
}
export function getChannelFromClaim(claim: ?Claim) {
return !claim
? null
: claim.value_type === 'channel'
? claim
: claim.signing_channel && claim.is_channel_signature_valid
? claim.signing_channel
: null;
}