Ott 493 player refactoring (#192)
* Ott 493 player refactoring part 1 (#190) * chore(#493): turned off react prop types lint rule * refactor(#493): replaced react-player with own video wrapper compoonent * chore(#493): removed react-player and reach combobox * Revert "chore(#493): turned off react prop types lint rule" This reverts commit e449f859fa900aa24fafe2e28acf218852f7b1ad. * fix(#493): fix props type * Ott 493 player refactoring part 2 (#191) * refactor(#493): used VideoPlayer in MultiSource player * fix(#493): fixed selected quality restoringkeep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan
5 years ago
committed by
GitHub
parent
b61efae298
commit
9cc373a8d2
@ -1,68 +0,0 @@ |
||||
import type { RefObject } from 'react' |
||||
|
||||
import size from 'lodash/size' |
||||
|
||||
import { useEventListener } from 'hooks' |
||||
|
||||
/** |
||||
* Возвращает значение отрезка буфера которое ближе |
||||
* к проигрываемому времени |
||||
*/ |
||||
const getLoadedSeconds = (video: HTMLVideoElement | null) => { |
||||
const bufferLength = size(video?.buffered) |
||||
if (!video || bufferLength === 0) return 0 |
||||
|
||||
for (let i = 0; i < bufferLength; i++) { |
||||
const bufferPosition = bufferLength - 1 - i |
||||
if (video.buffered.start(bufferPosition) < video.currentTime) { |
||||
return video.buffered.end(bufferPosition) |
||||
} |
||||
} |
||||
return 0 |
||||
} |
||||
|
||||
type Args = { |
||||
onChange: (millis: number) => void, |
||||
videoRef: RefObject<HTMLVideoElement>, |
||||
} |
||||
|
||||
/** |
||||
* Подписывается на прогресс буферизации и вызывает колбек |
||||
* со значением прогресса в милисекундах |
||||
*/ |
||||
export const useLoadedEvent = ({ |
||||
onChange, |
||||
videoRef, |
||||
}: Args) => { |
||||
const listenLoadedProgress = () => { |
||||
const loadedSeconds = getLoadedSeconds(videoRef.current) |
||||
onChange(loadedSeconds * 1000) |
||||
} |
||||
|
||||
useEventListener({ |
||||
callback: listenLoadedProgress, |
||||
event: 'progress', |
||||
target: videoRef, |
||||
}) |
||||
} |
||||
|
||||
/** |
||||
* Подписывается на прогресс проигывания и вызывает колбек |
||||
* со значением прогресса в милисекундах |
||||
*/ |
||||
export const usePlayedEvent = ({ |
||||
onChange, |
||||
videoRef, |
||||
}: Args) => { |
||||
const listenPlayedProgresses = () => { |
||||
const video = videoRef.current |
||||
if (!video) return |
||||
onChange(video.currentTime * 1000) |
||||
} |
||||
|
||||
useEventListener({ |
||||
callback: listenPlayedProgresses, |
||||
event: 'timeupdate', |
||||
target: videoRef, |
||||
}) |
||||
} |
||||
@ -1,47 +0,0 @@ |
||||
import type { RefObject } from 'react' |
||||
import { useEffect, useRef } from 'react' |
||||
|
||||
import isNumber from 'lodash/isNumber' |
||||
|
||||
import { useLocalStore } from 'hooks' |
||||
|
||||
const defaultVolume = 1 |
||||
|
||||
const useVolumeState = (videoRef: RefObject<HTMLVideoElement>) => { |
||||
const [volume, setVolume] = useLocalStore({ |
||||
defaultValue: defaultVolume, |
||||
key: 'player_volume', |
||||
validator: isNumber, |
||||
}) |
||||
|
||||
useEffect(() => { |
||||
if (videoRef.current) { |
||||
// eslint-disable-next-line no-param-reassign
|
||||
videoRef.current.volume = volume |
||||
} |
||||
}, [volume, videoRef]) |
||||
|
||||
return [volume, setVolume] as const |
||||
} |
||||
|
||||
export const useVolume = (videoRef: RefObject<HTMLVideoElement>) => { |
||||
const prevVolumeRef = useRef(defaultVolume) |
||||
const [volume, setVolume] = useVolumeState(videoRef) |
||||
|
||||
const onVolumeChange = (value: number) => { |
||||
setVolume(value) |
||||
} |
||||
|
||||
const onVolumeClick = () => { |
||||
setVolume(volume === 0 ? prevVolumeRef.current : 0) |
||||
prevVolumeRef.current = volume || defaultVolume |
||||
} |
||||
|
||||
return { |
||||
muted: volume === 0, |
||||
onVolumeChange, |
||||
onVolumeClick, |
||||
volume, |
||||
volumeInPercent: volume * 100, |
||||
} |
||||
} |
||||
@ -1,9 +0,0 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
export const Video = styled.video` |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
` |
||||
@ -0,0 +1,26 @@ |
||||
import { |
||||
useEffect, |
||||
useMemo, |
||||
useRef, |
||||
} from 'react' |
||||
import Hls from 'hls.js' |
||||
|
||||
import { streamConfig } from '../config' |
||||
|
||||
export const useHlsPlayer = (src: string) => { |
||||
const hls = useMemo(() => new Hls(streamConfig), []) |
||||
const videoRef = useRef<HTMLVideoElement>(null) |
||||
|
||||
useEffect(() => { |
||||
const video = videoRef.current |
||||
if (!video) return |
||||
|
||||
hls.loadSource(src) |
||||
hls.attachMedia(video) |
||||
}, [src, hls]) |
||||
|
||||
return { |
||||
hls, |
||||
videoRef, |
||||
} |
||||
} |
||||
@ -0,0 +1,114 @@ |
||||
import type { ForwardRefRenderFunction, SyntheticEvent } from 'react' |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
useRef, |
||||
} from 'react' |
||||
|
||||
import isUndefined from 'lodash/isUndefined' |
||||
import isNumber from 'lodash/isNumber' |
||||
|
||||
import { useProgressChange } from './useProgressChange' |
||||
|
||||
type Ref = Parameters<ForwardRefRenderFunction<HTMLVideoElement>>[1] |
||||
|
||||
export type Props = { |
||||
className?: string, |
||||
height?: string, |
||||
muted?: boolean, |
||||
onDurationChange?: (durationMs: number) => void, |
||||
onEnded?: (e: SyntheticEvent<HTMLVideoElement>) => void, |
||||
onError?: (e?: SyntheticEvent<HTMLVideoElement>) => void, |
||||
onLoadedProgress?: (loadedMs: number) => void, |
||||
onPlayedProgress?: (playedMs: number) => void, |
||||
onReady?: () => void, |
||||
playing?: boolean, |
||||
ref?: Ref, |
||||
seek?: number | null, |
||||
src: string, |
||||
volume?: number, |
||||
width?: string, |
||||
} |
||||
|
||||
const useVideoRef = (ref?: Ref) => { |
||||
const videoRef = useRef<HTMLVideoElement>(null) |
||||
if (ref && typeof ref === 'object') return ref |
||||
return videoRef |
||||
} |
||||
|
||||
export const useVideoPlayer = ({ |
||||
onDurationChange, |
||||
onError, |
||||
onLoadedProgress, |
||||
onPlayedProgress, |
||||
onReady, |
||||
playing, |
||||
ref, |
||||
seek = null, |
||||
src, |
||||
volume, |
||||
}: Props) => { |
||||
const [ready, setReady] = useState(false) |
||||
const videoRef = useVideoRef(ref) |
||||
|
||||
const handleReady = () => { |
||||
setReady(true) |
||||
onReady?.() |
||||
} |
||||
|
||||
const handleDurationChange = () => { |
||||
onDurationChange?.(videoRef.current?.duration || 0) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
const video = videoRef.current |
||||
if (!video) return |
||||
|
||||
video.src = src |
||||
video.load() |
||||
}, [src, videoRef]) |
||||
|
||||
useEffect(() => { |
||||
const video = videoRef.current |
||||
if (video && isNumber(seek)) { |
||||
video.currentTime = seek |
||||
} |
||||
}, [seek, videoRef]) |
||||
|
||||
useEffect(() => { |
||||
const video = videoRef.current |
||||
if (!video?.src || !ready || isUndefined(playing)) return |
||||
|
||||
if (playing) { |
||||
// автовоспроизведение со звуком иногда может не сработать
|
||||
// https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#new-behaviors
|
||||
video.play().catch(onError) |
||||
} else { |
||||
video.pause() |
||||
} |
||||
}, [ |
||||
ready, |
||||
playing, |
||||
src, |
||||
onError, |
||||
videoRef, |
||||
]) |
||||
|
||||
useEffect(() => { |
||||
const video = videoRef.current |
||||
if (video) { |
||||
video.volume = volume ?? 1 |
||||
} |
||||
}, [volume, videoRef]) |
||||
|
||||
return { |
||||
handleDurationChange, |
||||
handleReady, |
||||
videoRef, |
||||
...useProgressChange({ |
||||
onLoadedProgress, |
||||
onPlayedProgress, |
||||
videoRef, |
||||
}), |
||||
} |
||||
} |
||||
@ -0,0 +1,48 @@ |
||||
import { RefObject } from 'react' |
||||
|
||||
import size from 'lodash/size' |
||||
|
||||
/** |
||||
* Возвращает значение отрезка буфера которое ближе |
||||
* к проигрываемому времени |
||||
*/ |
||||
const getLoadedSeconds = (video: HTMLVideoElement | null) => { |
||||
const bufferLength = size(video?.buffered) |
||||
if (!video || bufferLength === 0) return 0 |
||||
|
||||
for (let i = 0; i < bufferLength; i++) { |
||||
const bufferPosition = bufferLength - 1 - i |
||||
if (video.buffered.start(bufferPosition) < video.currentTime) { |
||||
return video.buffered.end(bufferPosition) |
||||
} |
||||
} |
||||
return 0 |
||||
} |
||||
|
||||
type Args = { |
||||
onLoadedProgress?: (millis: number) => void, |
||||
onPlayedProgress?: (millis: number) => void, |
||||
videoRef: RefObject<HTMLVideoElement>, |
||||
} |
||||
|
||||
export const useProgressChange = ({ |
||||
onLoadedProgress, |
||||
onPlayedProgress, |
||||
videoRef, |
||||
}: Args) => { |
||||
const handleLoadedChange = () => { |
||||
const loadedSeconds = getLoadedSeconds(videoRef.current) |
||||
onLoadedProgress?.(loadedSeconds * 1000) |
||||
} |
||||
|
||||
const handlePlayedChange = () => { |
||||
const video = videoRef.current |
||||
if (!video) return |
||||
onPlayedProgress?.(video.currentTime * 1000) |
||||
} |
||||
|
||||
return { |
||||
handleLoadedChange, |
||||
handlePlayedChange, |
||||
} |
||||
} |
||||
@ -0,0 +1,40 @@ |
||||
import React, { forwardRef } from 'react' |
||||
|
||||
import type { Props } from './hooks' |
||||
import { useVideoPlayer } from './hooks' |
||||
import { Video } from './styled' |
||||
|
||||
export const VideoPlayer = forwardRef<HTMLVideoElement, Props>((props: Props, ref) => { |
||||
const { |
||||
className, |
||||
height, |
||||
onEnded, |
||||
onError, |
||||
src, |
||||
volume, |
||||
width, |
||||
} = props |
||||
const { |
||||
handleDurationChange, |
||||
handleLoadedChange, |
||||
handlePlayedChange, |
||||
handleReady, |
||||
videoRef, |
||||
} = useVideoPlayer({ ...props, ref }) |
||||
return ( |
||||
<Video |
||||
className={className} |
||||
width={width} |
||||
height={height} |
||||
ref={videoRef} |
||||
src={src} |
||||
muted={volume === 0} |
||||
onCanPlay={handleReady} |
||||
onTimeUpdate={handlePlayedChange} |
||||
onProgress={handleLoadedChange} |
||||
onEnded={onEnded} |
||||
onDurationChange={handleDurationChange} |
||||
onError={onError} |
||||
/> |
||||
) |
||||
}) |
||||
@ -0,0 +1,9 @@ |
||||
import styled from 'styled-components/macro' |
||||
|
||||
export const Video = styled.video` |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
` |
||||
Loading…
Reference in new issue