add html5 video playback

js/page/watch.js

@@ -2,6 +2,10 @@ import React from 'react';
 import lbry from '../lbry.js';
 import LoadScreen from '../component/load_screen.js'
 
+const fs = require('fs');
+const VideoStream = require('videostream');
+
+
 var WatchPage = React.createClass({
   propTypes: {
     name: React.PropTypes.string,
@@ -22,6 +26,7 @@ var WatchPage = React.createClass({
     lbry.getFileStatus(this.props.name, (status) => {
       if (!status || status.code != 'running' || status.written_bytes == 0) {
         // Download hasn't started yet, so update status message (if available) then try again
+	// TODO: Would be nice to check if we have the MOOV before starting playing
         if (status) {
           this.setState({
             loadStatusMessage: status.message
@@ -33,11 +38,17 @@ var WatchPage = React.createClass({
           readyToPlay: true,
           mimeType: status.mime_type,
         })
-        var player = new MediaElementPlayer(this.refs.player, {
+	const mediaFile = {
-          mode: 'shim',
+	  createReadStream: function (opts) {
-          plugins: ['flash'],
+	    // Return a readable stream that provides the bytes
-          setDimensions: false,
+	    // between offsets "start" and "end" inclusive
-        });
+	    console.log('Stream between ' + opts.start + ' and ' + opts.end + '.');
+	    return fs.createReadStream(status.download_path, opts)
+	  }
+	}
+	var elem = this.refs.video;
+	var videostream = VideoStream(mediaFile, elem);
+	elem.play();
       }
     });
   },
@@ -46,8 +57,7 @@ var WatchPage = React.createClass({
       !this.state.readyToPlay
         ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
         : <main className="full-screen">
-            <video ref="player" width="100%" height="100%">
+            <video controls width="100%" height="100%" id="video" ref="video">
-              <source type={(this.state.mimeType == 'audio/m4a' || this.state.mimeType == 'audio/mp4a-latm') ? 'video/mp4' : this.state.mimeType} src={lbry.webUiUri + '/view?name=' + this.props.name} />
             </video>
           </main>
     );

package.json

@@ -27,7 +27,8 @@
     "node-sass": "^3.8.0",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",
-    "react-modal": "^1.5.2"
+    "react-modal": "^1.5.2",
+    "videostream": "^2.4.2"
   },
   "devDependencies": {
     "babel": "^6.5.2",
@@ -45,6 +46,7 @@
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.7.1",
     "node-sass": "^3.13.0",
-    "webpack": "^1.13.3"
+    "webpack": "^1.13.3",
+    "webpack-target-electron-renderer": "^0.4.0"
   }
 }

webpack.config.js

@@ -33,5 +33,6 @@ module.exports = {
         }
       }
     ]
-  }
+  },
+  target: 'electron-main',
 };