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.

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