app/javascript/mastodon/features/account/components/header.js

   1 import React from 'react';
   2 import ImmutablePropTypes from 'react-immutable-proptypes';
   3 import PropTypes from 'prop-types';
   4 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
   5 import IconButton from '../../../components/icon_button';
   6 import Motion from '../../ui/util/optional_motion';
   7 import spring from 'react-motion/lib/spring';
   8 import ImmutablePureComponent from 'react-immutable-pure-component';
   9 import { autoPlayGif, me } from '../../../initial_state';
  10
  11 const messages = defineMessages({
  12   unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
  13   follow: { id: 'account.follow', defaultMessage: 'Follow' },
  14   requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
  15 });
  16
  17 class Avatar extends ImmutablePureComponent {
  18
  19   static propTypes = {
  20     account: ImmutablePropTypes.map.isRequired,
  21   };
  22
  23   state = {
  24     isHovered: false,
  25   };
  26
  27   handleMouseOver = () => {
  28     if (this.state.isHovered) return;
  29     this.setState({ isHovered: true });
  30   }
  31
  32   handleMouseOut = () => {
  33     if (!this.state.isHovered) return;
  34     this.setState({ isHovered: false });
  35   }
  36
  37   render () {
  38     const { account }   = this.props;
  39     const { isHovered } = this.state;
  40
  41     return (
  42       <Motion defaultStyle={{ radius: 90 }} style={{ radius: spring(isHovered ? 30 : 90, { stiffness: 180, damping: 12 }) }}>
  43         {({ radius }) =>
  44           <a
  45             href={account.get('url')}
  46             className='account__header__avatar'
  47             role='presentation'
  48             target='_blank'
  49             rel='noopener'
  50             style={{ borderRadius: `${radius}px`, backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
  51             onMouseOver={this.handleMouseOver}
  52             onMouseOut={this.handleMouseOut}
  53             onFocus={this.handleMouseOver}
  54             onBlur={this.handleMouseOut}
  55           >
  56             <span style={{ display: 'none' }}>{account.get('acct')}</span>
  57           </a>
  58         }
  59       </Motion>
  60     );
  61   }
  62
  63 }
  64
  65 @injectIntl
  66 export default class Header extends ImmutablePureComponent {
  67
  68   static propTypes = {
  69     account: ImmutablePropTypes.map,
  70     onFollow: PropTypes.func.isRequired,
  71     intl: PropTypes.object.isRequired,
  72   };
  73
  74   render () {
  75     const { account, intl } = this.props;
  76
  77     if (!account) {
  78       return null;
  79     }
  80
  81     let info        = '';
  82     let actionBtn   = '';
  83     let lockedIcon  = '';
  84
  85     if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
  86       info = <span className='account--follows-info'><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>;
  87     }
  88
  89     if (me !== account.get('id')) {
  90       if (account.getIn(['relationship', 'requested'])) {
  91         actionBtn = (
  92           <div className='account--action-button'>
  93             <IconButton size={26} active icon='hourglass' title={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />
  94           </div>
  95         );
  96       } else if (!account.getIn(['relationship', 'blocking'])) {
  97         actionBtn = (
  98           <div className='account--action-button'>
  99             <IconButton size={26} icon={account.getIn(['relationship', 'following']) ? 'user-times' : 'user-plus'} active={account.getIn(['relationship', 'following'])} title={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />
 100           </div>
 101         );
 102       }
 103     }
 104
 105     if (account.get('locked')) {
 106       lockedIcon = <i className='fa fa-lock' />;
 107     }
 108
 109     const content         = { __html: account.get('note_emojified') };
 110     const displayNameHtml = { __html: account.get('display_name_html') };
 111
 112     return (
 113       <div className='account__header' style={{ backgroundImage: `url(${account.get('header')})` }}>
 114         <div>
 115           <Avatar account={account} />
 116
 117           <span className='account__header__display-name' dangerouslySetInnerHTML={displayNameHtml} />
 118           <span className='account__header__username'>@{account.get('acct')} {lockedIcon}</span>
 119           <div className='account__header__content' dangerouslySetInnerHTML={content} />
 120
 121           {info}
 122           {actionBtn}
 123         </div>
 124       </div>
 125     );
 126   }
 127
 128 }