2017-05-03 10:04:16 +10:00
import React from 'react' ;
2016-09-19 02:18:46 +10:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-04-22 04:05:35 +10:00
import PropTypes from 'prop-types' ;
2016-11-24 09:34:12 +11:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2019-03-26 10:36:25 +11:00
import Button from 'mastodon/components/button' ;
2017-05-03 10:04:16 +10:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2019-03-26 10:36:25 +11:00
import { autoPlayGif , me , isStaff } from 'mastodon/initial_state' ;
2017-11-19 05:39:02 +11:00
import classNames from 'classnames' ;
2019-02-01 10:14:05 +11:00
import Icon from 'mastodon/components/icon' ;
2019-03-26 10:36:25 +11:00
import Avatar from 'mastodon/components/avatar' ;
2020-07-06 22:27:32 +10:00
import { counterRenderer } from 'mastodon/components/common_counter' ;
import ShortNumber from 'mastodon/components/short_number' ;
2019-03-26 10:36:25 +11:00
import { NavLink } from 'react-router-dom' ;
import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container' ;
2020-07-01 03:19:50 +10:00
import AccountNoteContainer from '../containers/account_note_container' ;
2016-11-24 09:34:12 +11:00
const messages = defineMessages ( {
unfollow : { id : 'account.unfollow' , defaultMessage : 'Unfollow' } ,
follow : { id : 'account.follow' , defaultMessage : 'Follow' } ,
2019-08-08 16:56:55 +10:00
cancel _follow _request : { id : 'account.cancel_follow_request' , defaultMessage : 'Cancel follow request' } ,
2017-09-03 04:44:41 +10:00
requested : { id : 'account.requested' , defaultMessage : 'Awaiting approval. Click to cancel follow request' } ,
2018-03-05 15:09:35 +11:00
unblock : { id : 'account.unblock' , defaultMessage : 'Unblock @{name}' } ,
2018-05-31 02:41:47 +10:00
edit _profile : { id : 'account.edit_profile' , defaultMessage : 'Edit profile' } ,
2018-09-19 00:45:58 +10:00
linkVerifiedOn : { id : 'account.link_verified_on' , defaultMessage : 'Ownership of this link was checked on {date}' } ,
2018-12-02 00:25:15 +11:00
account _locked : { id : 'account.locked_info' , defaultMessage : 'This account privacy status is set to locked. The owner manually reviews who can follow them.' } ,
2019-03-26 10:36:25 +11:00
mention : { id : 'account.mention' , defaultMessage : 'Mention @{name}' } ,
direct : { id : 'account.direct' , defaultMessage : 'Direct message @{name}' } ,
unmute : { id : 'account.unmute' , defaultMessage : 'Unmute @{name}' } ,
block : { id : 'account.block' , defaultMessage : 'Block @{name}' } ,
mute : { id : 'account.mute' , defaultMessage : 'Mute @{name}' } ,
report : { id : 'account.report' , defaultMessage : 'Report @{name}' } ,
share : { id : 'account.share' , defaultMessage : 'Share @{name}\'s profile' } ,
media : { id : 'account.media' , defaultMessage : 'Media' } ,
2020-03-06 09:20:49 +11:00
blockDomain : { id : 'account.block_domain' , defaultMessage : 'Block domain {domain}' } ,
unblockDomain : { id : 'account.unblock_domain' , defaultMessage : 'Unblock domain {domain}' } ,
2019-03-26 10:36:25 +11:00
hideReblogs : { id : 'account.hide_reblogs' , defaultMessage : 'Hide boosts from @{name}' } ,
showReblogs : { id : 'account.show_reblogs' , defaultMessage : 'Show boosts from @{name}' } ,
pins : { id : 'navigation_bar.pins' , defaultMessage : 'Pinned toots' } ,
preferences : { id : 'navigation_bar.preferences' , defaultMessage : 'Preferences' } ,
follow _requests : { id : 'navigation_bar.follow_requests' , defaultMessage : 'Follow requests' } ,
favourites : { id : 'navigation_bar.favourites' , defaultMessage : 'Favourites' } ,
lists : { id : 'navigation_bar.lists' , defaultMessage : 'Lists' } ,
blocks : { id : 'navigation_bar.blocks' , defaultMessage : 'Blocked users' } ,
2020-03-09 19:13:21 +11:00
domain _blocks : { id : 'navigation_bar.domain_blocks' , defaultMessage : 'Blocked domains' } ,
2019-03-26 10:36:25 +11:00
mutes : { id : 'navigation_bar.mutes' , defaultMessage : 'Muted users' } ,
endorse : { id : 'account.endorse' , defaultMessage : 'Feature on profile' } ,
unendorse : { id : 'account.unendorse' , defaultMessage : 'Don\'t feature on profile' } ,
add _or _remove _from _list : { id : 'account.add_or_remove_from_list' , defaultMessage : 'Add or Remove from lists' } ,
admin _account : { id : 'status.admin_account' , defaultMessage : 'Open moderation interface for @{name}' } ,
2016-11-24 09:34:12 +11:00
} ) ;
2016-09-19 02:18:46 +10:00
2018-09-19 00:45:58 +10:00
const dateFormatOptions = {
month : 'short' ,
day : 'numeric' ,
year : 'numeric' ,
hour12 : false ,
hour : '2-digit' ,
minute : '2-digit' ,
} ;
2018-09-15 01:59:48 +10:00
export default @ injectIntl
class Header extends ImmutablePureComponent {
2016-09-19 02:18:46 +10:00
2017-05-12 22:44:10 +10:00
static propTypes = {
account : ImmutablePropTypes . map ,
2019-03-29 04:01:09 +11:00
identity _props : ImmutablePropTypes . list ,
2017-05-12 22:44:10 +10:00
onFollow : PropTypes . func . isRequired ,
2018-03-05 15:09:35 +11:00
onBlock : PropTypes . func . isRequired ,
2017-05-12 22:44:10 +10:00
intl : PropTypes . object . isRequired ,
2019-03-26 10:36:25 +11:00
domain : PropTypes . string . isRequired ,
2017-05-12 22:44:10 +10:00
} ;
2018-05-31 02:41:47 +10:00
openEditProfile = ( ) => {
window . open ( '/settings/profile' , '_blank' ) ;
}
2019-03-26 10:36:25 +11:00
isStatusesPageActive = ( match , location ) => {
if ( ! match ) {
return false ;
}
return ! location . pathname . match ( /\/(followers|following)\/?$/ ) ;
}
2019-07-22 02:10:40 +10:00
_updateEmojis ( ) {
const node = this . node ;
if ( ! node || autoPlayGif ) {
return ;
}
const emojis = node . querySelectorAll ( '.custom-emoji' ) ;
for ( var i = 0 ; i < emojis . length ; i ++ ) {
let emoji = emojis [ i ] ;
if ( emoji . classList . contains ( 'status-emoji' ) ) {
continue ;
}
emoji . classList . add ( 'status-emoji' ) ;
emoji . addEventListener ( 'mouseenter' , this . handleEmojiMouseEnter , false ) ;
emoji . addEventListener ( 'mouseleave' , this . handleEmojiMouseLeave , false ) ;
}
}
componentDidMount ( ) {
this . _updateEmojis ( ) ;
}
componentDidUpdate ( ) {
this . _updateEmojis ( ) ;
}
handleEmojiMouseEnter = ( { target } ) => {
target . src = target . getAttribute ( 'data-original' ) ;
}
handleEmojiMouseLeave = ( { target } ) => {
target . src = target . getAttribute ( 'data-static' ) ;
}
setRef = ( c ) => {
this . node = c ;
}
2016-09-19 02:18:46 +10:00
render ( ) {
2019-03-29 04:01:09 +11:00
const { account , intl , domain , identity _proofs } = this . props ;
2016-09-19 02:18:46 +10:00
2017-02-21 10:10:49 +11:00
if ( ! account ) {
return null ;
}
2019-03-26 10:36:25 +11:00
let info = [ ] ;
2016-11-24 09:34:12 +11:00
let actionBtn = '' ;
2016-12-23 10:04:52 +11:00
let lockedIcon = '' ;
2019-03-26 10:36:25 +11:00
let menu = [ ] ;
2016-10-07 07:07:32 +11:00
2016-10-10 07:19:15 +11:00
if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'followed_by' ] ) ) {
2019-03-30 10:43:29 +11:00
info . push ( < span key = 'followed_by' className = 'relationship-tag' > < FormattedMessage id = 'account.follows_you' defaultMessage = 'Follows you' / > < / s p a n > ) ;
2018-03-05 15:09:35 +11:00
} else if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-30 10:43:29 +11:00
info . push ( < span key = 'blocked' className = 'relationship-tag' > < FormattedMessage id = 'account.blocked' defaultMessage = 'Blocked' / > < / s p a n > ) ;
2018-03-05 15:09:35 +11:00
}
if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'muting' ] ) ) {
2019-03-30 10:43:29 +11:00
info . push ( < span key = 'muted' className = 'relationship-tag' > < FormattedMessage id = 'account.muted' defaultMessage = 'Muted' / > < / s p a n > ) ;
2018-03-06 02:45:36 +11:00
} else if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'domain_blocking' ] ) ) {
2020-03-09 19:13:21 +11:00
info . push ( < span key = 'domain_blocked' className = 'relationship-tag' > < FormattedMessage id = 'account.domain_blocked' defaultMessage = 'Domain blocked' / > < / s p a n > ) ;
2016-10-10 07:19:15 +11:00
}
2016-11-24 09:34:12 +11:00
if ( me !== account . get ( 'id' ) ) {
2018-08-26 06:46:59 +10:00
if ( ! account . get ( 'relationship' ) ) { // Wait until the relationship is loaded
actionBtn = '' ;
} else if ( account . getIn ( [ 'relationship' , 'requested' ] ) ) {
2019-08-08 16:56:55 +10:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . cancel _follow _request ) } title = { intl . formatMessage ( messages . requested ) } onClick = { this . props . onFollow } / > ;
2017-02-06 06:58:09 +11:00
} else if ( ! account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-04-07 12:59:13 +10:00
actionBtn = < Button disabled = { account . getIn ( [ 'relationship' , 'blocked_by' ] ) } className = { classNames ( 'logo-button' , { 'button--destructive' : account . getIn ( [ 'relationship' , 'following' ] ) } ) } text = { intl . formatMessage ( account . getIn ( [ 'relationship' , 'following' ] ) ? messages . unfollow : messages . follow ) } onClick = { this . props . onFollow } / > ;
2018-03-05 15:09:35 +11:00
} else if ( account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-26 10:36:25 +11:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . unblock , { name : account . get ( 'username' ) } ) } onClick = { this . props . onBlock } / > ;
2016-12-23 09:03:57 +11:00
}
2018-05-31 02:41:47 +10:00
} else {
2019-03-26 10:36:25 +11:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . edit _profile ) } onClick = { this . openEditProfile } / > ;
2016-11-24 09:34:12 +11:00
}
2018-01-16 04:42:15 +11:00
if ( account . get ( 'moved' ) && ! account . getIn ( [ 'relationship' , 'following' ] ) ) {
2017-11-19 05:39:02 +11:00
actionBtn = '' ;
}
2016-12-23 10:04:52 +11:00
if ( account . get ( 'locked' ) ) {
2019-02-01 10:14:05 +11:00
lockedIcon = < Icon id = 'lock' title = { intl . formatMessage ( messages . account _locked ) } / > ;
2016-12-23 10:04:52 +11:00
}
2019-03-26 10:36:25 +11:00
if ( account . get ( 'id' ) !== me ) {
menu . push ( { text : intl . formatMessage ( messages . mention , { name : account . get ( 'username' ) } ) , action : this . props . onMention } ) ;
menu . push ( { text : intl . formatMessage ( messages . direct , { name : account . get ( 'username' ) } ) , action : this . props . onDirect } ) ;
menu . push ( null ) ;
}
if ( 'share' in navigator ) {
menu . push ( { text : intl . formatMessage ( messages . share , { name : account . get ( 'username' ) } ) , action : this . handleShare } ) ;
menu . push ( null ) ;
}
if ( account . get ( 'id' ) === me ) {
menu . push ( { text : intl . formatMessage ( messages . edit _profile ) , href : '/settings/profile' } ) ;
menu . push ( { text : intl . formatMessage ( messages . preferences ) , href : '/settings/preferences' } ) ;
menu . push ( { text : intl . formatMessage ( messages . pins ) , to : '/pinned' } ) ;
menu . push ( null ) ;
menu . push ( { text : intl . formatMessage ( messages . follow _requests ) , to : '/follow_requests' } ) ;
menu . push ( { text : intl . formatMessage ( messages . favourites ) , to : '/favourites' } ) ;
menu . push ( { text : intl . formatMessage ( messages . lists ) , to : '/lists' } ) ;
menu . push ( null ) ;
menu . push ( { text : intl . formatMessage ( messages . mutes ) , to : '/mutes' } ) ;
menu . push ( { text : intl . formatMessage ( messages . blocks ) , to : '/blocks' } ) ;
menu . push ( { text : intl . formatMessage ( messages . domain _blocks ) , to : '/domain_blocks' } ) ;
} else {
if ( account . getIn ( [ 'relationship' , 'following' ] ) ) {
2020-05-14 05:20:45 +10:00
if ( ! account . getIn ( [ 'relationship' , 'muting' ] ) ) {
if ( account . getIn ( [ 'relationship' , 'showing_reblogs' ] ) ) {
menu . push ( { text : intl . formatMessage ( messages . hideReblogs , { name : account . get ( 'username' ) } ) , action : this . props . onReblogToggle } ) ;
} else {
menu . push ( { text : intl . formatMessage ( messages . showReblogs , { name : account . get ( 'username' ) } ) , action : this . props . onReblogToggle } ) ;
}
2019-03-26 10:36:25 +11:00
}
menu . push ( { text : intl . formatMessage ( account . getIn ( [ 'relationship' , 'endorsed' ] ) ? messages . unendorse : messages . endorse ) , action : this . props . onEndorseToggle } ) ;
menu . push ( { text : intl . formatMessage ( messages . add _or _remove _from _list ) , action : this . props . onAddToList } ) ;
menu . push ( null ) ;
}
if ( account . getIn ( [ 'relationship' , 'muting' ] ) ) {
menu . push ( { text : intl . formatMessage ( messages . unmute , { name : account . get ( 'username' ) } ) , action : this . props . onMute } ) ;
} else {
menu . push ( { text : intl . formatMessage ( messages . mute , { name : account . get ( 'username' ) } ) , action : this . props . onMute } ) ;
}
if ( account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
menu . push ( { text : intl . formatMessage ( messages . unblock , { name : account . get ( 'username' ) } ) , action : this . props . onBlock } ) ;
} else {
menu . push ( { text : intl . formatMessage ( messages . block , { name : account . get ( 'username' ) } ) , action : this . props . onBlock } ) ;
}
menu . push ( { text : intl . formatMessage ( messages . report , { name : account . get ( 'username' ) } ) , action : this . props . onReport } ) ;
}
if ( account . get ( 'acct' ) !== account . get ( 'username' ) ) {
const domain = account . get ( 'acct' ) . split ( '@' ) [ 1 ] ;
menu . push ( null ) ;
if ( account . getIn ( [ 'relationship' , 'domain_blocking' ] ) ) {
menu . push ( { text : intl . formatMessage ( messages . unblockDomain , { domain } ) , action : this . props . onUnblockDomain } ) ;
} else {
menu . push ( { text : intl . formatMessage ( messages . blockDomain , { domain } ) , action : this . props . onBlockDomain } ) ;
}
}
if ( account . get ( 'id' ) !== me && isStaff ) {
menu . push ( null ) ;
menu . push ( { text : intl . formatMessage ( messages . admin _account , { name : account . get ( 'username' ) } ) , href : ` /admin/accounts/ ${ account . get ( 'id' ) } ` } ) ;
}
2017-08-08 04:32:03 +10:00
const content = { _ _html : account . get ( 'note_emojified' ) } ;
const displayNameHtml = { _ _html : account . get ( 'display_name_html' ) } ;
2018-04-14 20:41:08 +10:00
const fields = account . get ( 'fields' ) ;
2019-03-26 10:36:25 +11:00
const acct = account . get ( 'acct' ) . indexOf ( '@' ) === - 1 && domain ? ` ${ account . get ( 'acct' ) } @ ${ domain } ` : account . get ( 'acct' ) ;
2016-11-07 11:14:12 +11:00
2019-12-05 06:36:33 +11:00
let badge ;
if ( account . get ( 'bot' ) ) {
badge = ( < div className = 'account-role bot' > < FormattedMessage id = 'account.badges.bot' defaultMessage = 'Bot' / > < / d i v > ) ;
} else if ( account . get ( 'group' ) ) {
badge = ( < div className = 'account-role group' > < FormattedMessage id = 'account.badges.group' defaultMessage = 'Group' / > < / d i v > ) ;
} else {
badge = null ;
}
2016-09-19 02:18:46 +10:00
return (
2019-07-22 02:10:40 +10:00
< div className = { classNames ( 'account__header' , { inactive : ! ! account . get ( 'moved' ) } ) } ref = { this . setRef } >
2019-03-26 10:36:25 +11:00
< div className = 'account__header__image' >
< div className = 'account__header__info' >
{ info }
< / d i v >
2016-09-19 02:18:46 +10:00
2019-03-26 10:36:25 +11:00
< img src = { autoPlayGif ? account . get ( 'header' ) : account . get ( 'header_static' ) } alt = '' className = 'parallax' / >
< / d i v >
2018-05-07 17:31:07 +10:00
2019-03-26 10:36:25 +11:00
< div className = 'account__header__bar' >
< div className = 'account__header__tabs' >
2019-10-25 07:44:42 +11:00
< a className = 'avatar' href = { account . get ( 'url' ) } rel = 'noopener noreferrer' target = '_blank' >
2019-03-26 10:36:25 +11:00
< Avatar account = { account } size = { 90 } / >
< / a >
2018-05-07 17:31:07 +10:00
2019-03-26 10:36:25 +11:00
< div className = 'spacer' / >
2016-10-10 07:19:15 +11:00
2019-03-26 10:36:25 +11:00
< div className = 'account__header__tabs__buttons' >
{ actionBtn }
2019-03-27 09:05:21 +11:00
< DropdownMenuContainer items = { menu } icon = 'ellipsis-v' size = { 24 } direction = 'right' / >
2018-05-05 08:55:09 +10:00
< / d i v >
2019-03-26 10:36:25 +11:00
< / d i v >
< div className = 'account__header__tabs__name' >
< h1 >
< span dangerouslySetInnerHTML = { displayNameHtml } / > { badge }
< small > @ { acct } { lockedIcon } < / s m a l l >
< / h 1 >
< / d i v >
< div className = 'account__header__extra' >
< div className = 'account__header__bio' >
2019-03-29 04:01:09 +11:00
{ ( fields . size > 0 || identity _proofs . size > 0 ) && (
2019-03-26 10:36:25 +11:00
< div className = 'account__header__fields' >
2019-03-29 04:01:09 +11:00
{ identity _proofs . map ( ( proof , i ) => (
< dl key = { i } >
< dt dangerouslySetInnerHTML = { { _ _html : proof . get ( 'provider' ) } } / >
< dd className = 'verified' >
2019-10-25 07:44:42 +11:00
< a href = { proof . get ( 'proof_url' ) } target = '_blank' rel = 'noopener noreferrer' > < span title = { intl . formatMessage ( messages . linkVerifiedOn , { date : intl . formatDate ( proof . get ( 'updated_at' ) , dateFormatOptions ) } ) } >
2019-03-29 04:01:09 +11:00
< Icon id = 'check' className = 'verified__mark' / >
< / s p a n > < / a >
2019-10-25 07:44:42 +11:00
< a href = { proof . get ( 'profile_url' ) } target = '_blank' rel = 'noopener noreferrer' > < span dangerouslySetInnerHTML = { { _ _html : ' ' + proof . get ( 'provider_username' ) } } / > < / a >
2019-03-29 04:01:09 +11:00
< / d d >
< / d l >
) ) }
2019-03-26 10:36:25 +11:00
{ fields . map ( ( pair , i ) => (
< dl key = { i } >
< dt dangerouslySetInnerHTML = { { _ _html : pair . get ( 'name_emojified' ) } } title = { pair . get ( 'name' ) } / >
2018-04-14 20:41:08 +10:00
2019-03-26 10:36:25 +11:00
< dd className = { pair . get ( 'verified_at' ) && 'verified' } title = { pair . get ( 'value_plain' ) } >
{ pair . get ( 'verified_at' ) && < span title = { intl . formatMessage ( messages . linkVerifiedOn , { date : intl . formatDate ( pair . get ( 'verified_at' ) , dateFormatOptions ) } ) } > < Icon id = 'check' className = 'verified__mark' / > < /span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} / >
< / d d >
< / d l >
) ) }
< / d i v >
) }
2020-07-07 09:24:03 +10:00
{ account . get ( 'id' ) !== me && < AccountNoteContainer account = { account } / > }
2019-03-26 10:36:25 +11:00
{ account . get ( 'note' ) . length > 0 && account . get ( 'note' ) !== '<p></p>' && < div className = 'account__header__content' dangerouslySetInnerHTML = { content } / > }
< / d i v >
< div className = 'account__header__extra__links' >
< NavLink isActive = { this . isStatusesPageActive } activeClassName = 'active' to = { ` /accounts/ ${ account . get ( 'id' ) } ` } title = { intl . formatNumber ( account . get ( 'statuses_count' ) ) } >
2020-07-06 22:27:32 +10:00
< ShortNumber
value = { account . get ( 'statuses_count' ) }
renderer = { counterRenderer ( 'statuses' ) }
/ >
2019-03-26 10:36:25 +11:00
< / N a v L i n k >
< NavLink exact activeClassName = 'active' to = { ` /accounts/ ${ account . get ( 'id' ) } /following ` } title = { intl . formatNumber ( account . get ( 'following_count' ) ) } >
2020-07-06 22:27:32 +10:00
< ShortNumber
value = { account . get ( 'following_count' ) }
renderer = { counterRenderer ( 'following' ) }
/ >
2019-03-26 10:36:25 +11:00
< / N a v L i n k >
< NavLink exact activeClassName = 'active' to = { ` /accounts/ ${ account . get ( 'id' ) } /followers ` } title = { intl . formatNumber ( account . get ( 'followers_count' ) ) } >
2020-07-06 22:27:32 +10:00
< ShortNumber
value = { account . get ( 'followers_count' ) }
renderer = { counterRenderer ( 'followers' ) }
/ >
2019-03-26 10:36:25 +11:00
< / N a v L i n k >
< / d i v >
< / d i v >
2016-09-19 02:18:46 +10:00
< / d i v >
< / d i v >
) ;
}
2017-04-22 04:05:35 +10:00
}