Add dialog to copy various types of links for a claim.

## Issue
Fixes 4293 `Better download link support`

- [x] make it so you can right click a download button > copy download URL
   Given that this could be useful in mobile/web as well, I used a button+modal instead of the right-click approach.

- [ ] in share dialog, show download URL to copy for non-video content
   This is already implemented, albeit hidden in the "More..." expansion.

CHANGELOG.md

@@ -15,6 +15,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Publish Page improvements to prevent accidental overwrites of existing claims _community pr!_ ([#4416](https://github.com/lbryio/lbry-desktop/pull/4416))
 - Option to remove abandoned claims from Blocked Channels page _community pr!_ ([#4433](https://github.com/lbryio/lbry-desktop/pull/4433))
 - New channel create/edit page ([#4445](https://github.com/lbryio/lbry-desktop/pull/4445))
+- Add dialog to copy various types of links for a claim _community pr!_ ([#4474](https://github.com/lbryio/lbry-desktop/pull/4474))
 
 ### Changed
 

static/app-strings.json

@@ -1291,5 +1291,12 @@
   "Awesome! You just followed your first first channel.": "Awesome! You just followed your first first channel.",
   "After submitting, it will take a few minutes for your changes to be live for everyone.": "After submitting, it will take a few minutes for your changes to be live for everyone.",
   "Anything": "Anything",
-  "Paid": "Paid"
+  "Paid": "Paid",
+  "Start at": "Start at",
+  "Download Link": "Download Link",
+  "Links": "Links",
+  "LBRY URL": "LBRY URL",
+  "LBRY link copied": "LBRY link copied",
+  "LBRY URL copied": "LBRY URL copied",
+  "Download link copied": "Download link copied"
 }

ui/component/fileActions/view.jsx

@@ -108,6 +108,12 @@ function FileActions(props: Props) {
             onClick={() => openModal(MODALS.CONFIRM_FILE_REMOVE, { uri })}
           />
         )}
+        <Button
+          button="alt"
+          icon={ICONS.COPY}
+          title={__('Links')}
+          onClick={() => openModal(MODALS.COPY_LINKS, { uri })}
+        />
         {!claimIsMine && (
           <Button
             title={__('Report content')}

ui/constants/modal_types.js

@@ -43,3 +43,4 @@ export const LIQUIDATE_SUPPORTS = 'liquidate_supports';
 export const CONFIRM_AGE = 'confirm_age';
 export const REMOVE_BLOCKED = 'remove_blocked';
 export const IMAGE_UPLOAD = 'image_upload';
+export const COPY_LINKS = 'copy_links';

ui/modal/modalCopyLinks/index.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import { makeSelectClaimForUri } from 'lbry-redux';
+import ModalCopyLinks from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+});
+
+const perform = dispatch => ({
+  closeModal: () => dispatch(doHideModal()),
+});
+
+export default connect(select, perform)(ModalCopyLinks);

ui/modal/modalCopyLinks/view.jsx

@@ -0,0 +1,54 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import Card from 'component/common/card';
+import CopyableText from 'component/copyableText';
+import { generateDownloadUrl } from 'util/web';
+import { generateLbryContentUrl, generateLbryWebUrl, generateOpenDotLbryDotComUrl } from 'util/url';
+
+type Props = {
+  claim: StreamClaim,
+  closeModal: () => void,
+};
+
+class ModalCopyLinks extends React.PureComponent<Props> {
+  render() {
+    const { claim, closeModal } = this.props;
+    const { canonical_url: canonicalUrl, permanent_url: permanentUrl, name, claim_id: claimId } = claim;
+
+    const OPEN_URL = 'https://open.lbry.com/';
+    const lbryUrl: string = generateLbryContentUrl(canonicalUrl, permanentUrl);
+    const lbryWebUrl: string = generateLbryWebUrl(lbryUrl);
+    const openDotLbryDotComUrl: string = generateOpenDotLbryDotComUrl(OPEN_URL, lbryWebUrl, canonicalUrl, permanentUrl);
+    const downloadUrl = `${generateDownloadUrl(name, claimId)}`;
+
+    return (
+      <Modal isOpen type="card" onAborted={closeModal}>
+        <Card
+          title={__('Links')}
+          actions={
+            <React.Fragment>
+              <CopyableText
+                label={__('LBRY Link')}
+                snackMessage={__('LBRY link copied')}
+                copyable={openDotLbryDotComUrl}
+              />
+              <CopyableText
+                label={__('LBRY URL')}
+                snackMessage={__('LBRY URL copied')}
+                copyable={`lbry://${lbryUrl}`}
+              />
+              <CopyableText
+                label={__('Download Link')}
+                snackMessage={__('Download link copied')}
+                copyable={downloadUrl}
+              />
+            </React.Fragment>
+          }
+        />
+      </Modal>
+    );
+  }
+}
+
+export default ModalCopyLinks;

ui/modal/modalRouter/view.jsx

@@ -41,6 +41,7 @@ import ModalSupportsLiquidate from 'modal/modalSupportsLiquidate';
 import ModalConfirmAge from 'modal/modalConfirmAge';
 import ModalFileSelection from 'modal/modalFileSelection';
 import ModalImageUpload from 'modal/modalImageUpload';
+import ModalCopyLinks from 'modal/modalCopyLinks';
 
 type Props = {
   modal: { id: string, modalProps: {} },
@@ -146,6 +147,8 @@ function ModalRouter(props: Props) {
       return <ModalRemoveBlocked {...modalProps} />;
     case MODALS.IMAGE_UPLOAD:
       return <ModalImageUpload {...modalProps} />;
+    case MODALS.COPY_LINKS:
+      return <ModalCopyLinks {...modalProps} />;
     default:
       return null;
   }