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 89 90 | 1x 9x 9x 9x 9x 8x 1x 7x 9x 9x 9x 1x | import {forwardRef, useEffect, useRef} from 'react'
import PropTypes from 'prop-types'
import useGetBlobAsVideoSrcEffect from '../hooks/native/useGetBlobAsVideoSrcEffect.js'
import useGetSrcWithMediaFragments from '../hooks/native/useGetSrcWithMediaFragments.js'
import useImperativeApi from '../hooks/useImperativeApi.js'
import {BASE_CLASS, NATIVE_DEFAULT_TITLE} from '../settings/index.js'
import {NATIVE} from '../settings/players.js'
const NativePlayer = forwardRef(
(
{
autoPlay,
controls,
muted,
loop,
onLoadVideo,
playsInline,
timeLimit,
timeOffset,
src,
title = NATIVE_DEFAULT_TITLE
},
forwardedRef
) => {
const playerRef = useRef(null)
let videoSrc = useGetBlobAsVideoSrcEffect({src, playerRef})
videoSrc = useGetSrcWithMediaFragments({videoSrc, timeOffset, timeLimit})
useEffect(() => {
if (autoPlay) {
playerRef.current.play()
} else {
playerRef.current.pause()
}
}, [autoPlay])
useImperativeApi({
ref: forwardedRef,
getCurrentTime: () => Promise.resolve(playerRef.current.currentTime)
})
const onLoadedMetadata = () => {
const {duration, videoHeight, videoWidth} = playerRef.current
onLoadVideo({
src,
type: NATIVE.VIDEO_TYPE,
duration,
videoHeight,
videoWidth
})
}
return (
<div className={`${BASE_CLASS}-nativePlayer`}>
<video
autoPlay={autoPlay}
className={`${BASE_CLASS}-nativePlayerVideo`}
muted={muted}
ref={playerRef}
title={title}
controls={controls}
onLoadedMetadata={onLoadedMetadata}
playsInline={playsInline}
loop={loop}
>
{videoSrc !== null && <source data-testid="videosrc" src={videoSrc} />}
Your browser does not support the video tag.
</video>
</div>
)
}
)
NativePlayer.propTypes = {
autoPlay: PropTypes.bool,
controls: PropTypes.bool,
muted: PropTypes.bool,
onLoadVideo: PropTypes.func,
playsInline: PropTypes.bool,
timeLimit: PropTypes.number,
timeOffset: PropTypes.number,
src: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
title: PropTypes.string,
loop: PropTypes.bool
}
export default NativePlayer
|