diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2019-10-10 05:21:38 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2019-10-10 21:00:13 +0200 |
commit | 877e8c9d799eae663526609642e0c0c9a4612bda (patch) | |
tree | ae1947f0bbcfe870bca1109785f8c090f64bc31c /app/javascript/flavours/glitch/components/gifv.js | |
parent | 4ee167d89bd088f284e071d99b26fe9b1287882e (diff) |
[Glitch] Fix media editing modal changing dimensions when image loads
Port 6ebd74f4fa640b9616ebb2730d97722799c6ed56 to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
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> + ); + } + +} |