import React from "react" ; type Props = { src : string ; onPlay ? : ( ) => void ; onPause ? : ( ) => void ; } ; /**
 * isPlaying on instance (I'm considering this to be a bad API!)
 * `videoRef.current.isPlaying()`
 */ const Video = ( props , ref ) => { const { onPlay , onPause } = props ; const videoRef = React . useRef < HTMLVideoElement > ( ) ; const isPlayingRef = React . useRef < boolean > ( false ) ; React . useImperativeHandle ( ref , ( ) => ( { isPlaying : ( ) => { return isPlayingRef . current ; } , } ) ) ; React . useEffect ( ( ) => { const videoElement = videoRef . current ; const onPlayEvent = ( ) => { isPlayingRef . current = true ; if ( typeof onPlay === "function" ) { onPlay ( ) ; } } ; const onPauseEvent = ( ) => { isPlayingRef . current = false ; if ( typeof onPause === "function" ) { onPause ( ) ; } } ; videoElement ?. addEventListener ( "play" , onPlayEvent ) ; videoElement ?. addEventListener ( "pause" , onPauseEvent ) ; return ( ) => { videoElement ?. removeEventListener ( "play" , onPlayEvent ) ; videoElement ?. removeEventListener ( "pause" , onPauseEvent ) ; } ; } , [ onPlay , onPause ] ) ; return ( < video src = { props . src } controls muted width = { 400 } ref = { videoRef } > < /video>); } ; export default React . forwardRef ( Video ) ;