-
-
- {__(
- `LBRY takes privacy and choice seriously. Just a few questions before you enter the land of content freedom.`
+
{__('Welcome')}
-
- {__(
- `LBRY takes privacy and choice seriously. Just a few questions before you enter the land of content freedom.`
+
+
+
+ {__('Privacy')}
+
+ {__(
+ `LBRY takes privacy and choice seriously. Is it ok if we monitor performance and help creators track their views?`
+ )}
+
+
+
-
+
-
-
- {__('Can this app send information about your usage to inform publishers and improve the software?')}
-
-
);
}
diff --git a/ui/component/welcomeSplash/index.js b/ui/component/welcomeSplash/index.js
new file mode 100644
index 000000000..e463615c1
--- /dev/null
+++ b/ui/component/welcomeSplash/index.js
@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import { doSetDaemonSetting } from 'redux/actions/settings';
+import { doSetWelcomeVersion } from 'redux/actions/app';
+import * as DAEMON_SETTINGS from 'constants/daemon_settings';
+import { WELCOME_VERSION } from 'config.js';
+import { selectUserVerifiedEmail } from 'redux/selectors/user';
+import { selectDaemonSettings, selectDaemonStatus } from 'redux/selectors/settings';
+
+import WelcomeSplash from './view';
+import { selectDiskSpace } from 'redux/selectors/app';
+
+const select = (state) => ({
+ authenticated: selectUserVerifiedEmail(state),
+ diskSpace: selectDiskSpace(state),
+ daemonSettings: selectDaemonSettings(state),
+ daemonStatus: selectDaemonStatus(state),
+});
+
+const perform = (dispatch) => ({
+ setWelcomeVersion: (version) => dispatch(doSetWelcomeVersion(version || WELCOME_VERSION)),
+ setShareDataInternal: (share) => dispatch(doSetDaemonSetting(DAEMON_SETTINGS.SHARE_USAGE_DATA, share)),
+ setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(DAEMON_SETTINGS.BLOB_STORAGE_LIMIT_MB, value)),
+});
+
+export default connect(select, perform)(WelcomeSplash);
diff --git a/ui/component/welcomeSplash/view.jsx b/ui/component/welcomeSplash/view.jsx
new file mode 100644
index 000000000..ca3e3bbda
--- /dev/null
+++ b/ui/component/welcomeSplash/view.jsx
@@ -0,0 +1,49 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import { withRouter } from 'react-router-dom';
+import I18nMessage from 'component/i18nMessage';
+// $FlowFixMe cannot resolve ...
+import YrblHappy from 'static/img/yrblhappy.svg';
+
+type Props = {
+ setWelcomeVersion: (number) => void,
+ setShareDataInternal: (boolean) => void,
+ authenticated: boolean,
+ handleNextPage: () => void,
+ diskSpace?: DiskSpace,
+};
+
+function WelcomePage(props: Props) {
+ const { handleNextPage } = props;
+
+ return (
+
+
+
+ {__('Welcome')}
+
+ {__(`You've entered the land of content freedom! Let's make sure everything is ship shape.`)}
+
+
+
+ 
+
+
+
+
+
+
+
+
+ );
+}
+
+export default withRouter(WelcomePage);
diff --git a/ui/component/yrbl/index.jsx b/ui/component/yrbl/index.jsx
index 44af157be..48b627d3c 100644
--- a/ui/component/yrbl/index.jsx
+++ b/ui/component/yrbl/index.jsx
@@ -2,7 +2,10 @@
import type { Node } from 'react';
import * as React from 'react';
import classnames from 'classnames';
-import { YRBL_HAPPY_IMG_URL, YRBL_SAD_IMG_URL } from 'config';
+// $FlowFixMe cannot resolve ...
+import YrblHappy from 'static/img/yrblhappy.svg';
+// $FlowFixMe cannot resolve ...
+import YrblSad from 'static/img/yrblsad.svg';
type Props = {
title?: string,
@@ -14,8 +17,8 @@ type Props = {
};
const yrblTypes = {
- happy: YRBL_HAPPY_IMG_URL,
- sad: YRBL_SAD_IMG_URL,
+ happy: YrblHappy,
+ sad: YrblSad,
};
export default class extends React.PureComponent {
diff --git a/ui/page/welcome/index.js b/ui/page/welcome/index.js
index 860215821..ab1c8a3b7 100644
--- a/ui/page/welcome/index.js
+++ b/ui/page/welcome/index.js
@@ -1,10 +1,16 @@
import { connect } from 'react-redux';
import Welcome from './view';
+import { doSetWelcomeVersion } from 'redux/actions/app';
+import { WELCOME_VERSION } from 'config';
+import { selectDaemonSettings, selectDaemonStatus } from 'redux/selectors/settings';
-const select = () => ({});
-const perform = () => ({});
+const select = (state) => ({
+ daemonSettings: selectDaemonSettings(state),
+ daemonStatus: selectDaemonStatus(state),
+});
-export default connect(
- select,
- perform
-)(Welcome);
+const perform = (dispatch) => ({
+ updateWelcomeVersion: (version) => dispatch(doSetWelcomeVersion(version || WELCOME_VERSION)),
+});
+
+export default connect(select, perform)(Welcome);
diff --git a/ui/page/welcome/view.jsx b/ui/page/welcome/view.jsx
index c5a794a40..015f9db46 100644
--- a/ui/page/welcome/view.jsx
+++ b/ui/page/welcome/view.jsx
@@ -1,12 +1,62 @@
// @flow
import React from 'react';
import PrivacyAgreement from 'component/privacyAgreement';
+import WelcomeSplash from 'component/welcomeSplash';
import Page from 'component/page';
+import { useHistory } from 'react-router-dom';
+
+const SPLASH_PAGE = 0;
+const PRIVACY_PAGE = 1;
+// const HOSTING_PAGE = 2;
+// const WELCOME_PAGES = [SPLASH_PAGE, PRIVACY_PAGE];
+type DaemonStatus = {
+ disk_space: {
+ content_blobs_storage_used_mb: string,
+ published_blobs_storage_used_mb: string,
+ running: true,
+ seed_blobs_storage_used_mb: string,
+ total_used_mb: string,
+ },
+};
+
+type DaemonSettings = {
+ download_dir: string,
+ share_usage_data: boolean,
+ max_connections_per_download?: number,
+ save_files: boolean,
+ save_blobs: boolean,
+ ffmpeg_path: string,
+};
+
+type Props = {
+ // --- select ---
+ daemonSettings: DaemonSettings,
+ daemonStatus: DaemonStatus,
+ // -- perform ---
+ updateWelcomeVersion: () => void,
+};
+export default function Welcome(props: Props) {
+ const { updateWelcomeVersion } = props;
+ // const { save_blobs: saveBlobs } = daemonSettings || {};
+ const [welcomePage, setWelcomePage] = React.useState(SPLASH_PAGE);
+ const { replace } = useHistory();
+
+ const handleNextPage = () => {
+ if (welcomePage === SPLASH_PAGE) {
+ setWelcomePage(PRIVACY_PAGE);
+ }
+ };
+
+ const handleDone = () => {
+ updateWelcomeVersion();
+ replace('/');
+ };
-export default function Welcome() {
return (
-
);
}
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 9deafe5b0..392ee8533 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -70,3 +70,4 @@
@import 'component/utils';
@import 'component/settings';
@import 'component/embed-player';
+@import 'component/first-run';
diff --git a/ui/scss/component/_first-run.scss b/ui/scss/component/_first-run.scss
new file mode 100644
index 000000000..e238e51c6
--- /dev/null
+++ b/ui/scss/component/_first-run.scss
@@ -0,0 +1,35 @@
+.first-run__image-wrapper {
+ .privacy-img {
+ min-width: 100%;
+ height: 30vh;
+ }
+ height: 100%;
+}
+
+.first-run__wrapper {
+ margin: auto;
+ .first-run__left {
+ min-height: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+}
+
+.first-run__actions {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ @media (min-width: $breakpoint-small) {
+ justify-content: flex-start;
+ :not(:first-child) {
+ margin-left: var(--spacing-s);
+ }
+ }
+}
+
+.first-run__code {
+ padding: var(--spacing-s);
+ background-color: var(--color-card-background);
+}
+
-
+
+
{__('Privacy')}
++ {__( + `LBRY takes privacy and choice seriously. Is it ok if we monitor performance and help creators track their views?` + )} +
+
+
- -
- {__('Can this app send information about your usage to inform publishers and improve the software?')} -
- ); } diff --git a/ui/component/welcomeSplash/index.js b/ui/component/welcomeSplash/index.js new file mode 100644 index 000000000..e463615c1 --- /dev/null +++ b/ui/component/welcomeSplash/index.js @@ -0,0 +1,25 @@ +import { connect } from 'react-redux'; +import { doSetDaemonSetting } from 'redux/actions/settings'; +import { doSetWelcomeVersion } from 'redux/actions/app'; +import * as DAEMON_SETTINGS from 'constants/daemon_settings'; +import { WELCOME_VERSION } from 'config.js'; +import { selectUserVerifiedEmail } from 'redux/selectors/user'; +import { selectDaemonSettings, selectDaemonStatus } from 'redux/selectors/settings'; + +import WelcomeSplash from './view'; +import { selectDiskSpace } from 'redux/selectors/app'; + +const select = (state) => ({ + authenticated: selectUserVerifiedEmail(state), + diskSpace: selectDiskSpace(state), + daemonSettings: selectDaemonSettings(state), + daemonStatus: selectDaemonStatus(state), +}); + +const perform = (dispatch) => ({ + setWelcomeVersion: (version) => dispatch(doSetWelcomeVersion(version || WELCOME_VERSION)), + setShareDataInternal: (share) => dispatch(doSetDaemonSetting(DAEMON_SETTINGS.SHARE_USAGE_DATA, share)), + setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(DAEMON_SETTINGS.BLOB_STORAGE_LIMIT_MB, value)), +}); + +export default connect(select, perform)(WelcomeSplash); diff --git a/ui/component/welcomeSplash/view.jsx b/ui/component/welcomeSplash/view.jsx new file mode 100644 index 000000000..ca3e3bbda --- /dev/null +++ b/ui/component/welcomeSplash/view.jsx @@ -0,0 +1,49 @@ +// @flow +import React from 'react'; +import Button from 'component/button'; +import { withRouter } from 'react-router-dom'; +import I18nMessage from 'component/i18nMessage'; +// $FlowFixMe cannot resolve ... +import YrblHappy from 'static/img/yrblhappy.svg'; + +type Props = { + setWelcomeVersion: (number) => void, + setShareDataInternal: (boolean) => void, + authenticated: boolean, + handleNextPage: () => void, + diskSpace?: DiskSpace, +}; + +function WelcomePage(props: Props) { + const { handleNextPage } = props; + + return ( +
+
+
+
+ {__('Welcome')}
++ {__(`You've entered the land of content freedom! Let's make sure everything is ship shape.`)} +
+
+
+
+
+
+
+
+