Merge pull request #2466 from lbryio/fixes

General fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "LBRY",
-  "version": "0.31.1",
+  "version": "0.32.0-rc.1",
   "description": "A browser for the LBRY network, a digital marketplace controlled by its users.",
   "keywords": [
     "lbry"

src/ui/component/channelContent/view.jsx

@@ -14,7 +14,6 @@ type Props = {
   claimsInChannel: Array<StreamClaim>,
   channelIsMine: boolean,
   fetchClaims: (string, number) => void,
-  location: UrlLocation,
 };
 
 function ChannelContent(props: Props) {

src/ui/component/common/form-components/form-field.jsx

@@ -1,16 +1,12 @@
 // @flow
 import type { ElementRef } from 'react';
-import React, { Suspense } from 'react';
+import React from 'react';
 import ReactDOMServer from 'react-dom/server';
-import MarkdownPreview from 'component/common/markdown-preview';
 import 'easymde/dist/easymde.min.css';
 import Toggle from 'react-toggle';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
-
+import SimpleMDE from 'react-simplemde-editor';
-const SimpleMDE = React.lazy(() =>
+import MarkdownPreview from 'component/common/markdown-preview-internal';
-  import(/* webpackChunkName: "SimpleMDE" */
-  'react-simplemde-editor')
-);
 
 type Props = {
   name: string,
@@ -137,21 +133,20 @@ export class FormField extends React.PureComponent<Props> {
           <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
             <fieldset-section>
               <label htmlFor={name}>{label}</label>
-              <Suspense fallback={<div />}>
+              <SimpleMDE
-                <SimpleMDE
+                {...inputProps}
-                  {...inputProps}
+                id={name}
-                  id={name}
+                type="textarea"
-                  type="textarea"
+                events={handleEvents}
-                  events={handleEvents}
+                options={{
-                  options={{
+                  spellChecker: false,
-                    hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
+                  hideIcons: ['heading', 'image', 'fullscreen', 'side-by-side'],
-                    previewRender(plainText) {
+                  previewRender(plainText) {
-                      const preview = <MarkdownPreview content={plainText} />;
+                    const preview = <MarkdownPreview content={plainText} />;
-                      return ReactDOMServer.renderToString(preview);
+                    return ReactDOMServer.renderToString(preview);
-                    },
+                  },
-                  }}
+                }}
-                />
+              />
-              </Suspense>
             </fieldset-section>
           </div>
         );

src/ui/component/common/paginate.jsx

@@ -40,12 +40,10 @@ function Paginate(props: Props) {
     }
   }
 
-  if (totalPages <= 1 || loading) {
-    return null;
-  }
-
   return (
-    <Form>
+    // Hide the paginate controls if we are loading or there is only one page
+    // It should still be rendered to trigger the onPageChange callback
+    <Form style={totalPages <= 1 || loading ? { display: 'none' } : null}>
       <fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
         <fieldset-section>
           <ReactPaginate

src/ui/component/fileViewer/internal/player.jsx

@@ -34,12 +34,25 @@ type State = {
     contentType?: string,
     downloadPath?: string,
     fileType?: string,
+    // Just using `any` because flow isn't working with `fs.createReadStream`
+    stream?: ({}) => any,
   },
 };
 
 class MediaPlayer extends React.PureComponent<Props, State> {
   static SANDBOX_TYPES = ['application/x-lbry', 'application/x-ext-lbry'];
-  static FILE_MEDIA_TYPES = ['text', 'script', 'e-book', 'comic-book', 'document', '3D-file', 'video', 'audio'];
+  static FILE_MEDIA_TYPES = [
+    'text',
+    'script',
+    'e-book',
+    'comic-book',
+    'document',
+    '3D-file',
+    // @if TARGET='web'
+    'video',
+    'audio',
+    // @endif
+  ];
   static SANDBOX_SET_BASE_URL = 'http://localhost:5278/set/';
   static SANDBOX_CONTENT_BASE_URL = 'http://localhost:5278';
 
@@ -276,6 +289,10 @@ class MediaPlayer extends React.PureComponent<Props, State> {
       contentType,
       downloadPath,
       fileType: path.extname(fileName).substring(1),
+      // Readable stream from file
+      // @if TARGET='app'
+      stream: opts => fs.createReadStream(downloadPath, opts),
+      // @endif
     };
 
     // Update state

src/ui/component/navigationHistory/view.jsx

@@ -87,7 +87,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
           <Button button="link" label={allSelected ? __('Cancel') : __('Select All')} onClick={selectHandler} />
         </div>
         {!!historyItems.length && (
-          <section className="card__content item-list">
+          <section className="card card__content item-list">
             {historyItems.map(item => (
               <NavigationHistoryItem
                 key={item.uri}
@@ -107,9 +107,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
       <div className="main--empty">
         <section className="card card--section">
           <header className="card__header">
-            <h2 className="card__title">
+            <h2 className="card__title">{__('Your history is empty, what are you doing here?')}</h2>
-              {__("You don't have anything saved in history yet, go check out some content on LBRY!")}
-            </h2>
           </header>
 
           <div className="card__content">

src/ui/component/navigationHistoryRecent/view.jsx

@@ -16,7 +16,7 @@ export default function NavigationHistoryRecent(props: Props) {
   const { history = [] } = props;
 
   return history.length ? (
-    <div className="item-list">
+    <div className="card item-list">
       <section className="card__content">
         {history.map(({ lastViewed, uri }) => (
           <NavigationHistoryItem slim key={uri} uri={uri} lastViewed={lastViewed} />

src/ui/component/publishForm/view.jsx

@@ -70,7 +70,7 @@ class PublishForm extends React.PureComponent<Props> {
     (this: any).getNewUri = this.getNewUri.bind(this);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const { thumbnail } = this.props;
     if (!thumbnail) {
       this.props.resetThumbnailStatus();
@@ -190,7 +190,7 @@ class PublishForm extends React.PureComponent<Props> {
   }
 
   handlePublish() {
-    const { filePath, licenseType, licenseUrl, otherLicenseDescription, myClaimForUri, publish } = this.props;
+    const { filePath, licenseType, licenseUrl, otherLicenseDescription, publish } = this.props;
 
     let publishingLicense;
     switch (licenseType) {
@@ -264,7 +264,7 @@ class PublishForm extends React.PureComponent<Props> {
     // If there is an error it will be presented as an inline error as well
     return (
       !isFormValid && (
-        <div className="card__content card__subtitle error-text">
+        <div className="card__content error-text">
           {!title && <div>{__('A title is required')}</div>}
           {!name && <div>{__('A URL is required')}</div>}
           {name && nameError && <div>{__('The URL you created is not valid')}</div>}
@@ -581,22 +581,17 @@ class PublishForm extends React.PureComponent<Props> {
             </section>
 
             <section className="card card--section">
-              <div className="card__content">
+              <div className="card__actions">
+                <Submit
+                  label={submitLabel}
+                  disabled={formDisabled || !formValid || uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS}
+                />
+                <Button button="link" onClick={this.handleCancelPublish} label={__('Cancel')} />
+              </div>
+              <p className="help">
                 {__('By continuing, you accept the')}{' '}
                 <Button button="link" href="https://www.lbry.com/termsofservice" label={__('LBRY Terms of Service')} />.
-              </div>
+              </p>
-            </section>
-
-            <section className="card card--section">
-              <div className="card__content">
-                <div className="card__actions">
-                  <Submit
-                    label={submitLabel}
-                    disabled={formDisabled || !formValid || uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS}
-                  />
-                  <Button button="link" onClick={this.handleCancelPublish} label={__('Cancel')} />
-                </div>
-              </div>
             </section>
           </div>
 

src/ui/component/transactionList/internal/transaction-list-item.jsx

@@ -7,7 +7,6 @@ import CreditAmount from 'component/common/credit-amount';
 import DateTime from 'component/dateTime';
 import Button from 'component/button';
 import { buildURI } from 'lbry-redux';
-import { formatLbryUriForWeb } from 'util/uri';
 
 type Props = {
   transaction: Transaction,
@@ -67,7 +66,7 @@ class TransactionListItem extends React.PureComponent<Props> {
         <td className="table__item--actionable">
           {reward && <span>{reward.reward_title}</span>}
           {name && claimId && (
-            <Button constrict button="link" navigate={buildURI({ claimName: name, claimId })}>
+            <Button button="link" navigate={buildURI({ claimName: name, claimId })}>
               {name}
             </Button>
           )}

src/ui/component/transactionList/view.jsx

@@ -2,7 +2,6 @@
 import * as icons from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
 import * as React from 'react';
-import { List } from 'react-virtualized';
 import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import FileExporter from 'component/common/file-exporter';
@@ -103,7 +102,7 @@ class TransactionList extends React.PureComponent<Props> {
             </div>
           )}
         </header>
-        {!transactionList.length && <p>{emptyMessage || __('No transactions to list.')}</p>}
+        {!transactionList.length && <p className="card__subtitle">{emptyMessage || __('No transactions to list.')}</p>}
 
         {!!transactionList.length && (
           <React.Fragment>

src/ui/component/transactionListRecent/view.jsx

@@ -31,11 +31,6 @@ class TransactionListRecent extends React.PureComponent<Props> {
             {__('Recent Transactions')}
             <RefreshTransactionButton />
           </h2>
-
-          <p className="card__subtitle">
-            {__('To view all of your transactions, navigate to the')}{' '}
-            <Button button="link" navigate="/$/transactions" label={__('transactions page')} />.
-          </p>
         </header>
 
         {fetchingTransactions && !hasTransactions && (

src/ui/component/userVerify/view.jsx

@@ -28,7 +28,7 @@ class UserVerify extends React.PureComponent<Props> {
     return (
       <React.Fragment>
         <section className="card card--section">
-          <header className="card__header">
+          <header className="card__header--flat">
             <h1 className="card__title">{__('Final Human Proof')}</h1>
             <p className="card__subtitle">
               Finally, please complete <strong>one and only one</strong> of the options below.

src/ui/component/walletBalance/view.jsx

@@ -16,9 +16,9 @@ const WalletBalance = (props: Props) => {
     >
       <header className="card__header">
         <h2 className="card__title">{__('Balance')}</h2>
-        <p className="card__subtitle">{__('You currently have')}</p>
       </header>
       <div className="card__content">
+        <h3>{__('You currently have')}</h3>
         {(balance || balance === 0) && <CreditAmount large badge={false} amount={balance} precision={8} />}
       </div>
     </section>

src/ui/page/settings/view.jsx

@@ -159,7 +159,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
             <section className="card card--section">
               <header className="card__header">
                 <h2 className="card__title">{__('Download Directory')}</h2>
-                <p className="card__subtitle">{__('LBRY downloads will be saved here.')}</p>
               </header>
 
               <div className="card__content">
@@ -171,6 +170,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
                       setDaemonSetting('download_dir', newDirectory);
                     }}
                   />
+                  <p className="help">{__('LBRY downloads will be saved here.')}</p>
                 </Form>
               </div>
             </section>
@@ -178,9 +178,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
             <section className="card card--section">
               <header className="card__header">
                 <h2 className="card__title">{__('Max Purchase Price')}</h2>
-                <p className="card__subtitle">
-                  {__('This will prevent you from purchasing any content over a certain cost, as a safety measure.')}
-                </p>
               </header>
 
               <Form className="card__content">
@@ -212,15 +209,16 @@ class SettingsPage extends React.PureComponent<Props, State> {
                     price={daemonSettings.max_key_fee ? daemonSettings.max_key_fee : defaultMaxKeyFee}
                   />
                 )}
+
+                <p className="help">
+                  {__('This will prevent you from purchasing any content over a certain cost, as a safety measure.')}
+                </p>
               </Form>
             </section>
 
             <section className="card card--section">
               <header className="card__header">
                 <h2 className="card__title">{__('Purchase Confirmations')}</h2>
-                <p className="card__subtitle">
-                  {__("When this option is chosen, LBRY won't ask you to confirm downloads below your chosen price.")}
-                </p>
               </header>
 
               <Form className="card__content">
@@ -251,6 +249,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
                     price={instantPurchaseMax}
                   />
                 )}
+
+                <p className="help">
+                  {__("When this option is chosen, LBRY won't ask you to confirm downloads below your chosen price.")}
+                </p>
               </Form>
             </section>
 
@@ -397,11 +399,12 @@ class SettingsPage extends React.PureComponent<Props, State> {
             <section className="card card--section">
               <header className="card__header">
                 <h2 className="card__title">{__('Application Cache')}</h2>
-                <p className="card__subtitle">
-                  {__('This will clear the application cache. Your wallet will not be affected.')}
-                </p>
               </header>
 
+              <p className="help--warning">
+                {__('This will clear the application cache. Your wallet will not be affected.')}
+              </p>
+
               <div className="card__content">
                 <Button
                   button="primary"

src/ui/page/show/view.jsx

@@ -26,8 +26,8 @@ class ShowPage extends React.PureComponent<Props> {
     if (!isResolvingUri) resolveUri(uri);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentDidUpdate() {
-    const { isResolvingUri, resolveUri, claim, uri, totalPages } = nextProps;
+    const { isResolvingUri, resolveUri, claim, uri, totalPages } = this.props;
     if (
       !isResolvingUri &&
       uri &&

src/ui/scss/component/_button.scss

@@ -56,19 +56,6 @@
   box-sizing: border-box;
 }
 
-// We need the :disabled to override the default disabled button styles
-// This is a little different because we still want to keep the button styled
-// since it acts as an "active" state
-.button--subscription-view-selected:disabled {
-  color: $lbry-teal-5;
-  border-bottom: 1px solid $lbry-teal-5;
-  opacity: 1;
-
-  html[data-mode='dark'] & {
-    color: $lbry-teal-3;
-  }
-}
-
 .button--uri-indicator {
   max-width: 100%;
   height: 1.2em;

src/ui/scss/component/_card.scss

@@ -4,12 +4,12 @@
   margin-bottom: var(--spacing-vertical-xlarge);
   position: relative;
   border-radius: var(--card-radius);
-  box-shadow: var(--box-shadow) $lbry-gray-1;
+  box-shadow: var(--card-box-shadow) $lbry-gray-1;
 
   html[data-mode='dark'] & {
     background-color: rgba($lbry-white, 0.1);
     border-color: rgba($lbry-white, 0.1);
-    box-shadow: var(--box-shadow) darken($lbry-gray-1, 80%);
+    box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
   }
 }
 
@@ -199,6 +199,9 @@
 //  S U B T I T L E
 
 .card__subtitle {
+  @extend .help;
+  background-color: lighten($lbry-gray-1, 7%);
+  color: darken($lbry-gray-5, 30%);
   font-size: 1.15rem;
   margin-bottom: var(--spacing-vertical-small);
 
@@ -210,6 +213,10 @@
     bottom: -0.12rem;
     position: relative;
   }
+
+  [data-mode='dark'] & {
+    background-color: darken($lbry-gray-5, 20%);
+  }
 }
 
 //  C A R D
@@ -218,7 +225,7 @@
 .card__title {
   font-size: 2rem;
   font-weight: 600;
-  padding-bottom: var(--spacing-vertical-medium);
+  margin-bottom: var(--spacing-vertical-medium);
 
   + .card__content {
     margin-top: var(--spacing-vertical-medium);

src/ui/scss/component/_form-field.scss

@@ -5,6 +5,12 @@
 // This is because many styles inside `lbry/components/sass/form/` are very specific
 // As styles become hardened here, they _should_ slowly move over to that repo
 
+input,
+textarea,
+select {
+  border-radius: var(--input-border-radius);
+}
+
 input-submit {
   align-items: center;
 }
@@ -82,6 +88,16 @@ fieldset-group {
       &:first-of-type {
         input {
           border-right: none;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &:nth-of-type(2) {
+        input,
+        select {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
         }
       }
     }
@@ -126,7 +142,12 @@ fieldset-group {
         padding-right: 0;
         border: 1px solid;
         border-right: 0;
+        border-color: $lbry-black;
         color: $lbry-gray-4;
+
+        [data-mode='dark'] & {
+          border-color: $lbry-gray-4;
+        }
       }
     }
 
@@ -135,6 +156,8 @@ fieldset-group {
 
       input {
         border-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
         padding-left: var(--spacing-xs);
 
         &:focus {
@@ -172,10 +195,11 @@ form {
 
 fieldset-section {
   input-submit {
-    input,
+    input {
-    select {
+      &:first-child {
-      &:first-child:not(:focus) {
         border-right-color: transparent;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
       }
     }
 
@@ -193,7 +217,10 @@ fieldset-section {
     }
 
     .button {
-      border-radius: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: var(--input-border-radius);
+      border-bottom-right-radius: var(--input-border-radius);
     }
   }
 

src/ui/scss/component/_markdown-editor.scss

@@ -3,7 +3,8 @@
   border-right: 1px solid $lbry-gray-1;
   border-bottom: 1px solid $lbry-gray-1;
   border-left: 1px solid $lbry-gray-1;
-  border-radius: 0;
+  border-bottom-left-radius: var(--input-border-radius);
+  border-bottom-right-radius: var(--input-border-radius);
   background: $lbry-white;
   color: $lbry-black;
 
@@ -49,7 +50,8 @@
 .editor-toolbar {
   background-color: $lbry-gray-1;
   border: none;
-  border-radius: 0;
+  border-top-left-radius: var(--input-border-radius);
+  border-top-right-radius: var(--input-border-radius);
   opacity: 1; // ?
 
   &:hover {

src/ui/scss/component/_media.scss

@@ -1,7 +1,9 @@
 //  M E D I A
 //  C A R D
 .media-card {
+  @include mediaThumbHoverZoom;
   font-size: 1.2rem;
+  border-radius: var(--card-radius);
 
   .media__title {
     margin-bottom: var(--spacing-vertical-small);
@@ -10,22 +12,13 @@
   .media__properties {
     height: 1em;
   }
-
-  &:hover {
-    box-shadow: 0 0 50px rgba($lbry-black, 0.08);
-    background-color: rgba($lbry-black, 0.04);
-
-    html[data-mode='dark'] & {
-      box-shadow: 0 0 50px rgba($lbry-white, 0.07);
-      background-color: rgba($lbry-white, 0.03);
-    }
-  }
 }
 
 //  M E D I A
 //  T I L E
 
 .media-tile {
+  @include mediaThumbHoverZoom;
   display: flex;
   font-size: 1.5rem;
   position: relative;
@@ -106,6 +99,7 @@
 
 .media__thumb {
   @include thumbnail;
+  border-radius: var(--card-radius);
 
   &:not(.media__thumb--nsfw) {
     background-color: $lbry-gray-2;

src/ui/scss/component/_placeholder.scss

@@ -35,17 +35,6 @@
 }
 
 .media-tile--large.media-placeholder {
-  .media__title,
-  .media__channel,
-  .media__subtitle {
-    // display: block;
-    // padding-left: var(--spacing-vertical-large);
-  }
-
-  .media__thumb {
-    // margin-right: var(--spacing-vertical-large);
-  }
-
   .media__title {
     width: 60%;
     height: 3rem;

src/ui/scss/component/_search.scss

@@ -1,5 +1,5 @@
 .search__header {
-  padding: var(--spacing-vertical-large);
+  margin-bottom: var(--spacing-vertical-large);
 
   .placeholder {
     background-color: rgba($lbry-white, 0.1);
@@ -24,10 +24,6 @@
   }
 }
 
-.search__results-wrapper {
-  margin: var(--spacing-vertical-large);
-}
-
 .search__results-section {
   margin-bottom: var(--spacing-vertical-large);
   min-height: 200px;

src/ui/scss/component/_table.scss

@@ -31,25 +31,15 @@ table,
 .table--transactions {
   td:nth-of-type(1) {
     // TX amounts
-    width: 25%;
     font-size: 0.9em;
     font-weight: 600;
   }
 
-  td:nth-of-type(2) {
-    width: 20%;
-  }
-
   td:nth-of-type(3) {
-    width: 22.5%;
+    max-width: 150px;
-  }
+    overflow: hidden;
-
+    white-space: nowrap;
-  td:nth-of-type(4) {
+    text-overflow: ellipsis;
-    width: 17.5%;
-  }
-
-  td:nth-of-type(5) {
-    width: 15%;
   }
 }
 

src/ui/scss/init/_gui.scss

@@ -132,8 +132,8 @@ code {
   color: $lbry-gray-5;
   display: block;
   padding: 1rem;
-  margin-top: var(--spacing-vertical-large);
+  margin-top: var(--spacing-vertical-medium);
-  margin-bottom: var(--spacing-vertical-large);
+  margin-bottom: var(--spacing-vertical-medium);
   border-radius: 5px;
 
   html[data-mode='dark'] & {
@@ -142,6 +142,7 @@ code {
 }
 
 .help--warning {
+  @extend .help;
   background-color: $lbry-yellow-3;
   color: $lbry-black;
 

src/ui/scss/init/_mixins.scss

@@ -1,8 +1,21 @@
 @mixin placeholder {
   animation: pulse 2s infinite ease-in-out;
   background-color: $lbry-gray-2;
+  border-radius: var(--card-radius);
 
   html[data-mode='dark'] & {
     background-color: rgba($lbry-white, 0.1);
   }
 }
+
+@mixin mediaThumbHoverZoom {
+  .media__thumb {
+    transition: all 0.2s ease;
+  }
+
+  &:hover {
+    .media__thumb {
+      transform: scale(1.05);
+    }
+  }
+}

src/ui/scss/init/_vars.scss

@@ -36,6 +36,7 @@ $large-breakpoint: 1921px;
 
   // Input
   --input-border-size: 1px;
+  --input-border-radius: 2px;
 
   // Select
   --select-height: 30px;
@@ -53,7 +54,7 @@ $large-breakpoint: 1921px;
   // Card
   --card-radius: 5px;
   --card-max-width: 1000px;
-  --card-box-shadow: 0px 8px 20px;
+  --card-box-shadow: 0px 0px 30px 2px;
 
   // File
   --file-tile-media-height: 125px;