Ott 1701 part 4 (#573)
* refactor(1701): removed MultiSourcePlayer * refactor(1701): duration fix on live streamkeep-around/fdb88b04b32b9392e76795099e2ec47c9856b38b
Mirlan
4 years ago
committed by
Andrei Dekterev
parent
d3b25de38d
commit
7e0f83ad2a
@ -1,25 +0,0 @@ |
||||
import type { MouseEvent } from 'react' |
||||
import { useState, useEffect } from 'react' |
||||
import { useLocation } from 'react-router' |
||||
|
||||
import type { PlaylistOption } from 'features/MatchPage/types' |
||||
|
||||
export const usePlayerClickHandler = () => { |
||||
const { pathname } = useLocation() |
||||
const [selectedPlaylist, setSelectedPlaylist] = useState<PlaylistOption>() |
||||
const handlePlaylistClick = (playlist: PlaylistOption, e?: MouseEvent) => { |
||||
e?.stopPropagation() |
||||
if (playlist !== selectedPlaylist) { |
||||
setSelectedPlaylist(playlist) |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
setSelectedPlaylist(undefined) |
||||
}, [pathname]) |
||||
|
||||
return { |
||||
handlePlaylistClick, |
||||
selectedPlaylist, |
||||
} |
||||
} |
||||
@ -1,126 +0,0 @@ |
||||
import type { ReactElement } from 'react' |
||||
|
||||
import styled from 'styled-components/macro' |
||||
|
||||
import { VolumeBar } from 'features/StreamPlayer/components/VolumeBar' |
||||
import { |
||||
Controls, |
||||
Fullscreen, |
||||
PlayStop, |
||||
} from 'features/StreamPlayer/styled' |
||||
|
||||
import { ProgressBar } from '.' |
||||
|
||||
const Story = { |
||||
component: ProgressBar, |
||||
title: 'ProgressBarWithChapters', |
||||
} |
||||
|
||||
export default Story |
||||
|
||||
const Wrapper = styled.div` |
||||
position: relative; |
||||
width: 95vw; |
||||
height: 50vh; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
background-color: #000; |
||||
` |
||||
|
||||
const callback = () => {} |
||||
|
||||
const renderInControls = (progressBarElement: ReactElement) => ( |
||||
<Wrapper> |
||||
<Controls visible> |
||||
<PlayStop onClick={callback} playing={false} /> |
||||
<VolumeBar |
||||
value={50} |
||||
muted={false} |
||||
onChange={callback} |
||||
onClick={callback} |
||||
/> |
||||
{progressBarElement} |
||||
<Fullscreen onClick={callback} isFullscreen={false} /> |
||||
</Controls> |
||||
</Wrapper> |
||||
) |
||||
|
||||
const duration = 70000 |
||||
|
||||
const chapters = [ |
||||
{ |
||||
duration: 30000, |
||||
endMs: 30000, |
||||
endOffsetMs: 0, |
||||
period: 0, |
||||
startMs: 0, |
||||
startOffsetMs: 0, |
||||
urls: {}, |
||||
}, |
||||
{ |
||||
duration: 30000, |
||||
endMs: 60000, |
||||
endOffsetMs: 0, |
||||
period: 0, |
||||
startMs: 30000, |
||||
startOffsetMs: 0, |
||||
urls: {}, |
||||
}, |
||||
{ |
||||
duration: 10000, |
||||
endMs: 70000, |
||||
endOffsetMs: 0, |
||||
period: 0, |
||||
startMs: 60000, |
||||
startOffsetMs: 0, |
||||
urls: {}, |
||||
}, |
||||
] |
||||
|
||||
export const Empty = () => renderInControls( |
||||
<ProgressBar |
||||
activeChapterIndex={0} |
||||
allPlayedProgress={0} |
||||
duration={duration} |
||||
chapters={chapters} |
||||
onPlayedProgressChange={callback} |
||||
playedProgress={0} |
||||
loadedProgress={0} |
||||
/>, |
||||
) |
||||
|
||||
export const HalfLoaded = () => renderInControls( |
||||
<ProgressBar |
||||
activeChapterIndex={0} |
||||
allPlayedProgress={0} |
||||
duration={duration} |
||||
chapters={chapters} |
||||
onPlayedProgressChange={callback} |
||||
playedProgress={0} |
||||
loadedProgress={30000} |
||||
/>, |
||||
) |
||||
|
||||
export const HalfPlayed = () => renderInControls( |
||||
<ProgressBar |
||||
activeChapterIndex={1} |
||||
allPlayedProgress={1} |
||||
duration={duration} |
||||
chapters={chapters} |
||||
onPlayedProgressChange={callback} |
||||
playedProgress={30000} |
||||
loadedProgress={0} |
||||
/>, |
||||
) |
||||
|
||||
export const Loaded40AndPlayed20 = () => renderInControls( |
||||
<ProgressBar |
||||
activeChapterIndex={0} |
||||
allPlayedProgress={0} |
||||
duration={duration} |
||||
chapters={chapters} |
||||
onPlayedProgressChange={callback} |
||||
playedProgress={20000} |
||||
loadedProgress={40000} |
||||
/>, |
||||
) |
||||
@ -1,3 +0,0 @@ |
||||
export const REWIND_SECONDS = 5 |
||||
|
||||
export const HOUR_IN_MILLISECONDS = 60 * 60 * 1000 |
||||
@ -1,38 +0,0 @@ |
||||
import keys from 'lodash/keys' |
||||
import uniq from 'lodash/uniq' |
||||
import orderBy from 'lodash/orderBy' |
||||
import includes from 'lodash/includes' |
||||
|
||||
import { useLocalStore } from 'hooks' |
||||
|
||||
import type { Chapters } from '../types' |
||||
|
||||
const getVideoQualities = (chapters: Chapters) => { |
||||
const qualities = uniq(keys(chapters[0]?.urls)) |
||||
return orderBy( |
||||
qualities, |
||||
Number, |
||||
'desc', |
||||
) |
||||
} |
||||
|
||||
export const useVideoQuality = (chapters: Chapters) => { |
||||
const videoQualities = getVideoQualities(chapters) |
||||
|
||||
const qualityValidator = (localStorageQuality: string) => ( |
||||
includes(videoQualities, localStorageQuality) |
||||
) |
||||
|
||||
const [selectedQuality, setSelectedQuality] = useLocalStore({ |
||||
// по умолчанию наилучшее качество
|
||||
defaultValue: videoQualities[0], |
||||
key: 'player_quality', |
||||
validator: qualityValidator, |
||||
}) |
||||
|
||||
return { |
||||
selectedQuality, |
||||
setSelectedQuality, |
||||
videoQualities, |
||||
} |
||||
} |
||||
@ -1,24 +0,0 @@ |
||||
import pipe from 'lodash/fp/pipe' |
||||
import orderBy from 'lodash/fp/orderBy' |
||||
import sumBy from 'lodash/fp/sumBy' |
||||
import uniqBy from 'lodash/fp/uniqBy' |
||||
|
||||
import type { Videos, Video } from './getVideos' |
||||
import { getVideos } from './getVideos' |
||||
|
||||
const calculateDuration = (videos: Videos) => { |
||||
const durationMs = pipe( |
||||
orderBy(({ quality }: Video) => Number(quality), 'desc'), |
||||
uniqBy(({ period }: Video) => period), |
||||
sumBy(({ duration }: Video) => duration), |
||||
)(videos) |
||||
return durationMs / 1000 |
||||
} |
||||
|
||||
/** |
||||
* Временный способ получения длительности матча |
||||
*/ |
||||
export const getFullMatchDuration = async (...args: Parameters<typeof getVideos>) => { |
||||
const videos = await getVideos(...args) |
||||
return calculateDuration(videos) |
||||
} |
||||
@ -1,40 +0,0 @@ |
||||
import isEmpty from 'lodash/isEmpty' |
||||
import filter from 'lodash/filter' |
||||
|
||||
import { API_ROOT, SportTypes } from 'config' |
||||
import { callApi } from 'helpers' |
||||
|
||||
const filterByIds = (videos: Videos) => { |
||||
const zeroIdVideos = filter(videos, { abc: '0' }) |
||||
return isEmpty(zeroIdVideos) ? videos : zeroIdVideos |
||||
} |
||||
|
||||
export type Video = { |
||||
/** id дорожки */ |
||||
abc: string, |
||||
duration: number, |
||||
period: number, |
||||
quality: string, |
||||
start_ms: number, |
||||
url: string, |
||||
} |
||||
|
||||
export type Videos = Array<Video> |
||||
|
||||
export const getVideos = ( |
||||
sportType: SportTypes, |
||||
matchId: number, |
||||
): Promise<Videos> => { |
||||
const config = { |
||||
body: { |
||||
match_id: matchId, |
||||
sport_id: sportType, |
||||
}, |
||||
} |
||||
|
||||
return callApi({ |
||||
config, |
||||
// эндпоинт удалили со стейджинга, временно ссылаемся на прод
|
||||
url: `${API_ROOT}/videoapi`, |
||||
}).then(filterByIds) |
||||
} |
||||
Loading…
Reference in new issue