2017-05-03 03:04:16 +03:00
import React from 'react' ;
2016-09-18 19:18:46 +03:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-04-21 21:05:35 +03:00
import PropTypes from 'prop-types' ;
2016-11-24 00:34:12 +02:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2019-03-26 01:36:25 +02:00
import Button from 'mastodon/components/button' ;
2017-05-03 03:04:16 +03:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2019-03-26 01:36:25 +02:00
import { autoPlayGif , me , isStaff } from 'mastodon/initial_state' ;
2017-11-18 20:39:02 +02:00
import classNames from 'classnames' ;
2019-02-01 01:14:05 +02:00
import Icon from 'mastodon/components/icon' ;
2019-03-26 01:36:25 +02:00
import Avatar from 'mastodon/components/avatar' ;
import { shortNumberFormat } from 'mastodon/utils/numbers' ;
import { NavLink } from 'react-router-dom' ;
import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container' ;
2016-11-24 00:34:12 +02:00
const messages = defineMessages ( {
unfollow : { id : 'account.unfollow' , defaultMessage : 'Unfollow' } ,
follow : { id : 'account.follow' , defaultMessage : 'Follow' } ,
2017-09-02 21:44:41 +03:00
requested : { id : 'account.requested' , defaultMessage : 'Awaiting approval. Click to cancel follow request' } ,
2018-03-05 06:09:35 +02:00
unblock : { id : 'account.unblock' , defaultMessage : 'Unblock @{name}' } ,
2018-05-30 19:41:47 +03:00
edit _profile : { id : 'account.edit_profile' , defaultMessage : 'Edit profile' } ,
2018-09-18 17:45:58 +03:00
linkVerifiedOn : { id : 'account.link_verified_on' , defaultMessage : 'Ownership of this link was checked on {date}' } ,
2018-12-01 15:25:15 +02: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 01:36:25 +02:00
mention : { id : 'account.mention' , defaultMessage : 'Mention @{name}' } ,
direct : { id : 'account.direct' , defaultMessage : 'Direct message @{name}' } ,
edit _profile : { id : 'account.edit_profile' , defaultMessage : 'Edit profile' } ,
unblock : { id : 'account.unblock' , defaultMessage : 'Unblock @{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' } ,
blockDomain : { id : 'account.block_domain' , defaultMessage : 'Hide everything from {domain}' } ,
unblockDomain : { id : 'account.unblock_domain' , defaultMessage : 'Unhide {domain}' } ,
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' } ,
domain _blocks : { id : 'navigation_bar.domain_blocks' , defaultMessage : 'Hidden domains' } ,
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 00:34:12 +02:00
} ) ;
2016-09-18 19:18:46 +03:00
2018-09-18 17:45:58 +03:00
const dateFormatOptions = {
month : 'short' ,
day : 'numeric' ,
year : 'numeric' ,
hour12 : false ,
hour : '2-digit' ,
minute : '2-digit' ,
} ;
2018-09-14 18:59:48 +03:00
export default @ injectIntl
class Header extends ImmutablePureComponent {
2016-09-18 19:18:46 +03:00
2017-05-12 15:44:10 +03:00
static propTypes = {
account : ImmutablePropTypes . map ,
onFollow : PropTypes . func . isRequired ,
2018-03-05 06:09:35 +02:00
onBlock : PropTypes . func . isRequired ,
2017-05-12 15:44:10 +03:00
intl : PropTypes . object . isRequired ,
2019-03-26 01:36:25 +02:00
domain : PropTypes . string . isRequired ,
2017-05-12 15:44:10 +03:00
} ;
2018-05-30 19:41:47 +03:00
openEditProfile = ( ) => {
window . open ( '/settings/profile' , '_blank' ) ;
}
2019-03-26 01:36:25 +02:00
isStatusesPageActive = ( match , location ) => {
if ( ! match ) {
return false ;
}
return ! location . pathname . match ( /\/(followers|following)\/?$/ ) ;
}
2016-09-18 19:18:46 +03:00
render ( ) {
2019-03-26 01:36:25 +02:00
const { account , intl , domain } = this . props ;
2016-09-18 19:18:46 +03:00
2017-02-21 01:10:49 +02:00
if ( ! account ) {
return null ;
}
2019-03-26 01:36:25 +02:00
let info = [ ] ;
2016-11-24 00:34:12 +02:00
let actionBtn = '' ;
2016-12-23 01:04:52 +02:00
let lockedIcon = '' ;
2019-03-26 01:36:25 +02:00
let menu = [ ] ;
2016-10-06 23:07:32 +03:00
2016-10-09 23:19:15 +03:00
if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'followed_by' ] ) ) {
2019-03-26 01:36:25 +02:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.follows_you' defaultMessage = 'Follows you' / > < / s p a n > ) ;
2018-03-05 06:09:35 +02:00
} else if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-26 01:36:25 +02:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.blocked' defaultMessage = 'Blocked' / > < / s p a n > ) ;
2018-03-05 06:09:35 +02:00
}
if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'muting' ] ) ) {
2019-03-26 01:36:25 +02:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.muted' defaultMessage = 'Muted' / > < / s p a n > ) ;
2018-03-05 17:45:36 +02:00
} else if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'domain_blocking' ] ) ) {
2019-03-26 01:36:25 +02:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.domain_blocked' defaultMessage = 'Domain hidden' / > < / s p a n > ) ;
2016-10-09 23:19:15 +03:00
}
2016-11-24 00:34:12 +02:00
if ( me !== account . get ( 'id' ) ) {
2018-08-25 23:46:59 +03:00
if ( ! account . get ( 'relationship' ) ) { // Wait until the relationship is loaded
actionBtn = '' ;
} else if ( account . getIn ( [ 'relationship' , 'requested' ] ) ) {
2019-03-26 01:36:25 +02:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . requested ) } onClick = { this . props . onFollow } / > ;
2017-02-05 21:58:09 +02:00
} else if ( ! account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-26 01:36:25 +02:00
actionBtn = < Button 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 06:09:35 +02:00
} else if ( account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-26 01:36:25 +02:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . unblock , { name : account . get ( 'username' ) } ) } onClick = { this . props . onBlock } / > ;
2016-12-23 00:03:57 +02:00
}
2018-05-30 19:41:47 +03:00
} else {
2019-03-26 01:36:25 +02:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . edit _profile ) } onClick = { this . openEditProfile } / > ;
2016-11-24 00:34:12 +02:00
}
2018-01-15 19:42:15 +02:00
if ( account . get ( 'moved' ) && ! account . getIn ( [ 'relationship' , 'following' ] ) ) {
2017-11-18 20:39:02 +02:00
actionBtn = '' ;
}
2016-12-23 01:04:52 +02:00
if ( account . get ( 'locked' ) ) {
2019-02-01 01:14:05 +02:00
lockedIcon = < Icon id = 'lock' title = { intl . formatMessage ( messages . account _locked ) } / > ;
2016-12-23 01:04:52 +02:00
}
2019-03-26 01:36:25 +02: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' ] ) ) {
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 } ) ;
}
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-07 21:32:03 +03:00
const content = { _ _html : account . get ( 'note_emojified' ) } ;
const displayNameHtml = { _ _html : account . get ( 'display_name_html' ) } ;
2018-04-14 13:41:08 +03:00
const fields = account . get ( 'fields' ) ;
2019-03-26 01:36:25 +02:00
const badge = account . get ( 'bot' ) ? ( < div className = 'account-role bot' > < FormattedMessage id = 'account.badges.bot' defaultMessage = 'Bot' / > < / d i v > ) : n u l l ;
const acct = account . get ( 'acct' ) . indexOf ( '@' ) === - 1 && domain ? ` ${ account . get ( 'acct' ) } @ ${ domain } ` : account . get ( 'acct' ) ;
2016-11-07 02:14:12 +02:00
2016-09-18 19:18:46 +03:00
return (
2019-03-26 01:36:25 +02:00
< div className = { classNames ( 'account__header' , { inactive : ! ! account . get ( 'moved' ) } ) } >
< div className = 'account__header__image' >
< div className = 'account__header__info' >
{ info }
< / d i v >
2016-09-18 19:18:46 +03:00
2019-03-26 01:36:25 +02:00
< img src = { autoPlayGif ? account . get ( 'header' ) : account . get ( 'header_static' ) } alt = '' className = 'parallax' / >
< / d i v >
2018-05-07 10:31:07 +03:00
2019-03-26 01:36:25 +02:00
< div className = 'account__header__bar' >
< div className = 'account__header__tabs' >
2019-03-26 18:33:07 +02:00
< a className = 'avatar' href = { account . get ( 'url' ) } target = '_blank' >
2019-03-26 01:36:25 +02:00
< Avatar account = { account } size = { 90 } / >
< / a >
2018-05-07 10:31:07 +03:00
2019-03-26 01:36:25 +02:00
< div className = 'spacer' / >
2016-10-09 23:19:15 +03:00
2019-03-26 01:36:25 +02:00
< div className = 'account__header__tabs__buttons' >
< DropdownMenuContainer items = { menu } icon = 'ellipsis-v' size = { 24 } direction = 'right' / >
2018-09-18 17:45:58 +03:00
2019-03-26 01:36:25 +02:00
{ actionBtn }
2018-05-05 01:55:09 +03:00
< / d i v >
2019-03-26 01:36:25 +02: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' >
{ fields . size > 0 && (
< div className = 'account__header__fields' >
{ fields . map ( ( pair , i ) => (
< dl key = { i } >
< dt dangerouslySetInnerHTML = { { _ _html : pair . get ( 'name_emojified' ) } } title = { pair . get ( 'name' ) } / >
2018-04-14 13:41:08 +03:00
2019-03-26 01:36:25 +02: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 >
) }
{ 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' ) ) } >
< strong > { shortNumberFormat ( account . get ( 'statuses_count' ) ) } < /strong> <FormattedMessage id='account.posts' defaultMessage='Toots' / >
< / N a v L i n k >
< NavLink exact activeClassName = 'active' to = { ` /accounts/ ${ account . get ( 'id' ) } /following ` } title = { intl . formatNumber ( account . get ( 'following_count' ) ) } >
< strong > { shortNumberFormat ( account . get ( 'following_count' ) ) } < /strong> <FormattedMessage id='account.follows' defaultMessage='Follows' / >
< / N a v L i n k >
< NavLink exact activeClassName = 'active' to = { ` /accounts/ ${ account . get ( 'id' ) } /followers ` } title = { intl . formatNumber ( account . get ( 'followers_count' ) ) } >
< strong > { shortNumberFormat ( account . get ( 'followers_count' ) ) } < /strong> <FormattedMessage id='account.followers' defaultMessage='Followers' / >
< / N a v L i n k >
< / d i v >
< / d i v >
2016-09-18 19:18:46 +03:00
< / d i v >
< / d i v >
) ;
}
2017-04-21 21:05:35 +03:00
}