diff --git a/src/features/MatchPage/components/LiveMatch/index.tsx b/src/features/MatchPage/components/LiveMatch/index.tsx index d137662f..30a970bf 100644 --- a/src/features/MatchPage/components/LiveMatch/index.tsx +++ b/src/features/MatchPage/components/LiveMatch/index.tsx @@ -6,9 +6,10 @@ import type { MatchInfo } from 'requests/getMatchInfo' import { StreamPlayer } from 'features/StreamPlayer' import { MatchSidePlaylists } from 'features/MatchSidePlaylists' -import { useLiveMatch } from './hooks' import { Container } from '../../styled' +import { useLiveMatch } from './hooks' + type Props = { events: Events, profile: MatchInfo, @@ -29,19 +30,20 @@ export const LiveMatch = ({ events, profile }: Props) => { ) diff --git a/src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx b/src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx index 6c5aaaa0..30f2d193 100644 --- a/src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx +++ b/src/features/Matches/helpers/getMatchClickAction/__tests__/index.tsx @@ -20,6 +20,7 @@ it('equals to no country access type', () => { access: false, sub: false, }) + expect(getMatchAccess(match)).toBe(MatchAccess.CanBuyMatch) }) @@ -30,6 +31,7 @@ it('equals to redirect type', () => { has_video: true, sub: true, }) + expect(getMatchAccess(match)).toBe(MatchAccess.RedirectToProfile) }) @@ -38,6 +40,7 @@ it('equals to can buy type', () => { access: true, sub: false, }) + expect(getMatchAccess(match)).toBe(MatchAccess.CanBuyMatch) }) @@ -47,6 +50,7 @@ it('equals to view match popup type', () => { live: true, sub: true, }) + expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup) match = createMatch({ @@ -56,7 +60,8 @@ it('equals to view match popup type', () => { live: false, sub: true, }) - expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup) + + expect(getMatchAccess(match)).toBe(MatchAccess.RedirectToProfile) match = createMatch({ access: true, @@ -66,5 +71,6 @@ it('equals to view match popup type', () => { storage: true, sub: true, }) - expect(getMatchAccess(match)).toBe(MatchAccess.ViewMatchPopup) + + expect(getMatchAccess(match)).toBe(MatchAccess.RedirectToProfile) }) diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx index b99eb58d..88ee0e3f 100644 --- a/src/features/StreamPlayer/hooks/index.tsx +++ b/src/features/StreamPlayer/hooks/index.tsx @@ -3,14 +3,16 @@ import { useCallback, useMemo } from 'react' import once from 'lodash/once' +import { useVolume } from 'features/VideoPlayer/hooks/useVolume' +import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config' + import { useObjectState } from 'hooks' -import { useVolume } from 'features/VideoPlayer/hooks/useVolume' +import type { MatchInfo } from 'requests/getMatchInfo' -import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config' import { useHlsPlayer } from './useHlsPlayer' -import { useVideoQuality } from './useVideoQuality' import { useFullscreen } from './useFullscreen' +import { useVideoQuality } from './useVideoQuality' import { useControlsVisibility } from './useControlsVisibility' const toMilliSeconds = (seconds: number) => seconds * 1000 @@ -27,6 +29,7 @@ const initialState = { export type Props = { onPlayingChange: (playing: boolean) => void, onProgressChange: (seconds: number) => void, + profile: MatchInfo, resumeFrom?: number, url: string, } @@ -38,6 +41,7 @@ export const useVideoPlayer = ({ url, }: Props) => { const { hls, videoRef } = useHlsPlayer(url, resumeFrom) + const [{ duration, loadedProgress, diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx index 21881831..dddd469b 100644 --- a/src/features/StreamPlayer/index.tsx +++ b/src/features/StreamPlayer/index.tsx @@ -1,14 +1,13 @@ -import { secondsToHms } from 'helpers' - +import { T9n } from 'features/T9n' import { Loader } from 'features/Loader' -import { Settings } from 'features/MultiSourcePlayer/components/Settings' import { REWIND_SECONDS } from 'features/MultiSourcePlayer/config' -import { T9n } from 'features/T9n' +import { Settings } from 'features/MultiSourcePlayer/components/Settings' + +import { secondsToHms } from 'helpers' -import type { Props } from './hooks' -import { useVideoPlayer } from './hooks' -import { ProgressBar } from './components/ProgressBar' import { VolumeBar } from './components/VolumeBar' +import { ProgressBar } from './components/ProgressBar' + import { PlayerWrapper, VideoPlayer, @@ -25,9 +24,12 @@ import { ControlsGradient, LiveBtn, } from './styled' +import type { Props } from './hooks' +import { useVideoPlayer } from './hooks' export const StreamPlayer = (props: Props) => { - const { url } = props + const { profile, url } = props + const { backToLive, controlsVisible, @@ -102,18 +104,26 @@ export const StreamPlayer = (props: Props) => { onError={onError} crossOrigin='use-credentials' /> - {ready && ( - - {REWIND_SECONDS} - - {REWIND_SECONDS} - - )} + + { + ready && ( + + + {REWIND_SECONDS} + + + + {REWIND_SECONDS} + + + ) + } + { {REWIND_SECONDS} - - - + { + profile?.live && ( + + + + ) + } +