75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
|
import PropTypes from 'prop-types';
|
||
|
import React from 'react';
|
||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||
|
import { defineMessages, useIntl } from 'react-intl';
|
||
|
import { connect } from 'react-redux';
|
||
|
import { withRouter } from 'react-router-dom';
|
||
|
|
||
|
import { getSettings, changeSettingImmediate } from 'soapbox/actions/settings';
|
||
|
import {
|
||
|
SimpleForm,
|
||
|
SelectDropdown,
|
||
|
} from 'soapbox/features/forms';
|
||
|
|
||
|
import List, { ListItem } from '../../components/list';
|
||
|
import { Card, CardBody, CardHeader, CardTitle } from '../../components/ui';
|
||
|
|
||
|
const messages = defineMessages({
|
||
|
mediaDisplay: { id: 'preferences.fields.media_display_label', defaultMessage: 'Media display' },
|
||
|
display_media_default: { id: 'preferences.fields.display_media.default', defaultMessage: 'Hide media marked as sensitive' },
|
||
|
display_media_hide_all: { id: 'preferences.fields.display_media.hide_all', defaultMessage: 'Always hide media' },
|
||
|
display_media_show_all: { id: 'preferences.fields.display_media.show_all', defaultMessage: 'Always show media' },
|
||
|
});
|
||
|
|
||
|
const mapStateToProps = state => {
|
||
|
return {
|
||
|
settings: getSettings(state),
|
||
|
};
|
||
|
};
|
||
|
|
||
|
const MediaDisplay = ({ history, settings, dispatch }) => {
|
||
|
const intl = useIntl();
|
||
|
|
||
|
const displayMediaOptions = {
|
||
|
default: intl.formatMessage(messages.display_media_default),
|
||
|
hide_all: intl.formatMessage(messages.display_media_hide_all),
|
||
|
show_all: intl.formatMessage(messages.display_media_show_all),
|
||
|
};
|
||
|
|
||
|
const onSelectChange = path => {
|
||
|
return e => {
|
||
|
dispatch(changeSettingImmediate(path, e.target.value));
|
||
|
};
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<Card variant='rounded'>
|
||
|
<CardHeader>
|
||
|
<CardTitle title={intl.formatMessage(messages.mediaDisplay)} />
|
||
|
</CardHeader>
|
||
|
|
||
|
<CardBody>
|
||
|
<SimpleForm className='p-0 space-y-3'>
|
||
|
<List>
|
||
|
<ListItem label={intl.formatMessage(messages.mediaDisplay)}>
|
||
|
<SelectDropdown
|
||
|
items={displayMediaOptions}
|
||
|
defaultValue={settings.get('displayMedia')}
|
||
|
onChange={onSelectChange(['displayMedia'])}
|
||
|
/>
|
||
|
</ListItem>
|
||
|
</List>
|
||
|
</SimpleForm>
|
||
|
</CardBody>
|
||
|
</Card>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
MediaDisplay.propTypes = {
|
||
|
history: PropTypes.object,
|
||
|
dispatch: PropTypes.func.isRequired,
|
||
|
settings: ImmutablePropTypes.map,
|
||
|
};
|
||
|
|
||
|
export default withRouter(connect(mapStateToProps)(MediaDisplay));
|