fix(#299): change color for live button progress

src/features/ProfileCard/index.tsx

@@ -79,7 +79,7 @@ export const ProfileCard = ({ profile }: ProfileType) => {
         <Details>
           <ProfileName>{name}</ProfileName>
           <InfoItems>
-            {profile.additionalInfo?.id && <InfoFlag src={`${URL_AWS}/media/flags/${profile.additionalInfo?.id}.png`} />}
+            {profile.additionalInfo?.id && <InfoFlag src={`${URL_AWS}/media/flags/${profile.additionalInfo.id}.png`} />}
             {tournamentId
               ? (
                 <StyledLink

src/features/StreamPlayer/components/Controls/Components/ControlsWeb/index.tsx

@@ -39,6 +39,7 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
     isFullscreen,
     isLastChapterPlaying,
     isLive,
+    isLiveTime,
     isStorage,
     muted,
     numberOfChapters = 0,
@@ -108,7 +109,10 @@ export const ControlsWeb = (controlsProps: { props: ControlsPropsExtended }) =>
             selectedAudioTrack={selectedAudioTrack!}
           />
           {isLive && (
-            <LiveBtn onClick={backToLive}>
+            <LiveBtn
+              onClick={backToLive}
+              isLiveTime={isLiveTime}
+            >
               <T9n t='live' />
             </LiveBtn>
           )}

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

@@ -29,6 +29,7 @@ export type ControlsProps = {
   isFullscreen: boolean,
   isLastChapterPlaying?: boolean,
   isLive?: boolean,
+  isLiveTime?: boolean,
   isStorage?: boolean,
   liveChapters?: LiveChapters,
   loadedProgress: number,

src/features/StreamPlayer/hooks/index.tsx

@@ -44,6 +44,7 @@ import { FULL_GAME_KEY } from '../../MatchPage/helpers/buildPlaylists'
 export type PlayerState = typeof initialState
 
 const toMilliSeconds = (seconds: number) => seconds * 1000
+const BUFFERING_TIME = 30 * 1000
 
 const initialState = {
   activeChapterIndex: 0,
@@ -61,6 +62,7 @@ const initialState = {
 export type Props = {
   chapters: Chapters,
   isLive: boolean,
+  isLiveTime?: boolean,
   onDurationChange?: (duration: number) => void,
   onPlayingChange: (playing: boolean) => void,
   onProgressChange: (seconds: number) => void,
@@ -245,7 +247,7 @@ export const useVideoPlayer = ({
       setIsLiveTime(true)
     }
 
-    const liveProgressMs = Math.max(fullMatchDuration - 30000, 0)
+    const liveProgressMs = Math.max(fullMatchDuration - BUFFERING_TIME, 0)
     setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 })
     if (liveProgressMs > 0) setIsLiveTime(false)
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -265,7 +267,7 @@ export const useVideoPlayer = ({
       setIsPausedTime(true)
     }
 
-    const liveProgressMs = Math.max(duration - 30000, 0)
+    const liveProgressMs = Math.max(duration - BUFFERING_TIME, 0)
     setPlayerState({ playedProgress: pausedProgress, seek: pausedProgress / 1000 })
     if (liveProgressMs > 0) setIsPausedTime(false)
     // eslint-disable-next-line
@@ -356,6 +358,7 @@ export const useVideoPlayer = ({
   ])
 
   useEffect(() => {
+    setIsLiveTime(playedProgress > duration - BUFFERING_TIME)
     if ((chapters[0]?.isFullMatchChapter) || isEmpty(chapters)) return
 
     const { duration: chapterDuration } = getActiveChapter()
@@ -491,6 +494,7 @@ export const useVideoPlayer = ({
     isFullscreen,
     isLastChapterPlaying,
     isLive,
+    isLiveTime,
     loadedProgress,
     numberOfChapters,
     onDuration,

src/features/StreamPlayer/index.tsx

@@ -55,6 +55,7 @@ export const StreamPlayer = (props: Props) => {
     hideCenterControls,
     isFullscreen,
     isLive,
+    isLiveTime,
     loadedProgress,
     mainControlsVisible,
     muted,
@@ -180,6 +181,7 @@ export const StreamPlayer = (props: Props) => {
         duration={duration}
         isFullscreen={isFullscreen}
         isLive={profile?.live}
+        isLiveTime={isLiveTime}
         isStorage={profile?.storage}
         loadedProgress={loadedProgress}
         muted={muted}

src/features/StreamPlayer/styled.tsx

@@ -323,7 +323,7 @@ export const CenterControls = styled.div<CenterControlsProps>`
   `}
 `
 
-export const LiveBtn = styled(ButtonBase)`
+export const LiveBtn = styled(ButtonBase)<{isLiveTime?: boolean}>`
   height: auto;
   font-weight: bold;
   font-size: 10px;
@@ -331,7 +331,11 @@ export const LiveBtn = styled(ButtonBase)`
   letter-spacing: 0.05em;
   text-transform: uppercase;
   padding: 4.5px 8px;
-  background-color: #CC0000;
+  background-color: ${({ isLiveTime }) => (
+    isLiveTime
+      ? '#CC0000'
+      : 'rgba(130, 130, 130, 0.6)'
+  )};
   border-radius: 1.3px;
   margin-right: 25px;