2018-11-30 03:17:56 -08:00
import Immutable from 'immutable' ;
2017-05-02 17:04:16 -07:00
import React from 'react' ;
2017-02-17 17:37:59 -08:00
import { connect } from 'react-redux' ;
2017-04-21 11:05:35 -07:00
import PropTypes from 'prop-types' ;
2017-11-07 05:24:55 -08:00
import classNames from 'classnames' ;
2017-02-17 17:37:59 -08:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2019-07-02 07:03:54 -07:00
import { createSelector } from 'reselect' ;
2023-02-13 11:09:01 -08:00
import {
fetchStatus ,
muteStatus ,
unmuteStatus ,
deleteStatus ,
editStatus ,
hideStatus ,
revealStatus ,
translateStatus ,
undoStatusTranslation ,
} from 'flavours/glitch/actions/statuses' ;
2017-12-03 23:26:40 -08:00
import MissingIndicator from 'flavours/glitch/components/missing_indicator' ;
2022-10-28 08:18:45 -07:00
import LoadingIndicator from 'flavours/glitch/components/loading_indicator' ;
2017-02-17 17:37:59 -08:00
import DetailedStatus from './components/detailed_status' ;
import ActionBar from './components/action_bar' ;
2017-12-03 23:26:40 -08:00
import Column from 'flavours/glitch/features/ui/components/column' ;
2017-02-17 17:37:59 -08:00
import {
favourite ,
unfavourite ,
2018-04-11 10:42:25 -07:00
bookmark ,
unbookmark ,
2017-02-17 17:37:59 -08:00
reblog ,
2017-05-20 08:31:47 -07:00
unreblog ,
2017-08-24 16:41:18 -07:00
pin ,
unpin ,
2017-12-03 23:26:40 -08:00
} from 'flavours/glitch/actions/interactions' ;
2016-10-24 08:11:02 -07:00
import {
replyCompose ,
2017-05-20 08:31:47 -07:00
mentionCompose ,
2018-04-10 12:38:02 -07:00
directCompose ,
2017-12-03 23:26:40 -08:00
} from 'flavours/glitch/actions/compose' ;
2018-11-27 09:25:51 -08:00
import { changeLocalSetting } from 'flavours/glitch/actions/local_settings' ;
2017-12-26 08:41:44 -08:00
import { initMuteModal } from 'flavours/glitch/actions/mutes' ;
2019-09-29 12:46:05 -07:00
import { initBlockModal } from 'flavours/glitch/actions/blocks' ;
2017-12-03 23:26:40 -08:00
import { initReport } from 'flavours/glitch/actions/reports' ;
2021-02-10 15:53:12 -08:00
import { initBoostModal } from 'flavours/glitch/actions/boosts' ;
2023-01-05 04:32:29 -08:00
import { makeGetStatus , makeGetPictureInPicture } from 'flavours/glitch/selectors' ;
2021-07-13 03:40:15 -07:00
import ScrollContainer from 'flavours/glitch/containers/scroll_container' ;
2017-12-03 23:26:40 -08:00
import ColumnBackButton from 'flavours/glitch/components/column_back_button' ;
2018-03-28 10:56:46 -07:00
import ColumnHeader from '../../components/column_header' ;
2017-12-03 23:26:40 -08:00
import StatusContainer from 'flavours/glitch/containers/status_container' ;
import { openModal } from 'flavours/glitch/actions/modal' ;
2019-09-29 12:46:05 -07:00
import { defineMessages , injectIntl } from 'react-intl' ;
2017-05-02 17:04:16 -07:00
import ImmutablePureComponent from 'react-immutable-pure-component' ;
2017-10-05 16:07:59 -07:00
import { HotKeys } from 'react-hotkeys' ;
2022-10-08 18:55:09 -07:00
import { boostModal , favouriteModal , deleteModal } from 'flavours/glitch/initial_state' ;
2022-10-11 01:51:33 -07:00
import { attachFullscreenListener , detachFullscreenListener , isFullscreen } from '../ui/util/fullscreen' ;
2022-10-11 01:41:15 -07:00
import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning' ;
2019-05-26 09:58:14 -07:00
import { textForScreenReader , defaultMediaVisibility } from 'flavours/glitch/components/status' ;
2019-09-09 07:41:41 -07:00
import Icon from 'flavours/glitch/components/icon' ;
2022-09-28 19:39:33 -07:00
import { Helmet } from 'react-helmet' ;
2017-04-22 19:39:50 -07:00
const messages = defineMessages ( {
deleteConfirm : { id : 'confirmations.delete.confirm' , defaultMessage : 'Delete' } ,
2017-05-20 08:31:47 -07:00
deleteMessage : { id : 'confirmations.delete.message' , defaultMessage : 'Are you sure you want to delete this status?' } ,
2018-06-15 12:29:04 -07:00
redraftConfirm : { id : 'confirmations.redraft.confirm' , defaultMessage : 'Delete & redraft' } ,
redraftMessage : { id : 'confirmations.redraft.message' , defaultMessage : 'Are you sure you want to delete this status and re-draft it? You will lose all replies, boosts and favourites to it.' } ,
2018-03-28 10:56:46 -07:00
revealAll : { id : 'status.show_more_all' , defaultMessage : 'Show more for all' } ,
hideAll : { id : 'status.show_less_all' , defaultMessage : 'Show less for all' } ,
2018-08-28 03:01:04 -07:00
detailedStatus : { id : 'status.detailed_status' , defaultMessage : 'Detailed conversation view' } ,
2018-10-05 08:46:35 -07: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?' } ,
2022-12-20 03:37:14 -08:00
tootHeading : { id : 'account.posts_with_replies' , defaultMessage : 'Posts and replies' } ,
2017-04-22 19:39:50 -07:00
} ) ;
2016-09-15 15:21:51 -07:00
2016-10-24 08:11:02 -07:00
const makeMapStateToProps = ( ) => {
const getStatus = makeGetStatus ( ) ;
2023-01-05 04:32:29 -08:00
const getPictureInPicture = makeGetPictureInPicture ( ) ;
2016-10-24 08:11:02 -07:00
2019-07-02 07:03:54 -07:00
const getAncestorsIds = createSelector ( [
( _ , { id } ) => id ,
state => state . getIn ( [ 'contexts' , 'inReplyTos' ] ) ,
] , ( statusId , inReplyTos ) => {
2018-11-30 03:17:56 -08:00
let ancestorsIds = Immutable . List ( ) ;
2019-07-02 07:03:54 -07:00
ancestorsIds = ancestorsIds . withMutations ( mutable => {
let id = statusId ;
2021-11-25 14:46:39 -08:00
while ( id && ! mutable . includes ( id ) ) {
2019-07-02 07:03:54 -07:00
mutable . unshift ( id ) ;
id = inReplyTos . get ( id ) ;
}
} ) ;
return ancestorsIds ;
} ) ;
const getDescendantsIds = createSelector ( [
( _ , { id } ) => id ,
state => state . getIn ( [ 'contexts' , 'replies' ] ) ,
2019-08-29 16:57:38 -07:00
state => state . get ( 'statuses' ) ,
] , ( statusId , contextReplies , statuses ) => {
let descendantsIds = [ ] ;
const ids = [ statusId ] ;
2018-11-30 03:17:56 -08:00
2019-08-29 16:57:38 -07:00
while ( ids . length > 0 ) {
2021-11-25 14:46:39 -08:00
let id = ids . pop ( ) ;
2019-08-29 16:57:38 -07:00
const replies = contextReplies . get ( id ) ;
2018-11-30 03:17:56 -08:00
2019-08-29 16:57:38 -07:00
if ( statusId !== id ) {
descendantsIds . push ( id ) ;
}
2018-11-30 03:17:56 -08:00
2019-08-29 16:57:38 -07:00
if ( replies ) {
replies . reverse ( ) . forEach ( reply => {
2021-11-25 14:46:39 -08:00
if ( ! ids . includes ( reply ) && ! descendantsIds . includes ( reply ) && statusId !== reply ) ids . push ( reply ) ;
2019-08-29 16:57:38 -07:00
} ) ;
2019-07-02 07:03:54 -07:00
}
2019-08-29 16:57:38 -07: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-11-30 03:24:12 -08:00
2019-08-29 16:57:38 -07:00
return Immutable . List ( descendantsIds ) ;
2019-07-02 07:03:54 -07:00
} ) ;
2018-11-30 03:17:56 -08:00
2019-07-02 07:03:54 -07:00
const mapStateToProps = ( state , props ) => {
const status = getStatus ( state , { id : props . params . statusId } ) ;
2023-01-05 04:32:29 -08:00
let ancestorsIds = Immutable . List ( ) ;
2019-07-02 07:03:54 -07:00
let descendantsIds = Immutable . List ( ) ;
2018-11-30 03:24:58 -08:00
2019-07-02 07:03:54 -07:00
if ( status ) {
2023-01-05 04:32:29 -08:00
ancestorsIds = getAncestorsIds ( state , { id : status . get ( 'in_reply_to_id' ) } ) ;
2019-07-02 07:03:54 -07:00
descendantsIds = getDescendantsIds ( state , { id : status . get ( 'id' ) } ) ;
2018-11-30 03:17:56 -08:00
}
return {
2022-10-20 05:35:29 -07:00
isLoading : state . getIn ( [ 'statuses' , props . params . statusId , 'isLoading' ] ) ,
2018-11-30 03:17:56 -08:00
status ,
ancestorsIds ,
descendantsIds ,
settings : state . get ( 'local_settings' ) ,
2018-11-27 09:25:51 -08:00
askReplyConfirmation : state . getIn ( [ 'local_settings' , 'confirm_before_clearing_draft' ] ) && state . getIn ( [ 'compose' , 'text' ] ) . trim ( ) . length !== 0 ,
2019-01-20 02:47:17 -08:00
domain : state . getIn ( [ 'meta' , 'domain' ] ) ,
2023-01-05 04:32:29 -08:00
pictureInPicture : getPictureInPicture ( state , { id : props . params . statusId } ) ,
2018-11-30 03:17:56 -08:00
} ;
} ;
2016-10-24 08:11:02 -07:00
return mapStateToProps ;
} ;
2016-09-15 15:21:51 -07:00
2022-09-28 19:39:33 -07:00
const truncate = ( str , num ) => {
if ( str . length > num ) {
return str . slice ( 0 , num ) + '…' ;
} else {
return str ;
}
} ;
const titleFromStatus = status => {
const displayName = status . getIn ( [ 'account' , 'display_name' ] ) ;
const username = status . getIn ( [ 'account' , 'username' ] ) ;
const prefix = displayName . trim ( ) . length === 0 ? username : displayName ;
const text = status . get ( 'search_index' ) ;
return ` ${ prefix } : " ${ truncate ( text , 30 ) } " ` ;
} ;
2019-09-09 06:16:08 -07:00
class Status extends ImmutablePureComponent {
2017-04-21 11:05:35 -07:00
2017-05-12 05:44:10 -07:00
static contextTypes = {
2017-05-20 08:31:47 -07:00
router : PropTypes . object ,
2022-10-07 01:14:31 -07:00
identity : PropTypes . object ,
2017-05-12 05:44:10 -07:00
} ;
static propTypes = {
params : PropTypes . object . isRequired ,
dispatch : PropTypes . func . isRequired ,
status : ImmutablePropTypes . map ,
2022-10-20 05:35:29 -07:00
isLoading : PropTypes . bool ,
2017-06-30 02:15:18 -07:00
settings : ImmutablePropTypes . map . isRequired ,
2017-05-12 05:44:10 -07:00
ancestorsIds : ImmutablePropTypes . list ,
descendantsIds : ImmutablePropTypes . list ,
2017-05-20 08:31:47 -07:00
intl : PropTypes . object . isRequired ,
2018-10-05 08:46:35 -07:00
askReplyConfirmation : PropTypes . bool ,
2019-08-01 03:26:58 -07:00
multiColumn : PropTypes . bool ,
2019-01-20 02:47:17 -08:00
domain : PropTypes . string . isRequired ,
2023-01-05 04:32:29 -08:00
pictureInPicture : ImmutablePropTypes . contains ( {
inUse : PropTypes . bool ,
available : PropTypes . bool ,
} ) ,
2017-05-12 05:44:10 -07:00
} ;
2016-09-15 15:21:51 -07:00
2017-11-07 05:24:55 -08:00
state = {
fullscreen : false ,
2018-08-28 08:16:30 -07:00
isExpanded : undefined ,
2018-08-28 05:10:26 -07:00
threadExpanded : undefined ,
2018-11-28 11:20:03 -08:00
statusId : undefined ,
2019-05-26 09:58:14 -07:00
loadedStatusId : undefined ,
showMedia : undefined ,
revealBehindCW : undefined ,
2017-11-07 05:24:55 -08:00
} ;
componentDidMount ( ) {
attachFullscreenListener ( this . onFullScreenChange ) ;
2018-11-28 11:20:03 -08:00
this . props . dispatch ( fetchStatus ( this . props . params . statusId ) ) ;
2018-11-30 08:14:01 -08:00
const { status , ancestorsIds } = this . props ;
if ( status && ancestorsIds && ancestorsIds . size > 0 ) {
const element = this . node . querySelectorAll ( '.focusable' ) [ ancestorsIds . size - 1 ] ;
window . requestAnimationFrame ( ( ) => {
element . scrollIntoView ( true ) ;
} ) ;
}
2017-11-07 05:24:55 -08:00
}
2018-11-28 11:20:03 -08:00
static getDerivedStateFromProps ( props , state ) {
2019-05-26 09:58:14 -07:00
let update = { } ;
let updated = false ;
if ( props . params . statusId && state . statusId !== props . params . statusId ) {
props . dispatch ( fetchStatus ( props . params . statusId ) ) ;
update . threadExpanded = undefined ;
update . statusId = props . params . statusId ;
updated = true ;
2016-09-15 15:21:51 -07:00
}
2018-11-28 11:20:03 -08:00
2019-05-26 09:58:14 -07:00
const revealBehindCW = props . settings . getIn ( [ 'media' , 'reveal_behind_cw' ] ) ;
if ( revealBehindCW !== state . revealBehindCW ) {
update . revealBehindCW = revealBehindCW ;
if ( revealBehindCW ) update . showMedia = defaultMediaVisibility ( props . status , props . settings ) ;
updated = true ;
}
2018-11-28 11:20:03 -08:00
2019-05-26 09:58:14 -07:00
if ( props . status && state . loadedStatusId !== props . status . get ( 'id' ) ) {
update . showMedia = defaultMediaVisibility ( props . status , props . settings ) ;
update . loadedStatusId = props . status . get ( 'id' ) ;
update . isExpanded = autoUnfoldCW ( props . settings , props . status ) ;
updated = true ;
}
return updated ? update : null ;
2017-04-21 11:05:35 -07:00
}
2016-09-15 15:21:51 -07:00
2022-07-24 11:01:30 -07:00
handleToggleHidden = ( ) => {
const { status } = this . props ;
if ( this . props . settings . getIn ( [ 'content_warnings' , 'shared_state' ] ) ) {
if ( status . get ( 'hidden' ) ) {
this . props . dispatch ( revealStatus ( status . get ( 'id' ) ) ) ;
} else {
this . props . dispatch ( hideStatus ( status . get ( 'id' ) ) ) ;
}
} else if ( this . props . status . get ( 'spoiler_text' ) ) {
2018-03-28 06:40:34 -07:00
this . setExpansion ( ! this . state . isExpanded ) ;
2017-11-27 14:05:03 -08:00
}
2023-02-03 11:52:07 -08:00
} ;
2017-11-27 14:05:03 -08:00
2019-05-26 09:58:14 -07:00
handleToggleMediaVisibility = ( ) => {
this . setState ( { showMedia : ! this . state . showMedia } ) ;
2023-02-03 11:52:07 -08:00
} ;
2019-05-26 09:58:14 -07:00
2017-12-09 08:26:22 -08:00
handleModalFavourite = ( status ) => {
this . props . dispatch ( favourite ( status ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-12-09 08:26:22 -08:00
handleFavouriteClick = ( status , e ) => {
2022-10-07 01:14:31 -07:00
const { dispatch } = this . props ;
const { signedIn } = this . context . identity ;
if ( signedIn ) {
if ( status . get ( 'favourited' ) ) {
dispatch ( unfavourite ( status ) ) ;
2017-12-09 08:26:22 -08:00
} else {
2022-10-07 01:14:31 -07:00
if ( ( e && e . shiftKey ) || ! favouriteModal ) {
this . handleModalFavourite ( status ) ;
} else {
dispatch ( openModal ( 'FAVOURITE' , { status , onFavourite : this . handleModalFavourite } ) ) ;
}
2017-12-09 08:26:22 -08:00
}
2022-10-07 01:14:31 -07:00
} else {
dispatch ( openModal ( 'INTERACTION' , {
type : 'favourite' ,
accountId : status . getIn ( [ 'account' , 'id' ] ) ,
url : status . get ( 'url' ) ,
} ) ) ;
2017-02-16 17:33:10 -08:00
}
2023-02-03 11:52:07 -08:00
} ;
2016-09-17 08:47:26 -07:00
2017-08-24 16:41:18 -07:00
handlePin = ( status ) => {
if ( status . get ( 'pinned' ) ) {
this . props . dispatch ( unpin ( status ) ) ;
} else {
this . props . dispatch ( pin ( status ) ) ;
}
2023-02-03 11:52:07 -08:00
} ;
2017-08-24 16:41:18 -07:00
2017-05-12 05:44:10 -07:00
handleReplyClick = ( status ) => {
2022-10-07 01:14:31 -07: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 ) ,
onDoNotAsk : ( ) => dispatch ( changeLocalSetting ( [ 'confirm_before_clearing_draft' ] , false ) ) ,
onConfirm : ( ) => dispatch ( replyCompose ( status , this . context . router . history ) ) ,
} ) ) ;
} else {
dispatch ( replyCompose ( status , this . context . router . history ) ) ;
}
2018-10-05 08:46:35 -07:00
} else {
2022-10-07 01:14:31 -07:00
dispatch ( openModal ( 'INTERACTION' , {
type : 'reply' ,
accountId : status . getIn ( [ 'account' , 'id' ] ) ,
url : status . get ( 'url' ) ,
} ) ) ;
2018-10-05 08:46:35 -07:00
}
2023-02-03 11:52:07 -08:00
} ;
2016-09-17 08:47:26 -07:00
2021-02-10 15:53:12 -08:00
handleModalReblog = ( status , privacy ) => {
2019-06-12 00:46:39 -07:00
const { dispatch } = this . props ;
if ( status . get ( 'reblogged' ) ) {
dispatch ( unreblog ( status ) ) ;
} else {
2021-02-10 15:53:12 -08:00
dispatch ( reblog ( status , privacy ) ) ;
2019-06-12 00:46:39 -07:00
}
2023-02-03 11:52:07 -08:00
} ;
2017-12-09 10:41:24 -08:00
2017-05-12 05:44:10 -07:00
handleReblogClick = ( status , e ) => {
2019-06-07 09:38:07 -07:00
const { settings , dispatch } = this . props ;
2022-10-07 01:14:31 -07:00
const { signedIn } = this . context . identity ;
2019-06-07 09:38:07 -07:00
2022-10-07 01:14:31 -07:00
if ( signedIn ) {
if ( settings . get ( 'confirm_boost_missing_media_description' ) && status . get ( 'media_attachments' ) . some ( item => ! item . get ( 'description' ) ) && ! status . get ( 'reblogged' ) ) {
dispatch ( initBoostModal ( { status , onReblog : this . handleModalReblog , missingMediaDescription : true } ) ) ;
} else if ( ( e && e . shiftKey ) || ! boostModal ) {
this . handleModalReblog ( status ) ;
} else {
dispatch ( initBoostModal ( { status , onReblog : this . handleModalReblog } ) ) ;
}
2017-02-16 17:33:10 -08:00
} else {
2022-10-07 01:14:31 -07:00
dispatch ( openModal ( 'INTERACTION' , {
type : 'reblog' ,
accountId : status . getIn ( [ 'account' , 'id' ] ) ,
url : status . get ( 'url' ) ,
} ) ) ;
2017-02-16 17:33:10 -08:00
}
2023-02-03 11:52:07 -08:00
} ;
2016-09-17 08:47:26 -07:00
2018-04-11 10:42:25 -07:00
handleBookmarkClick = ( status ) => {
if ( status . get ( 'bookmarked' ) ) {
this . props . dispatch ( unbookmark ( status ) ) ;
} else {
this . props . dispatch ( bookmark ( status ) ) ;
}
2023-02-03 11:52:07 -08:00
} ;
2018-04-11 10:42:25 -07:00
2018-08-31 07:41:58 -07:00
handleDeleteClick = ( status , history , withRedraft = false ) => {
2017-04-22 19:39:50 -07:00
const { dispatch , intl } = this . props ;
2017-10-29 08:10:15 -07:00
if ( ! deleteModal ) {
2018-08-31 07:41:58 -07:00
dispatch ( deleteStatus ( status . get ( 'id' ) , history , withRedraft ) ) ;
2017-05-29 08:56:13 -07:00
} else {
dispatch ( openModal ( 'CONFIRM' , {
2018-06-15 12:29:04 -07:00
message : intl . formatMessage ( withRedraft ? messages . redraftMessage : messages . deleteMessage ) ,
confirm : intl . formatMessage ( withRedraft ? messages . redraftConfirm : messages . deleteConfirm ) ,
2018-08-31 07:41:58 -07:00
onConfirm : ( ) => dispatch ( deleteStatus ( status . get ( 'id' ) , history , withRedraft ) ) ,
2017-05-29 08:56:13 -07:00
} ) ) ;
}
2023-02-03 11:52:07 -08:00
} ;
2016-10-09 13:19:15 -07:00
2022-02-09 15:15:30 -08:00
handleEditClick = ( status , history ) => {
this . props . dispatch ( editStatus ( status . get ( 'id' ) , history ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2022-02-09 15:15:30 -08:00
2018-04-10 12:38:02 -07:00
handleDirectClick = ( account , router ) => {
this . props . dispatch ( directCompose ( account , router ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2018-04-10 12:38:02 -07:00
2017-05-12 05:44:10 -07:00
handleMentionClick = ( account , router ) => {
2017-01-30 12:40:55 -08:00
this . props . dispatch ( mentionCompose ( account , router ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2016-10-24 08:11:02 -07:00
2017-05-12 05:44:10 -07:00
handleOpenMedia = ( media , index ) => {
2020-11-26 18:24:11 -08:00
this . props . dispatch ( openModal ( 'MEDIA' , { statusId : this . props . status . get ( 'id' ) , media , index } ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2016-10-24 09:07:40 -07:00
2020-04-25 03:16:05 -07:00
handleOpenVideo = ( media , options ) => {
2020-11-26 18:24:11 -08:00
this . props . dispatch ( openModal ( 'VIDEO' , { statusId : this . props . status . get ( 'id' ) , media , options } ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-04-13 06:04:18 -07:00
2019-11-29 08:02:36 -08:00
handleHotkeyOpenMedia = e => {
const { status } = this . props ;
e . preventDefault ( ) ;
if ( status . get ( 'media_attachments' ) . size > 0 ) {
2020-11-26 18:24:11 -08:00
if ( status . getIn ( [ 'media_attachments' , 0 , 'type' ] ) === 'video' ) {
2020-04-25 03:16:05 -07:00
this . handleOpenVideo ( status . getIn ( [ 'media_attachments' , 0 ] ) , { startTime : 0 } ) ;
2019-11-29 08:02:36 -08:00
} else {
this . handleOpenMedia ( status . get ( 'media_attachments' ) , 0 ) ;
}
}
2023-02-03 11:52:07 -08:00
} ;
2019-11-29 08:02:36 -08:00
2017-12-26 08:13:38 -08:00
handleMuteClick = ( account ) => {
this . props . dispatch ( initMuteModal ( account ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-12-26 08:13:38 -08:00
handleConversationMuteClick = ( status ) => {
if ( status . get ( 'muted' ) ) {
this . props . dispatch ( unmuteStatus ( status . get ( 'id' ) ) ) ;
} else {
this . props . dispatch ( muteStatus ( status . get ( 'id' ) ) ) ;
}
2023-02-03 11:52:07 -08:00
} ;
2017-12-26 08:13:38 -08:00
2018-03-28 10:56:46 -07:00
handleToggleAll = ( ) => {
2022-07-24 11:01:30 -07:00
const { status , ancestorsIds , descendantsIds , settings } = this . props ;
const statusIds = [ status . get ( 'id' ) ] . concat ( ancestorsIds . toJS ( ) , descendantsIds . toJS ( ) ) ;
let { isExpanded } = this . state ;
if ( settings . getIn ( [ 'content_warnings' , 'shared_state' ] ) )
isExpanded = ! status . get ( 'hidden' ) ;
if ( ! isExpanded ) {
this . props . dispatch ( revealStatus ( statusIds ) ) ;
} else {
this . props . dispatch ( hideStatus ( statusIds ) ) ;
}
2018-03-28 10:56:46 -07:00
this . setState ( { isExpanded : ! isExpanded , threadExpanded : ! isExpanded } ) ;
2023-02-03 11:52:07 -08:00
} ;
2018-03-28 10:56:46 -07:00
2022-09-23 14:00:12 -07:00
handleTranslate = status => {
const { dispatch } = this . props ;
if ( status . get ( 'translation' ) ) {
dispatch ( undoStatusTranslation ( status . get ( 'id' ) ) ) ;
} else {
dispatch ( translateStatus ( status . get ( 'id' ) ) ) ;
}
2023-02-03 11:52:07 -08:00
} ;
2022-09-23 14:00:12 -07:00
2019-03-26 09:34:02 -07:00
handleBlockClick = ( status ) => {
2019-09-29 12:46:05 -07:00
const { dispatch } = this . props ;
2019-03-26 09:34:02 -07:00
const account = status . get ( 'account' ) ;
2019-09-29 12:46:05 -07:00
dispatch ( initBlockModal ( account ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-12-26 08:13:38 -08:00
2017-05-12 05:44:10 -07:00
handleReport = ( status ) => {
2017-02-14 11:59:26 -08:00
this . props . dispatch ( initReport ( status . get ( 'account' ) , status ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-02-14 11:59:26 -08:00
2017-08-30 18:38:35 -07:00
handleEmbed = ( status ) => {
this . props . dispatch ( openModal ( 'EMBED' , { url : status . get ( 'url' ) } ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-08-30 18:38:35 -07:00
2019-05-26 09:58:14 -07:00
handleHotkeyToggleSensitive = ( ) => {
this . handleToggleMediaVisibility ( ) ;
2023-02-03 11:52:07 -08:00
} ;
2019-05-26 09:58:14 -07:00
2017-10-05 16:07:59 -07:00
handleHotkeyMoveUp = ( ) => {
this . handleMoveUp ( this . props . status . get ( 'id' ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
handleHotkeyMoveDown = ( ) => {
this . handleMoveDown ( this . props . status . get ( 'id' ) ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
handleHotkeyReply = e => {
e . preventDefault ( ) ;
this . handleReplyClick ( this . props . status ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
handleHotkeyFavourite = ( ) => {
this . handleFavouriteClick ( this . props . status ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
handleHotkeyBoost = ( ) => {
this . handleReblogClick ( this . props . status ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
2019-04-27 10:08:38 -07:00
handleHotkeyBookmark = ( ) => {
this . handleBookmarkClick ( this . props . status ) ;
2023-02-03 11:52:07 -08:00
} ;
2019-04-27 10:08:38 -07:00
2017-10-05 16:07:59 -07:00
handleHotkeyMention = e => {
e . preventDefault ( ) ;
this . handleMentionClick ( this . props . status ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
handleHotkeyOpenProfile = ( ) => {
2023-02-03 11:52:07 -08:00
let state = { ... this . context . router . history . location . state } ;
2019-04-15 13:23:05 -07:00
state . mastodonBackSteps = ( state . mastodonBackSteps || 0 ) + 1 ;
2021-09-25 20:46:13 -07:00
this . context . router . history . push ( ` /@ ${ this . props . status . getIn ( [ 'account' , 'acct' ] ) } ` , state ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
handleMoveUp = id => {
const { status , ancestorsIds , descendantsIds } = this . props ;
if ( id === status . get ( 'id' ) ) {
2019-04-29 11:10:44 -07:00
this . _selectChild ( ancestorsIds . size - 1 , true ) ;
2017-10-05 16:07:59 -07:00
} else {
let index = ancestorsIds . indexOf ( id ) ;
if ( index === - 1 ) {
index = descendantsIds . indexOf ( id ) ;
2019-04-29 11:10:44 -07:00
this . _selectChild ( ancestorsIds . size + index , true ) ;
2017-10-05 16:07:59 -07:00
} else {
2019-04-29 11:10:44 -07:00
this . _selectChild ( index - 1 , true ) ;
2017-10-05 16:07:59 -07:00
}
}
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
handleMoveDown = id => {
const { status , ancestorsIds , descendantsIds } = this . props ;
if ( id === status . get ( 'id' ) ) {
2019-04-29 11:10:44 -07:00
this . _selectChild ( ancestorsIds . size + 1 , false ) ;
2017-10-05 16:07:59 -07:00
} else {
let index = ancestorsIds . indexOf ( id ) ;
if ( index === - 1 ) {
index = descendantsIds . indexOf ( id ) ;
2019-04-29 11:10:44 -07:00
this . _selectChild ( ancestorsIds . size + index + 2 , false ) ;
2017-10-05 16:07:59 -07:00
} else {
2019-04-29 11:10:44 -07:00
this . _selectChild ( index + 1 , false ) ;
2017-10-05 16:07:59 -07:00
}
}
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
2019-04-29 11:10:44 -07:00
_selectChild ( index , align _top ) {
const container = this . node ;
const element = container . querySelectorAll ( '.focusable' ) [ index ] ;
2017-10-05 16:07:59 -07:00
if ( element ) {
2019-04-29 11:10:44 -07: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 16:07:59 -07:00
element . focus ( ) ;
}
}
2019-03-08 11:34:31 -08:00
handleHeaderClick = ( ) => {
this . column . scrollTop ( ) ;
2023-02-03 11:52:07 -08:00
} ;
2019-03-08 11:34:31 -08:00
2016-09-15 15:21:51 -07:00
renderChildren ( list ) {
2017-10-05 16:07:59 -07:00
return list . map ( id => (
< StatusContainer
key = { id }
id = { id }
2018-03-28 10:56:46 -07:00
expanded = { this . state . threadExpanded }
2017-10-05 16:07:59 -07:00
onMoveUp = { this . handleMoveUp }
onMoveDown = { this . handleMoveDown }
2018-07-08 11:04:53 -07:00
contextType = 'thread'
2017-10-05 16:07:59 -07:00
/ >
) ) ;
}
2017-11-27 14:05:03 -08:00
setExpansion = value => {
2018-03-28 06:40:34 -07:00
this . setState ( { isExpanded : value } ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-11-27 14:05:03 -08:00
2017-10-05 16:07:59 -07:00
setRef = c => {
this . node = c ;
2023-02-03 11:52:07 -08:00
} ;
2017-10-05 16:07:59 -07:00
2019-03-08 11:34:31 -08:00
setColumnRef = c => {
this . column = c ;
2023-02-03 11:52:07 -08:00
} ;
2019-03-08 11:34:31 -08:00
2018-11-28 11:20:03 -08:00
componentDidUpdate ( prevProps ) {
2018-11-30 03:27:19 -08:00
if ( this . props . params . statusId && ( this . props . params . statusId !== prevProps . params . statusId || prevProps . ancestorsIds . size < this . props . ancestorsIds . size ) ) {
2018-11-28 11:20:03 -08:00
const { status , ancestorsIds } = this . props ;
2017-10-11 10:21:44 -07:00
2018-11-28 11:20:03 -08:00
if ( status && ancestorsIds && ancestorsIds . size > 0 ) {
const element = this . node . querySelectorAll ( '.focusable' ) [ ancestorsIds . size - 1 ] ;
2017-10-05 16:07:59 -07:00
2018-11-28 11:20:03 -08:00
window . requestAnimationFrame ( ( ) => {
element . scrollIntoView ( true ) ;
} ) ;
}
2017-10-05 16:07:59 -07:00
}
2017-04-21 11:05:35 -07:00
}
2016-09-15 15:21:51 -07:00
2017-11-07 05:24:55 -08:00
componentWillUnmount ( ) {
detachFullscreenListener ( this . onFullScreenChange ) ;
}
onFullScreenChange = ( ) => {
this . setState ( { fullscreen : isFullscreen ( ) } ) ;
2023-02-03 11:52:07 -08:00
} ;
2017-11-07 05:24:55 -08:00
2016-09-15 15:21:51 -07:00
render ( ) {
2016-10-24 08:11:02 -07:00
let ancestors , descendants ;
2023-01-05 04:32:29 -08:00
const { isLoading , status , settings , ancestorsIds , descendantsIds , intl , domain , multiColumn , pictureInPicture } = this . props ;
2022-07-24 11:01:30 -07:00
const { fullscreen } = this . state ;
2016-09-15 15:21:51 -07:00
2022-10-20 05:35:29 -07:00
if ( isLoading ) {
return (
< Column >
< LoadingIndicator / >
< / Column >
) ;
}
2016-09-15 15:21:51 -07:00
if ( status === null ) {
2016-10-07 07:00:11 -07:00
return (
< Column >
2019-08-01 03:26:58 -07:00
< ColumnBackButton multiColumn = { multiColumn } / >
2017-02-26 14:06:27 -08:00
< MissingIndicator / >
2016-10-07 07:00:11 -07:00
< / Column >
) ;
2016-09-15 15:21:51 -07:00
}
2022-07-24 11:01:30 -07:00
const isExpanded = settings . getIn ( [ 'content_warnings' , 'shared_state' ] ) ? ! status . get ( 'hidden' ) : this . state . isExpanded ;
2016-10-30 07:06:43 -07:00
if ( ancestorsIds && ancestorsIds . size > 0 ) {
2016-10-24 08:11:02 -07:00
ancestors = < div > { this . renderChildren ( ancestorsIds ) } < / div > ;
}
2016-10-30 07:06:43 -07:00
if ( descendantsIds && descendantsIds . size > 0 ) {
2016-10-24 08:11:02 -07:00
descendants = < div > { this . renderChildren ( descendantsIds ) } < / div > ;
}
2022-10-20 05:35:29 -07:00
const isLocal = status . getIn ( [ 'account' , 'acct' ] , '' ) . indexOf ( '@' ) === - 1 ;
const isIndexable = ! status . getIn ( [ 'account' , 'noindex' ] ) ;
2017-10-05 16:07:59 -07:00
const handlers = {
moveUp : this . handleHotkeyMoveUp ,
moveDown : this . handleHotkeyMoveDown ,
reply : this . handleHotkeyReply ,
favourite : this . handleHotkeyFavourite ,
boost : this . handleHotkeyBoost ,
2019-04-27 10:08:38 -07:00
bookmark : this . handleHotkeyBookmark ,
2017-10-05 16:07:59 -07:00
mention : this . handleHotkeyMention ,
openProfile : this . handleHotkeyOpenProfile ,
2022-07-24 11:01:30 -07:00
toggleSpoiler : this . handleToggleHidden ,
2019-05-26 09:58:14 -07:00
toggleSensitive : this . handleHotkeyToggleSensitive ,
2019-11-29 08:02:36 -08:00
openMedia : this . handleHotkeyOpenMedia ,
2017-10-05 16:07:59 -07:00
} ;
2016-09-15 15:21:51 -07:00
return (
2019-08-01 10:17:17 -07:00
< Column bindToDocument = { ! multiColumn } ref = { this . setColumnRef } label = { intl . formatMessage ( messages . detailedStatus ) } >
2018-03-28 10:56:46 -07:00
< ColumnHeader
2019-02-27 04:47:27 -08:00
icon = 'comment'
title = { intl . formatMessage ( messages . tootHeading ) }
2019-03-08 11:34:31 -08:00
onClick = { this . handleHeaderClick }
2018-03-28 10:56:46 -07:00
showBackButton
2019-08-01 03:26:58 -07:00
multiColumn = { multiColumn }
2018-03-28 10:56:46 -07:00
extraButton = { (
2022-11-08 08:31:32 -08:00
< button className = 'column-header__button' title = { intl . formatMessage ( ! isExpanded ? messages . revealAll : messages . hideAll ) } aria - label = { intl . formatMessage ( ! isExpanded ? messages . revealAll : messages . hideAll ) } onClick = { this . handleToggleAll } > < Icon id = { ! isExpanded ? 'eye-slash' : 'eye' } / > < / button >
2018-03-28 10:56:46 -07:00
) }
/ >
2016-09-18 04:03:37 -07:00
2021-07-13 03:40:15 -07:00
< ScrollContainer scrollKey = 'thread' >
2017-11-07 05:24:55 -08:00
< div className = { classNames ( 'scrollable' , 'detailed-status__wrapper' , { fullscreen } ) } ref = { this . setRef } >
2016-10-24 08:11:02 -07:00
{ ancestors }
2016-09-18 04:03:37 -07:00
2017-10-05 16:07:59 -07:00
< HotKeys handlers = { handlers } >
2020-07-22 12:23:41 -07:00
< div className = 'focusable' tabIndex = '0' aria - label = { textForScreenReader ( intl , status , false , isExpanded ) } >
2017-10-05 16:07:59 -07:00
< DetailedStatus
2020-01-06 09:22:17 -08:00
key = { ` details- ${ status . get ( 'id' ) } ` }
2017-10-05 16:07:59 -07:00
status = { status }
2017-10-11 10:43:10 -07:00
settings = { settings }
2017-10-05 16:07:59 -07:00
onOpenVideo = { this . handleOpenVideo }
onOpenMedia = { this . handleOpenMedia }
2017-11-27 14:05:03 -08:00
expanded = { isExpanded }
2022-07-24 11:01:30 -07:00
onToggleHidden = { this . handleToggleHidden }
2022-09-23 14:00:12 -07:00
onTranslate = { this . handleTranslate }
2019-01-20 02:47:17 -08:00
domain = { domain }
2019-05-26 09:58:14 -07:00
showMedia = { this . state . showMedia }
onToggleMediaVisibility = { this . handleToggleMediaVisibility }
2023-01-05 04:32:29 -08:00
pictureInPicture = { pictureInPicture }
2017-10-05 16:07:59 -07:00
/ >
< ActionBar
2020-01-06 09:22:17 -08:00
key = { ` action-bar- ${ status . get ( 'id' ) } ` }
2017-10-05 16:07:59 -07:00
status = { status }
onReply = { this . handleReplyClick }
onFavourite = { this . handleFavouriteClick }
onReblog = { this . handleReblogClick }
2018-04-11 10:42:25 -07:00
onBookmark = { this . handleBookmarkClick }
2017-10-05 16:07:59 -07:00
onDelete = { this . handleDeleteClick }
2022-02-09 15:15:30 -08:00
onEdit = { this . handleEditClick }
2018-04-10 12:38:02 -07:00
onDirect = { this . handleDirectClick }
2017-10-05 16:07:59 -07:00
onMention = { this . handleMentionClick }
2017-12-26 08:13:38 -08:00
onMute = { this . handleMuteClick }
onMuteConversation = { this . handleConversationMuteClick }
onBlock = { this . handleBlockClick }
2017-10-05 16:07:59 -07:00
onReport = { this . handleReport }
onPin = { this . handlePin }
onEmbed = { this . handleEmbed }
/ >
< / div >
< / HotKeys >
2016-10-19 09:20:19 -07:00
2016-10-24 08:11:02 -07:00
{ descendants }
2016-10-19 09:20:19 -07:00
< / div >
< / ScrollContainer >
2022-09-28 19:39:33 -07:00
< Helmet >
2022-10-08 18:55:09 -07:00
< title > { titleFromStatus ( status ) } < / title >
2022-10-20 05:35:29 -07:00
< meta name = 'robots' content = { ( isLocal && isIndexable ) ? 'all' : 'noindex' } / >
2022-09-28 19:39:33 -07:00
< / Helmet >
2016-10-07 07:00:11 -07:00
< / Column >
2016-09-15 15:21:51 -07:00
) ;
}
2017-04-21 11:05:35 -07:00
}
2023-03-24 15:15:25 -07:00
export default injectIntl ( connect ( makeMapStateToProps ) ( Status ) ) ;