82 lines
2.3 KiB
React
82 lines
2.3 KiB
React
|
// @flow
|
||
|
import * as ICONS from 'constants/icons';
|
||
|
import * as PAGES from 'constants/pages';
|
||
|
import React from 'react';
|
||
|
import Button from 'component/button';
|
||
|
import { withRouter } from 'react-router';
|
||
|
import userPersistedState from 'effects/use-persisted-state';
|
||
|
|
||
|
const userAgent = navigator.userAgent.toLowerCase();
|
||
|
const isAndroid = userAgent.includes('android');
|
||
|
const isDesktop = typeof window.orientation === 'undefined';
|
||
|
|
||
|
type Props = {
|
||
|
history: { replace: string => void },
|
||
|
location: { search: string, pathname: string },
|
||
|
uri: string,
|
||
|
user: ?User,
|
||
|
};
|
||
|
|
||
|
function OpenInAppLink(props: Props) {
|
||
|
const {
|
||
|
history: { replace },
|
||
|
location,
|
||
|
uri,
|
||
|
user,
|
||
|
} = props;
|
||
|
const { pathname, search } = location;
|
||
|
let params = new URLSearchParams(search);
|
||
|
const hasSrcParam = params.get('src');
|
||
|
const initialShouldShowNag = hasSrcParam && (isAndroid || isDesktop);
|
||
|
const isWebUserOnly =
|
||
|
user && !user.device_types.some(usedDevice => usedDevice === 'mobile' || usedDevice === 'desktop');
|
||
|
const [hideNagForGood, setHideNagForGood] = userPersistedState('open-in-app-nag', false);
|
||
|
const [showNag, setShowNag] = React.useState(initialShouldShowNag);
|
||
|
let appLink = uri;
|
||
|
|
||
|
if (!appLink) {
|
||
|
// If there is no uri, the user is on an internal page
|
||
|
// pathname will either be "/" or "/$/{page}"
|
||
|
const path = pathname.startsWith('/$/') ? pathname.slice(3) : pathname.slice(1);
|
||
|
appLink = `lbry://?${path || PAGES.DISCOVER}`;
|
||
|
|
||
|
if (search) {
|
||
|
// We already have a leading "?" for the query param on internal pages
|
||
|
appLink += search.replace('?', '&');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function handleClose() {
|
||
|
if (!isWebUserOnly) {
|
||
|
setHideNagForGood(true);
|
||
|
}
|
||
|
|
||
|
setShowNag(false);
|
||
|
}
|
||
|
|
||
|
React.useEffect(() => {
|
||
|
if (hasSrcParam) {
|
||
|
params.delete('src');
|
||
|
const newParams = params.toString();
|
||
|
const newUrl = `${pathname}?${newParams}`;
|
||
|
replace(newUrl);
|
||
|
}
|
||
|
}, [search, pathname, replace]);
|
||
|
|
||
|
if (!showNag || hideNagForGood) {
|
||
|
return null;
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<div className="nag">
|
||
|
{__('The app is like, better.')}
|
||
|
<Button className="nag__button" href={appLink}>
|
||
|
{__('Use The App')}
|
||
|
</Button>
|
||
|
<Button className="nag__button nag__close" icon={ICONS.REMOVE} onClick={handleClose} />
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export default withRouter(OpenInAppLink);
|