improve open in app link for existing LBRY users

lbrytv/component/openInAppLink/view.jsx

@@ -0,0 +1,85 @@
+// @flow
+import React from 'react';
+import { withRouter } from 'react-router';
+import { formatWebUrlIntoLbryUrl } from 'util/url';
+import Nag from 'component/common/nag';
+
+const userAgent = navigator.userAgent.toLowerCase();
+const isAndroidDevice = userAgent.includes('android');
+const isDesktopDevice = typeof window.orientation === 'undefined';
+
+type Props = {
+  history: { replace: string => void, push: string => void },
+  location: { search: string, pathname: string },
+  uri: string,
+  user: ?User,
+};
+
+function OpenInAppLink(props: Props) {
+  const {
+    history: { replace },
+    location,
+    uri,
+    user,
+  } = props;
+  const [showNag, setShowNag] = React.useState(false);
+  const { pathname, search } = location;
+  let params = new URLSearchParams(search);
+  const hasSrcParam = params.get('src');
+  let isAndroidUser = false;
+  let isDesktopUser = false;
+  user &&
+    user.device_types &&
+    user.device_types.forEach(usedDevice => {
+      if (usedDevice === 'mobile') {
+        isAndroidUser = true;
+      } else if (usedDevice === 'desktop') {
+        isDesktopUser = true;
+      }
+    });
+  const isWebUserOnly = !isAndroidUser && !isDesktopUser;
+
+  let appLink = uri;
+  if (!appLink) {
+    appLink = formatWebUrlIntoLbryUrl(pathname, search);
+  }
+
+  function handleClose() {
+    setShowNag(false);
+  }
+
+  React.useEffect(() => {
+    if (hasSrcParam) {
+      params.delete('src');
+      const newParams = params.toString();
+      const newUrl = `${pathname}?${newParams}`;
+      replace(newUrl);
+    }
+  }, [hasSrcParam, search, pathname, replace]);
+
+  React.useEffect(() => {
+    if (hasSrcParam && ((!showNag && isAndroidUser && isAndroidDevice) || (isDesktopUser && isDesktopDevice))) {
+      setShowNag(true);
+    }
+    // Don't pass hasSrcParam into this effect because we only want the initial value
+    // If the param is removed from the url, the nag should still be shown
+  }, [showNag, setShowNag, isAndroidUser, isDesktopUser]);
+
+  if (!showNag || isWebUserOnly) {
+    return null;
+  }
+
+  return (
+    <Nag
+      type="helpful"
+      message={__('It looks like you may have LBRY %platform% installed.', {
+        platform: isDesktopDevice ? __('Desktop') : __('Android'),
+      })}
+      actionText={__('Use the App')}
+      href={appLink}
+      onClose={handleClose}
+    />
+  );
+}
+
+export default withRouter(OpenInAppLink);

lbrytv/component/youtubeReferralWelcome/index.js

@@ -7,9 +7,6 @@ const select = state => ({
   user: selectUser(state),
 });
 
-export default connect(
-  select,
-  {
-    doOpenModal,
-  }
-)(YoutubeWelcome);
+export default connect(select, {
+  doOpenModal,
+})(YoutubeWelcome);

ui/component/app/view.jsx

@@ -17,8 +17,8 @@ import Nag from 'component/common/nag';
 import { rewards as REWARDS } from 'lbryinc';
 import usePersistedState from 'effects/use-persisted-state';
 // @if TARGET='web'
-import OpenInAppLink from 'component/openInAppLink';
-import YoutubeWelcome from 'component/youtubeWelcome';
+import OpenInAppLink from 'lbrytv/component/openInAppLink';
+import YoutubeWelcome from 'lbrytv/component/youtubeReferralWelcome';
 import NagDegradedPerformance from 'lbrytv/component/nag-degraded-performance';
 import NagDataCollection from 'lbrytv/component/nag-data-collection';
 // @endif

ui/component/openInAppLink/view.jsx

@@ -1,68 +0,0 @@
-// @flow
-import React from 'react';
-import { withRouter } from 'react-router';
-import userPersistedState from 'effects/use-persisted-state';
-import { formatWebUrlIntoLbryUrl } from 'util/url';
-import Nag from 'component/common/nag';
-
-const userAgent = navigator.userAgent.toLowerCase();
-const isAndroid = userAgent.includes('android');
-const isDesktop = typeof window.orientation === 'undefined';
-
-type Props = {
-  history: { replace: string => void, push: 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 &&
-    !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) {
-    appLink = formatWebUrlIntoLbryUrl(pathname, search);
-  }
-
-  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 (
-    <Nag message={__('Want even more freedom?')} actionText={__('Use the App')} href={appLink} onClose={handleClose} />
-  );
-}
-
-export default withRouter(OpenInAppLink);