diff --git a/app/javascript/mastodon/actions/local_settings.js b/app/javascript/mastodon/actions/local_settings.js index 742a1eec2..18e0c245c 100644 --- a/app/javascript/mastodon/actions/local_settings.js +++ b/app/javascript/mastodon/actions/local_settings.js @@ -14,7 +14,7 @@ export function changeLocalSetting(key, value) { export function saveLocalSettings() { return (_, getState) => { - const localSettings = getState().get('localSettings').toJS(); + const localSettings = getState().get('local_settings').toJS(); localStorage.setItem('mastodon-settings', JSON.stringify(localSettings)); }; }; diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 75e8c9640..33e4a25e4 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -25,6 +25,7 @@ export default class StatusOrReblog extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, account: ImmutablePropTypes.map, + settings: ImmutablePropTypes.map, wrapped: PropTypes.bool, onReply: PropTypes.func, onFavourite: PropTypes.func, @@ -47,6 +48,7 @@ export default class StatusOrReblog extends ImmutablePureComponent { updateOnProps = [ 'status', 'account', + 'settings', 'wrapped', 'me', 'boostModal', @@ -97,6 +99,7 @@ class Status extends ImmutablePureComponent { static propTypes = { status: ImmutablePropTypes.map, account: ImmutablePropTypes.map, + settings: ImmutablePropTypes.map, wrapped: PropTypes.bool, onReply: PropTypes.func, onFavourite: PropTypes.func, @@ -126,6 +129,7 @@ class Status extends ImmutablePureComponent { updateOnProps = [ 'status', 'account', + 'settings', 'wrapped', 'me', 'boostModal', @@ -140,7 +144,8 @@ class Status extends ImmutablePureComponent { ] componentWillReceiveProps (nextProps) { - if (nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined) this.setState({ isCollapsed: !!nextProps.collapse }); + if (!nextProps.settings.getIn(['collapsed', 'enabled'])) this.collapse(false); + else if (nextProps.collapse !== this.props.collapse && nextProps.collapse !== undefined) this.collapse(this.props.collapse); } shouldComponentUpdate (nextProps, nextState) { @@ -165,8 +170,13 @@ class Status extends ImmutablePureComponent { componentDidMount () { const node = this.node; - if (this.props.collapse !== undefined) this.setState({ isCollapsed: !!this.props.collapse }); - else if (node.clientHeight > 400) this.setState({ isCollapsed: true }); + const { collapse, settings, status } = this.props; + + if (collapse !== undefined) this.collapse(collapse); + else if (settings.getIn(['collapsed', 'auto', 'all'])) this.collapse(); + else if (settings.getIn(['collapsed', 'auto', 'lengthy']) && node.clientHeight > 400) this.collapse(); + else if (settings.getIn(['collapsed', 'auto', 'replies']) && status.get('in_reply_to_id', null) !== null) this.collapse(); + else if (settings.getIn(['collapsed', 'auto', 'media']) && status.get('media_attachments').size > 0) this.collapse(); if (!this.props.intersectionObserverWrapper) { // TODO: enable IntersectionObserver optimization for notification statuses. @@ -186,6 +196,11 @@ class Status extends ImmutablePureComponent { this.componentMounted = false; } + collapse = (collapsedOrNot) => { + if (collapsedOrNot === undefined) collapsedOrNot = true; + if (this.props.settings.getIn(['collapsed', 'enabled'])) this.setState({ isCollapsed: !!collapsedOrNot }); + } + handleIntersection = (entry) => { // Edge 15 doesn't support isIntersecting, but we can infer it // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12156111/ @@ -247,20 +262,23 @@ class Status extends ImmutablePureComponent { }; handleCollapsedClick = () => { - this.setState({ isCollapsed: !this.state.isCollapsed, isExpanded: false }); + this.collapse(!this.state.isCollapsed); + this.setState({ isExpanded: false }); } render () { let media = null; let mediaType = null; - let thumb = null; let statusAvatar; // Exclude intersectionObserverWrapper from `other` variable // because intersection is managed in here. - const { status, account, intersectionObserverWrapper, intl, ...other } = this.props; + const { status, account, settings, intersectionObserverWrapper, intl, ...other } = this.props; const { isExpanded, isIntersecting, isHidden, isCollapsed } = this.state; + + let background = settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds']) ? status.getIn(['account', 'header']) : null; + if (status === null) { return null; } @@ -280,12 +298,12 @@ class Status extends ImmutablePureComponent { } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') { media = ; mediaType =