Preprod (#567)

* fix(#ott1869): fixed datepicker czech week names (#559)

Co-authored-by: Farber Denis <denis.farber@instatsport.com>

* style(#ott1896): fixed favorite icon (#561)

* style(#ott1896): fixed favorite icon

* style(#ott1896): comment fix

Co-authored-by: Farber Denis <denis.farber@instatsport.com>

* chore: eslint rule "react/prop-types": "off" (#562)

* chore: updated packages (#563)

* fix(ott-1784): fix home page adaptive (#564)

Co-authored-by: nevainero <nevainero@gmail.com>

* fix(1840): disabled buttons if episodes empty (#565)

* refactor(1861): start from begining if match !live (#566)

Co-authored-by: Farber Denis <42491613+Bombamuerta@users.noreply.github.com>
Co-authored-by: Farber Denis <denis.farber@instatsport.com>
Co-authored-by: nevainero2 <90911372+nevainero2@users.noreply.github.com>
Co-authored-by: nevainero <nevainero@gmail.com>

.eslintrc

@@ -85,12 +85,13 @@
     "import/prefer-default-export": "off",
     "indent": "off",
     "no-plusplus": "off",
+    "no-shadow": "off",
     "no-underscore-dangle": "off",
     "no-unused-vars": "off",
-    "no-shadow": "off",
+    "react/jsx-fragments": "off",
     "react/jsx-one-expression-per-line": "off",
+    "react/prop-types": "off",
     "react/react-in-jsx-scope": "off",
-    "react/jsx-fragments": "off",
     "react/require-default-props": "off",
     "semi": "off"
   }

package.json

@@ -22,43 +22,43 @@
     "hls.js": "^0.14.15",
     "lodash": "^4.17.15",
     "oidc-client": "^1.11.5",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-datepicker": "^3.1.3",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.1",
+    "react-scripts": "^4.0.3",
     "react-window": "^1.8.6",
     "screenfull": "^5.0.2",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^8.3.5",
+    "@commitlint/cli": "^14.1.0",
-    "@commitlint/config-conventional": "^8.3.4",
+    "@commitlint/config-conventional": "^14.1.0",
-    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-docs": "^5.3.19",
+    "@storybook/addon-docs": "^6.3.12",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/preset-create-react-app": "^3.0.0",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^5.3.19",
+    "@storybook/react": "^6.3.12",
-    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/history": "^4.7.6",
     "@types/hls.js": "^0.13.2",
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.154",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
+    "@types/react": "^17.0.34",
     "@types/react-datepicker": "^3.0.2",
-    "@types/react-dom": "^17.0.0",
+    "@types/react-dom": "^17.0.11",
     "@types/react-responsive": "^8.0.2",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-window": "^1.8.5",
-    "@types/styled-components": "^5.1.0",
+    "@types/styled-components": "^5.1.15",
-    "commitizen": "^4.1.2",
+    "commitizen": "^4.2.4",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-plugin-import": "^2.22.1",
@@ -78,7 +78,7 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-loader": "^7.0.5",
-    "typescript": "^4.1.2"
+    "typescript": "^4.4.4"
   },
   "config": {
     "commitizen": {
@@ -106,7 +106,8 @@
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
-      "last 1 safari version"
+      "last 1 safari version",
+      ">0.3%"
     ]
   }
 }

public/images/icon_star_full.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.10883 1.70192L8.66486 4.98535L8.77196 5.21134L9.01997 5.24336L12.6235 5.70859L9.98165 8.2031L9.79982 8.37479L9.84601 8.62056L10.5171 12.1915L7.3283 10.4498L7.10883 10.3299L6.88936 10.4498L3.70055 12.1915L4.37165 8.62056L4.41784 8.37479L4.23601 8.2031L1.59411 5.70859L5.19769 5.24336L5.4457 5.21134L5.5528 4.98535L7.10883 1.70192Z" fill="white" stroke="white" stroke-width="0.915683"/>
+</svg>

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

@@ -13,22 +13,25 @@ export const BaseButton = styled.button`
 
 export const Wrapper = styled.div`
   position: relative;
-  height: 100%;
   width: 32.8rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #656565;
 
-  @media ${devices.mobile} {
+  @media (max-width: 750px) {
     width: 100%;
   }
 
   ${isMobileDevice
     ? css`
+      padding-top: 4px;
+      min-height: 84px;
+      justify-content: space-between;
+
+      @media (max-width: 450px){
         justify-content: flex-end;
-      padding-bottom: 6px;
+      }
-      width: auto;
     `
     : ''};
 `
@@ -36,6 +39,16 @@ export const Wrapper = styled.div`
 export const MonthWrapper = styled.div`
   position: relative;
   text-align: center;
+  align-self: center;
+  width: 100%;
+  
+  @media (max-width: 750px) {
+    width: 32.8rem;
+  }
+
+  @media (max-width: 450px) {
+    width: 100%;
+  }
 `
 
 export const MonthYear = styled.span`
@@ -65,6 +78,12 @@ export const DateButton = styled(BaseButton)<DateButtonProps>`
   color: #fff;
   opacity: 0.5;
 
+  ${isMobileDevice
+    ? css`
+      top: 4px;
+    `
+    : ''};
+
   :hover {
     opacity: 0.7;
   }
@@ -103,7 +122,7 @@ export const Week = styled.div`
   margin: 0 0.95rem;
   display: flex;
 
-  @media ${devices.mobile} {
+  @media (max-width: 600px) {
     width: 100%;
     justify-content: space-between;
   }
@@ -119,6 +138,7 @@ export const WeekDay = styled(BaseButton)<WeekDayProps>`
   flex-direction: column;
   align-items: center;
   color: #656565;
+  min-width: 38px;
 
   :hover {
     color: #FFFFFF;
@@ -195,7 +215,6 @@ export const Arrow = styled.span<ArrowProps>`
     ${isMobileDevice
     ? css`
       border-left: 1px solid #fff;
-      border-bottom: 1pxrem solid #fff;
       width: 10px;
       height: 10px;
     `

src/features/HeaderFilters/components/DatePicker/hooks.tsx

@@ -2,6 +2,7 @@ import { useEffect } from 'react'
 
 import ru from 'date-fns/locale/ru'
 import en from 'date-fns/locale/en-GB'
+import cs from 'date-fns/locale/cs'
 
 import { registerLocale, setDefaultLocale } from 'react-datepicker'
 
@@ -17,6 +18,7 @@ export const useDatepickerLocales = () => {
   useEffect(() => {
     registerLocale('ru', ru)
     registerLocale('en', en)
+    registerLocale('cs', cs)
   }, [])
 
   useEffect(() => {

src/features/MatchCard/styled.tsx

@@ -259,6 +259,7 @@ export const TeamLogos = styled.div`
 
 export const TeamLogo = styled(ProfileLogo)`
   width: 33%;
+  max-height: 100%;
 
   :last-child {
     margin-left: 0.8rem;

src/features/MatchPage/components/LiveMatch/hooks/index.tsx

@@ -1,5 +1,9 @@
+import { useMemo } from 'react'
+
 import { API_ROOT } from 'config'
 
+import type { MatchInfo } from 'requests/getMatchInfo'
+
 import { usePageParams } from 'hooks/usePageParams'
 
 import { useMatchPopupStore } from 'features/MatchPopup'
@@ -8,7 +12,7 @@ import { usePlayerProgressReporter } from './usePlayerProgressReporter'
 import { useLastPlayPosition } from './useLastPlayPosition'
 import { useUrlParam } from './useUrlParam'
 
-export const useLiveMatch = () => {
+export const useLiveMatch = (profile: MatchInfo) => {
   const {
     handlePlaylistClick,
     matchPlaylists,
@@ -18,10 +22,18 @@ export const useLiveMatch = () => {
   const { profileId: matchId, sportType } = usePageParams()
   const resume = useUrlParam()
 
+  const fromStartIfStreamPaused = useMemo(
+    () => (profile && !profile.live ? 0 : undefined),
+    // deps намеренно оставляем пустым,
+    // не нужно реагировать на изменение live когда пользователь смотрит матч
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  )
+
   return {
     matchPlaylists,
     onPlaylistSelect: handlePlaylistClick,
-    resume,
+    resume: resume ?? fromStartIfStreamPaused,
     selectedPlaylist,
     streamUrl: `${API_ROOT}/video/stream/${sportType}/${matchId}.m3u8`,
     ...usePlayerProgressReporter(),

src/features/MatchPage/components/LiveMatch/index.tsx

@@ -24,7 +24,7 @@ export const LiveMatch = ({ events, profile }: Props) => {
     resume,
     selectedPlaylist,
     streamUrl,
-  } = useLiveMatch()
+  } = useLiveMatch(profile)
 
   return (
     <Fragment>

src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx

@@ -1,21 +1,20 @@
 import styled, { css } from 'styled-components/macro'
 
+import isEmpty from 'lodash/isEmpty'
 import map from 'lodash/map'
 
 import { isMobileDevice } from 'config/userAgent'
+
 import type { MatchPlaylistOptions, PlaylistOption } from 'features/MatchPage/types'
-import type { MatchInfo } from 'requests'
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
-
-import { T9n } from 'features/T9n'
 import { isEqual } from 'features/MatchSidePlaylists/helpers'
+import { T9n } from 'features/T9n'
 
 import { PlayButton } from '../PlayButton'
 
 type Props = {
   onSelect?: (selectedMathPlaylist: PlaylistOption) => void,
   playlists: MatchPlaylistOptions,
-  profile: MatchInfo,
   selectedMathPlaylist?: PlaylistOption,
 }
 
@@ -36,7 +35,6 @@ const Item = styled.li`
 export const MatchPlaylists = ({
   onSelect,
   playlists,
-  profile,
   selectedMathPlaylist,
 }: Props) => (
   <List>
@@ -46,7 +44,7 @@ export const MatchPlaylists = ({
           <PlayButton
             duration={playlist.duration}
             active={isEqual(playlist, selectedMathPlaylist)}
-            disabled={playlist.id !== FULL_GAME_KEY && !profile?.calc}
+            disabled={playlist.id !== FULL_GAME_KEY && isEmpty(playlist.data)}
             onClick={() => onSelect?.(playlist)}
           >
             <T9n t={playlist.lexic} />

src/features/MatchSidePlaylists/components/TabWatch/index.tsx

@@ -26,7 +26,6 @@ export const TabWatch = ({
 }: Props) => (
   <Fragment>
     <MatchPlaylists
-      profile={profile}
       playlists={playlists.match}
       selectedMathPlaylist={selectedPlaylist}
       onSelect={onSelect}

src/features/MatchSwitches/styled.tsx

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config/userAgent'
-import { devices } from 'config'
 
 import { T9n } from 'features/T9n'
 
@@ -45,6 +44,8 @@ type IconProps = {
 export const Icon = styled.div<IconProps>`
   width: ${({ width = 1.7 }) => width}rem;
   height: ${({ height = 2.28 }) => height}rem;
+  position: relative;
+  top: 3px;
   color: white;
   background-size: contain;
   background-repeat: no-repeat;
@@ -59,17 +60,10 @@ export const Icon = styled.div<IconProps>`
       `
   )};
   
-  @media ${devices.tablet} {
-      width: 2.7rem;
-      height: 1.5rem;
-  }
-  
     ${isMobileDevice
     ? css`
-      @media (max-width: 650px){
         width: 51px;
         height: 31px;
-      }
     `
     : ''}
     `
@@ -83,11 +77,11 @@ export const Wrapper = styled.div`
   ${isMobileDevice
     ? css`
      position: absolute;
-     bottom: -137px;
+     bottom: -113px;
      right: -10px;
      width: 95vw;
-     @media screen and (orientation: landscape){
+        @media (max-width: 450px){
-       bottom: -128px;
+          bottom: -137px;
         }
     `
     : ''};

src/features/ProfileCard/components/StarIcon/index.tsx

@@ -1,9 +1,21 @@
 import styled from 'styled-components/macro'
 
-const Svg = styled.svg`
+type StarProps = {
+  isFavorite: boolean,
+}
+
+const IconStar = styled.div<StarProps>`
+  display: block;
   margin-right: 0.472rem;
   width: 0.95rem;
   height: 0.95rem;
+  background-image: ${({ isFavorite }) => (
+    isFavorite
+      ? 'url(/images/icon_star_full.svg);'
+      : 'url(/images/icon_star.png);'
+  )};
+  background-repeat: no-repeat;
+  background-size: contain;
 
   @media (max-width: 650px){
     width: 11px;
@@ -11,41 +23,6 @@ const Svg = styled.svg`
   }
 `
 
-type StarProps = {
-  isFavorite: boolean,
-}
-
 export const StarIcon = ({ isFavorite }: StarProps) => (
-  <Svg width='100%' height='100%' viewBox='0 0 23 22' xmlns='http://www.w3.org/2000/svg'>
+  <IconStar isFavorite={isFavorite} />
-    <g filter={`url(#${isFavorite ? 'filled' : 'outline'})`}>
-      {
-        isFavorite
-          ? (
-            <path d='M11.3035 0.693359L14.2112 6.82911L20.9452 7.6985L16.0083 12.36L17.2624 19.033L11.3035 15.7783L5.34453 19.033L6.59861 12.36L1.66171 7.6985L8.3957 6.82911L11.3035 0.693359Z' fill='white' />
-          ) : (
-            <path d='M11.3035 2.27156L13.6005 7.11855L13.7586 7.45214L14.1247 7.49941L19.4442 8.18619L15.5443 11.8686L15.2759 12.122L15.3441 12.4848L16.3347 17.7563L11.6274 15.1851L11.3035 15.0081L10.9795 15.1851L6.27218 17.7563L7.26285 12.4848L7.33103 12.122L7.06262 11.8686L3.16267 8.18619L8.48224 7.49941L8.84836 7.45214L9.00645 7.11855L11.3035 2.27156Z' stroke='white' strokeWidth='1.35172' />
-          )
-      }
-    </g>
-    <defs>
-      <filter id='outline' x='0.44043' y='0' width='19.119' height='18.2812' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
-        <feFlood floodOpacity='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='0.5' />
-        <feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0' />
-        <feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow' />
-        <feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape' />
-      </filter>
-      <filter id='filled' x='0.309897' y='0.693359' width='21.9869' height='21.0431' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
-        <feFlood floodOpacity='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.35172' />
-        <feGaussianBlur stdDeviation='0.675862' />
-        <feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0' />
-        <feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow' />
-        <feBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape' />
-      </filter>
-    </defs>
-  </Svg>
 )

src/features/ProfileHeader/styled.tsx

@@ -29,6 +29,11 @@ export const HeaderStyled = styled.header<HeaderProps>`
   display: flex;
   justify-content: center;
   height: ${({ height = 8.5 }) => height}rem;
+  padding: 25px;
+
+  @media (max-width: 450px){
+    height: 124px;
+  }
   
   ${({ color, headerImage }) => (headerImage
     ? css`background: url(${headerImage});`
@@ -37,11 +42,8 @@ export const HeaderStyled = styled.header<HeaderProps>`
   
   ${isMobileDevice
     ? css`
-     height: 124px;
+      height: auto;
-    
+      padding: 8px;
-     @media screen and (orientation: landscape){
-       height: 121px;
-     }
     `
     : ''}
 `
@@ -75,22 +77,15 @@ export const HeaderLogo = styled(Logo)`
   
   ${isMobileDevice
     ? css`
-      @media (max-width: 650px){
         width: 85px;
         height: 20px;
+        
+        @media (max-width: 450px){
         left: 48vw;
         top: 5px;
         transform: translateX(-50%);
         position: absolute;
       }
-    
-      @media (orientation: landscape){
-        left: 42vw;
-        width: 97px;
-        height: 23px;
-        margin-top: 0;
-        position: absolute;
-      }
     `
     : ''}
 `