mastodon/app/assets/javascripts/components/components/avatar.jsx
Eugen 12f72e1740 When avatar/header are GIF, generate static versions (#1428)
* When avatar/header are GIF, generate static versions.
Account API returns "avatar"/"avatar_static", "header"/"header_static"
Static version is the same as original for other cases
Web UI de-animates avatars in toots, lists of users

Fix #441, fix #596, prerequisite for #1064

* Fix JS test

* Add rake task to generate static avatars/headers from GIF ones, add test
2017-04-11 00:38:58 +02:00

65 lines
1.2 KiB
JavaScript

import PureRenderMixin from 'react-addons-pure-render-mixin';
const Avatar = React.createClass({
propTypes: {
src: React.PropTypes.string.isRequired,
staticSrc: React.PropTypes.string,
size: React.PropTypes.number.isRequired,
style: React.PropTypes.object,
animate: React.PropTypes.bool
},
getDefaultProps () {
return {
animate: false
};
},
getInitialState () {
return {
hovering: false
};
},
mixins: [PureRenderMixin],
handleMouseEnter () {
this.setState({ hovering: true });
},
handleMouseLeave () {
this.setState({ hovering: false });
},
render () {
const { src, size, staticSrc, animate } = this.props;
const { hovering } = this.state;
const style = {
...this.props.style,
width: `${size}px`,
height: `${size}px`,
backgroundSize: `${size}px ${size}px`
};
if (hovering || animate) {
style.backgroundImage = `url(${src})`;
} else {
style.backgroundImage = `url(${staticSrc})`;
}
return (
<div
className='avatar'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
style={style}
/>
);
}
});
export default Avatar;