2017-05-03 10:04:16 +10:00
import React from 'react' ;
2021-02-11 10:53:12 +11:00
import { connect } from 'react-redux' ;
2017-04-11 12:28:52 +10:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2017-04-22 04:05:35 +10:00
import PropTypes from 'prop-types' ;
2017-04-12 05:24:17 +10:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-04-11 12:28:52 +10:00
import Button from '../../../components/button' ;
2017-04-12 05:24:17 +10:00
import StatusContent from '../../../components/status_content' ;
2023-05-09 11:11:56 +10:00
import { Avatar } from '../../../components/avatar' ;
import { RelativeTimestamp } from '../../../components/relative_timestamp' ;
2017-04-12 05:24:17 +10:00
import DisplayName from '../../../components/display_name' ;
2017-05-03 10:04:16 +10:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2023-05-09 11:11:56 +10:00
import { Icon } from 'mastodon/components/icon' ;
2019-06-14 01:04:52 +10:00
import AttachmentList from 'mastodon/components/attachment_list' ;
2021-02-11 10:53:12 +11:00
import PrivacyDropdown from 'mastodon/features/compose/components/privacy_dropdown' ;
2020-07-12 23:22:48 +10:00
import classNames from 'classnames' ;
2021-02-11 10:53:12 +11:00
import { changeBoostPrivacy } from 'mastodon/actions/boosts' ;
2017-04-11 12:28:52 +10:00
const messages = defineMessages ( {
2019-05-10 06:39:27 +10:00
cancel _reblog : { id : 'status.cancel_reblog_private' , defaultMessage : 'Unboost' } ,
2017-05-21 01:31:47 +10:00
reblog : { id : 'status.reblog' , defaultMessage : 'Boost' } ,
2020-07-12 23:22:48 +10:00
public _short : { id : 'privacy.public.short' , defaultMessage : 'Public' } ,
unlisted _short : { id : 'privacy.unlisted.short' , defaultMessage : 'Unlisted' } ,
private _short : { id : 'privacy.private.short' , defaultMessage : 'Followers-only' } ,
direct _short : { id : 'privacy.direct.short' , defaultMessage : 'Direct' } ,
2017-04-11 12:28:52 +10:00
} ) ;
2021-02-11 10:53:12 +11:00
const mapStateToProps = state => {
return {
privacy : state . getIn ( [ 'boosts' , 'new' , 'privacy' ] ) ,
} ;
} ;
const mapDispatchToProps = dispatch => {
return {
onChangeBoostPrivacy ( value ) {
dispatch ( changeBoostPrivacy ( value ) ) ;
} ,
} ;
} ;
2018-09-15 01:59:48 +10:00
class BoostModal extends ImmutablePureComponent {
2017-04-11 12:28:52 +10:00
2017-05-12 22:44:10 +10:00
static contextTypes = {
2017-05-21 01:31:47 +10:00
router : PropTypes . object ,
2017-05-12 22:44:10 +10:00
} ;
static propTypes = {
status : ImmutablePropTypes . map . isRequired ,
onReblog : PropTypes . func . isRequired ,
onClose : PropTypes . func . isRequired ,
2021-02-11 10:53:12 +11:00
onChangeBoostPrivacy : PropTypes . func . isRequired ,
privacy : PropTypes . string . isRequired ,
2017-05-21 01:31:47 +10:00
intl : PropTypes . object . isRequired ,
2017-05-12 22:44:10 +10:00
} ;
2017-06-01 12:20:10 +10:00
componentDidMount ( ) {
this . button . focus ( ) ;
}
2017-05-12 22:44:10 +10:00
handleReblog = ( ) => {
2021-02-11 10:53:12 +11:00
this . props . onReblog ( this . props . status , this . props . privacy ) ;
2017-04-11 12:28:52 +10:00
this . props . onClose ( ) ;
2023-01-30 11:45:35 +11:00
} ;
2017-04-11 12:28:52 +10:00
2017-05-12 22:44:10 +10:00
handleAccountClick = ( e ) => {
2018-08-18 20:50:32 +10:00
if ( e . button === 0 && ! ( e . ctrlKey || e . metaKey ) ) {
2017-04-12 05:24:17 +10:00
e . preventDefault ( ) ;
this . props . onClose ( ) ;
2021-09-26 13:46:13 +10:00
this . context . router . history . push ( ` /@ ${ this . props . status . getIn ( [ 'account' , 'acct' ] ) } ` ) ;
2017-04-12 05:24:17 +10:00
}
2023-01-30 11:45:35 +11:00
} ;
2017-04-11 12:28:52 +10:00
2021-02-11 10:53:12 +11:00
_findContainer = ( ) => {
return document . getElementsByClassName ( 'modal-root__container' ) [ 0 ] ;
} ;
2017-06-01 12:20:10 +10:00
setRef = ( c ) => {
this . button = c ;
2023-01-30 11:45:35 +11:00
} ;
2017-06-01 12:20:10 +10:00
2017-04-11 12:28:52 +10:00
render ( ) {
2021-02-11 10:53:12 +11:00
const { status , privacy , intl } = this . props ;
2019-05-10 06:39:27 +10:00
const buttonText = status . get ( 'reblogged' ) ? messages . cancel _reblog : messages . reblog ;
2017-04-11 12:28:52 +10:00
2020-07-12 23:22:48 +10:00
const visibilityIconInfo = {
'public' : { icon : 'globe' , text : intl . formatMessage ( messages . public _short ) } ,
'unlisted' : { icon : 'unlock' , text : intl . formatMessage ( messages . unlisted _short ) } ,
'private' : { icon : 'lock' , text : intl . formatMessage ( messages . private _short ) } ,
2022-05-06 08:41:56 +10:00
'direct' : { icon : 'at' , text : intl . formatMessage ( messages . direct _short ) } ,
2020-07-12 23:22:48 +10:00
} ;
const visibilityIcon = visibilityIconInfo [ status . get ( 'visibility' ) ] ;
2017-04-11 12:28:52 +10:00
return (
< div className = 'modal-root__modal boost-modal' >
2017-04-12 05:24:17 +10:00
< div className = 'boost-modal__container' >
2020-07-12 23:22:48 +10:00
< div className = { classNames ( 'status' , ` status- ${ status . get ( 'visibility' ) } ` , 'light' ) } >
2022-10-26 04:02:21 +11:00
< div className = 'status__info' >
2023-02-14 01:12:14 +11:00
< a href = { ` /@ ${ status . getIn ( [ 'account' , 'acct' ] ) } / ${ status . get ( 'id' ) } ` } className = 'status__relative-time' target = '_blank' rel = 'noopener noreferrer' >
2022-10-26 04:02:21 +11:00
< span className = 'status__visibility-icon' > < Icon id = { visibilityIcon . icon } title = { visibilityIcon . text } / > < / span >
< RelativeTimestamp timestamp = { status . get ( 'created_at' ) } / >
< / a >
2017-04-12 05:24:17 +10:00
2022-11-14 07:10:20 +11:00
< a onClick = { this . handleAccountClick } href = { ` /@ ${ status . getIn ( [ 'account' , 'acct' ] ) } ` } className = 'status__display-name' >
2017-04-23 12:26:55 +10:00
< div className = 'status__avatar' >
2017-08-08 03:44:55 +10:00
< Avatar account = { status . get ( 'account' ) } size = { 48 } / >
2017-04-12 05:24:17 +10:00
< / div >
< DisplayName account = { status . get ( 'account' ) } / >
< / a >
< / div >
< StatusContent status = { status } / >
2019-06-14 01:04:52 +10:00
{ status . get ( 'media_attachments' ) . size > 0 && (
< AttachmentList
compact
media = { status . get ( 'media_attachments' ) }
/ >
) }
2017-04-12 05:24:17 +10:00
< / div >
2017-04-11 12:28:52 +10:00
< / div >
2017-04-12 05:24:17 +10:00
< div className = 'boost-modal__action-bar' >
2019-02-01 10:14:05 +11:00
< div > < FormattedMessage id = 'boost_modal.combo' defaultMessage = 'You can press {combo} to skip this next time' values = { { combo : < span > Shift + < Icon id = 'retweet' / > < / span > } } / > < / div >
2021-02-11 10:53:12 +11:00
{ status . get ( 'visibility' ) !== 'private' && ! status . get ( 'reblogged' ) && (
< PrivacyDropdown
noDirect
value = { privacy }
container = { this . _findContainer }
onChange = { this . props . onChangeBoostPrivacy }
/ >
) }
2019-05-10 06:39:27 +10:00
< Button text = { intl . formatMessage ( buttonText ) } onClick = { this . handleReblog } ref = { this . setRef } / >
2017-04-11 12:28:52 +10:00
< / div >
< / div >
) ;
}
2017-04-22 04:05:35 +10:00
}
2023-03-24 13:17:53 +11:00
export default connect ( mapStateToProps , mapDispatchToProps ) ( injectIntl ( BoostModal ) ) ;