parent
d7d8b2f39a
commit
d2a1852a8d
10 changed files with 7 additions and 134 deletions
|
@ -128,7 +128,7 @@
|
||||||
"json-loader": "^0.5.4",
|
"json-loader": "^0.5.4",
|
||||||
"lbry-format": "https://github.com/lbryio/lbry-format.git",
|
"lbry-format": "https://github.com/lbryio/lbry-format.git",
|
||||||
"lbry-redux": "lbryio/lbry-redux#9b11cfed62af7f0f8eb6fa3c88a1f8d2cce46afc",
|
"lbry-redux": "lbryio/lbry-redux#9b11cfed62af7f0f8eb6fa3c88a1f8d2cce46afc",
|
||||||
"lbryinc": "lbryio/lbryinc#1e897d2c9108848637e1915700d3ae8ce176f9f8",
|
"lbryinc": "lbryio/lbryinc#2aedf5a188f028f61c45bc7ed0c747a2d4ae453a",
|
||||||
"lint-staged": "^7.0.2",
|
"lint-staged": "^7.0.2",
|
||||||
"localforage": "^1.7.1",
|
"localforage": "^1.7.1",
|
||||||
"lodash-es": "^4.17.14",
|
"lodash-es": "^4.17.14",
|
||||||
|
|
|
@ -16,7 +16,6 @@ import { withRouter } from 'react-router';
|
||||||
import usePrevious from 'effects/use-previous';
|
import usePrevious from 'effects/use-previous';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
// @if TARGET='web'
|
// @if TARGET='web'
|
||||||
import OpenInAppLink from 'component/openInAppLink';
|
|
||||||
import YoutubeWelcome from 'component/youtubeWelcome';
|
import YoutubeWelcome from 'component/youtubeWelcome';
|
||||||
// @endif
|
// @endif
|
||||||
|
|
||||||
|
@ -200,7 +199,6 @@ function App(props: Props) {
|
||||||
|
|
||||||
{/* @if TARGET='web' */}
|
{/* @if TARGET='web' */}
|
||||||
<YoutubeWelcome />
|
<YoutubeWelcome />
|
||||||
<OpenInAppLink uri={uri} />
|
|
||||||
{/* @endif */}
|
{/* @endif */}
|
||||||
|
|
||||||
{/* @if TARGET='app' */}
|
{/* @if TARGET='app' */}
|
||||||
|
|
|
@ -1,9 +0,0 @@
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { selectUser } from 'lbryinc';
|
|
||||||
import OpenInAppLink from './view';
|
|
||||||
|
|
||||||
const select = state => ({
|
|
||||||
user: selectUser(state),
|
|
||||||
});
|
|
||||||
|
|
||||||
export default connect(select)(OpenInAppLink);
|
|
|
@ -1,81 +0,0 @@
|
||||||
// @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);
|
|
|
@ -27,7 +27,6 @@
|
||||||
@import 'component/media';
|
@import 'component/media';
|
||||||
@import 'component/menu-button';
|
@import 'component/menu-button';
|
||||||
@import 'component/modal';
|
@import 'component/modal';
|
||||||
@import 'component/nag';
|
|
||||||
@import 'component/navigation';
|
@import 'component/navigation';
|
||||||
@import 'component/pagination';
|
@import 'component/pagination';
|
||||||
@import 'component/placeholder';
|
@import 'component/placeholder';
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
.splash {
|
.splash {
|
||||||
-webkit-app-region: drag;
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
||||||
|
|
|
@ -1,36 +0,0 @@
|
||||||
.nag {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: var(--spacing-small);
|
|
||||||
background-color: var(--color-nag);
|
|
||||||
color: var(--color-white);
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nag__button {
|
|
||||||
line-height: 1;
|
|
||||||
margin-left: var(--spacing-small);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
border: 1px solid var(--color-white);
|
|
||||||
padding: var(--spacing-miniscule);
|
|
||||||
color: var(--color-white);
|
|
||||||
font-weight: var(--font-weight-bold);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-white);
|
|
||||||
color: var(--color-nag);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nag__close {
|
|
||||||
margin-left: auto;
|
|
||||||
right: var(--spacing-medium);
|
|
||||||
position: absolute;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
stroke-width: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -36,6 +36,10 @@
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&[data-selected] {
|
||||||
|
color: var(--color-link-active);
|
||||||
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,6 @@
|
||||||
--color-background--splash: #212529;
|
--color-background--splash: #212529;
|
||||||
--color-border: #ededed;
|
--color-border: #ededed;
|
||||||
--color-background-overlay: #21252980;
|
--color-background-overlay: #21252980;
|
||||||
--color-nag: #f26522;
|
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
--color-text-selection-bg: var(--color-secondary-alt);
|
--color-text-selection-bg: var(--color-secondary-alt);
|
||||||
|
|
|
@ -7074,9 +7074,9 @@ lbry-redux@lbryio/lbry-redux#9b11cfed62af7f0f8eb6fa3c88a1f8d2cce46afc:
|
||||||
reselect "^3.0.0"
|
reselect "^3.0.0"
|
||||||
uuid "^3.3.2"
|
uuid "^3.3.2"
|
||||||
|
|
||||||
lbryinc@lbryio/lbryinc#1e897d2c9108848637e1915700d3ae8ce176f9f8:
|
lbryinc@lbryio/lbryinc#2aedf5a188f028f61c45bc7ed0c747a2d4ae453a:
|
||||||
version "0.0.1"
|
version "0.0.1"
|
||||||
resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/1e897d2c9108848637e1915700d3ae8ce176f9f8"
|
resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/2aedf5a188f028f61c45bc7ed0c747a2d4ae453a"
|
||||||
dependencies:
|
dependencies:
|
||||||
reselect "^3.0.0"
|
reselect "^3.0.0"
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue