Move video viewing into front end

dist/index.html

@@ -27,6 +27,7 @@
       <script src="./js/page/home.js"></script>
       <script src="./js/page/settings.js"></script>
       <script src="./js/page/help.js"></script>
+      <script src="./js/page/watch.js"></script>
       <script src="./js/page/start.js"></script>
       <script src="./js/app.js"></script>
       <script src="./js/main.js"></script>

js/app.js

@@ -5,15 +5,19 @@ var appStyles = {
 };
 var App = React.createClass({
   getInitialState: function() {
-    var query = window.location.search.slice(1);
-    if (['settings', 'help', 'start'].indexOf(query) != -1) {
-      var viewingPage = query;
+    // For now, routes are in format ?page or ?page=args
+    var match, param, val;
+    [match, param, val] = window.location.search.match(/\??([^=]*)(?:=(.*))?/);
+
+    if (['settings', 'help', 'start', 'watch'].indexOf(param) != -1) {
+      var viewingPage = param;
     } else {
       var viewingPage = 'home';
     }
 
     return {
-      viewingPage: viewingPage
+      viewingPage: viewingPage,
+      pageArgs: val,
     };
   },
   componentWillMount: function() {
@@ -54,6 +58,8 @@ var App = React.createClass({
       var content = <SettingsPage />;
     } else if (this.state.viewingPage == 'help') {
       var content = <HelpPage />;
+    } else if (this.state.viewingPage == 'watch') {
+      var content = <WatchPage name={this.state.pageArgs}/>;
     } else if (this.state.viewingPage == 'start') {
       var content = <StartPage />;
     }

js/page/home.js

@@ -92,7 +92,7 @@ var SearchResultRow = React.createClass({
 
     // No support for lbry:// URLs in Windows or on Chrome yet
     if (/windows|win32/i.test(navigator.userAgent) || (window.chrome && window.navigator.vendor == "Google Inc.")) {
-      var linkURI = "/view?name=" + this.props.name;
+      var linkURI = "/?watch=" + this.props.name;
     } else {
       var linkURI = displayURI;
     }

js/page/watch.js

@@ -0,0 +1,18 @@
+var videoStyle = {
+  width: '100%',
+  height: '100%',
+  backgroundColor: '#000'
+};
+
+var WatchPage = React.createClass({
+  propTypes: {
+    name: React.PropTypes.string,
+  },
+  render: function() {
+    return (
+      <main>
+        <video style={videoStyle} src={"/view?name=" + this.props.name} controls></video>
+      </main>
+    );
+  }
+});