fix(#175): change route for flags and change setInterval

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

src/components/ItemInfo/ItemInfo.tsx

@@ -13,7 +13,6 @@ type ItemInfoType = {
   onClick: (val: any) => void,
   type: ProfileTypes,
 }
-
 export const ItemInfo = ({
   active,
   id,

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>

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

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(
+    const counter = setInterval(
-      () => getViewMatchDuration({
+      () => getMatchViewDuration(), 1000 * 30,
-        matchId,
-        sportType,
-        userId: Number(userInfo?.email),
-      }).then(({
-        duration,
-        error,
-      }) => {
-        if (error || (duration && Number(duration) > ACCESS_TIME)) {
-          setAccess(false)
-        }
-      }), 1000 * 30,
     )
     // eslint-disable-next-line
-    return () => clearInterval(getIntervalMatch)
+    return () => clearInterval(counter)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     user,
-    matchProfile,
     sportType,
     matchId,
   ])

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>

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>

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

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>

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>

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

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

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

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>