You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

46 lines
994 B

  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. export default class ExtendedVideoPlayer extends React.PureComponent {
  4. static propTypes = {
  5. src: PropTypes.string.isRequired,
  6. time: PropTypes.number,
  7. controls: PropTypes.bool.isRequired,
  8. muted: PropTypes.bool.isRequired,
  9. };
  10. handleLoadedData = () => {
  11. if (this.props.time) {
  12. this.video.currentTime = this.props.time;
  13. }
  14. }
  15. componentDidMount () {
  16. this.video.addEventListener('loadeddata', this.handleLoadedData);
  17. }
  18. componentWillUnmount () {
  19. this.video.removeEventListener('loadeddata', this.handleLoadedData);
  20. }
  21. setRef = (c) => {
  22. this.video = c;
  23. }
  24. render () {
  25. return (
  26. <div className='extended-video-player'>
  27. <video
  28. ref={this.setRef}
  29. src={this.props.src}
  30. autoPlay
  31. muted={this.props.muted}
  32. controls={this.props.controls}
  33. loop={!this.props.controls}
  34. />
  35. </div>
  36. );
  37. }
  38. }