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>
4 years ago · abc6e56d4a
parent 5aeabd7ece
commit abc6e56d4a
14 changed files with 101 additions and 99 deletions
--- a/.eslintrc
+++ b/.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"
  }
--- a/package.json
+++ b/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/config-conventional": "^8.3.4",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
+    "@commitlint/cli": "^14.1.0",
+    "@commitlint/config-conventional": "^14.1.0",
+    "@storybook/addon-actions": "^6.3.12",
+    "@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",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
+    "@storybook/react": "^6.3.12",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@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",
-    "commitizen": "^4.1.2",
+    "@types/styled-components": "^5.1.15",
+    "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%"
    ]
  }
 }
--- a/public/images/icon_star.png
+++ b/public/images/icon_star.png
--- a/public/images/icon_star_full.svg
+++ b/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>
--- a/src/features/HeaderFilters/components/DateFilter/styled.tsx
+++ b/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`
-      justify-content: flex-end;
-      padding-bottom: 6px;
-      width: auto;
+      padding-top: 4px;
+      min-height: 84px;
+      justify-content: space-between;
+
+      @media (max-width: 450px){
+        justify-content: flex-end;
+      }
    `
    : ''};
 `
@ -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;
    `
--- a/src/features/HeaderFilters/components/DatePicker/hooks.tsx
+++ b/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(() => {
--- a/src/features/MatchCard/styled.tsx
+++ b/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;
--- a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
+++ b/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(),
--- a/src/features/MatchPage/components/LiveMatch/index.tsx
+++ b/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>
--- a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
+++ b/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} />
--- a/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
+++ b/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}
--- a/src/features/MatchSwitches/styled.tsx
+++ b/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,12 +77,12 @@ export const Wrapper = styled.div`
  ${isMobileDevice
    ? css`
     position: absolute;
-     bottom: -137px;
+     bottom: -113px;
     right: -10px;
     width: 95vw;
-     @media screen and (orientation: landscape){
-       bottom: -128px;
-     }
+        @media (max-width: 450px){
+          bottom: -137px;
+        }
    `
    : ''};
 `
--- a/src/features/ProfileCard/components/StarIcon/index.tsx
+++ b/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'>
-    <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>
+  <IconStar isFavorite={isFavorite} />
 )
--- a/src/features/ProfileHeader/styled.tsx
+++ b/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;
-    
-     @media screen and (orientation: landscape){
-       height: 121px;
-     }
+      height: auto;
+      padding: 8px;
    `
    : ''}
 `
@ -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;
-      }
    `
    : ''}
 `