diff --git a/ui/component/claimMenuList/view.jsx b/ui/component/claimMenuList/view.jsx index 0b939360d..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,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 ( )} + {IS_WEB && !isMobile && ( + +
+ + {__('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..ebda19a3f --- /dev/null +++ b/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 ( + +
+ + {__('You will need an external application.')} +
+ {__('Get lbry desktop ')} +
+ + ); +}; + +export default OpenInDesktop;