forked from treehouse/mastodon
Added GIF hover-to-play support
parent
003bfd094e
commit
227dbb6adb
|
@ -17,6 +17,24 @@ export default class StatusGalleryItem extends React.PureComponent {
|
||||||
autoPlayGif: PropTypes.bool.isRequired,
|
autoPlayGif: PropTypes.bool.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleMouseEnter = (e) => {
|
||||||
|
if (this.hoverToPlay()) {
|
||||||
|
e.target.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseLeave = (e) => {
|
||||||
|
if (this.hoverToPlay()) {
|
||||||
|
e.target.pause();
|
||||||
|
e.target.currentTime = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hoverToPlay () {
|
||||||
|
const { attachment, autoPlayGif } = this.props;
|
||||||
|
return !autoPlayGif && attachment.get('type') === 'gifv';
|
||||||
|
}
|
||||||
|
|
||||||
handleClick = (e) => {
|
handleClick = (e) => {
|
||||||
const { index, onClick } = this.props;
|
const { index, onClick } = this.props;
|
||||||
|
|
||||||
|
@ -112,6 +130,8 @@ export default class StatusGalleryItem extends React.PureComponent {
|
||||||
role='application'
|
role='application'
|
||||||
src={attachment.get('url')}
|
src={attachment.get('url')}
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
|
onMouseEnter={this.handleMouseEnter}
|
||||||
|
onMouseLeave={this.handleMouseLeave}
|
||||||
autoPlay={autoPlay}
|
autoPlay={autoPlay}
|
||||||
loop
|
loop
|
||||||
muted
|
muted
|
||||||
|
|
Loading…
Reference in New Issue