ClaimPreview: use new MenuList instead of context-menu (works for both Desktop and Web)

## Issue
- Second attempt at 5500: Allow right click + report feature on tiles
- Related: PR_5531

## Notes
Although the link can already be easily copied on web, the menu item is still retained for consistency between the platforms.
This commit is contained in:
infinite-persistence 2021-03-05 05:01:14 +08:00 committed by Sean Yesmunt
parent b2c643d7f1
commit 90b559618c
5 changed files with 41 additions and 26 deletions

View file

@ -32,6 +32,7 @@
"Play": "Play",
"Subscribe": "Subscribe",
"Report content": "Report content",
"Report Content": "Report Content",
"Content-Type": "Content-Type",
"Languages": "Languages",
"Media Type": "Media Type",
@ -676,6 +677,7 @@
"lbry.tv": "lbry.tv",
"Bid position must be a number.": "Bid position must be a number.",
"Copy": "Copy",
"Copy Link": "Copy Link",
"Text copied": "Text copied",
"Rewards Disabled": "Rewards Disabled",
"Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%.": "Wallet servers are used to relay data to and from the LBRY blockchain. They also determine what content shows in trending or is blocked. %learn_more%.",

View file

@ -4,6 +4,7 @@ import React from 'react';
import classnames from 'classnames';
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
import Icon from 'component/common/icon';
import { convertToShareLink } from 'lbry-redux';
type Props = {
claim: ?Claim,
@ -33,7 +34,7 @@ function ClaimMenuList(props: Props) {
? claim.permanent_url
: claim.signing_channel && claim.signing_channel.permanent_url);
if (!channelUri || claimIsMine) {
if (!channelUri || !claim) {
return null;
}
@ -49,6 +50,15 @@ function ClaimMenuList(props: Props) {
}
}
function handleCopyLink() {
const shareLink = convertToShareLink(claim.canonical_url || claim.permanent_url);
navigator.clipboard.writeText(shareLink);
}
function handleReportContent() {
window.open(`https://lbry.com/dmca/${claim.claim_id}`, '_blank', 'noopener');
}
return (
<Menu>
<MenuButton
@ -76,8 +86,28 @@ function ClaimMenuList(props: Props) {
{channelIsMuted ? __('Unmute Channel') : __('Mute Channel')}
</div>
</MenuItem>
<MenuItem className="menu__separator" disabled onSelect={() => {}}>
<hr />
</MenuItem>
</>
)}
<MenuItem className="comment__menu-option" onSelect={handleCopyLink}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SHARE} />
{__('Copy Link')}
</div>
</MenuItem>
{!claimIsMine && (
<MenuItem className="comment__menu-option" onSelect={handleReportContent}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.REPORT} />
{__('Report Content')}
</div>
</MenuItem>
)}
</MenuList>
</Menu>
);

View file

@ -4,9 +4,6 @@ import React, { useEffect, forwardRef } from 'react';
import { NavLink, withRouter } from 'react-router-dom';
import classnames from 'classnames';
import { parseURI } from 'lbry-redux';
// @if TARGET='app'
import { openClaimPreviewMenu } from 'util/context-menu';
// @endif
import { formatLbryUrlForWeb } from 'util/url';
import { isEmpty } from 'util/object';
import FileThumbnail from 'component/fileThumbnail';
@ -188,14 +185,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
// Make sure this happens after we figure out if this claim needs to be hidden
const thumbnailUrl = useGetThumbnail(contentUri, claim, streamingUrl, getFile, shouldHide);
function handleContextMenu(e) {
// @if TARGET='app'
e.preventDefault();
e.stopPropagation();
openClaimPreviewMenu(claim, e);
// @endif
}
function handleOnClick(e) {
if (onClick) {
onClick(e);
@ -250,7 +239,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
ref={ref}
role="link"
onClick={pending || type === 'inline' ? undefined : handleOnClick}
onContextMenu={handleContextMenu}
className={classnames('claim-preview__wrapper', {
'claim-preview__wrapper--channel': isChannelUri && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',

View file

@ -16,10 +16,6 @@ import FileDownloadLink from 'component/fileDownloadLink';
import ClaimRepostAuthor from 'component/claimRepostAuthor';
import ClaimMenuList from 'component/claimMenuList';
// @if TARGET='app'
import { openClaimPreviewMenu } from 'util/context-menu';
// @endif
type Props = {
uri: string,
claim: ?Claim,
@ -157,19 +153,10 @@ function ClaimPreviewTile(props: Props) {
);
}
function handleContextMenu(e) {
// @if TARGET='app'
e.preventDefault();
e.stopPropagation();
openClaimPreviewMenu(claim, e);
// @endif
}
return (
<li
role="link"
onClick={handleClick}
onContextMenu={handleContextMenu}
className={classnames('card claim-preview--tile', {
'claim-preview__wrapper--channel': isChannel,
})}

View file

@ -136,3 +136,11 @@
font-weight: var(--font-weight-bold);
margin-top: var(--spacing-m);
}
.menu__separator {
hr {
margin-top: var(--border-radius);
margin-bottom: var(--border-radius);
border-top: 1px solid var(--color-button-border);
}
}