Ott 462 play live match (#170)
* Ott 462 play live match part 1 (#168) * feat(#462): added ProfileLogo component * refactor(#462): changed images to ProfileLogo component * refactor(#462): added live video request (#169)keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan
5 years ago
committed by
GitHub
parent
98fc901af0
commit
c12897677f
@ -0,0 +1,42 @@ |
||||
import type { BaseSyntheticEvent } from 'react' |
||||
import React, { useCallback } from 'react' |
||||
|
||||
import styled from 'styled-components/macro' |
||||
|
||||
const ImageStyled = styled.img`` |
||||
|
||||
type Props = { |
||||
alt?: string, |
||||
className?: string, |
||||
dataSrc?: string, |
||||
fallbackSrc?: string, |
||||
src: string, |
||||
title?: string, |
||||
} |
||||
|
||||
export const Image = ({ |
||||
alt, |
||||
className, |
||||
dataSrc, |
||||
fallbackSrc, |
||||
src, |
||||
title, |
||||
}: Props) => { |
||||
const onError = useCallback((e: BaseSyntheticEvent) => { |
||||
// eslint-disable-next-line no-param-reassign
|
||||
e.target.onError = '' |
||||
// eslint-disable-next-line no-param-reassign
|
||||
e.target.src = fallbackSrc |
||||
}, [fallbackSrc]) |
||||
|
||||
return ( |
||||
<ImageStyled |
||||
alt={alt} |
||||
src={src} |
||||
data-src={dataSrc} |
||||
className={className} |
||||
onError={onError} |
||||
title={title} |
||||
/> |
||||
) |
||||
} |
||||
@ -1,30 +1,36 @@ |
||||
import { useEffect, useState } from 'react' |
||||
|
||||
import type { Videos } from 'requests' |
||||
import { getVideos } from 'requests' |
||||
|
||||
import { MatchStatuses } from 'features/HeaderFilters' |
||||
import type { LiveVideos, Videos } from 'requests' |
||||
import { getLiveVideos, getVideos } from 'requests' |
||||
|
||||
import { useSportNameParam, usePageId } from 'hooks' |
||||
import { isNull } from 'lodash' |
||||
|
||||
export const useVideoData = (matchStatus?: MatchStatuses) => { |
||||
export const useVideoData = () => { |
||||
const [videos, setVideos] = useState<Videos>([]) |
||||
const [liveVideos, setLiveVideos] = useState<LiveVideos>([]) |
||||
const { sportType } = useSportNameParam() |
||||
const matchId = usePageId() |
||||
|
||||
useEffect(() => { |
||||
if (matchStatus === MatchStatuses.Finished) { |
||||
getVideos(sportType, matchId).then(setVideos) |
||||
const requestVideos = async () => { |
||||
const live = await getLiveVideos(sportType, matchId) |
||||
if (isNull(live)) { |
||||
const videosResponse = await getVideos(sportType, matchId) |
||||
setVideos(videosResponse) |
||||
} else { |
||||
setLiveVideos(live) |
||||
} |
||||
} |
||||
requestVideos() |
||||
}, |
||||
[ |
||||
matchStatus, |
||||
sportType, |
||||
matchId, |
||||
]) |
||||
|
||||
return { |
||||
url: '', |
||||
url: liveVideos[0] || '', |
||||
videos, |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,50 @@ |
||||
import React from 'react' |
||||
|
||||
import { ProfileTypes, SportTypes } from 'config' |
||||
import { getProfileFallbackLogo, getProfileLogo } from 'helpers' |
||||
|
||||
import { Image } from 'features/Common' |
||||
|
||||
type ProfileImageProps = { |
||||
alt?: string, |
||||
className?: string, |
||||
id: number, |
||||
lazy?: boolean, |
||||
profileType: ProfileTypes, |
||||
size?: number, |
||||
sportType: SportTypes, |
||||
title?: string, |
||||
} |
||||
|
||||
export const ProfileLogo = ({ |
||||
alt, |
||||
className, |
||||
id, |
||||
lazy = false, |
||||
profileType, |
||||
size, |
||||
sportType, |
||||
title, |
||||
}: ProfileImageProps) => { |
||||
const src = getProfileLogo({ |
||||
id, |
||||
profileType, |
||||
size, |
||||
sportType, |
||||
}) |
||||
const fallbackSrc = getProfileFallbackLogo({ |
||||
profileType, |
||||
sportType, |
||||
}) |
||||
|
||||
return ( |
||||
<Image |
||||
alt={alt} |
||||
src={lazy ? '' : src} |
||||
data-src={lazy ? src : ''} |
||||
fallbackSrc={fallbackSrc} |
||||
className={className} |
||||
title={title} |
||||
/> |
||||
) |
||||
} |
||||
@ -1,23 +0,0 @@ |
||||
import { BaseSyntheticEvent } from 'react' |
||||
|
||||
import { |
||||
SportTypes, |
||||
ProfileTypes, |
||||
} from 'config' |
||||
import { getProfileFallbackLogo } from 'helpers/getProfileFallbackLogo' |
||||
|
||||
type Args = { |
||||
e: BaseSyntheticEvent, |
||||
sport: SportTypes, |
||||
type: ProfileTypes, |
||||
} |
||||
|
||||
export const handleImageError = (arg: Args): void => { |
||||
// eslint-disable-next-line no-param-reassign
|
||||
arg.e.target.onError = '' |
||||
// eslint-disable-next-line no-param-reassign
|
||||
arg.e.target.src = getProfileFallbackLogo({ |
||||
profileType: arg.type, |
||||
sportType: arg.sport, |
||||
}) |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
import { API_ROOT, SportTypes } from 'config' |
||||
import { callApi } from 'helpers' |
||||
|
||||
export type LiveVideos = Array<string> |
||||
|
||||
export const getLiveVideos = ( |
||||
sportType: SportTypes, |
||||
matchId: number, |
||||
): Promise<LiveVideos> => { |
||||
const config = { |
||||
body: { |
||||
match_id: matchId, |
||||
sport_id: sportType, |
||||
}, |
||||
} |
||||
|
||||
return callApi({ |
||||
config, |
||||
url: `${API_ROOT}/video/stream`, |
||||
}) |
||||
} |
||||
Loading…
Reference in new issue