Merge pull request #1989 from jessopb/expandedShare

adds open.lbry.io links to socialShare Re: Issue # 1810

src/renderer/component/copyableText/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { doNotify } from 'lbry-redux';
+import CopyableText from './view';
+
+export default connect(
+  null,
+  {
+    doNotify,
+  }
+)(CopyableText);

src/renderer/component/copyableText/view.jsx

@@ -0,0 +1,63 @@
+// @flow
+import * as React from 'react';
+import { clipboard } from 'electron';
+import { FormRow } from 'component/common/form';
+import Button from 'component/button';
+import * as icons from 'constants/icons';
+/*
+noSnackbar added due to issue 1945
+https://github.com/lbryio/lbry-desktop/issues/1945
+"Snackbars and modals can't be displayed at the same time"
+*/
+type Props = {
+  copyable: string,
+  noSnackbar: boolean,
+  doNotify: ({ message: string, displayType: Array<string> }) => void,
+};
+
+export default class CopyableText extends React.PureComponent<Props> {
+  constructor() {
+    super();
+
+    this.input = null;
+  }
+
+  input: ?HTMLInputElement;
+
+  render() {
+    const { copyable, doNotify, noSnackbar } = this.props;
+
+    return (
+      <FormRow verticallyCentered padded stretch>
+        <input
+          className="input-copyable form-field__input"
+          readOnly
+          value={copyable || ''}
+          ref={input => {
+            this.input = input;
+          }}
+          onFocus={() => {
+            if (this.input) {
+              this.input.select();
+            }
+          }}
+        />
+
+        <Button
+          noPadding
+          button="secondary"
+          icon={icons.CLIPBOARD}
+          onClick={() => {
+            clipboard.writeText(copyable);
+            if (!noSnackbar) {
+              doNotify({
+                message: __('Text copied'),
+                displayType: ['snackbar'],
+              });
+            }
+          }}
+        />
+      </FormRow>
+    );
+  }
+}

src/renderer/component/socialShare/view.jsx

@@ -3,12 +3,13 @@ import React from 'react';
 import type { Claim } from 'types/claim';
 import Button from 'component/button';
 import * as icons from 'constants/icons';
