Disroot/Mangane
5
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity

Pull displayMedia from Redux store

Browse source
This commit is contained in:
Alex Gleason 2020-05-28 20:36:39 -05:00
parent ac341f0c2e
commit 183c6538ca
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
7 changed files with 81 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/actions/settings.js
View file

@ -14,7 +14,7 @@ const defaultSettings = ImmutableMap({
skinTone: 1,
reduceMotion: false,
autoPlayGif: true,
displayMedia: true,
displayMedia: 'default',
expandSpoilers: false,
unfollowModal: false,
boostModal: false,

16
app/soapbox/components/media_gallery.js
View file

@ -7,7 +7,6 @@ import IconButton from './icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { isIOS } from '../is_mobile';
import classNames from 'classnames';
import { displayMedia } from '../initial_state';
import { decode } from 'blurhash';
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
import { Map as ImmutableMap } from 'immutable';
@ -17,11 +16,11 @@ const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
});
const mapStateToProps = state => ({
const mapStateToItemProps = state => ({
autoPlayGif: getSettings(state).get('autoPlayGif'),
});
@connect(mapStateToProps)
@connect(mapStateToItemProps)
class Item extends React.PureComponent {
static propTypes = {
@ -238,7 +237,12 @@ class Item extends React.PureComponent {
}
export default @injectIntl
const mapStateToMediaGalleryProps = state => ({
displayMedia: getSettings(state).get('displayMedia'),
});
export default @connect(mapStateToMediaGalleryProps)
@injectIntl
class MediaGallery extends React.PureComponent {
static propTypes = {
@ -253,6 +257,7 @@ class MediaGallery extends React.PureComponent {
cacheWidth: PropTypes.func,
visible: PropTypes.bool,
onToggleVisibility: PropTypes.func,
displayMedia: PropTypes.string,
};
static defaultProps = {
@ -260,11 +265,12 @@ class MediaGallery extends React.PureComponent {
};
state = {
visible: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
visible: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
width: this.props.defaultWidth,
};
componentWillReceiveProps(nextProps) {
const { displayMedia } = this.props;
if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
} else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {

6
app/soapbox/components/status.js
View file

@ -17,7 +17,6 @@ import { HotKeys } from 'react-hotkeys';
import classNames from 'classnames';
import Icon from 'soapbox/components/icon';
import PollContainer from 'soapbox/containers/poll_container';
import { displayMedia } from '../initial_state';
import { NavLink } from 'react-router-dom';
// We use the component (and not the container) since we do not want
@ -41,7 +40,7 @@ export const textForScreenReader = (intl, status, rebloggedByText = false) => {
return values.join(', ');
};
export const defaultMediaVisibility = (status) => {
export const defaultMediaVisibility = (status, displayMedia) => {
if (!status) {
return undefined;
}
@ -89,6 +88,7 @@ class Status extends ImmutablePureComponent {
cacheMediaWidth: PropTypes.func,
cachedMediaWidth: PropTypes.number,
group: ImmutablePropTypes.map,
displayMedia: PropTypes.string,
};
// Avoid checking props that are functions (and whose equality will always
@ -101,7 +101,7 @@ class Status extends ImmutablePureComponent {
];
state = {
showMedia: defaultMediaVisibility(this.props.status),
showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
statusId: undefined,
};

1
app/soapbox/containers/status_container.js
View file

@ -50,6 +50,7 @@ const makeMapStateToProps = () => {
const mapStateToProps = (state, props) => ({
status: getStatus(state, props),
displayMedia: getSettings(state).get('displayMedia'),
});
return mapStateToProps;

5
app/soapbox/features/account_gallery/components/media_item.js
View file

@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Icon from 'soapbox/components/icon';
import { displayMedia } from 'soapbox/initial_state';
import classNames from 'classnames';
import { decode } from 'blurhash';
import { isIOS } from 'soapbox/is_mobile';
@ -12,6 +11,7 @@ import { getSettings } from 'soapbox/actions/settings';
const mapStateToProps = state => ({
autoPlayGif: getSettings(state).get('autoPlayGif'),
displayMedia: getSettings(state).get('displayMedia'),
});
export default @connect(mapStateToProps)
@ -22,10 +22,11 @@ class MediaItem extends ImmutablePureComponent {
displayWidth: PropTypes.number.isRequired,
onOpenMedia: PropTypes.func.isRequired,
autoPlayGif: PropTypes.bool,
displayMedia: PropTypes.string,
};
state = {
visible: displayMedia !== 'hide_all' && !this.props.attachment.getIn(['status', 'sensitive']) || displayMedia === 'show_all',
visible: this.props.displayMedia !== 'hide_all' && !this.props.attachment.getIn(['status', 'sensitive']) || this.props.displayMedia === 'show_all',
loaded: false,
};

13
app/soapbox/features/video/index.js
View file

@ -1,14 +1,15 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { fromJS, is } from 'immutable';
import { throttle } from 'lodash';
import classNames from 'classnames';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
import { displayMedia } from '../../initial_state';
import Icon from 'soapbox/components/icon';
import { decode } from 'blurhash';
import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
import { getSettings } from 'soapbox/actions/settings';
const messages = defineMessages({
play: { id: 'video.play', defaultMessage: 'Play' },
@ -87,7 +88,12 @@ export const getPointerPosition = (el, event) => {
return position;
};
export default @injectIntl
const mapStateToProps = state => ({
displayMedia: getSettings(state).get('displayMedia'),
});
export default @connect(mapStateToProps)
@injectIntl
class Video extends React.PureComponent {
static propTypes = {
@ -109,6 +115,7 @@ class Video extends React.PureComponent {
blurhash: PropTypes.string,
link: PropTypes.node,
aspectRatio: PropTypes.number,
displayMedia: PropTypes.string,
};
state = {
@ -121,7 +128,7 @@ class Video extends React.PureComponent {
fullscreen: false,
hovered: false,
muted: false,
revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
revealed: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
};
// hard coded in components.scss

104
docs/store.md
View file

@ -11,7 +11,7 @@ Due to the large size of the Redux store in soapbox-fe, it's worth documenting t
If it's not documented, it's because I inherited it from Mastodon and I don't know what it does yet.
- `dropdown_menu`
Sample:
```
dropdown_menu: {
@ -22,7 +22,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `timelines`
Sample:
```
timelines: {
@ -49,8 +49,8 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
```
- `meta` - User-specific data that is _not_ a frontend setting (see: `settings`).
- `meta` - User-specific data that is _not_ a frontend setting (see: `settings`).
Sample:
```
meta: {
@ -98,7 +98,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
- `pleroma` - Pleroma specific metadata about the user pulled from `/api/v1/accounts/verify_credentials` (excluding the pleroma_settings_store)
- `alerts`
Sample:
```
alerts: []
@ -114,7 +114,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `modal`
Sample:
```
modal: {
@ -123,7 +123,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
```
- `user_lists`
Sample:
```
user_lists: {
@ -140,7 +140,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `domain_lists`
Sample:
```
domain_lists: {
@ -151,7 +151,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `status_lists`
Sample:
```
status_lists: {
@ -170,8 +170,8 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
}
```
- `accounts` - Data for all accounts you've viewed since launching the page, so they don't have to be downloaded twice.
- `accounts` - Data for all accounts you've viewed since launching the page, so they don't have to be downloaded twice.
Sample:
```
accounts: {
@ -248,7 +248,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `accounts_counters`
Sample:
```
accounts_counters: {
@ -271,7 +271,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `statuses` - Data for all statuses you've viewed since launching the page, so they don't have to be downloaded twice.
Sample:
```
statuses: {
@ -349,21 +349,21 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
}
```
- `relationships`
Sample:
```
relationships: {}
```
- `settings` - Any frontend configuration values that should be persisted to the backend database. This includes user preferences as well as metadata such as emoji usage counters. It uses [`pleroma_settings_store`](https://docs-develop.pleroma.social/backend/API/differences_in_mastoapi_responses/#accounts) to do it if it's available. If there's some other endpoint that handles your value, it doesn't belong here.
Sample:
```
settings: {
autoPlayGif: true,
displayMedia: true,
displayMedia: 'default',
deleteModal: true,
unfollowModal: false,
frequentlyUsedEmojis: {
@ -461,9 +461,9 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
}
```
- `push_notifications`
Sample:
```
push_notifications: {
@ -480,7 +480,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
```
- `mutes`
Sample:
```
mutes: {
@ -491,9 +491,9 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
}
```
- `reports`
Sample:
```
reports: {
@ -544,7 +544,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
```
- `compose`
Sample:
```
compose: {
@ -577,7 +577,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `search`
Sample:
```
search: {
@ -588,7 +588,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
```
- `media_attachments`
Sample:
```
media_attachments: {
@ -612,9 +612,9 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
]
}
```
- `notifications`
Sample:
```
notifications: {
@ -651,8 +651,8 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
```
- `height_cache`
- `height_cache`
Sample:
```
height_cache: {
@ -667,7 +667,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `custom_emojis`
Sample:
```
custom_emojis: [
@ -694,18 +694,18 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
]
```
- `identity_proofs`
- `lists`
Sample:
```
lists: {},
```
- `listEditor`
Sample:
```
listEditor: {
@ -725,7 +725,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
```
- `listAdder`
Sample:
```
listAdder: {
@ -739,14 +739,14 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `filters`
Sample:
```
filters: [],
```
- `conversations`
Sample:
```
conversations: {
@ -758,7 +758,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `suggestions`
Sample:
```
suggestions: {
@ -768,7 +768,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `polls`
Sample:
```
polls: {}
@ -784,20 +784,20 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `groups`
Sample:
```
groups: {}
```
- `group_relationships`
Sample:
```
group_relationships: {}
```
- `group_lists`
Sample:
```
group_lists: {
@ -806,9 +806,9 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
admin: []
}
```
- `group_editor`
Sample:
```
group_editor: {
@ -822,21 +822,21 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `sidebar`
Sample:
```
sidebar: {}
```
- `patron` - Data related to [soapbox-patron](https://gitlab.com/soapbox-pub/soapbox-patron)
Sample:
```
patron: {}
```
- `soapbox` - Soapbox specific configuration pulled from `/instance/soapbox.json`. The configuration file isn't required and this map can be empty.
- `soapbox` - Soapbox specific configuration pulled from `/instance/soapbox.json`. The configuration file isn't required and this map can be empty.
Sample:
```
soapbox: {
@ -857,7 +857,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
```
- `instance` - Instance data pulled from `/api/v1/instance`
Sample:
```
instance: {
@ -892,16 +892,16 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
}
}
```
- `me` - The account ID of the currently logged in user, 'null' if loading, and 'false' if no user is logged in.
Sample:
```
me: '9to1NPyS98J8cdicRE'
```
- `auth` - Data used for authentication
Sample:
```
auth: {