Disroot/Mangane
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases 2 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, skinTone: 1,
reduceMotion: false, reduceMotion: false,
autoPlayGif: true, autoPlayGif: true,
displayMedia: true, displayMedia: 'default',
expandSpoilers: false, expandSpoilers: false,
unfollowModal: false, unfollowModal: false,
boostModal: 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 { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { isIOS } from '../is_mobile'; import { isIOS } from '../is_mobile';
import classNames from 'classnames'; import classNames from 'classnames';
import { displayMedia } from '../initial_state';
import { decode } from 'blurhash'; import { decode } from 'blurhash';
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio'; import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
@ -17,11 +16,11 @@ const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }, toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
}); });
const mapStateToProps = state => ({ const mapStateToItemProps = state => ({
autoPlayGif: getSettings(state).get('autoPlayGif'), autoPlayGif: getSettings(state).get('autoPlayGif'),
}); });
@connect(mapStateToProps) @connect(mapStateToItemProps)
class Item extends React.PureComponent { class Item extends React.PureComponent {
static propTypes = { 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 { class MediaGallery extends React.PureComponent {
static propTypes = { static propTypes = {
@ -253,6 +257,7 @@ class MediaGallery extends React.PureComponent {
cacheWidth: PropTypes.func, cacheWidth: PropTypes.func,
visible: PropTypes.bool, visible: PropTypes.bool,
onToggleVisibility: PropTypes.func, onToggleVisibility: PropTypes.func,
displayMedia: PropTypes.string,
}; };
static defaultProps = { static defaultProps = {
@ -260,11 +265,12 @@ class MediaGallery extends React.PureComponent {
}; };
state = { 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, width: this.props.defaultWidth,
}; };
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
const { displayMedia } = this.props;
if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) { if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' }); this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
} else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) { } 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 classNames from 'classnames';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import PollContainer from 'soapbox/containers/poll_container'; import PollContainer from 'soapbox/containers/poll_container';
import { displayMedia } from '../initial_state';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
// We use the component (and not the container) since we do not want // 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(', '); return values.join(', ');
}; };
export const defaultMediaVisibility = (status) => { export const defaultMediaVisibility = (status, displayMedia) => {
if (!status) { if (!status) {
return undefined; return undefined;
} }
@ -89,6 +88,7 @@ class Status extends ImmutablePureComponent {
cacheMediaWidth: PropTypes.func, cacheMediaWidth: PropTypes.func,
cachedMediaWidth: PropTypes.number, cachedMediaWidth: PropTypes.number,
group: ImmutablePropTypes.map, group: ImmutablePropTypes.map,
displayMedia: PropTypes.string,
}; };
// Avoid checking props that are functions (and whose equality will always // Avoid checking props that are functions (and whose equality will always
@ -101,7 +101,7 @@ class Status extends ImmutablePureComponent {
]; ];
state = { state = {
showMedia: defaultMediaVisibility(this.props.status), showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
statusId: undefined, statusId: undefined,
}; };

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

@ -50,6 +50,7 @@ const makeMapStateToProps = () => {
const mapStateToProps = (state, props) => ({ const mapStateToProps = (state, props) => ({
status: getStatus(state, props), status: getStatus(state, props),
displayMedia: getSettings(state).get('displayMedia'),
}); });
return mapStateToProps; 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 ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { displayMedia } from 'soapbox/initial_state';
import classNames from 'classnames'; import classNames from 'classnames';
import { decode } from 'blurhash'; import { decode } from 'blurhash';
import { isIOS } from 'soapbox/is_mobile'; import { isIOS } from 'soapbox/is_mobile';
@ -12,6 +11,7 @@ import { getSettings } from 'soapbox/actions/settings';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
autoPlayGif: getSettings(state).get('autoPlayGif'), autoPlayGif: getSettings(state).get('autoPlayGif'),
displayMedia: getSettings(state).get('displayMedia'),
}); });
export default @connect(mapStateToProps) export default @connect(mapStateToProps)
@ -22,10 +22,11 @@ class MediaItem extends ImmutablePureComponent {
displayWidth: PropTypes.number.isRequired, displayWidth: PropTypes.number.isRequired,
onOpenMedia: PropTypes.func.isRequired, onOpenMedia: PropTypes.func.isRequired,
autoPlayGif: PropTypes.bool, autoPlayGif: PropTypes.bool,
displayMedia: PropTypes.string,
}; };
state = { 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, loaded: false,
}; };

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

