use web share api

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);

ui/component/socialShare/view.jsx

@@ -5,41 +5,29 @@ 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 = {
+function SocialShare(props: Props) {
-  showEmbed: boolean,
+  const { claim, title, referralCode, user, webShareable } = props;
-  showExtra: boolean,
+  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;
-  }
-
-  input: ?HTMLInputElement;
-
-  render() {
-    const { claim, referralCode, user, webShareable } = this.props;
-    const { showEmbed, showExtra } = this.state;
 
   if (!claim) {
     return null;
   }
+
   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;
@@ -51,6 +39,15 @@ class SocialShare extends React.PureComponent<Props, State> {
   const openDotLbryDotComUrl: string = `${OPEN_URL}${lbryWebUrl}${referralParam}`;
   const downloadUrl = `${generateDownloadUrl(name, claimId)}`;
 
+  function handleWebShareClick() {
+    if (navigator.share) {
+      navigator.share({
+        title: title || claim.name,
+        url: window.location.href,
+      });
+    }
+  }
+
   return (
     <React.Fragment>
       <CopyableText label={__('LBRY Link')} copyable={openDotLbryDotComUrl} />
@@ -99,18 +96,30 @@ class SocialShare extends React.PureComponent<Props, State> {
               iconSize={24}
               icon={ICONS.EMBED}
               title={__('Embed this content')}
-                onClick={() => this.setState({ showEmbed: !showEmbed })}
+              onClick={() => {
+                setShowEmbed(!showEmbed);
+                setShowExtra(false);
+              }}
             />
             <Button
               className="share"
               iconSize={24}
               icon={ICONS.MORE}
               title={__('More actions')}
-                onClick={() => this.setState({ showExtra: !showExtra })}
+              onClick={() => {
+                setShowExtra(!showExtra);
+                setShowEmbed(false);
+              }}
             />
           </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">
@@ -121,6 +130,5 @@ class SocialShare extends React.PureComponent<Props, State> {
     </React.Fragment>
   );
 }
-}
 
 export default SocialShare;

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 {

ui/scss/component/_share.scss

@@ -1,8 +1,8 @@
 .share {
   border-radius: 50%;
   .icon {
-    height: 2.5rem;
+    height: 2.2rem;
-    width: 2.5rem;
+    width: 2.2rem;
     stroke: none;
   }