update video player mobile styling (#205)

* Fix issue with not pausing/playing video on tap

* add viewbox to pause icon

* style videoplayer for the small devicer

* style texts in VideoView

* add play/pause on touch functionality

* update VideoView and VideoPlayer styling, remove onTouchStart

* remove comment and redundant prop

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { colors, sizes, transitions, typography, zIndex } from '../../theme'
+import { breakpoints, colors, sizes, transitions, typography, zIndex } from '../../theme'
 import Icon from '../Icon'
 import { css } from '@emotion/core'
 
@@ -42,12 +42,16 @@ export const Container = styled.div<ContainerProps>`
 
   .vjs-control-bar {
     font-family: ${typography.fonts.base};
-    background-color: rgba(0, 0, 0, 0.3);
-    height: ${sizes(16)} !important;
+    background: none;
+    margin-top: auto;
+    z-index: ${zIndex.overlay + 1};
     align-items: center;
+    height: ${sizes(16)} !important;
 
-    /* account for progress bar on top */
-    padding: 5px ${sizes(8)} 0;
+    @media screen and (min-width: ${breakpoints.small}) {
+      padding: 5px ${sizes(8)} 0;
+      background-color: rgba(0, 0, 0, 0.3);
+    }
 
     .vjs-control {
       height: 30px;
@@ -88,7 +92,16 @@ export const Container = styled.div<ContainerProps>`
     }
 
     .vjs-picture-in-picture-control {
-      margin-left: auto;
+      display: none;
+      @media screen and (min-width: ${breakpoints.small}) {
+        display: block;
+        margin-left: auto;
+      }
+    }
+    .vjs-fullscreen-control {
+      @media screen and (max-width: ${breakpoints.small}) {
+        margin-left: auto;
+      }
     }
 
     .vjs-slider {
@@ -102,17 +115,42 @@ export const Container = styled.div<ContainerProps>`
 
     .vjs-progress-control {
       position: absolute;
-      top: 0;
-      left: ${sizes(8)};
-      width: calc(100% - 2 * ${sizes(8)});
-      height: 5px;
+      transition: none !important;
+      top: initial;
+      height: 2px;
+      left: 0;
+      width: 100%;
+      bottom: -2px;
+
+      @media screen and (min-width: ${breakpoints.small}) {
+        top: 0;
+        left: ${sizes(8)};
+        width: calc(100% - 2 * ${sizes(8)});
+        height: 5px;
+      }
 
       .vjs-progress-holder {
         height: 100%;
         margin: 0;
 
-        .vjs-play-progress ::before {
-          display: none;
+        .vjs-play-progress {
+          .vjs-time-tooltip {
+            display: none;
+          }
+          ::before {
+            position: absolute;
+            top: -5px;
+            content: '';
+            display: initial;
+            width: 14px;
+            height: 14px;
+            background: ${colors.blue[500]};
+            border-radius: 100%;
+            border: 2px solid ${colors.white};
+            @media screen and (min-width: ${breakpoints.small}) {
+              display: none;
+            }
+          }
         }
 
         .vjs-load-progress {

src/shared/components/VideoPlayer/VideoPlayer.tsx

@@ -90,7 +90,6 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     if (!player) {
       return
     }
-
     player.play()
   }
 

src/shared/components/VideoPlayer/videoJsPlayer.ts

@@ -44,6 +44,8 @@ export const useVideoJsPlayer: VideoJsPlayerHook = ({
   useEffect(() => {
     const videoJsOptions: VideoJsPlayerOptions = {
       controls: true,
+      // @ts-ignore @types/video.js is outdated and doesn't provide types for some newer video.js features
+      playsinline: true,
     }
 
     const playerInstance = videojs(playerRef.current, videoJsOptions)

src/shared/icons/pause.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 17h-3v-10h3v10zm5-10h-3v10h3v-10z" fill="#fff"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 17h-3v-10h3v10zm5-10h-3v10h3v-10z" fill="#fff"/></svg>

src/views/VideoView/VideoView.style.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
-import { ChannelAvatar, Placeholder } from '@/shared/components'
-import { sizes, colors, typography } from '@/shared/theme'
+import { ChannelAvatar, Placeholder, Text } from '@/shared/components'
+import { sizes, colors, typography, breakpoints } from '@/shared/theme'
 
 export const Container = styled.div`
   display: flex;
@@ -34,6 +34,7 @@ export const Meta = styled.span`
   display: block;
   margin-top: ${sizes(1)};
   color: ${colors.gray[300]};
+  font-size: 12px;
 `
 
 export const ChannelContainer = styled.div`
@@ -51,9 +52,13 @@ export const DescriptionContainer = styled.div`
   border-top: 1px solid ${colors.gray[800]};
 
   p {
-    color: ${colors.gray[300]};
-    line-height: 175%;
+    font-size: ${typography.sizes.body2};
     margin: ${sizes(4)} 0 0;
+    @media screen and (min-width: ${breakpoints.small}) {
+      font-size: 1rem;
+      color: ${colors.gray[300]};
+      line-height: 175%;
+    }
   }
 `
 
@@ -82,3 +87,13 @@ export const LicenseContainer = styled.div`
     color: ${colors.gray[500]};
   }
 `
+
+export const TitleText = styled(Text)`
+  font-size: ${typography.sizes.h4};
+  @media screen and (min-width: ${breakpoints.small}) {
+    font-size: ${typography.sizes.h3};
+  }
+  @media screen and (min-width: ${breakpoints.medium}) {
+    font-size: ${typography.sizes.h2};
+  }
+`

src/views/VideoView/VideoView.tsx

@@ -13,6 +13,7 @@ import {
   PlayerPlaceholder,
   PlayerWrapper,
   LicenseContainer,
+  TitleText,
 } from './VideoView.style'
 import { InfiniteVideoGrid, Placeholder, VideoPlayer, Text } from '@/shared/components'
 import { useMutation, useQuery } from '@apollo/client'
@@ -96,7 +97,7 @@ const VideoView: React.FC<RouteComponentProps> = () => {
         </PlayerContainer>
       </PlayerWrapper>
       <InfoContainer>
-        {data?.video ? <Text variant="h2">{data.video.title}</Text> : <Placeholder height={46} width={400} />}
+        {data?.video ? <TitleText variant="h2">{data.video.title}</TitleText> : <Placeholder height={46} width={400} />}
         <Meta>
           {data?.video ? (
             formatVideoViewsAndDate(data.video.views, data.video.createdAt, { fullViews: true })