From d604aef8411e6697eb3ab9026dab2ce6eb9cb6ad Mon Sep 17 00:00:00 2001
From: Zoia <43918051+zizi62@users.noreply.github.com>
Date: Mon, 11 Jan 2021 07:22:43 -0500
Subject: [PATCH] Ott 702 loader for video (#272)

---
 src/features/MultiSourcePlayer/hooks/index.tsx |  2 ++
 src/features/MultiSourcePlayer/index.tsx       | 10 ++++++++++
 src/features/StreamPlayer/hooks/index.tsx      |  1 +
 src/features/StreamPlayer/index.tsx            | 10 ++++++++++
 src/features/StreamPlayer/styled.tsx           | 10 ++++++++++
 5 files changed, 33 insertions(+)

diff --git a/src/features/MultiSourcePlayer/hooks/index.tsx b/src/features/MultiSourcePlayer/hooks/index.tsx
index f5658c32..85ddeae2 100644
--- a/src/features/MultiSourcePlayer/hooks/index.tsx
+++ b/src/features/MultiSourcePlayer/hooks/index.tsx
@@ -62,6 +62,7 @@ export const useMultiSourcePlayer = ({
       loadedProgress,
       playedProgress,
       playing,
+      ready,
       seek,
       seeking,
     },
@@ -175,6 +176,7 @@ export const useMultiSourcePlayer = ({
     playPrevChapter,
     playedProgress,
     playing,
+    ready,
     seek,
     selectedQuality,
     startPlaying,
diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx
index 4c6d5b30..93c0294d 100644
--- a/src/features/MultiSourcePlayer/index.tsx
+++ b/src/features/MultiSourcePlayer/index.tsx
@@ -1,3 +1,4 @@
+import { Loader } from 'features/Loader'
 import { VolumeBar } from 'features/StreamPlayer/components/VolumeBar'
 import {
   PlayerWrapper,
@@ -6,6 +7,7 @@ import {
   Fullscreen,
   Next,
   Prev,
+  LoaderWrapper,
 } from 'features/StreamPlayer/styled'
 import { VideoPlayer } from 'features/VideoPlayer'
 
@@ -39,6 +41,7 @@ export const MultiSourcePlayer = (props: Props) => {
     playing,
     playNextChapter,
     playPrevChapter,
+    ready,
     seek,
     selectedQuality,
     togglePlaying,
@@ -54,6 +57,13 @@ export const MultiSourcePlayer = (props: Props) => {
       playing={playing}
       onClick={onPlayerClick}
     >
+      {
+        !ready && (
+          <LoaderWrapper>
+            <Loader color='#515151' />
+          </LoaderWrapper>
+        )
+      }
       <VideoPlayer
         src={activeSrc}
         playing={playing}
diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx
index 98573806..3146ac40 100644
--- a/src/features/StreamPlayer/hooks/index.tsx
+++ b/src/features/StreamPlayer/hooks/index.tsx
@@ -99,6 +99,7 @@ export const useVideoPlayer = ({
     onReady,
     playedProgress,
     playing,
+    ready,
     seek,
     setReady,
     startPlaying,
diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx
index 00d6fc9f..226d4f50 100644
--- a/src/features/StreamPlayer/index.tsx
+++ b/src/features/StreamPlayer/index.tsx
@@ -1,3 +1,4 @@
+import { Loader } from 'features/Loader'
 import { Settings } from 'features/MultiSourcePlayer/components/Settings'
 
 import type { Props } from './hooks'
@@ -10,6 +11,7 @@ import {
   Controls,
   PlayStop,
   Fullscreen,
+  LoaderWrapper,
 } from './styled'
 
 export const StreamPlayer = (props: Props) => {
@@ -31,6 +33,7 @@ export const StreamPlayer = (props: Props) => {
     onVolumeClick,
     playedProgress,
     playing,
+    ready,
     seek,
     selectedQuality,
     startPlaying,
@@ -48,6 +51,13 @@ export const StreamPlayer = (props: Props) => {
       playing={playing}
       onClick={onPlayerClick}
     >
+      {
+        !ready && (
+          <LoaderWrapper>
+            <Loader color='#515151' />
+          </LoaderWrapper>
+        )
+      }
       <VideoPlayer
         width='100%'
         height='100%'
diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx
index 4f646d3e..51a913e2 100644
--- a/src/features/StreamPlayer/styled.tsx
+++ b/src/features/StreamPlayer/styled.tsx
@@ -43,6 +43,16 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
   }
 `
 
+export const LoaderWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
 const ButtonBase = styled.button`
   outline: none;
   border: none;