From 183c6538cadf95bf92547848bb6b2a6e816ebc3e Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 28 May 2020 20:36:39 -0500 Subject: [PATCH] Pull displayMedia from Redux store --- app/soapbox/actions/settings.js | 2 +- app/soapbox/components/media_gallery.js | 16 ++- app/soapbox/components/status.js | 6 +- app/soapbox/containers/status_container.js | 1 + .../account_gallery/components/media_item.js | 5 +- app/soapbox/features/video/index.js | 13 ++- docs/store.md | 104 +++++++++--------- 7 files changed, 81 insertions(+), 66 deletions(-) diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js index f78e7bdd0..7ad8410d8 100644 --- a/app/soapbox/actions/settings.js +++ b/app/soapbox/actions/settings.js @@ -14,7 +14,7 @@ const defaultSettings = ImmutableMap({ skinTone: 1, reduceMotion: false, autoPlayGif: true, - displayMedia: true, + displayMedia: 'default', expandSpoilers: false, unfollowModal: false, boostModal: false, diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index 7fc254f61..82eee64ce 100644 --- a/app/soapbox/components/media_gallery.js +++ b/app/soapbox/components/media_gallery.js @@ -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) { diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js index 8abaf7ee1..848082da6 100644 --- a/app/soapbox/components/status.js +++ b/app/soapbox/components/status.js @@ -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, }; diff --git a/app/soapbox/containers/status_container.js b/app/soapbox/containers/status_container.js index fae063ce4..0e25f9e65 100644 --- a/app/soapbox/containers/status_container.js +++ b/app/soapbox/containers/status_container.js @@ -50,6 +50,7 @@ const makeMapStateToProps = () => { const mapStateToProps = (state, props) => ({ status: getStatus(state, props), + displayMedia: getSettings(state).get('displayMedia'), }); return mapStateToProps; diff --git a/app/soapbox/features/account_gallery/components/media_item.js b/app/soapbox/features/account_gallery/components/media_item.js index e119ba8b9..670e465a8 100644 --- a/app/soapbox/features/account_gallery/components/media_item.js +++ b/app/soapbox/features/account_gallery/components/media_item.js @@ -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, }; diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js index 68e4fdc66..d49e08e65 100644 --- a/app/soapbox/features/video/index.js +++ b/app/soapbox/features/video/index.js @@ -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 diff --git a/docs/store.md b/docs/store.md index 134904e2b..4a09f62be 100644 --- a/docs/store.md +++ b/docs/store.md @@ -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: {