diff options
Diffstat (limited to 'app/javascript/flavours/glitch/components/extended_video_player.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/extended_video_player.js | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/components/extended_video_player.js b/app/javascript/flavours/glitch/components/extended_video_player.js new file mode 100644 index 000000000..009c0d559 --- /dev/null +++ b/app/javascript/flavours/glitch/components/extended_video_player.js @@ -0,0 +1,63 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class ExtendedVideoPlayer extends React.PureComponent { + + static propTypes = { + src: PropTypes.string.isRequired, + alt: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + time: PropTypes.number, + controls: PropTypes.bool.isRequired, + muted: PropTypes.bool.isRequired, + onClick: PropTypes.func, + }; + + handleLoadedData = () => { + if (this.props.time) { + this.video.currentTime = this.props.time; + } + } + + componentDidMount () { + this.video.addEventListener('loadeddata', this.handleLoadedData); + } + + componentWillUnmount () { + this.video.removeEventListener('loadeddata', this.handleLoadedData); + } + + setRef = (c) => { + this.video = c; + } + + handleClick = e => { + e.stopPropagation(); + const handler = this.props.onClick; + if (handler) handler(); + } + + render () { + const { src, muted, controls, alt } = this.props; + + return ( + <div className='extended-video-player'> + <video + ref={this.setRef} + src={src} + autoPlay + role='button' + tabIndex='0' + aria-label={alt} + title={alt} + muted={muted} + controls={controls} + loop={!controls} + onClick={this.handleClick} + /> + </div> + ); + } + +} |