Merge pull request #1829 from ClearlyClaire/glitch-soc/merge-upstream
Port UI filter changes from upstream
This commit is contained in:
commit
acc580fb7d
@ -1,9 +1,24 @@
|
|||||||
import api from 'flavours/glitch/util/api';
|
import api from 'flavours/glitch/util/api';
|
||||||
|
import { openModal } from './modal';
|
||||||
|
|
||||||
export const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST';
|
export const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST';
|
||||||
export const FILTERS_FETCH_SUCCESS = 'FILTERS_FETCH_SUCCESS';
|
export const FILTERS_FETCH_SUCCESS = 'FILTERS_FETCH_SUCCESS';
|
||||||
export const FILTERS_FETCH_FAIL = 'FILTERS_FETCH_FAIL';
|
export const FILTERS_FETCH_FAIL = 'FILTERS_FETCH_FAIL';
|
||||||
|
|
||||||
|
export const FILTERS_STATUS_CREATE_REQUEST = 'FILTERS_STATUS_CREATE_REQUEST';
|
||||||
|
export const FILTERS_STATUS_CREATE_SUCCESS = 'FILTERS_STATUS_CREATE_SUCCESS';
|
||||||
|
export const FILTERS_STATUS_CREATE_FAIL = 'FILTERS_STATUS_CREATE_FAIL';
|
||||||
|
|
||||||
|
export const FILTERS_CREATE_REQUEST = 'FILTERS_CREATE_REQUEST';
|
||||||
|
export const FILTERS_CREATE_SUCCESS = 'FILTERS_CREATE_SUCCESS';
|
||||||
|
export const FILTERS_CREATE_FAIL = 'FILTERS_CREATE_FAIL';
|
||||||
|
|
||||||
|
export const initAddFilter = (status, { contextType }) => dispatch =>
|
||||||
|
dispatch(openModal('FILTER', {
|
||||||
|
statusId: status?.get('id'),
|
||||||
|
contextType: contextType,
|
||||||
|
}));
|
||||||
|
|
||||||
export const fetchFilters = () => (dispatch, getState) => {
|
export const fetchFilters = () => (dispatch, getState) => {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: FILTERS_FETCH_REQUEST,
|
type: FILTERS_FETCH_REQUEST,
|
||||||
@ -11,7 +26,7 @@ export const fetchFilters = () => (dispatch, getState) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
api(getState)
|
api(getState)
|
||||||
.get('/api/v1/filters')
|
.get('/api/v2/filters')
|
||||||
.then(({ data }) => dispatch({
|
.then(({ data }) => dispatch({
|
||||||
type: FILTERS_FETCH_SUCCESS,
|
type: FILTERS_FETCH_SUCCESS,
|
||||||
filters: data,
|
filters: data,
|
||||||
@ -24,3 +39,55 @@ export const fetchFilters = () => (dispatch, getState) => {
|
|||||||
skipAlert: true,
|
skipAlert: true,
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const createFilterStatus = (params, onSuccess, onFail) => (dispatch, getState) => {
|
||||||
|
dispatch(createFilterStatusRequest());
|
||||||
|
|
||||||
|
api(getState).post(`/api/v1/filters/${params.filter_id}/statuses`, params).then(response => {
|
||||||
|
dispatch(createFilterStatusSuccess(response.data));
|
||||||
|
if (onSuccess) onSuccess();
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch(createFilterStatusFail(error));
|
||||||
|
if (onFail) onFail();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createFilterStatusRequest = () => ({
|
||||||
|
type: FILTERS_STATUS_CREATE_REQUEST,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const createFilterStatusSuccess = filter_status => ({
|
||||||
|
type: FILTERS_STATUS_CREATE_SUCCESS,
|
||||||
|
filter_status,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const createFilterStatusFail = error => ({
|
||||||
|
type: FILTERS_STATUS_CREATE_FAIL,
|
||||||
|
error,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const createFilter = (params, onSuccess, onFail) => (dispatch, getState) => {
|
||||||
|
dispatch(createFilterRequest());
|
||||||
|
|
||||||
|
api(getState).post('/api/v2/filters', params).then(response => {
|
||||||
|
dispatch(createFilterSuccess(response.data));
|
||||||
|
if (onSuccess) onSuccess(response.data);
|
||||||
|
}).catch(error => {
|
||||||
|
dispatch(createFilterFail(error));
|
||||||
|
if (onFail) onFail();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createFilterRequest = () => ({
|
||||||
|
type: FILTERS_CREATE_REQUEST,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const createFilterSuccess = filter => ({
|
||||||
|
type: FILTERS_CREATE_SUCCESS,
|
||||||
|
filter,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const createFilterFail = error => ({
|
||||||
|
type: FILTERS_CREATE_FAIL,
|
||||||
|
error,
|
||||||
|
});
|
||||||
|
@ -5,6 +5,7 @@ export const ACCOUNTS_IMPORT = 'ACCOUNTS_IMPORT';
|
|||||||
export const STATUS_IMPORT = 'STATUS_IMPORT';
|
export const STATUS_IMPORT = 'STATUS_IMPORT';
|
||||||
export const STATUSES_IMPORT = 'STATUSES_IMPORT';
|
export const STATUSES_IMPORT = 'STATUSES_IMPORT';
|
||||||
export const POLLS_IMPORT = 'POLLS_IMPORT';
|
export const POLLS_IMPORT = 'POLLS_IMPORT';
|
||||||
|
export const FILTERS_IMPORT = 'FILTERS_IMPORT';
|
||||||
|
|
||||||
function pushUnique(array, object) {
|
function pushUnique(array, object) {
|
||||||
if (array.every(element => element.id !== object.id)) {
|
if (array.every(element => element.id !== object.id)) {
|
||||||
@ -28,6 +29,10 @@ export function importStatuses(statuses) {
|
|||||||
return { type: STATUSES_IMPORT, statuses };
|
return { type: STATUSES_IMPORT, statuses };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function importFilters(filters) {
|
||||||
|
return { type: FILTERS_IMPORT, filters };
|
||||||
|
}
|
||||||
|
|
||||||
export function importPolls(polls) {
|
export function importPolls(polls) {
|
||||||
return { type: POLLS_IMPORT, polls };
|
return { type: POLLS_IMPORT, polls };
|
||||||
}
|
}
|
||||||
@ -61,11 +66,16 @@ export function importFetchedStatuses(statuses) {
|
|||||||
const accounts = [];
|
const accounts = [];
|
||||||
const normalStatuses = [];
|
const normalStatuses = [];
|
||||||
const polls = [];
|
const polls = [];
|
||||||
|
const filters = [];
|
||||||
|
|
||||||
function processStatus(status) {
|
function processStatus(status) {
|
||||||
pushUnique(normalStatuses, normalizeStatus(status, getState().getIn(['statuses', status.id]), getState().get('local_settings')));
|
pushUnique(normalStatuses, normalizeStatus(status, getState().getIn(['statuses', status.id]), getState().get('local_settings')));
|
||||||
pushUnique(accounts, status.account);
|
pushUnique(accounts, status.account);
|
||||||
|
|
||||||
|
if (status.filtered) {
|
||||||
|
status.filtered.forEach(result => pushUnique(filters, result.filter));
|
||||||
|
}
|
||||||
|
|
||||||
if (status.reblog && status.reblog.id) {
|
if (status.reblog && status.reblog.id) {
|
||||||
processStatus(status.reblog);
|
processStatus(status.reblog);
|
||||||
}
|
}
|
||||||
@ -80,6 +90,7 @@ export function importFetchedStatuses(statuses) {
|
|||||||
dispatch(importPolls(polls));
|
dispatch(importPolls(polls));
|
||||||
dispatch(importFetchedAccounts(accounts));
|
dispatch(importFetchedAccounts(accounts));
|
||||||
dispatch(importStatuses(normalStatuses));
|
dispatch(importStatuses(normalStatuses));
|
||||||
|
dispatch(importFilters(filters));
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,6 +42,14 @@ export function normalizeAccount(account) {
|
|||||||
return account;
|
return account;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function normalizeFilterResult(result) {
|
||||||
|
const normalResult = { ...result };
|
||||||
|
|
||||||
|
normalResult.filter = normalResult.filter.id;
|
||||||
|
|
||||||
|
return normalResult;
|
||||||
|
}
|
||||||
|
|
||||||
export function normalizeStatus(status, normalOldStatus, settings) {
|
export function normalizeStatus(status, normalOldStatus, settings) {
|
||||||
const normalStatus = { ...status };
|
const normalStatus = { ...status };
|
||||||
normalStatus.account = status.account.id;
|
normalStatus.account = status.account.id;
|
||||||
@ -54,6 +62,10 @@ export function normalizeStatus(status, normalOldStatus, settings) {
|
|||||||
normalStatus.poll = status.poll.id;
|
normalStatus.poll = status.poll.id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (status.filtered) {
|
||||||
|
normalStatus.filtered = status.filtered.map(normalizeFilterResult);
|
||||||
|
}
|
||||||
|
|
||||||
// Only calculate these values when status first encountered and
|
// Only calculate these values when status first encountered and
|
||||||
// when the underlying values change. Otherwise keep the ones
|
// when the underlying values change. Otherwise keep the ones
|
||||||
// already in the reducer
|
// already in the reducer
|
||||||
|
@ -12,10 +12,8 @@ import { saveSettings } from './settings';
|
|||||||
import { defineMessages } from 'react-intl';
|
import { defineMessages } from 'react-intl';
|
||||||
import { List as ImmutableList } from 'immutable';
|
import { List as ImmutableList } from 'immutable';
|
||||||
import { unescapeHTML } from 'flavours/glitch/util/html';
|
import { unescapeHTML } from 'flavours/glitch/util/html';
|
||||||
import { getFiltersRegex } from 'flavours/glitch/selectors';
|
|
||||||
import { usePendingItems as preferPendingItems } from 'flavours/glitch/util/initial_state';
|
import { usePendingItems as preferPendingItems } from 'flavours/glitch/util/initial_state';
|
||||||
import compareId from 'flavours/glitch/util/compare_id';
|
import compareId from 'flavours/glitch/util/compare_id';
|
||||||
import { searchTextFromRawStatus } from 'flavours/glitch/actions/importer/normalizer';
|
|
||||||
import { requestNotificationPermission } from 'flavours/glitch/util/notifications';
|
import { requestNotificationPermission } from 'flavours/glitch/util/notifications';
|
||||||
|
|
||||||
export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
|
export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
|
||||||
@ -74,20 +72,17 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
|
|||||||
const showInColumn = activeFilter === 'all' ? getState().getIn(['settings', 'notifications', 'shows', notification.type], true) : activeFilter === notification.type;
|
const showInColumn = activeFilter === 'all' ? getState().getIn(['settings', 'notifications', 'shows', notification.type], true) : activeFilter === notification.type;
|
||||||
const showAlert = getState().getIn(['settings', 'notifications', 'alerts', notification.type], true);
|
const showAlert = getState().getIn(['settings', 'notifications', 'alerts', notification.type], true);
|
||||||
const playSound = getState().getIn(['settings', 'notifications', 'sounds', notification.type], true);
|
const playSound = getState().getIn(['settings', 'notifications', 'sounds', notification.type], true);
|
||||||
const filters = getFiltersRegex(getState(), { contextType: 'notifications' });
|
|
||||||
|
|
||||||
let filtered = false;
|
let filtered = false;
|
||||||
|
|
||||||
if (['mention', 'status'].includes(notification.type)) {
|
if (['mention', 'status'].includes(notification.type) && notification.status.filtered) {
|
||||||
const dropRegex = filters[0];
|
const filters = notification.status.filtered.filter(result => result.filter.context.includes('notifications'));
|
||||||
const regex = filters[1];
|
|
||||||
const searchIndex = searchTextFromRawStatus(notification.status);
|
|
||||||
|
|
||||||
if (dropRegex && dropRegex.test(searchIndex)) {
|
if (filters.some(result => result.filter.filter_action === 'hide')) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
filtered = regex && regex.test(searchIndex);
|
filtered = filters.length > 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (['follow_request'].includes(notification.type)) {
|
if (['follow_request'].includes(notification.type)) {
|
||||||
|
@ -42,9 +42,9 @@ export function fetchStatusRequest(id, skipLoading) {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export function fetchStatus(id) {
|
export function fetchStatus(id, forceFetch = false) {
|
||||||
return (dispatch, getState) => {
|
return (dispatch, getState) => {
|
||||||
const skipLoading = getState().getIn(['statuses', id], null) !== null;
|
const skipLoading = !forceFetch && getState().getIn(['statuses', id], null) !== null;
|
||||||
|
|
||||||
dispatch(fetchContext(id));
|
dispatch(fetchContext(id));
|
||||||
|
|
||||||
|
@ -21,7 +21,6 @@ import {
|
|||||||
updateReaction as updateAnnouncementsReaction,
|
updateReaction as updateAnnouncementsReaction,
|
||||||
deleteAnnouncement,
|
deleteAnnouncement,
|
||||||
} from './announcements';
|
} from './announcements';
|
||||||
import { fetchFilters } from './filters';
|
|
||||||
import { getLocale } from 'mastodon/locales';
|
import { getLocale } from 'mastodon/locales';
|
||||||
|
|
||||||
const { messages } = getLocale();
|
const { messages } = getLocale();
|
||||||
@ -97,9 +96,6 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
|
|||||||
case 'conversation':
|
case 'conversation':
|
||||||
dispatch(updateConversations(JSON.parse(data.payload)));
|
dispatch(updateConversations(JSON.parse(data.payload)));
|
||||||
break;
|
break;
|
||||||
case 'filters_changed':
|
|
||||||
dispatch(fetchFilters());
|
|
||||||
break;
|
|
||||||
case 'announcement':
|
case 'announcement':
|
||||||
dispatch(updateAnnouncements(JSON.parse(data.payload)));
|
dispatch(updateAnnouncements(JSON.parse(data.payload)));
|
||||||
break;
|
break;
|
||||||
|
@ -4,8 +4,7 @@ import api, { getLinks } from 'flavours/glitch/util/api';
|
|||||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||||
import compareId from 'flavours/glitch/util/compare_id';
|
import compareId from 'flavours/glitch/util/compare_id';
|
||||||
import { me, usePendingItems as preferPendingItems } from 'flavours/glitch/util/initial_state';
|
import { me, usePendingItems as preferPendingItems } from 'flavours/glitch/util/initial_state';
|
||||||
import { getFiltersRegex } from 'flavours/glitch/selectors';
|
import { toServerSideType } from 'flavours/glitch/util/filters';
|
||||||
import { searchTextFromRawStatus } from 'flavours/glitch/actions/importer/normalizer';
|
|
||||||
|
|
||||||
export const TIMELINE_UPDATE = 'TIMELINE_UPDATE';
|
export const TIMELINE_UPDATE = 'TIMELINE_UPDATE';
|
||||||
export const TIMELINE_DELETE = 'TIMELINE_DELETE';
|
export const TIMELINE_DELETE = 'TIMELINE_DELETE';
|
||||||
@ -40,14 +39,13 @@ export function updateTimeline(timeline, status, accept) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const filters = getFiltersRegex(getState(), { contextType: timeline });
|
let filtered = false;
|
||||||
const dropRegex = filters[0];
|
|
||||||
const regex = filters[1];
|
|
||||||
const text = searchTextFromRawStatus(status);
|
|
||||||
let filtered = false;
|
|
||||||
|
|
||||||
if (status.account.id !== me) {
|
if (status.filtered) {
|
||||||
filtered = (dropRegex && dropRegex.test(text)) || (regex && regex.test(text));
|
const contextType = toServerSideType(timeline);
|
||||||
|
const filters = status.filtered.filter(result => result.filter.context.includes(contextType));
|
||||||
|
|
||||||
|
filtered = filters.length > 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
dispatch(importFetchedStatus(status));
|
dispatch(importFetchedStatus(status));
|
||||||
|
@ -79,6 +79,7 @@ class Status extends ImmutablePureComponent {
|
|||||||
onOpenMedia: PropTypes.func,
|
onOpenMedia: PropTypes.func,
|
||||||
onOpenVideo: PropTypes.func,
|
onOpenVideo: PropTypes.func,
|
||||||
onBlock: PropTypes.func,
|
onBlock: PropTypes.func,
|
||||||
|
onAddFilter: PropTypes.func,
|
||||||
onEmbed: PropTypes.func,
|
onEmbed: PropTypes.func,
|
||||||
onHeightChange: PropTypes.func,
|
onHeightChange: PropTypes.func,
|
||||||
onToggleHidden: PropTypes.func,
|
onToggleHidden: PropTypes.func,
|
||||||
@ -455,8 +456,8 @@ class Status extends ImmutablePureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleUnfilterClick = e => {
|
handleUnfilterClick = e => {
|
||||||
const { onUnfilter, status } = this.props;
|
this.setState({ forceFilter: false });
|
||||||
onUnfilter(status.get('reblog') ? status.get('reblog') : status, () => this.setState({ forceFilter: false }));
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
handleFilterClick = () => {
|
handleFilterClick = () => {
|
||||||
@ -557,8 +558,8 @@ class Status extends ImmutablePureComponent {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const filtered = (status.get('filtered') || status.getIn(['reblog', 'filtered'])) && settings.get('filtering_behavior') !== 'content_warning';
|
const matchedFilters = status.get('matched_filters');
|
||||||
if (forceFilter === undefined ? filtered : forceFilter) {
|
if (this.state.forceFilter === undefined ? matchedFilters : this.state.forceFilter) {
|
||||||
const minHandlers = this.props.muted ? {} : {
|
const minHandlers = this.props.muted ? {} : {
|
||||||
moveUp: this.handleHotkeyMoveUp,
|
moveUp: this.handleHotkeyMoveUp,
|
||||||
moveDown: this.handleHotkeyMoveDown,
|
moveDown: this.handleHotkeyMoveDown,
|
||||||
@ -567,13 +568,11 @@ class Status extends ImmutablePureComponent {
|
|||||||
return (
|
return (
|
||||||
<HotKeys handlers={minHandlers}>
|
<HotKeys handlers={minHandlers}>
|
||||||
<div className='status__wrapper status__wrapper--filtered focusable' tabIndex='0' ref={this.handleRef}>
|
<div className='status__wrapper status__wrapper--filtered focusable' tabIndex='0' ref={this.handleRef}>
|
||||||
<FormattedMessage id='status.filtered' defaultMessage='Filtered' />
|
<FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
|
||||||
{settings.get('filtering_behavior') !== 'upstream' && ' '}
|
{' '}
|
||||||
{settings.get('filtering_behavior') !== 'upstream' && (
|
<button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
|
||||||
<button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
|
<FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
|
||||||
<FormattedMessage id='status.show_filter_reason' defaultMessage='(show why)' />
|
</button>
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</HotKeys>
|
</HotKeys>
|
||||||
);
|
);
|
||||||
@ -789,11 +788,11 @@ class Status extends ImmutablePureComponent {
|
|||||||
|
|
||||||
{!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
|
{!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
|
||||||
<StatusActionBar
|
<StatusActionBar
|
||||||
{...other}
|
|
||||||
status={status}
|
status={status}
|
||||||
account={status.get('account')}
|
account={status.get('account')}
|
||||||
showReplyCount={settings.get('show_reply_count')}
|
showReplyCount={settings.get('show_reply_count')}
|
||||||
onFilter={this.handleFilterClick}
|
onFilter={matchedFilters ? this.handleFilterClick : null}
|
||||||
|
{...other}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
{notification ? (
|
{notification ? (
|
||||||
|
@ -41,6 +41,7 @@ const messages = defineMessages({
|
|||||||
copy: { id: 'status.copy', defaultMessage: 'Copy link to status' },
|
copy: { id: 'status.copy', defaultMessage: 'Copy link to status' },
|
||||||
hide: { id: 'status.hide', defaultMessage: 'Hide toot' },
|
hide: { id: 'status.hide', defaultMessage: 'Hide toot' },
|
||||||
edited: { id: 'status.edited', defaultMessage: 'Edited {date}' },
|
edited: { id: 'status.edited', defaultMessage: 'Edited {date}' },
|
||||||
|
filter: { id: 'status.filter', defaultMessage: 'Filter this post' },
|
||||||
});
|
});
|
||||||
|
|
||||||
export default @injectIntl
|
export default @injectIntl
|
||||||
@ -67,6 +68,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||||||
onPin: PropTypes.func,
|
onPin: PropTypes.func,
|
||||||
onBookmark: PropTypes.func,
|
onBookmark: PropTypes.func,
|
||||||
onFilter: PropTypes.func,
|
onFilter: PropTypes.func,
|
||||||
|
onAddFilter: PropTypes.func,
|
||||||
withDismiss: PropTypes.bool,
|
withDismiss: PropTypes.bool,
|
||||||
showReplyCount: PropTypes.bool,
|
showReplyCount: PropTypes.bool,
|
||||||
scrollKey: PropTypes.string,
|
scrollKey: PropTypes.string,
|
||||||
@ -193,10 +195,14 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleFilterClick = () => {
|
handleHideClick = () => {
|
||||||
this.props.onFilter();
|
this.props.onFilter();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleFilterClick = () => {
|
||||||
|
this.props.onAddFilter(this.props.status);
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { status, intl, withDismiss, showReplyCount, scrollKey } = this.props;
|
const { status, intl, withDismiss, showReplyCount, scrollKey } = this.props;
|
||||||
|
|
||||||
@ -238,6 +244,12 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||||||
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
|
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
|
||||||
menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick });
|
menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick });
|
||||||
menu.push(null);
|
menu.push(null);
|
||||||
|
|
||||||
|
if (!this.props.onFilter) {
|
||||||
|
menu.push({ text: intl.formatMessage(messages.filter), action: this.handleFilterClick });
|
||||||
|
menu.push(null);
|
||||||
|
}
|
||||||
|
|
||||||
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
|
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
|
||||||
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
|
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
|
||||||
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
|
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
|
||||||
@ -271,10 +283,6 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||||||
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
|
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} />
|
||||||
);
|
);
|
||||||
|
|
||||||
const filterButton = status.get('filtered') && (
|
|
||||||
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleFilterClick} />
|
|
||||||
);
|
|
||||||
|
|
||||||
let replyButton = (
|
let replyButton = (
|
||||||
<IconButton
|
<IconButton
|
||||||
className='status__action-bar-button'
|
className='status__action-bar-button'
|
||||||
@ -309,6 +317,10 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||||||
reblogTitle = intl.formatMessage(messages.cannot_reblog);
|
reblogTitle = intl.formatMessage(messages.cannot_reblog);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filterButton = this.props.onFilter && (
|
||||||
|
<IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='status__action-bar'>
|
<div className='status__action-bar'>
|
||||||
{replyButton}
|
{replyButton}
|
||||||
@ -316,6 +328,7 @@ class StatusActionBar extends ImmutablePureComponent {
|
|||||||
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
<IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
|
||||||
{shareButton}
|
{shareButton}
|
||||||
<IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
|
<IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
|
||||||
|
|
||||||
{filterButton}
|
{filterButton}
|
||||||
|
|
||||||
<div className='status__action-bar-dropdown'>
|
<div className='status__action-bar-dropdown'>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import Status from 'flavours/glitch/components/status';
|
import Status from 'flavours/glitch/components/status';
|
||||||
import { List as ImmutableList } from 'immutable';
|
import { List as ImmutableList } from 'immutable';
|
||||||
import { makeGetStatus, regexFromFilters, toServerSideType } from 'flavours/glitch/selectors';
|
import { makeGetStatus } from 'flavours/glitch/selectors';
|
||||||
import {
|
import {
|
||||||
replyCompose,
|
replyCompose,
|
||||||
mentionCompose,
|
mentionCompose,
|
||||||
@ -25,6 +25,9 @@ import {
|
|||||||
revealStatus,
|
revealStatus,
|
||||||
editStatus
|
editStatus
|
||||||
} from 'flavours/glitch/actions/statuses';
|
} from 'flavours/glitch/actions/statuses';
|
||||||
|
import {
|
||||||
|
initAddFilter,
|
||||||
|
} from 'flavours/glitch/actions/filters';
|
||||||
import { initMuteModal } from 'flavours/glitch/actions/mutes';
|
import { initMuteModal } from 'flavours/glitch/actions/mutes';
|
||||||
import { initBlockModal } from 'flavours/glitch/actions/blocks';
|
import { initBlockModal } from 'flavours/glitch/actions/blocks';
|
||||||
import { initReport } from 'flavours/glitch/actions/reports';
|
import { initReport } from 'flavours/glitch/actions/reports';
|
||||||
@ -201,52 +204,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
|
|||||||
dispatch(initBlockModal(account));
|
dispatch(initBlockModal(account));
|
||||||
},
|
},
|
||||||
|
|
||||||
onUnfilter (status, onConfirm) {
|
|
||||||
dispatch((_, getState) => {
|
|
||||||
let state = getState();
|
|
||||||
const serverSideType = toServerSideType(contextType);
|
|
||||||
const enabledFilters = state.get('filters', ImmutableList()).filter(filter => filter.get('context').includes(serverSideType) && (filter.get('expires_at') === null || Date.parse(filter.get('expires_at')) > (new Date()))).toArray();
|
|
||||||
const searchIndex = status.get('search_index');
|
|
||||||
const matchingFilters = enabledFilters.filter(filter => regexFromFilters([filter]).test(searchIndex));
|
|
||||||
dispatch(openModal('CONFIRM', {
|
|
||||||
message: [
|
|
||||||
<FormattedMessage id='confirmations.unfilter' defaultMessage='Information about this filtered toot' />,
|
|
||||||
<div className='filtered-status-info'>
|
|
||||||
<Spoilers spoilerText={intl.formatMessage(messages.author)}>
|
|
||||||
<AccountContainer id={status.getIn(['account', 'id'])} />
|
|
||||||
</Spoilers>
|
|
||||||
<Spoilers spoilerText={intl.formatMessage(messages.matchingFilters, {count: matchingFilters.size})}>
|
|
||||||
<ul>
|
|
||||||
{matchingFilters.map(filter => (
|
|
||||||
<li>
|
|
||||||
{filter.get('phrase')}
|
|
||||||
{!!filterEditLink && ' '}
|
|
||||||
{!!filterEditLink && (
|
|
||||||
<a
|
|
||||||
target='_blank'
|
|
||||||
className='filtered-status-edit-link'
|
|
||||||
title={intl.formatMessage(messages.editFilter)}
|
|
||||||
href={filterEditLink(filter.get('id'))}
|
|
||||||
>
|
|
||||||
<Icon id='pencil' />
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</Spoilers>
|
|
||||||
</div>
|
|
||||||
],
|
|
||||||
confirm: intl.formatMessage(messages.unfilterConfirm),
|
|
||||||
onConfirm: onConfirm,
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
onReport (status) {
|
onReport (status) {
|
||||||
dispatch(initReport(status.get('account'), status));
|
dispatch(initReport(status.get('account'), status));
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onAddFilter (status) {
|
||||||
|
dispatch(initAddFilter(status, { contextType }));
|
||||||
|
},
|
||||||
|
|
||||||
onMute (account) {
|
onMute (account) {
|
||||||
dispatch(initMuteModal(account));
|
dispatch(initMuteModal(account));
|
||||||
},
|
},
|
||||||
|
@ -8,6 +8,7 @@ import spring from 'react-motion/lib/spring';
|
|||||||
import { supportsPassiveEvents } from 'detect-passive-events';
|
import { supportsPassiveEvents } from 'detect-passive-events';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { languages as preloadedLanguages } from 'flavours/glitch/util/initial_state';
|
import { languages as preloadedLanguages } from 'flavours/glitch/util/initial_state';
|
||||||
|
import { loupeIcon, deleteIcon } from 'flavours/glitch/util/icons';
|
||||||
import fuzzysort from 'fuzzysort';
|
import fuzzysort from 'fuzzysort';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
@ -16,22 +17,6 @@ const messages = defineMessages({
|
|||||||
clear: { id: 'emoji_button.clear', defaultMessage: 'Clear' },
|
clear: { id: 'emoji_button.clear', defaultMessage: 'Clear' },
|
||||||
});
|
});
|
||||||
|
|
||||||
// Copied from emoji-mart for consistency with emoji picker and since
|
|
||||||
// they don't export the icons in the package
|
|
||||||
const icons = {
|
|
||||||
loupe: (
|
|
||||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='13' height='13'>
|
|
||||||
<path d='M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z' />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
|
|
||||||
delete: (
|
|
||||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='13' height='13'>
|
|
||||||
<path d='M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z' />
|
|
||||||
</svg>
|
|
||||||
),
|
|
||||||
};
|
|
||||||
|
|
||||||
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
|
||||||
|
|
||||||
class LanguageDropdownMenu extends React.PureComponent {
|
class LanguageDropdownMenu extends React.PureComponent {
|
||||||
@ -242,7 +227,7 @@ class LanguageDropdownMenu extends React.PureComponent {
|
|||||||
<div className={`language-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
|
<div className={`language-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
|
||||||
<div className='emoji-mart-search'>
|
<div className='emoji-mart-search'>
|
||||||
<input type='search' value={searchValue} onChange={this.handleSearchChange} onKeyDown={this.handleSearchKeyDown} placeholder={intl.formatMessage(messages.search)} autoFocus />
|
<input type='search' value={searchValue} onChange={this.handleSearchChange} onKeyDown={this.handleSearchKeyDown} placeholder={intl.formatMessage(messages.search)} autoFocus />
|
||||||
<button className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}>{!isSearching ? icons.loupe : icons.delete}</button>
|
<button className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}>{!isSearching ? loupeIcon : deleteIcon}</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='language-dropdown__dropdown__results emoji-mart-scroll' role='listbox' ref={this.setListRef}>
|
<div className='language-dropdown__dropdown__results emoji-mart-scroll' role='listbox' ref={this.setListRef}>
|
||||||
|
@ -0,0 +1,102 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import { toServerSideType } from 'flavours/glitch/util/filters';
|
||||||
|
import Button from 'flavours/glitch/components/button';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
const mapStateToProps = (state, { filterId }) => ({
|
||||||
|
filter: state.getIn(['filters', filterId]),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
class AddedToFilter extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
onClose: PropTypes.func.isRequired,
|
||||||
|
contextType: PropTypes.string,
|
||||||
|
filter: ImmutablePropTypes.map.isRequired,
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
handleCloseClick = () => {
|
||||||
|
const { onClose } = this.props;
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { filter, contextType } = this.props;
|
||||||
|
|
||||||
|
let expiredMessage = null;
|
||||||
|
if (filter.get('expires_at') && filter.get('expires_at') < new Date()) {
|
||||||
|
expiredMessage = (
|
||||||
|
<React.Fragment>
|
||||||
|
<h4 className='report-dialog-modal__subtitle'><FormattedMessage id='filter_modal.added.expired_title' defaultMessage='Expired filter!' /></h4>
|
||||||
|
<p className='report-dialog-modal__lead'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='filter_modal.added.expired_explanation'
|
||||||
|
defaultMessage='This filter category has expired, you will need to change the expiration date for it to apply.'
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
let contextMismatchMessage = null;
|
||||||
|
if (contextType && !filter.get('context').includes(toServerSideType(contextType))) {
|
||||||
|
contextMismatchMessage = (
|
||||||
|
<React.Fragment>
|
||||||
|
<h4 className='report-dialog-modal__subtitle'><FormattedMessage id='filter_modal.added.context_mismatch_title' defaultMessage='Context mismatch!' /></h4>
|
||||||
|
<p className='report-dialog-modal__lead'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='filter_modal.added.context_mismatch_explanation'
|
||||||
|
defaultMessage='This filter category does not apply to the context in which you have accessed this post. If you want the post to be filtered in this context too, you will have to edit the filter.'
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const settings_link = (
|
||||||
|
<a href={`/filters/${filter.get('id')}/edit`}>
|
||||||
|
<FormattedMessage
|
||||||
|
id='filter_modal.added.settings_link'
|
||||||
|
defaultMessage='settings page'
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.added.title' defaultMessage='Filter added!' /></h3>
|
||||||
|
<p className='report-dialog-modal__lead'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='filter_modal.added.short_explanation'
|
||||||
|
defaultMessage='This post has been added to the following filter category: {title}.'
|
||||||
|
values={{ title: filter.get('title') }}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{expiredMessage}
|
||||||
|
{contextMismatchMessage}
|
||||||
|
|
||||||
|
<h4 className='report-dialog-modal__subtitle'><FormattedMessage id='filter_modal.added.review_and_configure_title' defaultMessage='Filter settings' /></h4>
|
||||||
|
<p className='report-dialog-modal__lead'>
|
||||||
|
<FormattedMessage
|
||||||
|
id='filter_modal.added.review_and_configure'
|
||||||
|
defaultMessage='To review and further configure this filter category, go to the {settings_link}.'
|
||||||
|
values={{ settings_link }}
|
||||||
|
/>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className='flex-spacer' />
|
||||||
|
|
||||||
|
<div className='report-dialog-modal__actions'>
|
||||||
|
<Button onClick={this.handleCloseClick}><FormattedMessage id='report.close' defaultMessage='Done' /></Button>
|
||||||
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
192
app/javascript/flavours/glitch/features/filters/select_filter.js
Normal file
192
app/javascript/flavours/glitch/features/filters/select_filter.js
Normal file
@ -0,0 +1,192 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
|
import { toServerSideType } from 'flavours/glitch/util/filters';
|
||||||
|
import { loupeIcon, deleteIcon } from 'flavours/glitch/util/icons';
|
||||||
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
|
import fuzzysort from 'fuzzysort';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
search: { id: 'filter_modal.select_filter.search', defaultMessage: 'Search or create' },
|
||||||
|
clear: { id: 'emoji_button.clear', defaultMessage: 'Clear' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const mapStateToProps = (state, { contextType }) => ({
|
||||||
|
filters: Array.from(state.get('filters').values()).map((filter) => [
|
||||||
|
filter.get('id'),
|
||||||
|
filter.get('title'),
|
||||||
|
filter.get('keywords')?.map((keyword) => keyword.get('keyword')).join('\n'),
|
||||||
|
filter.get('expires_at') && filter.get('expires_at') < new Date(),
|
||||||
|
contextType && !filter.get('context').includes(toServerSideType(contextType)),
|
||||||
|
]),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
@injectIntl
|
||||||
|
class SelectFilter extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
onSelectFilter: PropTypes.func.isRequired,
|
||||||
|
onNewFilter: PropTypes.func.isRequired,
|
||||||
|
filters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.object)),
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
searchValue: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
search () {
|
||||||
|
const { filters } = this.props;
|
||||||
|
const { searchValue } = this.state;
|
||||||
|
|
||||||
|
if (searchValue === '') {
|
||||||
|
return filters;
|
||||||
|
}
|
||||||
|
|
||||||
|
return fuzzysort.go(searchValue, filters, {
|
||||||
|
keys: ['1', '2'],
|
||||||
|
limit: 5,
|
||||||
|
threshold: -10000,
|
||||||
|
}).map(result => result.obj);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderItem = filter => {
|
||||||
|
let warning = null;
|
||||||
|
if (filter[3] || filter[4]) {
|
||||||
|
warning = (
|
||||||
|
<span className='language-dropdown__dropdown__results__item__common-name'>
|
||||||
|
(
|
||||||
|
{filter[3] && <FormattedMessage id='filter_modal.select_filter.expired' defaultMessage='expired' />}
|
||||||
|
{filter[3] && filter[4] && ', '}
|
||||||
|
{filter[4] && <FormattedMessage id='filter_modal.select_filter.context_mismatch' defaultMessage='does not apply to this context' />}
|
||||||
|
)
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div key={filter[0]} role='button' tabIndex='0' data-index={filter[0]} className='language-dropdown__dropdown__results__item' onClick={this.handleItemClick} onKeyDown={this.handleKeyDown}>
|
||||||
|
<span className='language-dropdown__dropdown__results__item__native-name'>{filter[1]}</span> {warning}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderCreateNew (name) {
|
||||||
|
return (
|
||||||
|
<div key='add-new-filter' role='button' tabIndex='0' className='language-dropdown__dropdown__results__item' onClick={this.handleNewFilterClick} onKeyDown={this.handleKeyDown}>
|
||||||
|
<Icon id='plus' fixedWidth /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSearchChange = ({ target }) => {
|
||||||
|
this.setState({ searchValue: target.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
setListRef = c => {
|
||||||
|
this.listNode = c;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleKeyDown = e => {
|
||||||
|
const index = Array.from(this.listNode.childNodes).findIndex(node => node === e.currentTarget);
|
||||||
|
|
||||||
|
let element = null;
|
||||||
|
|
||||||
|
switch(e.key) {
|
||||||
|
case ' ':
|
||||||
|
case 'Enter':
|
||||||
|
e.currentTarget.click();
|
||||||
|
break;
|
||||||
|
case 'ArrowDown':
|
||||||
|
element = this.listNode.childNodes[index + 1] || this.listNode.firstChild;
|
||||||
|
break;
|
||||||
|
case 'ArrowUp':
|
||||||
|
element = this.listNode.childNodes[index - 1] || this.listNode.lastChild;
|
||||||
|
break;
|
||||||
|
case 'Tab':
|
||||||
|
if (e.shiftKey) {
|
||||||
|
element = this.listNode.childNodes[index - 1] || this.listNode.lastChild;
|
||||||
|
} else {
|
||||||
|
element = this.listNode.childNodes[index + 1] || this.listNode.firstChild;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'Home':
|
||||||
|
element = this.listNode.firstChild;
|
||||||
|
break;
|
||||||
|
case 'End':
|
||||||
|
element = this.listNode.lastChild;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element) {
|
||||||
|
element.focus();
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSearchKeyDown = e => {
|
||||||
|
let element = null;
|
||||||
|
|
||||||
|
switch(e.key) {
|
||||||
|
case 'Tab':
|
||||||
|
case 'ArrowDown':
|
||||||
|
element = this.listNode.firstChild;
|
||||||
|
|
||||||
|
if (element) {
|
||||||
|
element.focus();
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleClear = () => {
|
||||||
|
this.setState({ searchValue: '' });
|
||||||
|
}
|
||||||
|
|
||||||
|
handleItemClick = e => {
|
||||||
|
const value = e.currentTarget.getAttribute('data-index');
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.props.onSelectFilter(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleNewFilterClick = e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.props.onNewFilter(this.state.searchValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { intl } = this.props;
|
||||||
|
|
||||||
|
const { searchValue } = this.state;
|
||||||
|
const isSearching = searchValue !== '';
|
||||||
|
const results = this.search();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<React.Fragment>
|
||||||
|
<h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.select_filter.title' defaultMessage='Filter this post' /></h3>
|
||||||
|
<p className='report-dialog-modal__lead'><FormattedMessage id='filter_modal.select_filter.subtitle' defaultMessage='Use an existing category or create a new one' /></p>
|
||||||
|
|
||||||
|
<div className='emoji-mart-search'>
|
||||||
|
<input type='search' value={searchValue} onChange={this.handleSearchChange} onKeyDown={this.handleSearchKeyDown} placeholder={intl.formatMessage(messages.search)} autoFocus />
|
||||||
|
<button className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}>{!isSearching ? loupeIcon : deleteIcon}</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='language-dropdown__dropdown__results emoji-mart-scroll' role='listbox' ref={this.setListRef}>
|
||||||
|
{results.map(this.renderItem)}
|
||||||
|
{isSearching && this.renderCreateNew(searchValue) }
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -24,10 +24,6 @@ const messages = defineMessages({
|
|||||||
side_arm_copy: { id: 'settings.side_arm_reply_mode.copy', defaultMessage: 'Copy privacy setting of the toot being replied to' },
|
side_arm_copy: { id: 'settings.side_arm_reply_mode.copy', defaultMessage: 'Copy privacy setting of the toot being replied to' },
|
||||||
side_arm_restrict: { id: 'settings.side_arm_reply_mode.restrict', defaultMessage: 'Restrict privacy setting to that of the toot being replied to' },
|
side_arm_restrict: { id: 'settings.side_arm_reply_mode.restrict', defaultMessage: 'Restrict privacy setting to that of the toot being replied to' },
|
||||||
regexp: { id: 'settings.content_warnings.regexp', defaultMessage: 'Regular expression' },
|
regexp: { id: 'settings.content_warnings.regexp', defaultMessage: 'Regular expression' },
|
||||||
filters_drop: { id: 'settings.filtering_behavior.drop', defaultMessage: 'Hide filtered toots completely' },
|
|
||||||
filters_upstream: { id: 'settings.filtering_behavior.upstream', defaultMessage: 'Show "filtered" like vanilla Mastodon' },
|
|
||||||
filters_hide: { id: 'settings.filtering_behavior.hide', defaultMessage: 'Show "filtered" and add a button to display why' },
|
|
||||||
filters_cw: { id: 'settings.filtering_behavior.cw', defaultMessage: 'Still display the post, and add filtered words to content warning' },
|
|
||||||
rewrite_mentions_no: { id: 'settings.rewrite_mentions_no', defaultMessage: 'Do not rewrite mentions' },
|
rewrite_mentions_no: { id: 'settings.rewrite_mentions_no', defaultMessage: 'Do not rewrite mentions' },
|
||||||
rewrite_mentions_acct: { id: 'settings.rewrite_mentions_acct', defaultMessage: 'Rewrite with username and domain (when the account is remote)' },
|
rewrite_mentions_acct: { id: 'settings.rewrite_mentions_acct', defaultMessage: 'Rewrite with username and domain (when the account is remote)' },
|
||||||
rewrite_mentions_username: { id: 'settings.rewrite_mentions_username', defaultMessage: 'Rewrite with username' },
|
rewrite_mentions_username: { id: 'settings.rewrite_mentions_username', defaultMessage: 'Rewrite with username' },
|
||||||
@ -358,25 +354,6 @@ class LocalSettingsPage extends React.PureComponent {
|
|||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
({ intl, onChange, settings }) => (
|
|
||||||
<div className='glitch local-settings__page filters'>
|
|
||||||
<h1><FormattedMessage id='settings.filters' defaultMessage='Filters' /></h1>
|
|
||||||
<LocalSettingsPageItem
|
|
||||||
settings={settings}
|
|
||||||
item={['filtering_behavior']}
|
|
||||||
id='mastodon-settings--filters-behavior'
|
|
||||||
onChange={onChange}
|
|
||||||
options={[
|
|
||||||
{ value: 'drop', message: intl.formatMessage(messages.filters_drop) },
|
|
||||||
{ value: 'upstream', message: intl.formatMessage(messages.filters_upstream) },
|
|
||||||
{ value: 'hide', message: intl.formatMessage(messages.filters_hide) },
|
|
||||||
{ value: 'content_warning', message: intl.formatMessage(messages.filters_cw) }
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<FormattedMessage id='settings.filtering_behavior' defaultMessage='Filtering behavior' />
|
|
||||||
</LocalSettingsPageItem>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
({ onChange, settings }) => (
|
({ onChange, settings }) => (
|
||||||
<div className='glitch local-settings__page collapsed'>
|
<div className='glitch local-settings__page collapsed'>
|
||||||
<h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1>
|
<h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1>
|
||||||
|
@ -0,0 +1,134 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { fetchStatus } from 'flavours/glitch/actions/statuses';
|
||||||
|
import { fetchFilters, createFilter, createFilterStatus } from 'flavours/glitch/actions/filters';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
|
||||||
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import IconButton from 'flavours/glitch/components/icon_button';
|
||||||
|
import SelectFilter from 'flavours/glitch/features/filters/select_filter';
|
||||||
|
import AddedToFilter from 'flavours/glitch/features/filters/added_to_filter';
|
||||||
|
|
||||||
|
const messages = defineMessages({
|
||||||
|
close: { id: 'lightbox.close', defaultMessage: 'Close' },
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @connect(undefined)
|
||||||
|
@injectIntl
|
||||||
|
class FilterModal extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
statusId: PropTypes.string.isRequired,
|
||||||
|
contextType: PropTypes.string,
|
||||||
|
dispatch: PropTypes.func.isRequired,
|
||||||
|
intl: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
state = {
|
||||||
|
step: 'select',
|
||||||
|
filterId: null,
|
||||||
|
isSubmitting: false,
|
||||||
|
isSubmitted: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
handleNewFilterSuccess = (result) => {
|
||||||
|
this.handleSelectFilter(result.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSuccess = () => {
|
||||||
|
const { dispatch, statusId } = this.props;
|
||||||
|
dispatch(fetchStatus(statusId, true));
|
||||||
|
this.setState({ isSubmitting: false, isSubmitted: true, step: 'submitted' });
|
||||||
|
};
|
||||||
|
|
||||||
|
handleFail = () => {
|
||||||
|
this.setState({ isSubmitting: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
handleNextStep = step => {
|
||||||
|
this.setState({ step });
|
||||||
|
};
|
||||||
|
|
||||||
|
handleSelectFilter = (filterId) => {
|
||||||
|
const { dispatch, statusId } = this.props;
|
||||||
|
|
||||||
|
this.setState({ isSubmitting: true, filterId });
|
||||||
|
|
||||||
|
dispatch(createFilterStatus({
|
||||||
|
filter_id: filterId,
|
||||||
|
status_id: statusId,
|
||||||
|
}, this.handleSuccess, this.handleFail));
|
||||||
|
};
|
||||||
|
|
||||||
|
handleNewFilter = (title) => {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
|
||||||
|
this.setState({ isSubmitting: true });
|
||||||
|
|
||||||
|
dispatch(createFilter({
|
||||||
|
title,
|
||||||
|
context: ['home', 'notifications', 'public', 'thread', 'account'],
|
||||||
|
action: 'warn',
|
||||||
|
}, this.handleNewFilterSuccess, this.handleFail));
|
||||||
|
};
|
||||||
|
|
||||||
|
componentDidMount () {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
|
||||||
|
dispatch(fetchFilters());
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const {
|
||||||
|
intl,
|
||||||
|
statusId,
|
||||||
|
contextType,
|
||||||
|
onClose,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
step,
|
||||||
|
filterId,
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
let stepComponent;
|
||||||
|
|
||||||
|
switch(step) {
|
||||||
|
case 'select':
|
||||||
|
stepComponent = (
|
||||||
|
<SelectFilter
|
||||||
|
contextType={contextType}
|
||||||
|
onSelectFilter={this.handleSelectFilter}
|
||||||
|
onNewFilter={this.handleNewFilter}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case 'create':
|
||||||
|
stepComponent = null;
|
||||||
|
break;
|
||||||
|
case 'submitted':
|
||||||
|
stepComponent = (
|
||||||
|
<AddedToFilter
|
||||||
|
contextType={contextType}
|
||||||
|
filterId={filterId}
|
||||||
|
statusId={statusId}
|
||||||
|
onClose={onClose}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='modal-root__modal report-dialog-modal'>
|
||||||
|
<div className='report-modal__target'>
|
||||||
|
<IconButton className='report-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
|
||||||
|
<FormattedMessage id='filter_modal.title.status' defaultMessage='Filter a post' />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='report-dialog-modal__container'>
|
||||||
|
{stepComponent}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -26,6 +26,7 @@ import {
|
|||||||
ListAdder,
|
ListAdder,
|
||||||
PinnedAccountsEditor,
|
PinnedAccountsEditor,
|
||||||
CompareHistoryModal,
|
CompareHistoryModal,
|
||||||
|
FilterModal,
|
||||||
} from 'flavours/glitch/util/async-components';
|
} from 'flavours/glitch/util/async-components';
|
||||||
|
|
||||||
const MODAL_COMPONENTS = {
|
const MODAL_COMPONENTS = {
|
||||||
@ -49,6 +50,7 @@ const MODAL_COMPONENTS = {
|
|||||||
'LIST_ADDER': ListAdder,
|
'LIST_ADDER': ListAdder,
|
||||||
'PINNED_ACCOUNTS_EDITOR': PinnedAccountsEditor,
|
'PINNED_ACCOUNTS_EDITOR': PinnedAccountsEditor,
|
||||||
'COMPARE_HISTORY': CompareHistoryModal,
|
'COMPARE_HISTORY': CompareHistoryModal,
|
||||||
|
'FILTER': FilterModal,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class ModalRoot extends React.PureComponent {
|
export default class ModalRoot extends React.PureComponent {
|
||||||
|
@ -10,7 +10,6 @@ import { debounce } from 'lodash';
|
|||||||
import { uploadCompose, resetCompose, changeComposeSpoilerness } from 'flavours/glitch/actions/compose';
|
import { uploadCompose, resetCompose, changeComposeSpoilerness } from 'flavours/glitch/actions/compose';
|
||||||
import { expandHomeTimeline } from 'flavours/glitch/actions/timelines';
|
import { expandHomeTimeline } from 'flavours/glitch/actions/timelines';
|
||||||
import { expandNotifications, notificationsSetVisibility } from 'flavours/glitch/actions/notifications';
|
import { expandNotifications, notificationsSetVisibility } from 'flavours/glitch/actions/notifications';
|
||||||
import { fetchFilters } from 'flavours/glitch/actions/filters';
|
|
||||||
import { fetchRules } from 'flavours/glitch/actions/rules';
|
import { fetchRules } from 'flavours/glitch/actions/rules';
|
||||||
import { clearHeight } from 'flavours/glitch/actions/height_cache';
|
import { clearHeight } from 'flavours/glitch/actions/height_cache';
|
||||||
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
|
import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'flavours/glitch/actions/markers';
|
||||||
@ -402,7 +401,7 @@ class UI extends React.Component {
|
|||||||
this.props.dispatch(fetchMarkers());
|
this.props.dispatch(fetchMarkers());
|
||||||
this.props.dispatch(expandHomeTimeline());
|
this.props.dispatch(expandHomeTimeline());
|
||||||
this.props.dispatch(expandNotifications());
|
this.props.dispatch(expandNotifications());
|
||||||
setTimeout(() => this.props.dispatch(fetchFilters()), 500);
|
|
||||||
setTimeout(() => this.props.dispatch(fetchRules()), 3000);
|
setTimeout(() => this.props.dispatch(fetchRules()), 3000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,10 +1,43 @@
|
|||||||
import { FILTERS_FETCH_SUCCESS } from '../actions/filters';
|
import { FILTERS_IMPORT } from '../actions/importer';
|
||||||
import { List as ImmutableList, fromJS } from 'immutable';
|
import { FILTERS_FETCH_SUCCESS, FILTERS_CREATE_SUCCESS } from '../actions/filters';
|
||||||
|
import { Map as ImmutableMap, is, fromJS } from 'immutable';
|
||||||
|
|
||||||
export default function filters(state = ImmutableList(), action) {
|
const normalizeFilter = (state, filter) => {
|
||||||
|
const normalizedFilter = fromJS({
|
||||||
|
id: filter.id,
|
||||||
|
title: filter.title,
|
||||||
|
context: filter.context,
|
||||||
|
filter_action: filter.filter_action,
|
||||||
|
keywords: filter.keywords,
|
||||||
|
expires_at: filter.expires_at ? Date.parse(filter.expires_at) : null,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (is(state.get(filter.id), normalizedFilter)) {
|
||||||
|
return state;
|
||||||
|
} else {
|
||||||
|
// Do not overwrite keywords when receiving a partial filter
|
||||||
|
return state.update(filter.id, ImmutableMap(), (old) => (
|
||||||
|
old.mergeWith(((old_value, new_value) => (new_value === undefined ? old_value : new_value)), normalizedFilter)
|
||||||
|
));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeFilters = (state, filters) => {
|
||||||
|
filters.forEach(filter => {
|
||||||
|
state = normalizeFilter(state, filter);
|
||||||
|
});
|
||||||
|
|
||||||
|
return state;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function filters(state = ImmutableMap(), action) {
|
||||||
switch(action.type) {
|
switch(action.type) {
|
||||||
|
case FILTERS_CREATE_SUCCESS:
|
||||||
|
return normalizeFilter(state, action.filter);
|
||||||
case FILTERS_FETCH_SUCCESS:
|
case FILTERS_FETCH_SUCCESS:
|
||||||
return fromJS(action.filters);
|
//TODO: handle deleting obsolete filters
|
||||||
|
case FILTERS_IMPORT:
|
||||||
|
return normalizeFilters(state, action.filters);
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
@ -21,7 +21,6 @@ const initialState = ImmutableMap({
|
|||||||
inline_preview_cards: true,
|
inline_preview_cards: true,
|
||||||
hicolor_privacy_icons: false,
|
hicolor_privacy_icons: false,
|
||||||
show_content_type_choice: false,
|
show_content_type_choice: false,
|
||||||
filtering_behavior: 'hide',
|
|
||||||
tag_misleading_links: true,
|
tag_misleading_links: true,
|
||||||
rewrite_mentions: 'no',
|
rewrite_mentions: 'no',
|
||||||
content_warnings : ImmutableMap({
|
content_warnings : ImmutableMap({
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import escapeTextContentForBrowser from 'escape-html';
|
import escapeTextContentForBrowser from 'escape-html';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import { List as ImmutableList, is } from 'immutable';
|
import { List as ImmutableList } from 'immutable';
|
||||||
|
import { toServerSideType } from 'flavours/glitch/util/filters';
|
||||||
import { me } from 'flavours/glitch/util/initial_state';
|
import { me } from 'flavours/glitch/util/initial_state';
|
||||||
|
|
||||||
const getAccountBase = (state, id) => state.getIn(['accounts', id], null);
|
const getAccountBase = (state, id) => state.getIn(['accounts', id], null);
|
||||||
@ -21,69 +22,15 @@ export const makeGetAccount = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
export const toServerSideType = columnType => {
|
const getFilters = (state, { contextType }) => {
|
||||||
switch (columnType) {
|
if (!contextType) return null;
|
||||||
case 'home':
|
|
||||||
case 'notifications':
|
const serverSideType = toServerSideType(contextType);
|
||||||
case 'public':
|
const now = new Date();
|
||||||
case 'thread':
|
|
||||||
case 'account':
|
return state.get('filters').filter((filter) => filter.get('context').includes(serverSideType) && (filter.get('expires_at') === null || filter.get('expires_at') > now));
|
||||||
return columnType;
|
|
||||||
default:
|
|
||||||
if (columnType.indexOf('list:') > -1) {
|
|
||||||
return 'home';
|
|
||||||
} else {
|
|
||||||
return 'public'; // community, account, hashtag
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const escapeRegExp = string =>
|
|
||||||
string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
|
|
||||||
|
|
||||||
export const regexFromFilters = filters => {
|
|
||||||
if (filters.size === 0) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return new RegExp(filters.map(filter => {
|
|
||||||
let expr = escapeRegExp(filter.get('phrase'));
|
|
||||||
|
|
||||||
if (filter.get('whole_word')) {
|
|
||||||
if (/^[\w]/.test(expr)) {
|
|
||||||
expr = `\\b${expr}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (/[\w]$/.test(expr)) {
|
|
||||||
expr = `${expr}\\b`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return expr;
|
|
||||||
}).join('|'), 'i');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Memoize the filter regexps for each valid server contextType
|
|
||||||
const makeGetFiltersRegex = () => {
|
|
||||||
let memo = {};
|
|
||||||
|
|
||||||
return (state, { contextType }) => {
|
|
||||||
if (!contextType) return ImmutableList();
|
|
||||||
|
|
||||||
const serverSideType = toServerSideType(contextType);
|
|
||||||
const filters = state.get('filters', ImmutableList()).filter(filter => filter.get('context').includes(serverSideType) && (filter.get('expires_at') === null || Date.parse(filter.get('expires_at')) > (new Date())));
|
|
||||||
|
|
||||||
if (!memo[serverSideType] || !is(memo[serverSideType].filters, filters)) {
|
|
||||||
const dropRegex = regexFromFilters(filters.filter(filter => filter.get('irreversible')));
|
|
||||||
const regex = regexFromFilters(filters);
|
|
||||||
memo[serverSideType] = { filters: filters, results: [dropRegex, regex] };
|
|
||||||
}
|
|
||||||
return memo[serverSideType].results;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getFiltersRegex = makeGetFiltersRegex();
|
|
||||||
|
|
||||||
export const makeGetStatus = () => {
|
export const makeGetStatus = () => {
|
||||||
return createSelector(
|
return createSelector(
|
||||||
[
|
[
|
||||||
@ -91,60 +38,37 @@ export const makeGetStatus = () => {
|
|||||||
(state, { id }) => state.getIn(['statuses', state.getIn(['statuses', id, 'reblog'])]),
|
(state, { id }) => state.getIn(['statuses', state.getIn(['statuses', id, 'reblog'])]),
|
||||||
(state, { id }) => state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
|
(state, { id }) => state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
|
||||||
(state, { id }) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account'])]),
|
(state, { id }) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account'])]),
|
||||||
(state, _) => state.getIn(['local_settings', 'filtering_behavior']),
|
getFilters,
|
||||||
(state, _) => state.get('filters', ImmutableList()),
|
|
||||||
(_, { contextType }) => contextType,
|
|
||||||
getFiltersRegex,
|
|
||||||
],
|
],
|
||||||
|
|
||||||
(statusBase, statusReblog, accountBase, accountReblog, filteringBehavior, filters, contextType, filtersRegex) => {
|
(statusBase, statusReblog, accountBase, accountReblog, filters) => {
|
||||||
if (!statusBase) {
|
if (!statusBase) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const dropRegex = (accountReblog || accountBase).get('id') !== me && filtersRegex[0];
|
|
||||||
|
|
||||||
if (dropRegex && dropRegex.test(statusBase.get('reblog') ? statusReblog.get('search_index') : statusBase.get('search_index'))) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const regex = (accountReblog || accountBase).get('id') !== me && filtersRegex[1];
|
|
||||||
let filtered = false;
|
let filtered = false;
|
||||||
|
if ((accountReblog || accountBase).get('id') !== me && filters) {
|
||||||
|
let filterResults = statusReblog?.get('filtered') || statusBase.get('filtered') || ImmutableList();
|
||||||
|
if (filterResults.some((result) => filters.getIn([result.get('filter'), 'filter_action']) === 'hide')) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
filterResults = filterResults.filter(result => filters.has(result.get('filter')));
|
||||||
|
if (!filterResults.isEmpty()) {
|
||||||
|
filtered = filterResults.map(result => filters.getIn([result.get('filter'), 'title']));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (statusReblog) {
|
if (statusReblog) {
|
||||||
filtered = regex && regex.test(statusReblog.get('search_index'));
|
|
||||||
statusReblog = statusReblog.set('account', accountReblog);
|
statusReblog = statusReblog.set('account', accountReblog);
|
||||||
statusReblog = statusReblog.set('filtered', filtered);
|
statusReblog = statusReblog.set('matched_filters', filtered);
|
||||||
} else {
|
} else {
|
||||||
statusReblog = null;
|
statusReblog = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
filtered = filtered || regex && regex.test(statusBase.get('search_index'));
|
|
||||||
|
|
||||||
if (filtered && filteringBehavior === 'drop') {
|
|
||||||
return null;
|
|
||||||
} else if (filtered && filteringBehavior === 'content_warning') {
|
|
||||||
let spoilerText = (statusReblog || statusBase).get('spoiler_text', '');
|
|
||||||
const searchIndex = (statusReblog || statusBase).get('search_index');
|
|
||||||
const serverSideType = toServerSideType(contextType);
|
|
||||||
const enabledFilters = filters.filter(filter => filter.get('context').includes(serverSideType) && (filter.get('expires_at') === null || Date.parse(filter.get('expires_at')) > (new Date()))).toArray();
|
|
||||||
const matchingFilters = enabledFilters.filter(filter => {
|
|
||||||
const regexp = regexFromFilters([filter]);
|
|
||||||
return regexp.test(searchIndex) && !regexp.test(spoilerText);
|
|
||||||
});
|
|
||||||
if (statusReblog) {
|
|
||||||
statusReblog = statusReblog.set('spoiler_text', matchingFilters.map(filter => filter.get('phrase')).concat([spoilerText]).filter(cw => !!cw).join(', '));
|
|
||||||
statusReblog = statusReblog.update('spoilerHtml', '', spoilerText => matchingFilters.map(filter => escapeTextContentForBrowser(filter.get('phrase'))).concat([spoilerText]).filter(cw => !!cw).join(', '));
|
|
||||||
} else {
|
|
||||||
statusBase = statusBase.set('spoiler_text', matchingFilters.map(filter => filter.get('phrase')).concat([spoilerText]).filter(cw => !!cw).join(', '));
|
|
||||||
statusBase = statusBase.update('spoilerHtml', '', spoilerText => matchingFilters.map(filter => escapeTextContentForBrowser(filter.get('phrase'))).concat([spoilerText]).filter(cw => !!cw).join(', '));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return statusBase.withMutations(map => {
|
return statusBase.withMutations(map => {
|
||||||
map.set('reblog', statusReblog);
|
map.set('reblog', statusReblog);
|
||||||
map.set('account', accountBase);
|
map.set('account', accountBase);
|
||||||
map.set('filtered', filtered);
|
map.set('matched_filters', filtered);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
@ -583,6 +583,16 @@
|
|||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
color: lighten($inverted-text-color, 16%);
|
color: lighten($inverted-text-color, 16%);
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $inverted-text-color;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__actions {
|
&__actions {
|
||||||
@ -730,6 +740,14 @@
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.emoji-mart-search {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-mart-search-icon {
|
||||||
|
right: 10px + 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.report-modal__container {
|
.report-modal__container {
|
||||||
|
@ -177,3 +177,7 @@ export function FollowRecommendations () {
|
|||||||
export function CompareHistoryModal () {
|
export function CompareHistoryModal () {
|
||||||
return import(/*webpackChunkName: "flavours/glitch/async/compare_history_modal" */'flavours/glitch/features/ui/components/compare_history_modal');
|
return import(/*webpackChunkName: "flavours/glitch/async/compare_history_modal" */'flavours/glitch/features/ui/components/compare_history_modal');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function FilterModal () {
|
||||||
|
return import(/*webpackChunkName: "flavours/glitch/async/filter_modal" */'flavours/glitch/features/ui/components/filter_modal');
|
||||||
|
}
|
||||||
|
16
app/javascript/flavours/glitch/util/filters.js
Normal file
16
app/javascript/flavours/glitch/util/filters.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
export const toServerSideType = columnType => {
|
||||||
|
switch (columnType) {
|
||||||
|
case 'home':
|
||||||
|
case 'notifications':
|
||||||
|
case 'public':
|
||||||
|
case 'thread':
|
||||||
|
case 'account':
|
||||||
|
return columnType;
|
||||||
|
default:
|
||||||
|
if (columnType.indexOf('list:') > -1) {
|
||||||
|
return 'home';
|
||||||
|
} else {
|
||||||
|
return 'public'; // community, account, hashtag
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
13
app/javascript/flavours/glitch/util/icons.js
Normal file
13
app/javascript/flavours/glitch/util/icons.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
// Copied from emoji-mart for consistency with emoji picker and since
|
||||||
|
// they don't export the icons in the package
|
||||||
|
export const loupeIcon = (
|
||||||
|
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='13' height='13'>
|
||||||
|
<path d='M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z' />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const deleteIcon = (
|
||||||
|
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='13' height='13'>
|
||||||
|
<path d='M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z' />
|
||||||
|
</svg>
|
||||||
|
);
|
Loading…
Reference in New Issue
Block a user