From 7e0f83ad2a09db272a31897a45dce8557caa1f10 Mon Sep 17 00:00:00 2001 From: Mirlan Date: Wed, 24 Nov 2021 12:43:55 +0600 Subject: [PATCH] Ott 1701 part 4 (#573) * refactor(1701): removed MultiSourcePlayer * refactor(1701): duration fix on live stream --- src/features/MatchPage/store/index.tsx | 4 +- .../store/hooks/usePlayerClickHandler.tsx | 25 ---- .../components/ProgressBar/stories.tsx | 126 ------------------ src/features/MultiSourcePlayer/config.tsx | 3 - .../hooks/useVideoQuality.tsx | 38 ------ .../helpers/calculateChapterStyles/index.tsx | 4 +- src/features/StreamPlayer/hooks/index.tsx | 14 ++ .../StreamPlayer/hooks/usePlayingHandlers.tsx | 6 +- src/requests/getFullMatchDuration.tsx | 24 ---- src/requests/getVideos.tsx | 40 ------ 10 files changed, 24 insertions(+), 260 deletions(-) delete mode 100644 src/features/MatchPopup/store/hooks/usePlayerClickHandler.tsx delete mode 100644 src/features/MultiSourcePlayer/components/ProgressBar/stories.tsx delete mode 100644 src/features/MultiSourcePlayer/config.tsx delete mode 100644 src/features/MultiSourcePlayer/hooks/useVideoQuality.tsx delete mode 100644 src/requests/getFullMatchDuration.tsx delete mode 100644 src/requests/getVideos.tsx diff --git a/src/features/MatchPage/store/index.tsx b/src/features/MatchPage/store/index.tsx index 2f5e34bd..778a5853 100644 --- a/src/features/MatchPage/store/index.tsx +++ b/src/features/MatchPage/store/index.tsx @@ -12,8 +12,8 @@ type Props = { children: ReactNode } const MatchPageContext = createContext({} as Context) export const MatchPageStore = ({ children }: Props) => { - const lexics = useMatchPage() - return {children} + const values = useMatchPage() + return {children} } export const useMatchPageStore = () => useContext(MatchPageContext) diff --git a/src/features/MatchPopup/store/hooks/usePlayerClickHandler.tsx b/src/features/MatchPopup/store/hooks/usePlayerClickHandler.tsx deleted file mode 100644 index 9538a0f3..00000000 --- a/src/features/MatchPopup/store/hooks/usePlayerClickHandler.tsx +++ /dev/null @@ -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() - const handlePlaylistClick = (playlist: PlaylistOption, e?: MouseEvent) => { - e?.stopPropagation() - if (playlist !== selectedPlaylist) { - setSelectedPlaylist(playlist) - } - } - - useEffect(() => { - setSelectedPlaylist(undefined) - }, [pathname]) - - return { - handlePlaylistClick, - selectedPlaylist, - } -} diff --git a/src/features/MultiSourcePlayer/components/ProgressBar/stories.tsx b/src/features/MultiSourcePlayer/components/ProgressBar/stories.tsx deleted file mode 100644 index 807640f6..00000000 --- a/src/features/MultiSourcePlayer/components/ProgressBar/stories.tsx +++ /dev/null @@ -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) => ( - - - - - {progressBarElement} - - - -) - -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( - , -) - -export const HalfLoaded = () => renderInControls( - , -) - -export const HalfPlayed = () => renderInControls( - , -) - -export const Loaded40AndPlayed20 = () => renderInControls( - , -) diff --git a/src/features/MultiSourcePlayer/config.tsx b/src/features/MultiSourcePlayer/config.tsx deleted file mode 100644 index 4602985b..00000000 --- a/src/features/MultiSourcePlayer/config.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export const REWIND_SECONDS = 5 - -export const HOUR_IN_MILLISECONDS = 60 * 60 * 1000 diff --git a/src/features/MultiSourcePlayer/hooks/useVideoQuality.tsx b/src/features/MultiSourcePlayer/hooks/useVideoQuality.tsx deleted file mode 100644 index 4c810ab0..00000000 --- a/src/features/MultiSourcePlayer/hooks/useVideoQuality.tsx +++ /dev/null @@ -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, - } -} diff --git a/src/features/StreamPlayer/components/ProgressBar/helpers/calculateChapterStyles/index.tsx b/src/features/StreamPlayer/components/ProgressBar/helpers/calculateChapterStyles/index.tsx index 9a257fb9..498aac56 100644 --- a/src/features/StreamPlayer/components/ProgressBar/helpers/calculateChapterStyles/index.tsx +++ b/src/features/StreamPlayer/components/ProgressBar/helpers/calculateChapterStyles/index.tsx @@ -49,7 +49,9 @@ export const calculateChapterStyles = ({ ...chapter, loaded: calculateChapterProgress(loadedProgress, chapter), played: calculateChapterProgress(playedProgress, chapter), - width: chapter.duration * 100 / videoDuration, + width: chapter.duration + ? chapter.duration * 100 / videoDuration + : 100, } return [ ...playedChapters, diff --git a/src/features/StreamPlayer/hooks/index.tsx b/src/features/StreamPlayer/hooks/index.tsx index 443889e8..f0cab226 100644 --- a/src/features/StreamPlayer/hooks/index.tsx +++ b/src/features/StreamPlayer/hooks/index.tsx @@ -7,10 +7,12 @@ import { import size from 'lodash/size' import isNumber from 'lodash/isNumber' +import isEmpty from 'lodash/isEmpty' import { isIOS } from 'config/userAgent' import { useObjectState } from 'hooks/useObjectState' +import { useEventListener } from 'hooks/useEventListener' import { useVolume } from 'features/VideoPlayer/hooks/useVolume' import { useNoNetworkPopupStore } from 'features/NoNetworkPopup' @@ -197,6 +199,14 @@ export const useVideoPlayer = ({ setPlayerState({ playedProgress: liveProgressMs, seek: liveProgressMs / 1000 }) }, [duration, setPlayerState]) + useEventListener({ + callback: (e: KeyboardEvent) => { + if (e.code === 'ArrowLeft') rewindBackward() + else if (e.code === 'ArrowRight') rewindForward() + }, + event: 'keydown', + }) + useEffect(() => { if (isNumber(seek)) { setPlayerState({ seek: undefined }) @@ -216,11 +226,15 @@ export const useVideoPlayer = ({ }, [chapters, setPlayerState]) useEffect(() => { + if (isLive || isEmpty(chapters)) return + const { duration: chapterDuration } = getActiveChapter() if (playedProgress >= chapterDuration && !seeking) { playNextChapter() } }, [ + isLive, + chapters, getActiveChapter, playedProgress, seeking, diff --git a/src/features/StreamPlayer/hooks/usePlayingHandlers.tsx b/src/features/StreamPlayer/hooks/usePlayingHandlers.tsx index b223fbf2..7d7c698f 100644 --- a/src/features/StreamPlayer/hooks/usePlayingHandlers.tsx +++ b/src/features/StreamPlayer/hooks/usePlayingHandlers.tsx @@ -15,7 +15,11 @@ export const usePlayingHandlers = ( setPlayerState((state) => ( state.ready ? state - : { playing: true, ready: true } + : { + buffering: false, + playing: true, + ready: true, + } )) }, [setPlayerState]) diff --git a/src/requests/getFullMatchDuration.tsx b/src/requests/getFullMatchDuration.tsx deleted file mode 100644 index dd9a1e90..00000000 --- a/src/requests/getFullMatchDuration.tsx +++ /dev/null @@ -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) => { - const videos = await getVideos(...args) - return calculateDuration(videos) -} diff --git a/src/requests/getVideos.tsx b/src/requests/getVideos.tsx deleted file mode 100644 index 4364de67..00000000 --- a/src/requests/getVideos.tsx +++ /dev/null @@ -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