make VideoHero play button navigate to video (#1214)

src/components/VideoHero/VideoHero.style.ts

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 
-import { Button, IconButton, SkeletonLoader, Text } from '@/shared/components'
+import { IconButton, SkeletonLoader, Text } from '@/shared/components'
 import { colors, media, sizes, typography } from '@/shared/theme'
 
 import { TOP_NAVBAR_HEIGHT } from '..'
@@ -124,10 +124,6 @@ export const ButtonsSpaceKeeper = styled.div`
   min-height: ${BUTTONS_HEIGHT}px;
 `
 
-export const PlayButton = styled(Button)`
-  width: 90px;
-`
-
 export const SoundButton = styled(IconButton)`
   margin-left: ${sizes(4)};
 `

src/components/VideoHero/VideoHero.tsx

@@ -4,8 +4,7 @@ import { CSSTransition } from 'react-transition-group'
 
 import { absoluteRoutes } from '@/config/routes'
 import { AssetType, useAsset } from '@/providers'
-import { GridItem, LayoutGrid, SkeletonLoader, VideoPlayer } from '@/shared/components'
-import { SvgActionPause } from '@/shared/icons/ActionPause'
+import { Button, GridItem, LayoutGrid, SkeletonLoader, VideoPlayer } from '@/shared/components'
 import { SvgActionPlay } from '@/shared/icons/ActionPlay'
 import { SvgActionSoundOff } from '@/shared/icons/ActionSoundOff'
 import { SvgActionSoundOn } from '@/shared/icons/ActionSoundOn'
@@ -19,7 +18,6 @@ import {
   InfoContainer,
   Media,
   MediaWrapper,
-  PlayButton,
   PlayerContainer,
   SoundButton,
   StyledChannelLink,
@@ -49,10 +47,6 @@ export const VideoHero: React.FC = () => {
     }, VIDEO_PLAYBACK_DELAY)
   }
 
-  const handlePlayPauseClick = () => {
-    setVideoPlaying(!videoPlaying)
-  }
-
   const handleSoundToggleClick = () => {
     setSoundMuted(!soundMuted)
   }
@@ -116,9 +110,9 @@ export const VideoHero: React.FC = () => {
             appear
           >
             <ButtonsContainer>
-              <PlayButton onClick={handlePlayPauseClick} icon={videoPlaying ? <SvgActionPause /> : <SvgActionPlay />}>
-                {videoPlaying ? 'Pause' : 'Play'}
-              </PlayButton>
+              <Button to={absoluteRoutes.viewer.video(coverVideo ? coverVideo.video.id : '')} icon={<SvgActionPlay />}>
+                Play
+              </Button>
               <SoundButton variant="secondary" onClick={handleSoundToggleClick}>
                 {!soundMuted ? <SvgActionSoundOn /> : <SvgActionSoundOff />}
               </SoundButton>