-import Tooltip from 'component/common/tooltip';
-import Address from 'component/address';
+import CopyableText from 'component/copyableText';
+import ToolTip from 'component/common/tooltip';
 
 type Props = {
   claim: Claim,
   onDone: () => void,
+  speechShareable: boolean,
 };
 
 class SocialShare extends React.PureComponent<Props> {
@@ -27,20 +28,27 @@ class SocialShare extends React.PureComponent<Props> {
       channel_name: channelName,
       value,
     } = this.props.claim;
+    const { speechShareable, onDone } = this.props;
     const channelClaimId =
       value && value.publisherSignature && value.publisherSignature.certificateId;
-    const { onDone } = this.props;
     const speechPrefix = 'http://spee.ch/';
+    const lbryPrefix = 'http://open.lbry.io/';
+
     const speechURL =
       channelName && channelClaimId
         ? `${speechPrefix}${channelName}:${channelClaimId}/${claimName}`
         : `${speechPrefix}${claimName}#${claimId}`;
 
+    const lbryURL = `${lbryPrefix}${claimName}#${claimId}`;
+
     return (
       <section className="card__content">
-        <Address address={speechURL} noSnackbar />
+        {speechShareable && (
+          <div className="card__content">
+            <label className="card__subtitle">{__('Web link')}</label>
+            <CopyableText copyable={speechURL} noSnackbar />
             <div className="card__actions card__actions--center">
-          <Tooltip onComponent body={__('Facebook')}>
+              <ToolTip onComponent body={__('Facebook')}>
                 <Button
                   iconColor="blue"
                   icon={icons.FACEBOOK}
@@ -48,8 +56,8 @@ class SocialShare extends React.PureComponent<Props> {
                   label={__('')}
                   href={`https://facebook.com/sharer/sharer.php?u=${speechURL}`}
                 />
-          </Tooltip>
-          <Tooltip onComponent body={__('Twitter')}>
+              </ToolTip>
+              <ToolTip onComponent body={__('Twitter')}>
                 <Button
                   iconColor="blue"
                   icon={icons.TWITTER}
@@ -57,8 +65,8 @@ class SocialShare extends React.PureComponent<Props> {
                   label={__('')}
                   href={`https://twitter.com/home?status=${speechURL}`}
                 />
-          </Tooltip>
-          <Tooltip onComponent body={__('View on Spee.ch')}>
+              </ToolTip>
+              <ToolTip onComponent body={__('View on Spee.ch')}>
                 <Button
                   icon={icons.GLOBE}
                   iconColor="blue"
@@ -66,7 +74,33 @@ class SocialShare extends React.PureComponent<Props> {
                   label={__('')}
                   href={`${speechURL}`}
                 />
-          </Tooltip>
+              </ToolTip>
+            </div>
+          </div>
+        )}
+        <div className="card__content">
+          <label className="card__subtitle">{__('LBRY App link')}</label>
+          <CopyableText copyable={lbryURL} noSnackbar />
+          <div className="card__actions card__actions--center">
+            <ToolTip onComponent body={__('Facebook')}>
+              <Button
+                iconColor="blue"
+                icon={icons.FACEBOOK}
+                button="alt"
+                label={__('')}
+                href={`https://facebook.com/sharer/sharer.php?u=${lbryURL}`}
+              />
+            </ToolTip>
+            <ToolTip onComponent body={__('Twitter')}>
+              <Button
+                iconColor="blue"
+                icon={icons.TWITTER}
+                button="alt"
+                label={__('')}
+                href={`https://twitter.com/home?status=${lbryURL}`}
+              />
+            </ToolTip>
+          </div>
         </div>
         <div className="card__actions">
           <Button button="link" label={__('Done')} onClick={onDone} />

src/renderer/modal/modalSocialShare/view.jsx

@@ -6,14 +6,15 @@ import SocialShare from 'component/socialShare';
 type Props = {
   closeModal: () => void,
   uri: string,
+  speechShareable: boolean,
 };
 
 class ModalSocialShare extends React.PureComponent<Props> {
   render() {
-    const { closeModal, uri } = this.props;
+    const { closeModal, uri, speechShareable } = this.props;
     return (
       <Modal isOpen onAborted={closeModal} type="custom" title={__('Share')}>
-        <SocialShare uri={uri} onDone={closeModal} />
+        <SocialShare uri={uri} onDone={closeModal} speechShareable={speechShareable} />
       </Modal>
     );
   }

src/renderer/page/file/view.jsx

@@ -145,12 +145,11 @@ class FilePage extends React.Component<Props> {
     if (channelName && channelClaimId) {
       subscriptionUri = buildURI({ channelName, claimId: channelClaimId }, false);
     }
-    const speechSharable =
+    const speechShareable =
       costInfo &&
       costInfo.cost === 0 &&
       contentType &&
       ['video', 'image'].includes(contentType.split('/')[0]);
-
     // We want to use the short form uri for editing
     // This is what the user is used to seeing, they don't care about the claim id
     // We will select the claim id before they publish
@@ -222,14 +221,17 @@ class FilePage extends React.Component<Props> {
                     onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
                   />
                 )}
-                {speechSharable && (
                 <Button
                   button="alt"
                   icon={icons.GLOBE}
                   label={__('Share')}
-                    onClick={() => openModal({ id: MODALS.SOCIAL_SHARE }, { uri })}
+                  onClick={() =>
+                    openModal(
+                      { id: MODALS.SOCIAL_SHARE },
+                      { uri, speechShareable: speechShareable }
+                    )
+                  }
                 />
-                )}
               </div>
 
               <div className="card__actions">

src/renderer/scss/_gui.scss

@@ -92,6 +92,7 @@ input {
     color: var(--input-copyable-color);
     padding: 10px 16px;
     border: 1px dashed var(--input-copyable-border);
+    text-overflow: ellipsis;
   }
 
   &:not(.input-copyable):not(.wunderbar__input):not(:placeholder-shown):not(:disabled) {