Merge branch 'issue/708'

ui/js/component/app/index.js

@@ -6,9 +6,8 @@ import {
   selectActiveHistoryEntry,
 } from "redux/selectors/navigation";
 import { selectUser } from "redux/selectors/user";
-import { doCheckUpgradeAvailable, doAlertError } from "redux/actions/app";
+import { doAlertError } from "redux/actions/app";
 import { doRecordScroll } from "redux/actions/navigation";
-import { doFetchRewardedContent } from "redux/actions/content";
 import App from "./view";
 
 const select = (state, props) => ({
@@ -20,8 +19,6 @@ const select = (state, props) => ({
 
 const perform = dispatch => ({
   alertError: errorList => dispatch(doAlertError(errorList)),
-  checkUpgradeAvailable: () => dispatch(doCheckUpgradeAvailable()),
-  fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
   recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),
 });
 

ui/js/component/app/view.jsx

@@ -13,23 +13,11 @@ class App extends React.PureComponent {
   }
 
   componentWillMount() {
-    const {
-      alertError,
-      checkUpgradeAvailable,
-      fetchRewardedContent,
-    } = this.props;
+    const { alertError } = this.props;
 
     document.addEventListener("unhandledError", event => {
       alertError(event.detail);
     });
-
-    if (!this.props.upgradeSkipped) {
-      checkUpgradeAvailable();
-    }
-
-    fetchRewardedContent();
-
-    this.setTitleFromProps(this.props);
   }
 
   componentDidMount() {

ui/js/component/dateTime/index.js

@@ -5,7 +5,8 @@ import { doFetchBlock } from "redux/actions/wallet";
 import DateTime from "./view";
 
 const select = (state, props) => ({
-  date: !props.date && props.block
+  date:
+    !props.date && props.block
       ? makeSelectBlockDate(props.block)(state)
       : props.date,
 });

ui/js/component/header/index.js

@@ -12,18 +12,21 @@ import {
   doHistoryForward,
 } from "redux/actions/navigation";
 import Header from "./view";
+import { selectIsUpgradeAvailable } from "../../selectors/app";
+import { doDownloadUpgrade } from "../../actions/app";
 
 const select = state => ({
   isBackDisabled: selectIsBackDisabled(state),
   isForwardDisabled: selectIsForwardDisabled(state),
+  isUpgradeAvailable: selectIsUpgradeAvailable(state),
   balance: formatCredits(selectBalance(state) || 0, 1),
-  publish: __("Publish"),
 });
 
 const perform = dispatch => ({
   navigate: path => dispatch(doNavigate(path)),
   back: () => dispatch(doHistoryBack()),
   forward: () => dispatch(doHistoryForward()),
+  downloadUpgrade: () => dispatch(doDownloadUpgrade()),
 });
 
 export default connect(select, perform)(Header);

ui/js/component/header/view.jsx

@@ -9,8 +9,9 @@ export const Header = props => {
     forward,
     isBackDisabled,
     isForwardDisabled,
+    isUpgradeAvailable,
     navigate,
-    publish,
+    downloadUpgrade,
   } = props;
   return (
     <header id="header">
@@ -58,7 +59,7 @@ export const Header = props => {
           onClick={() => navigate("/publish")}
           button="primary button--flat"
           icon="icon-upload"
-          label={publish}
+          label={__("Publish")}
         />
       </div>
       <div className="header__item">
@@ -77,6 +78,14 @@ export const Header = props => {
           title={__("Settings")}
         />
       </div>
+      {isUpgradeAvailable && (
+        <Link
+          onClick={() => downloadUpgrade()}
+          button="primary button--flat"
+          icon="icon-arrow-up"
+          label={__("Upgrade App")}
+        />
+      )}
     </header>
   );
 };

ui/js/component/publishForm/view.jsx

@@ -340,7 +340,8 @@ class PublishForm extends React.PureComponent {
   handleFeePrefChange(feeEnabled) {
     this.setState({
       isFee: feeEnabled,
-      feeAmount: this.state.feeAmount == ""
+      feeAmount:
+        this.state.feeAmount == ""
           ? this._defaultPaidPrice
           : this.state.feeAmount,
     });
@@ -556,9 +557,8 @@ class PublishForm extends React.PureComponent {
                 }
               />
             </div>
-            {!this.state.hasFile && !this.myClaimExists()
-              ? null
-              : <div>
+            {!this.state.hasFile && !this.myClaimExists() ? null : (
+              <div>
                 <div className="card__content">
                   <FormRow
                     ref="meta_title"
@@ -631,7 +631,8 @@ class PublishForm extends React.PureComponent {
                     <option value="1">{__("Adults Only")}</option>
                   </FormRow>
                 </div>
-                </div>}
+              </div>
+            )}
           </section>
 
           <section className="card">
@@ -668,13 +669,14 @@ class PublishForm extends React.PureComponent {
                   onChange={val => this.handleFeeChange(val)}
                 />
               </span>
-              {this.state.isFee && this.state.feeCurrency.toUpperCase() != "LBC"
-                ? <div className="form-field__helper">
+              {this.state.isFee &&
+              this.state.feeCurrency.toUpperCase() != "LBC" ? (
+                <div className="form-field__helper">
                   {__(
                     "All content fees are charged in LBC. For non-LBC payment methods, the number of credits charged will be adjusted based on the value of LBRY credits at the time of purchase."
                   )}
                 </div>
-                : null}
+              ) : null}
             </div>
           </section>
           <section className="card">
@@ -740,16 +742,12 @@ class PublishForm extends React.PureComponent {
                     "Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International"
                   )}
                 </option>
-                <option value="copyright">
-                  {__("Copyrighted...")}
-                </option>
-                <option value="other">
-                  {__("Other...")}
-                </option>
+                <option value="copyright">{__("Copyrighted...")}</option>
+                <option value="other">{__("Other...")}</option>
               </FormRow>
 
-              {this.state.licenseType == "copyright"
-                ? <FormRow
+              {this.state.licenseType == "copyright" ? (
+                <FormRow
                   label={__("Copyright notice")}
                   type="text"
                   name="copyright-notice"
@@ -758,10 +756,10 @@ class PublishForm extends React.PureComponent {
                     this.handleCopyrightNoticeChange(event);
                   }}
                 />
-                : null}
+              ) : null}
 
-              {this.state.licenseType == "other"
-                ? <FormRow
+              {this.state.licenseType == "other" ? (
+                <FormRow
                   label={__("License description")}
                   type="text"
                   name="other-license-description"
@@ -770,10 +768,10 @@ class PublishForm extends React.PureComponent {
                     this.handleOtherLicenseDescriptionChange(event);
                   }}
                 />
-                : null}
+              ) : null}
 
-              {this.state.licenseType == "other"
-                ? <FormRow
+              {this.state.licenseType == "other" ? (
+                <FormRow
                   label={__("License URL")}
                   type="text"
                   name="other-license-url"
@@ -782,7 +780,7 @@ class PublishForm extends React.PureComponent {
                     this.handleOtherLicenseUrlChange(event);
                   }}
                 />
-                : null}
+              ) : null}
             </div>
           </section>
 
@@ -798,8 +796,7 @@ class PublishForm extends React.PureComponent {
               <div className="card__subtitle">
                 {__(
                   "This is the exact address where people find your content (ex. lbry://myvideo)."
-                )}
-                {" "}
+                )}{" "}
                 <Link
                   label={__("Learn more")}
                   href="https://lbry.io/faq/naming"
@@ -808,9 +805,11 @@ class PublishForm extends React.PureComponent {
             </div>
             <div className="card__content">
               <FormRow
-                prefix={`lbry://${this.state.channel === "anonymous"
+                prefix={`lbry://${
+                  this.state.channel === "anonymous"
                     ? ""
-                  : `${this.state.channel}/`}`}
+                    : `${this.state.channel}/`
+                }`}
                 type="text"
                 ref="name"
                 placeholder="myname"
@@ -821,8 +820,8 @@ class PublishForm extends React.PureComponent {
                 helper={this.getNameBidHelpText()}
               />
             </div>
-            {this.state.rawName
-              ? <div className="card__content">
+            {this.state.rawName ? (
+              <div className="card__content">
                 <FormRow
                   ref="bid"
                   type="number"
@@ -838,7 +837,9 @@ class PublishForm extends React.PureComponent {
                   min="0"
                 />
               </div>
-              : ""}
+            ) : (
+              ""
+            )}
           </section>
 
           <section className="card">
@@ -850,8 +851,7 @@ class PublishForm extends React.PureComponent {
                 ref="tosAgree"
                 label={
                   <span>
-                    {__("I agree to the")}
-                    {" "}
+                    {__("I agree to the")}{" "}
                     <Link
                       href="https://www.lbry.io/termsofservice"
                       label={__("LBRY terms of service")}
@@ -897,8 +897,8 @@ class PublishForm extends React.PureComponent {
           }}
         >
           <p>
-            {__("Your file has been published to LBRY at the address")}
-            {" "}<code>{this.state.uri}</code>!
+            {__("Your file has been published to LBRY at the address")}{" "}
+            <code>{this.state.uri}</code>!
           </p>
           <p>
             {__(

ui/js/component/uriIndicator/view.jsx

@@ -60,13 +60,17 @@ class UriIndicator extends React.PureComponent {
 
     const inner = (
       <span>
-        <span className="channel-name">{channelName}</span> {" "}
-        {!signatureIsValid
-          ? <Icon
+        <span className="channel-name">{channelName}</span>{" "}
+        {!signatureIsValid ? (
+          <Icon
             icon={icon}
-              className={`channel-indicator__icon channel-indicator__icon--${modifier}`}
+            className={`channel-indicator__icon channel-indicator__icon--${
+              modifier
+            }`}
           />
-          : ""}
+        ) : (
+          ""
+        )}
       </span>
     );
 

ui/js/constants/action_types.js

@@ -20,7 +20,12 @@ export const UPGRADE_DOWNLOAD_STARTED = "UPGRADE_DOWNLOAD_STARTED";
 export const UPGRADE_DOWNLOAD_COMPLETED = "UPGRADE_DOWNLOAD_COMPLETED";
 export const UPGRADE_DOWNLOAD_PROGRESSED = "UPGRADE_DOWNLOAD_PROGRESSED";
 export const CHECK_UPGRADE_AVAILABLE = "CHECK_UPGRADE_AVAILABLE";
+export const CHECK_UPGRADE_START = "CHECK_UPGRADE_START";
+export const CHECK_UPGRADE_SUCCESS = "CHECK_UPGRADE_SUCCESS";
+export const CHECK_UPGRADE_FAIL = "CHECK_UPGRADE_FAIL";
+export const CHECK_UPGRADE_SUBSCRIBE = "CHECK_UPGRADE_SUBSCRIBE";
 export const UPDATE_VERSION = "UPDATE_VERSION";
+export const UPDATE_REMOTE_VERSION = "UPDATE_REMOTE_VERSION";
 export const SKIP_UPGRADE = "SKIP_UPGRADE";
 export const START_UPGRADE = "START_UPGRADE";
 

ui/js/jsonrpc.js

@@ -27,7 +27,9 @@ jsonrpc.call = function(
 
   function makeRequest(url, options) {
     return new Promise((resolve, reject) => {
-      fetch(url, options).then(resolve).catch(reject);
+      fetch(url, options)
+        .then(resolve)
+        .catch(reject);
 
       if (timeout) {
         const e = new Error(__("Protocol request timed out"));

ui/js/main.js

@@ -71,7 +71,10 @@ var init = function() {
 
     ReactDOM.render(
       <Provider store={store}>
-        <div><App /><SnackBar /></div>
+        <div>
+          <App />
+          <SnackBar />
+        </div>
       </Provider>,
       canvas
     );

ui/js/modal/modalCreditIntro/view.jsx

@@ -12,37 +12,41 @@ const ModalCreditIntro = props => {
       <section>
         <h3 className="modal__header">{__("Blockchain 101")}</h3>
         <p>
-          LBRY is controlled and powered by a blockchain asset called {" "}
-          <em><CurrencySymbol /></em>.{" "}
-          <CurrencySymbol />{" "}
+          LBRY is controlled and powered by a blockchain asset called{" "}
+          <em>
+            <CurrencySymbol />
+          </em>. <CurrencySymbol />{" "}
           {__(
             "is used to publish content, to have a say in the network rules, and to access paid content."
           )}
         </p>
-        {currentBalance <= 0
-          ? <div>
+        {currentBalance <= 0 ? (
+          <div>
             <p>
               You currently have <CreditAmount amount={currentBalance} />, so
               the actions you can take are limited.
             </p>
             <p>
               However, there are a variety of ways to get credits, including
-                more than {" "}
-                {totalRewardValue
-                  ? <CreditAmount amount={totalRewardRounded} />
-                  : <span className="credit-amount">{__("?? credits")}</span>}
-                {" "}{" "}
+              more than{" "}
+              {totalRewardValue ? (
+                <CreditAmount amount={totalRewardRounded} />
+              ) : (
+                <span className="credit-amount">{__("?? credits")}</span>
+              )}{" "}
               {__(
                 " in rewards available for being a proven human during the LBRY beta."
               )}
             </p>
           </div>
-          : <div>
+        ) : (
+          <div>
             <p>
               But you probably knew this, since you've already got{" "}
               <CreditAmount amount={currentBalance} />.
             </p>
-            </div>}
+          </div>
+        )}
 
         <div className="modal__buttons">
           <Link

ui/js/page/report.js

@@ -86,8 +86,7 @@ class ReportPage extends React.Component {
         <section className="card">
           <div className="card__content">
             <h3>{__("Developer?")}</h3>
-            {__("You can also")}
-            {" "}
+            {__("You can also")}{" "}
             <Link
               href="https://github.com/lbryio/lbry/issues"
               label={__("submit an issue on GitHub")}

ui/js/redux/actions/app.js

@@ -5,18 +5,23 @@ import {
   selectUpgradeDownloadPath,
   selectUpgradeDownloadItem,
   selectUpgradeFilename,
+  selectIsUpgradeSkipped,
+  selectRemoteVersion,
 } from "redux/selectors/app";
 import { doFetchDaemonSettings } from "redux/actions/settings";
 import { doBalanceSubscribe } from "redux/actions/wallet";
 import { doAuthenticate } from "redux/actions/user";
 import { doFetchFileInfosAndPublishedClaims } from "redux/actions/file_info";
 import * as modals from "constants/modal_types";
+import { doFetchRewardedContent } from "actions/content";
+import { selectCurrentModal } from "../selectors/app";
 
 const { remote, ipcRenderer, shell } = require("electron");
 const path = require("path");
 const { download } = remote.require("electron-dl");
 const fs = remote.require("fs");
 const { lbrySettings: config } = require("../../../../app/package.json");
+const CHECK_UPGRADE_INTERVAL = 10 * 60 * 1000;
 
 export function doOpenModal(modal, modalProps = {}) {
   return {
@@ -71,11 +76,8 @@ export function doDownloadUpgrade() {
       onProgress: p => dispatch(doUpdateDownloadProgress(Math.round(p * 100))),
       directory: dir,
     };
-    download(
-      remote.getCurrentWindow(),
-      selectUpdateUrl(state),
-      options
-    ).then(downloadItem => {
+    download(remote.getCurrentWindow(), selectUpdateUrl(state), options).then(
+      downloadItem => {
         /**
          * TODO: get the download path directly from the download object. It should just be
          * downloadItem.getSavePath(), but the copy on the main process is being garbage collected
@@ -89,7 +91,8 @@ export function doDownloadUpgrade() {
             path: path.join(dir, upgradeFilename),
           },
         });
-    });
+      }
+    );
 
     dispatch({
       type: types.UPGRADE_DOWNLOAD_STARTED,
@@ -129,15 +132,25 @@ export function doCancelUpgrade() {
 export function doCheckUpgradeAvailable() {
   return function(dispatch, getState) {
     const state = getState();
-
-    lbry.getAppVersionInfo().then(({ remoteVersion, upgradeAvailable }) => {
-      if (upgradeAvailable) {
     dispatch({
-          type: types.UPDATE_VERSION,
+      type: types.CHECK_UPGRADE_START,
+    });
+
+    const success = ({ remoteVersion, upgradeAvailable }) => {
+      dispatch({
+        type: types.CHECK_UPGRADE_SUCCESS,
         data: {
-            version: remoteVersion,
+          upgradeAvailable,
+          remoteVersion,
         },
       });
+
+      if (
+        upgradeAvailable &&
+        !selectCurrentModal(state) &&
+        (!selectIsUpgradeSkipped(state) ||
+          remoteVersion !== selectRemoteVersion(state))
+      ) {
         dispatch({
           type: types.OPEN_MODAL,
           data: {
@@ -145,6 +158,30 @@ export function doCheckUpgradeAvailable() {
           },
         });
       }
+    };
+
+    const fail = () => {
+      dispatch({
+        type: types.CHECK_UPGRADE_FAIL,
+      });
+    };
+
+    lbry.getAppVersionInfo().then(success, fail);
+  };
+}
+
+/*
+  Initiate a timer that will check for an app upgrade every 10 minutes.
+ */
+export function doCheckUpgradeSubscribe() {
+  return function(dispatch) {
+    const checkUpgradeTimer = setInterval(
+      () => dispatch(doCheckUpgradeAvailable()),
+      CHECK_UPGRADE_INTERVAL
+    );
+    dispatch({
+      type: types.CHECK_UPGRADE_SUBSCRIBE,
+      data: { checkUpgradeTimer },
     });
   };
 }
@@ -153,7 +190,8 @@ export function doCheckDaemonVersion() {
   return function(dispatch, getState) {
     lbry.version().then(({ lbrynet_version }) => {
       dispatch({
-        type: config.lbrynetDaemonVersion == lbrynet_version
+        type:
+          config.lbrynetDaemonVersion == lbrynet_version
             ? types.DAEMON_VERSION_MATCH
             : types.DAEMON_VERSION_MISMATCH,
       });
@@ -176,11 +214,18 @@ export function doAlertError(errorList) {
 
 export function doDaemonReady() {
   return function(dispatch, getState) {
+    const state = getState();
+
     dispatch(doAuthenticate());
     dispatch({ type: types.DAEMON_READY });
     dispatch(doFetchDaemonSettings());
     dispatch(doBalanceSubscribe());
     dispatch(doFetchFileInfosAndPublishedClaims());
+    dispatch(doFetchRewardedContent());
+    if (!selectIsUpgradeSkipped(state)) {
+      dispatch(doCheckUpgradeAvailable());
+    }
+    dispatch(doCheckUpgradeSubscribe());
   };
 }
 

ui/js/redux/actions/content.js

@@ -51,8 +51,8 @@ export function doResolveUris(uris) {
           certificate: null,
         };
 
-        const { claim, certificate, claims_in_channel } = uriResolveInfo &&
-          !uriResolveInfo.error
+        const { claim, certificate, claims_in_channel } =
+          uriResolveInfo && !uriResolveInfo.error
             ? uriResolveInfo
             : fallbackResolveInfo;
         resolveInfo[uri] = { claim, certificate, claims_in_channel };

ui/js/redux/actions/cost_info.js

@@ -45,7 +45,8 @@ export function doFetchCostInfoForUri(uri) {
       }, reject);
      */
 
-    const fee = claim.value && claim.value.stream && claim.value.stream.metadata
+    const fee =
+      claim.value && claim.value.stream && claim.value.stream.metadata
         ? claim.value.stream.metadata.fee
         : undefined;
 

ui/js/redux/actions/rewards.js

@@ -93,12 +93,11 @@ export function doClaimEligiblePurchaseRewards() {
     if (rewardsByType[rewards.TYPE_FIRST_STREAM]) {
       dispatch(doClaimRewardType(rewards.TYPE_FIRST_STREAM));
     } else {
-      [
-        rewards.TYPE_MANY_DOWNLOADS,
-        rewards.TYPE_FEATURED_DOWNLOAD,
-      ].forEach(type => {
+      [rewards.TYPE_MANY_DOWNLOADS, rewards.TYPE_FEATURED_DOWNLOAD].forEach(
+        type => {
           dispatch(doClaimRewardType(type));
-      });
+        }
+      );
     }
   };
 }

ui/js/redux/reducers/app.js

@@ -64,7 +64,7 @@ reducers[types.SKIP_UPGRADE] = function(state, action) {
   sessionStorage.setItem("upgradeSkipped", true);
 
   return Object.assign({}, state, {
-    upgradeSkipped: true,
+    isUpgradeSkipped: true,
     modal: null,
   });
 };
@@ -75,6 +75,19 @@ reducers[types.UPDATE_VERSION] = function(state, action) {
   });
 };
 
+reducers[types.CHECK_UPGRADE_SUCCESS] = function(state, action) {
+  return Object.assign({}, state, {
+    isUpgradeAvailable: action.data.upgradeAvailable,
+    remoteVersion: action.data.remoteVersion,
+  });
+};
+
+reducers[types.CHECK_UPGRADE_SUBSCRIBE] = function(state, action) {
+  return Object.assign({}, state, {
+    checkUpgradeTimer: action.data.checkUpgradeTimer,
+  });
+};
+
 reducers[types.OPEN_MODAL] = function(state, action) {
   return Object.assign({}, state, {
     modal: action.data.modal,

ui/js/redux/selectors/app.js

@@ -20,13 +20,19 @@ export const selectUpdateUrl = createSelector(selectPlatform, platform => {
   }
 });
 
-export const selectVersion = createSelector(_selectState, state => {
-  return state.version;
-});
+export const selectRemoteVersion = createSelector(
+  _selectState,
+  state => state.remoteVersion
+);
+
+export const selectIsUpgradeAvailable = createSelector(
+  _selectState,
+  state => state.isUpgradeAvailable
+);
 
 export const selectUpgradeFilename = createSelector(
   selectPlatform,
-  selectVersion,
+  selectRemoteVersion,
   (platform, version) => {
     switch (platform) {
       case "darwin":
@@ -56,9 +62,9 @@ export const selectDownloadComplete = createSelector(
   state => state.upgradeDownloadCompleted
 );
 
-export const selectUpgradeSkipped = createSelector(
+export const selectIsUpgradeSkipped = createSelector(
   _selectState,
-  state => state.upgradeSkipped
+  state => state.isUpgradeSkipped
 );
 
 export const selectUpgradeDownloadPath = createSelector(