2017-11-17 22:11:18 -05: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' ;
2019-03-25 19:36:25 -04:00
import { autoPlayGif , me , isStaff } from 'flavours/glitch/util/initial_state' ;
2019-08-31 07:04:26 -04:00
import { preferencesLink , profileLink , accountAdminLink } from 'flavours/glitch/util/backend_links' ;
2018-03-29 08:43:20 -04:00
import classNames from 'classnames' ;
2019-03-25 19:36:25 -04:00
import Icon from 'flavours/glitch/components/icon' ;
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 13:19:50 -04:00
import AccountNoteContainer from '../containers/account_note_container' ;
2017-11-17 22:11:18 -05:00
const messages = defineMessages ( {
unfollow : { id : 'account.unfollow' , defaultMessage : 'Unfollow' } ,
follow : { id : 'account.follow' , defaultMessage : 'Follow' } ,
2019-08-08 02:56:55 -04:00
cancel _follow _request : { id : 'account.cancel_follow_request' , defaultMessage : 'Cancel follow request' } ,
2017-11-17 22:11:18 -05:00
requested : { id : 'account.requested' , defaultMessage : 'Awaiting approval. Click to cancel follow request' } ,
2018-03-05 05:09:29 -05:00
unblock : { id : 'account.unblock' , defaultMessage : 'Unblock @{name}' } ,
2018-09-21 01:25:46 -04:00
edit _profile : { id : 'account.edit_profile' , defaultMessage : 'Edit profile' } ,
2019-03-25 19:36:25 -04: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 17:20:49 -05:00
blockDomain : { id : 'account.block_domain' , defaultMessage : 'Block domain {domain}' } ,
unblockDomain : { id : 'account.unblock_domain' , defaultMessage : 'Unblock domain {domain}' } ,
2019-03-25 19:36:25 -04: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 04:13:21 -04:00
domain _blocks : { id : 'navigation_bar.domain_blocks' , defaultMessage : 'Blocked domains' } ,
2019-03-25 19:36:25 -04: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 13:19:50 -04:00
add _account _note : { id : 'account.add_account_note' , defaultMessage : 'Add note for @{name}' } ,
2017-11-17 22:11:18 -05:00
} ) ;
2018-09-21 01:37:37 -04:00
const dateFormatOptions = {
month : 'short' ,
day : 'numeric' ,
year : 'numeric' ,
hour12 : false ,
hour : '2-digit' ,
minute : '2-digit' ,
} ;
2019-03-25 19:36:25 -04:00
export default @ injectIntl
class Header extends ImmutablePureComponent {
2017-11-17 22:11:18 -05:00
static propTypes = {
account : ImmutablePropTypes . map ,
2019-03-28 13:01:09 -04:00
identity _props : ImmutablePropTypes . list ,
2017-11-17 22:11:18 -05:00
onFollow : PropTypes . func . isRequired ,
2018-03-05 05:09:29 -05:00
onBlock : PropTypes . func . isRequired ,
2020-06-30 13:19:50 -04:00
onEditAccountNote : PropTypes . func . isRequired ,
2017-11-17 22:11:18 -05:00
intl : PropTypes . object . isRequired ,
2019-03-25 19:36:25 -04:00
domain : PropTypes . string . isRequired ,
2017-11-17 22:11:18 -05:00
} ;
2018-09-21 01:25:46 -04:00
openEditProfile = ( ) => {
2019-08-31 07:04:26 -04:00
window . open ( profileLink , '_blank' ) ;
2018-09-21 01:25:46 -04:00
}
2019-07-21 12:10:40 -04: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 ;
}
2017-11-17 22:11:18 -05:00
render ( ) {
2019-03-28 13:01:09 -04:00
const { account , intl , domain , identity _proofs } = this . props ;
2017-11-17 22:11:18 -05:00
if ( ! account ) {
return null ;
}
2020-06-30 13:19:50 -04:00
const accountNote = account . getIn ( [ 'relationship' , 'note' ] ) ;
2019-03-25 19:36:25 -04:00
let info = [ ] ;
2017-11-17 22:11:18 -05:00
let actionBtn = '' ;
2019-03-25 19:36:25 -04:00
let lockedIcon = '' ;
let menu = [ ] ;
2017-11-17 22:11:18 -05:00
if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'followed_by' ] ) ) {
2019-03-25 19:36:25 -04:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.follows_you' defaultMessage = 'Follows you' / > < / s p a n > ) ;
2017-11-17 22:11:18 -05:00
}
2018-03-05 05:09:29 -05:00
else if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-25 19:36:25 -04:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.blocked' defaultMessage = 'Blocked' / > < / s p a n > ) ;
2018-03-05 05:09:29 -05:00
}
if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'muting' ] ) ) {
2019-03-25 19:36:25 -04:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.muted' defaultMessage = 'Muted' / > < / s p a n > ) ;
2018-03-05 05:09:29 -05:00
} else if ( me !== account . get ( 'id' ) && account . getIn ( [ 'relationship' , 'domain_blocking' ] ) ) {
2020-03-09 04:13:21 -04:00
info . push ( < span className = 'relationship-tag' > < FormattedMessage id = 'account.domain_blocked' defaultMessage = 'Domain blocked' / > < / s p a n > ) ;
2018-03-05 05:09:29 -05:00
}
2017-11-17 22:11:18 -05:00
if ( me !== account . get ( 'id' ) ) {
2018-08-27 11:43:55 -04:00
if ( ! account . get ( 'relationship' ) ) { // Wait until the relationship is loaded
actionBtn = '' ;
} else if ( account . getIn ( [ 'relationship' , 'requested' ] ) ) {
2019-08-08 02:56:55 -04:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . cancel _follow _request ) } title = { intl . formatMessage ( messages . requested ) } onClick = { this . props . onFollow } / > ;
2017-11-17 22:11:18 -05:00
} else if ( ! account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-25 19:36:25 -04: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 05:09:29 -05:00
} else if ( account . getIn ( [ 'relationship' , 'blocking' ] ) ) {
2019-03-25 19:36:25 -04:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . unblock , { name : account . get ( 'username' ) } ) } onClick = { this . props . onBlock } / > ;
2017-11-17 22:11:18 -05:00
}
2019-08-31 07:04:26 -04:00
} else if ( profileLink ) {
2019-03-25 19:36:25 -04:00
actionBtn = < Button className = 'logo-button' text = { intl . formatMessage ( messages . edit _profile ) } onClick = { this . openEditProfile } / > ;
2017-11-17 22:11:18 -05:00
}
2018-03-29 08:46:00 -04:00
if ( account . get ( 'moved' ) && ! account . getIn ( [ 'relationship' , 'following' ] ) ) {
2018-03-29 08:43:20 -04:00
actionBtn = '' ;
}
2019-03-25 19:36:25 -04:00
if ( account . get ( 'locked' ) ) {
2019-09-09 09:28:45 -04:00
lockedIcon = < Icon id = 'lock' title = { intl . formatMessage ( messages . account _locked ) } / > ;
2019-03-25 19:36:25 -04:00
}
2017-11-17 22:11:18 -05:00
2019-03-25 19:36:25 -04: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 ) ;
}
2017-11-17 22:11:18 -05:00
2019-03-25 19:36:25 -04:00
if ( 'share' in navigator ) {
menu . push ( { text : intl . formatMessage ( messages . share , { name : account . get ( 'username' ) } ) , action : this . handleShare } ) ;
menu . push ( null ) ;
}
2018-05-09 16:19:10 -04:00
2020-06-30 13:19:50 -04:00
if ( accountNote === null ) {
menu . push ( { text : intl . formatMessage ( messages . add _account _note , { name : account . get ( 'username' ) } ) , action : this . props . onEditAccountNote } ) ;
}
2019-03-25 19:36:25 -04:00
if ( account . get ( 'id' ) === me ) {
2019-08-31 07:04:26 -04: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 19:36:25 -04: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' } ) ;
} else {
if ( account . getIn ( [ 'relationship' , 'following' ] ) ) {
2020-05-13 15:20:45 -04: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-25 19:36:25 -04: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 16:19:10 -04:00
2019-03-25 19:36:25 -04: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-17 22:11:18 -05:00
2019-03-25 19:36:25 -04: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 10:24:15 -04:00
2019-03-25 19:36:25 -04:00
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 } ) ;
}
}
2019-08-31 07:04:26 -04:00
if ( account . get ( 'id' ) !== me && isStaff && accountAdminLink ) {
2019-03-25 19:36:25 -04:00
menu . push ( null ) ;
2019-08-31 07:04:26 -04:00
menu . push ( { text : intl . formatMessage ( messages . admin _account , { name : account . get ( 'username' ) } ) , href : accountAdminLink ( account . get ( 'id' ) ) } ) ;
2019-03-25 19:36:25 -04:00
}
const content = { _ _html : account . get ( 'note_emojified' ) } ;
const displayNameHtml = { _ _html : account . get ( 'display_name_html' ) } ;
const fields = account . get ( 'fields' ) ;
const acct = account . get ( 'acct' ) . indexOf ( '@' ) === - 1 && domain ? ` ${ account . get ( 'acct' ) } @ ${ domain } ` : account . get ( 'acct' ) ;
2019-12-04 14:36:33 -05: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 19:36:25 -04:00
return (
2019-07-21 12:10:40 -04:00
< div className = { classNames ( 'account__header' , { inactive : ! ! account . get ( 'moved' ) } ) } ref = { this . setRef } >
2019-03-25 19:36:25 -04:00
< div className = 'account__header__image' >
< div className = 'account__header__info' >
2017-11-17 22:11:18 -05:00
{ info }
< / d i v >
2019-03-25 19:36:25 -04:00
< img src = { autoPlayGif ? account . get ( 'header' ) : account . get ( 'header_static' ) } alt = '' className = 'parallax' / >
2017-11-17 22:11:18 -05:00
< / d i v >
2019-03-25 19:36:25 -04:00
< div className = 'account__header__bar' >
< div className = 'account__header__tabs' >
2019-10-24 16:44:42 -04:00
< a className = 'avatar' href = { account . get ( 'url' ) } rel = 'noopener noreferrer' target = '_blank' >
2019-03-25 19:36:25 -04:00
< Avatar account = { account } size = { 90 } / >
< / a >
< div className = 'spacer' / >
< div className = 'account__header__tabs__buttons' >
{ actionBtn }
2019-03-26 18:05:21 -04:00
2019-09-10 07:57:05 -04:00
< DropdownMenuContainer items = { menu } icon = 'ellipsis-v' size = { 24 } direction = 'right' / >
2019-03-25 19:36:25 -04:00
< / d i v >
< / 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 >
2020-06-30 13:19:50 -04:00
< AccountNoteContainer account = { account } / >
2019-03-25 19:36:25 -04:00
< div className = 'account__header__extra' >
< div className = 'account__header__bio' >
2019-03-28 13:01:09 -04:00
{ ( fields . size > 0 || identity _proofs . size > 0 ) && (
2019-03-25 19:36:25 -04:00
< div className = 'account__header__fields' >
2019-03-28 13:01:09 -04:00
{ identity _proofs . map ( ( proof , i ) => (
< dl key = { i } >
< dt dangerouslySetInnerHTML = { { _ _html : proof . get ( 'provider' ) } } / >
< dd className = 'verified' >
2019-10-24 16:44:42 -04: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-28 13:01:09 -04:00
< Icon id = 'check' className = 'verified__mark' / >
< / s p a n > < / a >
2019-10-24 16:44:42 -04:00
< a href = { proof . get ( 'profile_url' ) } target = '_blank' rel = 'noopener noreferrer' > < span dangerouslySetInnerHTML = { { _ _html : ' ' + proof . get ( 'provider_username' ) } } / > < / a >
2019-03-28 13:01:09 -04:00
< / d d >
< / d l >
) ) }
2019-03-25 19:36:25 -04:00
{ 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' ) } >
{ 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 >
< / d i v >
< / d i v >
< / d i v >
2017-11-17 22:11:18 -05:00
) ;
}
}