use web share api

2020-03-30 15:43:27 -04:00 · 2020-03-30 15:43:27 -04:00 · 27397285bc
commit 27397285bc
parent dbdef22f46
4 changed files with 112 additions and 95 deletions
--- a/ui/component/socialShare/index.js
+++ b/ui/component/socialShare/index.js
@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectClaimForUri, makeSelectTitleForUri } from 'lbry-redux';
 import SocialShare from './view';
 import { selectUserInviteReferralCode, selectUser } from 'lbryinc';

@ -7,6 +7,7 @@ const select = (state, props) => ({
  claim: makeSelectClaimForUri(props.uri)(state),
  referralCode: selectUserInviteReferralCode(state),
  user: selectUser(state),
+  title: makeSelectTitleForUri(props.uri)(state),
 });

 export default connect(select)(SocialShare);
--- a/ui/component/socialShare/view.jsx
+++ b/ui/component/socialShare/view.jsx
@ -5,122 +5,130 @@ import Button from 'component/button';
 import CopyableText from 'component/copyableText';
 import EmbedTextArea from 'component/embedTextArea';
 import { generateDownloadUrl } from 'util/lbrytv';
+import useIsMobile from 'effects/use-is-mobile';

 const IOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
+const SUPPORTS_SHARE_API = typeof navigator.share !== 'undefined';

 type Props = {
-  claim: Claim,
+  claim: StreamClaim,
+  title: ?string,
  webShareable: boolean,
  referralCode: string,
  user: any,
 };

-type State = {
-  showEmbed: boolean,
-  showExtra: boolean,
-};
+function SocialShare(props: Props) {
+  const { claim, title, referralCode, user, webShareable } = props;
+  const [showEmbed, setShowEmbed] = React.useState(false);
+  const [showExtra, setShowExtra] = React.useState(false);
+  const isMobile = useIsMobile();

-class SocialShare extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      showEmbed: false,
-      showExtra: false,
-    };
-    this.input = undefined;
+  if (!claim) {
+    return null;
  }

