mastodon/app/javascript/flavours/glitch/components/gifv.jsx
Christian Schmidt 0e476f3c4f [Glitch] Add lang attribute to media and poll options
Port d3eefead30 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2023-03-05 17:52:53 +01:00

77 lines
1.6 KiB
JavaScript

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,
lang: 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, lang } = 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}
lang={lang}
onClick={this.handleClick}
/>
)}
<video
src={src}
role='button'
tabIndex='0'
aria-label={alt}
title={alt}
lang={lang}
muted
loop
autoPlay
playsInline
onClick={this.handleClick}
onLoadedData={this.handleLoadedData}
style={{ position: loading ? 'absolute' : 'static', top: 0, left: 0 }}
/>
</div>
);
}
}