Merge pull request #2420 from lbryio/routing-fixes

Web fixes

package.json

@@ -74,6 +74,7 @@
     "classnames": "^2.2.5",
     "codemirror": "^5.39.2",
     "connected-react-router": "^6.3.2",
+    "cookie": "^0.3.1",
     "copy-webpack-plugin": "^4.6.0",
     "country-data": "^0.0.31",
     "cross-env": "^5.2.0",

src/ui/analytics.js

@@ -72,11 +72,12 @@ const analytics: Analytics = {
 
 // Initialize google analytics
 // Set `debug: true` for debug info
-// Currently doesn't actually differentiate between web/desktop
+// Will change once we have separate ids for desktop/web
-ReactGA.initialize('UA-60403362-12', {
+const UA_ID = IS_WEB ? 'UA-60403362-12' : 'UA-60403362-12';
+
+ReactGA.initialize(UA_ID, {
   gaOptions: { name: IS_WEB ? 'web' : 'desktop' },
   testMode: process.env.NODE_ENV !== 'production',
-  // debug: true,
 });
 
 // Manually call the first page view

src/ui/component/firstRun/view.jsx

@@ -121,7 +121,11 @@ export default class FirstRun extends PureComponent<Props> {
               <div className="card__content">
                 <p>{__("Check out some of the neat content below me. I'll see you around!")}</p>
                 <div className="card__actions">
-                  <Button button="primary" onClick={completeFirstRun} label={__('See You Later')} />
+                  <Button
+                    button="primary"
+                    onClick={completeFirstRun}
+                    label={__('Lets Get Started')}
+                  />
                 </div>
               </div>
             </Help>

src/ui/component/viewers/videoViewer.jsx

@@ -2,11 +2,9 @@
 import type { Claim } from 'types/claim';
 import React, { Suspense } from 'react';
 import { stopContextMenu } from 'util/context-menu';
-import(
+import(/* webpackChunkName: "videojs" */
-  /* webpackChunkName: "videojs" */
+/* webpackPreload: true */
-  /* webpackPreload: true */
+'video.js/dist/video-js.css');
-  'video.js/dist/video-js.css'
-);
 
 type Props = {
   source: {
@@ -25,7 +23,9 @@ class AudioVideoViewer extends React.PureComponent<Props> {
   componentDidMount() {
     const { contentType, poster, claim } = this.props;
 
-    const path = `https://api.lbry.tv/content/claims/${claim.name}/${claim.claim_id}/stream.mp4`;
+    const path = `https://api.piratebay.com/content/claims/${claim.name}/${
+      claim.claim_id
+    }/stream.mp4`;
     const sources = [
       {
         src: path,
@@ -41,12 +41,10 @@ class AudioVideoViewer extends React.PureComponent<Props> {
       sources,
     };
 
-    import(
+    import(/* webpackChunkName: "videojs" */
-      /* webpackChunkName: "videojs" */
+    /* webpackMode: "lazy" */
-      /* webpackMode: "lazy" */
+    /* webpackPreload: true */
-      /* webpackPreload: true */
+    'video.js').then(videojs => {
-      'video.js'
-    ).then(videojs => {
       if (videojs.__esModule) {
         videojs = videojs.default;
       }

src/ui/index.jsx

@@ -21,17 +21,16 @@ import {
 import { Lbry, doToast, isURIValid, setSearchApi } from 'lbry-redux';
 import { doDownloadLanguages, doUpdateIsNightAsync } from 'redux/actions/settings';
 import { doAuthenticate, Lbryio, rewards, doBlackListedOutpointsSubscribe } from 'lbryinc';
-import(
-  /* webpackChunkName: "styles" */
-  /* webpackPrefetch: true */
-  'scss/all.scss'
-);
 import { store, history } from 'store';
 import pjson from 'package.json';
 import app from './app';
 import analytics from './analytics';
 import doLogWarningConsoleMessage from './logWarningConsoleMessage';
 import { ConnectedRouter } from 'connected-react-router';
+import cookie from 'cookie';
+import(/* webpackChunkName: "styles" */
+/* webpackPrefetch: true */
+'scss/all.scss');
 
 const APPPAGEURL = 'lbry://?';
 
@@ -67,7 +66,7 @@ Lbry.setDaemonConnectionString(SDK_API_URL);
 // We interect with ipcRenderer to get the auth key from a users keyring
 // We keep a local variable for authToken beacuse `ipcRenderer.send` does not
 // contain a response, so there is no way to know when it's been set
-// @if TARGET='app'
+
 let authToken;
 Lbryio.setOverride(
   'setAuthToken',
@@ -89,6 +88,9 @@ Lbryio.setOverride(
 
         const newAuthToken = response.auth_token;
         authToken = newAuthToken;
+        // @if TARGET='web'
+        document.cookie = cookie.serialize('auth_token', authToken);
+        // @endif
         // @if TARGET='app'
         ipcRenderer.send('set-auth-token', authToken);
         // @endif
@@ -112,10 +114,13 @@ Lbryio.setOverride(
 
         ipcRenderer.send('get-auth-token');
         // @endif
+        // @if TARGET='web'
+        const { auth_token: authToken } = cookie.parse(document.cookie);
+        resolve(authToken);
+        // @endif
       }
     })
 );
-// @endif
 
 rewards.setCallback('claimFirstRewardSuccess', () => {
   app.store.dispatch(doOpenModal(MODALS.FIRST_REWARD));

src/ui/modal/modalPublish/index.js

@@ -2,10 +2,12 @@ import { connect } from 'react-redux';
 import { doHideModal } from 'redux/actions/app';
 import ModalSendTip from './view';
 import { doClearPublish } from 'redux/actions/publish';
+import { push } from 'connected-react-router';
 
 const perform = dispatch => ({
   closeModal: () => dispatch(doHideModal()),
   clearPublish: () => dispatch(doClearPublish()),
+  navigate: path => dispatch(push(path)),
 });
 
 export default connect(

src/ui/modal/modalPublish/view.jsx

@@ -9,7 +9,7 @@ type Props = {
   uri: string,
 };
 
-class ModalSendTip extends React.PureComponent<Props> {
+class ModalPublishSuccess extends React.PureComponent<Props> {
   render() {
     const { closeModal, clearPublish, navigate, uri } = this.props;
 
@@ -20,7 +20,7 @@ class ModalSendTip extends React.PureComponent<Props> {
         contentLabel={__('File published')}
         onConfirmed={() => {
           clearPublish();
-          navigate('/published');
+          navigate('/$/published');
           closeModal();
         }}
       >
@@ -38,4 +38,4 @@ class ModalSendTip extends React.PureComponent<Props> {
   }
 }
 
-export default ModalSendTip;
+export default ModalPublishSuccess;

src/ui/modal/modalRewardApprovalRequired/index.js

@@ -1,16 +1,24 @@
 import { connect } from 'react-redux';
 import { doHideModal } from 'redux/actions/app';
+import { withRouter } from 'react-router-dom';
 import ModalRewardApprovalRequired from './view';
 
-const perform = dispatch => ({
+const perform = (dispatch, ownProps) => ({
   doAuth: () => {
+    const {
+      location: { pathname },
+      history,
+    } = ownProps;
+    const currentPath = pathname.split('/$/')[1];
     dispatch(doHideModal());
-    // dispatch(doAuthNavigate());
+    history.push(`/$/auth?redirect=${currentPath}`);
   },
   closeModal: () => dispatch(doHideModal()),
 });
 
-export default connect(
+export default withRouter(
-  null,
+  connect(
-  perform
+    null,
-)(ModalRewardApprovalRequired);
+    perform
+  )(ModalRewardApprovalRequired)
+);

src/ui/page/help/index.js

@@ -9,8 +9,8 @@ const select = state => ({
   deamonSettings: selectDaemonSettings(state),
 });
 
-const perform = dispatch => ({
+const perform = (dispatch, ownProps) => ({
-  // doAuth: () => dispatch(doAuthNavigate('/help')),
+  doAuth: () => ownProps.history.push('/$/auth?redirect=help'),
   fetchAccessToken: () => dispatch(doFetchAccessToken()),
 });
 

src/ui/redux/actions/app.js

@@ -23,6 +23,7 @@ import {
 } from 'redux/selectors/app';
 import { doAuthenticate } from 'lbryinc';
 import { lbrySettings as config, version as appVersion } from 'package.json';
+import { push } from 'connected-react-router';
 
 // @if TARGET='app'
 const { autoUpdater } = remote.require('electron-updater');
@@ -388,7 +389,7 @@ export function doConditionalAuthNavigate(newSession) {
     const modal = selectModal(state);
 
     if (newSession || (modal && modal.id !== MODALS.EMAIL_COLLECTION)) {
-      // dispatch(doAuthNavigate());
+      dispatch(push('/$/auth'));
     }
   };
 }

src/ui/store.js

@@ -74,21 +74,37 @@ const walletFilter = createFilter('wallet', ['receiveAddress']);
 const searchFilter = createFilter('search', ['options']);
 
 const persistOptions = {
-  whitelist: ['subscriptions', 'publish', 'wallet', 'content', 'fileInfo', 'app', 'search'],
+  whitelist: [
+    // @if TARGET='app'
+    'publish',
+    'wallet',
+    'fileInfo',
+    // @endif
+    'content',
+    'subscriptions',
+    'app',
+    'search',
+  ],
   // Order is important. Needs to be compressed last or other transforms can't
   // read the data
-  transforms: [walletFilter, contentFilter, fileInfoFilter, appFilter, searchFilter, compressor],
+  transforms: [
-  debounce: 10000,
+    // @if TARGET='app'
+    walletFilter,
+    contentFilter,
+    fileInfoFilter,
+    // @endif
+    appFilter,
+    searchFilter,
+    compressor,
+  ],
+  debounce: IS_WEB ? 5000 : 10000,
   storage: localForage,
 };
 
-// Dont' persist anything on web (for now)
-// @if TARGET='app'
 window.cacheStore = persistStore(store, persistOptions, err => {
   if (err) {
     console.error('Unable to load saved settings');
   }
 });
-// @endif
 
 export { store, history };

yarn.lock

@@ -2696,7 +2696,7 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
-cookie@0.3.1:
+cookie@0.3.1, cookie@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
   integrity sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=