From 20ac46d57c5f462af46f2df4418701d1aeab4d7d Mon Sep 17 00:00:00 2001
From: KarelinDm <58763564+KarelinDm@users.noreply.github.com>
Date: Thu, 9 Sep 2021 11:38:02 +0300
Subject: [PATCH] feat(ott-1556): add gradient for video controls (#463)

---
 public/images/player-controls-gradient.png | Bin 0 -> 315 bytes
 src/features/MultiSourcePlayer/index.tsx   |   2 ++
 src/features/StreamPlayer/index.tsx        |   2 ++
 src/features/StreamPlayer/styled.tsx       |  10 ++++++++++
 4 files changed, 14 insertions(+)
 create mode 100644 public/images/player-controls-gradient.png

diff --git a/public/images/player-controls-gradient.png b/public/images/player-controls-gradient.png
new file mode 100644
index 0000000000000000000000000000000000000000..2854837676affcd123b064316723ed3011b1c751
GIT binary patch
literal 315
zcmV-B0mS}^P)<h;3K|Lk000e1NJLTq00031005E*1^@s6gy*1S00001b5ch_0Itp)
z=>Px#^+`lQR47wr$mvHI0362g?ql7@)_q@FTlampqx&!>Ba_HPW+F3^L=s6Ni6oIk
z`Xlps^Lx|t;^XT{NO-kGPZE-Y6qSm!AYEl3GkBx2kR9ZxT;v7$ssM#Skt)X9;GHT#
zDawL!Re{Q&N>!sKs8w~S4;oY>nu2E4g7?7()ryb7C)I}bphI<{E9h1|=neW*KL&z9
zHH6_{M2%t$<H3ZQ3_hzb_=<1Al$yp&FstS;A1tUvEMXbn@dGRPiB<f<8rHFa-`K<!
z{@^dRv4em3k6r9x9|t(Z5sq<!Q=H)(7r4X~u5p7~+~FP%c*GN)UjX9`Bi9*i7F_@U
N002ovPDHLkV1iR5hi(7>

literal 0
HcmV?d00001

diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx
index 8fd8a660..da476e9c 100644
--- a/src/features/MultiSourcePlayer/index.tsx
+++ b/src/features/MultiSourcePlayer/index.tsx
@@ -12,6 +12,7 @@ import {
   Backward,
   Forward,
   PlaybackTime,
+  ControlsGradient,
 } from 'features/StreamPlayer/styled'
 import { VideoPlayer } from 'features/VideoPlayer'
 
@@ -202,6 +203,7 @@ export const MultiSourcePlayer = (props: Props) => {
           </ControlsGroup>
         </ControlsRow>
       </Controls>
+      <ControlsGradient />
     </PlayerWrapper>
   )
 }
diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx
index 1ae9365d..f55a48a2 100644
--- a/src/features/StreamPlayer/index.tsx
+++ b/src/features/StreamPlayer/index.tsx
@@ -21,6 +21,7 @@ import {
   Backward,
   Forward,
   PlaybackTime,
+  ControlsGradient,
 } from './styled'
 
 export const StreamPlayer = (props: Props) => {
@@ -136,6 +137,7 @@ export const StreamPlayer = (props: Props) => {
           </ControlsGroup>
         </ControlsRow>
       </Controls>
+      <ControlsGradient />
     </PlayerWrapper>
   )
 }
diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx
index 74f678ff..d7078027 100644
--- a/src/features/StreamPlayer/styled.tsx
+++ b/src/features/StreamPlayer/styled.tsx
@@ -10,7 +10,17 @@ export const VideoPlayer = styled(VideoPlayerBase)`
   left: 0;
 `
 
+export const ControlsGradient = styled.div`
+  background-image: url(/images/player-controls-gradient.png);
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  pointer-events: none;
+  height: 145px;
+`
+
 export const Controls = styled.div`
+  z-index: 50;
   position: absolute;
   width: 100%;
   bottom: 22px;