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.

62 lines
1.3 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. onClick: PropTypes.func,
  13. };
  14. handleLoadedData = () => {
  15. if (this.props.time) {
  16. this.video.currentTime = this.props.time;
  17. }
  18. }
  19. componentDidMount () {
  20. this.video.addEventListener('loadeddata', this.handleLoadedData);
  21. }
  22. componentWillUnmount () {
  23. this.video.removeEventListener('loadeddata', this.handleLoadedData);
  24. }
  25. setRef = (c) => {
  26. this.video = c;
  27. }
  28. handleClick = e => {
  29. e.stopPropagation();
  30. const handler = this.props.onClick;
  31. if (handler) handler();
  32. }
  33. render () {
  34. const { src, muted, controls, alt } = this.props;
  35. return (
  36. <div className='extended-video-player'>
  37. <video
  38. ref={this.setRef}
  39. src={src}
  40. autoPlay
  41. role='button'
  42. tabIndex='0'
  43. aria-label={alt}
  44. muted={muted}
  45. controls={controls}
  46. loop={!controls}
  47. onClick={this.handleClick}
  48. />
  49. </div>
  50. );
  51. }
  52. }