diff --git a/src/components/PictureInPicture/PiP.tsx b/src/components/PictureInPicture/PiP.tsx index bd509707..384f6755 100644 --- a/src/components/PictureInPicture/PiP.tsx +++ b/src/components/PictureInPicture/PiP.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { RefObject, useEffect, @@ -8,6 +9,8 @@ import styled from 'styled-components/macro' import { Icon } from 'features/Icon' import { useAuthStore } from 'features/AuthStore' +import { isIOS } from 'config' + const PipWrapper = styled.div` cursor: pointer; margin-left: 25px; @@ -21,17 +24,39 @@ type PipProps = { export const PiP = ({ videoRef }: PipProps) => { const { user } = useAuthStore() + const togglePip = async () => { + const isInPIP = () => Boolean(document.pictureInPictureElement) + + const closePIP = async () => { + if (!isInPIP()) return + + if (isIOS) { + await (videoRef.current as any)?.webkitSetPresentationMode('inline') + } + await document.exitPictureInPicture() + } + + const openPIP = async () => { + if (isInPIP()) return + + if (isIOS) { + await (videoRef.current as any)?.webkitSetPresentationMode('picture-in-picture') + } + + await videoRef.current?.requestPictureInPicture() + } + try { if ( document.pictureInPictureEnabled && videoRef.current !== document.pictureInPictureElement ) { - await videoRef.current?.requestPictureInPicture() + await openPIP() } else { - await document.exitPictureInPicture() + await closePIP() } } catch (err) { - await document.exitPictureInPicture() + await closePIP() } } diff --git a/src/config/routes.tsx b/src/config/routes.tsx index 220b0cd5..15a67b41 100644 --- a/src/config/routes.tsx +++ b/src/config/routes.tsx @@ -29,6 +29,18 @@ const STATS_APIS = { staging: 'https://statistic-stage.insports.tv', } +const ADS_APIS = { + preproduction: 'https://ads.insports.tv/v1/ads', + production: 'https://ads.insports.tv/v1/ads', + staging: 'https://ads-test.insports.tv/v1/ads', +} + +const PAYMENT_APIS = { + preproduction: 'https://pay.insports.tv', + production: 'https://pay.insports.tv', + staging: 'https://pay.test.insports.tv', +} + const env = isProduction ? ENV : readSelectedApi() ?? ENV export const VIEWS_API = VIEWS_APIS[env] @@ -37,3 +49,5 @@ export const API_ROOT = APIS[env].api export const DATA_URL = `${API_ROOT}/data` export const URL_AWS = 'https://cf-aws.insports.tv' export const STATS_API_URL = STATS_APIS[env] +export const ADS_API_URL = ADS_APIS[env] +export const PAYMENT_API_URL = PAYMENT_APIS[env] diff --git a/src/features/App/hooks.tsx b/src/features/App/hooks.tsx index 4a1c33d6..fbc4ac2b 100644 --- a/src/features/App/hooks.tsx +++ b/src/features/App/hooks.tsx @@ -7,13 +7,112 @@ import { useLocalStore } from 'hooks' import { querieKeys } from 'config' +const defaultSportList: SportsType = { + 1: { + id: 1, + lexic: 12980, + name_eng: 'football', + name_rus: 'футбол', + }, + 2: { + id: 2, + lexic: 6959, + name_eng: 'hockey', + name_rus: 'хоккей', + }, + 3: { + id: 3, + lexic: 3556, + name_eng: 'basketball', + name_rus: 'баскетбол', + }, + 4: { + id: 4, + lexic: 20000, + name_eng: 'tennis', + name_rus: 'теннис', + }, + 6: { + id: 6, + lexic: 9761, + name_eng: 'volleyball', + name_rus: 'волейбол', + }, + 7: { + id: 7, + lexic: 9760, + name_eng: 'handball', + name_rus: 'гандбол', + }, + 9: { + id: 9, + lexic: 3556, + name_eng: 'basketball 3x3', + name_rus: 'баскетбол 3х3', + }, + 12: { + id: 12, + lexic: 19816, + name_eng: 'boxing', + name_rus: 'бокс', + }, + 14: { + id: 14, + lexic: 19956, + name_eng: 'field hockey', + name_rus: 'хоккей на траве', + }, + 15: { + id: 15, + lexic: 19957, + name_eng: 'figure skating', + name_rus: 'фигурное катание', + }, + 16: { + id: 16, + lexic: 1, + name_eng: 'american football', + name_rus: 'американский футбол', + }, + 17: { + id: 17, + lexic: 17670, + name_eng: 'futsal', + name_rus: 'футзал', + }, + 18: { + id: 18, + lexic: 18, + name_eng: 'floorball', + name_rus: 'флорбол', + }, + 19: { + id: 19, + lexic: 20051, + name_eng: 'cricket', + name_rus: 'крикет', + }, + 20: { + id: 20, + lexic: 9759, + name_eng: 'baseball', + name_rus: 'бейсбол', + }, + 21: { + id: 21, + lexic: 20091, + name_eng: 'softball', + name_rus: 'софтбол', + }, +} + export type SportsType = { [key: number]: Sport, } export const useSportList = () => { const [sportsList, setSportsList] = useLocalStore({ - defaultValue: {} as Sport, + defaultValue: defaultSportList, key: querieKeys.sportsList, validator: Boolean, }) diff --git a/src/features/LexicsStore/hooks/useLang.tsx b/src/features/LexicsStore/hooks/useLang.tsx index b0e1e1b2..b08f1552 100644 --- a/src/features/LexicsStore/hooks/useLang.tsx +++ b/src/features/LexicsStore/hooks/useLang.tsx @@ -14,6 +14,7 @@ import { client } from 'config/clients' import { getLanguages, ReferenceLanguages } from 'requests/getLanguages' import { getSortedLangs } from 'helpers/getSortedLangs' +import { readToken } from 'helpers' const LANG_KEY = 'lang' const DEFAULT_LANG = client.defaultLanguage || 'en' @@ -36,7 +37,7 @@ export const useLang = (initialLanguage?: string) => { }, []) useEffect(() => { - fetchLanguages() + readToken() && fetchLanguages() }, [fetchLanguages]) const changeLang = useCallback( diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx index 45e27e4e..d8984d52 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/index.tsx @@ -35,7 +35,6 @@ import { MatchTimeInfo, Preview, PreviewWrapper, - Score, Team, TeamName, Teams, @@ -50,6 +49,7 @@ import { MobTime, } from './styled' import { useCardPreview } from '../hooks' +import { Score } from '../../Score' type Props = { isNeedFormatTimeChanged: boolean, @@ -159,14 +159,22 @@ export const CardFrontsideMobile = ({ {team1InFavorites && } - {showScore && {score?.team1.score ?? team1.score}} + {team2InFavorites && } - {showScore && {score?.team2.score ?? team2.score}} + diff --git a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx index 7c5f3237..99c5527b 100644 --- a/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx +++ b/src/features/MatchCard/CardFrontside/MatchCardMobile/styled.tsx @@ -199,7 +199,7 @@ export const Info = styled.div` left: 45%; */ width: 60%; height: 100%; - padding: 9px 9px 9px 19px; + padding: 9px 11px 9px 19px; ` : ''}; ` @@ -304,18 +304,6 @@ export const TeamName = styled(Name)` ${nameStyles} ` -export const Score = styled.div` - -${isMobileDevice - ? css` - display: flex; - justify-content: center; - width: 15px; - ` - : ''}; - -` - export const TeamLogos = styled.div` display: flex; align-items: center; diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index 6eef3cdf..e5af3755 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -19,6 +19,7 @@ import { useUserFavoritesStore } from 'features/UserFavorites/store' import { TournamentSubtitle } from 'features/TournamentSubtitle' import { NoAccessMessage } from '../NoAccessMessage' +import { Score } from '../Score' import { CardWrapperOuter, CardWrapper, @@ -28,7 +29,6 @@ import { MatchTimeInfo, Preview, PreviewWrapper, - Score, Team, TeamName, Teams, @@ -206,7 +206,11 @@ export const CardFrontside = ({ {team1InFavorites && } - {showScore && {score?.team1.score ?? team1.score}} + @@ -224,7 +228,11 @@ export const CardFrontside = ({ {team2InFavorites && } - {showScore && {score?.team2.score ?? team2.score}} + {!isMatchPage && ( diff --git a/src/features/MatchCard/Score/index.tsx b/src/features/MatchCard/Score/index.tsx new file mode 100644 index 00000000..75ddc818 --- /dev/null +++ b/src/features/MatchCard/Score/index.tsx @@ -0,0 +1,30 @@ +import { + MainScore, + ScoreWrapper, + PenaltyScore, +} from './styled' + +type Props = { + penaltyScore?: number | null, + score?: number | null, + showScore: boolean, +} + +export const Score = ({ + penaltyScore, + score, + showScore, +}: Props) => { + if (!showScore) return null + + return ( + + + {score} + + + {penaltyScore} + + + ) +} diff --git a/src/features/MatchCard/Score/styled.tsx b/src/features/MatchCard/Score/styled.tsx new file mode 100644 index 00000000..f745e040 --- /dev/null +++ b/src/features/MatchCard/Score/styled.tsx @@ -0,0 +1,31 @@ +import styled, { css } from 'styled-components/macro' + +import { isMobileDevice } from 'config/userAgent' + +export const MainScore = styled.div` + +${isMobileDevice + ? css` + display: flex; + justify-content: center; + ` + : ''}; +` + +export const ScoreWrapper = styled.div` + display: flex; + line-height: 1; +` + +export const PenaltyScore = styled.div` + font-weight: 400; + font-size: .55rem; + margin-left: 1px; + + ${isMobileDevice + ? css` + font-size: 10px; + ` + : ''}; +` + diff --git a/src/features/MatchCard/styled.tsx b/src/features/MatchCard/styled.tsx index bf8e50b6..a862e5e2 100644 --- a/src/features/MatchCard/styled.tsx +++ b/src/features/MatchCard/styled.tsx @@ -274,8 +274,6 @@ export const TeamName = styled(Name)` ${nameStyles} ` -export const Score = styled.div`` - export const TeamLogos = styled.div` display: ${({ isMatchPage }) => (isMatchPage ? 'none' : 'flex')}; align-items: center; diff --git a/src/features/MatchPage/components/MatchDescription/index.tsx b/src/features/MatchPage/components/MatchDescription/index.tsx index b55dcb74..49b171d3 100644 --- a/src/features/MatchPage/components/MatchDescription/index.tsx +++ b/src/features/MatchPage/components/MatchDescription/index.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react' +import { Fragment, useCallback } from 'react' import { useQuery } from 'react-query' @@ -41,6 +41,7 @@ import { Time, Title, Views, + PenaltyScore, } from './styled' export const MatchDescription = () => { @@ -93,6 +94,7 @@ export const MatchDescription = () => { parseDate(date), isChangedTimeFormat ? 'h:mm a' : 'HH:mm', ) + const isPenaltyScoreShow = queryScore?.team1.penalty_score || team1.penalty_score return ( @@ -111,8 +113,26 @@ export const MatchDescription = () => { { isScoreHidden || isNil(team1.score) || isNil(team2.score) ? '-' - : `${queryScore?.team1.score ?? team1.score} - ${queryScore?.team2.score ?? team2.score}` - + : ( + + {queryScore?.team1.score ?? team1.score} + + {isPenaltyScoreShow && ( + + ({queryScore?.team1.penalty_score ?? team1.penalty_score}) + + )} + + {` - ${queryScore?.team2.score ?? team2.score}`} + + {isPenaltyScoreShow && ( + + ({queryScore?.team2.penalty_score ?? team2.penalty_score}) + + )} + + + ) } response.json() +export const parseJSON = (response: Response) => { + if (response.status === 204) { + return Promise.resolve() + } + return response.json() +} diff --git a/src/index.tsx b/src/index.tsx index 8622573d..32b41c61 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,6 +19,7 @@ if (process.env.NODE_ENV !== 'development') { dsn: 'https://bbe0cdfb954644ebaf3be16bb472cc3d@sentry.insports.tv/21', environment: ENV, integrations: [new BrowserTracing()], + normalizeDepth: 5, tracesSampleRate: 1.0, }) } diff --git a/src/requests/cancelSubscribe.tsx b/src/requests/cancelSubscribe.tsx index 183f0b6e..9f33b9fb 100644 --- a/src/requests/cancelSubscribe.tsx +++ b/src/requests/cancelSubscribe.tsx @@ -1,15 +1,13 @@ -import { API_ROOT } from 'config' +import { PAYMENT_API_URL } from 'config' import { callApi } from 'helpers' export const cancelSubscribe = (id: number): Promise => { const config = { - body: { - id, - }, + method: 'DELETE', } return callApi({ config, - url: `${API_ROOT}/account/subscription/cancel`, + url: `${PAYMENT_API_URL}/api/v2/general/subscription/${id}`, }) } diff --git a/src/requests/getLiveScores.tsx b/src/requests/getLiveScores.tsx index e7e72e23..f2d1e9d7 100644 --- a/src/requests/getLiveScores.tsx +++ b/src/requests/getLiveScores.tsx @@ -4,6 +4,7 @@ import { API_ROOT } from 'config' type ScoreTeam = { id: number, + penalty_score: number | null, score: number | null, } diff --git a/src/requests/getMatchInfo.tsx b/src/requests/getMatchInfo.tsx index 230b3f2d..fc0da889 100644 --- a/src/requests/getMatchInfo.tsx +++ b/src/requests/getMatchInfo.tsx @@ -16,6 +16,7 @@ export type Team = { id: number, name_eng: string, name_rus: string, + penalty_score: number | null, score: number, shirt_color: string | null, } diff --git a/src/requests/getMatches/types.tsx b/src/requests/getMatches/types.tsx index e6afa9f6..cbf15a0c 100644 --- a/src/requests/getMatches/types.tsx +++ b/src/requests/getMatches/types.tsx @@ -22,6 +22,7 @@ type Team = { media?: AwsTeamMedia, name_eng: string, name_rus: string, + penalty_score?: number | null, score?: number | null, }