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()
     }
   }
 

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]

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<SportsType>({
-    defaultValue: {} as Sport,
+    defaultValue: defaultSportList,
     key: querieKeys.sportsList,
     validator: Boolean,
   })

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(

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 = ({
                 <TeamName nameObj={team1} />
                 {team1InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{score?.team1.score ?? team1.score}</Score>}
+              <Score
+                showScore={showScore}
+                score={score?.team1.score ?? team1.score}
+                penaltyScore={score?.team1.penalty_score ?? team1.penalty_score}
+              />
             </Team>
             <Team>
               <NameSignWrapper>
                 <TeamName nameObj={team2} />
                 {team2InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{score?.team2.score ?? team2.score}</Score>}
+              <Score
+                showScore={showScore}
+                score={score?.team2.score ?? team2.score}
+                penaltyScore={score?.team2.penalty_score ?? team2.penalty_score}
+              />
             </Team>
           </Teams>
           <SecondaryInfo>

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;

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 = ({
                 <TeamName nameObj={team1} />
                 {team1InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{score?.team1.score ?? team1.score}</Score>}
+              <Score
+                showScore={showScore}
+                score={score?.team1.score ?? team1.score}
+                penaltyScore={score?.team1.penalty_score ?? team1.penalty_score}
+              />
             </Team>
             <Team isMatchPage={isMatchPage}>
               <NameSignWrapper>
@@ -224,7 +228,11 @@ export const CardFrontside = ({
                 <TeamName nameObj={team2} />
                 {team2InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{score?.team2.score ?? team2.score}</Score>}
+              <Score
+                showScore={showScore}
+                score={score?.team2.score ?? team2.score}
+                penaltyScore={score?.team2.penalty_score ?? team2.penalty_score}
+              />
             </Team>
           </Teams>
           {!isMatchPage && (

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 (
+    <ScoreWrapper>
+      <MainScore>
+        {score}
+      </MainScore>
+      <PenaltyScore>
+        {penaltyScore}
+      </PenaltyScore>
+    </ScoreWrapper>
+  )
+}

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;
+    `
+    : ''};
+`
+

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<CardProps>`
   display: ${({ isMatchPage }) => (isMatchPage ? 'none' : 'flex')};
   align-items: center;

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 (
     <Description isHidden={!profileCardShown}>
@@ -111,8 +113,26 @@ export const MatchDescription = () => {
             {
               isScoreHidden || isNil(team1.score) || isNil(team2.score)
                 ? '-'
-                : `${queryScore?.team1.score ?? team1.score} - ${queryScore?.team2.score ?? team2.score}`
-
+                : (
+                  <Fragment>
+                    {queryScore?.team1.score ?? team1.score}
+
+                    {isPenaltyScoreShow && (
+                      <PenaltyScore>
+                        ({queryScore?.team1.penalty_score ?? team1.penalty_score})
+                      </PenaltyScore>
+                    )}
+
+                    {` - ${queryScore?.team2.score ?? team2.score}`}
+
+                    {isPenaltyScoreShow && (
+                      <PenaltyScore>
+                        ({queryScore?.team2.penalty_score ?? team2.penalty_score})
+                      </PenaltyScore>
+                    )}
+
+                  </Fragment>
+                )
             }
           </Score>
           <StyledLink

src/features/MatchPage/components/MatchDescription/styled.tsx

@@ -40,6 +40,11 @@ export const Score = styled.span`
     : ''};
 `
 
+export const PenaltyScore = styled.span`
+  font-weight: 400;
+  opacity: .8;
+`
+
 export const StyledLink = styled(ProfileLink)`
   display: flex;
   align-items: center;

src/helpers/callApi/parseJSON.tsx

@@ -1 +1,6 @@
-export const parseJSON = (response: Response) => response.json()
+export const parseJSON = (response: Response) => {
+  if (response.status === 204) {
+    return Promise.resolve()
+  }
+  return response.json()
+}

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,
   })
 }

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<unknown> => {
   const config = {
-    body: {
-      id,
-    },
+    method: 'DELETE',
   }
 
   return callApi({
     config,
-    url: `${API_ROOT}/account/subscription/cancel`,
+    url: `${PAYMENT_API_URL}/api/v2/general/subscription/${id}`,
   })
 }

src/requests/getLiveScores.tsx

@@ -4,6 +4,7 @@ import { API_ROOT } from 'config'
 
 type ScoreTeam = {
   id: number,
+  penalty_score: number | null,
   score: number | null,
 }
 

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,
 }

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,
 }