-  input: ?HTMLInputElement;
+  const { canonical_url: canonicalUrl, permanent_url: permanentUrl, name, claim_id: claimId } = claim;
+  const isChannel = claim.value_type === 'channel';
+  const rewardsApproved = user && user.is_reward_approved;
+  const OPEN_URL = 'https://open.lbry.com/';
+  const lbryUrl = canonicalUrl ? canonicalUrl.split('lbry://')[1] : permanentUrl.split('lbry://')[1];
+  const lbryWebUrl = lbryUrl.replace(/#/g, ':');
+  const encodedLbryURL: string = `${OPEN_URL}${encodeURIComponent(lbryWebUrl)}`;
+  const referralParam: string = referralCode && rewardsApproved ? `?r=${referralCode}` : '';
+  const openDotLbryDotComUrl: string = `${OPEN_URL}${lbryWebUrl}${referralParam}`;
+  const downloadUrl = `${generateDownloadUrl(name, claimId)}`;

-  render() {
-    const { claim, referralCode, user, webShareable } = this.props;
-    const { showEmbed, showExtra } = this.state;
-
-    if (!claim) {
-      return null;
+  function handleWebShareClick() {
+    if (navigator.share) {
+      navigator.share({
+        title: title || claim.name,
+        url: window.location.href,
+      });
    }
-    const { canonical_url: canonicalUrl, permanent_url: permanentUrl, name, claim_id: claimId } = claim;
-    const isChannel = claim.value_type === 'channel';
-    const rewardsApproved = user && user.is_reward_approved;
-    const OPEN_URL = 'https://open.lbry.com/';
-    const lbryUrl = canonicalUrl ? canonicalUrl.split('lbry://')[1] : permanentUrl.split('lbry://')[1];
-    const lbryWebUrl = lbryUrl.replace(/#/g, ':');
-    const encodedLbryURL: string = `${OPEN_URL}${encodeURIComponent(lbryWebUrl)}`;
-    const referralParam: string = referralCode && rewardsApproved ? `?r=${referralCode}` : '';
-    const openDotLbryDotComUrl: string = `${OPEN_URL}${lbryWebUrl}${referralParam}`;
-    const downloadUrl = `${generateDownloadUrl(name, claimId)}`;
+  }

-    return (
-      <React.Fragment>
-        <CopyableText label={__('LBRY Link')} copyable={openDotLbryDotComUrl} />
-        <div className="section__actions">
+  return (
+    <React.Fragment>
+      <CopyableText label={__('LBRY Link')} copyable={openDotLbryDotComUrl} />
+      <div className="section__actions">
+        <Button
+          className="share"
+          iconSize={24}
+          icon={ICONS.TWITTER}
+          href={`https://twitter.com/intent/tweet?text=${encodedLbryURL}`}
+        />
+        <Button
+          className="share"
+          iconSize={24}
+          icon={ICONS.REDDIT}
+          title={__('Share on Facebook')}
+          href={`https://reddit.com/submit?url=${encodedLbryURL}`}
+        />
+        {IOS && (
+          // Only ios client supports share urls
          <Button
            className="share"
            iconSize={24}
-            icon={ICONS.TWITTER}
-            href={`https://twitter.com/intent/tweet?text=${encodedLbryURL}`}
+            icon={ICONS.TELEGRAM}
+            title={__('Share on Telegram')}
+            href={`tg://msg_url?url=${encodedLbryURL}&amp;text=text`}
          />
-          <Button
-            className="share"
-            iconSize={24}
-            icon={ICONS.REDDIT}
-            title={__('Share on Facebook')}
-            href={`https://reddit.com/submit?url=${encodedLbryURL}`}
-          />
-          {IOS && (
-            // Only ios client supports share urls
+        )}
+        <Button
+          className="share"
+          iconSize={24}
+          icon={ICONS.LINKEDIN}
+          title={__('Share on LinkedIn')}
+          href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedLbryURL}`}
+        />
+        <Button
+          className="share"
+          iconSize={24}
+          icon={ICONS.FACEBOOK}
+          title={__('Share on Facebook')}
+          href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
+        />
+        {webShareable && !isChannel && (
+          <React.Fragment>
            <Button
              className="share"
              iconSize={24}
-              icon={ICONS.TELEGRAM}
-              title={__('Share on Telegram')}
-              href={`tg://msg_url?url=${encodedLbryURL}&amp;text=text`}
+              icon={ICONS.EMBED}
+              title={__('Embed this content')}
+              onClick={() => {
+                setShowEmbed(!showEmbed);
+                setShowExtra(false);
+              }}
            />
-          )}
-          <Button
-            className="share"
-            iconSize={24}
-            icon={ICONS.LINKEDIN}
-            title={__('Share on LinkedIn')}
-            href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodedLbryURL}`}
-          />
-          <Button
-            className="share"
-            iconSize={24}
-            icon={ICONS.FACEBOOK}
-            title={__('Share on Facebook')}
-            href={`https://facebook.com/sharer/sharer.php?u=${encodedLbryURL}`}
-          />
-          {webShareable && !isChannel && (
-            <React.Fragment>
-              <Button
-                className="share"
-                iconSize={24}
-                icon={ICONS.EMBED}
-                title={__('Embed this content')}
-                onClick={() => this.setState({ showEmbed: !showEmbed })}
-              />
-              <Button
-                className="share"
-                iconSize={24}
-                icon={ICONS.MORE}
-                title={__('More actions')}
-                onClick={() => this.setState({ showExtra: !showExtra })}
-              />
-            </React.Fragment>
-          )}
-        </div>
-        {showEmbed && <EmbedTextArea label={__('Embedded')} claim={claim} />}
-        {showExtra && (
-          <div className="section">
-            <CopyableText label={__('LBRY URL')} copyable={`lbry://${lbryUrl}`} />
-            <CopyableText label={__('Download Link')} copyable={downloadUrl} />
-          </div>
+            <Button
+              className="share"
+              iconSize={24}
+              icon={ICONS.MORE}
+              title={__('More actions')}
+              onClick={() => {
+                setShowExtra(!showExtra);
+                setShowEmbed(false);
+              }}
+            />
+          </React.Fragment>
        )}
-      </React.Fragment>
-    );
-  }
+      </div>
+
+      {SUPPORTS_SHARE_API && isMobile && (
+        <div className="section__actions">
+          <Button icon={ICONS.SHARE} button="primary" label={__('Share via...')} onClick={handleWebShareClick} />
+        </div>
+      )}
+      {showEmbed && <EmbedTextArea label={__('Embedded')} claim={claim} />}
+      {showExtra && (
+        <div className="section">
+          <CopyableText label={__('LBRY URL')} copyable={`lbry://${lbryUrl}`} />
+          <CopyableText label={__('Download Link')} copyable={downloadUrl} />
+        </div>
+      )}
+    </React.Fragment>
+  );
 }

 export default SocialShare;
--- a/ui/scss/component/_modal.scss
+++ b/ui/scss/component/_modal.scss
@ -1,3 +1,10 @@
+.ReactModal__Body--open {
+  #app {
+    height: 100vh;
+    overflow-y: hidden;
+  }
+}
+
 .modal-overlay {
  top: 0;
  left: 0;
@ -35,6 +42,7 @@

    .card {
      box-shadow: none;
+      border: none;
    }

    .navigation {
--- a/ui/scss/component/_share.scss
+++ b/ui/scss/component/_share.scss
@ -1,8 +1,8 @@
 .share {
  border-radius: 50%;
  .icon {
-    height: 2.5rem;
-    width: 2.5rem;
+    height: 2.2rem;
+    width: 2.2rem;
    stroke: none;
  }