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.

static/app-strings.json

@@ -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%.",

ui/component/claimMenuList/view.jsx

@@ -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>
   );

ui/component/claimPreview/view.jsx

@@ -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',

ui/component/claimPreviewTile/view.jsx

@@ -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,
       })}

ui/scss/component/menu-button.scss

@@ -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);
+  }
+}