From 3480bdc4cc095fc803f2f1577e188a7f1a23151e Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 26 May 2020 12:16:30 -0400
Subject: [PATCH] improve loading style for embedded videos

---
 static/app-strings.json              |  5 +++--
 ui/page/embedWrapper/view.jsx        | 25 ++++++++++++++++++++-----
 ui/scss/component/_embed-player.scss | 20 +++++++++++++++++---
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 2ca236592..4c9cfb516 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1218,5 +1218,6 @@
   "Check your rewards page to see if you qualify for paid content reimbursement. Only content in this section qualifies.": "Check your rewards page to see if you qualify for paid content reimbursement. Only content in this section qualifies.",
   "You don't have blocked channels.": "You don't have blocked channels.",
   "You have one blocked channel.": "You have one blocked channel.",
-  "You have %channels% blocked channels.": "You have %channels% blocked channels."
-}
+  "You have %channels% blocked channels.": "You have %channels% blocked channels.",
+  "Drop here to publish!": "Drop here to publish!"
+}
\ No newline at end of file
diff --git a/ui/page/embedWrapper/view.jsx b/ui/page/embedWrapper/view.jsx
index 98115323a..288b9d70b 100644
--- a/ui/page/embedWrapper/view.jsx
+++ b/ui/page/embedWrapper/view.jsx
@@ -1,6 +1,8 @@
 // @flow
 import React, { useEffect } from 'react';
 import FileRender from 'component/fileRender';
+import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
+import Spinner from 'component/spinner';
 
 type Props = {
   uri: string,
@@ -17,6 +19,10 @@ export const EmbedContext = React.createContext();
 const EmbedWrapperPage = (props: Props) => {
   const { resolveUri, claim, uri, doPlayUri, costInfo, streamingUrl, doFetchCostInfoForUri, isResolvingUri } = props;
   const haveClaim = Boolean(claim);
+  const readyToDisplay = claim && streamingUrl;
+  const loading = !claim && isResolvingUri;
+  const noContentFound = !claim && !isResolvingUri;
+  const isPaidContent = costInfo && costInfo.cost > 0;
 
   useEffect(() => {
     if (resolveUri && uri && !haveClaim) {
@@ -34,12 +40,21 @@ const EmbedWrapperPage = (props: Props) => {
   }, [uri, haveClaim, doFetchCostInfoForUri]);
 
   return (
-    <div className={'embed__wrapper'}>
+    <div className="embed__wrapper">
       <EmbedContext.Provider value>
-        {claim && streamingUrl && <FileRender uri={uri} embedded />}
-        {!claim && isResolvingUri && <h1>Loading...</h1>}
-        {!claim && !isResolvingUri && <h1>No content at this link.</h1>}
-        {claim && costInfo && costInfo.cost > 0 && <h1>Paid content cannot be embedded.</h1>}
+        {readyToDisplay ? (
+          <FileRender uri={uri} embedded />
+        ) : (
+          <div className="embed__loading">
+            <FileViewerEmbeddedTitle uri={uri} />
+
+            <div className="embed__loading-text">
+              {loading && <Spinner delayed />}
+              {noContentFound && <h1>No content at this link.</h1>}
+              {isPaidContent && <h1>Paid content cannot be embedded.</h1>}
+            </div>
+          </div>
+        )}
       </EmbedContext.Provider>
     </div>
   );
diff --git a/ui/scss/component/_embed-player.scss b/ui/scss/component/_embed-player.scss
index c2cf7adb8..38dbcd5b5 100644
--- a/ui/scss/component/_embed-player.scss
+++ b/ui/scss/component/_embed-player.scss
@@ -7,9 +7,6 @@
   justify-content: space-between;
   align-items: center;
   background-color: var(--color-black);
-  h1 {
-    color: white;
-  }
 }
 
 .embed__inline-button {
@@ -28,3 +25,20 @@
     height: 200px;
   }
 }
+
+.embed__loading {
+  width: 100%;
+  height: 100%;
+}
+
+.embed__loading-text {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-white);
+
+  h1 {
+    font-size: var(--font-title);
+  }
+}