about summary refs log tree commit diff
path: root/app/assets/javascripts/components
diff options
context:
space:
mode:
authorEugen Rochko <eugen@zeonfederated.com>2017-01-25 17:07:57 +0100
committerEugen Rochko <eugen@zeonfederated.com>2017-01-25 17:07:57 +0100
commit00fa850bdc8e98dfb3e3772ec2b9a55e8538cadc (patch)
tree4e1eb62cec4e6a20e9f5ee5fc57ef45636eb43c1 /app/assets/javascripts/components
parent3beb24ad5544723348d1e23a99c2b5ab1e26ae1f (diff)
Fix #187, address #441 - <Avatar> component now plays gifs only while hovered
Diffstat (limited to 'app/assets/javascripts/components')
-rw-r--r--app/assets/javascripts/components/components/avatar.jsx33
1 files changed, 31 insertions, 2 deletions
diff --git a/app/assets/javascripts/components/components/avatar.jsx b/app/assets/javascripts/components/components/avatar.jsx
index 687aa7bb9..30467da4d 100644
--- a/app/assets/javascripts/components/components/avatar.jsx
+++ b/app/assets/javascripts/components/components/avatar.jsx
@@ -8,12 +8,41 @@ const Avatar = React.createClass({
     style: React.PropTypes.object
   },
 
+  getInitialState () {
+    return {
+      hovering: false
+    };
+  },
+
   mixins: [PureRenderMixin],
 
+  handleMouseEnter () {
+    this.setState({ hovering: true });
+  },
+
+  handleMouseLeave () {
+    this.setState({ hovering: false });
+  },
+
+  componentDidMount () {
+    this.canvas.getContext('2d').drawImage(this.image, 0, 0, this.props.size, this.props.size);
+  },
+
+  setImageRef (c) {
+    this.image = c;
+  },
+
+  setCanvasRef (c) {
+    this.canvas = c;
+  },
+
   render () {
+    const { hovering } = this.state;
+
     return (
-      <div style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px` }}>
-        <img src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ display: 'block', borderRadius: '4px' }} />
+      <div onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={{ ...this.props.style, width: `${this.props.size}px`, height: `${this.props.size}px`, position: 'relative' }}>
+        <img ref={this.setImageRef} src={this.props.src} width={this.props.size} height={this.props.size} alt='' style={{ position: 'absolute', top: '0', left: '0', display: hovering ? 'block' : 'none', borderRadius: '4px' }} />
+        <canvas ref={this.setCanvasRef} width={this.props.size} height={this.props.size} style={{ borderRadius: '4px' }} />
       </div>
     );
   }