feat(#2246): add loop requests for getmatchinfo in live

Makefile

@@ -88,7 +88,7 @@ b-stage: build
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/b-wwwroot/
 
 c-stage: build
-	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/c-wwwroot/
+	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@10.0.3.8:/usr/local/www/ott-staging/c-wwwroot/
 
 d-stage: build
 	rsync -zavP --delete-before build/ -e 'ssh -p 666' ott-staging@staging.instat.tv:/usr/local/www/ott-staging/d-wwwroot/

src/features/AuthStore/helpers.tsx

@@ -24,7 +24,7 @@ const redirectUrl = () => {
     return `${window.origin}/redirect`
   }
   if (ENV === 'staging') {
-    return `https://${ENV}.${client.name}.tv/redirect`
+    return `https://c-${ENV}.${client.name}.tv/redirect`
   }
   return `https://${client.name}.tv/redirect`
 }

src/features/MatchPage/hooks/useMatchProfile.tsx

@@ -41,6 +41,18 @@ export const useMatchProfile = () => {
     getMatchInfo(sportType, matchId).then(setMatchProfile)
   }, [sportType, matchId])
 
+  useEffect(() => {
+    let getIntervalMatch
+    if (matchProfile?.live && !matchProfile.youtube_link) {
+      getIntervalMatch = setInterval(
+        () => getMatchInfo(sportType, matchId).then(setMatchProfile), 1000 * 10,
+      )
+    } else {
+      return clearInterval(getIntervalMatch)
+    }
+    return undefined
+  }, [matchProfile, sportType, matchId])
+
   const { events, matchPlaylists } = useMatchData(matchProfile?.live)
 
   const profile = useMemo(

src/features/StreamPlayer/components/YoutubePlayer/index.tsx

@@ -12,6 +12,10 @@ export const YoutubePlayer = (props: Props) => {
     onTouchEnd,
     onTouchStart,
     playing,
+    sizeOptions: {
+      height,
+      width,
+    },
     wrapperRef,
   } = useVideoPlayer(props)
 
@@ -30,12 +34,12 @@ export const YoutubePlayer = (props: Props) => {
       <YouTube
         videoId={key}
         opts={{
-          height: String(wrapperRef.current?.clientHeight),
+          height: String(height),
           playerVars: {
             autoplay: 1,
             modestbranding: 1,
           },
-          width: String(wrapperRef.current?.clientWidth),
+          width: String(width),
         }}
       />
     </PlayerWrapper>

src/features/StreamPlayer/hooks/index.tsx

@@ -3,6 +3,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useState,
 } from 'react'
 
 import once from 'lodash/once'
@@ -72,6 +73,10 @@ export const useVideoPlayer = ({
     onFullscreenClick,
     wrapperRef,
   } = useFullscreen()
+  const [sizeOptions, setSizeOptions] = useState({
+    height: wrapperRef.current?.clientHeight,
+    width: wrapperRef.current?.clientWidth,
+  })
 
   const togglePlaying = () => {
     if (ready) {
@@ -122,6 +127,15 @@ export const useVideoPlayer = ({
 
   const { isOnline } = useNoNetworkPopupStore()
 
+  useEffect(() => {
+    if (wrapperRef.current) {
+      setSizeOptions({
+        height: wrapperRef.current?.clientHeight,
+        width: wrapperRef.current?.clientWidth,
+      })
+    }
+  }, [wrapperRef])
+
   useEffect(() => {
     if (!isOnline) {
       setPlayerState({ playing: false })
@@ -163,6 +177,7 @@ export const useVideoPlayer = ({
     rewindBackward: rewind(-REWIND_SECONDS),
     rewindForward: rewind(REWIND_SECONDS),
     seek,
+    sizeOptions,
     startPlaying,
     togglePlaying,
     videoRef,