diff options
author | ThibG <thib@sitedethib.com> | 2019-10-11 22:28:11 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-10-11 22:28:11 +0200 |
commit | ef925f31a66d1cbc95bff11669d05e2924d8ce85 (patch) | |
tree | aadbb60d22a196075fe1faaeeae169e5badead57 /app/javascript/flavours/glitch/components/gifv.js | |
parent | b3dd0d276d52042828e11bf325015f5d7f4624ca (diff) | |
parent | 877e8c9d799eae663526609642e0c0c9a4612bda (diff) |
Merge pull request #1233 from ThibG/glitch-soc/merge-upstream
Merge upstream changes
Diffstat (limited to 'app/javascript/flavours/glitch/components/gifv.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/gifv.js | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/components/gifv.js b/app/javascript/flavours/glitch/components/gifv.js new file mode 100644 index 000000000..83cfae49c --- /dev/null +++ b/app/javascript/flavours/glitch/components/gifv.js @@ -0,0 +1,75 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class GIFV extends React.PureComponent { + + static propTypes = { + src: PropTypes.string.isRequired, + alt: PropTypes.string, + width: PropTypes.number, + height: PropTypes.number, + onClick: PropTypes.func, + }; + + state = { + loading: true, + }; + + handleLoadedData = () => { + this.setState({ loading: false }); + } + + componentWillReceiveProps (nextProps) { + if (nextProps.src !== this.props.src) { + this.setState({ loading: true }); + } + } + + handleClick = e => { + const { onClick } = this.props; + + if (onClick) { + e.stopPropagation(); + onClick(); + } + } + + render () { + const { src, width, height, alt } = this.props; + const { loading } = this.state; + + return ( + <div className='gifv' style={{ position: 'relative' }}> + {loading && ( + <canvas + width={width} + height={height} + role='button' + tabIndex='0' + aria-label={alt} + title={alt} + onClick={this.handleClick} + /> + )} + + <video + src={src} + width={width} + height={height} + role='button' + tabIndex='0' + aria-label={alt} + title={alt} + muted + loop + autoPlay + playsInline + onClick={this.handleClick} + onLoadedData={this.handleLoadedData} + style={{ position: loading ? 'absolute' : 'static', top: 0, left: 0 }} + /> + </div> + ); + } + +} |