improve loading style for embedded videos

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!"
 }

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 />}
+        {readyToDisplay ? (
-        {!claim && isResolvingUri && <h1>Loading...</h1>}
+          <FileRender uri={uri} embedded />
-        {!claim && !isResolvingUri && <h1>No content at this link.</h1>}
+        ) : (
-        {claim && costInfo && costInfo.cost > 0 && <h1>Paid content cannot be embedded.</h1>}
+          <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>
   );

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);
+  }
+}