@ -1,14 +1,15 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { fromJS, is } from 'immutable'; import { fromJS, is } from 'immutable';
import { throttle } from 'lodash'; import { throttle } from 'lodash';
import classNames from 'classnames'; import classNames from 'classnames';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen'; import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
import { displayMedia } from '../../initial_state';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import { decode } from 'blurhash'; import { decode } from 'blurhash';
import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio'; import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
import { getSettings } from 'soapbox/actions/settings';
const messages = defineMessages({ const messages = defineMessages({
play: { id: 'video.play', defaultMessage: 'Play' }, play: { id: 'video.play', defaultMessage: 'Play' },
@ -87,7 +88,12 @@ export const getPointerPosition = (el, event) => {
return position; return position;
}; };
export default @injectIntl const mapStateToProps = state => ({
displayMedia: getSettings(state).get('displayMedia'),
});
export default @connect(mapStateToProps)
@injectIntl
class Video extends React.PureComponent { class Video extends React.PureComponent {
static propTypes = { static propTypes = {
@ -109,6 +115,7 @@ class Video extends React.PureComponent {
blurhash: PropTypes.string, blurhash: PropTypes.string,
link: PropTypes.node, link: PropTypes.node,
aspectRatio: PropTypes.number, aspectRatio: PropTypes.number,
displayMedia: PropTypes.string,
}; };
state = { state = {
@ -121,7 +128,7 @@ class Video extends React.PureComponent {
fullscreen: false, fullscreen: false,
hovered: false, hovered: false,
muted: 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 // 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. If it's not documented, it's because I inherited it from Mastodon and I don't know what it does yet.
- `dropdown_menu` - `dropdown_menu`
Sample: Sample:
``` ```
dropdown_menu: { 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` - `timelines`
Sample: Sample:
``` ```
timelines: { 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: Sample:
``` ```
meta: { 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) - `pleroma` - Pleroma specific metadata about the user pulled from `/api/v1/accounts/verify_credentials` (excluding the pleroma_settings_store)
- `alerts` - `alerts`
Sample: Sample:
``` ```
alerts: [] alerts: []
@ -114,7 +114,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
``` ```
- `modal` - `modal`
Sample: Sample:
``` ```
modal: { 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` - `user_lists`
Sample: Sample:
``` ```
user_lists: { 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` - `domain_lists`
Sample: Sample:
``` ```
domain_lists: { 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` - `status_lists`
Sample: Sample:
``` ```
status_lists: { 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: Sample:
``` ```
accounts: { 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` - `accounts_counters`
Sample: Sample:
``` ```
accounts_counters: { 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. - `statuses` - Data for all statuses you've viewed since launching the page, so they don't have to be downloaded twice.
Sample: Sample:
``` ```
statuses: { statuses: {
@ -349,21 +349,21 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
} }
} }
``` ```
- `relationships` - `relationships`
Sample: Sample:
``` ```
relationships: {} 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. - `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: Sample:
``` ```
settings: { settings: {
autoPlayGif: true, autoPlayGif: true,
displayMedia: true, displayMedia: 'default',
deleteModal: true, deleteModal: true,
unfollowModal: false, unfollowModal: false,
frequentlyUsedEmojis: { 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` - `push_notifications`
Sample: Sample:
``` ```
push_notifications: { 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` - `mutes`
Sample: Sample:
``` ```
mutes: { mutes: {
@ -491,9 +491,9 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
} }
} }
``` ```
- `reports` - `reports`
Sample: Sample:
``` ```
reports: { reports: {
@ -544,7 +544,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
} }
``` ```
- `compose` - `compose`
Sample: Sample:
``` ```
compose: { compose: {
@ -577,7 +577,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
``` ```
- `search` - `search`
Sample: Sample:
``` ```
search: { 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` - `media_attachments`
Sample: Sample:
``` ```
media_attachments: { 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` - `notifications`
Sample: Sample:
``` ```
notifications: { 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: Sample:
``` ```
height_cache: { 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` - `custom_emojis`
Sample: Sample:
``` ```
custom_emojis: [ 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` - `identity_proofs`
- `lists` - `lists`
Sample: Sample:
``` ```
lists: {}, lists: {},
``` ```
- `listEditor` - `listEditor`
Sample: Sample:
``` ```
listEditor: { listEditor: {
@ -725,7 +725,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
} }
``` ```
- `listAdder` - `listAdder`
Sample: Sample:
``` ```
listAdder: { listAdder: {
@ -739,14 +739,14 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
``` ```
- `filters` - `filters`
Sample: Sample:
``` ```
filters: [], filters: [],
``` ```
- `conversations` - `conversations`
Sample: Sample:
``` ```
conversations: { conversations: {
@ -758,7 +758,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
``` ```
- `suggestions` - `suggestions`
Sample: Sample:
``` ```
suggestions: { suggestions: {
@ -768,7 +768,7 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
``` ```
- `polls` - `polls`
Sample: Sample:
``` ```
polls: {} polls: {}
@ -784,20 +784,20 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
``` ```
- `groups` - `groups`
Sample: Sample:
``` ```
groups: {} groups: {}
``` ```
- `group_relationships` - `group_relationships`
Sample: Sample:
``` ```
group_relationships: {} group_relationships: {}
``` ```
- `group_lists` - `group_lists`
Sample: Sample:
``` ```
group_lists: { 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: [] admin: []
} }
``` ```
- `group_editor` - `group_editor`
Sample: Sample:
``` ```
group_editor: { 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` - `sidebar`
Sample: Sample:
``` ```
sidebar: {} sidebar: {}
``` ```
- `patron` - Data related to [soapbox-patron](https://gitlab.com/soapbox-pub/soapbox-patron) - `patron` - Data related to [soapbox-patron](https://gitlab.com/soapbox-pub/soapbox-patron)
Sample: Sample:
``` ```
patron: {} 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: Sample:
``` ```
soapbox: { 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` - `instance` - Instance data pulled from `/api/v1/instance`
Sample: Sample:
``` ```
instance: { 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. - `me` - The account ID of the currently logged in user, 'null' if loading, and 'false' if no user is logged in.
Sample: Sample:
``` ```
me: '9to1NPyS98J8cdicRE' me: '9to1NPyS98J8cdicRE'
``` ```
- `auth` - Data used for authentication - `auth` - Data used for authentication
Sample: Sample:
``` ```
auth: { auth: {