From 227dbb6adb0e573f162b20f7778f2bb7c5b70491 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Wed, 20 Sep 2017 02:19:36 -0700 Subject: Added GIF hover-to-play support --- .../glitch/components/status/gallery/item.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'app/javascript/glitch') diff --git a/app/javascript/glitch/components/status/gallery/item.js b/app/javascript/glitch/components/status/gallery/item.js index d646825a3..ab4aab8dc 100644 --- a/app/javascript/glitch/components/status/gallery/item.js +++ b/app/javascript/glitch/components/status/gallery/item.js @@ -17,6 +17,24 @@ export default class StatusGalleryItem extends React.PureComponent { 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) => { const { index, onClick } = this.props; @@ -112,6 +130,8 @@ export default class StatusGalleryItem extends React.PureComponent { role='application' src={attachment.get('url')} onClick={this.handleClick} + onMouseEnter={this.handleMouseEnter} + onMouseLeave={this.handleMouseLeave} autoPlay={autoPlay} loop muted -- cgit