Merge pull request #2360 from lbryio/blockers

Blockers

.eslintrc.json

@@ -35,6 +35,7 @@
     "standard/no-callback-literal": 0,
     "comma-dangle": ["error", "always-multiline"],
     "space-before-function-paren": ["error", "never"],
+    "jsx-quotes": ["error", "prefer-double"],
     "semi": [
       "error",
       "always",

package.json

@@ -171,7 +171,7 @@
   "lbrySettings": {
     "lbrynetDaemonVersion": "0.32.4",
     "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-OSNAME.zip",
-    "lbrynetDaemonDir": "static",
+    "lbrynetDaemonDir": "static/daemon",
     "lbrynetDaemonFileName": "lbrynet"
   }
 }

src/platforms/electron/Daemon.js

@@ -3,9 +3,11 @@ import { spawn, execSync } from 'child_process';
 import { Lbry } from 'lbry-redux';
 
 export default class Daemon {
-  static path = process.env.LBRY_DAEMON || (
-    process.env.NODE_ENV === 'production' ? path.join(process.resourcesPath, 'static', 'lbrynet') : path.join(__static, 'lbrynet')
-  );
+  static path =
+    process.env.LBRY_DAEMON ||
+    (process.env.NODE_ENV === 'production'
+      ? path.join(process.resourcesPath, 'static/daemon', 'lbrynet')
+      : path.join(__static, 'daemon/lbrynet'));
   subprocess;
   handlers;
 

src/platforms/electron/index.js

@@ -34,7 +34,7 @@ let daemon;
 
 const appState = {};
 
-const installExtensions = async() => {
+const installExtensions = async () => {
   const devtronExtension = require('devtron');
   return await devtronExtension.install();
 };
@@ -53,7 +53,7 @@ if (isDev) {
   process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = true;
 }
 
-app.on('ready', async() => {
+app.on('ready', async () => {
   let isDaemonRunning = false;
   await Lbry.status()
     .then(() => {
@@ -90,20 +90,21 @@ app.on('ready', async() => {
     const {
       default: installExtension,
       REACT_DEVELOPER_TOOLS,
-      REDUX_DEVTOOLS, REACT_PERF,
+      REDUX_DEVTOOLS,
+      REACT_PERF,
     } = require('electron-devtools-installer');
 
     await installExtension(REACT_DEVELOPER_TOOLS)
-      .then((name) => console.log(`Added Extension:  ${name}`))
-      .catch((err) => console.log('An error occurred: ', err));
+      .then(name => console.log(`Added Extension:  ${name}`))
+      .catch(err => console.log('An error occurred: ', err));
 
     await installExtension(REDUX_DEVTOOLS)
-      .then((name) => console.log(`Added Extension:  ${name}`))
-      .catch((err) => console.log('An error occurred: ', err));
+      .then(name => console.log(`Added Extension:  ${name}`))
+      .catch(err => console.log('An error occurred: ', err));
 
     await installExtension(REACT_PERF)
-      .then((name) => console.log(`Added Extension:  ${name}`))
-      .catch((err) => console.log('An error occurred: ', err));
+      .then(name => console.log(`Added Extension:  ${name}`))
+      .catch(err => console.log('An error occurred: ', err));
   }
 
   rendererWindow = createWindow(appState);
@@ -235,7 +236,7 @@ ipcMain.on('version-info-requested', () => {
       let json;
       try {
         json = JSON.parse(result);
-      } catch(e) {
+      } catch (e) {
         return;
       }
       const tagName = json.tag_name;
@@ -262,17 +263,20 @@ ipcMain.on('version-info-requested', () => {
   };
 
   const requestLatestRelease = (alreadyRedirected = false) => {
-    const req = https.get({
+    const req = https.get(
+      {
         hostname: 'api.github.com',
         path: '/repos/lbryio/lbry-desktop/releases/latest',
         headers: { 'user-agent': `LBRY/${localVersion}` },
-    }, res => {
+      },
+      res => {
         if (res.statusCode === 301 || res.statusCode === 302) {
           requestLatestRelease(res.headers.location, true);
         } else {
           onSuccess(res);
         }
-    });
+      }
+    );
 
     if (alreadyRedirected) return;
     req.on('error', err => {

src/platforms/electron/startSandbox.js

@@ -13,8 +13,8 @@ const { Lbry } = require('lbry-redux');
 delete global.window;
 
 export default async function startSandbox() {
-  const sandbox = express();
   const port = 5278;
+  const sandbox = express();
 
   sandbox.get('/set/:outpoint', async(req, res) => {
     const { outpoint } = req.params;
@@ -26,5 +26,13 @@ export default async function startSandbox() {
     res.send(`/sandbox/${outpoint}/`);
   });
 
-  sandbox.listen(port, 'localhost', () => console.log(`Sandbox listening on port ${port}.`));
+  sandbox
+    .listen(port, 'localhost', () => console.log(`Sandbox listening on port ${port}.`))
+    .on('error', err => {
+      if (err.code === 'EADDRINUSE') {
+        console.log(
+          'Server already listening at localhost://5278: This is probably another LBRY app running. If not, games in the app will not work.'
+        );
+      }
+    });
 }

src/ui/component/channelTile/index.js

@@ -1,7 +1,11 @@
 import { connect } from 'react-redux';
-import { doResolveUri, makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
+import {
+  doResolveUri,
+  makeSelectClaimForUri,
+  makeSelectIsUriResolving,
+  makeSelectTotalItemsForChannel,
+} from 'lbry-redux';
 import { doNavigate } from 'redux/actions/navigation';
-import { makeSelectTotalItemsForChannel } from 'redux/selectors/content';
 import ChannelTile from './view';
 
 const select = (state, props) => ({

src/ui/component/channelTile/view.jsx

@@ -45,7 +45,7 @@ class ChannelTile extends React.PureComponent<Props> {
       subscriptionUri = `lbry://${claim.permanent_url}`;
     }
 
-    const onClick = () => navigate('/show', { uri });
+    const onClick = () => navigate('/show', { uri, page: 1 });
 
     return (
       <section

src/ui/component/walletBalance/view.jsx

@@ -10,12 +10,14 @@ type Props = {
 const WalletBalance = (props: Props) => {
   const { balance } = props;
   return (
-    <section className="card card--section card--wallet-balance">
+    <section
+      className="card card--section card--wallet-balance"
+      style={{ backgroundImage: `url(${BalanceBackground})` }}
+    >
       <header className="card__header">
         <h2 className="card__title">{__('Balance')}</h2>
         <p className="card__subtitle">{__('You currently have')}</p>
       </header>
-
       <div className="card__content">
         {(balance || balance === 0) && (
           <CreditAmount large badge={false} amount={balance} precision={8} />

src/ui/constants/action_types.js

@@ -68,7 +68,6 @@ export const RESOLVE_URIS_COMPLETED = 'RESOLVE_URIS_COMPLETED';
 export const FETCH_CHANNEL_CLAIMS_STARTED = 'FETCH_CHANNEL_CLAIMS_STARTED';
 export const FETCH_CHANNEL_CLAIMS_COMPLETED = 'FETCH_CHANNEL_CLAIMS_COMPLETED';
 export const FETCH_CHANNEL_CLAIM_COUNT_STARTED = 'FETCH_CHANNEL_CLAIM_COUNT_STARTED';
-export const FETCH_CHANNEL_CLAIM_COUNT_COMPLETED = 'FETCH_CHANNEL_CLAIM_COUNT_COMPLETED';
 export const FETCH_CLAIM_LIST_MINE_STARTED = 'FETCH_CLAIM_LIST_MINE_STARTED';
 export const FETCH_CLAIM_LIST_MINE_COMPLETED = 'FETCH_CLAIM_LIST_MINE_COMPLETED';
 export const ABANDON_CLAIM_STARTED = 'ABANDON_CLAIM_STARTED';

src/ui/page/channel/view.jsx

@@ -32,11 +32,11 @@ class ChannelPage extends React.PureComponent<Props> {
     fetchClaims(uri, page || 1);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
-    const { page, fetchClaims } = this.props;
+  componentDidUpdate(prevProps: Props) {
+    const { page, fetchClaims, uri } = this.props;
 
-    if (nextProps.page && page !== nextProps.page) {
-      fetchClaims(nextProps.uri, nextProps.page);
+    if (prevProps.page && prevProps.page && page !== prevProps.page) {
+      fetchClaims(uri, page);
     }
   }
 

src/ui/page/file/view.jsx

@@ -226,7 +226,7 @@ class FilePage extends React.Component<Props> {
 
           <div className="media__actions media__actions--between">
             <div className="media__action-group--large">
-              {claimIsMine ? (
+              {claimIsMine && (
                 <Button
                   button="primary"
                   icon={icons.EDIT}
@@ -236,16 +236,18 @@ class FilePage extends React.Component<Props> {
                     navigate('/publish');
                   }}
                 />
-              ) : (
-                <SubscribeButton uri={channelUri} channelName={channelName} />
               )}
               {!claimIsMine && (
+                <React.Fragment>
+                  {channelUri && <SubscribeButton uri={channelUri} channelName={channelName} />}
+
                   <Button
                     button="alt"
                     icon={icons.TIP}
                     label={__('Send a tip')}
                     onClick={() => openModal(MODALS.SEND_TIP, { uri })}
                   />
+                </React.Fragment>
               )}
               <Button
                 button="alt"

src/ui/redux/reducers/content.js

@@ -13,17 +13,6 @@ reducers[ACTIONS.SET_PLAYING_URI] = (state, action) =>
     playingUri: action.data.uri,
   });
 
-reducers[ACTIONS.FETCH_CHANNEL_CLAIM_COUNT_COMPLETED] = (state, action) => {
-  const channelClaimCounts = Object.assign({}, state.channelClaimCounts);
-  const { uri, totalClaims } = action.data;
-
-  channelClaimCounts[uri] = totalClaims;
-
-  return Object.assign({}, state, {
-    channelClaimCounts,
-  });
-};
-
 reducers[ACTIONS.SET_CONTENT_POSITION] = (state, action) => {
   const { claimId, outpoint, position } = action.data;
   return {

src/ui/redux/selectors/content.js

@@ -14,17 +14,6 @@ export const selectPlayingUri = createSelector(
   state => state.playingUri
 );
 
-export const selectChannelClaimCounts = createSelector(
-  selectState,
-  state => state.channelClaimCounts || {}
-);
-
-export const makeSelectTotalItemsForChannel = (uri: string) =>
-  createSelector(
-    selectChannelClaimCounts,
-    byUri => byUri && byUri[uri]
-  );
-
 export const selectRewardContentClaimIds = createSelector(
   selectState,
   state => state.rewardedContentClaimIds

src/ui/scss/component/_media.scss

@@ -136,6 +136,7 @@
   display: inline;
   font-size: 2rem;
   line-height: 1.33;
+  margin-right: var(--spacing-vertical-small);
 }
 
 //  M E D I A
@@ -299,11 +300,10 @@
 
   &:not(:empty) {
     height: 2.55rem;
-    margin-top: -1px;
+    margin-top: 0px;
 
     margin-bottom: var(--spacing-vertical-small);
     padding-top: var(--spacing-vertical-small);
-    padding-left: var(--spacing-vertical-small);
   }
 
   .badge {