add youtube welcome message
This commit is contained in:
parent
26499e06a3
commit
e9700f24af
7 changed files with 86 additions and 0 deletions
|
@ -15,6 +15,9 @@ import FileViewer from 'component/fileViewer';
|
||||||
import { withRouter } from 'react-router';
|
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'
|
||||||
|
import YoutubeWelcome from 'component/youtubeWelcome';
|
||||||
|
// @endif
|
||||||
|
|
||||||
export const MAIN_WRAPPER_CLASS = 'main-wrapper';
|
export const MAIN_WRAPPER_CLASS = 'main-wrapper';
|
||||||
// @if TARGET='app'
|
// @if TARGET='app'
|
||||||
|
@ -194,6 +197,10 @@ function App(props: Props) {
|
||||||
<ModalRouter />
|
<ModalRouter />
|
||||||
<FileViewer pageUri={uri} />
|
<FileViewer pageUri={uri} />
|
||||||
|
|
||||||
|
{/* @if TARGET='web' */}
|
||||||
|
<YoutubeWelcome />
|
||||||
|
{/* @endif */}
|
||||||
|
|
||||||
{/* @if TARGET='app' */}
|
{/* @if TARGET='app' */}
|
||||||
{showUpgradeButton && (
|
{showUpgradeButton && (
|
||||||
<div className="snack-bar--upgrade">
|
<div className="snack-bar--upgrade">
|
||||||
|
|
10
ui/component/youtubeWelcome/index.js
Normal file
10
ui/component/youtubeWelcome/index.js
Normal file
|
@ -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);
|
24
ui/component/youtubeWelcome/view.jsx
Normal file
24
ui/component/youtubeWelcome/view.jsx
Normal file
|
@ -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;
|
|
@ -31,3 +31,4 @@ export const WALLET_SYNC = 'wallet_sync';
|
||||||
export const WALLET_PASSWORD_UNSAVE = 'wallet_password_unsave';
|
export const WALLET_PASSWORD_UNSAVE = 'wallet_password_unsave';
|
||||||
export const WALLET_SEND = 'wallet_send';
|
export const WALLET_SEND = 'wallet_send';
|
||||||
export const WALLET_RECEIVE = 'wallet_receive';
|
export const WALLET_RECEIVE = 'wallet_receive';
|
||||||
|
export const YOUTUBE_WELCOME = 'youtube_welcome';
|
||||||
|
|
|
@ -29,6 +29,7 @@ import ModalPasswordUnsave from 'modal/modalPasswordUnsave';
|
||||||
import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
|
import ModalCommentAcknowledgement from 'modal/modalCommentAcknowledgement';
|
||||||
import ModalWalletSend from 'modal/modalWalletSend';
|
import ModalWalletSend from 'modal/modalWalletSend';
|
||||||
import ModalWalletReceive from 'modal/modalWalletReceive';
|
import ModalWalletReceive from 'modal/modalWalletReceive';
|
||||||
|
import ModalYoutubeWelcome from 'modal/modalYoutubeWelcome';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
modal: { id: string, modalProps: {} },
|
modal: { id: string, modalProps: {} },
|
||||||
|
@ -105,6 +106,8 @@ function ModalRouter(props: Props) {
|
||||||
return <ModalWalletSend {...modalProps} />;
|
return <ModalWalletSend {...modalProps} />;
|
||||||
case MODALS.WALLET_RECEIVE:
|
case MODALS.WALLET_RECEIVE:
|
||||||
return <ModalWalletReceive {...modalProps} />;
|
return <ModalWalletReceive {...modalProps} />;
|
||||||
|
case MODALS.YOUTUBE_WELCOME:
|
||||||
|
return <ModalYoutubeWelcome />;
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
14
ui/modal/modalYoutubeWelcome/index.js
Normal file
14
ui/modal/modalYoutubeWelcome/index.js
Normal file
|
@ -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);
|
27
ui/modal/modalYoutubeWelcome/view.jsx
Normal file
27
ui/modal/modalYoutubeWelcome/view.jsx
Normal file
|
@ -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;
|
Loading…
Add table
Reference in a new issue