init Open in desktop #6659

ui/component/claimMenuList/view.jsx

@@ -229,6 +229,11 @@ function ClaimMenuList(props: Props) {
     push(`/$/${PAGES.REPORT_CONTENT}?claimId=${contentClaim && contentClaim.claim_id}`);
   }
 
+  function openInDesktop() {
+    // $FlowFixMe
+    window.open(`/$/${PAGES.OPEN_IN_DESKTOP}/${contentClaim.name}/${contentClaim.claim_id}`, '_blank');
+  }
+
   return (
     <Menu>
       <MenuButton
@@ -411,6 +416,15 @@ function ClaimMenuList(props: Props) {
           </MenuItem>
         )}
 
+        {IS_WEB && (
+          <MenuItem className="comment__menu-option" onSelect={openInDesktop}>
+            <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,54 @@
+// @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');
+
+// 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...');
+
+  React.useEffect(() => {
+    if (params) {
+      try {
+        const url = buildURI(params);
+        setTimeout(() => {
+          setTitle('Ready!');
+          window.open(url, '_top');
+        }, 1500);
+      } catch {}
+    }
+  }, [params]);
+
+  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;