add youtube welcome message

ui/component/app/view.jsx

@@ -15,6 +15,9 @@ import FileViewer from 'component/fileViewer';
 import { withRouter } from 'react-router';
 import usePrevious from 'effects/use-previous';
 import Button from 'component/button';
+// @if TARGET='web'
+import YoutubeWelcome from 'component/youtubeWelcome';
+// @endif
 
 export const MAIN_WRAPPER_CLASS = 'main-wrapper';
 // @if TARGET='app'
@@ -194,6 +197,10 @@ function App(props: Props) {
       <ModalRouter />
       <FileViewer pageUri={uri} />
 
+      {/* @if TARGET='web' */}
+      <YoutubeWelcome />
+      {/* @endif */}
+
       {/* @if TARGET='app' */}
       {showUpgradeButton && (
         <div className="snack-bar--upgrade">

ui/component/youtubeWelcome/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { doOpenModal } from 'redux/actions/app';
+import YoutubeWelcome from './view';
+
+export default connect(
+  null,
+  {
+    doOpenModal,
+  }
+)(YoutubeWelcome);

ui/component/youtubeWelcome/view.jsx

@@ -0,0 +1,24 @@
+// @flow
+import * as MODALS from 'constants/modal_types';
+import React from 'react';
+import usePersistedState from 'effects/use-persisted-state';
+
+type Props = { doOpenModal: string => void };
+
+const YoutubeWelcome = (props: Props) => {
+  const { doOpenModal } = props;
+  const [hasBeenShownIntro, setHasBeenShownIntro] = usePersistedState('youtube-welcome', false);
+  const isYouTubeReferrer = document.referrer.includes('youtube.com');
+  const shouldShowWelcome = !hasBeenShownIntro && isYouTubeReferrer;
+
+  React.useEffect(() => {
+    if (shouldShowWelcome) {
+      doOpenModal(MODALS.YOUTUBE_WELCOME);
+      setHasBeenShownIntro(true);
+    }
+  }, [shouldShowWelcome, setHasBeenShownIntro, doOpenModal]);
+
+  return null;
+};
+
+export default YoutubeWelcome;

ui/constants/modal_types.js

@@ -31,3 +31,4 @@ export const WALLET_SYNC = 'wallet_sync';
 export const WALLET_PASSWORD_UNSAVE = 'wallet_password_unsave';
 export const WALLET_SEND = 'wallet_send';
 export const WALLET_RECEIVE = 'wallet_receive';
+export const YOUTUBE_WELCOME = 'youtube_welcome';

ui/modal/modalRouter/view.jsx

@@ -29,6 +29,7 @@ import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
 import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
 import ModalWalletSend from 'modal/modalWalletSend';
 import ModalWalletReceive from 'modal/modalWalletReceive';
+import ModalYoutubeWelcome from 'modal/modalYoutubeWelcome';
 
 type Props = {
   modal: { id: string, modalProps: {} },
@@ -105,6 +106,8 @@ function ModalRouter(props: Props) {
       return <ModalWalletSend {...modalProps} />;
     case MODALS.WALLET_RECEIVE:
       return <ModalWalletReceive {...modalProps} />;
+    case MODALS.YOUTUBE_WELCOME:
+      return <ModalYoutubeWelcome />;
     default:
       return null;
   }

ui/modal/modalYoutubeWelcome/index.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import WalletSend from './view';
+
+const select = state => ({});
+
+const perform = {
+  doHideModal,
+};
+
+export default connect(
+  select,
+  perform
+)(WalletSend);

ui/modal/modalYoutubeWelcome/view.jsx

@@ -0,0 +1,27 @@
+// @flow
+import React from 'react';
+import { Modal } from 'modal/modal';
+import Card from 'component/common/card';
+import Confetti from 'react-confetti';
+import Button from 'component/button';
+
+type Props = { doHideModal: () => void };
+
+const YoutubeWelcome = (props: Props) => {
+  const { doHideModal } = props;
+
+  return (
+    <Modal isOpen type="card" onAborted={doHideModal}>
+      <Confetti recycle={false} style={{ position: 'fixed' }} numberOfPieces={100} />
+      <Card
+        title={__('Welcome To The Promise Land')}
+        subtitle={__(
+          'Looks like you are coming from YouTube, some funny pun or something that introduces them to LBRY.'
+        )}
+        actions={<Button button="primary" label={__('Get To The Goods')} onClick={doHideModal} />}
+      />
+    </Modal>
+  );
+};
+
+export default YoutubeWelcome;