From 19d12955a5ce854f696cb016dc016119de6688f6 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Wed, 21 Sep 2016 01:19:23 -0400
Subject: [PATCH 1/3] Factor out generic loading screen component from
 SplashScreen

---
 dist/index.html             |  1 +
 js/component/load_screen.js | 49 +++++++++++++++++++++++++++++++++++++
 js/component/splash.js      | 29 +---------------------
 3 files changed, 51 insertions(+), 28 deletions(-)
 create mode 100644 js/component/load_screen.js

diff --git a/dist/index.html b/dist/index.html
index cbd6e497e..bea121260 100644
--- a/dist/index.html
+++ b/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>
diff --git a/js/component/load_screen.js b/js/component/load_screen.js
new file mode 100644
index 000000000..b5cb99c76
--- /dev/null
+++ b/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>
+    );
+  }
+});
\ No newline at end of file
diff --git a/js/component/splash.js b/js/component/splash.js
index c6aaf87df..a6b123f67 100644
--- a/js/component/splash.js
+++ b/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 (
-      <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>
-    );
+    return <LoadScreen message={this.props.message} details={this.state.details} isWarning={this.state.isLagging} />;
   }
 });
\ No newline at end of file

From f598517e27203454c52cf71bfb5e24d8f2f2f464 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Wed, 21 Sep 2016 01:37:43 -0400
Subject: [PATCH 2/3] Use format of main splash screen for video load screen

---
 js/page/watch.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/js/page/watch.js b/js/page/watch.js
index 9fa1f58a3..6968469bf 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -38,15 +38,13 @@ var WatchPage = React.createClass({
   },
   render: function() {
     return (
-      <main className="full-screen">
-      <div className={this.state.readyToPlay ? 'hidden' : ''}>
-        <h3>Loading lbry://{this.props.name}</h3>
-        {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>
-      </main>
+      !this.state.readyToPlay
+        ? <LoadScreen message={'Loading video'} details={this.state.loadStatusMessage} />
+        : <main className="full-screen">
+            <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>
+          </main>
     );
   }
 });

From d7ec67c4ee6a5b95a6974ebcc30fd60ca33a51a2 Mon Sep 17 00:00:00 2001
From: Jeremy Kauffman <jeremy@usetopscore.com>
Date: Sat, 24 Sep 2016 15:27:07 -0400
Subject: [PATCH 3/3] add ellipsis to initial load message for consistency

---
 js/page/watch.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/page/watch.js b/js/page/watch.js
index 6968469bf..9db199891 100644
--- a/js/page/watch.js
+++ b/js/page/watch.js
@@ -39,7 +39,7 @@ var WatchPage = React.createClass({
   render: function() {
     return (
       !this.state.readyToPlay
-        ? <LoadScreen message={'Loading video'} details={this.state.loadStatusMessage} />
+        ? <LoadScreen message={'Loading video...'} details={this.state.loadStatusMessage} />
         : <main className="full-screen">
             <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} />