Switch to MediaElement (all done except letterboxing)

dist/index.html

@@ -6,6 +6,7 @@
 
         <link href='https://fonts.googleapis.com/css?family=Raleway:600,300' rel='stylesheet' type='text/css'>
         <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
+        <link href="./js/mediaelement/mediaelementplayer.css" rel="stylesheet" type="text/css" />
         <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
         <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">
@@ -21,7 +22,8 @@
       <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/mediaelement/jquery.js"></script>
+      <script src="./js/mediaelement/mediaelement-and-player.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

@@ -1,7 +1,6 @@
 var videoStyle = {
-  width: '100%',
+  maxWidth: '100%',
-//  height: '100%',
+  maxHeight: '100%',
-  backgroundColor: '#000'
 };
 
 var WatchPage = React.createClass({
@@ -13,6 +12,7 @@ var WatchPage = React.createClass({
       downloadStarted: false,
       readyToPlay: false,
       loadStatusMessage: "Requesting stream",
+      mimeType: null,
     };
   },
   componentDidMount: function() {
@@ -31,20 +31,26 @@ var WatchPage = React.createClass({
         setTimeout(() => { this.updateLoadStatus() }, 250);
       } else {
         this.setState({
-          readyToPlay: true
+          readyToPlay: true,
+          mimeType: status.mime_type,
         })
-        flowplayer('player', 'js/flowplayer/flowplayer-3.2.18.swf');
+        var player = new MediaElementPlayer('#player', {
+          mode: 'shim', // Force Flash (for now)
+          // enableAutosize: true,
+        });
       }
     });
   },
   render: function() {
     return (
-      <main className="page full-width">
+      <main className="page full-screen">
       <div className={this.state.readyToPlay ? 'hidden' : ''}>
         <h3>Loading lbry://{this.props.name}</h3>
         {this.state.loadStatusMessage}...
       </div>
-      <a id="player" href={"/view?name=" + this.props.name} style={videoStyle} />
+      <video id="player" style={videoStyle} width="100%" height="100%">
+        <source type={this.state.mimeType} src={"/view?name=" + this.props.name} />
+      </video>
       </main>
     );
   }

scss/_gui.scss

@@ -18,8 +18,9 @@ body
   margin-right: auto;
   width: 800px;
 
-  &.full-width {
+  &.full-screen {
     width: 100%;
+    height: 100%;
   }
 }