Merge pull request #65 from lbryio/channel-share

add share button to channel page

src/constants.js

@@ -140,6 +140,8 @@ const Constants = {
   TRUE_STRING: 'true',
 
   MINIMUM_TRANSACTION_BALANCE: 0.1,
+
+  SHARE_BASE_URL: 'https://open.lbry.com',
 };
 
 export default Constants;

src/page/channel/view.js

@@ -13,7 +13,7 @@ import {
 } from 'react-native';
 import { TabView, SceneMap } from 'react-native-tab-view';
 import { normalizeURI } from 'lbry-redux';
-import { navigateBack, getOrderBy } from 'utils/helper';
+import { navigateBack, getOrderBy, formatLbryUrlForWeb } from 'utils/helper';
 import ChannelIconItem from 'component/channelIconItem';
 import ClaimList from 'component/claimList';
 import Colors from 'styles/colors';
@@ -172,6 +172,15 @@ class ChannelPage extends React.PureComponent {
     }
   };
 
+  onSharePressed = () => {
+    const { claim } = this.props;
+    if (claim) {
+      const { canonical_url: canonicalUrl, short_url: shortUrl, permanent_url: permanentUrl } = claim;
+      const url = Constants.SHARE_BASE_URL + formatLbryUrlForWeb(canonicalUrl || shortUrl || permanentUrl);
+      NativeModules.UtilityModule.shareUrl(url);
+    }
+  };
+
   onDeletePressed = () => {
     const { abandonClaim, claim, navigation } = this.props;
     if (claim) {
@@ -274,6 +283,12 @@ class ChannelPage extends React.PureComponent {
                   onPress={this.onDeletePressed}
                 />
               )}
+              <Button
+                style={[channelPageStyle.actionButton, channelPageStyle.shareButton]}
+                theme={'light'}
+                icon={'share-alt'}
+                onPress={this.onSharePressed}
+              />
               {!ownedChannel && <SubscribeButton style={channelPageStyle.subscribeButton} uri={fullUri} name={name} />}
               {!ownedChannel && (
                 <SubscribeNotificationButton

src/page/file/view.js

@@ -19,7 +19,7 @@ import {
   WebView,
 } from 'react-native';
 import { NavigationEvents } from 'react-navigation';
-import { navigateBack, navigateToUri } from 'utils/helper';
+import { navigateBack, navigateToUri, formatLbryUrlForWeb } from 'utils/helper';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import Button from 'component/button';
@@ -508,16 +508,11 @@ class FilePage extends React.PureComponent {
     this.setState({ fileViewLogged: true });
   };
 
-  // TODO: Move this to lbry-redux
-  formatLbryUrlForWeb = url => {
-    return url.replace('lbry://', '/').replace(/#/g, ':');
-  };
-
   handleSharePress = () => {
     const { claim, notify } = this.props;
     if (claim) {
       const { canonical_url: canonicalUrl, short_url: shortUrl, permanent_url: permanentUrl } = claim;
-      const url = 'https://open.lbry.com' + this.formatLbryUrlForWeb(canonicalUrl || shortUrl || permanentUrl);
+      const url = Constants.SHARE_BASE_URL + formatLbryUrlForWeb(canonicalUrl || shortUrl || permanentUrl);
       NativeModules.UtilityModule.shareUrl(url);
     }
   };

src/styles/channelPage.js

@@ -172,6 +172,10 @@ const channelPageStyle = StyleSheet.create({
   deleteButton: {
     marginLeft: 8,
   },
+  shareButton: {
+    marginLeft: 8,
+    marginRight: 8,
+  },
 });
 
 export default channelPageStyle;

src/utils/helper.js

@@ -346,3 +346,8 @@ export function uploadImageAsset(filePath, success, failure) {
       }
     });
 }
+
+// TODO: Move this to lbry-redux
+export function formatLbryUrlForWeb(url) {
+  return url.replace('lbry://', '/').replace(/#/g, ':');
+}