Merge pull request #150 from lbryio/watch-screen-cancel-link

Add Cancel link when loading screen is lagging

js/component/load_screen.js

@@ -1,22 +1,7 @@
 import React from 'react';
 import lbry from '../lbry.js';
 import {BusyMessage, Icon} from './common.js';
-
+import {Link} from '../component/link.js'
-var loadScreenStyle = {
-  color: 'white',
-  backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')',
-  backgroundSize: 'cover',
-  minHeight: '100vh',
-  minWidth: '100vw',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center'
-}, loadScreenMessageStyle = {
-  marginTop: '24px',
-  width: '325px',
-  textAlign: 'center',
-};
 
 var LoadScreen = React.createClass({
   propTypes: {
@@ -24,6 +9,9 @@ var LoadScreen = React.createClass({
     details: React.PropTypes.string,
     isWarning: React.PropTypes.bool,
   },
+  handleCancelClick: function() {
+    history.back();
+  },
   getDefaultProps: function() {
     return {
       isWarning: false,
@@ -37,15 +25,18 @@ var LoadScreen = React.createClass({
     }
   },
   render: function() {
-    var imgSrc = lbry.imagePath('lbry-white-485x160.png');
+    const imgSrc = lbry.imagePath('lbry-white-485x160.png');
     return (
-      <div className="load-screen" style={loadScreenStyle}>
+      <div className="load-screen">
         <img src={imgSrc} alt="LBRY"/>
-        <div style={loadScreenMessageStyle}>
+        <div className="load-screen__message">
           <h3>
             <BusyMessage message={this.props.message} />
           </h3>
-          <Icon icon='icon-warning' style={this.props.isWarning ? {} : { display: 'none' }}/> <span style={ this.state.isWarning ? {} : {'color': '#c3c3c3'} }>{this.props.details}</span>
+          {!this.props.isWarning ? <Icon icon="icon-warning" /> : null} <span className={'load-screen__details ' + (!this.props.isWarning ? 'load-screen__details--warning' : '')}>{this.props.details}</span>
+          {!this.props.isWarning
+            ? <div><Link label="Cancel" onClick={this.handleCancelClick} className='load-screen__cancel-link button-text' /></div>
+            : null}
         </div>
       </div>
     );

scss/_global.scss

@@ -10,6 +10,7 @@ $color-light-alt: hsl(hue($color-primary), 15, 85);
 $color-text-dark: #000;
 $color-help: rgba(0,0,0,.6);
 $color-notice: #921010;
+$color-warning: #c3c3c3;
 $color-canvas: #f5f5f5;
 $color-bg: #ffffff;
 $color-bg-alt: #D9D9D9;

scss/all.scss

@@ -9,4 +9,5 @@
 @import "component/_file-tile.scss";
 @import "component/_menu.scss";
 @import "component/_tooltip.scss";
+@import "component/_load-screen.scss";
 @import "page/_developer.scss";

scss/component/_load-screen.scss

@@ -0,0 +1,27 @@
+@import "../global";
+
+.load-screen {
+  color: white;
+  background-image: url("/img/lbry-bg.png");
+  background-size: cover;
+  min-height: 100vh;
+  min-width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.load-screen__message {
+  margin-top: 24px;
+  width: 325px;
+  text-align: center;
+}
+
+.load-screen__details--warning {
+  color: $color-warning;
+}
+
+.load-screen__cancel-link {
+  color: white;
+}