self install logic

index.js

@@ -63,7 +63,6 @@ function api(v, m, p, cb) {
         return cb(e);
       }
     }
-    throw "whuck";
     return cb(null);
   });
 }

src/main.css

@@ -46,6 +46,7 @@ a.active {
 .app > section {
   height: 100vh;
   width: 100vw;
+  position: relative;
 }
 .app[data-mode="overview"] {
   transform: translate(0, 0);
@@ -274,6 +275,32 @@ h2 {
   animation: 500ms spin linear infinite;
 }
 
+/* install */
+.install {
+  position: absolute;
+  bottom: 1em;
+  right: 1em;
+  background: #000;
+  padding: .5em 2em .5em 1em;
+  border: 1px solid white;
+  border-radius: 5em;
+  display: none;
+  font-size: 1.5em;
+}
+.install.capable {
+  display: block;
+}
+.install.pending, .install.installed {
+  display: none;
+}
+.install:before {
+  content: '⬇︎';
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: .5em .7em 0 0;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);

src/main.js

@@ -75,11 +75,65 @@ var Overview = React.createClass({
             </div>
           );
         }, this)}
+        <AppInstallDingus />
       </section>
     );
   }
 });
 
+var AppInstallDingus = React.createClass({
+  attemptInstall: function (e) {
+    e.preventDefault();
+    if (this.state.capable) {
+      var url = window.location.origin + '/manifest.webapp';
+      var installReq = navigator.mozApps.install(url);
+      installReq.onsuccess = function () {
+        if (installReq.result) {
+          this.state.installed = true;
+          this.setState(this.state);
+        }
+      }.bind(this);
+    }
+  },
+  getInitialState: function () {
+    return {
+      installed: false,
+      pending: false,
+      capable: navigator.mozApps
+    };
+  },
+  componentDidMount: function() {
+    if (this.state.capable) {
+      var selfReq = navigator.mozApps.getSelf();
+      selfReq.onsuccess = function () {
+        console.log('installed', selfReq.result);
+        if (selfReq.result) {
+          this.state.installed = true;
+          this.setState(this.state);
+        }
+      }.bind(this);
+
+      var installedReq = navigator.mozApps.getInstalled();
+      installedReq.onsuccess = function () {
+        console.log('installed', installedReq.result);
+        if (installedReq.result && installedReq.result.length) {
+          this.state.installed = true;
+          this.setState(this.state);
+        }
+      }.bind(this);
+    }
+  },
+  render: function () {
+    var classes = classSet({
+      installed: this.state.installed,
+      pending: this.state.pending,
+      capable: this.state.capable,
+      install: true
+    });
+    return <a className={classes} href="#" onClick={this.attemptInstall}>Install</a>;
+  }
+});
+
 var ZoneOverview = React.createClass({
   render: function() {
     if (this.props.nowPlaying) {

static/main.css

@@ -57,6 +57,7 @@ a.active {
 .app > section {
   height: 100vh;
   width: 100vw;
+  position: relative;
 }
 .app[data-mode="overview"] {
   -webkit-transform: translate(0, 0);
@@ -407,6 +408,32 @@ h2 {
           animation: 500ms spin linear infinite;
 }
 
+/* install */
+.install {
+  position: absolute;
+  bottom: 1em;
+  right: 1em;
+  background: #000;
+  padding: .5em 2em .5em 1em;
+  border: 1px solid white;
+  border-radius: 5em;
+  display: none;
+  font-size: 1.5em;
+}
+.install.capable {
+  display: block;
+}
+.install.pending, .install.installed {
+  display: none;
+}
+.install:before {
+  content: '⬇︎';
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: .5em .7em 0 0;
+}
+
 @-webkit-keyframes spin {
 
   to {

static/main.js

@@ -74,12 +74,66 @@ var Overview = React.createClass({displayName: "Overview",
                 nowPlaying: z.aData.aNowPlaying})
             )
           );
-        }, this)
+        }, this), 
+        React.createElement(AppInstallDingus, null)
       )
     );
   }
 });
 
+var AppInstallDingus = React.createClass({displayName: "AppInstallDingus",
+  attemptInstall: function (e) {
+    e.preventDefault();
+    if (this.state.capable) {
+      var url = window.location.origin + '/manifest.webapp';
+      var installReq = navigator.mozApps.install(url);
+      installReq.onsuccess = function () {
+        if (installReq.result) {
+          this.state.installed = true;
+          this.setState(this.state);
+        }
+      }.bind(this);
+    }
+  },
+  getInitialState: function () {
+    return {
+      installed: false,
+      pending: false,
+      capable: navigator.mozApps
+    };
+  },
+  componentDidMount: function() {
+    if (this.state.capable) {
+      var selfReq = navigator.mozApps.getSelf();
+      selfReq.onsuccess = function () {
+        console.log('installed', selfReq.result);
+        if (selfReq.result) {
+          this.state.installed = true;
+          this.setState(this.state);
+        }
+      }.bind(this);
+
+      var installedReq = navigator.mozApps.getInstalled();
+      installedReq.onsuccess = function () {
+        console.log('installed', installedReq.result);
+        if (installedReq.result && installedReq.result.length) {
+          this.state.installed = true;
+          this.setState(this.state);
+        }
+      }.bind(this);
+    }
+  },
+  render: function () {
+    var classes = classSet({
+      installed: this.state.installed,
+      pending: this.state.pending,
+      capable: this.state.capable,
+      install: true
+    });
+    return React.createElement("a", {className: classes, href: "#", onClick: this.attemptInstall}, "Install");
+  }
+});
+
 var ZoneOverview = React.createClass({displayName: "ZoneOverview",
   render: function() {
     if (this.props.nowPlaying) {