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:
parent
b2c643d7f1
commit
90b559618c
5 changed files with 41 additions and 26 deletions
|
@ -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%.",
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
})}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue