2024-01-25 10:41:31 -05:00
import { FormattedMessage } from 'react-intl' ;
2023-05-28 10:38:10 -04:00
2024-01-25 10:41:31 -05:00
import { useSelector } from 'react-redux' ;
2017-12-24 01:16:45 -05:00
2024-01-25 10:41:31 -05:00
import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react' ;
import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react' ;
import { Avatar } from 'flavours/glitch/components/avatar' ;
import { DisplayName } from 'flavours/glitch/components/display_name' ;
import { Icon } from 'flavours/glitch/components/icon' ;
2024-02-22 18:02:39 -05:00
import { Permalink } from 'flavours/glitch/components/permalink' ;
2023-11-16 12:02:01 -05:00
2024-01-25 10:41:31 -05:00
export const ReplyIndicator = ( ) => {
const inReplyToId = useSelector ( state => state . getIn ( [ 'compose' , 'in_reply_to' ] ) ) ;
const status = useSelector ( state => state . getIn ( [ 'statuses' , inReplyToId ] ) ) ;
const account = useSelector ( state => state . getIn ( [ 'accounts' , status ? . get ( 'account' ) ] ) ) ;
2023-10-19 13:44:55 -04:00
2024-01-25 10:41:31 -05:00
if ( ! status ) {
return null ;
}
2019-04-20 16:21:28 -04:00
2024-01-25 10:41:31 -05:00
const content = { _ _html : status . get ( 'contentHtml' ) } ;
2017-12-24 01:16:45 -05:00
2024-01-25 10:41:31 -05:00
return (
< div className = 'reply-indicator' >
< div className = 'reply-indicator__line' / >
2023-11-16 12:02:01 -05:00
2024-02-22 18:02:39 -05:00
< Permalink href = { account . get ( 'url' ) } to = { ` /@ ${ account . get ( 'acct' ) } ` } className = 'detailed-status__display-avatar' >
2024-01-25 10:41:31 -05:00
< Avatar account = { account } size = { 46 } / >
2024-02-22 18:02:39 -05:00
< / Permalink >
2023-11-16 12:02:01 -05:00
2024-01-25 10:41:31 -05:00
< div className = 'reply-indicator__main' >
2024-02-22 18:02:39 -05:00
< Permalink href = { account . get ( 'url' ) } to = { ` /@ ${ account . get ( 'acct' ) } ` } className = 'detailed-status__display-name' >
2024-01-25 10:41:31 -05:00
< DisplayName account = { account } / >
2024-02-22 18:02:39 -05:00
< / Permalink >
2023-11-16 12:02:01 -05:00
< div className = 'reply-indicator__content translate' dangerouslySetInnerHTML = { content } / >
2024-01-25 10:41:31 -05:00
{ ( status . get ( 'poll' ) || status . get ( 'media_attachments' ) . size > 0 ) && (
< div className = 'reply-indicator__attachments' >
{ status . get ( 'poll' ) && < > < Icon icon = { BarChart4BarsIcon } / > < FormattedMessage id = 'reply_indicator.poll' defaultMessage = 'Poll' / > < / > }
{ status . get ( 'media_attachments' ) . size > 0 && < > < Icon icon = { PhotoLibraryIcon } / > < FormattedMessage id = 'reply_indicator.attachments' defaultMessage = '{count, plural, one {# attachment} other {# attachments}}' values = { { count : status . get ( 'media_attachments' ) . size } } / > < / > }
< / div >
2018-07-28 17:08:38 -04:00
) }
2023-11-16 12:02:01 -05:00
< / div >
2024-01-25 10:41:31 -05:00
< / div >
) ;
} ;