Added GIF hover-to-play support

1 files changed, 20 insertions, 0 deletions

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