From 8010c4b292e7a67cecc97497964d2b144f0ebf11 Mon Sep 17 00:00:00 2001 From: Jessop Breth Date: Wed, 12 Sep 2018 12:42:15 -0400 Subject: [PATCH] adds modal socialshare capability --- src/renderer/component/address/view.jsx | 19 +++-- src/renderer/component/common/icon.jsx | 3 + src/renderer/component/socialShare/index.js | 9 +++ src/renderer/component/socialShare/view.jsx | 77 ++++++++++++++++++++ src/renderer/constants/icons.js | 2 + src/renderer/modal/modalRouter/view.jsx | 9 ++- src/renderer/modal/modalSocialShare/index.js | 12 +++ src/renderer/modal/modalSocialShare/view.jsx | 22 ++++++ src/renderer/page/file/view.jsx | 8 +- 9 files changed, 150 insertions(+), 11 deletions(-) create mode 100644 src/renderer/component/socialShare/index.js create mode 100644 src/renderer/component/socialShare/view.jsx create mode 100644 src/renderer/modal/modalSocialShare/index.js create mode 100644 src/renderer/modal/modalSocialShare/view.jsx diff --git a/src/renderer/component/address/view.jsx b/src/renderer/component/address/view.jsx index f1c411c3b..aa252f920 100644 --- a/src/renderer/component/address/view.jsx +++ b/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 }) => void, }; @@ -20,7 +25,7 @@ export default class Address extends React.PureComponent { input: ?HTMLInputElement; render() { - const { address, doNotify } = this.props; + const { address, doNotify, noSnackbar } = this.props; return ( @@ -43,10 +48,12 @@ export default class Address extends React.PureComponent { icon={icons.CLIPBOARD} onClick={() => { clipboard.writeText(address); - doNotify({ - message: __('Address copied'), - displayType: ['snackbar'], - }); + if (!noSnackbar) { + doNotify({ + message: __('Address copied'), + displayType: ['snackbar'], + }); + } }} /> diff --git a/src/renderer/component/common/icon.jsx b/src/renderer/component/common/icon.jsx index c331012e5..01db48c41 100644 --- a/src/renderer/component/common/icon.jsx +++ b/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 { return RED_COLOR; case 'green': return GREEN_COLOR; + case 'blue': + return BLUE_COLOR; default: return undefined; } diff --git a/src/renderer/component/socialShare/index.js b/src/renderer/component/socialShare/index.js new file mode 100644 index 000000000..0203166af --- /dev/null +++ b/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); diff --git a/src/renderer/component/socialShare/view.jsx b/src/renderer/component/socialShare/view.jsx new file mode 100644 index 000000000..c84f7c8d0 --- /dev/null +++ b/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 { + 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 ( +
+
+

{__('Share This Content')}

+ +
+
+
+
+ +
+
+
+
+
+ ); + } +} + +export default SocialShare; diff --git a/src/renderer/constants/icons.js b/src/renderer/constants/icons.js index 73cc9d765..23175016d 100644 --- a/src/renderer/constants/icons.js +++ b/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'; diff --git a/src/renderer/modal/modalRouter/view.jsx b/src/renderer/modal/modalRouter/view.jsx index 34152119f..826f35a9c 100644 --- a/src/renderer/modal/modalRouter/view.jsx +++ b/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 { return ; case MODALS.SEND_TIP: return ; + case MODALS.SOCIAL_SHARE: + return ; case MODALS.PUBLISH: return ; case MODALS.CONFIRM_EXTERNAL_LINK: diff --git a/src/renderer/modal/modalSocialShare/index.js b/src/renderer/modal/modalSocialShare/index.js new file mode 100644 index 000000000..e30431144 --- /dev/null +++ b/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); diff --git a/src/renderer/modal/modalSocialShare/view.jsx b/src/renderer/modal/modalSocialShare/view.jsx new file mode 100644 index 000000000..0c14c7881 --- /dev/null +++ b/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 { + render() { + const { closeModal, uri } = this.props; + return ( + + + + ); + } +} + +export default ModalSocialShare; diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx index abfa9180a..828991bca 100644 --- a/src/renderer/page/file/view.jsx +++ b/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 { /> )} {speechSharable && ( - +