Merge pull request #9 from lbryio/mediaelement

Switch to MediaElement video player

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/app.js

@@ -32,11 +32,10 @@ var App = React.createClass({
           // On OS X with version <= 0.2.2, we need to notify user to close manually close LBRY
           message += '\n\nBefore installing the new version, make sure to exit LBRY, if you started the app ' +
                      'click that LBRY icon in your status bar and choose "Quit."';
-        } else {
-          lbry.stop();
         }
 
         if (window.confirm(message)) {
+          lbry.stop();
           window.location = 'http://www.lbry.io/get';
         };
       });

js/lbry.js

@@ -142,7 +142,19 @@ lbry.checkNewVersionAvailable = function(callback) {
     var remoteMaj, remoteMin, remotePatch;
     [remoteMaj, remoteMin, remotePatch] = versionInfo.remote_lbrynet.split('.');
 
-    var newVersionAvailable = (maj < remoteMaj || min < remoteMin || patch < remotePatch);
+    if (maj < remoteMaj) {
+      var newVersionAvailable = true;
+    } else if (maj == remoteMaj) {
+      if (min < remoteMin) {
+        var newVersionAvailable = true;
+      } else if (min == remoteMin) {
+        var newVersionAvailable = (patch < remotePatch);
+      } else {
+        var newVersionAvailable = false;
+      }
+    } else {
+      var newVersionAvailable = false;
+    }
     callback(newVersionAvailable);
   }, function(err) {
     if (err.fault == 'NoSuchFunction') {

js/page/home.js

@@ -47,7 +47,7 @@ var SearchResults = React.createClass({
     console.log('made it here');
     this.props.results.forEach(function(result) {
       rows.push(
-        <SearchResultRow name={result.name} title={result.stream_name} imgUrl={result.thumbnail}
+        <SearchResultRow name={result.name} title={result.title} imgUrl={result.thumbnail}
                          description={result.description} cost_est={result.cost_est} />
       );
     });
@@ -149,7 +149,7 @@ var FeaturedContentItem = React.createClass({
     lbry.resolveName(this.props.name, (metadata) => {
       this.setState({
         metadata: metadata,
-        title: metadata.name || metadata.stream_name || ('lbry://' + this.props.name),
+        title: metadata.title || ('lbry://' + this.props.name),
       })
     });
   },

js/page/my_files.js

@@ -146,13 +146,12 @@ var MyFilesPage = React.createClass({
       for (let fileInfo of this.state.filesInfo) {
         let {completed, written_bytes, total_bytes, lbry_uri, file_name, download_path,
              stopped, metadata} = fileInfo;
-        let {name, stream_name, thumbnail} = metadata;
+        let {title, thumbnail} = metadata;
 
-        var title = (name || stream_name || ('lbry://' + lbry_uri));
         var ratioLoaded = written_bytes / total_bytes;
         var showWatchButton = (lbry.getMediaType(file_name) == 'video');
 
-        content.push(<MyFilesRow lbryUri={lbry_uri} title={title} completed={completed} stopped={stopped}
+        content.push(<MyFilesRow lbryUri={lbry_uri} title={title || ('lbry://' + lbry_uri)} completed={completed} stopped={stopped}
                                  ratioLoaded={ratioLoaded} imgUrl={thumbnail} path={download_path}
                                  showWatchButton={showWatchButton}/>);
       }

js/page/watch.js

@@ -1,9 +1,3 @@
-var videoStyle = {
-  width: '100%',
-//  height: '100%',
-  backgroundColor: '#000'
-};
-
 var WatchPage = React.createClass({
   propTypes: {
     name: React.PropTypes.string,
@@ -13,6 +7,7 @@ var WatchPage = React.createClass({
       downloadStarted: false,
       readyToPlay: false,
       loadStatusMessage: "Requesting stream",
+      mimeType: null,
     };
   },
   componentDidMount: function() {
@@ -31,20 +26,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(this.refs.player, {
+          mode: 'shim', // Force Flash (for now)
+          setDimensions: false,
+        });
       }
     });
   },
   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 ref="player" 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%;
   }
 }
 

scss/_mediaelement.scss

@@ -0,0 +1,16 @@
+@import "global";
+
+.mejs-container, .mejs-overlay, .mejs-mediaelement {
+  width: 100%;
+  height: 100%;
+}
+
+.me-plugin {
+  width: 100%;
+  height: 100%;
+
+  > embed {
+    width: 100%;
+    height: 100%;
+  }
+}

scss/all.scss

@@ -1,4 +1,5 @@
 @import "_reset";
 @import "_grid";
 @import "_icons";
+@import "_mediaelement";
 @import "_gui";