Merge remote-tracking branch 'origin/master' into tear_down_this_wall

CHANGELOG.md

@@ -10,6 +10,7 @@ Web UI version numbers should always match the corresponding version of LBRY App
 ### Added
   * More file types, like audio and documents, can be streamed and/or served from the app
   * App is no longer gated. Reward authorization re-written. Added basic flows for new users.
+  * Videos now have a classy loading spinner
 
 ### Changed
   * All UI strings are now rendered according to gettext standard, in prep for i18n

package.json

@@ -58,6 +58,7 @@
   "devDependencies": {
     "electron": "^1.4.15",
     "electron-builder": "^11.7.0",
-    "electron-debug": "^1.1.0"
+    "electron-debug": "^1.1.0",
+    "why-did-you-update": "0.0.8"
   }
 }

ui/js/component/app/view.jsx

@@ -8,7 +8,7 @@ import WelcomeModal from "component/welcomeModal";
 import lbry from "lbry";
 import { Line } from "rc-progress";
 
-class App extends React.Component {
+class App extends React.PureComponent {
   componentWillMount() {
     document.addEventListener("unhandledError", event => {
       this.props.alertError(event.detail);

ui/js/component/common.js

@@ -2,7 +2,7 @@ import React from "react";
 import lbry from "../lbry.js";
 
 //component/icon.js
-export class Icon extends React.Component {
+export class Icon extends React.PureComponent {
   static propTypes = {
     icon: React.PropTypes.string.isRequired,
     className: React.PropTypes.string,
@@ -21,7 +21,7 @@ export class Icon extends React.Component {
   }
 }
 
-export class TruncatedText extends React.Component {
+export class TruncatedText extends React.PureComponent {
   static propTypes = {
     lines: React.PropTypes.number,
   };
@@ -42,7 +42,7 @@ export class TruncatedText extends React.Component {
   }
 }
 
-export class BusyMessage extends React.Component {
+export class BusyMessage extends React.PureComponent {
   static propTypes = {
     message: React.PropTypes.string,
   };
@@ -54,13 +54,13 @@ export class BusyMessage extends React.Component {
   }
 }
 
-export class CurrencySymbol extends React.Component {
+export class CurrencySymbol extends React.PureComponent {
   render() {
     return <span>LBC</span>;
   }
 }
 
-export class CreditAmount extends React.Component {
+export class CreditAmount extends React.PureComponent {
   static propTypes = {
     amount: React.PropTypes.number.isRequired,
     precision: React.PropTypes.number,
@@ -116,7 +116,7 @@ let addressStyle = {
   fontFamily:
     '"Consolas", "Lucida Console", "Adobe Source Code Pro", monospace',
 };
-export class Address extends React.Component {
+export class Address extends React.PureComponent {
   static propTypes = {
     address: React.PropTypes.string,
   };
@@ -146,7 +146,7 @@ export class Address extends React.Component {
   }
 }
 
-export class Thumbnail extends React.Component {
+export class Thumbnail extends React.PureComponent {
   static propTypes = {
     src: React.PropTypes.string,
   };

ui/js/component/downloadingModal/view.jsx

@@ -3,7 +3,7 @@ import { Modal } from "component/modal";
 import { Line } from "rc-progress";
 import Link from "component/link";
 
-class DownloadingModal extends React.Component {
+class DownloadingModal extends React.PureComponent {
   render() {
     const {
       downloadProgress,

ui/js/component/errorModal/view.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import lbry from "lbry";
 import { ExpandableModal } from "component/modal";
 
-class ErrorModal extends React.Component {
+class ErrorModal extends React.PureComponent {
   render() {
     const { modal, closeModal, error } = this.props;
 

ui/js/component/file-selector.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 const { remote } = require("electron");
-class FileSelector extends React.Component {
+class FileSelector extends React.PureComponent {
   static propTypes = {
     type: React.PropTypes.oneOf(["file", "directory"]),
     initPath: React.PropTypes.string,

ui/js/component/fileActions/view.jsx

@@ -7,7 +7,7 @@ import Link from "component/link";
 import { ToolTip } from "component/tooltip";
 import { DropDownMenu, DropDownMenuItem } from "component/menu";
 
-class FileActions extends React.Component {
+class FileActions extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {

ui/js/component/fileCard/view.jsx

@@ -6,7 +6,7 @@ import { Thumbnail, TruncatedText, Icon } from "component/common";
 import FilePrice from "component/filePrice";
 import UriIndicator from "component/uriIndicator";
 
-class FileCard extends React.Component {
+class FileCard extends React.PureComponent {
   componentWillMount() {
     this.resolve(this.props);
   }

ui/js/component/fileList/view.jsx

@@ -8,7 +8,7 @@ import rewards from "rewards.js";
 import lbryio from "lbryio.js";
 import { BusyMessage, Thumbnail } from "component/common.js";
 
-class FileList extends React.Component {
+class FileList extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/component/fileListSearch/view.jsx

@@ -47,7 +47,7 @@ const FileListSearchResults = props => {
   return <div>{rows}</div>;
 };
 
-class FileListSearch extends React.Component {
+class FileListSearch extends React.PureComponent {
   componentWillMount() {
     this.props.search(this.props.query);
   }

ui/js/component/filePrice/view.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CreditAmount } from "component/common";
 
-class FilePrice extends React.Component {
+class FilePrice extends React.PureComponent {
   componentWillMount() {
     this.fetchCost(this.props);
   }
@@ -11,13 +11,7 @@ class FilePrice extends React.Component {
   }
 
   fetchCost(props) {
-    const {
-      costInfo,
-      fetchCostInfo,
-      uri,
-      fetching,
-      claim,
-    } = props;
+    const { costInfo, fetchCostInfo, uri, fetching, claim } = props;
 
     if (costInfo === undefined && !fetching && claim) {
       fetchCostInfo(uri);

ui/js/component/fileTile/view.jsx

@@ -7,7 +7,7 @@ import { Thumbnail, TruncatedText } from "component/common.js";
 import FilePrice from "component/filePrice";
 import UriIndicator from "component/uriIndicator";
 
-class FileTile extends React.Component {
+class FileTile extends React.PureComponent {
   static SHOW_EMPTY_PUBLISH = "publish";
   static SHOW_EMPTY_PENDING = "pending";
 

ui/js/component/form.js

@@ -10,7 +10,7 @@ function formFieldId() {
   return "form-field-" + ++formFieldCounter;
 }
 
-export class FormField extends React.Component {
+export class FormField extends React.PureComponent {
   static propTypes = {
     type: React.PropTypes.string.isRequired,
     prefix: React.PropTypes.string,
@@ -164,7 +164,7 @@ export class FormField extends React.Component {
   }
 }
 
-export class FormRow extends React.Component {
+export class FormRow extends React.PureComponent {
   static propTypes = {
     label: React.PropTypes.oneOfType([
       React.PropTypes.string,

ui/js/component/load_screen.js

@@ -3,7 +3,7 @@ import lbry from "../lbry.js";
 import { BusyMessage, Icon } from "./common.js";
 import Link from "component/link";
 
-class LoadScreen extends React.Component {
+class LoadScreen extends React.PureComponent {
   static propTypes = {
     message: React.PropTypes.string.isRequired,
     details: React.PropTypes.string,

ui/js/component/menu.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Icon } from "./common.js";
 import Link from "component/link";
 
-export class DropDownMenuItem extends React.Component {
+export class DropDownMenuItem extends React.PureComponent {
   static propTypes = {
     href: React.PropTypes.string,
     label: React.PropTypes.string,
@@ -32,7 +32,7 @@ export class DropDownMenuItem extends React.Component {
   }
 }
 
-export class DropDownMenu extends React.Component {
+export class DropDownMenu extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/component/modal-page.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactModal from "react-modal";
 
-export class ModalPage extends React.Component {
+export class ModalPage extends React.PureComponent {
   render() {
     return (
       <ReactModal

ui/js/component/modal.js

@@ -3,7 +3,7 @@ import ReactModal from "react-modal";
 import Link from "component/link";
 import app from "../app.js";
 
-export class Modal extends React.Component {
+export class Modal extends React.PureComponent {
   static propTypes = {
     type: React.PropTypes.oneOf(["alert", "confirm", "custom"]),
     overlay: React.PropTypes.bool,
@@ -64,7 +64,7 @@ export class Modal extends React.Component {
   }
 }
 
-export class ExpandableModal extends React.Component {
+export class ExpandableModal extends React.PureComponent {
   static propTypes = {
     expandButtonLabel: React.PropTypes.string,
     extraContent: React.PropTypes.element,

ui/js/component/notice.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-export class Notice extends React.Component {
+export class Notice extends React.PureComponent {
   static propTypes = {
     isError: React.PropTypes.bool,
   };

ui/js/component/snackBar/view.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "component/link";
 
-class SnackBar extends React.Component {
+class SnackBar extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/component/splash.js

@@ -2,7 +2,7 @@ import React from "react";
 import lbry from "../lbry.js";
 import LoadScreen from "./load_screen.js";
 
-export class SplashScreen extends React.Component {
+export class SplashScreen extends React.PureComponent {
   static propTypes = {
     message: React.PropTypes.string,
     onLoadDone: React.PropTypes.func,

ui/js/component/tooltip.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-export class ToolTip extends React.Component {
+export class ToolTip extends React.PureComponent {
   static propTypes = {
     body: React.PropTypes.string.isRequired,
     label: React.PropTypes.string.isRequired,

ui/js/component/transactionList/view.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Address, BusyMessage, CreditAmount } from "component/common";
 
-class TransactionList extends React.Component {
+class TransactionList extends React.PureComponent {
   componentWillMount() {
     this.props.fetchTransactions();
   }

ui/js/component/upgradeModal/view.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Modal } from "component/modal";
 import { downloadUpgrade, skipUpgrade } from "actions/app";
 
-class UpgradeModal extends React.Component {
+class UpgradeModal extends React.PureComponent {
   render() {
     const { downloadUpgrade, skipUpgrade } = this.props;
 

ui/js/component/uriIndicator/view.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Icon } from "component/common";
 
-class UriIndicator extends React.Component {
+class UriIndicator extends React.PureComponent {
   componentWillMount() {
     this.resolve(this.props);
   }

ui/js/component/video/internal/loading-screen.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const LoadingScreen = ({ status }) =>
+  <div className="video__loading-screen">
+    <div>
+      <div className="video__loading-spinner" />
+
+      <div className="video__loading-status">
+        {status}
+      </div>
+    </div>
+  </div>;
+
+export default LoadingScreen;

ui/js/component/video/internal/play-button.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import FilePrice from "component/filePrice";
+import Link from "component/link";
+import Modal from "component/modal";
+
+class VideoPlayButton extends React.PureComponent {
+  onPurchaseConfirmed() {
+    this.props.closeModal();
+    this.props.startPlaying();
+    this.props.loadVideo(this.props.uri);
+  }
+
+  onWatchClick() {
+    this.props.purchaseUri(this.props.uri).then(() => {
+      if (!this.props.modal) {
+        this.props.startPlaying();
+      }
+    });
+  }
+
+  render() {
+    const {
+      button,
+      label,
+      metadata,
+      metadata: { title },
+      uri,
+      modal,
+      closeModal,
+      isLoading,
+      costInfo,
+      fileInfo,
+      mediaType,
+    } = this.props;
+
+    /*
+     title={
+     isLoading ? "Video is Loading" :
+     !costInfo ? "Waiting on cost info..." :
+     fileInfo === undefined ? "Waiting on file info..." : ""
+     }
+     */
+
+    const disabled =
+      isLoading ||
+      fileInfo === undefined ||
+      (fileInfo === null && (!costInfo || costInfo.cost === undefined));
+    const icon = ["audio", "video"].indexOf(mediaType) !== -1
+      ? "icon-play"
+      : "icon-folder-o";
+
+    return (
+      <div>
+        <Link
+          button={button ? button : null}
+          disabled={disabled}
+          label={label ? label : ""}
+          className="video__play-button"
+          icon={icon}
+          onClick={this.onWatchClick.bind(this)}
+        />
+        <Modal
+          contentLabel={__("Not enough credits")}
+          isOpen={modal == "notEnoughCredits"}
+          onConfirmed={closeModal}
+        >
+          {__("You don't have enough LBRY credits to pay for this stream.")}
+        </Modal>
+        <Modal
+          type="confirm"
+          isOpen={modal == "affirmPurchaseAndPlay"}
+          contentLabel={__("Confirm Purchase")}
+          onConfirmed={this.onPurchaseConfirmed.bind(this)}
+          onAborted={closeModal}
+        >
+          {__("This will purchase")} <strong>{title}</strong> {__("for")}
+          {" "}<strong><FilePrice uri={uri} look="plain" /></strong>
+          {" "}{__("credits")}.
+        </Modal>
+        <Modal
+          isOpen={modal == "timedOut"}
+          onConfirmed={closeModal}
+          contentLabel={__("Timed Out")}
+        >
+          {__("Sorry, your download timed out :(")}
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default VideoPlayButton;

ui/js/component/video/internal/player.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Thumbnail } from "component/common";
+import player from "render-media";
+import fs from "fs";
+
+class VideoPlayer extends React.PureComponent {
+  componentDidMount() {
+    const elem = this.refs.media;
+    const { downloadPath, filename } = this.props;
+    const file = {
+      name: filename,
+      createReadStream: opts => {
+        return fs.createReadStream(downloadPath, opts);
+      },
+    };
+    player.append(file, elem, {
+      autoplay: true,
+      controls: true,
+    });
+  }
+
+  render() {
+    const { downloadPath, mediaType, poster } = this.props;
+
+    return (
+      <div>
+        {["audio", "application"].indexOf(mediaType) !== -1 &&
+          <Thumbnail src={poster} className="video-embedded" />}
+        <div ref="media" />
+      </div>
+    );
+  }
+}
+
+export default VideoPlayer;

ui/js/component/video/view.jsx

@@ -1,98 +1,10 @@
 import React from "react";
-import FilePrice from "component/filePrice";
-import Link from "component/link";
-import Modal from "component/modal";
 import lbry from "lbry";
-import { Thumbnail } from "component/common";
+import VideoPlayer from "./internal/player";
+import VideoPlayButton from "./internal/play-button";
+import LoadingScreen from "./internal/loading-screen";
 
-class VideoPlayButton extends React.Component {
-  onPurchaseConfirmed() {
-    this.props.closeModal();
-    this.props.startPlaying();
-    this.props.loadVideo(this.props.uri);
-  }
-
-  onWatchClick() {
-    this.props.purchaseUri(this.props.uri).then(() => {
-      if (!this.props.modal) {
-        this.props.startPlaying();
-      }
-    });
-  }
-
-  render() {
-    const {
-      button,
-      label,
-      className,
-      metadata,
-      metadata: { title },
-      uri,
-      modal,
-      closeModal,
-      isLoading,
-      costInfo,
-      fileInfo,
-      mediaType,
-    } = this.props;
-
-    /*
-     title={
-     isLoading ? "Video is Loading" :
-     !costInfo ? "Waiting on cost info..." :
-     fileInfo === undefined ? "Waiting on file info..." : ""
-     }
-     */
-
-    const disabled =
-      isLoading ||
-      fileInfo === undefined ||
-      (fileInfo === null && (!costInfo || costInfo.cost === undefined));
-    const icon = ["audio", "video"].indexOf(mediaType) !== -1
-      ? "icon-play"
-      : "icon-folder-o";
-
-    return (
-      <div>
-        <Link
-          button={button ? button : null}
-          disabled={disabled}
-          label={label ? label : ""}
-          className="video__play-button"
-          icon={icon}
-          onClick={this.onWatchClick.bind(this)}
-        />
-        <Modal
-          contentLabel={__("Not enough credits")}
-          isOpen={modal == "notEnoughCredits"}
-          onConfirmed={closeModal}
-        >
-          {__("You don't have enough LBRY credits to pay for this stream.")}
-        </Modal>
-        <Modal
-          type="confirm"
-          isOpen={modal == "affirmPurchaseAndPlay"}
-          contentLabel={__("Confirm Purchase")}
-          onConfirmed={this.onPurchaseConfirmed.bind(this)}
-          onAborted={closeModal}
-        >
-          {__("This will purchase")} <strong>{title}</strong> {__("for")}
-          {" "}<strong><FilePrice uri={uri} look="plain" /></strong>
-          {" "}{__("credits")}.
-        </Modal>
-        <Modal
-          isOpen={modal == "timedOut"}
-          onConfirmed={closeModal}
-          contentLabel={__("Timed Out")}
-        >
-          {__("Sorry, your download timed out :(")}
-        </Modal>
-      </div>
-    );
-  }
-}
-
-class Video extends React.Component {
+class Video extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = { isPlaying: false };
@@ -148,64 +60,26 @@ class Video extends React.Component {
 
     return (
       <div className={klassName}>
-        {isPlaying
-          ? !isReadyToPlay
-            ? <span>
-                {__(
-                  "this is the world's worst loading screen and we shipped our software with it anyway..."
-                )}
-                {" "}<br /><br />{loadStatusMessage}
-              </span>
+        {isPlaying &&
+          (!isReadyToPlay
+            ? <LoadingScreen status={loadStatusMessage} />
             : <VideoPlayer
                 filename={fileInfo.file_name}
                 poster={poster}
                 downloadPath={fileInfo.download_path}
                 mediaType={mediaType}
-                poster={poster}
-              />
-          : <div
-              className="video__cover"
-              style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
-            >
-              <VideoPlayButton
-                startPlaying={this.startPlaying.bind(this)}
-                {...this.props}
-                mediaType={mediaType}
-              />
-            </div>}
-      </div>
-    );
-  }
-}
-
-const from = require("from2");
-const player = require("render-media");
-const fs = require("fs");
-
-class VideoPlayer extends React.Component {
-  componentDidMount() {
-    const elem = this.refs.media;
-    const { downloadPath, filename } = this.props;
-    const file = {
-      name: filename,
-      createReadStream: opts => {
-        return fs.createReadStream(downloadPath, opts);
-      },
-    };
-    player.append(file, elem, {
-      autoplay: true,
-      controls: true,
-    });
-  }
-
-  render() {
-    const { downloadPath, mediaType, poster } = this.props;
-
-    return (
-      <div>
-        {["audio", "application"].indexOf(mediaType) !== -1 &&
-          <Thumbnail src={poster} className="video-embedded" />}
-        <div ref="media" />
+              />)}
+        {!isPlaying &&
+          <div
+            className="video__cover"
+            style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
+          >
+            <VideoPlayButton
+              startPlaying={this.startPlaying.bind(this)}
+              {...this.props}
+              mediaType={mediaType}
+            />
+          </div>}
       </div>
     );
   }

ui/js/component/walletAddress/view.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import Link from "component/link";
 import { Address } from "component/common";
 
-class WalletAddress extends React.Component {
+class WalletAddress extends React.PureComponent {
   componentWillMount() {
     this.props.checkAddressIsMine(this.props.receiveAddress);
   }

ui/js/main.js

@@ -10,6 +10,7 @@ import AuthOverlay from "component/authOverlay";
 import { doChangePath, doNavigate, doDaemonReady } from "actions/app";
 import { toQueryString } from "util/query_params";
 
+const env = ENV;
 const { remote, ipcRenderer, shell } = require("electron");
 const contextMenu = remote.require("./menu/context-menu");
 const app = require("./app");
@@ -65,6 +66,19 @@ document.addEventListener("click", event => {
 
 const initialState = app.store.getState();
 
+// import whyDidYouUpdate from "why-did-you-update";
+// if (env === "development") {
+//   /*
+// 		https://github.com/garbles/why-did-you-update
+// 		"A function that monkey patches React and notifies you in the console when
+// 		potentially unnecessary re-renders occur."
+//
+// 		Just checks if props change between updates. Can be fixed by manually
+// 		adding a check in shouldComponentUpdate or using React.PureComponent
+// 	*/
+//   whyDidYouUpdate(React);
+// }
+
 var init = function() {
   function onDaemonReady() {
     window.sessionStorage.setItem("loaded", "y"); //once we've made it here once per session, we don't need to show splash again

ui/js/page/channel/view.jsx

@@ -3,7 +3,7 @@ import lbryuri from "lbryuri";
 import { BusyMessage } from "component/common";
 import FileTile from "component/fileTile";
 
-class ChannelPage extends React.Component {
+class ChannelPage extends React.PureComponent {
   componentDidMount() {
     this.fetchClaims(this.props);
   }

ui/js/page/developer.js

@@ -6,7 +6,7 @@ import Link from "../component/link";
 const fs = require("fs");
 const { ipcRenderer } = require("electron");
 
-class DeveloperPage extends React.Component {
+class DeveloperPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/discover/view.jsx

@@ -37,7 +37,7 @@ const FeaturedCategory = props => {
   );
 };
 
-class DiscoverPage extends React.Component {
+class DiscoverPage extends React.PureComponent {
   componentWillMount() {
     this.props.fetchFeaturedUris();
   }

ui/js/page/fileListDownloaded/view.jsx

@@ -10,7 +10,7 @@ import { BusyMessage, Thumbnail } from "component/common.js";
 import FileList from "component/fileList";
 import SubHeader from "component/subHeader";
 
-class FileListDownloaded extends React.Component {
+class FileListDownloaded extends React.PureComponent {
   componentWillMount() {
     this.props.fetchFileInfosDownloaded();
   }

ui/js/page/fileListPublished/view.jsx

@@ -10,7 +10,7 @@ import { BusyMessage, Thumbnail } from "component/common.js";
 import FileList from "component/fileList";
 import SubHeader from "component/subHeader";
 
-class FileListPublished extends React.Component {
+class FileListPublished extends React.PureComponent {
   componentWillMount() {
     this.props.fetchFileListPublished();
   }

ui/js/page/filePage/view.jsx

@@ -33,7 +33,7 @@ const FormatItem = props => {
   );
 };
 
-class FilePage extends React.Component {
+class FilePage extends React.PureComponent {
   componentDidMount() {
     this.fetchFileInfo(this.props);
     this.fetchCostInfo(this.props);

ui/js/page/help/view.jsx

@@ -5,7 +5,7 @@ import Link from "component/link";
 import SubHeader from "component/subHeader";
 import { BusyMessage } from "component/common";
 
-class HelpPage extends React.Component {
+class HelpPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/publish/view.jsx

@@ -6,7 +6,7 @@ import Link from "component/link";
 import rewards from "rewards";
 import Modal from "component/modal";
 
-class PublishPage extends React.Component {
+class PublishPage extends React.PureComponent {
   constructor(props) {
     super(props);
 
@@ -594,6 +594,7 @@ class PublishPage extends React.Component {
                   className="form-field__input--inline"
                   step="0.01"
                   placeholder="1.00"
+                  min="0.01"
                   onChange={event => this.handleFeeAmountChange(event)}
                 />
                 {" "}
@@ -752,6 +753,7 @@ class PublishPage extends React.Component {
                     label={__("Deposit")}
                     postfix="LBC"
                     step="0.01"
+                    min="0"
                     type="number"
                     helper={lbcInputHelp}
                     onChange={event => {

ui/js/page/report.js

@@ -4,7 +4,7 @@ import { FormRow } from "component/form";
 import Modal from "../component/modal.js";
 import lbry from "../lbry.js";
 
-class ReportPage extends React.Component {
+class ReportPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/search/view.jsx

@@ -5,7 +5,7 @@ import FileListSearch from "component/fileListSearch";
 import { ToolTip } from "component/tooltip.js";
 import { BusyMessage } from "component/common.js";
 
-class SearchPage extends React.Component {
+class SearchPage extends React.PureComponent {
   render() {
     const { query } = this.props;
 

ui/js/page/settings/view.jsx

@@ -3,7 +3,7 @@ import { FormField, FormRow } from "component/form.js";
 import SubHeader from "component/subHeader";
 import lbry from "lbry.js";
 
-class SettingsPage extends React.Component {
+class SettingsPage extends React.PureComponent {
   constructor(props) {
     super(props);
 

ui/js/page/showPage/view.jsx

@@ -4,7 +4,7 @@ import { BusyMessage } from "component/common";
 import ChannelPage from "page/channel";
 import FilePage from "page/filePage";
 
-class ShowPage extends React.Component {
+class ShowPage extends React.PureComponent {
   componentWillMount() {
     this.resolve(this.props);
   }

ui/js/page/start.js

@@ -1,7 +1,7 @@
 import React from "react";
 import lbry from "../lbry.js";
 
-class StartPage extends React.Component {
+class StartPage extends React.PureComponent {
   componentWillMount() {
     lbry.stop();
   }

ui/scss/component/_video.scss

@@ -13,7 +13,6 @@ video {
   color: white;
 }
 
-
 .video-embedded {
   max-width: $width-page-constrained;
   max-height: $height-video-embedded;
@@ -28,12 +27,73 @@ video {
   &.video--active {
     /*background: none;*/
   }
+
   .plyr {
     top: 50%;
     transform: translateY(-50%);
   }
 }
 
+
+.video__loading-screen {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.video__loading-spinner {
+  position: relative;
+  width: 11em;
+  height: 11em;
+  margin: 20px auto;
+  font-size: 3px;
+  border-radius: 50%;
+
+  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%);
+  animation: spin 1.4s infinite linear;
+  transform: translateZ(0);
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:before {
+    width: 50%;
+    height: 50%;
+    background: #ffffff;
+    border-radius: 100% 0 0 0;
+  }
+
+  &:after {
+    height: 75%;
+    width: 75%;
+    margin: auto;
+    bottom: 0;
+    right: 0;
+    background: black;
+    border-radius: 50%;
+  }
+}
+
+.video__loading-status {
+  padding-top: 20px;
+  color: white;
+}
+
 .video__cover {
   text-align: center;
   height: 100%;
@@ -44,6 +104,7 @@ video {
   position: relative;
   .video__play-button { @include absolute-center(); }
 }
+
 .video__play-button {
   position: absolute;
   width: 100%;
@@ -61,4 +122,4 @@ video {
     opacity: 1;
     transition: opacity $transition-standard;
   }
-}
+}