add open in app link

package.json

@@ -128,7 +128,7 @@
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
     "lbry-redux": "lbryio/lbry-redux#9b11cfed62af7f0f8eb6fa3c88a1f8d2cce46afc",
-    "lbryinc": "lbryio/lbryinc#2aedf5a188f028f61c45bc7ed0c747a2d4ae453a",
+    "lbryinc": "lbryio/lbryinc#1e897d2c9108848637e1915700d3ae8ce176f9f8",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
     "lodash-es": "^4.17.14",

ui/component/app/view.jsx

@@ -16,6 +16,7 @@ import { withRouter } from 'react-router';
 import usePrevious from 'effects/use-previous';
 import Button from 'component/button';
 // @if TARGET='web'
+import OpenInAppLink from 'component/openInAppLink';
 import YoutubeWelcome from 'component/youtubeWelcome';
 // @endif
 
@@ -199,6 +200,7 @@ function App(props: Props) {
 
       {/* @if TARGET='web' */}
       <YoutubeWelcome />
+      <OpenInAppLink uri={uri} />
       {/* @endif */}
 
       {/* @if TARGET='app' */}

ui/component/openInAppLink/index.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import { selectUser } from 'lbryinc';
+import OpenInAppLink from './view';
+
+const select = state => ({
+  user: selectUser(state),
+});
+
+export default connect(select)(OpenInAppLink);

ui/component/openInAppLink/view.jsx

@@ -0,0 +1,81 @@
+// @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);

ui/scss/all.scss

@@ -27,6 +27,7 @@
 @import 'component/media';
 @import 'component/menu-button';
 @import 'component/modal';
+@import 'component/nag';
 @import 'component/navigation';
 @import 'component/pagination';
 @import 'component/placeholder';

ui/scss/component/_splash.scss

@@ -1,4 +1,5 @@
 .splash {
+  -webkit-app-region: drag;
   width: 100vw;
   height: 100vh;
 

ui/scss/component/nag.scss

@@ -0,0 +1,36 @@
+.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;
+  }
+}

ui/scss/component/tabs.scss

@@ -36,10 +36,6 @@
     content: '';
   }
 
-  &[data-selected] {
-    color: var(--color-link-active);
-  }
-
   &:focus {
     box-shadow: none;
   }

ui/scss/themes/light.scss

@@ -9,6 +9,7 @@
   --color-background--splash: #212529;
   --color-border: #ededed;
   --color-background-overlay: #21252980;
+  --color-nag: #f26522;
 
   // Text
   --color-text-selection-bg: var(--color-secondary-alt);

yarn.lock

@@ -7074,9 +7074,9 @@ lbry-redux@lbryio/lbry-redux#9b11cfed62af7f0f8eb6fa3c88a1f8d2cce46afc:
     reselect "^3.0.0"
     uuid "^3.3.2"
 
-lbryinc@lbryio/lbryinc#2aedf5a188f028f61c45bc7ed0c747a2d4ae453a:
+lbryinc@lbryio/lbryinc#1e897d2c9108848637e1915700d3ae8ce176f9f8:
   version "0.0.1"
-  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/2aedf5a188f028f61c45bc7ed0c747a2d4ae453a"
+  resolved "https://codeload.github.com/lbryio/lbryinc/tar.gz/1e897d2c9108848637e1915700d3ae8ce176f9f8"
   dependencies:
     reselect "^3.0.0"