move video-player and video-player-button into their own file

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

@@ -4,7 +4,7 @@ const LoadingScreen = ({ statusMessage }) =>
   <div className="video--loading--screen">
     <div className="loading--spinner" />
 
-    <div>
+    <div className="video--loading--status">
       {statusMessage}
     </div>
   </div>;

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

@@ -0,0 +1,93 @@
+import React from "react";
+import FilePrice from "component/filePrice";
+import Link from "component/link";
+import Modal from "component/modal";
+
+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>
+    );
+  }
+}
+
+export default VideoPlayButton;

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { Thumbnail } from "component/common";
+import player from "render-media";
+import fs from "fs";
+// const from = require("from2");
+
+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" />
+      </div>
+    );
+  }
+}
+
+export default VideoPlayer;

ui/js/component/video/view.jsx

@@ -1,98 +1,9 @@
 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 {
   constructor(props) {
     super(props);
@@ -175,37 +86,4 @@ class Video extends React.Component {
   }
 }
 
-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" />
-      </div>
-    );
-  }
-}
-
 export default Video;

ui/scss/component/_video.scss

@@ -45,6 +45,10 @@ video {
         to { transform: rotate(-360deg) }
       }
     }
+    
+    .video--loading--status {
+      color: white;
+    }
   }
 
   .plyr {