fix(#2572): add video player for highlights

src/features/AddCardForm/components/ElementContainer/index.tsx

@@ -40,11 +40,12 @@ const Label = styled.label<LabelProps>`
      
      :nth-child(3){
       width: 48%;
+
+      &.AddCardForm_Address {
+        width: 100%;
+      }
      }
      
-     /* & .test_class {
-      width: 48%;
-     } */
      :nth-child(4){
       width: 48%;
      }

src/features/AddCardForm/components/Form/index.tsx

@@ -162,7 +162,7 @@ export const AddCardFormInner = (props: Props) => {
         </CountryWrapper>
         <ElementContainer
           label={isLabelVisible(ElementTypes.CardCity) ? 'city' : ''}
-          width={isMobileDevice ? '100%' : '275px'}
+          width={isMobileDevice ? '48%' : '275px'}
           backgroundColor={inputsBackground}
         >
           <Input
@@ -178,6 +178,7 @@ export const AddCardFormInner = (props: Props) => {
           label={isLabelVisible(ElementTypes.CardAddress) ? 'address' : ''}
           width='100%'
           backgroundColor={inputsBackground}
+          className='AddCardForm_Address'
         >
           <Input
             type='text'

src/features/AddCardForm/styled.tsx

@@ -94,6 +94,11 @@ export const SectionTitle = styled.span`
 
 export const CountryWrapper = styled.div`
   width: 275px;
+  ${isMobileDevice
+    ? css`
+      width: 48%;
+    `
+    : ''};
 `
 
 export const CustomCombobox = styled(Combobox)`

src/features/HeaderFilters/components/DateFilter/helpers.tsx

@@ -30,7 +30,7 @@ export const getDisplayDate = ({
 })
 
 const getWeekName = (date: Date, locale: string) => (
-  new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date)
+  new Intl.DateTimeFormat(locale || 'en', { weekday: 'short' }).format(date)
 )
 
 const createDayGetter = (weekStart: Date, locale: string) => (day: number) => {

src/features/UserAccount/styled.tsx

@@ -265,4 +265,12 @@ export const ScButtonGetHighlight = styled(ButtonOutline)`
   border: 1px solid #FFFFFF;
   border-radius: 5px;
   filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
+
+  ${isMobileDevice
+    ? css`
+      margin: 5px 0;
+      height: 100%;
+      width: 100%;
+    `
+    : ''};
 `

src/features/VideoPlayer/hooks/index.tsx

@@ -14,6 +14,7 @@ type Ref = Parameters<ForwardRefRenderFunction<HTMLVideoElement>>[1]
 
 export type Props = {
   className?: string,
+  controls?: boolean,
   crossOrigin?: string,
   height?: string,
   hidden?: boolean,

src/features/VideoPlayer/index.tsx

@@ -7,6 +7,7 @@ import { Video } from './styled'
 export const VideoPlayer = forwardRef<HTMLVideoElement, Props>((props: Props, ref) => {
   const {
     className,
+    controls,
     crossOrigin,
     height,
     hidden,
@@ -42,6 +43,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, Props>((props: Props, re
       onPause={onPause}
       onError={onError}
       crossOrigin={crossOrigin}
+      controls={controls}
     />
   )
 })

src/pages/HighlightsPage/components/FormHighlights/index.tsx

@@ -23,7 +23,7 @@ import { PriceInfoType, PriceInfo } from '../PriceInfo'
 const labelWidth = 100
 const wrapperHeight = 50
 
-export const FormHighlights = ({ price }: PriceInfoType) => {
+export const FormHighlights = ({ price, setIsOpenPopupVideo }: PriceInfoType) => {
   const {
     formRef,
     formState: {
@@ -55,7 +55,8 @@ export const FormHighlights = ({ price }: PriceInfoType) => {
   return (
     <ScWrapper>
       <ScInfoWrap>
-        {isMobileDevice ? <PriceInfo price={price} /> : null}
+        {isMobileDevice
+          ? <PriceInfo price={price} setIsOpenPopupVideo={setIsOpenPopupVideo} /> : null}
         <ScInfoBlock>
           <ScTitle>
             <T9n t='choose_player' />

src/pages/HighlightsPage/components/PriceInfo/index.tsx

@@ -10,9 +10,10 @@ import {
 
 export type PriceInfoType = {
   price: number,
+  setIsOpenPopupVideo: (open: boolean) => void,
 }
 
-export const PriceInfo = ({ price }: PriceInfoType) => (
+export const PriceInfo = ({ price, setIsOpenPopupVideo }: PriceInfoType) => (
   <ScPriceInfo>
     <ScTitle>
       <T9n t='price' />
@@ -21,7 +22,7 @@ export const PriceInfo = ({ price }: PriceInfoType) => (
       <ScCurrency>$</ScCurrency>
       {price}
     </ScPrice>
-    <ScWatchDemo>
+    <ScWatchDemo onClick={() => setIsOpenPopupVideo(true)}>
       <T9n t='watch_demo' />
     </ScWatchDemo>
   </ScPriceInfo>

src/pages/HighlightsPage/components/VideoHighlight/index.tsx

@@ -0,0 +1,43 @@
+import { useRef } from 'react'
+
+import { VideoPlayer } from 'features/VideoPlayer'
+
+import { readToken } from 'helpers'
+
+import { ScModal } from './styled'
+
+interface VideoPropsType {
+  isOpenPopupVideo: boolean,
+  setIsOpenPopupVideo: (open: boolean) => void,
+}
+
+const urls = {
+  production: 'https://instat-stream-production.s3.eu-west-1.amazonaws.com/media/highlights/demo/demohighlight.mp4',
+  stage: 'https://instat-stream-staging.s3.eu-west-1.amazonaws.com/media/highlights/demo/demohighlight.mp4',
+}
+export const VideoHighlight = ({
+  isOpenPopupVideo,
+  setIsOpenPopupVideo,
+} :VideoPropsType) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  return (
+    // eslint-disable-next-line
+    <ScModal
+      isOpen={isOpenPopupVideo}
+      close={() => setIsOpenPopupVideo(false)}
+      withCloseButton={false}
+    >
+      <VideoPlayer
+        width='100%'
+        height='100%'
+        src={`${urls.stage}?access_token=${readToken()}`}
+        ref={videoRef}
+        playing={Boolean(true)}
+        muted={false}
+        isFullscreen={false}
+        controls={Boolean(true)}
+        // crossOrigin='use-credentials'
+      />
+    </ScModal>
+  )
+}

src/pages/HighlightsPage/components/VideoHighlight/styled.tsx

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components/macro'
+
+import { ModalWindow } from 'features/Modal/styled'
+import { Modal as BaseModal } from 'features/Modal'
+
+import { isMobileDevice } from 'config/userAgent'
+
+export const ScModal = styled(BaseModal)`
+  background-color: rgba(0, 0, 0, 0.7);
+
+  ${ModalWindow} {
+    background-color: #333333;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 50px;
+    width: 80vw;
+    height: 80vh;
+
+    > * {
+      margin-bottom: 25px;
+    }
+
+    ${isMobileDevice
+    ? css`
+      width: calc(100vw - 60px);
+      @media screen and (orientation: landscape){
+        max-width: calc(100vw - 80px);
+        height: calc(100vh - 20px);
+        overflow: auto;
+      }
+    `
+    : ''};
+  }
+`

src/pages/HighlightsPage/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { Link } from 'react-router-dom'
 
 import { isMobileDevice } from 'config/userAgent'
@@ -15,6 +16,7 @@ import { PriceInfo } from './components/PriceInfo'
 import { FormHighlights } from './components/FormHighlights'
 import { MatchesHighlights } from './components/MatchesHighlights'
 import { ThanksPopup } from './components/ThanksPopup'
+import { VideoHighlight } from './components/VideoHighlight'
 
 import {
   dataForPayHighlights,
@@ -36,6 +38,7 @@ import {
 const HighlightsPage = () => {
   const playerMatches = useRecoilValue(playerMatchesState)
   const [isOpenPopupChangeCard, setIsOpenPopupChangeCard] = useRecoilState(openPopupChangeCard)
+  const [isOpenPopupVideo, setIsOpenPopupVideo] = useState(false)
   const { data } = useRecoilValue(dataForPayHighlights)
 
   const isNotEmpty = !data?.duration
@@ -58,8 +61,10 @@ const HighlightsPage = () => {
         </Link>
       </ScHeader>
       <ScWrapperContent>
-        {isMobileDevice ? null : <PriceInfo price={price} />}
-        <FormHighlights price={price} />
+        {isMobileDevice ? null : (
+          <PriceInfo price={price} setIsOpenPopupVideo={setIsOpenPopupVideo} />
+        )}
+        <FormHighlights price={price} setIsOpenPopupVideo={setIsOpenPopupVideo} />
         <MatchesHighlights />
       </ScWrapperContent>
       <ScButtonWrap
@@ -81,6 +86,10 @@ const HighlightsPage = () => {
         title='payment'
       />
       <ThanksPopup />
+      <VideoHighlight
+        isOpenPopupVideo={isOpenPopupVideo}
+        setIsOpenPopupVideo={setIsOpenPopupVideo}
+      />
     </ScWrapper>
   )
 }