/** * External dependencies */ import { RangeControl, Spinner } from '@wordpress/components'; import { useEffect, useRef, useState } from '@wordpress/element'; import { Icon } from '@wordpress/icons'; import classNames from 'classnames'; /** * Internal dependencies */ import playIcon from '../icons/play-icon'; import styles from './style.module.scss'; export const VideoPlayer = ( { src, setMaxDuration = null, currentTime } ) => { const videoPlayer = useRef( null ); const [ isVideoLoading, setIsVideoLoading ] = useState( true ); useEffect( () => { videoPlayer.current.src = src; }, [ src ] ); useEffect( () => { if ( videoPlayer.current && Number.isFinite( currentTime ) ) { videoPlayer.current.currentTime = currentTime; } }, [ currentTime ] ); const onDurationChange = event => { const newDuration = event.target.duration; setMaxDuration?.( newDuration ); if ( videoPlayer.current ) { const newTime = Number.isFinite( currentTime ) ? currentTime : newDuration / 2; videoPlayer.current.currentTime = newTime; } }; return (