feat(ott-1556): add gradient for video controls (#463)

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

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

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;