2018-05-25 16:46:28 +00:00
import Immutable from 'immutable' ;
2017-05-03 00:04:16 +00:00
import React from 'react' ;
2017-02-18 01:37:59 +00:00
import { connect } from 'react-redux' ;
2017-04-21 18:05:35 +00:00
import PropTypes from 'prop-types' ;
2017-11-07 13:24:55 +00:00
import classNames from 'classnames' ;
2017-02-18 01:37:59 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2019-07-02 14:03:54 +00:00
import { createSelector } from 'reselect' ;
2023-02-13 14:12:31 +00:00
import {
fetchStatus ,
muteStatus ,
unmuteStatus ,
deleteStatus ,
editStatus ,
hideStatus ,
revealStatus ,
translateStatus ,
undoStatusTranslation ,
} from '../../actions/statuses' ;
2022-10-20 12:35:29 +00:00
import LoadingIndicator from 'mastodon/components/loading_indicator' ;
2017-02-18 01:37:59 +00:00
import DetailedStatus from './components/detailed_status' ;
import ActionBar from './components/action_bar' ;
import Column from '../ui/components/column' ;
import {
favourite ,
unfavourite ,
2019-11-13 22:02:10 +00:00
bookmark ,
unbookmark ,
2017-02-18 01:37:59 +00:00
reblog ,
2017-05-20 15:31:47 +00:00
unreblog ,
2017-08-24 23:41:18 +00:00
pin ,
unpin ,
2017-02-18 01:37:59 +00:00
} from '../../actions/interactions' ;
2016-10-24 15:11:02 +00:00
import {
replyCompose ,
2017-05-20 15:31:47 +00:00
mentionCompose ,
2018-04-09 15:09:11 +00:00
directCompose ,
2017-02-18 01:37:59 +00:00
} from '../../actions/compose' ;
2019-11-19 20:24:16 +00:00
import {
unblockAccount ,
unmuteAccount ,
} from '../../actions/accounts' ;
import {
blockDomain ,
unblockDomain ,
} from '../../actions/domain_blocks' ;
2017-12-25 19:56:05 +00:00
import { initMuteModal } from '../../actions/mutes' ;
2019-09-29 19:46:05 +00:00
import { initBlockModal } from '../../actions/blocks' ;
2021-02-10 23:53:12 +00:00
import { initBoostModal } from '../../actions/boosts' ;
2017-02-14 19:59:26 +00:00
import { initReport } from '../../actions/reports' ;
2020-12-07 18:36:36 +00:00
import { makeGetStatus , makeGetPictureInPicture } from '../../selectors' ;
2021-07-13 13:45:17 +00:00
import ScrollContainer from 'mastodon/containers/scroll_container' ;
2018-03-11 08:52:59 +00:00
import ColumnHeader from '../../components/column_header' ;
2017-02-18 01:37:59 +00:00
import StatusContainer from '../../containers/status_container' ;
2017-04-01 20:11:28 +00:00
import { openModal } from '../../actions/modal' ;
2019-11-19 20:24:16 +00:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2017-05-03 00:04:16 +00:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2017-10-05 23:07:59 +00:00
import { HotKeys } from 'react-hotkeys' ;
2022-10-09 01:55:09 +00:00
import { boostModal , deleteModal } from '../../initial_state' ;
2018-07-29 14:52:06 +00:00
import { attachFullscreenListener , detachFullscreenListener , isFullscreen } from '../ui/util/fullscreen' ;
2019-05-26 11:48:16 +00:00
import { textForScreenReader , defaultMediaVisibility } from '../../components/status' ;
2023-05-09 01:11:56 +00:00
import { Icon } from 'mastodon/components/icon' ;
2022-09-29 02:39:33 +00:00
import { Helmet } from 'react-helmet' ;
2023-04-12 10:44:58 +00:00
import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error' ;
2017-04-23 02:39:50 +00:00
const messages = defineMessages ( {
deleteConfirm : { id : 'confirmations.delete.confirm' , defaultMessage : 'Delete' } ,
2017-05-20 15:31:47 +00:00
deleteMessage : { id : 'confirmations.delete.message' , defaultMessage : 'Are you sure you want to delete this status?' } ,
2018-06-04 22:17:38 +00:00
redraftConfirm : { id : 'confirmations.redraft.confirm' , defaultMessage : 'Delete & redraft' } ,
2018-08-25 11:27:56 +00:00
redraftMessage : { id : 'confirmations.redraft.message' , defaultMessage : 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' } ,
2018-03-11 08:52:59 +00:00
revealAll : { id : 'status.show_more_all' , defaultMessage : 'Show more for all' } ,
hideAll : { id : 'status.show_less_all' , defaultMessage : 'Show less for all' } ,
2023-04-24 06:07:19 +00:00
statusTitleWithAttachments : { id : 'status.title.with_attachments' , defaultMessage : '{user} posted {attachmentCount, plural, one {an attachment} other {# attachments}}' } ,
2018-08-23 15:26:21 +00:00
detailedStatus : { id : 'status.detailed_status' , defaultMessage : 'Detailed conversation view' } ,
2018-10-05 16:44:44 +00:00
replyConfirm : { id : 'confirmations.reply.confirm' , defaultMessage : 'Reply' } ,
replyMessage : { id : 'confirmations.reply.message' , defaultMessage : 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' } ,
2019-11-19 20:24:16 +00:00
blockDomainConfirm : { id : 'confirmations.domain_block.confirm' , defaultMessage : 'Hide entire domain' } ,
2017-04-23 02:39:50 +00:00
} ) ;
2016-09-15 22:21:51 +00:00
2016-10-24 15:11:02 +00:00
const makeMapStateToProps = ( ) => {
const getStatus = makeGetStatus ( ) ;
2020-12-07 18:36:36 +00:00
const getPictureInPicture = makeGetPictureInPicture ( ) ;
2016-10-24 15:11:02 +00:00
2019-07-02 14:03:54 +00:00
const getAncestorsIds = createSelector ( [
( _ , { id } ) => id ,
state => state . getIn ( [ 'contexts' , 'inReplyTos' ] ) ,
] , ( statusId , inReplyTos ) => {
2018-05-25 16:46:28 +00:00
let ancestorsIds = Immutable . List ( ) ;
2019-07-02 14:03:54 +00:00
ancestorsIds = ancestorsIds . withMutations ( mutable => {
let id = statusId ;
2021-11-25 22:46:39 +00:00
while ( id && ! mutable . includes ( id ) ) {
2019-07-02 14:03:54 +00:00
mutable . unshift ( id ) ;
id = inReplyTos . get ( id ) ;
}
} ) ;
return ancestorsIds ;
} ) ;
const getDescendantsIds = createSelector ( [
( _ , { id } ) => id ,
state => state . getIn ( [ 'contexts' , 'replies' ] ) ,
2019-08-29 23:57:38 +00:00
state => state . get ( 'statuses' ) ,
] , ( statusId , contextReplies , statuses ) => {
let descendantsIds = [ ] ;
const ids = [ statusId ] ;
2018-05-25 16:46:28 +00:00
2019-08-29 23:57:38 +00:00
while ( ids . length > 0 ) {
2021-11-25 22:46:39 +00:00
let id = ids . pop ( ) ;
2019-08-29 23:57:38 +00:00
const replies = contextReplies . get ( id ) ;
2018-05-25 16:46:28 +00:00
2019-08-29 23:57:38 +00:00
if ( statusId !== id ) {
descendantsIds . push ( id ) ;
}
2018-05-25 16:46:28 +00:00
2019-08-29 23:57:38 +00:00
if ( replies ) {
replies . reverse ( ) . forEach ( reply => {
2021-11-25 22:46:39 +00:00
if ( ! ids . includes ( reply ) && ! descendantsIds . includes ( reply ) && statusId !== reply ) ids . push ( reply ) ;
2019-08-29 23:57:38 +00:00
} ) ;
2019-07-02 14:03:54 +00:00
}
2019-08-29 23:57:38 +00:00
}
let insertAt = descendantsIds . findIndex ( ( id ) => statuses . get ( id ) . get ( 'in_reply_to_account_id' ) !== statuses . get ( id ) . get ( 'account' ) ) ;
if ( insertAt !== - 1 ) {
descendantsIds . forEach ( ( id , idx ) => {
if ( idx > insertAt && statuses . get ( id ) . get ( 'in_reply_to_account_id' ) === statuses . get ( id ) . get ( 'account' ) ) {
descendantsIds . splice ( idx , 1 ) ;
descendantsIds . splice ( insertAt , 0 , id ) ;
insertAt += 1 ;
}
} ) ;
}
2018-05-28 00:42:06 +00:00
2019-08-29 23:57:38 +00:00
return Immutable . List ( descendantsIds ) ;
2019-07-02 14:03:54 +00:00
} ) ;
2018-05-25 16:46:28 +00:00
2019-07-02 14:03:54 +00:00
const mapStateToProps = ( state , props ) => {
const status = getStatus ( state , { id : props . params . statusId } ) ;
2020-12-07 18:36:36 +00:00
let ancestorsIds = Immutable . List ( ) ;
2019-07-02 14:03:54 +00:00
let descendantsIds = Immutable . List ( ) ;
2018-06-04 02:19:16 +00:00
2019-07-02 14:03:54 +00:00
if ( status ) {
2020-12-07 18:36:36 +00:00
ancestorsIds = getAncestorsIds ( state , { id : status . get ( 'in_reply_to_id' ) } ) ;
2019-07-02 14:03:54 +00:00
descendantsIds = getDescendantsIds ( state , { id : status . get ( 'id' ) } ) ;
2018-05-25 16:46:28 +00:00
}
return {
2022-10-20 12:35:29 +00:00
isLoading : state . getIn ( [ 'statuses' , props . params . statusId , 'isLoading' ] ) ,
2018-05-25 16:46:28 +00:00
status ,
ancestorsIds ,
descendantsIds ,
2018-10-05 16:44:44 +00:00
askReplyConfirmation : state . getIn ( [ 'compose' , 'text' ] ) . trim ( ) . length !== 0 ,
2019-01-17 13:06:08 +00:00
domain : state . getIn ( [ 'meta' , 'domain' ] ) ,
2020-12-07 18:36:36 +00:00
pictureInPicture : getPictureInPicture ( state , { id : props . params . statusId } ) ,
2018-05-25 16:46:28 +00:00
} ;
} ;
2016-10-24 15:11:02 +00:00
return mapStateToProps ;
} ;
2016-09-15 22:21:51 +00:00
2022-09-29 02:39:33 +00:00
const truncate = ( str , num ) => {
if ( str . length > num ) {
return str . slice ( 0 , num ) + '…' ;
} else {
return str ;
}
} ;
2023-04-14 15:29:09 +00:00
const titleFromStatus = ( intl , status ) => {
2022-09-29 02:39:33 +00:00
const displayName = status . getIn ( [ 'account' , 'display_name' ] ) ;
const username = status . getIn ( [ 'account' , 'username' ] ) ;
2023-04-14 15:29:09 +00:00
const user = displayName . trim ( ) . length === 0 ? username : displayName ;
2022-09-29 02:39:33 +00:00
const text = status . get ( 'search_index' ) ;
2023-04-14 15:29:09 +00:00
const attachmentCount = status . get ( 'media_attachments' ) . size ;
2022-09-29 02:39:33 +00:00
2023-04-14 15:29:09 +00:00
return text ? ` ${ user } : " ${ truncate ( text , 30 ) } " ` : intl . formatMessage ( messages . statusTitleWithAttachments , { user , attachmentCount } ) ;
2022-09-29 02:39:33 +00:00
} ;
2018-09-14 15:59:48 +00:00
class Status extends ImmutablePureComponent {
2017-04-21 18:05:35 +00:00
2017-05-12 12:44:10 +00:00
static contextTypes = {
2017-05-20 15:31:47 +00:00
router : PropTypes . object ,
2022-10-07 08:14:31 +00:00
identity : PropTypes . object ,
2017-05-12 12:44:10 +00:00
} ;
static propTypes = {
params : PropTypes . object . isRequired ,
dispatch : PropTypes . func . isRequired ,
status : ImmutablePropTypes . map ,
2022-10-20 12:35:29 +00:00
isLoading : PropTypes . bool ,
2017-05-12 12:44:10 +00:00
ancestorsIds : ImmutablePropTypes . list ,
descendantsIds : ImmutablePropTypes . list ,
2017-05-20 15:31:47 +00:00
intl : PropTypes . object . isRequired ,
2018-10-05 16:44:44 +00:00
askReplyConfirmation : PropTypes . bool ,
2019-08-01 10:26:58 +00:00
multiColumn : PropTypes . bool ,
2019-01-17 13:06:08 +00:00
domain : PropTypes . string . isRequired ,
2020-12-07 18:36:36 +00:00
pictureInPicture : ImmutablePropTypes . contains ( {
inUse : PropTypes . bool ,
available : PropTypes . bool ,
} ) ,
2017-05-12 12:44:10 +00:00
} ;
2016-09-15 22:21:51 +00:00
2017-11-07 13:24:55 +00:00
state = {
fullscreen : false ,
2019-05-26 11:48:16 +00:00
showMedia : defaultMediaVisibility ( this . props . status ) ,
2019-05-29 14:33:15 +00:00
loadedStatusId : undefined ,
2017-11-07 13:24:55 +00:00
} ;
2023-05-10 07:05:32 +00:00
UNSAFE _componentWillMount ( ) {
Change IDs to strings rather than numbers in API JSON output (#5019)
* Fix JavaScript interface with long IDs
Somewhat predictably, the JS interface handled IDs as numbers, which in
JS are IEEE double-precision floats. This loses some precision when
working with numbers as large as those generated by the new ID scheme,
so we instead handle them here as strings. This is relatively simple,
and doesn't appear to have caused any problems, but should definitely
be tested more thoroughly than the built-in tests. Several days of use
appear to support this working properly.
BREAKING CHANGE:
The major(!) change here is that IDs are now returned as strings by the
REST endpoints, rather than as integers. In practice, relatively few
changes were required to make the existing JS UI work with this change,
but it will likely hit API clients pretty hard: it's an entirely
different type to consume. (The one API client I tested, Tusky, handles
this with no problems, however.)
Twitter ran into this issue when introducing Snowflake IDs, and decided
to instead introduce an `id_str` field in JSON responses. I have opted
to *not* do that, and instead force all IDs to 64-bit integers
represented by strings in one go. (I believe Twitter exacerbated their
problem by rolling out the changes three times: once for statuses, once
for DMs, and once for user IDs, as well as by leaving an integer ID
value in JSON. As they said, "If you’re using the `id` field with JSON
in a Javascript-related language, there is a very high likelihood that
the integers will be silently munged by Javascript interpreters. In most
cases, this will result in behavior such as being unable to load or
delete a specific direct message, because the ID you're sending to the
API is different than the actual identifier associated with the
message." [1]) However, given that this is a significant change for API
users, alternatives or a transition time may be appropriate.
1: https://blog.twitter.com/developer/en_us/a/2011/direct-messages-going-snowflake-on-sep-30-2011.html
* Additional fixes for stringified IDs in JSON
These should be the last two. These were identified using eslint to try
to identify any plain casts to JavaScript numbers. (Some such casts are
legitimate, but these were not.)
Adding the following to .eslintrc.yml will identify casts to numbers:
~~~
no-restricted-syntax:
- warn
- selector: UnaryExpression[operator='+'] > :not(Literal)
message: Avoid the use of unary +
- selector: CallExpression[callee.name='Number']
message: Casting with Number() may coerce string IDs to numbers
~~~
The remaining three casts appear legitimate: two casts to array indices,
one in a server to turn an environment variable into a number.
* Back out RelationshipsController Change
This was made to make a test a bit less flakey, but has nothing to
do with this branch.
* Change internal streaming payloads to stringified IDs as well
Per
https://github.com/tootsuite/mastodon/pull/5019#issuecomment-330736452
we need these changes to send deleted status IDs as strings, not
integers.
2017-09-20 12:53:48 +00:00
this . props . dispatch ( fetchStatus ( this . props . params . statusId ) ) ;
2017-04-21 18:05:35 +00:00
}
2016-09-15 22:21:51 +00:00
2017-11-07 13:24:55 +00:00
componentDidMount ( ) {
attachFullscreenListener ( this . onFullScreenChange ) ;
}
2023-05-10 07:05:32 +00:00
UNSAFE _componentWillReceiveProps ( nextProps ) {
2016-09-15 22:21:51 +00:00
if ( nextProps . params . statusId !== this . props . params . statusId && nextProps . params . statusId ) {
2017-10-11 17:21:44 +00:00
this . _scrolledIntoView = false ;
Change IDs to strings rather than numbers in API JSON output (#5019)
* Fix JavaScript interface with long IDs
Somewhat predictably, the JS interface handled IDs as numbers, which in
JS are IEEE double-precision floats. This loses some precision when
working with numbers as large as those generated by the new ID scheme,
so we instead handle them here as strings. This is relatively simple,
and doesn't appear to have caused any problems, but should definitely
be tested more thoroughly than the built-in tests. Several days of use
appear to support this working properly.
BREAKING CHANGE:
The major(!) change here is that IDs are now returned as strings by the
REST endpoints, rather than as integers. In practice, relatively few
changes were required to make the existing JS UI work with this change,
but it will likely hit API clients pretty hard: it's an entirely
different type to consume. (The one API client I tested, Tusky, handles
this with no problems, however.)
Twitter ran into this issue when introducing Snowflake IDs, and decided
to instead introduce an `id_str` field in JSON responses. I have opted
to *not* do that, and instead force all IDs to 64-bit integers
represented by strings in one go. (I believe Twitter exacerbated their
problem by rolling out the changes three times: once for statuses, once
for DMs, and once for user IDs, as well as by leaving an integer ID
value in JSON. As they said, "If you’re using the `id` field with JSON
in a Javascript-related language, there is a very high likelihood that
the integers will be silently munged by Javascript interpreters. In most
cases, this will result in behavior such as being unable to load or
delete a specific direct message, because the ID you're sending to the
API is different than the actual identifier associated with the
message." [1]) However, given that this is a significant change for API
users, alternatives or a transition time may be appropriate.
1: https://blog.twitter.com/developer/en_us/a/2011/direct-messages-going-snowflake-on-sep-30-2011.html
* Additional fixes for stringified IDs in JSON
These should be the last two. These were identified using eslint to try
to identify any plain casts to JavaScript numbers. (Some such casts are
legitimate, but these were not.)
Adding the following to .eslintrc.yml will identify casts to numbers:
~~~
no-restricted-syntax:
- warn
- selector: UnaryExpression[operator='+'] > :not(Literal)
message: Avoid the use of unary +
- selector: CallExpression[callee.name='Number']
message: Casting with Number() may coerce string IDs to numbers
~~~
The remaining three casts appear legitimate: two casts to array indices,
one in a server to turn an environment variable into a number.
* Back out RelationshipsController Change
This was made to make a test a bit less flakey, but has nothing to
do with this branch.
* Change internal streaming payloads to stringified IDs as well
Per
https://github.com/tootsuite/mastodon/pull/5019#issuecomment-330736452
we need these changes to send deleted status IDs as strings, not
integers.
2017-09-20 12:53:48 +00:00
this . props . dispatch ( fetchStatus ( nextProps . params . statusId ) ) ;
2016-09-15 22:21:51 +00:00
}
2019-05-26 11:48:16 +00:00
2022-11-28 15:42:04 +00:00
if ( nextProps . params . statusId && nextProps . ancestorsIds . size > this . props . ancestorsIds . size ) {
this . _scrolledIntoView = false ;
}
2019-05-29 14:33:15 +00:00
if ( nextProps . status && nextProps . status . get ( 'id' ) !== this . state . loadedStatusId ) {
this . setState ( { showMedia : defaultMediaVisibility ( nextProps . status ) , loadedStatusId : nextProps . status . get ( 'id' ) } ) ;
2019-05-25 21:20:51 +00:00
}
}
handleToggleMediaVisibility = ( ) => {
this . setState ( { showMedia : ! this . state . showMedia } ) ;
2023-01-30 00:45:35 +00:00
} ;
2016-09-15 22:21:51 +00:00
2017-05-12 12:44:10 +00:00
handleFavouriteClick = ( status ) => {
2022-10-07 08:14:31 +00:00
const { dispatch } = this . props ;
const { signedIn } = this . context . identity ;
if ( signedIn ) {
if ( status . get ( 'favourited' ) ) {
dispatch ( unfavourite ( status ) ) ;
} else {
dispatch ( favourite ( status ) ) ;
}
2017-02-17 01:33:10 +00:00
} else {
2022-10-07 08:14:31 +00:00
dispatch ( openModal ( 'INTERACTION' , {
type : 'favourite' ,
accountId : status . getIn ( [ 'account' , 'id' ] ) ,
url : status . get ( 'url' ) ,
} ) ) ;
2017-02-17 01:33:10 +00:00
}
2023-01-30 00:45:35 +00:00
} ;
2016-09-17 15:47:26 +00:00
2017-08-24 23:41:18 +00:00
handlePin = ( status ) => {
if ( status . get ( 'pinned' ) ) {
this . props . dispatch ( unpin ( status ) ) ;
} else {
this . props . dispatch ( pin ( status ) ) ;
}
2023-01-30 00:45:35 +00:00
} ;
2017-08-24 23:41:18 +00:00
2017-05-12 12:44:10 +00:00
handleReplyClick = ( status ) => {
2022-10-07 08:14:31 +00:00
const { askReplyConfirmation , dispatch , intl } = this . props ;
const { signedIn } = this . context . identity ;
if ( signedIn ) {
if ( askReplyConfirmation ) {
dispatch ( openModal ( 'CONFIRM' , {
message : intl . formatMessage ( messages . replyMessage ) ,
confirm : intl . formatMessage ( messages . replyConfirm ) ,
onConfirm : ( ) => dispatch ( replyCompose ( status , this . context . router . history ) ) ,
} ) ) ;
} else {
dispatch ( replyCompose ( status , this . context . router . history ) ) ;
}
2018-10-05 16:44:44 +00:00
} else {
2022-10-07 08:14:31 +00:00
dispatch ( openModal ( 'INTERACTION' , {
type : 'reply' ,
accountId : status . getIn ( [ 'account' , 'id' ] ) ,
url : status . get ( 'url' ) ,
} ) ) ;
2018-10-05 16:44:44 +00:00
}
2023-01-30 00:45:35 +00:00
} ;
2016-09-17 15:47:26 +00:00
2021-02-10 23:53:12 +00:00
handleModalReblog = ( status , privacy ) => {
this . props . dispatch ( reblog ( status , privacy ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-04-11 02:28:52 +00:00
2017-05-12 12:44:10 +00:00
handleReblogClick = ( status , e ) => {
2022-10-07 08:14:31 +00:00
const { dispatch } = this . props ;
const { signedIn } = this . context . identity ;
if ( signedIn ) {
if ( status . get ( 'reblogged' ) ) {
dispatch ( unreblog ( status ) ) ;
2017-04-11 12:34:14 +00:00
} else {
2022-10-07 08:14:31 +00:00
if ( ( e && e . shiftKey ) || ! boostModal ) {
this . handleModalReblog ( status ) ;
} else {
dispatch ( initBoostModal ( { status , onReblog : this . handleModalReblog } ) ) ;
}
2017-04-11 12:34:14 +00:00
}
2022-10-07 08:14:31 +00:00
} else {
dispatch ( openModal ( 'INTERACTION' , {
type : 'reblog' ,
accountId : status . getIn ( [ 'account' , 'id' ] ) ,
url : status . get ( 'url' ) ,
} ) ) ;
2017-02-17 01:33:10 +00:00
}
2023-01-30 00:45:35 +00:00
} ;
2016-09-17 15:47:26 +00:00
2019-11-13 22:02:10 +00:00
handleBookmarkClick = ( status ) => {
if ( status . get ( 'bookmarked' ) ) {
this . props . dispatch ( unbookmark ( status ) ) ;
} else {
this . props . dispatch ( bookmark ( status ) ) ;
}
2023-01-30 00:45:35 +00:00
} ;
2019-11-13 22:02:10 +00:00
2018-08-19 01:17:01 +00:00
handleDeleteClick = ( status , history , withRedraft = false ) => {
2017-04-23 02:39:50 +00:00
const { dispatch , intl } = this . props ;
2017-10-29 15:10:15 +00:00
if ( ! deleteModal ) {
2018-08-19 01:17:01 +00:00
dispatch ( deleteStatus ( status . get ( 'id' ) , history , withRedraft ) ) ;
2017-05-29 15:56:13 +00:00
} else {
dispatch ( openModal ( 'CONFIRM' , {
2018-06-04 22:17:38 +00:00
message : intl . formatMessage ( withRedraft ? messages . redraftMessage : messages . deleteMessage ) ,
confirm : intl . formatMessage ( withRedraft ? messages . redraftConfirm : messages . deleteConfirm ) ,
2018-08-19 01:17:01 +00:00
onConfirm : ( ) => dispatch ( deleteStatus ( status . get ( 'id' ) , history , withRedraft ) ) ,
2017-05-29 15:56:13 +00:00
} ) ) ;
}
2023-01-30 00:45:35 +00:00
} ;
2016-10-09 20:19:15 +00:00
2022-02-09 23:15:30 +00:00
handleEditClick = ( status , history ) => {
this . props . dispatch ( editStatus ( status . get ( 'id' ) , history ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2022-02-09 23:15:30 +00:00
2018-04-09 15:09:11 +00:00
handleDirectClick = ( account , router ) => {
this . props . dispatch ( directCompose ( account , router ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2018-04-09 15:09:11 +00:00
2017-05-12 12:44:10 +00:00
handleMentionClick = ( account , router ) => {
2017-01-30 20:40:55 +00:00
this . props . dispatch ( mentionCompose ( account , router ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2016-10-24 15:11:02 +00:00
2017-05-12 12:44:10 +00:00
handleOpenMedia = ( media , index ) => {
2020-11-27 02:24:11 +00:00
this . props . dispatch ( openModal ( 'MEDIA' , { statusId : this . props . status . get ( 'id' ) , media , index } ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2016-10-24 16:07:40 +00:00
2020-04-25 10:16:05 +00:00
handleOpenVideo = ( media , options ) => {
2020-11-27 02:24:11 +00:00
this . props . dispatch ( openModal ( 'VIDEO' , { statusId : this . props . status . get ( 'id' ) , media , options } ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-04-13 13:04:18 +00:00
2019-11-29 16:02:36 +00:00
handleHotkeyOpenMedia = e => {
2020-11-27 02:24:11 +00:00
const { status } = this . props ;
2019-11-29 16:02:36 +00:00
e . preventDefault ( ) ;
if ( status . get ( 'media_attachments' ) . size > 0 ) {
2020-11-27 02:24:11 +00:00
if ( status . getIn ( [ 'media_attachments' , 0 , 'type' ] ) === 'video' ) {
2020-04-25 10:16:05 +00:00
this . handleOpenVideo ( status . getIn ( [ 'media_attachments' , 0 ] ) , { startTime : 0 } ) ;
2019-11-29 16:02:36 +00:00
} else {
this . handleOpenMedia ( status . get ( 'media_attachments' ) , 0 ) ;
}
}
2023-01-30 00:45:35 +00:00
} ;
2019-11-29 16:02:36 +00:00
2017-12-25 19:56:05 +00:00
handleMuteClick = ( account ) => {
this . props . dispatch ( initMuteModal ( account ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-12-25 19:56:05 +00:00
handleConversationMuteClick = ( status ) => {
if ( status . get ( 'muted' ) ) {
this . props . dispatch ( unmuteStatus ( status . get ( 'id' ) ) ) ;
} else {
this . props . dispatch ( muteStatus ( status . get ( 'id' ) ) ) ;
}
2023-01-30 00:45:35 +00:00
} ;
2017-12-25 19:56:05 +00:00
2018-03-11 08:52:59 +00:00
handleToggleHidden = ( status ) => {
if ( status . get ( 'hidden' ) ) {
this . props . dispatch ( revealStatus ( status . get ( 'id' ) ) ) ;
} else {
this . props . dispatch ( hideStatus ( status . get ( 'id' ) ) ) ;
}
2023-01-30 00:45:35 +00:00
} ;
2018-03-11 08:52:59 +00:00
handleToggleAll = ( ) => {
const { status , ancestorsIds , descendantsIds } = this . props ;
const statusIds = [ status . get ( 'id' ) ] . concat ( ancestorsIds . toJS ( ) , descendantsIds . toJS ( ) ) ;
if ( status . get ( 'hidden' ) ) {
this . props . dispatch ( revealStatus ( statusIds ) ) ;
} else {
this . props . dispatch ( hideStatus ( statusIds ) ) ;
}
2023-01-30 00:45:35 +00:00
} ;
2018-03-11 08:52:59 +00:00
2022-09-23 21:00:12 +00:00
handleTranslate = status => {
const { dispatch } = this . props ;
if ( status . get ( 'translation' ) ) {
dispatch ( undoStatusTranslation ( status . get ( 'id' ) ) ) ;
} else {
dispatch ( translateStatus ( status . get ( 'id' ) ) ) ;
}
2023-01-30 00:45:35 +00:00
} ;
2022-09-23 21:00:12 +00:00
2019-03-26 16:34:02 +00:00
handleBlockClick = ( status ) => {
2019-09-29 19:46:05 +00:00
const { dispatch } = this . props ;
2019-03-26 16:34:02 +00:00
const account = status . get ( 'account' ) ;
2019-09-29 19:46:05 +00:00
dispatch ( initBlockModal ( account ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-12-25 19:56:05 +00:00
2017-05-12 12:44:10 +00:00
handleReport = ( status ) => {
2017-02-14 19:59:26 +00:00
this . props . dispatch ( initReport ( status . get ( 'account' ) , status ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-02-14 19:59:26 +00:00
2017-08-31 01:38:35 +00:00
handleEmbed = ( status ) => {
this . props . dispatch ( openModal ( 'EMBED' , { url : status . get ( 'url' ) } ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-08-31 01:38:35 +00:00
2019-11-19 20:24:16 +00:00
handleUnmuteClick = account => {
this . props . dispatch ( unmuteAccount ( account . get ( 'id' ) ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2019-11-19 20:24:16 +00:00
handleUnblockClick = account => {
this . props . dispatch ( unblockAccount ( account . get ( 'id' ) ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2019-11-19 20:24:16 +00:00
handleBlockDomainClick = domain => {
this . props . dispatch ( openModal ( 'CONFIRM' , {
message : < FormattedMessage id = 'confirmations.domain_block.message' defaultMessage = 'Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values = { { domain : < strong > { domain } < / strong > } } / > ,
confirm : this . props . intl . formatMessage ( messages . blockDomainConfirm ) ,
onConfirm : ( ) => this . props . dispatch ( blockDomain ( domain ) ) ,
} ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2019-11-19 20:24:16 +00:00
handleUnblockDomainClick = domain => {
this . props . dispatch ( unblockDomain ( domain ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2019-11-19 20:24:16 +00:00
2017-10-05 23:07:59 +00:00
handleHotkeyMoveUp = ( ) => {
this . handleMoveUp ( this . props . status . get ( 'id' ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
handleHotkeyMoveDown = ( ) => {
this . handleMoveDown ( this . props . status . get ( 'id' ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
handleHotkeyReply = e => {
e . preventDefault ( ) ;
this . handleReplyClick ( this . props . status ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
handleHotkeyFavourite = ( ) => {
this . handleFavouriteClick ( this . props . status ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
handleHotkeyBoost = ( ) => {
this . handleReblogClick ( this . props . status ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
handleHotkeyMention = e => {
e . preventDefault ( ) ;
2018-07-03 00:17:18 +00:00
this . handleMentionClick ( this . props . status . get ( 'account' ) ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
handleHotkeyOpenProfile = ( ) => {
2021-09-26 03:46:13 +00:00
this . context . router . history . push ( ` /@ ${ this . props . status . getIn ( [ 'account' , 'acct' ] ) } ` ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
2018-04-18 01:33:59 +00:00
handleHotkeyToggleHidden = ( ) => {
this . handleToggleHidden ( this . props . status ) ;
2023-01-30 00:45:35 +00:00
} ;
2018-04-18 01:33:59 +00:00
2019-05-25 21:20:51 +00:00
handleHotkeyToggleSensitive = ( ) => {
this . handleToggleMediaVisibility ( ) ;
2023-01-30 00:45:35 +00:00
} ;
2019-05-25 21:20:51 +00:00
2017-10-05 23:07:59 +00:00
handleMoveUp = id => {
const { status , ancestorsIds , descendantsIds } = this . props ;
if ( id === status . get ( 'id' ) ) {
2019-05-03 04:20:36 +00:00
this . _selectChild ( ancestorsIds . size - 1 , true ) ;
2017-10-05 23:07:59 +00:00
} else {
let index = ancestorsIds . indexOf ( id ) ;
if ( index === - 1 ) {
index = descendantsIds . indexOf ( id ) ;
2019-05-03 04:20:36 +00:00
this . _selectChild ( ancestorsIds . size + index , true ) ;
2017-10-05 23:07:59 +00:00
} else {
2019-05-03 04:20:36 +00:00
this . _selectChild ( index - 1 , true ) ;
2017-10-05 23:07:59 +00:00
}
}
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
handleMoveDown = id => {
const { status , ancestorsIds , descendantsIds } = this . props ;
if ( id === status . get ( 'id' ) ) {
2019-05-03 04:20:36 +00:00
this . _selectChild ( ancestorsIds . size + 1 , false ) ;
2017-10-05 23:07:59 +00:00
} else {
let index = ancestorsIds . indexOf ( id ) ;
if ( index === - 1 ) {
index = descendantsIds . indexOf ( id ) ;
2019-05-03 04:20:36 +00:00
this . _selectChild ( ancestorsIds . size + index + 2 , false ) ;
2017-10-05 23:07:59 +00:00
} else {
2019-05-03 04:20:36 +00:00
this . _selectChild ( index + 1 , false ) ;
2017-10-05 23:07:59 +00:00
}
}
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
2019-05-03 04:20:36 +00:00
_selectChild ( index , align _top ) {
const container = this . node ;
const element = container . querySelectorAll ( '.focusable' ) [ index ] ;
2017-10-05 23:07:59 +00:00
if ( element ) {
2019-05-03 04:20:36 +00:00
if ( align _top && container . scrollTop > element . offsetTop ) {
element . scrollIntoView ( true ) ;
} else if ( ! align _top && container . scrollTop + container . clientHeight < element . offsetTop + element . offsetHeight ) {
element . scrollIntoView ( false ) ;
}
2017-10-05 23:07:59 +00:00
element . focus ( ) ;
}
}
2023-04-24 06:07:03 +00:00
renderChildren ( list , ancestors ) {
const { params : { statusId } } = this . props ;
return list . map ( ( id , i ) => (
2017-10-05 23:07:59 +00:00
< StatusContainer
key = { id }
id = { id }
onMoveUp = { this . handleMoveUp }
onMoveDown = { this . handleMoveDown }
2018-06-29 13:34:36 +00:00
contextType = 'thread'
2023-04-24 06:07:03 +00:00
previousId = { i > 0 && list . get ( i - 1 ) }
nextId = { list . get ( i + 1 ) || ( ancestors && statusId ) }
rootId = { statusId }
2017-10-05 23:07:59 +00:00
/ >
) ) ;
}
setRef = c => {
this . node = c ;
2023-01-30 00:45:35 +00:00
} ;
2017-10-05 23:07:59 +00:00
componentDidUpdate ( ) {
2017-10-11 17:21:44 +00:00
if ( this . _scrolledIntoView ) {
return ;
}
2017-10-11 09:25:15 +00:00
const { status , ancestorsIds } = this . props ;
2017-10-05 23:07:59 +00:00
2017-10-11 09:25:15 +00:00
if ( status && ancestorsIds && ancestorsIds . size > 0 ) {
2017-10-11 17:21:44 +00:00
const element = this . node . querySelectorAll ( '.focusable' ) [ ancestorsIds . size - 1 ] ;
2018-08-17 12:07:38 +00:00
window . requestAnimationFrame ( ( ) => {
element . scrollIntoView ( true ) ;
} ) ;
2017-10-11 17:21:44 +00:00
this . _scrolledIntoView = true ;
2017-10-05 23:07:59 +00:00
}
2017-04-21 18:05:35 +00:00
}
2016-09-15 22:21:51 +00:00
2017-11-07 13:24:55 +00:00
componentWillUnmount ( ) {
detachFullscreenListener ( this . onFullScreenChange ) ;
}
onFullScreenChange = ( ) => {
this . setState ( { fullscreen : isFullscreen ( ) } ) ;
2023-01-30 00:45:35 +00:00
} ;
2017-11-07 13:24:55 +00:00
2016-09-15 22:21:51 +00:00
render ( ) {
2016-10-24 15:11:02 +00:00
let ancestors , descendants ;
2022-10-20 12:35:29 +00:00
const { isLoading , status , ancestorsIds , descendantsIds , intl , domain , multiColumn , pictureInPicture } = this . props ;
2017-11-07 13:24:55 +00:00
const { fullscreen } = this . state ;
2016-09-15 22:21:51 +00:00
2022-10-20 12:35:29 +00:00
if ( isLoading ) {
return (
< Column >
< LoadingIndicator / >
< / Column >
) ;
}
2016-09-15 22:21:51 +00:00
if ( status === null ) {
2016-10-07 14:00:11 +00:00
return (
2023-04-12 10:44:58 +00:00
< BundleColumnError multiColumn = { multiColumn } errorType = 'routing' / >
2016-10-07 14:00:11 +00:00
) ;
2016-09-15 22:21:51 +00:00
}
2016-10-30 14:06:43 +00:00
if ( ancestorsIds && ancestorsIds . size > 0 ) {
2023-04-24 06:07:03 +00:00
ancestors = < > { this . renderChildren ( ancestorsIds , true ) } < / > ;
2016-10-24 15:11:02 +00:00
}
2016-10-30 14:06:43 +00:00
if ( descendantsIds && descendantsIds . size > 0 ) {
2023-04-12 10:44:58 +00:00
descendants = < > { this . renderChildren ( descendantsIds ) } < / > ;
2016-10-24 15:11:02 +00:00
}
2022-10-20 12:35:29 +00:00
const isLocal = status . getIn ( [ 'account' , 'acct' ] , '' ) . indexOf ( '@' ) === - 1 ;
const isIndexable = ! status . getIn ( [ 'account' , 'noindex' ] ) ;
2017-10-05 23:07:59 +00:00
const handlers = {
moveUp : this . handleHotkeyMoveUp ,
moveDown : this . handleHotkeyMoveDown ,
reply : this . handleHotkeyReply ,
favourite : this . handleHotkeyFavourite ,
boost : this . handleHotkeyBoost ,
mention : this . handleHotkeyMention ,
openProfile : this . handleHotkeyOpenProfile ,
2018-04-18 01:33:59 +00:00
toggleHidden : this . handleHotkeyToggleHidden ,
2019-05-25 21:20:51 +00:00
toggleSensitive : this . handleHotkeyToggleSensitive ,
2019-11-29 16:02:36 +00:00
openMedia : this . handleHotkeyOpenMedia ,
2017-10-05 23:07:59 +00:00
} ;
2016-09-15 22:21:51 +00:00
return (
2019-08-01 17:17:17 +00:00
< Column bindToDocument = { ! multiColumn } label = { intl . formatMessage ( messages . detailedStatus ) } >
2018-03-11 08:52:59 +00:00
< ColumnHeader
showBackButton
2019-08-01 10:26:58 +00:00
multiColumn = { multiColumn }
2018-03-11 08:52:59 +00:00
extraButton = { (
2022-11-08 16:31:32 +00:00
< button type = 'button' className = 'column-header__button' title = { intl . formatMessage ( status . get ( 'hidden' ) ? messages . revealAll : messages . hideAll ) } aria - label = { intl . formatMessage ( status . get ( 'hidden' ) ? messages . revealAll : messages . hideAll ) } onClick = { this . handleToggleAll } > < Icon id = { status . get ( 'hidden' ) ? 'eye-slash' : 'eye' } / > < / button >
2018-03-11 08:52:59 +00:00
) }
/ >
2016-09-18 11:03:37 +00:00
2021-07-13 13:45:17 +00:00
< ScrollContainer scrollKey = 'thread' >
2018-10-30 05:33:02 +00:00
< div className = { classNames ( 'scrollable' , { fullscreen } ) } ref = { this . setRef } >
2016-10-24 15:11:02 +00:00
{ ancestors }
2016-09-18 11:03:37 +00:00
2017-10-05 23:07:59 +00:00
< HotKeys handlers = { handlers } >
2023-04-04 14:33:44 +00:00
< div className = { classNames ( 'focusable' , 'detailed-status__wrapper' , ` detailed-status__wrapper- ${ status . get ( 'visibility' ) } ` ) } tabIndex = { 0 } aria - label = { textForScreenReader ( intl , status , false ) } >
2017-10-05 23:07:59 +00:00
< DetailedStatus
2020-01-06 17:22:17 +00:00
key = { ` details- ${ status . get ( 'id' ) } ` }
2017-10-05 23:07:59 +00:00
status = { status }
onOpenVideo = { this . handleOpenVideo }
onOpenMedia = { this . handleOpenMedia }
2018-03-11 08:52:59 +00:00
onToggleHidden = { this . handleToggleHidden }
2022-09-23 21:00:12 +00:00
onTranslate = { this . handleTranslate }
2019-01-17 13:06:08 +00:00
domain = { domain }
2019-05-25 21:20:51 +00:00
showMedia = { this . state . showMedia }
onToggleMediaVisibility = { this . handleToggleMediaVisibility }
2020-12-07 18:36:36 +00:00
pictureInPicture = { pictureInPicture }
2017-10-05 23:07:59 +00:00
/ >
< ActionBar
2020-01-06 17:22:17 +00:00
key = { ` action-bar- ${ status . get ( 'id' ) } ` }
2017-10-05 23:07:59 +00:00
status = { status }
onReply = { this . handleReplyClick }
onFavourite = { this . handleFavouriteClick }
onReblog = { this . handleReblogClick }
2019-11-13 22:02:10 +00:00
onBookmark = { this . handleBookmarkClick }
2017-10-05 23:07:59 +00:00
onDelete = { this . handleDeleteClick }
2022-02-09 23:15:30 +00:00
onEdit = { this . handleEditClick }
2018-04-09 15:09:11 +00:00
onDirect = { this . handleDirectClick }
2017-10-05 23:07:59 +00:00
onMention = { this . handleMentionClick }
2017-12-25 19:56:05 +00:00
onMute = { this . handleMuteClick }
2019-11-19 20:24:16 +00:00
onUnmute = { this . handleUnmuteClick }
2017-12-25 19:56:05 +00:00
onMuteConversation = { this . handleConversationMuteClick }
onBlock = { this . handleBlockClick }
2019-11-19 20:24:16 +00:00
onUnblock = { this . handleUnblockClick }
onBlockDomain = { this . handleBlockDomainClick }
onUnblockDomain = { this . handleUnblockDomainClick }
2017-10-05 23:07:59 +00:00
onReport = { this . handleReport }
onPin = { this . handlePin }
onEmbed = { this . handleEmbed }
/ >
< / div >
< / HotKeys >
2016-10-19 16:20:19 +00:00
2016-10-24 15:11:02 +00:00
{ descendants }
2016-10-19 16:20:19 +00:00
< / div >
< / ScrollContainer >
2022-09-29 02:39:33 +00:00
< Helmet >
2023-04-14 15:29:09 +00:00
< title > { titleFromStatus ( intl , status ) } < / title >
2022-10-20 12:35:29 +00:00
< meta name = 'robots' content = { ( isLocal && isIndexable ) ? 'all' : 'noindex' } / >
2022-09-29 02:39:33 +00:00
< / Helmet >
2016-10-07 14:00:11 +00:00
< / Column >
2016-09-15 22:21:51 +00:00
) ;
}
2017-04-21 18:05:35 +00:00
}
2023-03-24 02:17:53 +00:00
export default injectIntl ( connect ( makeMapStateToProps ) ( Status ) ) ;