Ott 702 loader for video (#272)

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,

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}

src/features/StreamPlayer/hooks/index.tsx

@@ -99,6 +99,7 @@ export const useVideoPlayer = ({
     onReady,
     playedProgress,
     playing,
+    ready,
     seek,
     setReady,
     startPlaying,

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%'

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;