import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import StatusPrepend from './status_prepend'; import StatusHeader from './status_header'; import StatusIcons from './status_icons'; import StatusContent from './status_content'; import StatusActionBar from './status_action_bar'; import AttachmentList from './attachment_list'; import Card from '../features/status/components/card'; import { injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { MediaGallery, Video, Audio } from 'flavours/glitch/util/async-components'; import { HotKeys } from 'react-hotkeys'; import NotificationOverlayContainer from 'flavours/glitch/features/notifications/containers/overlay_container'; import classNames from 'classnames'; import { autoUnfoldCW } from 'flavours/glitch/util/content_warning'; import PollContainer from 'flavours/glitch/containers/poll_container'; import { displayMedia } from 'flavours/glitch/util/initial_state'; // We use the component (and not the container) since we do not want // to use the progress bar to show download progress import Bundle from '../features/ui/components/bundle'; export const textForScreenReader = (intl, status, rebloggedByText = false, expanded = false) => { const displayName = status.getIn(['account', 'display_name']); const values = [ displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName, status.get('spoiler_text') && !expanded ? status.get('spoiler_text') : status.get('search_index').slice(status.get('spoiler_text').length), intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }), status.getIn(['account', 'acct']), ]; if (rebloggedByText) { values.push(rebloggedByText); } return values.join(', '); }; export const defaultMediaVisibility = (status, settings) => { if (!status) { return undefined; } if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') { status = status.get('reblog'); } if (settings.getIn(['media', 'reveal_behind_cw']) && !!status.get('spoiler_text')) { return true; } return (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all'); } export default @injectIntl class Status extends ImmutablePureComponent { static contextTypes = { router: PropTypes.object, }; static propTypes = { containerId: PropTypes.string, id: PropTypes.string, status: ImmutablePropTypes.map, otherAccounts: ImmutablePropTypes.list, account: ImmutablePropTypes.map, onReply: PropTypes.func, onFavourite: PropTypes.func, onReblog: PropTypes.func, onBookmark: PropTypes.func, onDelete: PropTypes.func, onDirect: PropTypes.func, onMention: PropTypes.func, onPin: PropTypes.func, onOpenMedia: PropTypes.func, onOpenVideo: PropTypes.func, onBlock: PropTypes.func, onEmbed: PropTypes.func, onHeightChange: PropTypes.func, muted: PropTypes.bool, collapse: PropTypes.bool, hidden: PropTypes.bool, unread: PropTypes.bool, prepend: PropTypes.string, withDismiss: PropTypes.bool, onMoveUp: PropTypes.func, onMoveDown: PropTypes.func, getScrollPosition: PropTypes.func, updateScrollBottom: PropTypes.func, expanded: PropTypes.bool, intl: PropTypes.object.isRequired, cacheMediaWidth: PropTypes.func, cachedMediaWidth: PropTypes.number, onClick: PropTypes.func, scrollKey: PropTypes.string, }; state = { isCollapsed: false, autoCollapsed: false, isExpanded: undefined, showMedia: undefined, statusId: undefined, revealBehindCW: undefined, showCard: false, forceFilter: undefined, } // Avoid checking props that are functions (and whose equality will always // evaluate to false. See react-immutable-pure-component for usage. updateOnProps = [ 'status', 'account', 'settings', 'prepend', 'muted', 'collapse', 'notification', 'hidden', 'expanded', ] updateOnStates = [ 'isExpanded', 'isCollapsed', 'showMedia', 'forceFilter', ] // If our settings have changed to disable collapsed statuses, then we // need to make sure that we uncollapse every one. We do that by watching // for changes to `settings.collapsed.enabled` in // `getderivedStateFromProps()`. // We also need to watch for changes on the `collapse` prop---if this // changes to anything other than `undefined`, then we need to collapse or // uncollapse our status accordingly. static getDerivedStateFromProps(nextProps, prevState) { let update = {}; let updated = false; // Make sure the state mirrors props we trackā€¦ if (nextProps.collapse !== prevState.collapseProp) { update.collapseProp = nextProps.collapse; updated = true; } if (nextProps.expanded !== prevState.expandedProp) { update.expandedProp = nextProps.expanded; updated = true; } // Update state based on new props if (!nextProps.settings.getIn(['collapsed', 'enabled'])) { if (prevState.isCollapsed) { update.isCollapsed = false; updated = true; } } else if ( nextProps.collapse !== prevState.collapseProp && nextProps.collapse !== undefined ) { update.isCollapsed = nextProps.collapse; if (nextProps.collapse) update.isExpanded = false; updated = true; } if (nextProps.expanded !== prevState.expandedProp && nextProps.expanded !== undefined ) { update.isExpanded = nextProps.expanded; if (nextProps.expanded) update.isCollapsed = false; updated = true; } if (nextProps.expanded === undefined && prevState.isExpanded === undefined && update.isExpanded === undefined ) { const isExpanded = autoUnfoldCW(nextProps.settings, nextProps.status); if (isExpanded !== undefined) { update.isExpanded = isExpanded; updated = true; } } if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) { update.showMedia = defaultMediaVisibility(nextProps.status, nextProps.settings); update.statusId = nextProps.status.get('id'); updated = true; } if (nextProps.settings.getIn(['media', 'reveal_behind_cw']) !== prevState.revealBehindCW) { update.revealBehindCW = nextProps.settings.getIn(['media', 'reveal_behind_cw']); if (update.revealBehindCW) { update.showMedia = defaultMediaVisibility(nextProps.status, nextProps.settings); } updated = true; } return updated ? update : null; } // When mounting, we just check to see if our status should be collapsed, // and collapse it if so. We don't need to worry about whether collapsing // is enabled here, because `setCollapsed()` already takes that into // account. // The cases where a status should be collapsed are: // // - The `collapse` prop has been set to `true` // - The user has decided in local settings to collapse all statuses. // - The user has decided to collapse all notifications ('muted' // statuses). // - The user has decided to collapse long statuses and the status is // over 400px (without media, or 650px with). // - The status is a reply and the user has decided to collapse all // replies. // - The status contains media and the user has decided to collapse all // statuses with media. // - The status is a reblog the user has decided to collapse all // statuses which are reblogs. componentDidMount () { const { node } = this; const { status, settings, collapse, muted, prepend, } = this.props; // Prevent a crash when node is undefined. Not completely sure why this // happens, might be because status === null. if (node === undefined) return; const autoCollapseSettings = settings.getIn(['collapsed', 'auto']); if (function () { switch (true) { case !!collapse: case !!autoCollapseSettings.get('all'): case autoCollapseSettings.get('notifications') && !!muted: case autoCollapseSettings.get('lengthy') && node.clientHeight > ( status.get('media_attachments').size && !muted ? 650 : 400 ): case autoCollapseSettings.get('reblogs') && prepend === 'reblogged_by': case autoCollapseSettings.get('replies') && status.get('in_reply_to_id', null) !== null: case autoCollapseSettings.get('media') && !(status.get('spoiler_text').length) && !!status.get('media_attachments').size: return true; default: return false; } }()) { this.setCollapsed(true); // Hack to fix timeline jumps on second rendering when auto-collapsing this.setState({ autoCollapsed: true }); } // Hack to fix timeline jumps when a preview card is fetched this.setState({ showCard: !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card') && this.props.settings.get('inline_preview_cards'), }); } // Hack to fix timeline jumps on second rendering when auto-collapsing // or on subsequent rendering when a preview card has been fetched getSnapshotBeforeUpdate (prevProps, prevState) { if (!this.props.getScrollPosition) return null; const { muted, hidden, status, settings } = this.props; const doShowCard = !muted && !hidden && status && status.get('card') && settings.get('inline_preview_cards'); if (this.state.autoCollapsed || (doShowCard && !this.state.showCard)) { if (doShowCard) this.setState({ showCard: true }); if (this.state.autoCollapsed) this.setState({ autoCollapsed: false }); return this.props.getScrollPosition(); } else { return null; } } componentDidUpdate (prevProps, prevState, snapshot) { if (snapshot !== null && this.props.updateScrollBottom && this.node.offsetTop < snapshot.top) { this.props.updateScrollBottom(snapshot.height - snapshot.top); } } componentWillUnmount() { if (this.node && this.props.getScrollPosition) { const position = this.props.getScrollPosition(); if (position !== null && this.node.offsetTop < position.top) { requestAnimationFrame(() => { this.props.updateScrollBottom(position.height - position.top); }); } } } // `setCollapsed()` sets the value of `isCollapsed` in our state, that is, // whether the toot is collapsed or not. // `setCollapsed()` automatically checks for us whether toot collapsing // is enabled, so we don't have to. setCollapsed = (value) => { if (this.props.settings.getIn(['collapsed', 'enabled'])) { this.setState({ isCollapsed: value }); if (value) { this.setExpansion(false); } } else { this.setState({ isCollapsed: false }); } } setExpansion = (value) => { this.setState({ isExpanded: value }); if (value) { this.setCollapsed(false); } } // `parseClick()` takes a click event and responds appropriately. // If our status is collapsed, then clicking on it should uncollapse it. // If `Shift` is held, then clicking on it should collapse it. // Otherwise, we open the url handed to us in `destination`, if // applicable. parseClick = (e, destination) => { const { router } = this.context; const { status } = this.props; const { isCollapsed } = this.state; if (!router) return; if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey)) { if (isCollapsed) this.setCollapsed(false); else if (e.shiftKey) { this.setCollapsed(true); document.getSelection().removeAllRanges(); } else if (this.props.onClick) { this.props.onClick(); return; } else { if (destination === undefined) { destination = `/statuses/${ status.getIn(['reblog', 'id'], status.get('id')) }`; } let state = {...router.history.location.state}; state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; router.history.push(destination, state); } e.preventDefault(); } } handleToggleMediaVisibility = () => { this.setState({ showMedia: !this.state.showMedia }); } handleAccountClick = (e) => { if (this.context.router && e.button === 0) { const id = e.currentTarget.getAttribute('data-id'); e.preventDefault(); let state = {...this.context.router.history.location.state}; state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; this.context.router.history.push(`/accounts/${id}`, state); } } handleExpandedToggle = () => { if (this.props.status.get('spoiler_text')) { this.setExpansion(!this.state.isExpanded); } }; handleOpenVideo = (media, options) => { this.props.onOpenVideo(media, options); } handleHotkeyOpenMedia = e => { const { status, onOpenMedia, onOpenVideo } = this.props; e.preventDefault(); if (status.get('media_attachments').size > 0) { if (status.getIn(['media_attachments', 0, 'type']) === 'audio') { // TODO: toggle play/paused? } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { onOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 }); } else { onOpenMedia(status.get('media_attachments'), 0); } } } handleHotkeyReply = e => { e.preventDefault(); this.props.onReply(this.props.status, this.context.router.history); } handleHotkeyFavourite = (e) => { this.props.onFavourite(this.props.status, e); } handleHotkeyBoost = e => { this.props.onReblog(this.props.status, e); } handleHotkeyBookmark = e => { this.props.onBookmark(this.props.status, e); } handleHotkeyMention = e => { e.preventDefault(); this.props.onMention(this.props.status.get('account'), this.context.router.history); } handleHotkeyOpen = () => { let state = {...this.context.router.history.location.state}; state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; this.context.router.history.push(`/statuses/${this.props.status.get('id')}`, state); } handleHotkeyOpenProfile = () => { let state = {...this.context.router.history.location.state}; state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`, state); } handleHotkeyMoveUp = e => { this.props.onMoveUp(this.props.containerId || this.props.id, e.target.getAttribute('data-featured')); } handleHotkeyMoveDown = e => { this.props.onMoveDown(this.props.containerId || this.props.id, e.target.getAttribute('data-featured')); } handleHotkeyCollapse = e => { if (!this.props.settings.getIn(['collapsed', 'enabled'])) return; this.setCollapsed(!this.state.isCollapsed); } handleHotkeyToggleSensitive = () => { this.handleToggleMediaVisibility(); } handleUnfilterClick = e => { const { onUnfilter, status } = this.props; onUnfilter(status.get('reblog') ? status.get('reblog') : status, () => this.setState({ forceFilter: false })); } handleFilterClick = () => { this.setState({ forceFilter: true }); } handleRef = c => { this.node = c; } renderLoadingMediaGallery () { return
; } renderLoadingVideoPlayer () { return
; } renderLoadingAudioPlayer () { return
; } render () { const { handleRef, parseClick, setExpansion, setCollapsed, } = this; const { router } = this.context; const { intl, status, account, otherAccounts, settings, collapsed, muted, prepend, intersectionObserverWrapper, onOpenVideo, onOpenMedia, notification, hidden, unread, featured, ...other } = this.props; const { isExpanded, isCollapsed, forceFilter } = this.state; let background = null; let attachments = null; let media = null; let mediaIcon = null; if (status === null) { return null; } const handlers = { reply: this.handleHotkeyReply, favourite: this.handleHotkeyFavourite, boost: this.handleHotkeyBoost, mention: this.handleHotkeyMention, open: this.handleHotkeyOpen, openProfile: this.handleHotkeyOpenProfile, moveUp: this.handleHotkeyMoveUp, moveDown: this.handleHotkeyMoveDown, toggleSpoiler: this.handleExpandedToggle, bookmark: this.handleHotkeyBookmark, toggleCollapse: this.handleHotkeyCollapse, toggleSensitive: this.handleHotkeyToggleSensitive, openMedia: this.handleHotkeyOpenMedia, }; if (hidden) { return (
{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])} {' '} {status.get('content')}
); } const filtered = (status.get('filtered') || status.getIn(['reblog', 'filtered'])) && settings.get('filtering_behavior') !== 'content_warning'; if (forceFilter === undefined ? filtered : forceFilter) { const minHandlers = this.props.muted ? {} : { moveUp: this.handleHotkeyMoveUp, moveDown: this.handleHotkeyMoveDown, }; return (
{settings.get('filtering_behavior') !== 'upstream' && ' '} {settings.get('filtering_behavior') !== 'upstream' && ( )}
); } // If user backgrounds for collapsed statuses are enabled, then we // initialize our background accordingly. This will only be rendered if // the status is collapsed. if (settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds'])) { background = status.getIn(['account', 'header']); } // This handles our media attachments. // If a media file is of unknwon type or if the status is muted // (notification), we show a list of links instead of embedded media. // After we have generated our appropriate media element and stored it in // `media`, we snatch the thumbnail to use as our `background` if media // backgrounds for collapsed statuses are enabled. attachments = status.get('media_attachments'); if (status.get('poll')) { media = ; mediaIcon = 'tasks'; } else if (attachments.size > 0) { if (muted || attachments.some(item => item.get('type') === 'unknown')) { media = ( ); } else if (attachments.getIn([0, 'type']) === 'audio') { const attachment = status.getIn(['media_attachments', 0]); media = ( {Component => ( )} ); mediaIcon = 'music'; } else if (attachments.getIn([0, 'type']) === 'video') { const attachment = status.getIn(['media_attachments', 0]); media = ( {Component => ()} ); mediaIcon = 'video-camera'; } else { // Media type is 'image' or 'gifv' media = ( {Component => ( ); mediaIcon = 'picture-o'; } if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) { background = attachments.getIn([0, 'preview_url']); } } else if (status.get('card') && settings.get('inline_preview_cards')) { media = ( ); mediaIcon = 'link'; } // Here we prepare extra data-* attributes for CSS selectors. // Users can use those for theming, hiding avatars etc via UserStyle const selectorAttribs = { 'data-status-by': `@${status.getIn(['account', 'acct'])}`, }; if (prepend && account) { const notifKind = { favourite: 'favourited', reblog: 'boosted', reblogged_by: 'boosted', }[prepend]; selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`; } let rebloggedByText; if (prepend === 'reblog') { rebloggedByText = intl.formatMessage({ id: 'status.reblogged_by', defaultMessage: '{name} boosted' }, { name: account.get('acct') }); } const computedClass = classNames('status', `status-${status.get('visibility')}`, { collapsed: isCollapsed, 'has-background': isCollapsed && background, 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, muted, }, 'focusable'); return (
{prepend && account ? ( ) : null} {!muted || !isCollapsed ? ( ) : null}
{!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? ( ) : null} {notification ? ( ) : null}
); } }