Merge pull request #1943 from jessopb/modals

feature: ModalSocialShare

src/renderer/component/address/view.jsx

@@ -4,9 +4,14 @@ 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 = {
   address: string,
+  noSnackbar: boolean,
   doNotify: ({ message: string, displayType: Array<string> }) => void,
 };
 
@@ -20,7 +25,7 @@ export default class Address extends React.PureComponent<Props> {
   input: ?HTMLInputElement;
 
   render() {
-    const { address, doNotify } = this.props;
+    const { address, doNotify, noSnackbar } = this.props;
 
     return (
       <FormRow verticallyCentered padded stretch>
@@ -43,10 +48,12 @@ export default class Address extends React.PureComponent<Props> {
           icon={icons.CLIPBOARD}
           onClick={() => {
             clipboard.writeText(address);
+            if (!noSnackbar) {
               doNotify({
                 message: __('Address copied'),
                 displayType: ['snackbar'],
               });
+            }
           }}
         />
       </FormRow>

src/renderer/component/common/icon.jsx

@@ -8,6 +8,7 @@ import Tooltip from 'component/common/tooltip';
 // These are copied from `scss/vars`, can they both come from the same source?
 const RED_COLOR = '#e2495e';
 const GREEN_COLOR = '#44b098';
+const BLUE_COLOR = '#49b2e2';
 
 type Props = {
   icon: string,
@@ -33,6 +34,8 @@ class IconComponent extends React.PureComponent<Props> {
         return RED_COLOR;
       case 'green':
         return GREEN_COLOR;
+      case 'blue':
+        return BLUE_COLOR;
       default:
         return undefined;
     }

src/renderer/component/socialShare/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri } from 'lbry-redux';
+import SocialShare from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+});
+
+export default connect(select)(SocialShare);

src/renderer/component/socialShare/view.jsx

@@ -0,0 +1,77 @@
+// @flow
+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';
+
+type Props = {
+  claim: Claim,
+  onDone: () => void,
+};
+
+class SocialShare extends React.PureComponent<Props> {
+  constructor(props: Props) {
+    super(props);
+
+    this.input = undefined;
+  }
+
+  input: ?HTMLInputElement;
+
+  render() {
+    const { claim_id: claimId, name: claimName, channel_name: channelName } = this.props.claim;
+    const { onDone } = this.props;
+    const speechPrefix = 'http://spee.ch/';
+    const speechURL = channelName
+      ? `${speechPrefix}${channelName}/${claimName}`
+      : `${speechPrefix}${claimName}#${claimId}`;
+
+    return (
+      <div>
+        <div className="card__title">
+          <h2>{__('Share This Content')}</h2>
+
+          <div className="card__content">
+            <Address address={speechURL} noSnackbar />
+          </div>
+          <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=${speechURL}`}
+              />
+            </Tooltip>
+            <Tooltip onComponent body={__('Twitter')}>
+              <Button
+                iconColor="blue"
+                icon={icons.TWITTER}
+                button="alt"
+                label={__('')}
+                href={`https://twitter.com/home?status=${speechURL}`}
+              />
+            </Tooltip>
+            <Tooltip onComponent body={__('View on Spee.ch')}>
+              <Button
+                icon={icons.GLOBE}
+                iconColor="blue"
+                button="alt"
+                label={__('')}
+                href={`${speechURL}`}
+              />
+            </Tooltip>
+          </div>
+          <div className="card__actions">
+            <Button button="link" label={__('Done')} onClick={onDone} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SocialShare;

src/renderer/constants/icons.js

@@ -30,3 +30,5 @@ export const EXTERNAL_LINK = 'ExternalLink';
 export const GIFT = 'Gift';
 export const EYE = 'Eye';
 export const PLAY = 'Play';
+export const FACEBOOK = 'Facebook';
+export const TWITTER = 'Twitter';

src/renderer/modal/modalRouter/view.jsx

@@ -19,9 +19,10 @@ import ModalEmailCollection from 'modal/modalEmailCollection';
 import ModalPhoneCollection from 'modal/modalPhoneCollection';
 import ModalFirstSubscription from 'modal/modalFirstSubscription';
 import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
-import ModalSendTip from '../modalSendTip';
-import ModalPublish from '../modalPublish';
-import ModalOpenExternalLink from '../modalOpenExternalLink';
+import ModalSocialShare from 'modal/modalSocialShare';
+import ModalSendTip from 'modal/modalSendTip';
+import ModalPublish from 'modal/modalPublish';
+import ModalOpenExternalLink from 'modal/modalOpenExternalLink';
 import ModalConfirmThumbnailUpload from 'modal/modalConfirmThumbnailUpload';
 import ModalWalletEncrypt from 'modal/modalWalletEncrypt';
 import ModalWalletDecrypt from 'modal/modalWalletDecrypt';
@@ -160,6 +161,8 @@ class ModalRouter extends React.PureComponent<Props> {
         return <ModalFirstSubscription {...notificationProps} />;
       case MODALS.SEND_TIP:
         return <ModalSendTip {...notificationProps} />;
+      case MODALS.SOCIAL_SHARE:
+        return <ModalSocialShare {...notificationProps} />;
       case MODALS.PUBLISH:
         return <ModalPublish {...notificationProps} />;
       case MODALS.CONFIRM_EXTERNAL_LINK:

src/renderer/modal/modalSocialShare/index.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { doHideNotification } from 'lbry-redux';
+import ModalSocialShare from './view';
+
+const perform = dispatch => ({
+  closeModal: () => dispatch(doHideNotification()),
+});
+
+export default connect(
+  null,
+  perform
+)(ModalSocialShare);

src/renderer/modal/modalSocialShare/view.jsx

@@ -0,0 +1,22 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import SocialShare from 'component/socialShare';
+
+type Props = {
+  closeModal: () => void,
+  uri: string,
+};
+
+class ModalSocialShare extends React.PureComponent<Props> {
+  render() {
+    const { closeModal, uri } = this.props;
+    return (
+      <Modal isOpen onAborted={closeModal} type="custom">
+        <SocialShare uri={uri} onDone={closeModal} />
+      </Modal>
+    );
+  }
+}
+
+export default ModalSocialShare;

src/renderer/page/file/view.jsx

@@ -13,7 +13,6 @@ import DateTime from 'component/dateTime';
 import * as icons from 'constants/icons';
 import Button from 'component/button';
 import SubscribeButton from 'component/subscribeButton';
-import ViewOnWebButton from 'component/viewOnWebButton';
 import Page from 'component/page';
 import type { Claim } from 'types/claim';
 import type { Subscription } from 'types/subscription';
@@ -224,7 +223,12 @@ class FilePage extends React.Component<Props> {
                   />
                 )}
                 {speechSharable && (
-                  <ViewOnWebButton claimId={claim.claim_id} claimName={claim.name} />
+                  <Button
+                    button="alt"
+                    icon={icons.GLOBE}
+                    label={__('Share')}
+                    onClick={() => openModal({ id: MODALS.SOCIAL_SHARE }, { uri })}
+                  />
                 )}
               </div>