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 }) =>
+
+
+
+
+ {statusMessage}
+
+
;
+
+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 (
- {isPlaying
- ? !isReadyToPlay
- ?
- {__(
- "this is the world's worst loading screen and we shipped our software with it anyway..."
- )}
- {" "}
{loadStatusMessage}
-
+ {isPlaying &&
+ (!isReadyToPlay
+ ?
:
- :
-
-
}
+ />)}
+ {!isPlaying &&
+
+
+
}
);
}
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
+}