From 2bd97402f41d77d4209a9e5278918c9d98d1bbe7 Mon Sep 17 00:00:00 2001
From: Andrei Dekterev <avdekterev@gmail.com>
Date: Tue, 24 Jan 2023 22:14:06 +0700
Subject: [PATCH] fix(#175): change route for flags and change setInterval

---
 src/components/AccessTimer/index.tsx          | 14 ++++++---
 src/components/ItemInfo/ItemInfo.tsx          |  1 -
 .../components/GroupBlock/index.tsx           |  2 +-
 src/features/ItemsList/index.tsx              |  2 +-
 src/features/MatchPage/store/hooks/index.tsx  | 31 ++++++++++---------
 src/features/MultiSourcePlayer/index.tsx      |  2 +-
 .../components/TournamentInfo/index.tsx       |  2 +-
 src/features/ProfileCard/index.tsx            |  2 +-
 src/features/StreamPlayer/index.tsx           |  2 +-
 .../components/CollapseTournament/index.tsx   |  2 +-
 .../components/TournamentMobile/index.tsx     |  2 +-
 src/features/TournamentSubtitle/index.tsx     |  2 +-
 .../UserFavorites/TooltipBlock/index.tsx      |  2 +-
 .../components/MatchesHighlights/index.tsx    |  2 +-
 14 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/src/components/AccessTimer/index.tsx b/src/components/AccessTimer/index.tsx
index 77bd74fd..faebddbe 100644
--- a/src/components/AccessTimer/index.tsx
+++ b/src/components/AccessTimer/index.tsx
@@ -1,4 +1,8 @@
-import { useEffect, useState } from 'react'
+import {
+  useEffect,
+  useState,
+  RefObject,
+} from 'react'
 
 import { T9n } from 'features/T9n'
 import { Icon } from 'features/Icon'
@@ -23,8 +27,8 @@ type AccessTimerType = {
   access: boolean,
   isFullscreen: boolean,
   onFullscreenClick: () => void,
-  onPause: () => void,
   playing: boolean,
+  videoRef?: RefObject<HTMLVideoElement> | null,
 }
 
 const ACCESS_TIME = 60
@@ -33,8 +37,8 @@ export const AccessTimer = ({
   access,
   isFullscreen,
   onFullscreenClick,
-  onPause,
   playing,
+  videoRef,
 }: AccessTimerType) => {
   const {
     logout,
@@ -46,13 +50,13 @@ export const AccessTimer = ({
 
   const [timeIsFinished, setTimeIsFinished] = useState(true)
   const [time, setTime] = useState(ACCESS_TIME)
-  const isTimeExpired = time <= 0 && !access
+  const isTimeExpired = time <= 0 || !access
 
   useEffect(() => {
     if (isTimeExpired) {
       document.pictureInPictureEnabled && document.exitPictureInPicture()
       setTimeIsFinished(true)
-      onPause()
+      videoRef?.current?.pause()
       setTime(0)
       if (isFullscreen) onFullscreenClick()
     }
diff --git a/src/components/ItemInfo/ItemInfo.tsx b/src/components/ItemInfo/ItemInfo.tsx
index 0bc42ffc..3dc2af82 100644
--- a/src/components/ItemInfo/ItemInfo.tsx
+++ b/src/components/ItemInfo/ItemInfo.tsx
@@ -13,7 +13,6 @@ type ItemInfoType = {
   onClick: (val: any) => void,
   type: ProfileTypes,
 }
-
 export const ItemInfo = ({
   active,
   id,
diff --git a/src/features/FavoritesMobilePopup/components/GroupBlock/index.tsx b/src/features/FavoritesMobilePopup/components/GroupBlock/index.tsx
index 953fa505..94e08c0d 100644
--- a/src/features/FavoritesMobilePopup/components/GroupBlock/index.tsx
+++ b/src/features/FavoritesMobilePopup/components/GroupBlock/index.tsx
@@ -69,7 +69,7 @@ export const GroupBlock = ({ groupBlock }: Props) => {
                   <Name>{name}</Name>
                   <CountryAndTeamInfo>
                     <SportIcon sport={item.sport} size={10} />
-                    <Flag src={`https://instatscout.com/images/flags/48/${item.info.country?.id}.png`} />
+                    <Flag src={`https://cf-aws.insports.tv/media/flags/${item.info.country?.id}.png`} />
                     <EmptySpan>{countryOrTeam}</EmptySpan>
                   </CountryAndTeamInfo>
                 </EmptyDiv>
diff --git a/src/features/ItemsList/index.tsx b/src/features/ItemsList/index.tsx
index 5788b6d3..1f9534c7 100644
--- a/src/features/ItemsList/index.tsx
+++ b/src/features/ItemsList/index.tsx
@@ -55,7 +55,7 @@ export const ItemsList = ({
             <SportIcon size={isMobileDevice ? 10 : '0.65rem'} sport={item.sport} />
             {item.additionalInfo && (
               <Fragment>
-                <Flag src={`https://instatscout.com/images/flags/48/${item.additionalInfo.id}.png`} />
+                <Flag src={`https://cf-aws.insports.tv/media/flags/${item.additionalInfo.id}.png`} />
                 <TeamOrCountry nameObj={item.additionalInfo} />
               </Fragment>
             )}
diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx
index 94dd2a44..ef1765ef 100644
--- a/src/features/MatchPage/store/hooks/index.tsx
+++ b/src/features/MatchPage/store/hooks/index.tsx
@@ -75,6 +75,19 @@ export const useMatchPage = () => {
     matchPlaylists,
   })
 
+  const getMatchViewDuration = () => (getViewMatchDuration({
+    matchId,
+    sportType,
+    userId: Number(userInfo?.email),
+  }).then(({
+    duration,
+    error,
+  }) => {
+    if (error || (duration && Number(duration) > ACCESS_TIME)) {
+      setAccess(false)
+    }
+  }))
+
   useEffect(() => {
     getMatchInfo(sportType, matchId).then(setMatchProfile)
   }, [sportType, matchId])
@@ -95,26 +108,14 @@ export const useMatchPage = () => {
   useEffect(() => {
     if (user) return
 
-    const getIntervalMatch: ReturnType<typeof setInterval> = setInterval(
-      () => getViewMatchDuration({
-        matchId,
-        sportType,
-        userId: Number(userInfo?.email),
-      }).then(({
-        duration,
-        error,
-      }) => {
-        if (error || (duration && Number(duration) > ACCESS_TIME)) {
-          setAccess(false)
-        }
-      }), 1000 * 30,
+    const counter = setInterval(
+      () => getMatchViewDuration(), 1000 * 30,
     )
     // eslint-disable-next-line
-    return () => clearInterval(getIntervalMatch)
+    return () => clearInterval(counter)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     user,
-    matchProfile,
     sportType,
     matchId,
   ])
diff --git a/src/features/MultiSourcePlayer/index.tsx b/src/features/MultiSourcePlayer/index.tsx
index e3883583..f75e1ada 100644
--- a/src/features/MultiSourcePlayer/index.tsx
+++ b/src/features/MultiSourcePlayer/index.tsx
@@ -225,7 +225,7 @@ export const MultiSourcePlayer = (props: Props) => {
           isFullscreen={isFullscreen}
           onFullscreenClick={onFullscreenClick}
           playing={ready && playing && !!playedProgress}
-          onPause={onPause}
+          videoRef={currentVideo}
         />
       )}
     </PlayerWrapper>
diff --git a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx b/src/features/PreferencesPopup/components/TournamentInfo/index.tsx
index b168cf29..ac4c53fd 100644
--- a/src/features/PreferencesPopup/components/TournamentInfo/index.tsx
+++ b/src/features/PreferencesPopup/components/TournamentInfo/index.tsx
@@ -51,7 +51,7 @@ export const TournamentInfo = ({
     <StyledName nameObj={tournament} className='title' prefix={prefix} />
     <ItemInfo>
       {isIcon && <SportIcon size={isMobileDevice ? 10 : '0.65rem'} sport={tournament.sport} />}
-      <Flag src={`https://instatscout.com/images/flags/48/${tournament.country.id}.png`} />
+      <Flag src={`https://cf-aws.insports.tv/media/flags/${tournament.country.id}.png`} />
       <TeamOrCountry nameObj={tournament.country} />
     </ItemInfo>
   </Wrapper>
diff --git a/src/features/ProfileCard/index.tsx b/src/features/ProfileCard/index.tsx
index 43e66854..464b42d6 100644
--- a/src/features/ProfileCard/index.tsx
+++ b/src/features/ProfileCard/index.tsx
@@ -75,7 +75,7 @@ export const ProfileCard = ({ profile }: ProfileType) => {
         <Details>
           <ProfileName>{name}</ProfileName>
           <InfoItems>
-            <InfoFlag src={`https://instatscout.com/images/flags/48/${profile.additionalInfo.id}.png`} />
+            <InfoFlag src={`https://cf-aws.insports.tv/media/flags/${profile.additionalInfo.id}.png`} />
             {tournamentId
               ? (
                 <StyledLink
diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx
index 19378c6c..2e48f0f1 100644
--- a/src/features/StreamPlayer/index.tsx
+++ b/src/features/StreamPlayer/index.tsx
@@ -203,7 +203,7 @@ export const StreamPlayer = (props: Props) => {
           isFullscreen={isFullscreen}
           onFullscreenClick={onFullscreenClick}
           playing={ready && playing && !!playedProgress}
-          onPause={onPause}
+          videoRef={videoRef}
         />
       )}
     </PlayerWrapper>
diff --git a/src/features/TournamentList/components/CollapseTournament/index.tsx b/src/features/TournamentList/components/CollapseTournament/index.tsx
index 0b5abc1a..a796c808 100644
--- a/src/features/TournamentList/components/CollapseTournament/index.tsx
+++ b/src/features/TournamentList/components/CollapseTournament/index.tsx
@@ -93,7 +93,7 @@ export const CollapseTournament = ({
             </SportWrapper>
             <CountryWrapper>
               <CountryFlag
-                src={`https://instatscout.com/images/flags/48/${countryId}.png`}
+                src={`https://cf-aws.insports.tv/media/flags/${countryId}.png`}
               />
               {countryInfo && (
                 <Tooltip>
diff --git a/src/features/TournamentList/components/TournamentMobile/index.tsx b/src/features/TournamentList/components/TournamentMobile/index.tsx
index 2eeb55a3..69f6e0c4 100644
--- a/src/features/TournamentList/components/TournamentMobile/index.tsx
+++ b/src/features/TournamentList/components/TournamentMobile/index.tsx
@@ -54,7 +54,7 @@ export const TournamentMobile = ({
                 sport={sportType}
               />
               <CountryFlag
-                src={`https://instatscout.com/images/flags/48/${countryId}.png`}
+                src={`https://cf-aws.insports.tv/media/flags/${countryId}.png`}
               />
             </Fragment>
           )}
diff --git a/src/features/TournamentSubtitle/index.tsx b/src/features/TournamentSubtitle/index.tsx
index 53b67a70..897db6a9 100644
--- a/src/features/TournamentSubtitle/index.tsx
+++ b/src/features/TournamentSubtitle/index.tsx
@@ -72,7 +72,7 @@ export const TournamentSubtitle = ({
               )}
             </SportWrapper>
             <CountryWrapper>
-              <CountryFlag src={`https://instatscout.com/images/flags/48/${countryId}.png`} />
+              <CountryFlag src={`https://cf-aws.insports.tv/media/flags/${countryId}.png`} />
               {countryInfo && (
                 <Tooltip>
                   <Name nameObj={countryInfo} />
diff --git a/src/features/UserFavorites/TooltipBlock/index.tsx b/src/features/UserFavorites/TooltipBlock/index.tsx
index c9986471..bc7c62ec 100644
--- a/src/features/UserFavorites/TooltipBlock/index.tsx
+++ b/src/features/UserFavorites/TooltipBlock/index.tsx
@@ -32,7 +32,7 @@ export const TooltipBlock = ({
       </TooltipBlockItem>
       <TooltipBlockItemThin>
         {info?.team && <Name nameObj={info.team} />}{' '}
-        {info?.country && <Flag src={`https://instatscout.com/images/flags/48/${info.country.id}.png`} />}
+        {info?.country && <Flag src={`https://cf-aws.insports.tv/media/flags/${info.country.id}.png`} />}
       </TooltipBlockItemThin>
     </TooltipBlockWrapper>
   )
diff --git a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx
index d858b131..4c164e73 100644
--- a/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx
+++ b/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx
@@ -75,7 +75,7 @@ export const MatchesHighlights = () => {
                 <ScTournament>
                   <SportIcon sport={sport} />
                   <ScCountryFlag
-                    src={`https://instatscout.com/images/flags/48/${country_id}.png`}
+                    src={`https://cf-aws.insports.tv/media/flags/${country_id}.png`}
                   />
                   <ScTournamentName>{tournament.name_eng}</ScTournamentName>
                 </ScTournament>