Merge 'release' into 'master' (#2327)

* fix: wallet balance style with 0lbc

* v0.29.3-rc.1

* v0.29.3

* fix: videoplayer

Switched from timeout to slight delay, works consistently on lbry://test-stream-1. This also fixes the white screen issue (copied most code from current master).

* fix: add back timeout

* fix: phone collection styling

* v0.29.4-rc.2

* update changelog

* v0.29.4

* fix rebase

CHANGELOG.md

@@ -14,7 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Fixed
 
-## [0.29.1] - 2019-3-1
+## [0.29.4] - 2019-3-12
+
+### Fixed
+
+- Style issue on phone number collection modal
+- White screen when watching videos for some files
+
+## [0.29.3] - 2019-3-7
+
+### Fixed
+
+- Minor style issue with 0 LBC balance on the wallet page
+
+## [0.29.2] - 2019-3-1
 
 ### Fixed
 

package.json

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

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

@@ -1,4 +1,4 @@
-/* eslint-disable */
+// @flow
 import type { Claim } from 'types/claim';
 import * as React from 'react';
 // @if TARGET='app'
@@ -14,7 +14,6 @@ type Props = {
   contentType: string,
   mediaType: string,
   downloadCompleted: boolean,
-  playingUri: ?string,
   volume: number,
   position: ?number,
   downloadPath: string,
@@ -74,9 +73,9 @@ class MediaPlayer extends React.PureComponent<Props, State> {
 
   componentDidMount() {
     this.playMedia();
-
     // Temp hack to force the video to play if the metadataloaded event was never fired
     // Will be removed with the new video player
+    // Unoptimized MP4s will fail to render.
     // @if TARGET='app'
     setTimeout(() => {
       const { hasMetadata } = this.state;
@@ -88,23 +87,8 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     // @endif
   }
 
-  // @if TARGET='app'
-  componentDidUpdate(prevProps: Props) {
-    const { downloadCompleted } = this.props;
-    const { fileSource } = this.state;
-
-    const el = this.mediaContainer.current;
-
-    if (this.props.playingUri && !prevProps.playingUri && !el.paused) {
-      el.pause();
-    } else if (this.isSupportedFile() && !fileSource && downloadCompleted) {
-      this.renderFile();
-    }
-  }
-  // @endif
-
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.togglePlay);
+    document.removeEventListener('keydown', this.togglePlayListener);
     const mediaElement = this.mediaContainer.current.children[0];
     if (mediaElement) {
       mediaElement.removeEventListener('click', this.togglePlay);
@@ -125,7 +109,6 @@ class MediaPlayer extends React.PureComponent<Props, State> {
   }
 
   playMedia() {
-    // @if TARGET='app'
     const container = this.mediaContainer.current;
     const {
       downloadCompleted,
@@ -138,6 +121,8 @@ class MediaPlayer extends React.PureComponent<Props, State> {
       fileName,
     } = this.props;
 
+    // @if TARGET='app'
+
     const renderMediaCallback = error => {
       if (error) this.setState({ unplayable: true });
     };
@@ -157,15 +142,18 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     }
     // Render default viewer: render-media (video, audio, img, iframe)
     else {
-      player.append(
-        {
-          name: fileName,
-          createReadStream: opts => fs.createReadStream(downloadPath, opts),
-        },
-        container,
-        { autoplay: true, controls: true },
-        renderMediaCallback.bind(this)
-      );
+      // Temp hack to help in some metadata loading cases
+      setTimeout(() => {
+        player.append(
+          {
+            name: fileName,
+            createReadStream: opts => fs.createReadStream(downloadPath, opts),
+          },
+          container,
+          { autoplay: true, controls: true },
+          renderMediaCallback.bind(this)
+        );
+      }, 300);
     }
 
     document.addEventListener('keydown', this.togglePlay);
@@ -175,7 +163,9 @@ class MediaPlayer extends React.PureComponent<Props, State> {
         mediaElement.currentTime = position;
       }
 
-      mediaElement.addEventListener('loadedmetadata', () => this.refreshMetadata());
+      mediaElement.addEventListener('loadedmetadata', () => this.refreshMetadata(), {
+        once: true,
+      });
       mediaElement.addEventListener('timeupdate', () => savePosition(mediaElement.currentTime));
       mediaElement.addEventListener('click', this.togglePlay);
       mediaElement.addEventListener('ended', () => {
@@ -210,7 +200,6 @@ class MediaPlayer extends React.PureComponent<Props, State> {
     if (onStartCb) {
       onStartCb();
     }
-
     const playerElement = this.mediaContainer.current;
     if (playerElement) {
       playerElement.children[0].play();

src/ui/component/userPhoneNew/view.jsx

@@ -94,12 +94,17 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
           </p>
         </section>
 
-        <Form className="card__content" onSubmit={this.handleSubmit}>
-          <fieldset-section>
+        <Form onSubmit={this.handleSubmit}>
+          <div className="card__content">
             <fieldset-group class="fieldset-group--smushed">
-              <FormField type="select" name="country-codes" onChange={this.handleSelect}>
+              <FormField
+                label={__('Country')}
+                type="select"
+                name="country-codes"
+                onChange={this.handleSelect}
+              >
                 {countryCodes.map((country, index) => (
-                  // eslint-disable-next-line
+                  // eslint-disable-next-line react/no-array-index-key
                   <option key={index} value={country.countryCallingCode}>
                     {os === 'Darwin' ? country.emoji : `(${country.alpha2})`}{' '}
                     {country.countryCallingCode}
@@ -108,6 +113,7 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
               </FormField>
               <FormField
                 type="text"
+                label={__('Number')}
                 placeholder={this.state.countryCode === '+1' ? '(555) 555-5555' : '5555555555'}
                 name="phone"
                 value={this.state.phone}
@@ -117,7 +123,7 @@ class UserPhoneNew extends React.PureComponent<Props, State> {
                 }}
               />
             </fieldset-group>
-          </fieldset-section>
+          </div>
           <div className="card__actions">
             <Submit label="Submit" disabled={isPending} />
             {cancelButton}

src/ui/component/walletBalance/view.jsx

@@ -17,7 +17,9 @@ const WalletBalance = (props: Props) => {
       </header>
 
       <div className="card__content">
-        {(balance || balance === 0) && <CreditAmount large amount={balance} precision={8} />}
+        {(balance || balance === 0) && (
+          <CreditAmount large badge={false} amount={balance} precision={8} />
+        )}
       </div>
     </section>
   );

src/ui/modal/modalRemoveFile/view.jsx

@@ -8,8 +8,8 @@ type Props = {
   closeModal: () => void,
   deleteFile: (string, boolean, boolean) => void,
   title: string,
-  fileInfo: {
-    outpoint: string,
+  fileInfo?: {
+    outpoint: ?string,
   },
 };
 
@@ -21,7 +21,6 @@ type State = {
 class ModalRemoveFile extends React.PureComponent<Props, State> {
   constructor(props: Props) {
     super(props);
-
     this.state = {
       deleteChecked: false,
       abandonClaimChecked: true,
@@ -48,15 +47,10 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const {
-      claimIsMine,
-      closeModal,
-      deleteFile,
-      fileInfo: { outpoint },
-      title,
-    } = this.props;
+    const { claimIsMine, closeModal, deleteFile, fileInfo, title } = this.props;
     const { deleteChecked, abandonClaimChecked } = this.state;
 
+    const outpoint = fileInfo ? fileInfo.outpoint : '';
     return (
       <Modal
         isOpen
@@ -64,7 +58,7 @@ class ModalRemoveFile extends React.PureComponent<Props, State> {
         contentLabel={__('Confirm File Remove')}
         type="confirm"
         confirmButtonLabel={__('Remove')}
-        onConfirmed={() => deleteFile(outpoint, deleteChecked, abandonClaimChecked)}
+        onConfirmed={() => deleteFile(outpoint || '', deleteChecked, abandonClaimChecked)}
         onAborted={closeModal}
       >
         <section className="card__content">