Ruslan Khayrullin
3 years ago
parent
ea00f09c7e
commit
a56c44521b
@ -1,139 +0,0 @@ |
|||||||
import map from 'lodash/map' |
|
||||||
import last from 'lodash/last' |
|
||||||
import uniq from 'lodash/uniq' |
|
||||||
import filter from 'lodash/filter' |
|
||||||
import reduce from 'lodash/reduce' |
|
||||||
import concat from 'lodash/concat' |
|
||||||
import orderBy from 'lodash/orderBy' |
|
||||||
import isEmpty from 'lodash/isEmpty' |
|
||||||
import groupBy from 'lodash/groupBy' |
|
||||||
|
|
||||||
import type { |
|
||||||
Videos, |
|
||||||
Episodes, |
|
||||||
Episode, |
|
||||||
} from 'requests' |
|
||||||
|
|
||||||
import type { Chapters, Urls } from 'features/MultiSourcePlayer/types' |
|
||||||
|
|
||||||
import type { PlaylistOption } from '../../types' |
|
||||||
import { FULL_GAME_KEY } from '../../helpers/buildPlaylists' |
|
||||||
|
|
||||||
const getUniquePeriods = (videos: Videos) => uniq(map(videos, ({ period }) => period)) |
|
||||||
|
|
||||||
type Video = { |
|
||||||
duration: number, |
|
||||||
period: number, |
|
||||||
urls: Urls, |
|
||||||
} |
|
||||||
|
|
||||||
const getVideoByPeriod = (videos: Videos, period: number) => { |
|
||||||
const videosWithSamePeriod = filter(videos, { period }) |
|
||||||
if (isEmpty(videosWithSamePeriod)) return null |
|
||||||
|
|
||||||
const urls = reduce( |
|
||||||
videosWithSamePeriod, |
|
||||||
(acc: Urls, video) => ({ |
|
||||||
...acc, |
|
||||||
[video.quality]: video.url, |
|
||||||
}), |
|
||||||
{}, |
|
||||||
) |
|
||||||
const [video] = videosWithSamePeriod |
|
||||||
return { |
|
||||||
duration: video.duration, |
|
||||||
period: video.period, |
|
||||||
urls, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const getVideoByPeriods = (videos: Videos, periods: Array<number>) => ( |
|
||||||
reduce( |
|
||||||
periods, |
|
||||||
(acc: Array<Video>, period) => { |
|
||||||
const video = getVideoByPeriod(videos, period) |
|
||||||
return video ? concat(acc, video) : acc |
|
||||||
}, |
|
||||||
[], |
|
||||||
) |
|
||||||
) |
|
||||||
|
|
||||||
const getFullMatchChapters = (videos: Array<Video>) => { |
|
||||||
const sortedVideos = orderBy(videos, ({ period }) => period) |
|
||||||
return reduce( |
|
||||||
sortedVideos, |
|
||||||
(acc: Chapters, video) => { |
|
||||||
const prevVideoEndMs = last(acc)?.endMs || 0 |
|
||||||
const endMs = prevVideoEndMs + video.duration |
|
||||||
const nextChapter = { |
|
||||||
duration: video.duration, |
|
||||||
endMs, |
|
||||||
endOffsetMs: endMs, |
|
||||||
isFullMatchChapter: true, |
|
||||||
period: video.period, |
|
||||||
startMs: prevVideoEndMs, |
|
||||||
startOffsetMs: 0, |
|
||||||
urls: video.urls, |
|
||||||
} |
|
||||||
return concat(acc, nextChapter) |
|
||||||
}, |
|
||||||
[], |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const getEpisodeUrls = (urls: Urls, episode: Episode) => reduce( |
|
||||||
urls, |
|
||||||
( |
|
||||||
acc: Urls, |
|
||||||
url, |
|
||||||
qulaity, |
|
||||||
) => { |
|
||||||
acc[qulaity] = `${url}#t=${episode.s},${episode.e}` |
|
||||||
return acc |
|
||||||
}, |
|
||||||
{}, |
|
||||||
) |
|
||||||
|
|
||||||
const getPlaylistChapters = (videos: Array<Video>, episodes: Episodes) => { |
|
||||||
const groupedByPeriods = groupBy(videos, ({ period }) => period) |
|
||||||
return reduce( |
|
||||||
episodes, |
|
||||||
(acc: Chapters, episode) => { |
|
||||||
const video = groupedByPeriods[episode.h]?.[0] |
|
||||||
if (!video || episode.s >= episode.e) return acc |
|
||||||
|
|
||||||
const episodeDuration = (episode.e - episode.s) * 1000 |
|
||||||
const prevVideoEndMs = last(acc)?.endMs || 0 |
|
||||||
const nextChapter = { |
|
||||||
count: episode.c, |
|
||||||
duration: episodeDuration, |
|
||||||
endMs: prevVideoEndMs + episodeDuration, |
|
||||||
endOffsetMs: episode.e * 1000, |
|
||||||
period: video.period, |
|
||||||
startMs: prevVideoEndMs, |
|
||||||
startOffsetMs: episode.s * 1000, |
|
||||||
urls: getEpisodeUrls(video.urls, episode), |
|
||||||
} |
|
||||||
return concat(acc, nextChapter) |
|
||||||
}, |
|
||||||
[], |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
type Args = { |
|
||||||
episodes: Episodes, |
|
||||||
selectedPlaylist?: PlaylistOption, |
|
||||||
videos: Videos, |
|
||||||
} |
|
||||||
|
|
||||||
export const buildChapters = ({ |
|
||||||
episodes, |
|
||||||
selectedPlaylist, |
|
||||||
videos, |
|
||||||
}: Args) => { |
|
||||||
const periods = getUniquePeriods(videos) |
|
||||||
const highQualityVideos = getVideoByPeriods(videos, periods) |
|
||||||
return selectedPlaylist?.id === FULL_GAME_KEY |
|
||||||
? getFullMatchChapters(highQualityVideos) |
|
||||||
: getPlaylistChapters(highQualityVideos, episodes) |
|
||||||
} |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
import { useEffect } from 'react' |
|
||||||
|
|
||||||
import { useToggle, useObjectState } from 'hooks' |
|
||||||
|
|
||||||
import type { Settings } from 'features/MatchPopup' |
|
||||||
import { useMatchPopupStore } from 'features/MatchPopup' |
|
||||||
import { useMatchPageStore } from 'features/MatchPage/store' |
|
||||||
|
|
||||||
import { usePlayerLogger } from './usePlayerLogger' |
|
||||||
import { useEpisodes } from './useEpisodes' |
|
||||||
import { useChapters } from './useChapters' |
|
||||||
|
|
||||||
const initPausedData = { |
|
||||||
activeChapterIndex: 0, |
|
||||||
activePlayer: 0 || 1, |
|
||||||
playedProgress: 0, |
|
||||||
} |
|
||||||
|
|
||||||
export type PausedData = typeof initPausedData |
|
||||||
|
|
||||||
export const useFinishedMatch = () => { |
|
||||||
const [pausedData, setPausedData] = useObjectState<PausedData>(initPausedData) |
|
||||||
|
|
||||||
const { setChapters, setSettings } = useMatchPopupStore() |
|
||||||
const { |
|
||||||
handlePlaylistClick, |
|
||||||
matchPlaylists, |
|
||||||
selectedPlaylist, |
|
||||||
} = useMatchPageStore() |
|
||||||
const { |
|
||||||
close: closeSettingsPopup, |
|
||||||
isOpen: isSettingsPopupOpen, |
|
||||||
open: openSettingsPopup, |
|
||||||
} = useToggle() |
|
||||||
|
|
||||||
const { episodes } = useEpisodes() |
|
||||||
|
|
||||||
const { logPlaylistChange, onPlayingChange } = usePlayerLogger() |
|
||||||
|
|
||||||
const setEpisodesSettings = (newSettings: Settings) => { |
|
||||||
setSettings(newSettings) |
|
||||||
closeSettingsPopup() |
|
||||||
} |
|
||||||
// @ts-expect-error
|
|
||||||
const onPlaylistSelect: typeof handlePlaylistClick = (playlist, e) => { |
|
||||||
if (selectedPlaylist) { |
|
||||||
logPlaylistChange(selectedPlaylist) |
|
||||||
} |
|
||||||
// @ts-expect-error
|
|
||||||
handlePlaylistClick(playlist, e) |
|
||||||
} |
|
||||||
const { chapters } = useChapters({ episodes, selectedPlaylist }) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setChapters(chapters) |
|
||||||
}, [chapters, setChapters]) |
|
||||||
|
|
||||||
return { |
|
||||||
chapters, |
|
||||||
closeSettingsPopup, |
|
||||||
isSettingsPopupOpen, |
|
||||||
onPlayingChange, |
|
||||||
onPlaylistSelect, |
|
||||||
openSettingsPopup, |
|
||||||
pausedData, |
|
||||||
playlists: matchPlaylists, |
|
||||||
selectedPlaylist, |
|
||||||
setEpisodesSettings, |
|
||||||
setPausedData, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
import { |
|
||||||
useEffect, |
|
||||||
useMemo, |
|
||||||
useState, |
|
||||||
} from 'react' |
|
||||||
|
|
||||||
import type { Episodes, Videos } from 'requests' |
|
||||||
import { getVideos } from 'requests' |
|
||||||
|
|
||||||
import { usePageParams } from 'hooks/usePageParams' |
|
||||||
|
|
||||||
import type { PlaylistOption } from 'features/MatchPage/types' |
|
||||||
|
|
||||||
import { buildChapters } from '../helpers' |
|
||||||
|
|
||||||
type Args = { |
|
||||||
episodes: Episodes, |
|
||||||
selectedPlaylist?: PlaylistOption, |
|
||||||
} |
|
||||||
|
|
||||||
export const useChapters = ({ |
|
||||||
episodes, |
|
||||||
selectedPlaylist, |
|
||||||
}: Args) => { |
|
||||||
const [videos, setVideos] = useState<Videos>([]) |
|
||||||
const { profileId: matchId, sportType } = usePageParams() |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
getVideos(sportType, matchId).then(setVideos) |
|
||||||
}, [sportType, matchId]) |
|
||||||
|
|
||||||
const chapters = useMemo( |
|
||||||
() => buildChapters({ |
|
||||||
episodes, |
|
||||||
selectedPlaylist, |
|
||||||
videos, |
|
||||||
}), |
|
||||||
[ |
|
||||||
selectedPlaylist, |
|
||||||
episodes, |
|
||||||
videos, |
|
||||||
], |
|
||||||
) |
|
||||||
|
|
||||||
return { chapters } |
|
||||||
} |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
import { |
|
||||||
useCallback, |
|
||||||
useEffect, |
|
||||||
useState, |
|
||||||
} from 'react' |
|
||||||
|
|
||||||
import isEmpty from 'lodash/isEmpty' |
|
||||||
|
|
||||||
import type { Episodes } from 'requests' |
|
||||||
import { getPlayerPlaylists } from 'requests' |
|
||||||
|
|
||||||
import { usePageParams } from 'hooks/usePageParams' |
|
||||||
|
|
||||||
import { PlaylistOption, PlaylistTypes } from 'features/MatchPage/types' |
|
||||||
import { useMatchPageStore } from 'features/MatchPage/store' |
|
||||||
|
|
||||||
import { |
|
||||||
defaultSettings, |
|
||||||
Settings, |
|
||||||
useMatchPopupStore, |
|
||||||
} from 'features/MatchPopup' |
|
||||||
|
|
||||||
export const useEpisodes = () => { |
|
||||||
const { settings } = useMatchPopupStore() |
|
||||||
const { |
|
||||||
handlePlaylistClick, |
|
||||||
matchPlaylists: playlists, |
|
||||||
selectedPlaylist, |
|
||||||
} = useMatchPageStore() |
|
||||||
const [episodes, setEpisodes] = useState<Episodes>([]) |
|
||||||
const { profileId: matchId, sportType } = usePageParams() |
|
||||||
|
|
||||||
const fetchEpisodes = useCallback(( |
|
||||||
playlistOption: PlaylistOption, |
|
||||||
popupSettings: Settings = defaultSettings, |
|
||||||
) => { |
|
||||||
if (playlistOption.type === PlaylistTypes.PLAYER) { |
|
||||||
getPlayerPlaylists({ |
|
||||||
matchId, |
|
||||||
playerId: playlistOption.id, |
|
||||||
settings: popupSettings, |
|
||||||
sportType, |
|
||||||
}).then(setEpisodes) |
|
||||||
} else if (playlistOption.type === PlaylistTypes.MATCH |
|
||||||
|| playlistOption.type === PlaylistTypes.EVENT) { |
|
||||||
setEpisodes(playlistOption.episodes) |
|
||||||
} |
|
||||||
}, [matchId, sportType]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!selectedPlaylist && playlists && !isEmpty(playlists.match)) { |
|
||||||
// handlePlaylistClick(playlists.match[0])
|
|
||||||
} |
|
||||||
}, [ |
|
||||||
selectedPlaylist, |
|
||||||
playlists, |
|
||||||
handlePlaylistClick, |
|
||||||
]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (selectedPlaylist) { |
|
||||||
fetchEpisodes(selectedPlaylist, settings) |
|
||||||
} |
|
||||||
}, [ |
|
||||||
settings, |
|
||||||
selectedPlaylist, |
|
||||||
fetchEpisodes, |
|
||||||
]) |
|
||||||
|
|
||||||
return { episodes } |
|
||||||
} |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
import { |
|
||||||
useCallback, |
|
||||||
useRef, |
|
||||||
} from 'react' |
|
||||||
import { useLocation } from 'react-router' |
|
||||||
|
|
||||||
import { LogActions, logUserAction } from 'requests/logUserAction' |
|
||||||
|
|
||||||
import { useInterval } from 'hooks/useInterval' |
|
||||||
import { usePageParams } from 'hooks/usePageParams' |
|
||||||
|
|
||||||
import { PlaylistOption, PlaylistTypes } from 'features/MatchPage/types' |
|
||||||
|
|
||||||
const playlistTypeConfig = { |
|
||||||
ball_in_play: 2, |
|
||||||
full_game: 1, |
|
||||||
goals: 4, |
|
||||||
highlights: 3, |
|
||||||
players: 5, |
|
||||||
} |
|
||||||
|
|
||||||
const getInitialData = () => ({ dateVisit: new Date().toISOString(), seconds: 0 }) |
|
||||||
|
|
||||||
export const usePlayerLogger = () => { |
|
||||||
const location = useLocation() |
|
||||||
const { profileId, sportType } = usePageParams() |
|
||||||
const data = useRef(getInitialData()) |
|
||||||
|
|
||||||
const incrementSeconds = () => data.current.seconds++ |
|
||||||
|
|
||||||
const resetData = () => { |
|
||||||
data.current = getInitialData() |
|
||||||
} |
|
||||||
|
|
||||||
const { start, stop } = useInterval({ |
|
||||||
callback: incrementSeconds, |
|
||||||
intervalDuration: 1000, |
|
||||||
startImmediate: false, |
|
||||||
}) |
|
||||||
|
|
||||||
const onPlayingChange = useCallback((playing: boolean) => { |
|
||||||
if (playing) { |
|
||||||
start() |
|
||||||
} else { |
|
||||||
stop() |
|
||||||
} |
|
||||||
}, [start, stop]) |
|
||||||
|
|
||||||
const logPlaylistChange = (prevPlaylist: PlaylistOption) => { |
|
||||||
const args = prevPlaylist.type === PlaylistTypes.MATCH |
|
||||||
? { |
|
||||||
playlistType: playlistTypeConfig[prevPlaylist.id], |
|
||||||
} |
|
||||||
: { |
|
||||||
playerId: prevPlaylist.id, |
|
||||||
playlistType: playlistTypeConfig.players, |
|
||||||
} |
|
||||||
|
|
||||||
logUserAction({ |
|
||||||
actionType: LogActions.VideoChange, |
|
||||||
dateVisit: data.current.dateVisit, |
|
||||||
duration: data.current.seconds, |
|
||||||
matchId: profileId, |
|
||||||
sportType, |
|
||||||
url: location.pathname, |
|
||||||
...args, |
|
||||||
}) |
|
||||||
resetData() |
|
||||||
} |
|
||||||
|
|
||||||
return { logPlaylistChange, onPlayingChange } |
|
||||||
} |
|
||||||
@ -1,74 +0,0 @@ |
|||||||
import { Fragment } from 'react' |
|
||||||
|
|
||||||
import isEmpty from 'lodash/isEmpty' |
|
||||||
|
|
||||||
import { MatchSidePlaylists } from 'features/MatchSidePlaylists' |
|
||||||
import { MultiSourcePlayer } from 'features/MultiSourcePlayer' |
|
||||||
|
|
||||||
import { SettingsPopup } from '../SettingsPopup' |
|
||||||
|
|
||||||
import { useFinishedMatch } from './hooks' |
|
||||||
import { Container } from '../../styled' |
|
||||||
import { Modal } from './styled' |
|
||||||
import { MatchDescription } from '../MatchDescription' |
|
||||||
import { useMatchPageStore } from '../../store' |
|
||||||
|
|
||||||
export const FinishedMatch = () => { |
|
||||||
const { |
|
||||||
access, |
|
||||||
isOpenFiltersPopup, |
|
||||||
profile, |
|
||||||
profileCardShown, |
|
||||||
} = useMatchPageStore() |
|
||||||
const { |
|
||||||
chapters, |
|
||||||
closeSettingsPopup, |
|
||||||
isSettingsPopupOpen, |
|
||||||
onPlayingChange, |
|
||||||
onPlaylistSelect, |
|
||||||
pausedData, |
|
||||||
selectedPlaylist, |
|
||||||
setEpisodesSettings, |
|
||||||
setPausedData, |
|
||||||
} = useFinishedMatch() |
|
||||||
|
|
||||||
return ( |
|
||||||
<Fragment> |
|
||||||
<Modal |
|
||||||
close={closeSettingsPopup} |
|
||||||
isOpen={isSettingsPopupOpen} |
|
||||||
withCloseButton={false} |
|
||||||
> |
|
||||||
<SettingsPopup |
|
||||||
onWatchEpisodesClick={setEpisodesSettings} |
|
||||||
closePopup={closeSettingsPopup} |
|
||||||
profile={profile} |
|
||||||
selectedPlaylist={selectedPlaylist} |
|
||||||
/> |
|
||||||
</Modal> |
|
||||||
|
|
||||||
<Container isHidden={!profileCardShown}> |
|
||||||
{!isEmpty(chapters) && ( |
|
||||||
<Fragment> |
|
||||||
<MultiSourcePlayer |
|
||||||
pausedData={pausedData} |
|
||||||
setPausedData={setPausedData} |
|
||||||
access={access} |
|
||||||
isOpenPopup={isOpenFiltersPopup} |
|
||||||
chapters={chapters} |
|
||||||
onPlayingChange={onPlayingChange} |
|
||||||
profile={profile} |
|
||||||
/> |
|
||||||
<MatchDescription /> |
|
||||||
</Fragment> |
|
||||||
)} |
|
||||||
</Container> |
|
||||||
|
|
||||||
<MatchSidePlaylists |
|
||||||
selectedPlaylist={selectedPlaylist} |
|
||||||
// @ts-expect-error
|
|
||||||
onSelect={onPlaylistSelect} |
|
||||||
/> |
|
||||||
</Fragment> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,26 +0,0 @@ |
|||||||
import styled from 'styled-components/macro' |
|
||||||
|
|
||||||
import { devices } from 'config/devices' |
|
||||||
|
|
||||||
import { Modal as BaseModal } from 'features/Modal' |
|
||||||
import { ModalWindow } from 'features/Modal/styled' |
|
||||||
|
|
||||||
export const Modal = styled(BaseModal)` |
|
||||||
background-color: rgba(0, 0, 0, 0.7); |
|
||||||
|
|
||||||
${ModalWindow} { |
|
||||||
width: 1222px; |
|
||||||
padding: 20px 0; |
|
||||||
border-radius: 5px; |
|
||||||
|
|
||||||
@media ${devices.tablet} { |
|
||||||
width: 100vw; |
|
||||||
} |
|
||||||
|
|
||||||
@media ${devices.mobile} { |
|
||||||
height: 100vh; |
|
||||||
padding: 0; |
|
||||||
background-color: transparent; |
|
||||||
} |
|
||||||
} |
|
||||||
` |
|
||||||
@ -1,47 +0,0 @@ |
|||||||
import { calculateChapterStyles } from '..' |
|
||||||
|
|
||||||
const videoDuration = 60000 |
|
||||||
|
|
||||||
it('return correct progress and width lengthes', () => { |
|
||||||
let chapter = { |
|
||||||
duration: 15000, |
|
||||||
endMs: 20000, |
|
||||||
period: 0, |
|
||||||
startMs: 5000, |
|
||||||
urls: {}, |
|
||||||
} |
|
||||||
let expected = { |
|
||||||
...chapter, |
|
||||||
loaded: 100, |
|
||||||
played: 100, |
|
||||||
width: 25, |
|
||||||
} |
|
||||||
expect(calculateChapterStyles({ |
|
||||||
activeChapterIndex: 0, |
|
||||||
chapters: [chapter], |
|
||||||
loadedProgress: 30000, |
|
||||||
playedProgress: 30000, |
|
||||||
videoDuration, |
|
||||||
})).toEqual([expected]) |
|
||||||
|
|
||||||
chapter = { |
|
||||||
duration: 30000, |
|
||||||
endMs: 30000, |
|
||||||
period: 0, |
|
||||||
startMs: 0, |
|
||||||
urls: {}, |
|
||||||
} |
|
||||||
expected = { |
|
||||||
...chapter, |
|
||||||
loaded: 50, |
|
||||||
played: 50, |
|
||||||
width: 50, |
|
||||||
} |
|
||||||
expect(calculateChapterStyles({ |
|
||||||
activeChapterIndex: 0, |
|
||||||
chapters: [chapter], |
|
||||||
loadedProgress: 15000, |
|
||||||
playedProgress: 15000, |
|
||||||
videoDuration, |
|
||||||
})).toEqual([expected]) |
|
||||||
}) |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
import map from 'lodash/fp/map' |
|
||||||
import pipe from 'lodash/fp/pipe' |
|
||||||
import size from 'lodash/fp/size' |
|
||||||
import slice from 'lodash/fp/slice' |
|
||||||
|
|
||||||
import type { Chapters, Chapter } from 'features/MultiSourcePlayer/types' |
|
||||||
|
|
||||||
const calculateChapterProgress = (progress: number, chapter: Chapter) => ( |
|
||||||
Math.min(progress * 100 / chapter.duration, 100) |
|
||||||
) |
|
||||||
|
|
||||||
type Args = { |
|
||||||
activeChapterIndex: number, |
|
||||||
chapters: Chapters, |
|
||||||
loadedProgress: number, |
|
||||||
playedProgress: number, |
|
||||||
videoDuration: number, |
|
||||||
} |
|
||||||
|
|
||||||
export const calculateChapterStyles = ({ |
|
||||||
activeChapterIndex, |
|
||||||
chapters, |
|
||||||
loadedProgress, |
|
||||||
playedProgress, |
|
||||||
videoDuration, |
|
||||||
}: Args) => { |
|
||||||
const playedChapters = pipe( |
|
||||||
slice(0, activeChapterIndex), |
|
||||||
map((chapter: Chapter) => ({ |
|
||||||
...chapter, |
|
||||||
loaded: 100, |
|
||||||
played: 100, |
|
||||||
width: chapter.duration * 100 / videoDuration, |
|
||||||
})), |
|
||||||
)(chapters) |
|
||||||
|
|
||||||
const comingChapters = pipe( |
|
||||||
slice(activeChapterIndex + 1, size(chapters)), |
|
||||||
map((chapter: Chapter) => ({ |
|
||||||
...chapter, |
|
||||||
loaded: 0, |
|
||||||
played: 0, |
|
||||||
width: chapter.duration * 100 / videoDuration, |
|
||||||
})), |
|
||||||
)(chapters) |
|
||||||
|
|
||||||
const chapter = chapters[activeChapterIndex] |
|
||||||
const activeChapter = { |
|
||||||
...chapter, |
|
||||||
loaded: calculateChapterProgress(loadedProgress, chapter), |
|
||||||
played: calculateChapterProgress(playedProgress, chapter), |
|
||||||
width: chapter.duration * 100 / videoDuration, |
|
||||||
} |
|
||||||
return [ |
|
||||||
...playedChapters, |
|
||||||
activeChapter, |
|
||||||
...comingChapters, |
|
||||||
] |
|
||||||
} |
|
||||||
@ -1,51 +0,0 @@ |
|||||||
/* eslint-disable @typescript-eslint/no-explicit-any */ |
|
||||||
import { useMemo } from 'react' |
|
||||||
|
|
||||||
import { secondsToHms } from 'helpers' |
|
||||||
|
|
||||||
import type { Chapters } from '../../types' |
|
||||||
import { calculateChapterStyles } from './helpers/calculateChapterStyles' |
|
||||||
|
|
||||||
export type Props = { |
|
||||||
activeChapterIndex: number, |
|
||||||
allPlayedProgress: number, |
|
||||||
chapters?: Chapters, |
|
||||||
duration: number, |
|
||||||
loadedProgress: number, |
|
||||||
onPlayedProgressChange: (progress: number, seeking: boolean) => void, |
|
||||||
onTouchEnd?: () => any, |
|
||||||
onTouchStart?: () => any, |
|
||||||
playedProgress: number, |
|
||||||
} |
|
||||||
|
|
||||||
export const useProgressBar = ({ |
|
||||||
activeChapterIndex, |
|
||||||
allPlayedProgress, |
|
||||||
chapters = [], |
|
||||||
duration, |
|
||||||
loadedProgress, |
|
||||||
playedProgress, |
|
||||||
}: Props) => { |
|
||||||
const calculatedChapters = useMemo( |
|
||||||
() => calculateChapterStyles({ |
|
||||||
activeChapterIndex, |
|
||||||
chapters, |
|
||||||
loadedProgress, |
|
||||||
playedProgress, |
|
||||||
videoDuration: duration, |
|
||||||
}), |
|
||||||
[ |
|
||||||
activeChapterIndex, |
|
||||||
loadedProgress, |
|
||||||
playedProgress, |
|
||||||
duration, |
|
||||||
chapters, |
|
||||||
], |
|
||||||
) |
|
||||||
|
|
||||||
return { |
|
||||||
calculatedChapters, |
|
||||||
playedProgressInPercent: Math.min(allPlayedProgress * 100 / duration, 100), |
|
||||||
time: secondsToHms(allPlayedProgress / 1000), |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,52 +0,0 @@ |
|||||||
import { useSlider } from 'features/StreamPlayer/hooks/useSlider' |
|
||||||
import { TimeTooltip } from 'features/StreamPlayer/components/TimeTooltip' |
|
||||||
import { Scrubber, ScrubberContainer } from 'features/StreamPlayer/components/ProgressBar/styled' |
|
||||||
|
|
||||||
import { Chapters } from 'features/StreamPlayer/components/Chapters' |
|
||||||
import type { Props } from './hooks' |
|
||||||
import { useProgressBar } from './hooks' |
|
||||||
import { ProgressBarList } from './styled' |
|
||||||
import { isIOS } from '../../../../config/userAgent' |
|
||||||
|
|
||||||
export interface ProgressBarProps extends Props { |
|
||||||
isScrubberVisible?: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export const ProgressBar = (props: ProgressBarProps) => { |
|
||||||
const { |
|
||||||
isScrubberVisible, |
|
||||||
onPlayedProgressChange, |
|
||||||
onTouchEnd, |
|
||||||
onTouchStart, |
|
||||||
} = props |
|
||||||
|
|
||||||
const progressBarRef = useSlider({ |
|
||||||
onChange: onPlayedProgressChange, |
|
||||||
onTouchEnd, |
|
||||||
onTouchStart, |
|
||||||
}) |
|
||||||
|
|
||||||
const { |
|
||||||
calculatedChapters, |
|
||||||
playedProgressInPercent, |
|
||||||
time, |
|
||||||
} = useProgressBar(props) |
|
||||||
|
|
||||||
return ( |
|
||||||
<ProgressBarList |
|
||||||
ref={progressBarRef} |
|
||||||
isIOS={isIOS} |
|
||||||
> |
|
||||||
<Chapters chapters={calculatedChapters} /> |
|
||||||
{isScrubberVisible && ( |
|
||||||
<ScrubberContainer> |
|
||||||
<Scrubber |
|
||||||
style={{ left: `${playedProgressInPercent}%` }} |
|
||||||
> |
|
||||||
<TimeTooltip time={time} /> |
|
||||||
</Scrubber> |
|
||||||
</ScrubberContainer> |
|
||||||
)} |
|
||||||
</ProgressBarList> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -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,20 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
export const ProgressBarList = styled.div<{isIOS?: boolean}>` |
|
||||||
flex-grow: 1; |
|
||||||
height: 4px; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
height: 1px; |
|
||||||
` |
|
||||||
: ''} |
|
||||||
|
|
||||||
${({ isIOS }) => (isIOS && isMobileDevice |
|
||||||
&& css` |
|
||||||
height: 3px; |
|
||||||
margin: 0 24px; |
|
||||||
`)}
|
|
||||||
` |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
import { useToggle } from 'hooks' |
|
||||||
|
|
||||||
export type Props = { |
|
||||||
onSelect: (quality: string) => void, |
|
||||||
selectedQuality: string, |
|
||||||
videoQualities: Array<string>, |
|
||||||
} |
|
||||||
|
|
||||||
export const useSettings = ({ onSelect }: Props) => { |
|
||||||
const { |
|
||||||
close, |
|
||||||
isOpen, |
|
||||||
open, |
|
||||||
} = useToggle() |
|
||||||
|
|
||||||
const onItemClick = (quality: string) => { |
|
||||||
onSelect(quality) |
|
||||||
close() |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
close, |
|
||||||
isOpen, |
|
||||||
onItemClick, |
|
||||||
open, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,47 +0,0 @@ |
|||||||
import { Fragment } from 'react' |
|
||||||
|
|
||||||
import map from 'lodash/map' |
|
||||||
|
|
||||||
import { OutsideClick } from 'features/OutsideClick' |
|
||||||
|
|
||||||
import type { Props } from './hooks' |
|
||||||
import { useSettings } from './hooks' |
|
||||||
import { |
|
||||||
SettingsButton, |
|
||||||
QualitiesList, |
|
||||||
QualityItem, |
|
||||||
} from './styled' |
|
||||||
|
|
||||||
export const Settings = (props: Props) => { |
|
||||||
const { selectedQuality, videoQualities } = props |
|
||||||
const { |
|
||||||
close, |
|
||||||
isOpen, |
|
||||||
onItemClick, |
|
||||||
open, |
|
||||||
} = useSettings(props) |
|
||||||
return ( |
|
||||||
<Fragment> |
|
||||||
<SettingsButton onClick={open} id='match_video_quality' /> |
|
||||||
{ |
|
||||||
isOpen && ( |
|
||||||
<OutsideClick onClick={close}> |
|
||||||
<QualitiesList> |
|
||||||
{ |
|
||||||
map(videoQualities, (quality) => ( |
|
||||||
<QualityItem |
|
||||||
key={quality} |
|
||||||
active={quality === selectedQuality} |
|
||||||
onClick={() => onItemClick(quality)} |
|
||||||
> |
|
||||||
{quality} |
|
||||||
</QualityItem> |
|
||||||
)) |
|
||||||
} |
|
||||||
</QualitiesList> |
|
||||||
</OutsideClick> |
|
||||||
) |
|
||||||
} |
|
||||||
</Fragment> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,78 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
import { ButtonBase } from 'features/StreamPlayer/styled' |
|
||||||
|
|
||||||
export const SettingsButton = styled(ButtonBase)` |
|
||||||
width: 22px; |
|
||||||
height: 20px; |
|
||||||
margin-right: 25px; |
|
||||||
background-image: url(/images/settings.svg); |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 20px; |
|
||||||
height: 18px; |
|
||||||
margin-right: 15px; |
|
||||||
cursor: pointer; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const QualitiesList = styled.ul` |
|
||||||
position: absolute; |
|
||||||
z-index: 1; |
|
||||||
bottom: calc(100% + 14px); |
|
||||||
right: 24px; |
|
||||||
width: 52px; |
|
||||||
list-style: none; |
|
||||||
border-radius: 2px; |
|
||||||
background-color: rgba(0, 0, 0, 0.5); |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
right: 0; |
|
||||||
bottom: 35px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
type QualityItemProps = { |
|
||||||
active: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
const activeIcon = css` |
|
||||||
:before { |
|
||||||
position: absolute; |
|
||||||
top: 45%; |
|
||||||
transform: rotate(-45deg); |
|
||||||
content: ''; |
|
||||||
left: 8px; |
|
||||||
width: 5px; |
|
||||||
height: 3px; |
|
||||||
border-left: 1px solid #fff; |
|
||||||
border-bottom: 1px solid #fff; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export const QualityItem = styled.li<QualityItemProps>` |
|
||||||
width: 100%; |
|
||||||
padding: 5px 8px; |
|
||||||
text-align: right; |
|
||||||
font-style: normal; |
|
||||||
font-weight: normal; |
|
||||||
/* stylelint-disable-next-line */ |
|
||||||
font-family: Montserrat; |
|
||||||
font-size: 10px; |
|
||||||
line-height: 12px; |
|
||||||
letter-spacing: 0.01em; |
|
||||||
color: #fff; |
|
||||||
cursor: pointer; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
:hover, :focus { |
|
||||||
background-color: rgba(255, 255, 255, 0.1); |
|
||||||
} |
|
||||||
|
|
||||||
${({ active }) => (active ? activeIcon : '')} |
|
||||||
` |
|
||||||
@ -1,5 +0,0 @@ |
|||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
export const REWIND_SECONDS = isMobileDevice ? 10 : 5 |
|
||||||
|
|
||||||
export const HOUR_IN_MILLISECONDS = 60 * 60 * 1000 |
|
||||||
@ -1,35 +0,0 @@ |
|||||||
import { RefObject } from 'react' |
|
||||||
|
|
||||||
import findIndex from 'lodash/findIndex' |
|
||||||
|
|
||||||
import type { Chapters, Players } from '../types' |
|
||||||
|
|
||||||
type Args = { |
|
||||||
from?: number, |
|
||||||
url: string, |
|
||||||
videoRef: RefObject<HTMLVideoElement>, |
|
||||||
} |
|
||||||
|
|
||||||
export const preparePlayer = ({ |
|
||||||
from = 0, |
|
||||||
url, |
|
||||||
videoRef, |
|
||||||
}: Args) => { |
|
||||||
const video = videoRef?.current |
|
||||||
if (!video) return |
|
||||||
|
|
||||||
// eslint-disable-next-line no-param-reassign
|
|
||||||
video.src = url |
|
||||||
if (from) { |
|
||||||
video.currentTime = from |
|
||||||
} |
|
||||||
video.load() |
|
||||||
} |
|
||||||
|
|
||||||
export const findChapterByProgress = (chapters: Chapters, progressMs: number) => ( |
|
||||||
findIndex(chapters, ({ endMs, startMs }) => ( |
|
||||||
startMs <= progressMs && progressMs <= endMs |
|
||||||
)) |
|
||||||
) |
|
||||||
|
|
||||||
export const getNextPlayer = (player: Players): Players => (player + 1) % 2 |
|
||||||
@ -1,494 +0,0 @@ |
|||||||
import type { MouseEvent } from 'react' |
|
||||||
import { |
|
||||||
useCallback, |
|
||||||
useEffect, |
|
||||||
useRef, |
|
||||||
useState, |
|
||||||
} from 'react' |
|
||||||
|
|
||||||
import { useTour } from '@reactour/tour' |
|
||||||
|
|
||||||
import size from 'lodash/size' |
|
||||||
import findIndex from 'lodash/findIndex' |
|
||||||
import inRange from 'lodash/inRange' |
|
||||||
import sum from 'lodash/sum' |
|
||||||
import values from 'lodash/values' |
|
||||||
|
|
||||||
import { KEYBOARD_KEYS } from 'config' |
|
||||||
|
|
||||||
import { useControlsVisibility } from 'features/StreamPlayer/hooks/useControlsVisibility' |
|
||||||
import { useFullscreen } from 'features/StreamPlayer/hooks/useFullscreen' |
|
||||||
import { useVolume } from 'features/VideoPlayer/hooks/useVolume' |
|
||||||
import { useNoNetworkPopupStore } from 'features/NoNetworkPopup' |
|
||||||
import { useMatchPageStore } from 'features/MatchPage/store' |
|
||||||
import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists' |
|
||||||
|
|
||||||
import { |
|
||||||
useEventListener, |
|
||||||
useInterval, |
|
||||||
useObjectState, |
|
||||||
usePageParams, |
|
||||||
} from 'hooks' |
|
||||||
import type { SetPartialState } from 'hooks' |
|
||||||
|
|
||||||
import { |
|
||||||
MatchInfo, |
|
||||||
saveMatchStats, |
|
||||||
VIEW_INTERVAL_MS, |
|
||||||
} from 'requests' |
|
||||||
|
|
||||||
import type { PausedData } from 'features/MatchPage/components/FinishedMatch/hooks' |
|
||||||
|
|
||||||
import { useProgressChangeHandler } from './useProgressChangeHandler' |
|
||||||
import { usePlayingHandlers } from './usePlayingHandlers' |
|
||||||
import { useVideoQuality } from './useVideoQuality' |
|
||||||
import { useDuration } from './useDuration' |
|
||||||
import type { Chapters } from '../types' |
|
||||||
import { Players } from '../types' |
|
||||||
import { getNextPlayer } from '../helpers' |
|
||||||
import { REWIND_SECONDS } from '../config' |
|
||||||
|
|
||||||
const initialState = { |
|
||||||
activeChapterIndex: 0, |
|
||||||
activePlayer: Players.PLAYER1, |
|
||||||
loadedProgress: 0, |
|
||||||
playedProgress: 0, |
|
||||||
playing: false, |
|
||||||
ready: false, |
|
||||||
seek: { |
|
||||||
[Players.PLAYER1]: 0, |
|
||||||
[Players.PLAYER2]: 0, |
|
||||||
}, |
|
||||||
seeking: false, |
|
||||||
} |
|
||||||
|
|
||||||
export type PlayerState = typeof initialState |
|
||||||
|
|
||||||
export type Props = { |
|
||||||
access: boolean, |
|
||||||
chapters: Chapters, |
|
||||||
isOpenPopup?: boolean, |
|
||||||
onError?: () => void, |
|
||||||
onPlayingChange: (playing: boolean) => void, |
|
||||||
pausedData: PausedData, |
|
||||||
profile: MatchInfo, |
|
||||||
setPausedData: SetPartialState<PausedData>, |
|
||||||
} |
|
||||||
|
|
||||||
export const useMultiSourcePlayer = ({ |
|
||||||
chapters, |
|
||||||
onError, |
|
||||||
onPlayingChange, |
|
||||||
pausedData, |
|
||||||
setPausedData, |
|
||||||
}: Props) => { |
|
||||||
const [currentPlayingOrder, setCurrentPlayingOrder] = useState(0) |
|
||||||
const ordersObj = useRef<Record<string, number>>({}) |
|
||||||
|
|
||||||
const { |
|
||||||
disablePlayingEpisodes, |
|
||||||
handlePlaylistClick, |
|
||||||
isPlayFilterEpisodes, |
|
||||||
isPlayingEpisode, |
|
||||||
matchPlaylists, |
|
||||||
playingOrder, |
|
||||||
playingProgress, |
|
||||||
playNextEpisode, |
|
||||||
selectedPlaylist, |
|
||||||
setCircleAnimation, |
|
||||||
setPlayingProgress, |
|
||||||
} = useMatchPageStore() |
|
||||||
|
|
||||||
const { isOpen } = useTour() |
|
||||||
|
|
||||||
const { profileId, sportType } = usePageParams() |
|
||||||
|
|
||||||
/** время для сохранения статистики просмотра матча */ |
|
||||||
const timeForStatistics = useRef(0) |
|
||||||
|
|
||||||
const numberOfChapters = size(chapters) |
|
||||||
const [ |
|
||||||
{ |
|
||||||
activeChapterIndex: chapterIndex, |
|
||||||
activePlayer, |
|
||||||
loadedProgress, |
|
||||||
playedProgress, |
|
||||||
playing: statePlaying, |
|
||||||
ready, |
|
||||||
seek, |
|
||||||
seeking, |
|
||||||
}, |
|
||||||
setPlayerState, |
|
||||||
] = useObjectState(initialState) |
|
||||||
const video1Ref = useRef<HTMLVideoElement>(null) |
|
||||||
const video2Ref = useRef<HTMLVideoElement>(null) |
|
||||||
const activeChapterIndex = numberOfChapters >= chapterIndex ? chapterIndex : 0 |
|
||||||
const { |
|
||||||
onReady, |
|
||||||
playNextChapter, |
|
||||||
playPrevChapter, |
|
||||||
stopPlaying, |
|
||||||
togglePlaying, |
|
||||||
} = usePlayingHandlers(setPlayerState, numberOfChapters) |
|
||||||
|
|
||||||
const { |
|
||||||
selectedQuality, |
|
||||||
setSelectedQuality, |
|
||||||
videoQualities, |
|
||||||
} = useVideoQuality(chapters) |
|
||||||
|
|
||||||
const duration = useDuration(chapters) |
|
||||||
|
|
||||||
const playing = Boolean(statePlaying && !isOpen) |
|
||||||
|
|
||||||
const handleError = useCallback(() => { |
|
||||||
onError?.() |
|
||||||
}, [onError]) |
|
||||||
|
|
||||||
const getActiveChapter = useCallback( |
|
||||||
(index: number = activeChapterIndex) => chapters[index], |
|
||||||
[chapters, activeChapterIndex], |
|
||||||
) |
|
||||||
|
|
||||||
const videoRef = [video1Ref, video2Ref][activePlayer] |
|
||||||
const isFirstChapterPlaying = activeChapterIndex === 0 |
|
||||||
const isLastChapterPlaying = activeChapterIndex === numberOfChapters - 1 |
|
||||||
const setPlayerTime = (progressMs: number) => { |
|
||||||
if (!videoRef.current) return |
|
||||||
videoRef.current.currentTime = progressMs / 1000 |
|
||||||
} |
|
||||||
|
|
||||||
const rewindForward = () => { |
|
||||||
const chapter = getActiveChapter() |
|
||||||
const newProgress = playedProgress + REWIND_SECONDS * 1000 |
|
||||||
if (newProgress <= chapter.duration) { |
|
||||||
setPlayerTime(chapter.startOffsetMs + newProgress) |
|
||||||
} else if (isLastChapterPlaying) { |
|
||||||
playNextChapter() |
|
||||||
} else { |
|
||||||
const nextChapter = getActiveChapter(activeChapterIndex + 1) |
|
||||||
const fromMs = newProgress - chapter.duration |
|
||||||
playNextChapter(fromMs, nextChapter.startOffsetMs) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const rewindBackward = () => { |
|
||||||
const chapter = getActiveChapter() |
|
||||||
const newProgress = playedProgress - REWIND_SECONDS * 1000 |
|
||||||
if (newProgress >= 0) { |
|
||||||
setPlayerTime(chapter.startOffsetMs + newProgress) |
|
||||||
} else if (isFirstChapterPlaying) { |
|
||||||
setPlayerTime(chapter.startOffsetMs) |
|
||||||
} else { |
|
||||||
const prevChapter = getActiveChapter(activeChapterIndex - 1) |
|
||||||
const fromMs = prevChapter.duration + newProgress |
|
||||||
playPrevChapter(fromMs, prevChapter.startOffsetMs) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const onProgressChange = useProgressChangeHandler({ |
|
||||||
chapters, |
|
||||||
duration, |
|
||||||
setPlayerState, |
|
||||||
}) |
|
||||||
|
|
||||||
const { |
|
||||||
isFullscreen, |
|
||||||
onFullscreenClick, |
|
||||||
wrapperRef, |
|
||||||
} = useFullscreen(videoRef) |
|
||||||
|
|
||||||
const getChapterUrl = useCallback((index: number, quality: string = selectedQuality) => ( |
|
||||||
getActiveChapter(index)?.urls[quality] |
|
||||||
), [selectedQuality, getActiveChapter]) |
|
||||||
|
|
||||||
const onQualitySelect = (quality: string) => { |
|
||||||
setPlayerState((state) => ({ |
|
||||||
seek: { |
|
||||||
...state.seek, |
|
||||||
[state.activePlayer]: videoRef.current?.currentTime ?? 0, |
|
||||||
}, |
|
||||||
})) |
|
||||||
setSelectedQuality(quality) |
|
||||||
} |
|
||||||
|
|
||||||
const onPlayerClick = (e: MouseEvent<HTMLDivElement>) => { |
|
||||||
if (e.target === videoRef.current) { |
|
||||||
togglePlaying() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const onLoadedProgress = (loadedMs: number) => { |
|
||||||
const chapter = getActiveChapter() |
|
||||||
const value = loadedMs - chapter.startOffsetMs |
|
||||||
|
|
||||||
setPlayerState({ loadedProgress: value }) |
|
||||||
} |
|
||||||
|
|
||||||
const onPlayedProgress = (playedMs: number) => { |
|
||||||
const chapter = getActiveChapter() |
|
||||||
const value = Math.max(playedMs - chapter.startOffsetMs, 0) |
|
||||||
|
|
||||||
timeForStatistics.current = (value + chapter.startMs) / 1000 |
|
||||||
|
|
||||||
setPlayerState({ playedProgress: value }) |
|
||||||
setPlayingProgress(Math.floor(value / 1000)) |
|
||||||
|
|
||||||
if (chapter.isFullMatchChapter) { |
|
||||||
setPausedData({ |
|
||||||
activeChapterIndex, |
|
||||||
activePlayer, |
|
||||||
playedProgress: value, |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const backToPausedTime = useCallback(() => { |
|
||||||
if (selectedPlaylist?.id !== FULL_GAME_KEY) { |
|
||||||
// @ts-expect-error
|
|
||||||
handlePlaylistClick(matchPlaylists.match[0]) |
|
||||||
} |
|
||||||
|
|
||||||
setTimeout(() => { |
|
||||||
setPlayerState((state) => ({ |
|
||||||
activeChapterIndex: pausedData.activeChapterIndex, |
|
||||||
playedProgress: pausedData.playedProgress, |
|
||||||
seek: { |
|
||||||
...state.seek, |
|
||||||
[pausedData.activePlayer]: pausedData.playedProgress / 1000, |
|
||||||
}, |
|
||||||
})) |
|
||||||
}, 0) |
|
||||||
}, [ |
|
||||||
selectedPlaylist?.id, |
|
||||||
pausedData, |
|
||||||
handlePlaylistClick, |
|
||||||
matchPlaylists.match, |
|
||||||
setPlayerState, |
|
||||||
]) |
|
||||||
|
|
||||||
const onEnded = () => { |
|
||||||
playNextChapter() |
|
||||||
} |
|
||||||
const onPause = () => { |
|
||||||
setPlayerState({ playing: false }) |
|
||||||
} |
|
||||||
|
|
||||||
const restartVideo = () => { |
|
||||||
// @ts-expect-error
|
|
||||||
handlePlaylistClick(matchPlaylists.match[0]) |
|
||||||
} |
|
||||||
|
|
||||||
const stopPlayingEpisodes = () => { |
|
||||||
disablePlayingEpisodes() |
|
||||||
restartVideo() |
|
||||||
setTimeout(() => { |
|
||||||
setPlayerState((state) => ({ |
|
||||||
activeChapterIndex: pausedData.activeChapterIndex, |
|
||||||
playedProgress: pausedData.playedProgress, |
|
||||||
seek: { |
|
||||||
...state.seek, |
|
||||||
[pausedData.activePlayer]: pausedData.playedProgress / 1000, |
|
||||||
}, |
|
||||||
})) |
|
||||||
}, 1000) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
onPlayingChange(playing) |
|
||||||
}, [playing, onPlayingChange]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setPlayerState({ ...initialState }) |
|
||||||
}, [profileId, setPlayerState]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setCircleAnimation((state) => ({ |
|
||||||
...state, |
|
||||||
playedProgress, |
|
||||||
playing, |
|
||||||
ready, |
|
||||||
})) |
|
||||||
}, [ |
|
||||||
playedProgress, |
|
||||||
playing, |
|
||||||
ready, |
|
||||||
setCircleAnimation, |
|
||||||
]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
setPlayerState((state) => ({ |
|
||||||
...initialState, |
|
||||||
activePlayer: getNextPlayer(state.activePlayer), |
|
||||||
playing: true, |
|
||||||
})) |
|
||||||
}, [chapters, setPlayerState]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const { duration: chapterDuration } = getActiveChapter() |
|
||||||
if (playedProgress >= chapterDuration && !seeking && isPlayFilterEpisodes) { |
|
||||||
setPlayerState({ playedProgress: 0 }) |
|
||||||
playNextEpisode() |
|
||||||
} |
|
||||||
if (playedProgress >= chapterDuration && !seeking && !isPlayFilterEpisodes) { |
|
||||||
if (isLastChapterPlaying) { |
|
||||||
backToPausedTime() |
|
||||||
} else { |
|
||||||
playNextChapter() |
|
||||||
} |
|
||||||
} |
|
||||||
}, [ |
|
||||||
isPlayFilterEpisodes, |
|
||||||
playNextEpisode, |
|
||||||
getActiveChapter, |
|
||||||
playedProgress, |
|
||||||
seeking, |
|
||||||
playNextChapter, |
|
||||||
setPlayerState, |
|
||||||
isLastChapterPlaying, |
|
||||||
backToPausedTime, |
|
||||||
]) |
|
||||||
|
|
||||||
useEventListener({ |
|
||||||
callback: (e: KeyboardEvent) => { |
|
||||||
if (isOpen) return |
|
||||||
if (e.code === KEYBOARD_KEYS.ArrowLeft) rewindBackward() |
|
||||||
else if (e.code === KEYBOARD_KEYS.ArrowRight) rewindForward() |
|
||||||
}, |
|
||||||
event: 'keydown', |
|
||||||
}) |
|
||||||
|
|
||||||
const { isOnline } = useNoNetworkPopupStore() |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!isOnline) { |
|
||||||
stopPlaying() |
|
||||||
} |
|
||||||
}, [ |
|
||||||
isOnline, |
|
||||||
stopPlaying, |
|
||||||
]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (ready && videoRef && !isPlayingEpisode) { |
|
||||||
videoRef.current?.scrollIntoView({ |
|
||||||
behavior: 'smooth', |
|
||||||
block: 'start', |
|
||||||
}) |
|
||||||
} |
|
||||||
}, [ready, videoRef, isPlayingEpisode]) |
|
||||||
|
|
||||||
// ведем статистику просмотра матча
|
|
||||||
const { start: startCollectingStats, stop: stopCollectingStats } = useInterval({ |
|
||||||
callback: () => { |
|
||||||
if (timeForStatistics.current !== 0) { |
|
||||||
saveMatchStats({ |
|
||||||
matchId: profileId, |
|
||||||
matchSecond: timeForStatistics.current, |
|
||||||
sportType, |
|
||||||
}) |
|
||||||
} |
|
||||||
}, |
|
||||||
intervalDuration: VIEW_INTERVAL_MS, |
|
||||||
startImmediate: false, |
|
||||||
}) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (playing) { |
|
||||||
startCollectingStats() |
|
||||||
} else { |
|
||||||
stopCollectingStats() |
|
||||||
} |
|
||||||
}, [ |
|
||||||
playing, |
|
||||||
startCollectingStats, |
|
||||||
stopCollectingStats, |
|
||||||
profileId, |
|
||||||
]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
const splitEpisodeDuration = (n: number, m: number) => { |
|
||||||
const result: Array<[number, number]> = [] |
|
||||||
|
|
||||||
for (let i = 0; i < n; i += m) { |
|
||||||
const start = i |
|
||||||
const end = Math.min(i + m, n) |
|
||||||
result.push([start, end]) |
|
||||||
} |
|
||||||
|
|
||||||
return result |
|
||||||
} |
|
||||||
|
|
||||||
const getCurrentPlayingOrder = () => { |
|
||||||
const { count, duration: dur } = getActiveChapter() |
|
||||||
|
|
||||||
const arr = splitEpisodeDuration(dur, dur / count!) |
|
||||||
|
|
||||||
const index = findIndex(arr, (elem) => inRange( |
|
||||||
playingProgress * 1000, |
|
||||||
elem[0], |
|
||||||
elem[1] + 1, |
|
||||||
)) |
|
||||||
|
|
||||||
if (index !== -1 && ordersObj.current[playingOrder] !== index) { |
|
||||||
ordersObj.current = { |
|
||||||
...ordersObj.current, |
|
||||||
[playingOrder]: index, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return playingOrder + sum(values(ordersObj.current)) |
|
||||||
} |
|
||||||
|
|
||||||
setCurrentPlayingOrder(getCurrentPlayingOrder()) |
|
||||||
}, [getActiveChapter, isPlayingEpisode, playingOrder, playingProgress]) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!isPlayingEpisode) { |
|
||||||
ordersObj.current = {} |
|
||||||
} |
|
||||||
}, [isPlayingEpisode]) |
|
||||||
|
|
||||||
return { |
|
||||||
activeChapterIndex, |
|
||||||
activePlayer, |
|
||||||
activeSrc: getChapterUrl(activeChapterIndex), |
|
||||||
allPlayedProgress: playedProgress + getActiveChapter().startMs, |
|
||||||
chapters, |
|
||||||
currentPlayingOrder, |
|
||||||
duration, |
|
||||||
isFirstChapterPlaying, |
|
||||||
isFullscreen, |
|
||||||
isLastChapterPlaying, |
|
||||||
loadedProgress, |
|
||||||
nextSrc: getChapterUrl((activeChapterIndex + 1) % numberOfChapters), |
|
||||||
numberOfChapters, |
|
||||||
onEnded, |
|
||||||
onError: handleError, |
|
||||||
onFullscreenClick, |
|
||||||
onLoadedProgress, |
|
||||||
onPause, |
|
||||||
onPlayedProgress, |
|
||||||
onPlayerClick, |
|
||||||
onProgressChange, |
|
||||||
onQualitySelect, |
|
||||||
onReady, |
|
||||||
playNextChapter, |
|
||||||
playPrevChapter, |
|
||||||
playedProgress, |
|
||||||
playing, |
|
||||||
ready, |
|
||||||
rewindBackward, |
|
||||||
rewindForward, |
|
||||||
seek, |
|
||||||
selectedQuality, |
|
||||||
stopPlayingEpisodes, |
|
||||||
togglePlaying, |
|
||||||
video1Ref, |
|
||||||
video2Ref, |
|
||||||
videoQualities, |
|
||||||
wrapperRef, |
|
||||||
...useControlsVisibility(isFullscreen, playing), |
|
||||||
...useVolume(), |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,102 +0,0 @@ |
|||||||
import { useCallback } from 'react' |
|
||||||
|
|
||||||
import isUndefined from 'lodash/isUndefined' |
|
||||||
|
|
||||||
import type { SetPartialState } from 'hooks' |
|
||||||
|
|
||||||
import type { PlayerState } from '.' |
|
||||||
import { getNextPlayer } from '../helpers' |
|
||||||
|
|
||||||
export const usePlayingHandlers = ( |
|
||||||
setPlayerState: SetPartialState<PlayerState>, |
|
||||||
numberOfChapters: number, |
|
||||||
) => { |
|
||||||
const onReady = useCallback(() => { |
|
||||||
setPlayerState((state) => ( |
|
||||||
state.ready |
|
||||||
? state |
|
||||||
: { playing: true, ready: true } |
|
||||||
)) |
|
||||||
}, [setPlayerState]) |
|
||||||
|
|
||||||
const togglePlaying = useCallback(() => { |
|
||||||
setPlayerState((state) => ( |
|
||||||
state.ready |
|
||||||
? { playing: !state.playing } |
|
||||||
: state |
|
||||||
)) |
|
||||||
}, [setPlayerState]) |
|
||||||
|
|
||||||
const stopPlaying = useCallback(() => { |
|
||||||
setPlayerState({ playing: false }) |
|
||||||
}, [setPlayerState]) |
|
||||||
|
|
||||||
const startPlaying = useCallback(() => { |
|
||||||
setPlayerState((state) => ( |
|
||||||
state.ready |
|
||||||
? { playing: true } |
|
||||||
: state |
|
||||||
)) |
|
||||||
}, [setPlayerState]) |
|
||||||
|
|
||||||
const playNextChapter = useCallback((fromMs?: number, startOffsetMs?: number) => { |
|
||||||
setPlayerState((state) => { |
|
||||||
if (!state.ready) return state |
|
||||||
|
|
||||||
const isLastChapter = state.activeChapterIndex + 1 === numberOfChapters |
|
||||||
if (isLastChapter || isUndefined(fromMs) || isUndefined(startOffsetMs)) { |
|
||||||
return { |
|
||||||
activeChapterIndex: isLastChapter ? 0 : state.activeChapterIndex + 1, |
|
||||||
activePlayer: getNextPlayer(state.activePlayer), |
|
||||||
loadedProgress: 0, |
|
||||||
playedProgress: 0, |
|
||||||
playing: isLastChapter ? false : state.playing, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
activeChapterIndex: state.activeChapterIndex + 1, |
|
||||||
loadedProgress: 0, |
|
||||||
playedProgress: fromMs, |
|
||||||
playing: state.playing, |
|
||||||
seek: { |
|
||||||
...state.seek, |
|
||||||
[state.activePlayer]: (startOffsetMs + fromMs) / 1000, |
|
||||||
}, |
|
||||||
} |
|
||||||
}) |
|
||||||
}, [numberOfChapters, setPlayerState]) |
|
||||||
|
|
||||||
const playPrevChapter = useCallback((fromMs?: number, startOffsetMs?: number) => { |
|
||||||
setPlayerState((state) => { |
|
||||||
if (!state.ready || state.activeChapterIndex === 0) return state |
|
||||||
|
|
||||||
if (isUndefined(fromMs) || isUndefined(startOffsetMs)) { |
|
||||||
return { |
|
||||||
activeChapterIndex: state.activeChapterIndex - 1, |
|
||||||
loadedProgress: 0, |
|
||||||
playedProgress: 0, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return { |
|
||||||
activeChapterIndex: state.activeChapterIndex - 1, |
|
||||||
loadedProgress: 0, |
|
||||||
playedProgress: fromMs, |
|
||||||
seek: { |
|
||||||
...state.seek, |
|
||||||
[state.activePlayer]: (startOffsetMs + fromMs) / 1000, |
|
||||||
}, |
|
||||||
} |
|
||||||
}) |
|
||||||
}, [setPlayerState]) |
|
||||||
|
|
||||||
return { |
|
||||||
onReady, |
|
||||||
playNextChapter, |
|
||||||
playPrevChapter, |
|
||||||
startPlaying, |
|
||||||
stopPlaying, |
|
||||||
togglePlaying, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,51 +0,0 @@ |
|||||||
import { useCallback } from 'react' |
|
||||||
|
|
||||||
import type { SetPartialState } from 'hooks' |
|
||||||
|
|
||||||
import type { Chapters } from '../types' |
|
||||||
import type { PlayerState } from '.' |
|
||||||
import { findChapterByProgress } from '../helpers' |
|
||||||
|
|
||||||
type Args = { |
|
||||||
chapters: Chapters, |
|
||||||
duration: number, |
|
||||||
setPlayerState: SetPartialState<PlayerState>, |
|
||||||
} |
|
||||||
|
|
||||||
export const useProgressChangeHandler = ({ |
|
||||||
chapters, |
|
||||||
duration, |
|
||||||
setPlayerState, |
|
||||||
}: Args) => { |
|
||||||
const onProgressChange = useCallback((progress: number, seeking: boolean) => { |
|
||||||
setPlayerState((state) => { |
|
||||||
// значение новой позиции ползунка в миллисекундах
|
|
||||||
const progressMs = progress * duration |
|
||||||
const chapterIndex = findChapterByProgress(chapters, progressMs) |
|
||||||
const chapter = chapters[chapterIndex] |
|
||||||
const isProgressOnDifferentChapter = ( |
|
||||||
chapterIndex !== -1 |
|
||||||
&& chapterIndex !== state.activeChapterIndex |
|
||||||
) |
|
||||||
const nextChapter = isProgressOnDifferentChapter |
|
||||||
? chapterIndex |
|
||||||
: state.activeChapterIndex |
|
||||||
|
|
||||||
// отнимаем начало главы на котором остановились от общего прогресса
|
|
||||||
// чтобы получить прогресс текущей главы
|
|
||||||
const chapterProgressMs = (progressMs - chapter.startMs) |
|
||||||
const seekMs = chapterProgressMs + chapter.startOffsetMs |
|
||||||
return { |
|
||||||
activeChapterIndex: nextChapter, |
|
||||||
playedProgress: chapterProgressMs, |
|
||||||
seek: { |
|
||||||
...state.seek, |
|
||||||
[state.activePlayer]: seekMs / 1000, |
|
||||||
}, |
|
||||||
seeking, |
|
||||||
} |
|
||||||
}) |
|
||||||
}, [duration, chapters, setPlayerState]) |
|
||||||
|
|
||||||
return onProgressChange |
|
||||||
} |
|
||||||
@ -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,268 +0,0 @@ |
|||||||
import { Fragment } from 'react' |
|
||||||
|
|
||||||
import { Loader } from 'features/Loader' |
|
||||||
import { |
|
||||||
PlayerWrapper, |
|
||||||
CenterControls, |
|
||||||
PlayStop, |
|
||||||
LoaderWrapper, |
|
||||||
Backward, |
|
||||||
Forward, |
|
||||||
ControlsGradient, |
|
||||||
TeamsDetailsWrapper, |
|
||||||
EpisodeInfo, |
|
||||||
EpisodeInfoName, |
|
||||||
EpisodeInfoOrder, |
|
||||||
EpisodeInfoDivider, |
|
||||||
CloseButton, |
|
||||||
} from 'features/StreamPlayer/styled' |
|
||||||
import { VideoPlayer } from 'features/VideoPlayer' |
|
||||||
import { Controls } from 'features/StreamPlayer/components/Controls' |
|
||||||
import { Name } from 'features/Name' |
|
||||||
import RewindMobile from 'features/StreamPlayer/components/RewindMobile' |
|
||||||
import { FiltersPopup } from 'features/MatchSidePlaylists/components/FiltersPopup' |
|
||||||
import { useAuthStore } from 'features/AuthStore' |
|
||||||
import { useMatchPageStore } from 'features/MatchPage/store' |
|
||||||
|
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
import { AccessTimer } from 'components/AccessTimer' |
|
||||||
|
|
||||||
import type { Props } from './hooks' |
|
||||||
import { useMultiSourcePlayer } from './hooks' |
|
||||||
import { Players } from './types' |
|
||||||
import { REWIND_SECONDS } from './config' |
|
||||||
|
|
||||||
export const MultiSourcePlayer = (props: Props) => { |
|
||||||
const { |
|
||||||
access, |
|
||||||
isOpenPopup, |
|
||||||
profile, |
|
||||||
} = props |
|
||||||
|
|
||||||
const { |
|
||||||
activeChapterIndex, |
|
||||||
activePlayer, |
|
||||||
activeSrc, |
|
||||||
allPlayedProgress, |
|
||||||
centerControlsVisible, |
|
||||||
chapters, |
|
||||||
currentPlayingOrder, |
|
||||||
duration, |
|
||||||
hideCenterControls, |
|
||||||
isFirstChapterPlaying, |
|
||||||
isFullscreen, |
|
||||||
isLastChapterPlaying, |
|
||||||
loadedProgress, |
|
||||||
mainControlsVisible, |
|
||||||
muted, |
|
||||||
nextSrc, |
|
||||||
numberOfChapters, |
|
||||||
onEnded, |
|
||||||
onError, |
|
||||||
onFullscreenClick, |
|
||||||
onLoadedProgress, |
|
||||||
onMouseEnter, |
|
||||||
onMouseLeave, |
|
||||||
onMouseMove, |
|
||||||
onPause, |
|
||||||
onPlayedProgress, |
|
||||||
onPlayerClick, |
|
||||||
onProgressChange, |
|
||||||
onQualitySelect, |
|
||||||
onReady, |
|
||||||
onTouchEnd, |
|
||||||
onTouchStart, |
|
||||||
onVolumeChange, |
|
||||||
onVolumeClick, |
|
||||||
playedProgress, |
|
||||||
playing, |
|
||||||
playNextChapter, |
|
||||||
playPrevChapter, |
|
||||||
ready, |
|
||||||
rewindBackward, |
|
||||||
rewindForward, |
|
||||||
seek, |
|
||||||
selectedQuality, |
|
||||||
showCenterControls, |
|
||||||
stopPlayingEpisodes, |
|
||||||
togglePlaying, |
|
||||||
video1Ref, |
|
||||||
video2Ref, |
|
||||||
videoQualities, |
|
||||||
volume, |
|
||||||
volumeInPercent, |
|
||||||
wrapperRef, |
|
||||||
} = useMultiSourcePlayer(props) |
|
||||||
const { episodeInfo, isPlayingEpisode } = useMatchPageStore() |
|
||||||
|
|
||||||
const firstPlayerActive = activePlayer === Players.PLAYER1 |
|
||||||
const currentVideo = firstPlayerActive ? video1Ref : video2Ref |
|
||||||
const { user } = useAuthStore() |
|
||||||
|
|
||||||
return ( |
|
||||||
<PlayerWrapper |
|
||||||
ref={wrapperRef} |
|
||||||
playing={playing} |
|
||||||
onClick={isMobileDevice ? showCenterControls : onPlayerClick} |
|
||||||
onMouseMove={onMouseMove} |
|
||||||
onMouseEnter={onMouseEnter} |
|
||||||
onMouseLeave={onMouseLeave} |
|
||||||
onTouchStart={onTouchStart} |
|
||||||
onTouchEnd={onTouchEnd} |
|
||||||
> |
|
||||||
{isPlayingEpisode && ( |
|
||||||
<EpisodeInfo> |
|
||||||
<EpisodeInfoName> |
|
||||||
{isMobileDevice |
|
||||||
? ( |
|
||||||
<Fragment> |
|
||||||
{episodeInfo.playerOrTeamName} |
|
||||||
{episodeInfo.playerOrTeamName && <br />} |
|
||||||
{episodeInfo.paramName} |
|
||||||
</Fragment> |
|
||||||
) |
|
||||||
: `${episodeInfo.playerOrTeamName || ''}${episodeInfo.paramName && episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName || ''}`} |
|
||||||
</EpisodeInfoName> |
|
||||||
{currentPlayingOrder > 0 && ( |
|
||||||
<EpisodeInfoOrder> |
|
||||||
{currentPlayingOrder} |
|
||||||
<EpisodeInfoDivider>/</EpisodeInfoDivider> |
|
||||||
{episodeInfo.episodesCount} |
|
||||||
</EpisodeInfoOrder> |
|
||||||
)} |
|
||||||
<CloseButton onClick={stopPlayingEpisodes} /> |
|
||||||
</EpisodeInfo> |
|
||||||
)} |
|
||||||
{ |
|
||||||
!ready && ( |
|
||||||
<LoaderWrapper buffering> |
|
||||||
<Loader color='#515151' /> |
|
||||||
</LoaderWrapper> |
|
||||||
) |
|
||||||
} |
|
||||||
{isOpenPopup && <FiltersPopup />} |
|
||||||
<VideoPlayer |
|
||||||
src={firstPlayerActive ? activeSrc : nextSrc} |
|
||||||
playing={firstPlayerActive ? playing : false} |
|
||||||
hidden={!firstPlayerActive} |
|
||||||
muted={muted} |
|
||||||
volume={volume} |
|
||||||
ref={video1Ref} |
|
||||||
seek={seek[Players.PLAYER1]} |
|
||||||
isFullscreen={isFullscreen} |
|
||||||
onLoadedProgress={firstPlayerActive ? onLoadedProgress : undefined} |
|
||||||
onPlayedProgress={firstPlayerActive ? onPlayedProgress : undefined} |
|
||||||
onEnded={onEnded} |
|
||||||
onPause={firstPlayerActive ? onPause : undefined} |
|
||||||
onError={onError} |
|
||||||
onReady={onReady} |
|
||||||
/> |
|
||||||
<VideoPlayer |
|
||||||
src={!firstPlayerActive ? activeSrc : nextSrc} |
|
||||||
playing={!firstPlayerActive ? playing : false} |
|
||||||
hidden={firstPlayerActive} |
|
||||||
muted={muted} |
|
||||||
volume={volume} |
|
||||||
ref={video2Ref} |
|
||||||
seek={seek[Players.PLAYER2]} |
|
||||||
isFullscreen={isFullscreen} |
|
||||||
onLoadedProgress={!firstPlayerActive ? onLoadedProgress : undefined} |
|
||||||
onPlayedProgress={!firstPlayerActive ? onPlayedProgress : undefined} |
|
||||||
onEnded={onEnded} |
|
||||||
onPause={!firstPlayerActive ? onPause : undefined} |
|
||||||
onError={onError} |
|
||||||
onReady={onReady} |
|
||||||
/> |
|
||||||
|
|
||||||
{isMobileDevice && isFullscreen && mainControlsVisible && profile && ( |
|
||||||
<TeamsDetailsWrapper> |
|
||||||
<Name nameObj={profile.team1} /> |
|
||||||
{` ${profile.team1.score}-${profile.team2.score} `} |
|
||||||
<Name nameObj={profile.team2} /> |
|
||||||
</TeamsDetailsWrapper> |
|
||||||
)} |
|
||||||
|
|
||||||
{ready && ( |
|
||||||
<CenterControls |
|
||||||
controlsVisible={centerControlsVisible} |
|
||||||
playing={!currentVideo.current?.paused} |
|
||||||
> |
|
||||||
{isMobileDevice && playing ? ( |
|
||||||
<RewindMobile isBackward rewindCallback={rewindBackward} /> |
|
||||||
) : ( |
|
||||||
<Backward |
|
||||||
size={isMobileDevice ? 'sm' : 'lg'} |
|
||||||
onClick={rewindBackward} |
|
||||||
> |
|
||||||
{REWIND_SECONDS} |
|
||||||
</Backward> |
|
||||||
)} |
|
||||||
<PlayStop |
|
||||||
size='lg' |
|
||||||
marginRight={0} |
|
||||||
playing={playing} |
|
||||||
onClickCapture={() => { |
|
||||||
togglePlaying() |
|
||||||
hideCenterControls() |
|
||||||
}} |
|
||||||
/> |
|
||||||
{isMobileDevice && playing |
|
||||||
? <RewindMobile isForward rewindCallback={rewindForward} /> |
|
||||||
: ( |
|
||||||
<Forward |
|
||||||
size={isMobileDevice ? 'sm' : 'lg'} |
|
||||||
onClick={rewindForward} |
|
||||||
> |
|
||||||
{REWIND_SECONDS} |
|
||||||
</Forward> |
|
||||||
)} |
|
||||||
</CenterControls> |
|
||||||
)} |
|
||||||
<Controls |
|
||||||
activeChapterIndex={activeChapterIndex} |
|
||||||
activePlayer={activePlayer} |
|
||||||
allPlayedProgress={allPlayedProgress} |
|
||||||
multiSourceChapters={chapters} |
|
||||||
controlsVisible={mainControlsVisible} |
|
||||||
duration={duration} |
|
||||||
isFirstChapterPlaying={isFirstChapterPlaying} |
|
||||||
isFullscreen={isFullscreen} |
|
||||||
isLastChapterPlaying={isLastChapterPlaying} |
|
||||||
loadedProgress={loadedProgress} |
|
||||||
muted={muted} |
|
||||||
numberOfChapters={numberOfChapters} |
|
||||||
onFullscreenClick={onFullscreenClick} |
|
||||||
onProgressChange={onProgressChange} |
|
||||||
onQualitySelect={onQualitySelect} |
|
||||||
onTouchEnd={onTouchEnd} |
|
||||||
onTouchStart={onTouchStart} |
|
||||||
onVolumeChange={onVolumeChange} |
|
||||||
onVolumeClick={onVolumeClick} |
|
||||||
playNextChapter={playNextChapter} |
|
||||||
playPrevChapter={playPrevChapter} |
|
||||||
playedProgress={playedProgress} |
|
||||||
playing={playing} |
|
||||||
rewindBackward={rewindBackward} |
|
||||||
rewindForward={rewindForward} |
|
||||||
selectedQuality={selectedQuality} |
|
||||||
src={firstPlayerActive ? activeSrc : nextSrc} |
|
||||||
togglePlaying={togglePlaying} |
|
||||||
videoQualities={videoQualities} |
|
||||||
videoRef={currentVideo} |
|
||||||
volume={volume} |
|
||||||
volumeInPercent={volumeInPercent} |
|
||||||
/> |
|
||||||
<ControlsGradient isVisible={mainControlsVisible} /> |
|
||||||
{!user && ( |
|
||||||
<AccessTimer |
|
||||||
access={access} |
|
||||||
isFullscreen={isFullscreen} |
|
||||||
onFullscreenClick={onFullscreenClick} |
|
||||||
playing={ready && playing && !!playedProgress} |
|
||||||
videoRef={currentVideo} |
|
||||||
/> |
|
||||||
)} |
|
||||||
</PlayerWrapper> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,48 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
import { ButtonBase } from 'features/StreamPlayer/styled' |
|
||||||
|
|
||||||
export const ChaptersText = styled.span` |
|
||||||
margin: 0 14px; |
|
||||||
font-weight: 500; |
|
||||||
font-size: 16px; |
|
||||||
color: #fff; |
|
||||||
text-align: center; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
margin: 0 5px; |
|
||||||
font-size: 12px; |
|
||||||
width: 25%; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
type PrevProps = { |
|
||||||
disabled?: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export const Prev = styled(ButtonBase)<PrevProps>` |
|
||||||
width: 29px; |
|
||||||
height: 28px; |
|
||||||
background-image: url(/images/player-prev.svg); |
|
||||||
|
|
||||||
${({ disabled }) => ( |
|
||||||
disabled |
|
||||||
? 'opacity: 0.5;' |
|
||||||
: '' |
|
||||||
)} |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
` |
|
||||||
: ''}; |
|
||||||
` |
|
||||||
|
|
||||||
export const Next = styled(Prev)` |
|
||||||
margin-right: 10px; |
|
||||||
transform: rotate(180deg); |
|
||||||
` |
|
||||||
@ -1,20 +0,0 @@ |
|||||||
export type Urls = { [quality: string]: string } |
|
||||||
|
|
||||||
export type Chapter = { |
|
||||||
count?: number, |
|
||||||
duration: number, |
|
||||||
endMs: number, |
|
||||||
endOffsetMs: number, |
|
||||||
isFullMatchChapter?: boolean, |
|
||||||
period: number, |
|
||||||
startMs: number, |
|
||||||
startOffsetMs: number, |
|
||||||
urls: Urls, |
|
||||||
} |
|
||||||
|
|
||||||
export type Chapters = Array<Chapter> |
|
||||||
|
|
||||||
export enum Players { |
|
||||||
PLAYER1 = 0, |
|
||||||
PLAYER2 = 1, |
|
||||||
} |
|
||||||
@ -1,51 +0,0 @@ |
|||||||
import YouTube from 'react-youtube' |
|
||||||
|
|
||||||
import { useMatchPageStore } from 'features/MatchPage/store' |
|
||||||
import { FiltersPopup } from 'features/MatchSidePlaylists/components/FiltersPopup' |
|
||||||
|
|
||||||
import { PlayerWrapper } from '../../styled' |
|
||||||
import { useVideoPlayer, Props } from '../../hooks' |
|
||||||
|
|
||||||
export const YoutubePlayer = (props: Props) => { |
|
||||||
const { isOpenFiltersPopup, profile } = useMatchPageStore() |
|
||||||
|
|
||||||
const { |
|
||||||
onMouseMove, |
|
||||||
onPlayerClick, |
|
||||||
onTouchEnd, |
|
||||||
onTouchStart, |
|
||||||
playing, |
|
||||||
sizeOptions: { |
|
||||||
height, |
|
||||||
width, |
|
||||||
}, |
|
||||||
wrapperRef, |
|
||||||
} = useVideoPlayer(props) |
|
||||||
|
|
||||||
const youtube_link = profile?.youtube_link || '' |
|
||||||
const key = youtube_link.slice(32, youtube_link.length) |
|
||||||
|
|
||||||
return ( |
|
||||||
<PlayerWrapper |
|
||||||
ref={wrapperRef} |
|
||||||
playing={playing} |
|
||||||
onClick={onPlayerClick} |
|
||||||
onMouseMove={onMouseMove} |
|
||||||
onTouchStart={onTouchStart} |
|
||||||
onTouchEnd={onTouchEnd} |
|
||||||
> |
|
||||||
{isOpenFiltersPopup && <FiltersPopup />} |
|
||||||
<YouTube |
|
||||||
videoId={key} |
|
||||||
opts={{ |
|
||||||
height: String(height), |
|
||||||
playerVars: { |
|
||||||
autoplay: 1, |
|
||||||
modestbranding: 1, |
|
||||||
}, |
|
||||||
width: String(width), |
|
||||||
}} |
|
||||||
/> |
|
||||||
</PlayerWrapper> |
|
||||||
) |
|
||||||
} |
|
||||||
Loading…
Reference in new issue