2017-11-18 03:11:18 +00:00
import React from 'react' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import PropTypes from 'prop-types' ;
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2022-10-09 01:55:09 +00:00
import { autoPlayGif , me , domain } from 'flavours/glitch/initial_state' ;
2022-10-11 08:41:15 +00:00
import { preferencesLink , profileLink , accountAdminLink } from 'flavours/glitch/utils/backend_links' ;
2018-03-29 12:43:20 +00:00
import classNames from 'classnames' ;
2019-03-25 23:36:25 +00:00
import Icon from 'flavours/glitch/components/icon' ;
2020-09-18 15:26:45 +00:00
import IconButton from 'flavours/glitch/components/icon_button' ;
2019-03-25 23:36:25 +00:00
import Avatar from 'flavours/glitch/components/avatar' ;
import Button from 'flavours/glitch/components/button' ;
import { NavLink } from 'react-router-dom' ;
import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container' ;
2020-06-30 17:19:50 +00:00
import AccountNoteContainer from '../containers/account_note_container' ;
2022-12-15 17:50:11 +00:00
import FollowRequestNoteContainer from '../containers/follow_request_note_container' ;
2022-07-05 00:41:40 +00:00
import { PERMISSION _MANAGE _USERS } from 'flavours/glitch/permissions' ;
2022-09-29 02:39:33 +00:00
import { Helmet } from 'react-helmet' ;
2017-11-18 03:11:18 +00:00
const messages = defineMessages ( {
unfollow : { id : 'account.unfollow' , defaultMessage : 'Unfollow' } ,
follow : { id : 'account.follow' , defaultMessage : 'Follow' } ,
2022-10-18 22:12:55 +00:00
cancel _follow _request : { id : 'account.cancel_follow_request' , defaultMessage : 'Withdraw follow request' } ,
2017-11-18 03:11:18 +00:00
requested : { id : 'account.requested' , defaultMessage : 'Awaiting approval. Click to cancel follow request' } ,
2018-03-05 10:09:29 +00:00
unblock : { id : 'account.unblock' , defaultMessage : 'Unblock @{name}' } ,
2018-09-21 05:25:46 +00:00
edit _profile : { id : 'account.edit_profile' , defaultMessage : 'Edit profile' } ,
2019-03-25 23:36:25 +00:00
linkVerifiedOn : { id : 'account.link_verified_on' , defaultMessage : 'Ownership of this link was checked on {date}' } ,
account _locked : { id : 'account.locked_info' , defaultMessage : 'This account privacy status is set to locked. The owner manually reviews who can follow them.' } ,
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-05 22:20:49 +00:00
blockDomain : { id : 'account.block_domain' , defaultMessage : 'Block domain {domain}' } ,
unblockDomain : { id : 'account.unblock_domain' , defaultMessage : 'Unblock domain {domain}' } ,
2019-03-25 23:36:25 +00:00
hideReblogs : { id : 'account.hide_reblogs' , defaultMessage : 'Hide boosts from @{name}' } ,
showReblogs : { id : 'account.show_reblogs' , defaultMessage : 'Show boosts from @{name}' } ,
2020-09-18 15:26:45 +00:00
enableNotifications : { id : 'account.enable_notifications' , defaultMessage : 'Notify me when @{name} posts' } ,
disableNotifications : { id : 'account.disable_notifications' , defaultMessage : 'Stop notifying me when @{name} posts' } ,
2022-05-03 08:59:23 +00:00
pins : { id : 'navigation_bar.pins' , defaultMessage : 'Pinned posts' } ,
2019-03-25 23:36:25 +00:00
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 08:13:21 +00:00
domain _blocks : { id : 'navigation_bar.domain_blocks' , defaultMessage : 'Blocked domains' } ,
2019-03-25 23:36:25 +00: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}' } ,
2020-06-30 17:19:50 +00:00
add _account _note : { id : 'account.add_account_note' , defaultMessage : 'Add note for @{name}' } ,
2022-09-20 21:51:21 +00:00
languages : { id : 'account.languages' , defaultMessage : 'Change subscribed languages' } ,
2022-11-10 07:49:35 +00:00
openOriginalPage : { id : 'account.open_original_page' , defaultMessage : 'Open original page' } ,
2017-11-18 03:11:18 +00:00
} ) ;
2022-09-29 02:39:33 +00:00
const titleFromAccount = account => {
const displayName = account . get ( 'display_name' ) ;
const acct = account . get ( 'acct' ) === account . get ( 'username' ) ? ` ${ account . get ( 'username' ) } @ ${ domain } ` : account . get ( 'acct' ) ;
const prefix = displayName . trim ( ) . length === 0 ? account . get ( 'username' ) : displayName ;
return ` ${ prefix } (@ ${ acct } ) ` ;
} ;
2018-09-21 05:37:37 +00:00
const dateFormatOptions = {
month : 'short' ,
day : 'numeric' ,
year : 'numeric' ,
hour12 : false ,
hour : '2-digit' ,
minute : '2-digit' ,
} ;
2019-03-25 23:36:25 +00:00
export default @ injectIntl
class Header extends ImmutablePureComponent {
2017-11-18 03:11:18 +00:00
2022-07-05 00:41:40 +00:00
static contextTypes = {
identity : PropTypes . object ,
} ;
2017-11-18 03:11:18 +00:00
static propTypes = {
account : ImmutablePropTypes . map ,
2019-03-28 17:01:09 +00:00
identity _props : ImmutablePropTypes . list ,
2017-11-18 03:11:18 +00:00
onFollow : PropTypes . func . isRequired ,
2018-03-05 10:09:29 +00:00
onBlock : PropTypes . func . isRequired ,
2020-08-02 09:20:02 +00:00
onMention : PropTypes . func . isRequired ,
onDirect : PropTypes . func . isRequired ,
onReblogToggle : PropTypes . func . isRequired ,
2020-09-18 15:26:45 +00:00
onNotifyToggle : PropTypes . func . isRequired ,
onReport : PropTypes . func . isRequired ,
2020-08-02 09:20:02 +00:00
onMute : PropTypes . func . isRequired ,
onBlockDomain : PropTypes . func . isRequired ,
onUnblockDomain : PropTypes . func . isRequired ,
onEndorseToggle : PropTypes . func . isRequired ,
onAddToList : PropTypes . func . isRequired ,
2020-06-30 17:19:50 +00:00
onEditAccountNote : PropTypes . func . isRequired ,
2022-09-20 21:51:21 +00:00
onChangeLanguages : PropTypes . func . isRequired ,
2022-10-07 08:14:31 +00:00
onInteractionModal : PropTypes . func . isRequired ,
2022-11-10 07:49:35 +00:00
onOpenAvatar : PropTypes . func . isRequired ,
2017-11-18 03:11:18 +00:00
intl : PropTypes . object . isRequired ,
2019-03-25 23:36:25 +00:00
domain : PropTypes . string . isRequired ,
2022-05-10 07:44:35 +00:00
hidden : PropTypes . bool ,
2017-11-18 03:11:18 +00:00
} ;
2018-09-21 05:25:46 +00:00
openEditProfile = ( ) => {
2019-08-31 11:04:26 +00:00
window . open ( profileLink , '_blank' ) ;
2018-09-21 05:25:46 +00:00
}
2021-01-31 20:25:31 +00:00
handleMouseEnter = ( { currentTarget } ) => {
if ( autoPlayGif ) {
2019-07-21 16:10:40 +00:00
return ;
}
2021-01-31 20:25:31 +00:00
const emojis = currentTarget . querySelectorAll ( '.custom-emoji' ) ;
2019-07-21 16:10:40 +00:00
for ( var i = 0 ; i < emojis . length ; i ++ ) {
let emoji = emojis [ i ] ;
2021-01-31 20:25:31 +00:00
emoji . src = emoji . getAttribute ( 'data-original' ) ;
2019-07-21 16:10:40 +00:00
}
}
2021-01-31 20:25:31 +00:00
handleMouseLeave = ( { currentTarget } ) => {
if ( autoPlayGif ) {
return ;
}
2019-07-21 16:10:40 +00:00
2021-01-31 20:25:31 +00:00
const emojis = currentTarget . querySelectorAll ( '.custom-emoji' ) ;
2019-07-21 16:10:40 +00:00
2021-01-31 20:25:31 +00:00
for ( var i = 0 ; i < emojis . length ; i ++ ) {
let emoji = emojis [ i ] ;
emoji . src = emoji . getAttribute ( 'data-static' ) ;
}
2019-07-21 16:10:40 +00:00
}
2022-11-10 07:49:35 +00:00
handleAvatarClick = e => {
if ( e . button === 0 && ! ( e . ctrlKey || e . metaKey ) ) {
e . preventDefault ( ) ;
this . props . onOpenAvatar ( ) ;
}
}
2022-11-27 19:42:17 +00:00
handleShare = ( ) => {
const { account } = this . props ;
navigator . share ( {
text : ` ${ titleFromAccount ( account ) } \n ${ account . get ( 'note_plain' ) } ` ,
url : account . get ( 'url' ) ,
} ) . catch ( ( e ) => {
if ( e . name !== 'AbortError' ) console . error ( e ) ;
} ) ;
}
2017-11-18 03:11:18 +00:00
render ( ) {
2022-05-10 07:44:35 +00:00
const { account , hidden , intl , domain } = this . props ;
2022-09-29 02:39:33 +00:00
const { signedIn } = this . context . identity ;
2017-11-18 03:11:18 +00:00
if ( ! account ) {
return null ;
}
2020-06-30 17:19:50 +00:00
const accountNote = account . getIn ( [ 'relationship' , 'note' ] ) ;
2022-11-10 07:49:35 +00:00
const suspended = account . get ( 'suspended' ) ;
const isRemote = account . get ( 'acct' ) !== account . get ( 'username' ) ;
const remoteDomain = isRemote ? account . get ( 'acct' ) . split ( '@' ) [ 1 ] : null ;
2020-09-09 22:07:19 +00:00
2019-03-25 23:36:25 +00:00
let info = [ ] ;
2017-11-18 03:11:18 +00:00
let actionBtn = '' ;
2020-09-18 15:26:45 +00:00
let bellBtn = '' ;
2019-03-25 23:36:25 +00:00
let lockedIcon = '' ;
let menu = [ ] ;
2017-11-18 03:11:18 +00:00
if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'followed_by' ] ) ) {
2019-03-25 23:36:25 +00:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.follows_you' defaultMessage = 'Follows you' / > < / s p a n > ) ;
2017-11-18 03:11:18 +00:00
}
2018-03-05 10:09:29 +00:00
else if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-25 23:36:25 +00:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.blocked' defaultMessage = 'Blocked' / > < / s p a n > ) ;
2018-03-05 10:09:29 +00:00
}
if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'muting' ] ) ) {
2019-03-25 23:36:25 +00:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.muted' defaultMessage = 'Muted' / > < / s p a n > ) ;
2018-03-05 10:09:29 +00:00
} else if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'domain_blocking' ] ) ) {
2020-03-09 08:13:21 +00:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.domain_blocked' defaultMessage = 'Domain blocked' / > < / s p a n > ) ;
2018-03-05 10:09:29 +00:00
}
2017-11-18 03:11:18 +00:00
2020-12-26 22:50:34 +00:00
if ( account . getIn ( [ 'relationship' , 'requested' ] ) || account . getIn ( [ 'relationship' , 'following' ] ) ) {
bellBtn = < IconButton icon = 'bell-o' size = { 24 } active = { account . getIn ( [ 'relationship' , 'notifying' ] ) } title = { intl . formatMessage ( account . getIn ( [ 'relationship' , 'notifying' ] ) ? messages . disableNotifications : messages . enableNotifications , { name : account . get ( 'username' ) } ) } onClick = { this . props . onNotifyToggle } / > ;
}
2017-11-18 03:11:18 +00:00
if ( me !== account . get ( 'id' ) ) {
2022-09-29 02:39:33 +00:00
if ( signedIn && ! account . get ( 'relationship' ) ) { // Wait until the relationship is loaded
2018-08-27 15:43:55 +00:00
actionBtn = '' ;
} else if ( account . getIn ( [ 'relationship' , 'requested' ] ) ) {
2020-12-26 22:50:34 +00:00
actionBtn = < Button className = { classNames ( 'logo-button' , { 'button--with-bell' : bellBtn !== '' } ) } text = { intl . formatMessage ( messages . cancel _follow _request ) } title = { intl . formatMessage ( messages . requested ) } onClick = { this . props . onFollow } / > ;
2017-11-18 03:11:18 +00:00
} else if ( ! account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2022-10-07 08:14:31 +00:00
actionBtn = < Button className = { classNames ( 'logo-button' , { 'button--destructive' : account . getIn ( [ 'relationship' , 'following' ] ) , 'button--with-bell' : bellBtn !== '' } ) } text = { intl . formatMessage ( account . getIn ( [ 'relationship' , 'following' ] ) ? messages . unfollow : messages . follow ) } onClick = { signedIn ? this . props . onFollow : this . props . onInteractionModal } / > ;
2018-03-05 10:09:29 +00:00
} else if ( account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-25 23:36:25 +00:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . unblock , { name : account . get ( 'username' ) } ) } onClick = { this . props . onBlock } / > ;
2017-11-18 03:11:18 +00:00
}
2019-08-31 11:04:26 +00:00
} else if ( profileLink ) {
2019-03-25 23:36:25 +00:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . edit _profile ) } onClick = { this . openEditProfile } / > ;
2017-11-18 03:11:18 +00:00
}
2018-03-29 12:46:00 +00:00
if ( account . get ( 'moved' ) && ! account . getIn ( [ 'relationship' , 'following' ] ) ) {
2018-03-29 12:43:20 +00:00
actionBtn = '' ;
}
2020-09-09 22:07:19 +00:00
if ( suspended && ! account . getIn ( [ 'relationship' , 'following' ] ) ) {
actionBtn = '' ;
}
2019-03-25 23:36:25 +00:00
if ( account . get ( 'locked' ) ) {
2019-09-09 13:28:45 +00:00
lockedIcon = < Icon id = 'lock' title = { intl . formatMessage ( messages . account _locked ) } / > ;
2019-03-25 23:36:25 +00:00
}
2017-11-18 03:11:18 +00:00
2022-09-29 02:39:33 +00:00
if ( signedIn && account . get ( 'id' ) !== me && ! suspended ) {
2019-03-25 23:36:25 +00:00
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 ) ;
}
2017-11-18 03:11:18 +00:00
2022-11-10 07:49:35 +00:00
if ( isRemote ) {
menu . push ( { text : intl . formatMessage ( messages . openOriginalPage ) , href : account . get ( 'url' ) } ) ;
menu . push ( null ) ;
}
2020-09-09 22:07:19 +00:00
if ( 'share' in navigator && ! suspended ) {
2019-03-25 23:36:25 +00:00
menu . push ( { text : intl . formatMessage ( messages . share , { name : account . get ( 'username' ) } ) , action : this . handleShare } ) ;
menu . push ( null ) ;
}
2018-05-09 20:19:10 +00:00
2020-07-07 15:24:23 +00:00
if ( accountNote === null || accountNote === '' ) {
2020-06-30 17:19:50 +00:00
menu . push ( { text : intl . formatMessage ( messages . add _account _note , { name : account . get ( 'username' ) } ) , action : this . props . onEditAccountNote } ) ;
}
2019-03-25 23:36:25 +00:00
if ( account . get ( 'id' ) === me ) {
2019-08-31 11:04:26 +00:00
if ( profileLink ) menu . push ( { text : intl . formatMessage ( messages . edit _profile ) , href : profileLink } ) ;
if ( preferencesLink ) menu . push ( { text : intl . formatMessage ( messages . preferences ) , href : preferencesLink } ) ;
2019-03-25 23:36:25 +00:00
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' } ) ;
2022-09-29 02:39:33 +00:00
} else if ( signedIn ) {
2019-03-25 23:36:25 +00:00
if ( account . getIn ( [ 'relationship' , 'following' ] ) ) {
2020-05-13 19:20:45 +00: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 } ) ;
}
2022-09-20 21:51:21 +00:00
menu . push ( { text : intl . formatMessage ( messages . languages ) , action : this . props . onChangeLanguages } ) ;
menu . push ( null ) ;
2019-03-25 23:36:25 +00: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 ) ;
}
2018-05-09 20:19:10 +00:00
2019-03-25 23:36:25 +00:00
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 } ) ;
}
2017-11-18 03:11:18 +00:00
2019-03-25 23:36:25 +00:00
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 } ) ;
}
2018-04-29 14:24:15 +00:00
2019-03-25 23:36:25 +00:00
menu . push ( { text : intl . formatMessage ( messages . report , { name : account . get ( 'username' ) } ) , action : this . props . onReport } ) ;
}
2022-11-10 07:49:35 +00:00
if ( signedIn && isRemote ) {
2019-03-25 23:36:25 +00:00
menu . push ( null ) ;
if ( account . getIn ( [ 'relationship' , 'domain_blocking' ] ) ) {
2022-11-10 07:49:35 +00:00
menu . push ( { text : intl . formatMessage ( messages . unblockDomain , { domain : remoteDomain } ) , action : this . props . onUnblockDomain } ) ;
2019-03-25 23:36:25 +00:00
} else {
2022-11-10 07:49:35 +00:00
menu . push ( { text : intl . formatMessage ( messages . blockDomain , { domain : remoteDomain } ) , action : this . props . onBlockDomain } ) ;
2019-03-25 23:36:25 +00:00
}
}
2022-07-05 00:41:40 +00:00
if ( account . get ( 'id' ) !== me && ( this . context . identity . permissions & PERMISSION _MANAGE _USERS ) === PERMISSION _MANAGE _USERS && accountAdminLink ) {
2019-03-25 23:36:25 +00:00
menu . push ( null ) ;
2019-08-31 11:04:26 +00:00
menu . push ( { text : intl . formatMessage ( messages . admin _account , { name : account . get ( 'username' ) } ) , href : accountAdminLink ( account . get ( 'id' ) ) } ) ;
2019-03-25 23:36:25 +00:00
}
const content = { _ _html : account . get ( 'note_emojified' ) } ;
const displayNameHtml = { _ _html : account . get ( 'display_name_html' ) } ;
const fields = account . get ( 'fields' ) ;
2022-10-20 12:35:29 +00:00
const isLocal = account . get ( 'acct' ) . indexOf ( '@' ) === - 1 ;
const acct = isLocal && domain ? ` ${ account . get ( 'acct' ) } @ ${ domain } ` : account . get ( 'acct' ) ;
const isIndexable = ! account . get ( 'noindex' ) ;
2019-03-25 23:36:25 +00:00
2019-12-04 19:36:33 +00: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 ;
}
2019-03-25 23:36:25 +00:00
return (
2021-01-31 20:25:31 +00:00
< div className = { classNames ( 'account__header' , { inactive : ! ! account . get ( 'moved' ) } ) } onMouseEnter = { this . handleMouseEnter } onMouseLeave = { this . handleMouseLeave } >
2022-12-15 17:50:11 +00:00
{ ! ( suspended || hidden || account . get ( 'moved' ) ) && account . getIn ( [ 'relationship' , 'requested_by' ] ) && < FollowRequestNoteContainer account = { account } / > }
2019-03-25 23:36:25 +00:00
< div className = 'account__header__image' >
< div className = 'account__header__info' >
2017-11-18 03:11:18 +00:00
{ info }
< / d i v >
2019-03-25 23:36:25 +00:00
2022-05-10 07:44:35 +00:00
{ ! ( suspended || hidden ) && < img src = { autoPlayGif ? account . get ( 'header' ) : account . get ( 'header_static' ) } alt = '' className = 'parallax' / > }
2017-11-18 03:11:18 +00:00
< / d i v >
2019-03-25 23:36:25 +00:00
< div className = 'account__header__bar' >
< div className = 'account__header__tabs' >
2022-11-10 07:49:35 +00:00
< a className = 'avatar' href = { account . get ( 'avatar' ) } rel = 'noopener noreferrer' target = '_blank' onClick = { this . handleAvatarClick } >
2022-05-10 07:44:35 +00:00
< Avatar account = { suspended || hidden ? undefined : account } size = { 90 } / >
2019-03-25 23:36:25 +00:00
< / a >
2022-05-10 07:44:35 +00:00
{ ! suspended && (
< div className = 'account__header__tabs__buttons' >
{ ! hidden && (
< React . Fragment >
{ actionBtn }
{ bellBtn }
< / R e a c t . F r a g m e n t >
) }
2022-09-29 02:39:33 +00:00
< DropdownMenuContainer disabled = { menu . length === 0 } items = { menu } icon = 'ellipsis-v' size = { 24 } direction = 'right' / >
2022-05-10 07:44:35 +00:00
< / d i v >
) }
2019-03-25 23:36:25 +00:00
< / d i v >
< div className = 'account__header__tabs__name' >
< h1 >
< span dangerouslySetInnerHTML = { displayNameHtml } / > { badge }
2022-12-13 18:43:03 +00:00
< small >
< span > @ { acct } < / s p a n > { l o c k e d I c o n }
< / s m a l l >
2019-03-25 23:36:25 +00:00
< / h 1 >
< / d i v >
2022-09-29 02:39:33 +00:00
{ signedIn && < AccountNoteContainer account = { account } / > }
2020-06-30 17:19:50 +00:00
2022-05-10 07:44:35 +00:00
{ ! ( suspended || hidden ) && (
2020-09-09 22:07:19 +00:00
< div className = 'account__header__extra' >
< div className = 'account__header__bio' >
2021-11-26 04:58:18 +00:00
{ fields . size > 0 && (
2020-09-09 22:07:19 +00:00
< div className = 'account__header__fields' >
{ fields . map ( ( pair , i ) => (
< dl key = { i } >
< dt dangerouslySetInnerHTML = { { _ _html : pair . get ( 'name_emojified' ) } } title = { pair . get ( 'name' ) } / >
< dd className = { pair . get ( 'verified_at' ) && 'verified' } title = { pair . get ( 'value_plain' ) } >
2021-01-21 13:29:54 +00:00
{ 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') }} className='translate' / >
2020-09-09 22:07:19 +00:00
< / d d >
< / d l >
) ) }
< / d i v >
) }
2021-01-21 13:29:54 +00:00
{ account . get ( 'note' ) . length > 0 && account . get ( 'note' ) !== '<p></p>' && < div className = 'account__header__content translate' dangerouslySetInnerHTML = { content } / > }
2021-05-07 12:33:19 +00:00
< div className = 'account__header__joined' > < FormattedMessage id = 'account.joined' defaultMessage = 'Joined {date}' values = { { date : intl . formatDate ( account . get ( 'created_at' ) , { year : 'numeric' , month : 'short' , day : '2-digit' } ) } } / > < / d i v >
2020-09-09 22:07:19 +00:00
< / d i v >
2019-03-25 23:36:25 +00:00
< / d i v >
2020-09-09 22:07:19 +00:00
) }
< / d i v >
2022-09-29 02:39:33 +00:00
< Helmet >
2022-10-09 01:55:09 +00:00
< title > { titleFromAccount ( account ) } < / t i t l e >
2022-10-20 12:35:29 +00:00
< meta name = 'robots' content = { ( isLocal && isIndexable ) ? 'all' : 'noindex' } / >
2022-09-29 02:39:33 +00:00
< / H e l m e t >
2020-09-09 22:07:19 +00:00
< / d i v >
2017-11-18 03:11:18 +00:00
) ;
}
}