diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5bdc2e57b..63f592cf8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,23 +8,24 @@ Web UI version numbers should always match the corresponding version of LBRY App
## [Unreleased]
### Added
- * Added a new component, `FormFieldPrice` which is now used in Publish and Settings
- * Added wallet backup guide reference
- * Added feature: forward history
- *
+ * Added a forward button and improved history behavior. Back/forward disable when unusable.
+ * Added a new component, `FormFieldPrice` which is now used in Publish and Settings.
+ * Added wallet backup guide reference.
### Changed
* Updated to daemon [0.15](https://github.com/lbryio/lbry/releases). Most relevant changes for app are improved announcing of content and a fix for the daemon getting stuck running.
- * Some form field refactoring as we progress towards form sanity.
+ * Continued to refine first-run process, process for new users, and introducing people to LBRY and LBRY credits.
+ * Changed the default price settings.
* When an "Open" button is clicked on a show page, if the file fails to open, the app will try to open the file's folder.
- * Removed confusing placeholder text from email input
- * Updated several packages and fixed warnings in build process (all but the [fsevents warning](https://github.com/yarnpkg/yarn/issues/3738), which is rather dramatic)
+ * Some form field refactoring as we take baby steps towards form sanity.
+ * Replaced confusing placeholder text from email input.
+ * Refactored modal and settings logic.
+ * Updated several packages and fixed warnings in build process (all but the [fsevents warning](https://github.com/yarnpkg/yarn/issues/3738), which is a rather dramatic debate)
### Fixed
* Tiles will no longer be blurry on hover (Windows only bug)
* Removed placeholder values from price selection form fields, which was causing confusion that these were real values (#426)
* Fixed showing "other currency" help tip in publish form, which was caused due to not "setting" state for price
- * Now using setState in formFieldPrice
* Public page now properly checks for all required fields are filled
* Fixed pagination styling for pages > 5 (#416)
* Fixed sizing on squat videos (#419)
diff --git a/ui/js/app.js b/ui/js/app.js
index c5bfdcfbd..2504b72e8 100644
--- a/ui/js/app.js
+++ b/ui/js/app.js
@@ -1,12 +1,13 @@
import store from "store.js";
import lbry from "./lbry.js";
+import * as settings from "constants/settings";
const env = ENV;
const config = {
...require(`./config/${env}`),
};
-const language = lbry.getClientSetting("language")
- ? lbry.getClientSetting("language")
+const language = lbry.getClientSetting(settings.LANGUAGE)
+ ? lbry.getClientSetting(settings.LANGUAGE)
: "en";
const i18n = require("y18n")({
directory: "app/locales",
diff --git a/ui/js/component/app/view.jsx b/ui/js/component/app/view.jsx
index e8ebbcd09..32cb74247 100644
--- a/ui/js/component/app/view.jsx
+++ b/ui/js/component/app/view.jsx
@@ -1,15 +1,8 @@
import React from "react";
-import Router from "component/router";
+import Router from "component/router/index";
import Header from "component/header";
-import ModalError from "component/modalError";
-import ModalAuthFailure from "component/modalAuthFailure";
-import ModalDownloading from "component/modalDownloading";
-import ModalInsufficientCredits from "component/modalInsufficientCredits";
-import ModalUpgrade from "component/modalUpgrade";
-import ModalWelcome from "component/modalWelcome";
-import ModalFirstReward from "component/modalFirstReward";
+import ModalRouter from "modal/modalRouter";
import lbry from "lbry";
-import * as modals from "constants/modal_types";
class App extends React.PureComponent {
componentWillMount() {
@@ -34,50 +27,23 @@ class App extends React.PureComponent {
fetchRewardedContent();
- this.showWelcome(this.props);
-
this.scrollListener = () => this.props.recordScroll(window.scrollY);
window.addEventListener("scroll", this.scrollListener);
}
- componentWillReceiveProps(nextProps) {
- this.showWelcome(nextProps);
- }
-
- showWelcome(props) {
- const { isWelcomeAcknowledged, openWelcomeModal, user } = props;
-
- if (
- !isWelcomeAcknowledged &&
- user &&
- !user.is_reward_approved &&
- !user.is_identity_verified
- ) {
- openWelcomeModal();
- }
- }
-
componentWillUnmount() {
window.removeEventListener("scroll", this.scrollListener);
}
render() {
- const { modal } = this.props;
-
return (
- {modal == modals.UPGRADE &&
}
- {modal == modals.DOWNLOADING &&
}
- {modal == modals.ERROR &&
}
- {modal == modals.INSUFFICIENT_CREDITS &&
}
- {modal == modals.WELCOME &&
}
- {modal == modals.FIRST_REWARD &&
}
- {modal == modals.AUTHENTICATION_FAILURE &&
}
+
);
}
diff --git a/ui/js/component/fileActions/view.jsx b/ui/js/component/fileActions/view.jsx
index df624a345..7b3463d3d 100644
--- a/ui/js/component/fileActions/view.jsx
+++ b/ui/js/component/fileActions/view.jsx
@@ -1,11 +1,11 @@
import React from "react";
import { Icon, BusyMessage } from "component/common";
import FilePrice from "component/filePrice";
-import { Modal } from "component/modal";
+import { Modal } from "modal/modal";
import Link from "component/link";
import { ToolTip } from "component/tooltip";
import { DropDownMenu, DropDownMenuItem } from "component/menu";
-import ModalRemoveFile from "component/modalRemoveFile";
+import ModalRemoveFile from "modal/modalRemoveFile";
import * as modals from "constants/modal_types";
class FileActions extends React.PureComponent {
diff --git a/ui/js/component/modalWelcome/view.jsx b/ui/js/component/modalWelcome/view.jsx
deleted file mode 100644
index 42ed50a15..000000000
--- a/ui/js/component/modalWelcome/view.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React from "react";
-import { Modal } from "component/modal";
-import { CreditAmount } from "component/common";
-import Link from "component/link";
-import RewardLink from "component/rewardLink";
-
-class ModalWelcome extends React.PureComponent {
- constructor(props) {
- super(props);
- this.state = {
- isFirstScreen: true,
- };
- }
-
- render() {
- const { closeModal, totalRewardValue, verifyAccount } = this.props;
-
- const totalRewardRounded = Math.round(totalRewardValue / 10) * 10;
-
- return (
-
- {this.state.isFirstScreen &&
-
- {__("Welcome to LBRY")}
-
- {__(
- "Using LBRY is like dating a centaur. Totally normal up top, and"
- )}
- {" "}{__("way different")} {__("underneath.")}
-
- {__("Up top, LBRY is similar to popular media sites.")}
-
- {__(
- "Below, LBRY is controlled by users -- you -- via blockchain and decentralization."
- )}
-
-
- {
- this.setState({ isFirstScreen: false });
- }}
- label={__("Continue")}
- />
-
- }
- {!this.state.isFirstScreen &&
-
- {__("Claim Your Credits")}
-
- The LBRY network is controlled and powered by credits called{" "}
- LBC , a blockchain asset.
-
-
- {__("New patrons receive ")} {" "}
- {totalRewardValue
- ?
- : {__("credits")} }
- {" "} {__("in rewards for usage and influence of the network.")}
-
-
- {__(
- "You'll also earn weekly bonuses for checking out the greatest new stuff."
- )}
-
-
-
-
-
- }
-
- );
- }
-}
-
-export default ModalWelcome;
diff --git a/ui/js/component/publishForm/view.jsx b/ui/js/component/publishForm/view.jsx
index 4b0d2e3d3..39bce0d4d 100644
--- a/ui/js/component/publishForm/view.jsx
+++ b/ui/js/component/publishForm/view.jsx
@@ -5,7 +5,7 @@ import FormField from "component/formField";
import { FormRow } from "component/form.js";
import Link from "component/link";
import FormFieldPrice from "component/formFieldPrice";
-import Modal from "component/modal";
+import Modal from "modal/modal";
import { BusyMessage } from "component/common";
import ChannelSection from "./internal/channelSection";
diff --git a/ui/js/component/rewardLink/view.jsx b/ui/js/component/rewardLink/view.jsx
index 36a504d3e..1f36dd86e 100644
--- a/ui/js/component/rewardLink/view.jsx
+++ b/ui/js/component/rewardLink/view.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import Modal from "component/modal";
+import Modal from "modal/modal";
import Link from "component/link";
const RewardLink = props => {
diff --git a/ui/js/component/router/index.jsx b/ui/js/component/router/index.js
similarity index 100%
rename from ui/js/component/router/index.jsx
rename to ui/js/component/router/index.js
diff --git a/ui/js/component/splash/view.jsx b/ui/js/component/splash/view.jsx
index cb99615b4..7d6952b16 100644
--- a/ui/js/component/splash/view.jsx
+++ b/ui/js/component/splash/view.jsx
@@ -1,9 +1,9 @@
import React from "react";
-import lbry from "../../lbry.js";
+import lbry from "lbry.js";
import LoadScreen from "../load_screen.js";
-import ModalIncompatibleDaemon from "../modalIncompatibleDaemon";
-import ModalUpgrade from "component/modalUpgrade";
-import ModalDownloading from "component/modalDownloading";
+import ModalIncompatibleDaemon from "modal/modalIncompatibleDaemon";
+import ModalUpgrade from "modal/modalUpgrade";
+import ModalDownloading from "modal/modalDownloading";
export class SplashScreen extends React.PureComponent {
static propTypes = {
diff --git a/ui/js/component/video/internal/play-button.jsx b/ui/js/component/video/internal/play-button.jsx
index 266d3b617..bb49d05b4 100644
--- a/ui/js/component/video/internal/play-button.jsx
+++ b/ui/js/component/video/internal/play-button.jsx
@@ -1,7 +1,7 @@
import React from "react";
import FilePrice from "component/filePrice";
import Link from "component/link";
-import Modal from "component/modal";
+import Modal from "modal/modal";
class VideoPlayButton extends React.PureComponent {
componentDidMount() {
diff --git a/ui/js/component/walletSend/view.jsx b/ui/js/component/walletSend/view.jsx
index 1fe377b7d..444acca4a 100644
--- a/ui/js/component/walletSend/view.jsx
+++ b/ui/js/component/walletSend/view.jsx
@@ -1,6 +1,6 @@
import React from "react";
import Link from "component/link";
-import Modal from "component/modal";
+import Modal from "modal/modal";
import { FormRow } from "component/form";
const WalletSend = props => {
diff --git a/ui/js/constants/modal_types.js b/ui/js/constants/modal_types.js
index 153996e00..d6686f15f 100644
--- a/ui/js/constants/modal_types.js
+++ b/ui/js/constants/modal_types.js
@@ -6,4 +6,5 @@ export const INSUFFICIENT_CREDITS = "insufficient_credits";
export const UPGRADE = "upgrade";
export const WELCOME = "welcome";
export const FIRST_REWARD = "first_reward";
-export const AUTHENTICATION_FAILURE = "auth_failure";
\ No newline at end of file
+export const AUTHENTICATION_FAILURE = "auth_failure";
+export const CREDIT_INTRO = "credit_intro";
diff --git a/ui/js/constants/settings.js b/ui/js/constants/settings.js
new file mode 100644
index 000000000..5187baea1
--- /dev/null
+++ b/ui/js/constants/settings.js
@@ -0,0 +1,5 @@
+export const CREDIT_INTRO_ACKNOWLEDGED = "credit_intro_acknowledged";
+export const FIRST_RUN_ACKNOWLEDGED = "welcome_acknowledged";
+export const LANGUAGE = "language";
+export const SHOW_NSFW = "showNsfw";
+export const SHOW_UNAVAILABLE = "showUnavailable";
diff --git a/ui/js/component/modal.js b/ui/js/modal/modal.js
similarity index 98%
rename from ui/js/component/modal.js
rename to ui/js/modal/modal.js
index 7a1955624..8061bb678 100644
--- a/ui/js/component/modal.js
+++ b/ui/js/modal/modal.js
@@ -1,7 +1,7 @@
import React from "react";
import ReactModal from "react-modal";
-import Link from "component/link";
-import app from "../app.js";
+import Link from "component/link/index";
+import app from "app.js";
export class Modal extends React.PureComponent {
static propTypes = {
diff --git a/ui/js/component/modalAuthFailure/index.js b/ui/js/modal/modalAuthFailure/index.js
similarity index 100%
rename from ui/js/component/modalAuthFailure/index.js
rename to ui/js/modal/modalAuthFailure/index.js
diff --git a/ui/js/component/modalAuthFailure/view.jsx b/ui/js/modal/modalAuthFailure/view.jsx
similarity index 63%
rename from ui/js/component/modalAuthFailure/view.jsx
rename to ui/js/modal/modalAuthFailure/view.jsx
index d3abe8112..ada5e2340 100644
--- a/ui/js/component/modalAuthFailure/view.jsx
+++ b/ui/js/modal/modalAuthFailure/view.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import { Modal } from "component/modal";
+import { Modal } from "modal/modal";
class ModalAuthFailure extends React.PureComponent {
render() {
@@ -12,11 +12,17 @@ class ModalAuthFailure extends React.PureComponent {
type="confirm"
confirmButtonLabel={__("Reload")}
abortButtonLabel={__("Continue")}
- onConfirmed={() => { window.location.reload() }}
+ onConfirmed={() => {
+ window.location.reload();
+ }}
onAborted={close}
>
{__("Authentication Failure")}
- {__("If reloading does not fix this, or you see this at every start up, please email help@lbry.io.")}
+
+ {__(
+ "If reloading does not fix this, or you see this at every start up, please email help@lbry.io."
+ )}
+
);
}
diff --git a/ui/js/component/modalWelcome/index.js b/ui/js/modal/modalCreditIntro/index.js
similarity index 81%
rename from ui/js/component/modalWelcome/index.js
rename to ui/js/modal/modalCreditIntro/index.js
index 3cb4a44d6..0626eee8f 100644
--- a/ui/js/component/modalWelcome/index.js
+++ b/ui/js/modal/modalCreditIntro/index.js
@@ -9,7 +9,8 @@ import {
makeSelectRewardByType,
selectTotalRewardValue,
} from "selectors/rewards";
-import ModalWelcome from "./view";
+import * as settings from "constants/settings";
+import ModalCreditIntro from "./view";
const select = (state, props) => {
const selectHasClaimed = makeSelectHasClaimedReward(),
@@ -24,7 +25,7 @@ const select = (state, props) => {
const perform = dispatch => () => {
const closeModal = () => {
- dispatch(doSetClientSetting("welcome_acknowledged", true));
+ dispatch(doSetClientSetting(settings.CREDIT_INTRO_ACKNOWLEDGED, true));
dispatch(doCloseModal());
};
@@ -37,4 +38,4 @@ const perform = dispatch => () => {
};
};
-export default connect(select, perform)(ModalWelcome);
+export default connect(select, perform)(ModalCreditIntro);
diff --git a/ui/js/modal/modalCreditIntro/view.jsx b/ui/js/modal/modalCreditIntro/view.jsx
new file mode 100644
index 000000000..8a2b7b500
--- /dev/null
+++ b/ui/js/modal/modalCreditIntro/view.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Modal } from "modal/modal";
+import { CreditAmount } from "component/common";
+import Link from "component/link/index";
+
+const ModalCreditIntro = props => {
+ const { closeModal, totalRewardValue, verifyAccount } = props;
+
+ const totalRewardRounded = Math.round(totalRewardValue / 10) * 10;
+
+ return (
+
+
+ {__("Claim Your Credits")}
+
+ The LBRY network is controlled and powered by credits called{" "}
+ LBC , a blockchain asset.
+
+
+ {__("New patrons receive ")} {" "}
+ {totalRewardValue
+ ?
+ : {__("credits")} }
+ {" "} {__("in rewards for usage and influence of the network.")}
+
+
+ {__(
+ "You'll also earn weekly bonuses for checking out the greatest new stuff."
+ )}
+
+
+
+
+
+
+
+ );
+};
+
+export default ModalCreditIntro;
diff --git a/ui/js/component/modalDownloading/index.js b/ui/js/modal/modalDownloading/index.js
similarity index 100%
rename from ui/js/component/modalDownloading/index.js
rename to ui/js/modal/modalDownloading/index.js
diff --git a/ui/js/component/modalDownloading/view.jsx b/ui/js/modal/modalDownloading/view.jsx
similarity index 95%
rename from ui/js/component/modalDownloading/view.jsx
rename to ui/js/modal/modalDownloading/view.jsx
index 9b5bed354..373f83ae1 100644
--- a/ui/js/component/modalDownloading/view.jsx
+++ b/ui/js/modal/modalDownloading/view.jsx
@@ -1,7 +1,7 @@
import React from "react";
-import { Modal } from "component/modal";
+import { Modal } from "modal/modal";
import { Line } from "rc-progress";
-import Link from "component/link";
+import Link from "component/link/index";
class ModalDownloading extends React.PureComponent {
render() {
diff --git a/ui/js/component/modalError/index.js b/ui/js/modal/modalError/index.js
similarity index 100%
rename from ui/js/component/modalError/index.js
rename to ui/js/modal/modalError/index.js
diff --git a/ui/js/component/modalError/view.jsx b/ui/js/modal/modalError/view.jsx
similarity index 97%
rename from ui/js/component/modalError/view.jsx
rename to ui/js/modal/modalError/view.jsx
index 49b4e51c7..ceb998dee 100644
--- a/ui/js/component/modalError/view.jsx
+++ b/ui/js/modal/modalError/view.jsx
@@ -1,6 +1,6 @@
import React from "react";
import lbry from "lbry";
-import { ExpandableModal } from "component/modal";
+import { ExpandableModal } from "modal/modal";
class ModalError extends React.PureComponent {
render() {
diff --git a/ui/js/component/modalFirstReward/index.js b/ui/js/modal/modalFirstReward/index.js
similarity index 100%
rename from ui/js/component/modalFirstReward/index.js
rename to ui/js/modal/modalFirstReward/index.js
diff --git a/ui/js/component/modalFirstReward/view.jsx b/ui/js/modal/modalFirstReward/view.jsx
similarity index 97%
rename from ui/js/component/modalFirstReward/view.jsx
rename to ui/js/modal/modalFirstReward/view.jsx
index 1fc0540bb..5317bd9d9 100644
--- a/ui/js/component/modalFirstReward/view.jsx
+++ b/ui/js/modal/modalFirstReward/view.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import { Modal } from "component/modal";
+import { Modal } from "modal/modal";
import { CreditAmount } from "component/common";
class ModalFirstReward extends React.PureComponent {
diff --git a/ui/js/component/modalIncompatibleDaemon/index.js b/ui/js/modal/modalIncompatibleDaemon/index.js
similarity index 100%
rename from ui/js/component/modalIncompatibleDaemon/index.js
rename to ui/js/modal/modalIncompatibleDaemon/index.js
diff --git a/ui/js/component/modalIncompatibleDaemon/view.jsx b/ui/js/modal/modalIncompatibleDaemon/view.jsx
similarity index 89%
rename from ui/js/component/modalIncompatibleDaemon/view.jsx
rename to ui/js/modal/modalIncompatibleDaemon/view.jsx
index bf5c3a84d..e4b1e5561 100644
--- a/ui/js/component/modalIncompatibleDaemon/view.jsx
+++ b/ui/js/modal/modalIncompatibleDaemon/view.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import { Modal } from "component/modal";
-import Link from "component/link";
+import { Modal } from "modal/modal";
+import Link from "component/link/index";
class ModalIncompatibleDaemon extends React.PureComponent {
render() {
diff --git a/ui/js/component/modalInsufficientCredits/index.js b/ui/js/modal/modalInsufficientCredits/index.js
similarity index 100%
rename from ui/js/component/modalInsufficientCredits/index.js
rename to ui/js/modal/modalInsufficientCredits/index.js
diff --git a/ui/js/component/modalInsufficientCredits/view.jsx b/ui/js/modal/modalInsufficientCredits/view.jsx
similarity index 93%
rename from ui/js/component/modalInsufficientCredits/view.jsx
rename to ui/js/modal/modalInsufficientCredits/view.jsx
index fd214cd11..681fc4c9f 100644
--- a/ui/js/component/modalInsufficientCredits/view.jsx
+++ b/ui/js/modal/modalInsufficientCredits/view.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import { Modal } from "component/modal";
+import { Modal } from "modal/modal";
class ModalInsufficientCredits extends React.PureComponent {
render() {
diff --git a/ui/js/component/modalRemoveFile/index.js b/ui/js/modal/modalRemoveFile/index.js
similarity index 100%
rename from ui/js/component/modalRemoveFile/index.js
rename to ui/js/modal/modalRemoveFile/index.js
diff --git a/ui/js/component/modalRemoveFile/view.jsx b/ui/js/modal/modalRemoveFile/view.jsx
similarity index 95%
rename from ui/js/component/modalRemoveFile/view.jsx
rename to ui/js/modal/modalRemoveFile/view.jsx
index e4d819386..6dfa9152f 100644
--- a/ui/js/component/modalRemoveFile/view.jsx
+++ b/ui/js/modal/modalRemoveFile/view.jsx
@@ -1,6 +1,6 @@
import React from "react";
-import { Modal } from "component/modal";
-import FormField from "component/formField";
+import { Modal } from "modal/modal";
+import FormField from "component/formField/index";
class ModalRemoveFile extends React.PureComponent {
constructor(props) {
diff --git a/ui/js/modal/modalRouter/index.js b/ui/js/modal/modalRouter/index.js
new file mode 100644
index 000000000..971f83139
--- /dev/null
+++ b/ui/js/modal/modalRouter/index.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { connect } from "react-redux";
+import { selectCurrentModal } from "selectors/app";
+import { doOpenModal } from "actions/app";
+import { selectWelcomeModalAcknowledged } from "selectors/app";
+import { selectUser } from "selectors/user";
+import ModalRouter from "./view";
+import * as modals from "constants/modal_types";
+
+const select = (state, props) => ({
+ modal: selectCurrentModal(state),
+ isWelcomeAcknowledged: selectWelcomeModalAcknowledged(state),
+ user: selectUser(state),
+});
+
+const perform = dispatch => ({
+ openWelcomeModal: () => dispatch(doOpenModal(modals.WELCOME)),
+});
+
+export default connect(select, perform)(ModalRouter);
diff --git a/ui/js/modal/modalRouter/view.jsx b/ui/js/modal/modalRouter/view.jsx
new file mode 100644
index 000000000..d2280821e
--- /dev/null
+++ b/ui/js/modal/modalRouter/view.jsx
@@ -0,0 +1,60 @@
+import React from "react";
+import ModalError from "modal/modalError";
+import ModalAuthFailure from "modal/modalAuthFailure";
+import ModalDownloading from "modal/modalDownloading";
+import ModalInsufficientCredits from "modal/modalInsufficientCredits";
+import ModalUpgrade from "modal/modalUpgrade";
+import ModalWelcome from "modal/modalWelcome";
+import ModalFirstReward from "modal/modalFirstReward";
+import * as modals from "constants/modal_types";
+import ModalCreditIntro from "modal/modalCreditIntro";
+
+class ModalRouter extends React.PureComponent {
+ componentWillMount() {
+ this.showWelcome(this.props);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this.showWelcome(nextProps);
+ }
+
+ showWelcome(props) {
+ const { isWelcomeAcknowledged, openWelcomeModal, user } = props;
+
+ if (
+ !isWelcomeAcknowledged &&
+ user &&
+ !user.is_reward_approved &&
+ !user.is_identity_verified
+ ) {
+ openWelcomeModal();
+ }
+ }
+
+ render() {
+ const { modal } = this.props;
+
+ switch (modal) {
+ case modals.UPGRADE:
+ return ;
+ case modals.DOWNLOADING:
+ return ;
+ case modals.ERROR:
+ return ;
+ case modals.INSUFFICIENT_CREDITS:
+ return ;
+ case modals.WELCOME:
+ return ;
+ case modals.FIRST_REWARD:
+ return ;
+ case modals.AUTHENTICATION_FAILURE:
+ return ;
+ case modals.CREDIT_INTRO:
+ return ;
+ default:
+ return null;
+ }
+ }
+}
+
+export default ModalRouter;
diff --git a/ui/js/component/modalUpgrade/index.js b/ui/js/modal/modalUpgrade/index.js
similarity index 100%
rename from ui/js/component/modalUpgrade/index.js
rename to ui/js/modal/modalUpgrade/index.js
diff --git a/ui/js/component/modalUpgrade/view.jsx b/ui/js/modal/modalUpgrade/view.jsx
similarity index 93%
rename from ui/js/component/modalUpgrade/view.jsx
rename to ui/js/modal/modalUpgrade/view.jsx
index 2d364bd31..a55d9ae31 100644
--- a/ui/js/component/modalUpgrade/view.jsx
+++ b/ui/js/modal/modalUpgrade/view.jsx
@@ -1,5 +1,5 @@
import React from "react";
-import { Modal } from "component/modal";
+import { Modal } from "modal/modal";
class ModalUpgrade extends React.PureComponent {
render() {
diff --git a/ui/js/modal/modalWelcome/index.js b/ui/js/modal/modalWelcome/index.js
new file mode 100644
index 000000000..1b62eba42
--- /dev/null
+++ b/ui/js/modal/modalWelcome/index.js
@@ -0,0 +1,17 @@
+import React from "react";
+import * as settings from "constants/settings";
+import * as modals from "constants/modal_types";
+import { connect } from "react-redux";
+import { doCloseModal, doOpenModal } from "actions/app";
+import { doSetClientSetting } from "actions/settings";
+import ModalWelcome from "./view";
+
+const perform = dispatch => () => ({
+ closeModal: () => {
+ dispatch(doSetClientSetting(settings.FIRST_RUN_ACKNOWLEDGED, true));
+ dispatch(doCloseModal());
+ dispatch(doOpenModal(modals.CREDIT_INTRO));
+ },
+});
+
+export default connect(null, perform)(ModalWelcome);
diff --git a/ui/js/modal/modalWelcome/view.jsx b/ui/js/modal/modalWelcome/view.jsx
new file mode 100644
index 000000000..85b33a224
--- /dev/null
+++ b/ui/js/modal/modalWelcome/view.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+import { Modal } from "modal/modal";
+import Link from "component/link/index";
+
+const ModalWelcome = props => {
+ const { closeModal } = props;
+
+ return (
+
+
+ {__("Welcome to LBRY")}
+
+ {__(
+ "Using LBRY is like dating a centaur. Totally normal up top, and"
+ )}
+ {" "}{__("way different")} {__("underneath.")}
+
+ {__("Up top, LBRY is similar to popular media sites.")}
+
+ {__(
+ "Below, LBRY is controlled by users -- you -- via blockchain and decentralization."
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default ModalWelcome;
diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx
index e796847bd..275adae72 100644
--- a/ui/js/page/settings/view.jsx
+++ b/ui/js/page/settings/view.jsx
@@ -2,6 +2,7 @@ import React from "react";
import FormField from "component/formField";
import { FormRow } from "component/form.js";
import SubHeader from "component/subHeader";
+import * as settings from "constants/settings";
import lbry from "lbry.js";
import Link from "component/link";
import FormFieldPrice from "component/formFieldPrice";
@@ -17,8 +18,8 @@ class SettingsPage extends React.PureComponent {
this.state = {
// isMaxUpload: daemonSettings && daemonSettings.max_upload != 0,
// isMaxDownload: daemonSettings && daemonSettings.max_download != 0,
- showUnavailable: lbry.getClientSetting("showUnavailable"),
- language: lbry.getClientSetting("language"),
+ showUnavailable: lbry.getClientSetting(settings.SHOW_UNAVAILABLE),
+ language: lbry.getClientSetting(settings.LANGUAGE),
clearingCache: false,
};
}
@@ -92,7 +93,7 @@ class SettingsPage extends React.PureComponent {
// }
onShowNsfwChange(event) {
- this.props.setClientSetting("showNsfw", event.target.checked);
+ this.props.setClientSetting(settings.SHOW_NSFW, event.target.checked);
}
// onLanguageChange(language) {
diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js
index 80e66466d..574494c7f 100644
--- a/ui/js/selectors/app.js
+++ b/ui/js/selectors/app.js
@@ -1,5 +1,6 @@
import { createSelector } from "reselect";
import { parseQueryParams, toQueryString } from "util/query_params";
+import * as settings from "constants/settings.js";
import lbry from "lbry";
import lbryuri from "lbryuri";
@@ -202,9 +203,14 @@ export const selectSnackBarSnacks = createSelector(
snackBar => snackBar.snacks || []
);
+export const selectCreditsIntroAcknowledged = createSelector(
+ _selectState,
+ state => lbry.getClientSetting(settings.CREDIT_INTRO_ACKNOWLEDGED)
+);
+
export const selectWelcomeModalAcknowledged = createSelector(
_selectState,
- state => lbry.getClientSetting("welcome_acknowledged")
+ state => lbry.getClientSetting(settings.FIRST_RUN_ACKNOWLEDGED)
);
export const selectBadgeNumber = createSelector(
diff --git a/ui/scss/component/_modal.scss b/ui/scss/component/_modal.scss
index c28ba313e..4ebba6799 100644
--- a/ui/scss/component/_modal.scss
+++ b/ui/scss/component/_modal.scss
@@ -73,7 +73,7 @@
max-width: none;
width: 400px;
}
-.error-modal__error-list { /*shitty hack/temp fix for long errors making modals unusable*/
+.error-modal__error-list { /*shitty hack/temp fix for long errors making modal unusable*/
border: 1px solid #eee;
padding: 8px;
list-style: none;