Merge pull request #60 from lbryio/video-load-screen

Use format of main splash screen for video load screen

dist/index.html

@@ -34,6 +34,7 @@
       <script src="./js/component/header.js"></script>
       <script src="./js/component/drawer.js"></script>
       <script src="./js/component/splash.js"></script>
+      <script src="./js/component/load_screen.js"></script>
       <script src="./js/page/discover.js"></script>
       <script src="./js/page/settings.js"></script>
       <script src="./js/page/help.js"></script>

js/component/load_screen.js

@@ -0,0 +1,49 @@
+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: {
+    message: React.PropTypes.string.isRequired,
+    details: React.PropTypes.string,
+    isWarning: React.PropTypes.bool,
+  },
+  getDefaultProps: function() {
+    return {
+      isWarning: false,
+    }
+  },
+  getInitialState: function() {
+    return {
+      message: null,
+      details: null,
+      isLagging: false,
+    }
+  },
+  render: function() {
+    var imgSrc = lbry.imagePath('lbry-white-485x160.png');
+    return (
+      <div className="load-screen" style={loadScreenStyle}>
+        <img src={imgSrc} alt="LBRY"/>
+        <div style={loadScreenMessageStyle}>
+          <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>
+        </div>
+      </div>
+    );
+  }
+});

js/component/splash.js

@@ -1,19 +1,3 @@
-var splashStyle = {
-  color: 'white',
-  backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')',
-  backgroundSize: 'cover',
-  minHeight: '100vh',
-  minWidth: '100vw',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center'
-}, splashMessageStyle = {
-  marginTop: '24px',
-  width: '325px',
-  textAlign: 'center',
-};
-
 var SplashScreen = React.createClass({
   propTypes: {
     message: React.PropTypes.string,
@@ -46,17 +30,6 @@ var SplashScreen = React.createClass({
     this.updateStatus();
   },
   render: function() {
-    var imgSrc = lbry.imagePath('lbry-white-485x160.png');
+    return <LoadScreen message={this.props.message} details={this.state.details} isWarning={this.state.isLagging} />;
-    return (
-      <div className="splash-screen" style={splashStyle}>
-        <img src={imgSrc} alt="LBRY"/>
-        <div style={splashMessageStyle}>
-          <h3>
-            <BusyMessage message={this.props.message} />
-          </h3>
-          <Icon icon='icon-warning' style={this.state.isLagging ? {} : { display: 'none' }}/> <span style={ this.state.isLagging ? {} : {'color': '#c3c3c3'} }>{this.state.details}</span>
-        </div>
-      </div>
-    );
   }
 });

js/page/watch.js

@@ -38,11 +38,9 @@ var WatchPage = React.createClass({
   },
   render: function() {
     return (
-      <main className="full-screen">
+      !this.state.readyToPlay
-      <div className={this.state.readyToPlay ? 'hidden' : ''}>
+        ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
-        <h3>Loading lbry://{this.props.name}</h3>
+        : <main className="full-screen">
-        {this.state.loadStatusMessage}...
-      </div>
             <video ref="player" width="100%" height="100%">
               <source type={(this.state.mimeType == 'audio/m4a' || this.state.mimeType == 'audio/mp4a-latm') ? 'video/mp4' : this.state.mimeType} src={'/view?name=' + this.props.name} />
             </video>