Shortcuts indicators (#986)

* add missing icons

* add shortcuts indicator

* hide play indicator in certain situations, refactor

* animation experiment

* update animation, improvements

* rebase fix issues with not displaying play/pause, fix volume indicator

* update animations

* fix control bar animation

* use ems to scale player interface

* bring up prev changes, scale interface only on fullscreen

* use ems for all sizes for videojs wrapper

* fix CustomControls position

* bring back old position

* bring back pause on click, refactor overlay

* update icons, cr fixes

* add all player icons

* fix pip icon

src/shared/components/VideoPlayer/VideoPlayer.style.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled'
 
 import { SvgPlayerSoundOff } from '@/shared/icons'
 
-import { colors, sizes, transitions, zIndex } from '../../theme'
+import { colors, media, sizes, transitions, zIndex } from '../../theme'
 import { Text } from '../Text'
 
 type ContainerProps = {
@@ -32,13 +32,24 @@ const focusStyles = css`
   }
 `
 
+export const ControlsOverlay = styled.div<CustomControlsProps>`
+  font-size: ${({ isFullScreen }) => (isFullScreen ? sizes(8) : sizes(4))};
+  opacity: 0;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background: linear-gradient(180deg, transparent 0%, ${colors.gray[900]} 100%);
+  height: 8em;
+  transition: opacity 200ms ${transitions.easing}, visibility 200ms ${transitions.easing};
+`
+
 export const CustomControls = styled.div<CustomControlsProps>`
+  font-size: ${({ isFullScreen }) => (isFullScreen ? sizes(8) : sizes(4))};
   position: absolute;
-  height: 100%;
-  bottom: ${({ isFullScreen }) => (isFullScreen ? sizes(10) : sizes(4))};
-  padding: 0 ${sizes(4)};
+  height: 2.5em;
+  bottom: ${({ isFullScreen }) => (isFullScreen ? '2.5em' : '1em')};
+  padding: 0 1em;
   left: 0;
-  z-index: ${zIndex.overlay};
   display: flex;
   align-items: flex-end;
   width: 100%;
@@ -47,18 +58,20 @@ export const CustomControls = styled.div<CustomControlsProps>`
 `
 
 export const ControlButton = styled.button`
-  margin-right: ${sizes(2)};
+  margin-right: 0.5em;
   cursor: pointer;
   border: none;
   border-radius: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: ${sizes(2)};
+  padding: 0.5em;
   transition: background-color ${transitions.timings.player} ${transitions.easing} !important;
 
   & > svg {
     filter: drop-shadow(0 1px 2px ${colors.transparentBlack[32]});
+    width: 1.5em;
+    height: 1.5em;
   }
 
   :hover {
@@ -82,8 +95,8 @@ export const thumbStyles = css`
   appearance: none;
   border: none;
   background: ${colors.white};
-  width: ${sizes(3)};
-  height: ${sizes(3)};
+  width: 0.75em;
+  height: 0.75em;
   border-radius: 100%;
   cursor: pointer;
 `
@@ -93,8 +106,8 @@ export const VolumeSlider = styled.input`
   border-radius: 2px;
   margin: 0;
   padding: 0;
-  width: ${sizes(16)};
-  height: ${sizes(1)};
+  width: 4em;
+  height: 0.25em;
   background: linear-gradient(
     to right,
     ${colors.white} 0%,
@@ -120,15 +133,15 @@ export const VolumeSlider = styled.input`
 
 export const VolumeControl = styled.div`
   display: flex;
-  border-radius: 20px;
-  width: ${sizes(10)};
+  border-radius: 1.25em;
+  width: 2.5em;
   transition: background-color ${transitions.timings.sharp} ${transitions.easing},
     width ${transitions.timings.sharp} ${transitions.easing};
 
   :hover {
     background-color: ${colors.transparentPrimary[18]};
     backdrop-filter: blur(${sizes(8)});
-    width: ${sizes(30)};
+    width: 7.5em;
     ${VolumeSlider} {
       opacity: 1;
       transform: scaleX(1);
@@ -152,17 +165,21 @@ export const VolumeButton = styled(ControlButton)`
 export const StyledSvgPlayerSoundOff = styled(SvgPlayerSoundOff)`
   opacity: 0.5;
 `
-
-export const CurrentTime = styled(Text)`
+export const CurrentTimeWrapper = styled.div`
   display: flex;
-  height: ${sizes(10)};
+  height: 100%;
   color: ${colors.white};
-  margin-left: ${sizes(4)};
+  margin-left: 1em;
   text-shadow: 0 1px 2px ${colors.transparentBlack[32]};
   align-items: center;
   font-feature-settings: 'tnum' on, 'lnum' on;
 `
 
+export const CurrentTime = styled(Text)`
+  /* 14px */
+  font-size: 0.875em;
+`
+
 export const ScreenControls = styled.div`
   margin-left: auto;
 
@@ -171,6 +188,72 @@ export const ScreenControls = styled.div`
   }
 `
 
+export const ControlsIndicatorWrapper = styled.div`
+  position: absolute;
+  top: calc(50% - ${sizes(16)});
+  left: calc(50% - ${sizes(16)});
+  display: flex;
+  flex-direction: column;
+`
+
+export const ControlsIndicator = styled.div`
+  width: ${sizes(32)};
+  height: ${sizes(32)};
+  backdrop-filter: blur(${sizes(6)});
+  background-color: ${colors.transparentBlack[54]};
+  border-radius: 100%;
+  display: flex;
+  transform: scale(0.5);
+  justify-content: center;
+  align-items: center;
+
+  > svg {
+    transform: scale(0.75);
+    width: ${sizes(18)};
+    height: ${sizes(18)};
+  }
+`
+
+export const ControlsIndicatorTooltip = styled.div`
+  user-select: none;
+  display: none;
+  align-self: center;
+  background-color: ${colors.transparentBlack[54]};
+  padding: ${sizes(2)};
+  text-align: center;
+  margin-top: ${sizes(3)};
+  backdrop-filter: blur(${sizes(8)});
+
+  ${media.small} {
+    display: block;
+  }
+`
+
+const animationEasing = 'cubic-bezier(0, 0, 0.3, 1)'
+
+export const indicatorTransitions = css`
+  .indicator-exit {
+    opacity: 1;
+  }
+
+  .indicator-exit-active {
+    ${ControlsIndicator} {
+      transform: scale(1);
+      opacity: 0;
+      transition: transform 750ms ${animationEasing}, opacity 600ms 150ms ${animationEasing};
+
+      > svg {
+        transform: scale(1);
+        transition: transform 750ms ${animationEasing};
+      }
+    }
+    ${ControlsIndicatorTooltip} {
+      opacity: 0;
+      transition: transform 750ms ${animationEasing}, opacity 600ms 150ms ${animationEasing};
+    }
+  }
+`
+
 const backgroundContainerCss = css`
   .vjs-waiting .vjs-loading-spinner {
     display: none;
@@ -193,23 +276,40 @@ const backgroundContainerCss = css`
 `
 
 export const Container = styled.div<ContainerProps>`
+  ${indicatorTransitions}
+
   position: relative;
   height: 100%;
 
+  [class^='vjs'] {
+    font-size: ${({ isFullScreen }) => (isFullScreen ? sizes(8) : sizes(4))} !important;
+  }
+
   .video-js {
     background-color: ${colors.gray[900]};
   }
 
   .vjs-playing:hover ${CustomControls} {
-    transform: translateY(-${sizes(2)});
+    transform: translateY(-0.5em);
     opacity: 1;
   }
   .vjs-paused ${CustomControls} {
-    transform: translateY(-${sizes(2)});
+    transform: translateY(-0.5em);
     opacity: 1;
   }
 
   .vjs-user-inactive.vjs-playing > ${CustomControls} {
+    transform: translateY(0.5em);
+    opacity: 0;
+  }
+
+  .vjs-playing:hover ${ControlsOverlay} {
+    opacity: 1;
+  }
+  .vjs-paused ${ControlsOverlay} {
+    opacity: 1;
+  }
+  .vjs-user-inactive.vjs-playing > ${ControlsOverlay} {
     opacity: 0;
   }
 
@@ -219,31 +319,32 @@ export const Container = styled.div<ContainerProps>`
 
   .vjs-control-bar {
     opacity: 0;
-    background: linear-gradient(180deg, rgba(11, 12, 15, 0) 0%, #0b0c0f 100%);
+    background: none;
     align-items: flex-end;
-    height: ${({ isFullScreen }) => (isFullScreen ? sizes(40) : sizes(32))} !important;
-    transition: opacity ${transitions.timings.player} ${transitions.easing};
+    height: 2em;
+    z-index: ${zIndex.overlay};
+    transition: opacity 200ms ${transitions.easing} !important;
 
     :hover {
       & ~ ${CustomControls} {
         opacity: 0;
-        transform: translateY(${sizes(2)});
+        transform: translateY(0.5em);
       }
     }
 
     .vjs-progress-control {
-      height: ${sizes(8)};
-      z-index: ${zIndex.nearOverlay};
+      height: 2em;
+      z-index: ${zIndex.overlay};
       position: absolute;
       top: initial;
       left: 0;
       bottom: 0;
       width: 100%;
-      padding: ${({ isFullScreen }) => (isFullScreen ? `${sizes(6)} ${sizes(6)}` : `0 ${sizes(2)}`)} !important;
+      padding: ${({ isFullScreen }) => (isFullScreen ? `1.5em 1.5em` : `0 0.5em`)} !important;
 
       .vjs-slider {
         align-self: flex-end;
-        height: ${sizes(1)};
+        height: 0.25em;
         margin: 0;
         background-color: ${colors.transparentWhite[32]};
         transition: height ${transitions.timings.player} ${transitions.easing} !important;
@@ -263,10 +364,10 @@ export const Container = styled.div<ContainerProps>`
           opacity: 0;
           border-radius: 100%;
           background: ${colors.white};
-          right: -${sizes(2)};
-          width: ${sizes(4)};
-          height: ${sizes(4)};
-          top: -${sizes(1)};
+          right: -0.5em;
+          height: 1em;
+          width: 1em;
+          top: -0.25em;
           transition: opacity ${transitions.timings.player} ${transitions.easing};
         }
 
@@ -290,7 +391,7 @@ export const Container = styled.div<ContainerProps>`
       }
 
       :hover .vjs-slider {
-        height: ${sizes(2)};
+        height: 0.5em;
       }
     }
   }

src/shared/components/VideoPlayer/VideoPlayer.tsx

@@ -1,10 +1,14 @@
 import { debounce } from 'lodash'
-import React, { useEffect, useRef, useState } from 'react'
-import { useCallback } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { CSSTransition } from 'react-transition-group'
 
 import { usePersonalDataStore } from '@/providers'
 import {
   SvgOutlineVideo,
+  SvgPlayerBackwardFiveSec,
+  SvgPlayerBackwardTenSec,
+  SvgPlayerForwardFiveSec,
+  SvgPlayerForwardTenSec,
   SvgPlayerFullScreen,
   SvgPlayerPause,
   SvgPlayerPip,
@@ -12,6 +16,7 @@ import {
   SvgPlayerPlay,
   SvgPlayerSmallScreen,
   SvgPlayerSoundHalf,
+  SvgPlayerSoundOff,
   SvgPlayerSoundOn,
 } from '@/shared/icons'
 import { Logger } from '@/utils/logger'
@@ -20,7 +25,12 @@ import { formatDurationShort } from '@/utils/time'
 import {
   Container,
   ControlButton,
+  ControlsIndicator,
+  ControlsIndicatorTooltip,
+  ControlsIndicatorWrapper,
+  ControlsOverlay,
   CurrentTime,
+  CurrentTimeWrapper,
   CustomControls,
   PlayOverlay,
   ScreenControls,
@@ -30,7 +40,9 @@ import {
   VolumeSlider,
   VolumeSliderContainer,
 } from './VideoPlayer.style'
-import { VOLUME_STEP, VideoJsConfig, useVideoJsPlayer } from './videoJsPlayer'
+import { CustomVideojsEvents, VOLUME_STEP, VideoJsConfig, useVideoJsPlayer } from './videoJsPlayer'
+
+import { Text } from '../Text'
 
 export type VideoPlayerProps = {
   className?: string
@@ -47,6 +59,14 @@ declare global {
 }
 
 const isPiPSupported = 'pictureInPictureEnabled' in document
+type VideoEvent = CustomVideojsEvents | null
+
+type EventState = {
+  type: VideoEvent
+  description: string | null
+  icon: React.ReactNode | null
+  isVisible: boolean
+}
 
 const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, VideoPlayerProps> = (
   { className, autoplay, isInBackground, playing, ...videoJsConfig },
@@ -55,6 +75,7 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
   const [player, playerRef] = useVideoJsPlayer(videoJsConfig)
   const cachedPlayerVolume = usePersonalDataStore((state) => state.cachedPlayerVolume)
   const updateCachedPlayerVolume = usePersonalDataStore((state) => state.actions.updateCachedPlayerVolume)
+  const [indicator, setIndicator] = useState<EventState | null>(null)
 
   const [volume, setVolume] = useState(cachedPlayerVolume)
   const [isPlaying, setIsPlaying] = useState(false)
@@ -66,10 +87,31 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
 
   const displayPlayOverlay = playOverlayVisible && !isInBackground
 
+  // handle showing player indicators
+  useEffect(() => {
+    if (!player || isInBackground) {
+      return
+    }
+    const indicatorEvents = Object.values(CustomVideojsEvents)
+    const handler = (e: Event) => {
+      const playerVolume = e.type === CustomVideojsEvents.Unmuted ? cachedPlayerVolume || VOLUME_STEP : player.volume()
+      const indicator = createIndicator(e.type as VideoEvent, playerVolume, player.muted())
+      if (indicator) {
+        setIndicator({ ...indicator, isVisible: true })
+      }
+    }
+    player.on(indicatorEvents, handler)
+
+    return () => {
+      player.off(indicatorEvents, handler)
+    }
+  }, [cachedPlayerVolume, isInBackground, player])
+
   const playVideo = useCallback(() => {
     if (!player) {
       return
     }
+    player.trigger(CustomVideojsEvents.PlayControl)
     const playPromise = player.play()
     if (playPromise) {
       playPromise.catch((e) => {
@@ -200,23 +242,29 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
     if (!player) {
       return
     }
+    const events = [
+      CustomVideojsEvents.VolumeIncrease,
+      CustomVideojsEvents.VolumeDecrease,
+      CustomVideojsEvents.Muted,
+      CustomVideojsEvents.Unmuted,
+    ]
 
     const handler = (event: Event) => {
-      if (event.type === 'mute') {
+      if (event.type === CustomVideojsEvents.Muted) {
         setVolume(0)
         return
       }
-      if (event.type === 'unmute') {
+      if (event.type === CustomVideojsEvents.Unmuted) {
         setVolume(cachedPlayerVolume || VOLUME_STEP)
         return
       }
-      if (event.type === 'volumechange') {
+      if (event.type === CustomVideojsEvents.VolumeIncrease || CustomVideojsEvents.VolumeDecrease) {
         setVolume(player.volume())
       }
     }
-    player.on(['volumechange', 'mute', 'unmute'], handler)
+    player.on(events, handler)
     return () => {
-      player.off(['volumechange', 'mute', 'unmute'], handler)
+      player.off(events, handler)
     }
   }, [cachedPlayerVolume, volume, player])
 
@@ -242,7 +290,12 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
 
   // button/input handlers
   const handlePlayPause = () => {
-    isPlaying ? player?.pause() : playVideo()
+    if (isPlaying) {
+      player?.pause()
+      player?.trigger(CustomVideojsEvents.PauseControl)
+    } else {
+      playVideo()
+    }
   }
 
   const handleChangeVolume = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -296,36 +349,137 @@ const VideoPlayerComponent: React.ForwardRefRenderFunction<HTMLVideoElement, Vid
         </PlayOverlay>
       )}
       <div data-vjs-player>
-        <video ref={playerRef} className="video-js" />
+        <video
+          ref={playerRef}
+          className="video-js"
+          onClick={() => {
+            if (player?.paused()) {
+              player?.trigger(CustomVideojsEvents.PauseControl)
+            } else {
+              player?.trigger(CustomVideojsEvents.PlayControl)
+            }
+          }}
+        />
         {!isInBackground && !playOverlayVisible && (
-          <CustomControls isFullScreen={isFullScreen}>
-            <ControlButton onClick={handlePlayPause}>
-              {isPlaying ? <SvgPlayerPause /> : <SvgPlayerPlay />}
-            </ControlButton>
-            <VolumeControl>
-              <VolumeButton onClick={handleMute}>{renderVolumeButton()}</VolumeButton>
-              <VolumeSliderContainer>
-                <VolumeSlider step={0.01} max={1} min={0} value={volume} onChange={handleChangeVolume} type="range" />
-              </VolumeSliderContainer>
-            </VolumeControl>
-            <CurrentTime variant="body2">
-              {formatDurationShort(videoTime)} / {formatDurationShort(Math.floor(player?.duration() || 0))}
-            </CurrentTime>
-            <ScreenControls>
-              {isPiPSupported && (
-                <ControlButton onClick={handlePictureInPicture}>
-                  {isPiPEnabled ? <SvgPlayerPipDisable /> : <SvgPlayerPip />}
-                </ControlButton>
-              )}
-              <ControlButton onClick={handleFullScreen}>
-                {isFullScreen ? <SvgPlayerSmallScreen /> : <SvgPlayerFullScreen />}
+          <>
+            <ControlsOverlay isFullScreen={isFullScreen} />
+            <CustomControls isFullScreen={isFullScreen}>
+              <ControlButton onClick={handlePlayPause}>
+                {isPlaying ? <SvgPlayerPause /> : <SvgPlayerPlay />}
               </ControlButton>
-            </ScreenControls>
-          </CustomControls>
+              <VolumeControl>
+                <VolumeButton onClick={handleMute}>{renderVolumeButton()}</VolumeButton>
+                <VolumeSliderContainer>
+                  <VolumeSlider step={0.01} max={1} min={0} value={volume} onChange={handleChangeVolume} type="range" />
+                </VolumeSliderContainer>
+              </VolumeControl>
+              <CurrentTimeWrapper>
+                <CurrentTime variant="body2">
+                  {formatDurationShort(videoTime)} / {formatDurationShort(Math.floor(player?.duration() || 0))}
+                </CurrentTime>
+              </CurrentTimeWrapper>
+              <ScreenControls>
+                {isPiPSupported && (
+                  <ControlButton onClick={handlePictureInPicture}>
+                    {isPiPEnabled ? <SvgPlayerPipDisable /> : <SvgPlayerPip />}
+                  </ControlButton>
+                )}
+                <ControlButton onClick={handleFullScreen}>
+                  {isFullScreen ? <SvgPlayerSmallScreen /> : <SvgPlayerFullScreen />}
+                </ControlButton>
+              </ScreenControls>
+            </CustomControls>
+          </>
         )}
+        <CSSTransition
+          in={indicator?.isVisible}
+          timeout={indicator?.isVisible ? 0 : 750}
+          classNames="indicator"
+          mountOnEnter
+          unmountOnExit
+          onEntered={() => setIndicator((indicator) => (indicator ? { ...indicator, isVisible: false } : null))}
+          onExited={() => setIndicator(null)}
+        >
+          <ControlsIndicatorWrapper>
+            <ControlsIndicator>{indicator?.icon}</ControlsIndicator>
+            <ControlsIndicatorTooltip>
+              <Text variant="caption">{indicator?.description}</Text>
+            </ControlsIndicatorTooltip>
+          </ControlsIndicatorWrapper>
+        </CSSTransition>
       </div>
     </Container>
   )
 }
 
 export const VideoPlayer = React.forwardRef(VideoPlayerComponent)
+
+const createIndicator = (type: VideoEvent | null, playerVolume: number, playerMuted: boolean) => {
+  const formattedVolume = Math.floor(playerVolume * 100) + '%'
+  const isMuted = playerMuted || !Number(playerVolume.toFixed(2))
+
+  switch (type) {
+    case CustomVideojsEvents.PauseControl:
+      return {
+        icon: <SvgPlayerPause />,
+        description: 'Pause',
+        type,
+      }
+    case CustomVideojsEvents.PlayControl:
+      return {
+        icon: <SvgPlayerPlay />,
+        description: 'Play',
+        type,
+      }
+    case CustomVideojsEvents.BackwardFiveSec:
+      return {
+        icon: <SvgPlayerBackwardFiveSec />,
+        description: 'Backward 5s',
+        type,
+      }
+    case CustomVideojsEvents.ForwardFiveSec:
+      return {
+        icon: <SvgPlayerForwardFiveSec />,
+        description: 'Forward 5s',
+        type,
+      }
+    case CustomVideojsEvents.BackwardTenSec:
+      return {
+        icon: <SvgPlayerBackwardTenSec />,
+        description: 'Backward 10s',
+        type,
+      }
+    case CustomVideojsEvents.ForwardTenSec:
+      return {
+        icon: <SvgPlayerForwardTenSec />,
+        description: 'Forward 10s',
+        type,
+      }
+    case CustomVideojsEvents.Unmuted:
+      return {
+        icon: <SvgPlayerSoundOn />,
+        description: formattedVolume,
+        type,
+      }
+    case CustomVideojsEvents.Muted:
+      return {
+        icon: <SvgPlayerSoundOff />,
+        description: 'Mute',
+        type,
+      }
+    case CustomVideojsEvents.VolumeIncrease:
+      return {
+        icon: <SvgPlayerSoundOn />,
+        description: formattedVolume,
+        type,
+      }
+    case CustomVideojsEvents.VolumeDecrease:
+      return {
+        icon: isMuted ? <SvgPlayerSoundOff /> : <SvgPlayerSoundHalf />,
+        description: isMuted ? 'Mute' : formattedVolume,
+        type,
+      }
+    default:
+      return null
+  }
+}

src/shared/components/VideoPlayer/videoJsPlayer.ts

@@ -2,6 +2,19 @@ import { RefObject, useEffect, useRef, useState } from 'react'
 import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'
 import 'video.js/dist/video-js.css'
 
+export enum CustomVideojsEvents {
+  BackwardFiveSec = 'BACKWARD_FIVE_SEC',
+  BackwardTenSec = 'BACKWARD_TEN_SEC',
+  ForwardFiveSec = 'FORWARD_FIVE_SEC',
+  ForwardTenSec = 'FORWARD_TEN_SEC',
+  Muted = 'MUTED',
+  Unmuted = 'UNMUTED',
+  VolumeIncrease = 'VOLUME_INCREASE',
+  VolumeDecrease = 'VOLUME_DECREASE',
+  PlayControl = 'PLAY_CONTROL',
+  PauseControl = 'PAUSE_CONTROL',
+}
+
 export type VideoJsConfig = {
   src?: string | null
   width?: number
@@ -32,21 +45,27 @@ const hotkeysHandler = (event: videojs.KeyboardEvent, playerInstance: VideoJsPla
     case 'KeyK':
       if (isPaused) {
         playerInstance.play()
+        playerInstance.trigger(CustomVideojsEvents.PlayControl)
       } else {
         playerInstance.pause()
+        playerInstance.trigger(CustomVideojsEvents.PauseControl)
       }
       return
     case 'ArrowLeft':
       playerInstance.currentTime(currentTime - 5)
+      playerInstance.trigger(CustomVideojsEvents.BackwardFiveSec)
       return
     case 'ArrowRight':
       playerInstance.currentTime(currentTime + 5)
+      playerInstance.trigger(CustomVideojsEvents.ForwardFiveSec)
       return
     case 'KeyJ':
       playerInstance.currentTime(currentTime - 10)
+      playerInstance.trigger(CustomVideojsEvents.BackwardTenSec)
       return
     case 'KeyL':
       playerInstance.currentTime(currentTime + 10)
+      playerInstance.trigger(CustomVideojsEvents.ForwardTenSec)
       return
     case 'ArrowUp':
       if (playerInstance.muted()) {
@@ -55,18 +74,20 @@ const hotkeysHandler = (event: videojs.KeyboardEvent, playerInstance: VideoJsPla
       if (currentVolume <= 1) {
         playerInstance.volume(Math.min(currentVolume + VOLUME_STEP, 1))
       }
+      playerInstance.trigger(CustomVideojsEvents.VolumeIncrease)
       return
     case 'ArrowDown':
       if (currentVolume >= 0) {
         playerInstance.volume(Math.max(currentVolume - VOLUME_STEP, 0))
       }
+      playerInstance.trigger(CustomVideojsEvents.VolumeDecrease)
       return
     case 'KeyM':
       if (isMuted) {
-        playerInstance.trigger('unmute')
+        playerInstance.trigger(CustomVideojsEvents.Unmuted)
         playerInstance.muted(false)
       } else {
-        playerInstance.trigger('mute')
+        playerInstance.trigger(CustomVideojsEvents.Muted)
         playerInstance.muted(true)
       }
       return

src/shared/icons/PlayerBackwardFiveSec.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerBackwardFiveSec = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 4a8 8 0 00-8 8H2C2 6.477 6.477 2 12 2v2zm4 5l-4 3 4 3V9zm-5 0l-4 3 4 3V9z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerBackwardTenSec.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerBackwardTenSec = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 4a8 8 0 100 16v2C6.477 22 2 17.523 2 12S6.477 2 12 2v2zm4 5l-4 3 4 3V9zm-5 0l-4 3 4 3V9z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerCaptionsOff.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerCaptionsOff = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1 5a2 2 0 012-2h18a2 2 0 012 2v14a2 2 0 01-2 2H3a2 2 0 01-2-2V5zm20 0H3v14h18V5zM5 9a2 2 0 012-2h2a2 2 0 012 2v2H9V9H7v6h2v-2h2v2a2 2 0 01-2 2H7a2 2 0 01-2-2V9zm10-2a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2v-2h-2v2h-2V9h2v2h2V9a2 2 0 00-2-2h-2z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerCaptionsOn.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerCaptionsOn = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 3a2 2 0 00-2 2v14a2 2 0 002 2h18a2 2 0 002-2V5a2 2 0 00-2-2H3zm2 6a2 2 0 012-2h2a2 2 0 012 2v2H9V9H7v6h2v-2h2v2a2 2 0 01-2 2H7a2 2 0 01-2-2V9zm8 0a2 2 0 012-2h2a2 2 0 012 2v2h-2V9h-2v6h2v-2h2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V9z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerCastOff.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerCastOff = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M1 5a2 2 0 012-2h18a2 2 0 012 2v14a2 2 0 01-2 2H11v-2h10V5H3v6H1V5zm6 16a6 6 0 00-6-6v-2a8 8 0 018 8H7zm-6-2a2 2 0 012 2h2a4 4 0 00-4-4v2z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerCastOn.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerCastOn = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 3a2 2 0 00-2 2v6h2V5h18v14H11v2h10a2 2 0 002-2V5a2 2 0 00-2-2H3zM1 15a6 6 0 016 6h2a8 8 0 00-8-8v2zm2 6a2 2 0 00-2-2v-2a4 4 0 014 4H3zm2-10v.832A10.037 10.037 0 0110.168 17H19V7H5v4z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerEmbed.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerEmbed = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.293 7.707L19.586 12l-4.293 4.293 1.414 1.414 5-5 .707-.707-.707-.707-5-5-1.414 1.414zm-6.586 8.586L4.414 12l4.293-4.293-1.414-1.414-5 5-.707.707.707.707 5 5 1.414-1.414z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerForwardFiveSec.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerForwardFiveSec = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 4a8 8 0 018 8h2c0-5.523-4.477-10-10-10v2zM8 9l4 3-4 3V9zm5 0l4 3-4 3V9z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerForwardTenSec.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerForwardTenSec = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 4a8 8 0 110 16v2c5.523 0 10-4.477 10-10S17.523 2 12 2v2zM8 9l4 3-4 3V9zm5 0l4 3-4 3V9z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerFullScreen.tsx

@@ -4,11 +4,10 @@ import * as React from 'react'
 export const SvgPlayerFullScreen = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M4 16v3a1 1 0 001 1h3m12-4v3a1 1 0 01-1 1h-3M20 8V5a1 1 0 00-1-1h-3M4 8V5a1 1 0 011-1h3"
-      stroke="#F4F6F8"
-      strokeWidth={2}
-      strokeMiterlimit={10}
-      strokeLinecap="square"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5 15v4h4v2H5a2 2 0 01-2-2v-4h2zm16 0v4a2 2 0 01-2 2h-4v-2h4v-4h2zM3 9V5a2 2 0 012-2h4v2H5v4H3zm16 0V5h-4V3h4a2 2 0 012 2v4h-2z"
+      fill="#F4F6F8"
     />
   </svg>
 )

src/shared/icons/PlayerNext.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 
 export const SvgPlayerNext = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M19 5v14" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
+    <path fillRule="evenodd" clipRule="evenodd" d="M18 19V5h2v14h-2z" fill="#F4F6F8" />
     <path d="M4 5l11 7-11 7V5z" fill="#F4F6F8" />
   </svg>
 )

src/shared/icons/PlayerPause.tsx

@@ -3,6 +3,6 @@ import * as React from 'react'
 
 export const SvgPlayerPause = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M8 4v16M16 4v16M16 4v16" stroke="#F4F6F8" strokeWidth={4} strokeMiterlimit={10} />
+    <path fillRule="evenodd" clipRule="evenodd" d="M6 20V4h4v16H6zM14 20V4h4v16h-4z" fill="#F4F6F8" />
   </svg>
 )

src/shared/icons/PlayerPip.tsx

@@ -3,7 +3,11 @@ import * as React from 'react'
 
 export const SvgPlayerPip = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M2 5a1 1 0 011-1h18a1 1 0 011 1v14a1 1 0 01-1 1H3a1 1 0 01-1-1V5z" stroke="#F4F6F8" strokeWidth={2} />
-    <path d="M13 13h6v4h-6v-4z" fill="#F4F6F8" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 3a2 2 0 00-2 2v14a2 2 0 002 2h18a2 2 0 002-2V5a2 2 0 00-2-2H3zm0 2h18v14H3V5zm16 8h-6v4h6v-4z"
+      fill="#F4F6F8"
+    />
   </svg>
 )

src/shared/icons/PlayerPipDisable.tsx

@@ -2,33 +2,13 @@
 import * as React from 'react'
 
 export const SvgPlayerPipDisable = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg width={24} height={25} viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <g filter="url(#player-pip-disable_svg__filter0_d)" fill="#F4F6F8">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M21.192 19.777l-1.101-1.101c.547-.357.909-.975.909-1.677V7a2 2 0 00-2-2H6.414L4.222 2.807 2.808 4.22l16.97 16.97 1.414-1.414zM19 17h-.586l-2-2H17v-4h-4.586l-4-4H19v10z"
-      />
-      <path d="M3 17V7l2 2v8h8l2 2H5a2 2 0 01-2-2z" />
-    </g>
-    <defs>
-      <filter
-        id="player-pip-disable_svg__filter0_d"
-        x={-2}
-        y={-1}
-        width={28}
-        height={28}
-        filterUnits="userSpaceOnUse"
-        colorInterpolationFilters="sRGB"
-      >
-        <feFlood floodOpacity={0} result="BackgroundImageFix" />
-        <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
-        <feOffset dy={1} />
-        <feGaussianBlur stdDeviation={1} />
-        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0" />
-        <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
-        <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
-      </filter>
-    </defs>
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M21.192 19.777l-1.101-1.101c.547-.357.909-.975.909-1.677V7a2 2 0 00-2-2H6.414L4.222 2.807 2.808 4.22l16.97 16.97 1.414-1.414zM19 17h-.586l-2-2H17v-4h-4.586l-4-4H19v10z"
+      fill="#F4F6F8"
+    />
+    <path d="M3 17V7l2 2v8h8l2 2H5a2 2 0 01-2-2z" fill="#F4F6F8" />
   </svg>
 )

src/shared/icons/PlayerPrevious.tsx

@@ -0,0 +1,8 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerPrevious = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path fillRule="evenodd" clipRule="evenodd" d="M9 12l11 7V5L9 12zm-5 7h2V5H4v14z" fill="#F4F6F8" />
+  </svg>
+)

src/shared/icons/PlayerReplay.tsx

@@ -0,0 +1,9 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerReplay = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 11l-3 4-3-4h6z" fill="#F4F6F8" />
+    <path d="M5 12a7 7 0 112 4.899" stroke="#F4F6F8" strokeWidth={2} />
+  </svg>
+)

src/shared/icons/PlayerShare.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerShare = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20 12l-8-6v4h-2c-4 0-6 2-6 5v1h2v-1a1 1 0 011-1h5v4l8-6z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerSmallScreen.tsx

@@ -4,11 +4,10 @@ import * as React from 'react'
 export const SvgPlayerSmallScreen = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M16 4v3a1 1 0 001 1h3M8 4v3a1 1 0 01-1 1H4M8 20v-3a1 1 0 00-1-1H4M16 20v-3a1 1 0 011-1h3"
-      stroke="#F4F6F8"
-      strokeWidth={2}
-      strokeMiterlimit={10}
-      strokeLinecap="square"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17 3v4h4v2h-4a2 2 0 01-2-2V3h2zM9 3v4a2 2 0 01-2 2H3V7h4V3h2zM7 21v-4H3v-2h4a2 2 0 012 2v4H7zM15 21v-4a2 2 0 012-2h4v2h-4v4h-2z"
+      fill="#F4F6F8"
     />
   </svg>
 )

src/shared/icons/PlayerSoundOff.tsx

@@ -3,17 +3,8 @@ import * as React from 'react'
 
 export const SvgPlayerSoundOff = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path d="M21.222 20.808l-18-18" stroke="#F4F6F8" strokeWidth={2} strokeMiterlimit={10} />
     <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M14.899 15.899A4.002 4.002 0 0014 8v2a2 2 0 110 4v1l.899.899zM5.172 9H3a1 1 0 00-1 1v4a1 1 0 001 1h3l4 5h2v-4.172L5.172 9zM12 13V4h-2L6.889 7.889 12 12.999z"
-      fill="#F4F6F8"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M14.17 17.998A6.362 6.362 0 0114 18v2a8.02 8.02 0 001.936-.236l-1.767-1.766zm3.786.957A8 8 0 0014 4v2a6 6 0 012.47 11.47l1.486 1.485z"
+      d="M15.326 13.497L12 10.171V4h-2L8.146 6.317 3.929 2.1 2.515 3.515l18 18 1.414-1.415-2.358-2.358A8 8 0 0014 4v2a6 6 0 014.155 10.327l-1.415-1.414A4 4 0 0014 8v2a2 2 0 011.326 3.497zM5.172 9H3a1 1 0 00-1 1v4a1 1 0 001 1h3l4 5h2v-4.172L5.172 9zM14 18c.057 0 .113 0 .17-.002l1.766 1.766A8.02 8.02 0 0114 20v-2z"
       fill="#F4F6F8"
     />
   </svg>

src/shared/icons/PlayerSoundOn.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 export const SvgPlayerSoundOn = (props: React.SVGProps<SVGSVGElement>) => (
   <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M6 9l4-5h2v16h-2l-4-5H3a1 1 0 01-1-1v-4a1 1 0 011-1h3z" fill="#F4F6F8" />
-    <path d="M14 19a7 7 0 100-14M14 15a3 3 0 100-6" stroke="#F4F6F8" strokeWidth={2} />
+    <path fillRule="evenodd" clipRule="evenodd" d="M20 12a6 6 0 00-6-6V4a8 8 0 110 16v-2a6 6 0 006-6z" fill="#F4F6F8" />
+    <path fillRule="evenodd" clipRule="evenodd" d="M16 12a2 2 0 00-2-2V8a4 4 0 010 8v-2a2 2 0 002-2z" fill="#F4F6F8" />
   </svg>
 )

src/shared/icons/PlayerSubtitlesOff.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerSubtitlesOff = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 3a2 2 0 00-2 2v12a2 2 0 002 2h2v.234c0 1.554 1.696 2.515 3.029 1.715L11.277 19H21a2 2 0 002-2V5a2 2 0 00-2-2H3zm0 2h18v12H10.723l-.238.142L7 19.234V17H3V5zm10 8H9v2h4v-2zm-8 0h2v2H5v-2zm14 0h-4v2h4v-2z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerSubtitlesOn.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerSubtitlesOn = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 3a2 2 0 00-2 2v12a2 2 0 002 2h2v.234c0 1.554 1.696 2.515 3.029 1.715L11.277 19H21a2 2 0 002-2V5a2 2 0 00-2-2H3zm10 10H9v2h4v-2zm-8 0h2v2H5v-2zm14 0h-4v2h4v-2z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerVideoModeCinemaView.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerVideoModeCinemaView = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 3a2 2 0 00-2 2v14a2 2 0 002 2h18a2 2 0 002-2V5a2 2 0 00-2-2H3zm0 2h18v14H3V5zm16 2H5v6h14V7z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerVideoModeCompactView.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerVideoModeCompactView = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 3a2 2 0 00-2 2v14a2 2 0 002 2h18a2 2 0 002-2V5a2 2 0 00-2-2H3zm0 2h18v14H3V5zm12 2H5v6h10V7z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerVideoSettingsOff.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerVideoSettingsOff = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.061 1.647l-.41-.41-.561.152c-.896.246-1.746.601-2.535 1.052l-.505.287V5.222l-.828.828H2.729l-.289.505c-.45.789-.805 1.639-1.05 2.535l-.154.56.41.411L3 11.414v1.172l-1.353 1.353-.411.41.153.561c.246.896.601 1.747 1.051 2.535l.288.505H5.222l.828.828v2.493l.505.289c.789.45 1.639.806 2.535 1.05l.56.154.411-.41L11.414 21h1.172l1.353 1.353.41.411.561-.153c.896-.245 1.747-.601 2.535-1.051l.505-.288V18.778l.828-.828h2.493l.289-.505c.45-.788.806-1.639 1.05-2.535l.154-.56-.41-.41L21 12.585v-1.172l1.353-1.353.411-.41-.153-.561c-.245-.896-.601-1.746-1.051-2.535l-.288-.505H18.778l-.828-.828V2.729l-.505-.288c-.788-.45-1.639-.806-2.535-1.052l-.56-.153-.41.41L12.585 3h-1.172l-1.353-1.353zm-2.01 3.99V3.91c.33-.162.67-.304 1.021-.424l1.22 1.22.294.293H13.414l.293-.293 1.22-1.22c.352.12.693.262 1.023.424V6.05l.293.293 1.414 1.415.293.292h2.14c.161.33.303.672.424 1.022l-1.221 1.221-.293.293V13.414l.293.293 1.22 1.22c-.12.352-.262.693-.423 1.023h-2.14l-.293.293-1.414 1.414-.293.293v2.14a8.94 8.94 0 01-1.022.424l-1.22-1.221-.294-.293H10.586l-.293.293-1.22 1.22a8.93 8.93 0 01-1.023-.423v-2.14l-.293-.293-1.414-1.414-.293-.293H3.911a8.932 8.932 0 01-.424-1.022l1.22-1.22.293-.294V10.586l-.293-.293-1.22-1.22c.12-.351.262-.693.424-1.023H6.05l.293-.292 1.414-1.415.293-.293v-.414zM10 12a2 2 0 114 0 2 2 0 01-4 0zm2-4a4 4 0 100 8 4 4 0 000-8z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/PlayerVideoSettingsOn.tsx

@@ -0,0 +1,13 @@
+// THIS FILE WAS AUTOGENERATED BY SVGR. DO NOT MODIFY IT MANUALLY.
+import * as React from 'react'
+
+export const SvgPlayerVideoSettingsOn = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg width={24} height={24} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.586 3h-1.172L9.65 1.236l-.56.153c-.896.246-1.746.601-2.535 1.052l-.505.287v2.494l-.828.828H2.728l-.288.505c-.45.789-.805 1.639-1.05 2.535l-.154.56L3 11.414v1.172L1.236 14.35l.153.56c.246.896.601 1.747 1.051 2.535l.288.505h2.494l.828.828v2.494l.505.288c.789.45 1.639.806 2.535 1.05l.56.154L11.414 21h1.172l1.764 1.764.56-.153c.896-.245 1.747-.601 2.535-1.051l.505-.288v-2.494l.828-.828h2.494l.288-.505c.45-.788.806-1.639 1.05-2.535l.154-.56L21 12.586v-1.172l1.764-1.764-.153-.56c-.245-.896-.601-1.746-1.051-2.535l-.288-.505h-2.494l-.828-.828V2.728l-.505-.287c-.788-.45-1.639-.806-2.535-1.052l-.56-.153L12.586 3zM12 16a4 4 0 100-8 4 4 0 000 8z"
+      fill="#F4F6F8"
+    />
+  </svg>
+)

src/shared/icons/index.tsx

@@ -74,6 +74,15 @@ export * from './OutlineVideo'
 export * from './OutlineWarning'
 export * from './OutlineZoomIn'
 export * from './OutlineZoomOut'
+export * from './PlayerBackwardFiveSec'
+export * from './PlayerBackwardTenSec'
+export * from './PlayerCaptionsOff'
+export * from './PlayerCaptionsOn'
+export * from './PlayerCastOff'
+export * from './PlayerCastOn'
+export * from './PlayerEmbed'
+export * from './PlayerForwardFiveSec'
+export * from './PlayerForwardTenSec'
 export * from './PlayerFullScreen'
 export * from './PlayerNext'
 export * from './PlayerPause'
@@ -82,7 +91,16 @@ export * from './PlayerPip'
 export * from './PlayerPlay'
 export * from './PlayerPlaylistAdd'
 export * from './PlayerPlaylist'
+export * from './PlayerPrevious'
+export * from './PlayerReplay'
+export * from './PlayerShare'
 export * from './PlayerSmallScreen'
 export * from './PlayerSoundHalf'
 export * from './PlayerSoundOff'
 export * from './PlayerSoundOn'
+export * from './PlayerSubtitlesOff'
+export * from './PlayerSubtitlesOn'
+export * from './PlayerVideoModeCinemaView'
+export * from './PlayerVideoModeCompactView'
+export * from './PlayerVideoSettingsOff'
+export * from './PlayerVideoSettingsOn'

src/shared/icons/svgs/player-backward-five-sec.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12H2C2 6.47715 6.47715 2 12 2V4ZM16 9L12 12L16 15V9ZM11 9L7 12L11 15L11 9Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-backward-ten-sec.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20V22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2V4ZM16 9L12 12L16 15V9ZM11 9L7 12L11 15L11 9Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-captions-off.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 3.89543 1.89543 3 3 3H21C22.1046 3 23 3.89543 23 5V19C23 20.1046 22.1046 21 21 21H3C1.89543 21 1 20.1046 1 19V5ZM21 5H3V19H21V5ZM5 9C5 7.89543 5.89543 7 7 7H9C10.1046 7 11 7.89543 11 9V11H9V9H7V15H9V13H11V15C11 16.1046 10.1046 17 9 17H7C5.89543 17 5 16.1046 5 15V9ZM15 7C13.8954 7 13 7.89543 13 9V15C13 16.1046 13.8954 17 15 17H17C18.1046 17 19 16.1046 19 15V13H17V15H15V9H17V11H19V9C19 7.89543 18.1046 7 17 7H15Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-captions-on.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C1.89543 3 1 3.89543 1 5V19C1 20.1046 1.89543 21 3 21H21C22.1046 21 23 20.1046 23 19V5C23 3.89543 22.1046 3 21 3H3ZM5 9C5 7.89543 5.89543 7 7 7H9C10.1046 7 11 7.89543 11 9V11H9V9H7V15H9V13H11V15C11 16.1046 10.1046 17 9 17H7C5.89543 17 5 16.1046 5 15V9ZM13 9C13 7.89543 13.8954 7 15 7H17C18.1046 7 19 7.89543 19 9V11H17V9H15V15H17V13H19V15C19 16.1046 18.1046 17 17 17H15C13.8954 17 13 16.1046 13 15V9Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-cast-off.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5C1 3.89543 1.89543 3 3 3H21C22.1046 3 23 3.89543 23 5V19C23 20.1046 22.1046 21 21 21H11V19H21V5H3V11H1V5ZM7 21C7 17.6863 4.31371 15 1 15V13C5.41828 13 9 16.5817 9 21H7ZM1 19C2.10457 19 3 19.8954 3 21H5C5 18.7909 3.20914 17 1 17V19Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-cast-on.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C1.89543 3 1 3.89543 1 5V11H3V5H21V19H11V21H21C22.1046 21 23 20.1046 23 19V5C23 3.89543 22.1046 3 21 3H3ZM1 15C4.31371 15 7 17.6863 7 21H9C9 16.5817 5.41828 13 1 13V15ZM3 21C3 19.8954 2.10457 19 1 19V17C3.20914 17 5 18.7909 5 21H3ZM5 11V11.8321C7.30688 12.84 9.15999 14.6932 10.1679 17H12.3172L12.3172 17H19V7H13H11H5V9.68286V11Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-embed.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2929 7.70718L19.5858 12.0001L15.2929 16.293L16.7071 17.7072L21.7071 12.7072L22.4142 12.0001L21.7071 11.293L16.7071 6.29297L15.2929 7.70718ZM8.70714 16.293L4.41424 12.0001L8.70713 7.70718L7.29292 6.29297L2.29292 11.293L1.58582 12.0001L2.29292 12.7072L7.29292 17.7072L8.70714 16.293Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-forward-five-sec.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C16.4183 4 20 7.58172 20 12H22C22 6.47715 17.5228 2 12 2V4ZM8 9L12 12L8 15V9ZM13 9L17 12L13 15L13 9Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-forward-ten-sec.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20V22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2V4ZM8 9L12 12L8 15V9ZM13 9L17 12L13 15L13 9Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-full-screen.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 16V19C4 19.5523 4.44772 20 5 20H8M20 16V19C20 19.5523 19.5523 20 19 20H16" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
-<path d="M20 8L20 5C20 4.44772 19.5523 4 19 4L16 4M4 8L4 5C4 4.44772 4.44771 4 5 4L8 4" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 15V19H9V21H5C3.89543 21 3 20.1046 3 19V15H5ZM21 15V19C21 20.1046 20.1046 21 19 21H15V19H19V15H21Z" fill="#F4F6F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 9L3 5C3 3.89543 3.89543 3 5 3L9 3V5L5 5L5 9H3ZM19 9V5L15 5V3L19 3C20.1046 3 21 3.89543 21 5V9H19Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/player-next.svg

@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M19 5L19 19" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 19L18 5L20 5L20 19H18Z" fill="#F4F6F8"/>
 <path d="M4 5L15 12L4 19V5Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/player-pause.svg

@@ -1,5 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 4L8 20" stroke="#F4F6F8" stroke-width="4" stroke-miterlimit="10"/>
-<path d="M16 4L16 20" stroke="#F4F6F8" stroke-width="4" stroke-miterlimit="10"/>
-<path d="M16 4L16 20" stroke="#F4F6F8" stroke-width="4" stroke-miterlimit="10"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 20L6 4L10 4L10 20H6Z" fill="#F4F6F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 20L14 4L18 4L18 20H14Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/player-pip-disable.svg

@@ -1,17 +1,4 @@
-<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_d)">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M21.1924 19.7772L20.0909 18.6757C20.6382 18.3188 21 17.7012 21 16.9991V6.9991C21 5.89453 20.1045 4.9991 19 4.9991H6.41429L4.22183 2.80664L2.80762 4.22085L19.7782 21.1914L21.1924 19.7772ZM19 16.9991H18.4143L16.4143 14.9991H17V10.9991H12.4143L8.41429 6.9991H19V16.9991Z" fill="#F4F6F8"/>
 <path d="M2.99995 16.9991V6.9991L4.99995 8.9991V16.9991H13L15 18.9991H4.99995C3.89538 18.9991 2.99995 18.1037 2.99995 16.9991Z" fill="#F4F6F8"/>
-</g>
-<defs>
-<filter id="filter0_d" x="-2" y="-1" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
-<feOffset dy="1"/>
-<feGaussianBlur stdDeviation="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.32 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
-</filter>
-</defs>
 </svg>

src/shared/icons/svgs/player-pip.svg

@@ -1,4 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2 5C2 4.44772 2.44772 4 3 4H21C21.5523 4 22 4.44772 22 5V19C22 19.5523 21.5523 20 21 20H3C2.44772 20 2 19.5523 2 19V5Z" stroke="#F4F6F8" stroke-width="2"/>
-<path d="M13 13H19V17H13V13Z" fill="#F4F6F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C1.89543 3 1 3.89543 1 5V19C1 20.1046 1.89543 21 3 21H21C22.1046 21 23 20.1046 23 19V5C23 3.89543 22.1046 3 21 3H3ZM3 5H21V19H3V5ZM19 13H13V17H19V13Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/player-previous.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12L20 19L20 5L9 12ZM4 19L6 19L6 5L4 5L4 19Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-replay.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 11L5 15L2 11L8 11Z" fill="#F4F6F8"/>
+<path d="M5 12C5 8.13401 8.13401 5 12 5C15.866 5 19 8.13401 19 12C19 15.866 15.866 19 12 19C10.0413 19 8.27052 18.1955 7 16.899" stroke="#F4F6F8" stroke-width="2"/>
+</svg>

src/shared/icons/svgs/player-share.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9998 12L11.9998 6V9.99963C9.85055 9.99963 9.99976 9.99969 9.99976 9.99969C5.99976 9.99969 4 12 4 14.9996V15.9996H6V14.9996C5.99987 14.4474 6.44708 13.9996 6.99932 13.9996H11.9998V18L19.9998 12Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-small-screen.svg

@@ -1,6 +1,6 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16 4V7C16 7.55228 16.4477 8 17 8H20" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
-<path d="M8 4V7C8 7.55228 7.55228 8 7 8H4" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
-<path d="M8 20L8 17C8 16.4477 7.55228 16 7 16L4 16" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
-<path d="M16 20L16 17C16 16.4477 16.4477 16 17 16L20 16" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10" stroke-linecap="square"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 3V7H21V9H17C15.8954 9 15 8.10457 15 7V3H17Z" fill="#F4F6F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3V7C9 8.10457 8.10457 9 7 9H3V7H7V3H9Z" fill="#F4F6F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 21L7 17H3L3 15H7C8.10457 15 9 15.8954 9 17L9 21H7Z" fill="#F4F6F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 21L15 17C15 15.8954 15.8954 15 17 15H21V17H17L17 21H15Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/player-sound-off.svg

@@ -1,6 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.2218 20.8076L3.2218 2.80762" stroke="#F4F6F8" stroke-width="2" stroke-miterlimit="10"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8988 15.8986C16.6751 15.4908 18 13.9001 18 12C18 9.79086 16.2091 8 14 8V10C15.1046 10 16 10.8954 16 12C16 13.1046 15.1046 14 14 14V14.9998L14.8988 15.8986Z" fill="#F4F6F8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.17172 9H3C2.44772 9 2 9.44772 2 10V14C2 14.5523 2.44772 15 3 15H6L10 20H12V15.8283L5.17172 9ZM12 12.9998V4H10L6.88896 7.8888L12 12.9998Z" fill="#F4F6F8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1694 17.9977C14.1131 17.9992 14.0566 18 14 18V20C14.6676 20 15.316 19.9182 15.9359 19.7642L14.1694 17.9977ZM17.9555 18.9553C20.3712 17.5785 22 14.9795 22 12C22 7.58172 18.4183 4 14 4V6C17.3137 6 20 8.68629 20 12C20 14.4333 18.5516 16.5282 16.4698 17.4697L17.9555 18.9553Z" fill="#F4F6F8"/>
+<path d="M15.3259 13.4973L12 10.1714V3.99991H10L8.14602 6.31738L3.92898 2.10034L2.51477 3.51456L20.5148 21.5146L21.929 20.1003L19.5705 17.7418C21.0689 16.2879 22 14.2527 22 11.9999C22 7.58163 18.4183 3.99991 14 3.99991V5.99991C17.3137 5.99991 20 8.6862 20 11.9999C20 13.7004 19.2926 15.2356 18.1561 16.3274L16.7414 14.9128C17.5162 14.1833 18 13.1481 18 11.9999C18 9.79077 16.2091 7.99991 14 7.99991V9.99991C15.1046 9.99991 16 10.8953 16 11.9999C16 12.5958 15.7394 13.1309 15.3259 13.4973Z" fill="#F4F6F8"/>
+<path d="M5.17172 8.99991H3C2.44772 8.99991 2 9.44762 2 9.99991V13.9999C2 14.5522 2.44772 14.9999 3 14.9999H6L10 19.9999H12V15.8282L5.17172 8.99991Z" fill="#F4F6F8"/>
+<path d="M14 17.9999C14.0566 17.9999 14.1131 17.9991 14.1694 17.9976L15.9359 19.7641C15.316 19.9181 14.6676 19.9999 14 19.9999V17.9999Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/player-sound-on.svg

@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M6 9L10 4H12V20H10L6 15H3C2.44772 15 2 14.5523 2 14V10C2 9.44772 2.44772 9 3 9H6Z" fill="#F4F6F8"/>
-<path d="M14 19C17.866 19 21 15.866 21 12C21 8.13401 17.866 5 14 5" stroke="#F4F6F8" stroke-width="2"/>
-<path d="M14 15C15.6569 15 17 13.6569 17 12C17 10.3431 15.6569 9 14 9" stroke="#F4F6F8" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 12C20 8.68629 17.3137 6 14 6V4C18.4183 4 22 7.58172 22 12C22 16.4183 18.4183 20 14 20V18C17.3137 18 20 15.3137 20 12Z" fill="#F4F6F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 12C16 10.8954 15.1046 10 14 10V8C16.2091 8 18 9.79086 18 12C18 14.2091 16.2091 16 14 16V14C15.1046 14 16 13.1046 16 12Z" fill="#F4F6F8"/>
 </svg>

src/shared/icons/svgs/player-subtitles-off.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C1.89543 3 1 3.89543 1 5V17C1 18.1046 1.89543 19 3 19H5V19.2338C5 20.7884 6.69595 21.7486 8.02899 20.9488L11.277 19H21C22.1046 19 23 18.1046 23 17V5C23 3.89543 22.1046 3 21 3H3ZM3 5L21 5V17H11H10.723L10.4855 17.1425L7 19.2338V18V17H6H3V5ZM13 13H9V15H13V13ZM5 13H7V15H5V13ZM19 13H15V15H19V13Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-subtitles-on.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C1.89543 3 1 3.89543 1 5V17C1 18.1046 1.89543 19 3 19H5V19.2338C5 20.7884 6.69595 21.7486 8.02899 20.9488L11.277 19H21C22.1046 19 23 18.1046 23 17V5C23 3.89543 22.1046 3 21 3H3ZM13 13H9V15H13V13ZM5 13H7V15H5V13ZM19 13H15V15H19V13Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-video-mode-cinema-view.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C1.89543 3 1 3.89543 1 5V19C1 20.1046 1.89543 21 3 21H21C22.1046 21 23 20.1046 23 19V5C23 3.89543 22.1046 3 21 3H3ZM3 5H21V19H3V5ZM19 7H5V13H19V7Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-video-mode-compact-view.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3C1.89543 3 1 3.89543 1 5V19C1 20.1046 1.89543 21 3 21H21C22.1046 21 23 20.1046 23 19V5C23 3.89543 22.1046 3 21 3H3ZM3 5H21V19H3V5ZM15 7H5V13H15V7Z" fill="#F4F6F8"/>
+</svg>

src/shared/icons/svgs/player-video-settings-on.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5858 3.00011L11.4143 3.00011L9.65024 1.23608L9.08992 1.38944C8.19381 1.6347 7.34352 1.99031 6.55467 2.44053L6.05036 2.72836V5.222L5.22193 6.05043L2.7283 6.05043L2.44047 6.55474C1.99024 7.34358 1.63464 8.19387 1.38938 9.08998L1.23602 9.6503L3.00005 11.4143L3.00005 12.5859L1.23602 14.3499L1.38938 14.9102C1.63464 15.8064 1.99025 16.6567 2.44047 17.4455L2.7283 17.9498H5.22194L6.05037 18.7782V21.2719L6.55468 21.5597C7.34352 22.0099 8.19381 22.3655 9.08992 22.6108L9.65024 22.7641L11.4143 21.0001L12.5858 21.0001L14.3499 22.7641L14.9102 22.6108C15.8063 22.3655 16.6566 22.0099 17.4454 21.5597L17.9498 21.2719V18.7782L18.7782 17.9498H21.2718L21.5596 17.4455C22.0099 16.6567 22.3655 15.8064 22.6107 14.9102L22.7641 14.3499L21.0001 12.5859L21.0001 11.4143L22.7641 9.6503L22.6107 9.08998C22.3655 8.19387 22.0099 7.34358 21.5596 6.55473L21.2718 6.05042L18.7782 6.05042L17.9497 5.22199V2.72836L17.4454 2.44053C16.6566 1.9903 15.8063 1.6347 14.9102 1.38944L14.3499 1.23608L12.5858 3.00011ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#F4F6F8"/>
+</svg>