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.

53 lines
1.1 KiB

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