specter/mastodon
1
0
Fork 0
forked from fedi/mastodon
Code Pull requests Activity

Fix #187, address #441 - <Avatar> component now plays gifs only while hovered

Browse source
This commit is contained in:
Eugen Rochko 2017-01-25 17:07:57 +01:00
parent 3beb24ad55
commit 00fa850bdc
1 changed files with 31 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/assets/javascripts/components/components/avatar.jsx
View file

@ -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>
);
}