From 57a7d1db977ded1055bc4fda6613c7978db5f19b Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean.yesmunt@gmail.com>
Date: Tue, 6 Jun 2017 21:12:45 -0700
Subject: [PATCH] add internal video loading screen component

---
 .../video/internal/loading-screen.jsx         | 12 +++++++
 ui/js/component/video/view.jsx                | 35 +++++++++----------
 ui/scss/component/_video.scss                 | 23 ++++++++++--
 3 files changed, 49 insertions(+), 21 deletions(-)
 create mode 100644 ui/js/component/video/internal/loading-screen.jsx

diff --git a/ui/js/component/video/internal/loading-screen.jsx b/ui/js/component/video/internal/loading-screen.jsx
new file mode 100644
index 000000000..e7974c986
--- /dev/null
+++ b/ui/js/component/video/internal/loading-screen.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const LoadingScreen = ({ statusMessage }) =>
+  <div className="video--loading--screen">
+    <div className="loading--spinner" />
+
+    <div>
+      {statusMessage}
+    </div>
+  </div>;
+
+export default LoadingScreen;
diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx
index 574e1a402..95c306cb0 100644
--- a/ui/js/component/video/view.jsx
+++ b/ui/js/component/video/view.jsx
@@ -4,6 +4,7 @@ import Link from "component/link";
 import Modal from "component/modal";
 import lbry from "lbry";
 import { Thumbnail } from "component/common";
+import LoadingScreen from "./internal/loading-screen";
 
 class VideoPlayButton extends React.Component {
   onPurchaseConfirmed() {
@@ -148,31 +149,27 @@ class Video extends React.Component {
 
     return (
       <div className={klassName}>
-        {isPlaying
-          ? !isReadyToPlay
-            ? <span>
-                {__(
-                  "this is the world's worst loading screen and we shipped our software with it anyway..."
-                )}
-                {" "}<br /><br />{loadStatusMessage}
-              </span>
+        {isPlaying &&
+          (!isReadyToPlay
+            ? <LoadingScreen status={loadStatusMessage} />
             : <VideoPlayer
                 filename={fileInfo.file_name}
                 poster={poster}
                 downloadPath={fileInfo.download_path}
                 mediaType={mediaType}
                 poster={poster}
-              />
-          : <div
-              className="video__cover"
-              style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
-            >
-              <VideoPlayButton
-                startPlaying={this.startPlaying.bind(this)}
-                {...this.props}
-                mediaType={mediaType}
-              />
-            </div>}
+              />)}
+        {!isPlaying &&
+          <div
+            className="video__cover"
+            style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
+          >
+            <VideoPlayButton
+              startPlaying={this.startPlaying.bind(this)}
+              {...this.props}
+              mediaType={mediaType}
+            />
+          </div>}
       </div>
     );
   }
diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss
index 739dc1b26..752c394d1 100644
--- a/ui/scss/component/_video.scss
+++ b/ui/scss/component/_video.scss
@@ -13,7 +13,6 @@ video {
   color: white;
 }
 
-
 .video-embedded {
   max-width: $width-page-constrained;
   max-height: $height-video-embedded;
@@ -28,6 +27,26 @@ video {
   &.video--active {
     /*background: none;*/
   }
+
+  .video--loading--screen {
+    .loading--spinner {
+      width: 100px;
+      height: 100px;
+      background-color: white;
+      margin: auto;
+
+      animation-name: spin;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      @keyframes spin {
+        from { transform: rotate(0deg) }
+        to { transform: rotate(-360deg) }
+      }
+    }
+  }
+
   .plyr {
     top: 50%;
     transform: translateY(-50%);
@@ -61,4 +80,4 @@ video {
     opacity: 1;
     transition: opacity $transition-standard;
   }
-}
\ No newline at end of file
+}