123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682 |
- import Immutable from 'immutable';
- import React from 'react';
- import { connect } from 'react-redux';
- import PropTypes from 'prop-types';
- import classNames from 'classnames';
- import ImmutablePropTypes from 'react-immutable-proptypes';
- import { createSelector } from 'reselect';
- import { fetchStatus } from '../../actions/statuses';
- import MissingIndicator from '../../components/missing_indicator';
- import LoadingIndicator from 'mastodon/components/loading_indicator';
- import DetailedStatus from './components/detailed_status';
- import ActionBar from './components/action_bar';
- import Column from '../ui/components/column';
- import {
- favourite,
- unfavourite,
- bookmark,
- unbookmark,
- reblog,
- unreblog,
- pin,
- unpin,
- } from '../../actions/interactions';
- import {
- replyCompose,
- mentionCompose,
- directCompose,
- } from '../../actions/compose';
- import {
- muteStatus,
- unmuteStatus,
- deleteStatus,
- editStatus,
- hideStatus,
- revealStatus,
- translateStatus,
- undoStatusTranslation,
- } from '../../actions/statuses';
- import {
- unblockAccount,
- unmuteAccount,
- } from '../../actions/accounts';
- import {
- blockDomain,
- unblockDomain,
- } from '../../actions/domain_blocks';
- import { initMuteModal } from '../../actions/mutes';
- import { initBlockModal } from '../../actions/blocks';
- import { initBoostModal } from '../../actions/boosts';
- import { initReport } from '../../actions/reports';
- import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
- import ScrollContainer from 'mastodon/containers/scroll_container';
- import ColumnBackButton from '../../components/column_back_button';
- import ColumnHeader from '../../components/column_header';
- import StatusContainer from '../../containers/status_container';
- import { openModal } from '../../actions/modal';
- import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
- import ImmutablePureComponent from 'react-immutable-pure-component';
- import { HotKeys } from 'react-hotkeys';
- import { boostModal, deleteModal } from '../../initial_state';
- import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
- import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
- import Icon from 'mastodon/components/icon';
- import { Helmet } from 'react-helmet';
- const messages = defineMessages({
- deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
- deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
- 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? Favourites and boosts will be lost, and replies to the original post will be orphaned.' },
- revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
- hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
- detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
- 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?' },
- blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
- });
- const makeMapStateToProps = () => {
- const getStatus = makeGetStatus();
- const getPictureInPicture = makeGetPictureInPicture();
- const getAncestorsIds = createSelector([
- (_, { id }) => id,
- state => state.getIn(['contexts', 'inReplyTos']),
- ], (statusId, inReplyTos) => {
- let ancestorsIds = Immutable.List();
- ancestorsIds = ancestorsIds.withMutations(mutable => {
- let id = statusId;
- while (id && !mutable.includes(id)) {
- mutable.unshift(id);
- id = inReplyTos.get(id);
- }
- });
- return ancestorsIds;
- });
- const getDescendantsIds = createSelector([
- (_, { id }) => id,
- state => state.getIn(['contexts', 'replies']),
- state => state.get('statuses'),
- ], (statusId, contextReplies, statuses) => {
- let descendantsIds = [];
- const ids = [statusId];
- while (ids.length > 0) {
- let id = ids.pop();
- const replies = contextReplies.get(id);
- if (statusId !== id) {
- descendantsIds.push(id);
- }
- if (replies) {
- replies.reverse().forEach(reply => {
- if (!ids.includes(reply) && !descendantsIds.includes(reply) && statusId !== reply) ids.push(reply);
- });
- }
- }
- 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;
- }
- });
- }
- return Immutable.List(descendantsIds);
- });
- const mapStateToProps = (state, props) => {
- const status = getStatus(state, { id: props.params.statusId });
- let ancestorsIds = Immutable.List();
- let descendantsIds = Immutable.List();
- if (status) {
- ancestorsIds = getAncestorsIds(state, { id: status.get('in_reply_to_id') });
- descendantsIds = getDescendantsIds(state, { id: status.get('id') });
- }
- return {
- isLoading: state.getIn(['statuses', props.params.statusId, 'isLoading']),
- status,
- ancestorsIds,
- descendantsIds,
- askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
- domain: state.getIn(['meta', 'domain']),
- pictureInPicture: getPictureInPicture(state, { id: props.params.statusId }),
- };
- };
- return mapStateToProps;
- };
- 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)}"`;
- };
- export default @injectIntl
- @connect(makeMapStateToProps)
- class Status extends ImmutablePureComponent {
- static contextTypes = {
- router: PropTypes.object,
- identity: PropTypes.object,
- };
- static propTypes = {
- params: PropTypes.object.isRequired,
- dispatch: PropTypes.func.isRequired,
- status: ImmutablePropTypes.map,
- isLoading: PropTypes.bool,
- ancestorsIds: ImmutablePropTypes.list,
- descendantsIds: ImmutablePropTypes.list,
- intl: PropTypes.object.isRequired,
- askReplyConfirmation: PropTypes.bool,
- multiColumn: PropTypes.bool,
- domain: PropTypes.string.isRequired,
- pictureInPicture: ImmutablePropTypes.contains({
- inUse: PropTypes.bool,
- available: PropTypes.bool,
- }),
- };
- state = {
- fullscreen: false,
- showMedia: defaultMediaVisibility(this.props.status),
- loadedStatusId: undefined,
- };
- componentWillMount () {
- this.props.dispatch(fetchStatus(this.props.params.statusId));
- }
- componentDidMount () {
- attachFullscreenListener(this.onFullScreenChange);
- }
- componentWillReceiveProps (nextProps) {
- if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
- this._scrolledIntoView = false;
- this.props.dispatch(fetchStatus(nextProps.params.statusId));
- }
- if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
- this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
- }
- }
- handleToggleMediaVisibility = () => {
- this.setState({ showMedia: !this.state.showMedia });
- }
- handleFavouriteClick = (status) => {
- const { dispatch } = this.props;
- const { signedIn } = this.context.identity;
- if (signedIn) {
- if (status.get('favourited')) {
- dispatch(unfavourite(status));
- } else {
- dispatch(favourite(status));
- }
- } else {
- dispatch(openModal('INTERACTION', {
- type: 'favourite',
- accountId: status.getIn(['account', 'id']),
- url: status.get('url'),
- }));
- }
- }
- handlePin = (status) => {
- if (status.get('pinned')) {
- this.props.dispatch(unpin(status));
- } else {
- this.props.dispatch(pin(status));
- }
- }
- handleReplyClick = (status) => {
- 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));
- }
- } else {
- dispatch(openModal('INTERACTION', {
- type: 'reply',
- accountId: status.getIn(['account', 'id']),
- url: status.get('url'),
- }));
- }
- }
- handleModalReblog = (status, privacy) => {
- this.props.dispatch(reblog(status, privacy));
- }
- handleReblogClick = (status, e) => {
- const { dispatch } = this.props;
- const { signedIn } = this.context.identity;
- if (signedIn) {
- if (status.get('reblogged')) {
- dispatch(unreblog(status));
- } else {
- if ((e && e.shiftKey) || !boostModal) {
- this.handleModalReblog(status);
- } else {
- dispatch(initBoostModal({ status, onReblog: this.handleModalReblog }));
- }
- }
- } else {
- dispatch(openModal('INTERACTION', {
- type: 'reblog',
- accountId: status.getIn(['account', 'id']),
- url: status.get('url'),
- }));
- }
- }
- handleBookmarkClick = (status) => {
- if (status.get('bookmarked')) {
- this.props.dispatch(unbookmark(status));
- } else {
- this.props.dispatch(bookmark(status));
- }
- }
- handleDeleteClick = (status, history, withRedraft = false) => {
- const { dispatch, intl } = this.props;
- if (!deleteModal) {
- dispatch(deleteStatus(status.get('id'), history, withRedraft));
- } else {
- dispatch(openModal('CONFIRM', {
- message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
- confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
- onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
- }));
- }
- }
- handleEditClick = (status, history) => {
- this.props.dispatch(editStatus(status.get('id'), history));
- }
- handleDirectClick = (account, router) => {
- this.props.dispatch(directCompose(account, router));
- }
- handleMentionClick = (account, router) => {
- this.props.dispatch(mentionCompose(account, router));
- }
- handleOpenMedia = (media, index) => {
- this.props.dispatch(openModal('MEDIA', { statusId: this.props.status.get('id'), media, index }));
- }
- handleOpenVideo = (media, options) => {
- this.props.dispatch(openModal('VIDEO', { statusId: this.props.status.get('id'), media, options }));
- }
- handleHotkeyOpenMedia = e => {
- const { status } = this.props;
- e.preventDefault();
- if (status.get('media_attachments').size > 0) {
- if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
- this.handleOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 });
- } else {
- this.handleOpenMedia(status.get('media_attachments'), 0);
- }
- }
- }
- handleMuteClick = (account) => {
- this.props.dispatch(initMuteModal(account));
- }
- handleConversationMuteClick = (status) => {
- if (status.get('muted')) {
- this.props.dispatch(unmuteStatus(status.get('id')));
- } else {
- this.props.dispatch(muteStatus(status.get('id')));
- }
- }
- handleToggleHidden = (status) => {
- if (status.get('hidden')) {
- this.props.dispatch(revealStatus(status.get('id')));
- } else {
- this.props.dispatch(hideStatus(status.get('id')));
- }
- }
- 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));
- }
- }
- handleTranslate = status => {
- const { dispatch } = this.props;
- if (status.get('translation')) {
- dispatch(undoStatusTranslation(status.get('id')));
- } else {
- dispatch(translateStatus(status.get('id')));
- }
- }
- handleBlockClick = (status) => {
- const { dispatch } = this.props;
- const account = status.get('account');
- dispatch(initBlockModal(account));
- }
- handleReport = (status) => {
- this.props.dispatch(initReport(status.get('account'), status));
- }
- handleEmbed = (status) => {
- this.props.dispatch(openModal('EMBED', { url: status.get('url') }));
- }
- handleUnmuteClick = account => {
- this.props.dispatch(unmuteAccount(account.get('id')));
- }
- handleUnblockClick = account => {
- this.props.dispatch(unblockAccount(account.get('id')));
- }
- 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)),
- }));
- }
- handleUnblockDomainClick = domain => {
- this.props.dispatch(unblockDomain(domain));
- }
- handleHotkeyMoveUp = () => {
- this.handleMoveUp(this.props.status.get('id'));
- }
- handleHotkeyMoveDown = () => {
- this.handleMoveDown(this.props.status.get('id'));
- }
- handleHotkeyReply = e => {
- e.preventDefault();
- this.handleReplyClick(this.props.status);
- }
- handleHotkeyFavourite = () => {
- this.handleFavouriteClick(this.props.status);
- }
- handleHotkeyBoost = () => {
- this.handleReblogClick(this.props.status);
- }
- handleHotkeyMention = e => {
- e.preventDefault();
- this.handleMentionClick(this.props.status.get('account'));
- }
- handleHotkeyOpenProfile = () => {
- this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
- }
- handleHotkeyToggleHidden = () => {
- this.handleToggleHidden(this.props.status);
- }
- handleHotkeyToggleSensitive = () => {
- this.handleToggleMediaVisibility();
- }
- handleMoveUp = id => {
- const { status, ancestorsIds, descendantsIds } = this.props;
- if (id === status.get('id')) {
- this._selectChild(ancestorsIds.size - 1, true);
- } else {
- let index = ancestorsIds.indexOf(id);
- if (index === -1) {
- index = descendantsIds.indexOf(id);
- this._selectChild(ancestorsIds.size + index, true);
- } else {
- this._selectChild(index - 1, true);
- }
- }
- }
- handleMoveDown = id => {
- const { status, ancestorsIds, descendantsIds } = this.props;
- if (id === status.get('id')) {
- this._selectChild(ancestorsIds.size + 1, false);
- } else {
- let index = ancestorsIds.indexOf(id);
- if (index === -1) {
- index = descendantsIds.indexOf(id);
- this._selectChild(ancestorsIds.size + index + 2, false);
- } else {
- this._selectChild(index + 1, false);
- }
- }
- }
- _selectChild (index, align_top) {
- const container = this.node;
- const element = container.querySelectorAll('.focusable')[index];
- if (element) {
- 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);
- }
- element.focus();
- }
- }
- renderChildren (list) {
- return list.map(id => (
- <StatusContainer
- key={id}
- id={id}
- onMoveUp={this.handleMoveUp}
- onMoveDown={this.handleMoveDown}
- contextType='thread'
- />
- ));
- }
- setRef = c => {
- this.node = c;
- }
- componentDidUpdate () {
- if (this._scrolledIntoView) {
- return;
- }
- 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);
- });
- this._scrolledIntoView = true;
- }
- }
- componentWillUnmount () {
- detachFullscreenListener(this.onFullScreenChange);
- }
- onFullScreenChange = () => {
- this.setState({ fullscreen: isFullscreen() });
- }
- render () {
- let ancestors, descendants;
- const { isLoading, status, ancestorsIds, descendantsIds, intl, domain, multiColumn, pictureInPicture } = this.props;
- const { fullscreen } = this.state;
- if (isLoading) {
- return (
- <Column>
- <LoadingIndicator />
- </Column>
- );
- }
- if (status === null) {
- return (
- <Column>
- <ColumnBackButton multiColumn={multiColumn} />
- <MissingIndicator />
- </Column>
- );
- }
- if (ancestorsIds && ancestorsIds.size > 0) {
- ancestors = <div>{this.renderChildren(ancestorsIds)}</div>;
- }
- if (descendantsIds && descendantsIds.size > 0) {
- descendants = <div>{this.renderChildren(descendantsIds)}</div>;
- }
- const isLocal = status.getIn(['account', 'acct'], '').indexOf('@') === -1;
- const isIndexable = !status.getIn(['account', 'noindex']);
- const handlers = {
- moveUp: this.handleHotkeyMoveUp,
- moveDown: this.handleHotkeyMoveDown,
- reply: this.handleHotkeyReply,
- favourite: this.handleHotkeyFavourite,
- boost: this.handleHotkeyBoost,
- mention: this.handleHotkeyMention,
- openProfile: this.handleHotkeyOpenProfile,
- toggleHidden: this.handleHotkeyToggleHidden,
- toggleSensitive: this.handleHotkeyToggleSensitive,
- openMedia: this.handleHotkeyOpenMedia,
- };
- return (
- <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.detailedStatus)}>
- <ColumnHeader
- showBackButton
- multiColumn={multiColumn}
- extraButton={(
- <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} aria-pressed={status.get('hidden') ? 'false' : 'true'}><Icon id={status.get('hidden') ? 'eye-slash' : 'eye'} /></button>
- )}
- />
- <ScrollContainer scrollKey='thread'>
- <div className={classNames('scrollable', { fullscreen })} ref={this.setRef}>
- {ancestors}
- <HotKeys handlers={handlers}>
- <div className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
- <DetailedStatus
- key={`details-${status.get('id')}`}
- status={status}
- onOpenVideo={this.handleOpenVideo}
- onOpenMedia={this.handleOpenMedia}
- onToggleHidden={this.handleToggleHidden}
- onTranslate={this.handleTranslate}
- domain={domain}
- showMedia={this.state.showMedia}
- onToggleMediaVisibility={this.handleToggleMediaVisibility}
- pictureInPicture={pictureInPicture}
- />
- <ActionBar
- key={`action-bar-${status.get('id')}`}
- status={status}
- onReply={this.handleReplyClick}
- onFavourite={this.handleFavouriteClick}
- onReblog={this.handleReblogClick}
- onBookmark={this.handleBookmarkClick}
- onDelete={this.handleDeleteClick}
- onEdit={this.handleEditClick}
- onDirect={this.handleDirectClick}
- onMention={this.handleMentionClick}
- onMute={this.handleMuteClick}
- onUnmute={this.handleUnmuteClick}
- onMuteConversation={this.handleConversationMuteClick}
- onBlock={this.handleBlockClick}
- onUnblock={this.handleUnblockClick}
- onBlockDomain={this.handleBlockDomainClick}
- onUnblockDomain={this.handleUnblockDomainClick}
- onReport={this.handleReport}
- onPin={this.handlePin}
- onEmbed={this.handleEmbed}
- />
- </div>
- </HotKeys>
- {descendants}
- </div>
- </ScrollContainer>
- <Helmet>
- <title>{titleFromStatus(status)}</title>
- <meta name='robots' content={(isLocal && isIndexable) ? 'all' : 'noindex'} />
- </Helmet>
- </Column>
- );
- }
- }
|