about summary refs log tree commit diff
diff options
context:
space:
mode:
authorkibigo! <marrus-sh@users.noreply.github.com>2017-09-20 02:19:36 -0700
committerkibigo! <marrus-sh@users.noreply.github.com>2017-09-20 02:19:36 -0700
commit227dbb6adb0e573f162b20f7778f2bb7c5b70491 (patch)
treeaf78eae0e96d9b5d4db058c24126173c10aaba95
parent003bfd094e2b7c00eaaad6747a7850dcc1292dc2 (diff)
Added GIF hover-to-play support
-rw-r--r--app/javascript/glitch/components/status/gallery/item.js20
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