From 5b0f2e638a1ca645f000f0bd23bde42b7a90f334 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 5 May 2016 04:12:23 -0400
Subject: [PATCH] Hide video until it's playable and show loading message

---
 js/page/watch.js | 42 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/js/page/watch.js b/js/page/watch.js
index 761c9ef3e..e9cc05ed6 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -8,12 +8,42 @@ var WatchPage = React.createClass({
   propTypes: {
     name: React.PropTypes.string,
   },
-
+  getInitialState: function() {
+    return {
+      readyToPlay: false,
+      loadStatusMessage: "Requesting stream",
+    };
+  },
+  componentDidMount: function() {
+    lbry.getStream(this.props.name);
+    this.updateLoadStatus();
+  },
+  updateLoadStatus: function() {
+    lbry.getFileStatus(this.props.name, (status) => {
+      if (status.code != 'running') {
+        this.loadStatusMessage = status.message;
+        setTimeout(() => { this.updateLoadStatus() }, 250);
+      } else {
+        this.setState({
+          readyToPlay: true
+        });
+      }
+    });
+  },
   render: function() {
-    return (
-      <main>
-        <video style={videoStyle} src={"/view?name=" + this.props.name} controls />
-      </main>
-    );
+    if (!this.state.readyToPlay) {
+      return (
+        <main>
+        <h3>Loading lbry://{this.props.name}</h3>
+        {this.state.loadStatusMessage}
+        </main>
+      );
+    } else {
+      return (
+        <main>
+        <video style={videoStyle} src={"/view?name=" + this.props.name} controls />;
+        </main>
+      );
+    }
   }
 });