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.

48 lines
1.0 KiB

  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. width: PropTypes.number,
  7. height: PropTypes.number,
  8. time: PropTypes.number,
  9. controls: PropTypes.bool.isRequired,
  10. muted: PropTypes.bool.isRequired,
  11. };
  12. handleLoadedData = () => {
  13. if (this.props.time) {
  14. this.video.currentTime = this.props.time;
  15. }
  16. }
  17. componentDidMount () {
  18. this.video.addEventListener('loadeddata', this.handleLoadedData);
  19. }
  20. componentWillUnmount () {
  21. this.video.removeEventListener('loadeddata', this.handleLoadedData);
  22. }
  23. setRef = (c) => {
  24. this.video = c;
  25. }
  26. render () {
  27. return (
  28. <div className='extended-video-player'>
  29. <video
  30. ref={this.setRef}
  31. src={this.props.src}
  32. autoPlay
  33. muted={this.props.muted}
  34. controls={this.props.controls}
  35. loop={!this.props.controls}
  36. />
  37. </div>
  38. );
  39. }
  40. }