ui/component/claimMenuList/view.jsx

@@ -7,10 +7,10 @@ import React from 'react';
 import classnames from 'classnames';
 import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
 import Icon from 'component/common/icon';
+import { useIsMobile } from 'effects/use-screensize';
 import { generateShareUrl, generateRssUrl, generateLbryContentUrl } from 'util/url';
 import { useHistory } from 'react-router';
 import { buildURI, parseURI, COLLECTIONS_CONSTS } from 'lbry-redux';
-
 const SHARE_DOMAIN = SHARE_DOMAIN_URL || URL;
 const PAGE_VIEW_QUERY = `view`;
 const EDIT_PAGE = 'edit';
@@ -94,6 +94,8 @@ function ClaimMenuList(props: Props) {
     editedCollection,
     isAuthenticated,
   } = props;
+
+  const isMobile = useIsMobile();
   const incognitoClaim = contentChannelUri && !contentChannelUri.includes('@');
   const isChannel = !incognitoClaim && !contentSigningChannel;
   const { channelName } = parseURI(contentChannelUri);
@@ -229,6 +231,11 @@ function ClaimMenuList(props: Props) {
     push(`/$/${PAGES.REPORT_CONTENT}?claimId=${contentClaim && contentClaim.claim_id}`);
   }
 
+  function handleOpenInDesktop() {
+    // $FlowFixMe
+    window.open(`/$/${PAGES.OPEN_IN_DESKTOP}/${contentClaim.name}/${contentClaim.claim_id}`, '_blank');
+  }
+
   return (
     <Menu>
       <MenuButton
@@ -411,6 +418,15 @@ function ClaimMenuList(props: Props) {
           </MenuItem>
         )}
 
+        {IS_WEB && !isMobile && (
+          <MenuItem className="comment__menu-option" onSelect={handleOpenInDesktop}>
+            <div className="menu__link">
+              <Icon aria-hidden icon={ICONS.DESKTOP} />
+              {__('Open in Desktop')}
+            </div>
+          </MenuItem>
+        )}
+
         {!claimIsMine && !isMyCollection && (
           <MenuItem className="comment__menu-option" onSelect={handleReportContent}>
             <div className="menu__link">

ui/component/common/icon-custom.jsx

@@ -2331,4 +2331,11 @@ export const icons = {
       <path d="M4.954 14.753l3.535 3.535-1.768 1.768-3.535-3.535z" />
     </g>
   ),
+  [ICONS.DESKTOP]: buildIcon(
+    <g>
+      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+      <line x1="8" y1="21" x2="16" y2="21" />
+      <line x1="12" y1="17" x2="12" y2="21" />
+    </g>
+  ),
 };

ui/component/router/view.jsx

@@ -18,6 +18,7 @@ const BackupPage = lazyImport(() => import('page/backup' /* webpackChunkName: "b
 
 // @if TARGET='web'
 const Code2257Page = lazyImport(() => import('web/page/code2257' /* webpackChunkName: "code2257" */));
+const OpenInDesktopPage = lazyImport(() => import('web/page/openInDesktop' /* webpackChunkName: "openInDesktop" */));
 // @endif
 
 // Chunk: "secondary"
@@ -69,7 +70,9 @@ const RewardsVerifyPage = lazyImport(() => import('page/rewardsVerify' /* webpac
 const SearchPage = lazyImport(() => import('page/search' /* webpackChunkName: "secondary" */));
 const SettingsAdvancedPage = lazyImport(() => import('page/settingsAdvanced' /* webpackChunkName: "secondary" */));
 const SettingsStripeCard = lazyImport(() => import('page/settingsStripeCard' /* webpackChunkName: "secondary" */));
-const SettingsStripeAccount = lazyImport(() => import('page/settingsStripeAccount' /* webpackChunkName: "secondary" */));
+const SettingsStripeAccount = lazyImport(() =>
+  import('page/settingsStripeAccount' /* webpackChunkName: "secondary" */)
+);
 const SettingsCreatorPage = lazyImport(() => import('page/settingsCreator' /* webpackChunkName: "secondary" */));
 const SettingsNotificationsPage = lazyImport(() =>
   import('page/settingsNotifications' /* webpackChunkName: "secondary" */)
@@ -271,6 +274,7 @@ function AppRouter(props: Props) {
         <Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
         {/* @endif */}
         {/* @if TARGET='web' */}
+        <Route path={`/$/${PAGES.OPEN_IN_DESKTOP}/:claimName/:claimId`} exact component={OpenInDesktopPage} />
         <Route path={`/$/${PAGES.CODE_2257}`} exact component={Code2257Page} />
         {/* @endif */}
         <Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />

ui/constants/icons.js

@@ -165,3 +165,4 @@ export const GLOBE = 'globe';
 export const RSS = 'rss';
 export const STAR = 'star';
 export const MUSIC = 'MusicCategory';
+export const DESKTOP = 'desktop';

ui/constants/pages.js

@@ -74,3 +74,4 @@ exports.LIVESTREAM = 'livestream';
 exports.LIVESTREAM_CURRENT = 'live';
 exports.GENERAL = 'general';
 exports.LIST = 'list';
+exports.OPEN_IN_DESKTOP = 'open';

web/page/openInDesktop/index.js

@@ -0,0 +1,6 @@
+import { connect } from 'react-redux';
+import OpenInDesktopPage from './view';
+
+const select = (state) => ({});
+
+export default connect(select, null)(OpenInDesktopPage);

web/page/openInDesktop/view.jsx

@@ -0,0 +1,67 @@
+// @flow
+import React from 'react';
+import Page from 'component/page';
+import Yrbl from 'component/yrbl';
+import Button from 'component/button';
+const { buildURI } = require('lbry-redux');
+
+const DELAY_TIME = 1500;
+
+// Landing page for opening lbry urls on external applications.
+type Props = {
+  match: {
+    params: {
+      claimId: ?string,
+      claimName: ?string,
+    },
+  },
+};
+const OpenInDesktop = (props: Props) => {
+  const { match } = props;
+  const { params } = match;
+  const [title, setTitle] = React.useState('Loading...');
+  const [claimUrl, setClaimUrl] = React.useState(null);
+
+  // Get claim url
+  React.useEffect(() => {
+    if (params) {
+      try {
+        const url = buildURI(params);
+        if (url && claimUrl !== url) {
+          setClaimUrl(url);
+        }
+      } catch {}
+    }
+  }, [params, claimUrl, setClaimUrl]);
+
+  // Open url on external application
+  React.useEffect(() => {
+    if (claimUrl) {
+      setTimeout(() => {
+        setTitle('Ready!');
+        window.open(claimUrl, '_top');
+      }, DELAY_TIME);
+    }
+  }, [claimUrl]);
+
+  return (
+    <Page>
+      <div className="main main--empty">
+        <Yrbl
+          type="happy"
+          title={__(title)}
+          subtitle={
+            <p>
+              {__('You will need an external application.')}
+              <br />
+              {__('Get lbry desktop ')}
+              <Button button="link" label={__('here!')} href="https://lbry.com/get" />
+            </p>
+          }
+        />
+      </div>
+    </Page>
+  );
+};
+
+export default OpenInDesktop;