From 34890717abe88285e604822e1995635baead3994 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sat, 7 Aug 2021 23:57:32 -0500 Subject: [PATCH 1/4] init Open in desktop #6659 --- ui/component/claimMenuList/view.jsx | 14 ++++++++ ui/component/common/icon-custom.jsx | 7 ++++ ui/component/router/view.jsx | 6 +++- ui/constants/icons.js | 1 + ui/constants/pages.js | 1 + web/page/openInDesktop/index.js | 6 ++++ web/page/openInDesktop/view.jsx | 54 +++++++++++++++++++++++++++++ 7 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 web/page/openInDesktop/index.js create mode 100644 web/page/openInDesktop/view.jsx diff --git a/ui/component/claimMenuList/view.jsx b/ui/component/claimMenuList/view.jsx index 0b939360d..7ce04aa30 100644 --- a/ui/component/claimMenuList/view.jsx +++ b/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 ( )} + {IS_WEB && ( + +
+ + {__('Open in desktop')} +
+ + )} + {!claimIsMine && !isMyCollection && (
diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx index 27bcf99fb..a9dd7df43 100644 --- a/ui/component/common/icon-custom.jsx +++ b/ui/component/common/icon-custom.jsx @@ -2331,4 +2331,11 @@ export const icons = { ), + [ICONS.DESKTOP]: buildIcon( + + + + + + ), }; diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx index 1e2631970..78bf41db2 100644 --- a/ui/component/router/view.jsx +++ b/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) { {/* @endif */} {/* @if TARGET='web' */} + {/* @endif */} diff --git a/ui/constants/icons.js b/ui/constants/icons.js index db057e8f1..2613fe156 100644 --- a/ui/constants/icons.js +++ b/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'; diff --git a/ui/constants/pages.js b/ui/constants/pages.js index 7a2bf87f7..ed088eb67 100644 --- a/ui/constants/pages.js +++ b/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'; diff --git a/web/page/openInDesktop/index.js b/web/page/openInDesktop/index.js new file mode 100644 index 000000000..889d1ee0f --- /dev/null +++ b/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); diff --git a/web/page/openInDesktop/view.jsx b/web/page/openInDesktop/view.jsx new file mode 100644 index 000000000..ae9f700c8 --- /dev/null +++ b/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 ( + +
+ + {__('You will need an external application.')} +
+ {__('Get lbry desktop ')} +
+ + ); +}; + +export default OpenInDesktop; -- 2.45.2 From 47f7d0c7e3ddba1678b2fa49155e261ca6d7443a Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 8 Aug 2021 00:12:39 -0500 Subject: [PATCH 2/4] minor fixes --- ui/component/claimMenuList/view.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/ui/component/claimMenuList/view.jsx b/ui/component/claimMenuList/view.jsx index 7ce04aa30..24e984e13 100644 --- a/ui/component/claimMenuList/view.jsx +++ b/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,7 +231,7 @@ function ClaimMenuList(props: Props) { push(`/$/${PAGES.REPORT_CONTENT}?claimId=${contentClaim && contentClaim.claim_id}`); } - function openInDesktop() { + function handleOpenInDesktop() { // $FlowFixMe window.open(`/$/${PAGES.OPEN_IN_DESKTOP}/${contentClaim.name}/${contentClaim.claim_id}`, '_blank'); } @@ -416,11 +418,11 @@ function ClaimMenuList(props: Props) { )} - {IS_WEB && ( - + {IS_WEB && !isMobile && ( +
- {__('Open in desktop')} + {__('Open in Desktop')}
)} -- 2.45.2 From 6e2bab4175c685f68682af23b39002cac496ac19 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 8 Aug 2021 00:48:03 -0500 Subject: [PATCH 3/4] stop calling window.open multiple times --- web/page/openInDesktop/view.jsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/web/page/openInDesktop/view.jsx b/web/page/openInDesktop/view.jsx index ae9f700c8..797e8d16a 100644 --- a/web/page/openInDesktop/view.jsx +++ b/web/page/openInDesktop/view.jsx @@ -18,18 +18,29 @@ 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); - setTimeout(() => { - setTitle('Ready!'); - window.open(url, '_top'); - }, 1500); + if (url && claimUrl !== url) { + setClaimUrl(url); + } } catch {} } - }, [params]); + }, [params, claimUrl, setClaimUrl]); + + // Open url on external application + React.useEffect(() => { + if (claimUrl) { + setTimeout(() => { + setTitle('Ready!'); + window.open(claimUrl, '_top'); + }, 1500); + } + }, [claimUrl]); return ( -- 2.45.2 From dd8a27f6d062372d91aecc992eddaa71b5d20960 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Sun, 8 Aug 2021 00:59:41 -0500 Subject: [PATCH 4/4] use constant for redirection delay time --- web/page/openInDesktop/view.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/page/openInDesktop/view.jsx b/web/page/openInDesktop/view.jsx index 797e8d16a..ebda19a3f 100644 --- a/web/page/openInDesktop/view.jsx +++ b/web/page/openInDesktop/view.jsx @@ -5,6 +5,8 @@ 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: { @@ -38,7 +40,7 @@ const OpenInDesktop = (props: Props) => { setTimeout(() => { setTitle('Ready!'); window.open(claimUrl, '_top'); - }, 1500); + }, DELAY_TIME); } }, [claimUrl]); -- 2.45.2