Add "close" button on Linux with landing page to restart

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/start.js"></script>
       <script src="./js/app.js"></script>
       <script src="./js/main.js"></script>
     </body>

js/app.js

@@ -6,7 +6,7 @@ var appStyles = {
 var App = React.createClass({
   getInitialState: function() {
     var query = window.location.search.slice(1);
-    if (query == 'settings' || query == 'help') {
+    if (['settings', 'help', 'start'].indexOf(query) != -1) {
       var viewingPage = query;
     } else {
       var viewingPage = 'home';
@@ -54,6 +54,8 @@ var App = React.createClass({
       var content = <SettingsPage />;
     } else if (this.state.viewingPage == 'help') {
       var content = <HelpPage />;
+    } else if (this.state.viewingPage == 'start') {
+      var content = <StartPage />;
     }
     return (
       <div style={appStyles}>

js/component/common.js

@@ -15,7 +15,8 @@ var Link = React.createClass({
     console.log(this.props);
     var href = this.props.href ? this.props.href : 'javascript:;',
       icon = this.props.icon ? <Icon icon={this.props.icon} />  : '',
-      className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text');
+      className = (this.props.button ? 'button-block button-' + this.props.button : 'button-text') +
+                  (this.props.hidden ? ' hidden' : '');
     return (
       <a className={className} href={href} style={this.props.style ? this.props.style : {}} onClick={this.props.onClick}>
         {this.props.icon ? icon : '' }

js/page/home.js

@@ -202,7 +202,7 @@ var Header = React.createClass({
   render: function() {
     return (
       <header>
-        <TopBar onPageChosen={this.handlePageChosen}/>
+        <TopBar />
         <div style={logoStyle}>
           <img src="./img/lbry-dark-1600x528.png" style={imgStyle}/>
         </div>
@@ -216,12 +216,19 @@ var topBarStyle = {
 },
 balanceStyle = {
   'marginRight': '5px'
+},
+closeIconStyle = {
+  'color': '#ff5155'
 };
 
 var TopBar = React.createClass({
+  onClose: function() {
+    window.location.href = "?start";
+  },
   getInitialState: function() {
     return {
-      balance: 0
+      balance: 0,
+      showClose: /linux/i.test(navigator.userAgent) // @TODO: find a way to use getVersionInfo() here without messy state management
     };
   },
   componentDidMount: function() {
@@ -241,6 +248,8 @@ var TopBar = React.createClass({
         <Link href='/?settings' icon='icon-gear' />
         { ' ' }
         <Link href='/?help' icon='icon-question-circle' />
+        { ' ' }
+        <Link href="/?start" onClick={this.onClose} icon="icon-close" style={closeIconStyle} hidden={!this.state.showClose} />
       </span>
     );
   }
@@ -255,4 +264,4 @@ var HomePage = React.createClass({
       </div>
     );
   }
-});
+});

js/page/start.js

@@ -0,0 +1,13 @@
+var StartPage = React.createClass({
+  componentWillMount: function() {
+    lbry.stop();
+  },
+  render: function() {
+    return (
+      <main>
+        <h1>LBRY is not running</h1>
+        <Link href="lbry://lbry" label="Start LBRY" />
+      </main>
+    );
+  }
+});