Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 1x 5x 5x 5x 5x 5x 1x | import {createRef, forwardRef} from 'react'
import Hls from 'hls.js'
import PropTypes from 'prop-types'
import useInitHlsEffect from '../hooks/hls/useInitHlsEffect.js'
import useTimeLimitCheck from '../hooks/hls/useTimeLimitCheck.js'
import useImperativeApi from '../hooks/useImperativeApi.js'
import {BASE_CLASS, HLS_DEFAULT_TITLE} from '../settings/index.js'
const HLSPlayer = forwardRef(
(
{
autoPlay,
controls,
muted,
onLoadVideo,
playsInline,
hlsConfig,
timeLimit,
timeOffset,
playerRef = createRef(),
src,
title = HLS_DEFAULT_TITLE,
...props
},
forwardedRef
) => {
useInitHlsEffect({
autoPlay,
hlsConfig,
onLoadVideo,
playerRef,
src,
timeOffset
})
const {startTimeLimitInterval, stopTimeLimitInterval} = useTimeLimitCheck({
playerRef,
timeLimit,
timeOffset
})
useImperativeApi({
ref: forwardedRef,
getCurrentTime: () => Promise.resolve(playerRef.current.currentTime)
})
const nativePlayerProps = {
autoPlay,
src
}
return (
<div className={`${BASE_CLASS}-hlsPlayer`}>
<video
onPlaying={startTimeLimitInterval}
onPause={stopTimeLimitInterval}
playsInline={playsInline}
controls={controls}
muted={muted}
className={`${BASE_CLASS}-hlsPlayerVideo`}
title={title}
ref={playerRef}
{...(Hls.isSupported() === false ? nativePlayerProps : {})}
{...props}
/>
</div>
)
}
)
HLSPlayer.propTypes = {
autoPlay: PropTypes.bool,
controls: PropTypes.bool,
muted: PropTypes.bool,
onLoadVideo: PropTypes.func,
playsInline: PropTypes.bool,
hlsConfig: PropTypes.object,
timeLimit: PropTypes.number,
timeOffset: PropTypes.number,
playerRef: PropTypes.object,
src: PropTypes.string,
title: PropTypes.string
}
export default HLSPlayer
|