Switch to FlowPlayer to fix streaming issues and simplify code

.gitignore

@@ -1,5 +1,7 @@
 dist/css/*
 dist/js/*
+!dist/js/flowplayer/
+!dist/js/flowplayer/
 node_modules
 .sass-cache
 .idea

dist/index.html

@@ -21,6 +21,7 @@
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.7.4/polyfill.js"></script>
+      <script src="./js/flowplayer/flowplayer-3.2.13.min.js"></script>
       <script src="./js/lbry.js"></script>
       <script src="./js/component/common.js"></script>
       <script src="./js/component/splash.js"></script>

js/page/watch.js

@@ -19,19 +19,6 @@ var WatchPage = React.createClass({
     lbry.getStream(this.props.name);
     this.updateLoadStatus();
   },
-  reloadIfNeeded: function() {
-    // Fallback option for loading problems: every 15 seconds, if the video hasn't reported being
-    // playable yet, ask it to reload.
-    if (!this.state.readyToPlay) {
-      this._video.load()
-      setTimeout(() => { this.reloadIfNeeded() }, 15000);
-    }
-  },
-  onCanPlay: function() {
-    this.setState({
-      readyToPlay: true
-    });
-  },
   updateLoadStatus: function() {
     lbry.getFileStatus(this.props.name, (status) => {
       if (!status || status.code != 'running' || status.written_bytes == 0) {
@@ -44,31 +31,20 @@ var WatchPage = React.createClass({
         setTimeout(() => { this.updateLoadStatus() }, 250);
       } else {
         this.setState({
-          loadStatusMessage: "Buffering",
+          readyToPlay: true
-          downloadStarted: true,
+        })
-        });
+        flowplayer('player', 'js/flowplayer/flowplayer-3.2.18.swf');
-        setTimeout(() => { this.reloadIfNeeded() }, 15000);
       }
     });
   },
   render: function() {
-    if (!this.state.downloadStarted) {
-      var video = null;
-    } else {
-      // If the download has started, render the <video> behind the scenes so it can start loading.
-      // When the video is actually ready to play, the loading text is hidden and the video shown.
-      var video = <video src={"/view?name=" + this.props.name} style={videoStyle}
-                         className={this.state.readyToPlay ? '' : 'hidden'} controls
-                         onCanPlay={this.onCanPlay} ref={(video) => {this._video = video}}/>;
-    }
-
     return (
       <main>
       <div className={this.state.readyToPlay ? 'hidden' : ''}>
         <h3>Loading lbry://{this.props.name}</h3>
         {this.state.loadStatusMessage}...
       </div>
-      {video}
+      <a id="player" href={"/view?name=" + this.props.name} style={videoStyle} />
       </main>
     );
   }