You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.9 KiB
62 lines
1.9 KiB
import isEmpty from 'lodash/isEmpty'
|
|
|
|
import { StreamPlayer } from 'features/StreamPlayer'
|
|
import { MultiSourcePlayer } from 'features/MultiSourcePlayer'
|
|
import { ProfileHeader } from 'features/ProfileHeader'
|
|
import { MainWrapper } from 'features/MainWrapper'
|
|
import { UserFavorites } from 'features/UserFavorites'
|
|
import { MediaQuery } from 'features/MediaQuery'
|
|
|
|
import { MatchProfileCard } from './MatchProfileCard'
|
|
import { usePlayerProgressReporter } from './hooks/usePlayerProgressReporter'
|
|
import { useMatchProfile } from './hooks/useMatchProfile'
|
|
import { useVideoData } from './hooks/useVideoData'
|
|
import { MainWrapper as Wrapper, Container } from './styled'
|
|
|
|
export const MatchPage = () => {
|
|
const profile = useMatchProfile()
|
|
const {
|
|
isLastPlayPositionFetching,
|
|
lastPlayPosition,
|
|
url,
|
|
videos,
|
|
} = useVideoData()
|
|
const { onPlayerProgressChange, onPlayingChange } = usePlayerProgressReporter()
|
|
|
|
const isLiveMatch = Boolean(url) && !isLastPlayPositionFetching
|
|
const isFinishedMatch = !isEmpty(videos) && !isLastPlayPositionFetching
|
|
|
|
return (
|
|
<MainWrapper>
|
|
<MediaQuery minDevice='laptop'>
|
|
<UserFavorites />
|
|
</MediaQuery>
|
|
<ProfileHeader />
|
|
<Wrapper>
|
|
<MatchProfileCard profile={profile} />
|
|
<Container>
|
|
{
|
|
isLiveMatch && (
|
|
<StreamPlayer
|
|
url={url}
|
|
onPlayingChange={onPlayingChange}
|
|
onProgressChange={onPlayerProgressChange}
|
|
resumeFrom={lastPlayPosition.second}
|
|
/>
|
|
)
|
|
}
|
|
{
|
|
isFinishedMatch && (
|
|
<MultiSourcePlayer
|
|
videos={videos}
|
|
onPlayingChange={onPlayingChange}
|
|
onProgressChange={onPlayerProgressChange}
|
|
resumeFrom={lastPlayPosition}
|
|
/>
|
|
)
|
|
}
|
|
</Container>
|
|
</Wrapper>
|
|
</MainWrapper>
|
|
)
|
|
}
|
|
|