diff --git a/.eslintrc b/.eslintrc
index 0a63f041..b5087be4 100644
--- 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"
}
diff --git a/package.json b/package.json
index 40b612b3..c1b3c7f0 100644
--- 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%"
]
}
}
diff --git a/public/images/icon_star.png b/public/images/icon_star.png
new file mode 100644
index 00000000..23f2a7e9
Binary files /dev/null and b/public/images/icon_star.png differ
diff --git a/public/images/icon_star_full.svg b/public/images/icon_star_full.svg
new file mode 100644
index 00000000..cfd9b771
--- /dev/null
+++ b/public/images/icon_star_full.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/features/HeaderFilters/components/DateFilter/styled.tsx b/src/features/HeaderFilters/components/DateFilter/styled.tsx
index d3dcd77d..7f09e2fa 100644
--- 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)`
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)`
flex-direction: column;
align-items: center;
color: #656565;
+ min-width: 38px;
:hover {
color: #FFFFFF;
@@ -195,7 +215,6 @@ export const Arrow = styled.span`
${isMobileDevice
? css`
border-left: 1px solid #fff;
- border-bottom: 1pxrem solid #fff;
width: 10px;
height: 10px;
`
diff --git a/src/features/HeaderFilters/components/DatePicker/hooks.tsx b/src/features/HeaderFilters/components/DatePicker/hooks.tsx
index 4de51321..18584ae9 100644
--- 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(() => {
diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx
index 55c9134c..f5dd67f1 100644
--- 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;
diff --git a/src/features/MatchPage/components/LiveMatch/hooks/index.tsx b/src/features/MatchPage/components/LiveMatch/hooks/index.tsx
index eee734d6..05cb804b 100644
--- 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(),
diff --git a/src/features/MatchPage/components/LiveMatch/index.tsx b/src/features/MatchPage/components/LiveMatch/index.tsx
index 30a970bf..d5ea58e3 100644
--- 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 (
diff --git a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
index dc61af43..a1f009c8 100644
--- 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) => (
@@ -46,7 +44,7 @@ export const MatchPlaylists = ({
onSelect?.(playlist)}
>
diff --git a/src/features/MatchSidePlaylists/components/TabWatch/index.tsx b/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
index 506d9481..1831f322 100644
--- a/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
@@ -26,7 +26,6 @@ export const TabWatch = ({
}: Props) => (
`
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`
`
)};
- @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;
+ }
`
: ''};
`
diff --git a/src/features/ProfileCard/components/StarIcon/index.tsx b/src/features/ProfileCard/components/StarIcon/index.tsx
index 18718a6c..5d2cc186 100644
--- 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`
+ 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) => (
-
+
)
diff --git a/src/features/ProfileHeader/styled.tsx b/src/features/ProfileHeader/styled.tsx
index ec6b6054..e9b2c7c4 100644
--- a/src/features/ProfileHeader/styled.tsx
+++ b/src/features/ProfileHeader/styled.tsx
@@ -29,6 +29,11 @@ export const HeaderStyled = styled.header`
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`
${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;
- }
`
: ''}
`