From 84ff3938426da348e31651dfad376d83a9784343 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sat, 29 Jun 2019 18:32:06 +0200 Subject: Use ScrollToOptions for smooth scrolling if supported (#11207) --- app/javascript/mastodon/scroll.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/javascript/mastodon/scroll.js b/app/javascript/mastodon/scroll.js index 2af07e0fb..84fe58269 100644 --- a/app/javascript/mastodon/scroll.js +++ b/app/javascript/mastodon/scroll.js @@ -26,5 +26,7 @@ const scroll = (node, key, target) => { }; }; -export const scrollRight = (node, position) => scroll(node, 'scrollLeft', position); -export const scrollTop = (node) => scroll(node, 'scrollTop', 0); +const isScrollBehaviorSupported = 'scrollBehavior' in document.documentElement.style; + +export const scrollRight = (node, position) => isScrollBehaviorSupported ? node.scrollTo({ left: position, behavior: 'smooth' }) : scroll(node, 'scrollLeft', position); +export const scrollTop = (node) => isScrollBehaviorSupported ? node.scrollTo({ top: 0, behavior: 'smooth' }) : scroll(node, 'scrollTop', 0); -- cgit From ccc7fe3e1d04c7cabad916e4e57c7739743d5c91 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sat, 29 Jun 2019 18:32:36 +0200 Subject: When sending a toot, ensure a CW is only set if the CW field is visible (#11206) In some occasions, such as the browser or a browser extension auto-filling the existing but disabled/hidden CW field, a CW can be set without the user knowing. --- app/javascript/mastodon/actions/compose.js | 2 +- app/javascript/mastodon/reducers/compose.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'app') diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 300fb48a9..fbf97d374 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -139,7 +139,7 @@ export function submitCompose(routerHistory) { in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null), media_ids: media.map(item => item.get('id')), sensitive: getState().getIn(['compose', 'sensitive']), - spoiler_text: getState().getIn(['compose', 'spoiler_text'], ''), + spoiler_text: getState().getIn(['compose', 'spoiler']) ? getState().getIn(['compose', 'spoiler_text'], '') : '', visibility: getState().getIn(['compose', 'privacy']), poll: getState().getIn(['compose', 'poll'], null), }, { diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js index 29c691144..8cdd29bfe 100644 --- a/app/javascript/mastodon/reducers/compose.js +++ b/app/javascript/mastodon/reducers/compose.js @@ -224,6 +224,7 @@ export default function compose(state = initialState, action) { } }); case COMPOSE_SPOILER_TEXT_CHANGE: + if (!state.get('spoiler')) return state; return state .set('spoiler_text', action.text) .set('idempotencyKey', uuid()); -- cgit From f895bf198470c1d4a0299b454433fdf1c35ee2b0 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sun, 30 Jun 2019 00:12:38 +0200 Subject: Optimize makeGetStatus (#11211) * Optimize makeGetStatus Because `ImmutableList.filter` always returns a new object and `createSelector` memoizes based on object identity, the selector returned by `makeGetStatus` would *always* execute. To avoid that, we wrap `getFilters` into a new memoizer that memoizes based on deep equality, thus returning the same object as long as the filters haven't changed, allowing the memoization of `makeGetStatus` to work. Furthermore, we memoize the compiled regexs instead of recomputing them each time the selector is called. * Fix memoized result being cleared too often * Make notifications use memoized getFiltersRegex --- app/javascript/mastodon/actions/notifications.js | 8 +++--- app/javascript/mastodon/selectors/index.js | 35 ++++++++++++++++++------ 2 files changed, 31 insertions(+), 12 deletions(-) (limited to 'app') diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js index 88788eec9..56c952cb0 100644 --- a/app/javascript/mastodon/actions/notifications.js +++ b/app/javascript/mastodon/actions/notifications.js @@ -11,7 +11,7 @@ import { saveSettings } from './settings'; import { defineMessages } from 'react-intl'; import { List as ImmutableList } from 'immutable'; import { unescapeHTML } from '../utils/html'; -import { getFilters, regexFromFilters } from '../selectors'; +import { getFiltersRegex } from '../selectors'; export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE'; export const NOTIFICATIONS_UPDATE_NOOP = 'NOTIFICATIONS_UPDATE_NOOP'; @@ -43,13 +43,13 @@ export function updateNotifications(notification, intlMessages, intlLocale) { const showInColumn = getState().getIn(['settings', 'notifications', 'shows', notification.type], true); const showAlert = getState().getIn(['settings', 'notifications', 'alerts', notification.type], true); const playSound = getState().getIn(['settings', 'notifications', 'sounds', notification.type], true); - const filters = getFilters(getState(), { contextType: 'notifications' }); + const filters = getFiltersRegex(getState(), { contextType: 'notifications' }); let filtered = false; if (notification.type === 'mention') { - const dropRegex = regexFromFilters(filters.filter(filter => filter.get('irreversible'))); - const regex = regexFromFilters(filters); + const dropRegex = filters[0]; + const regex = filters[1]; const searchIndex = notification.status.spoiler_text + '\n' + unescapeHTML(notification.status.content); if (dropRegex && dropRegex.test(searchIndex)) { diff --git a/app/javascript/mastodon/selectors/index.js b/app/javascript/mastodon/selectors/index.js index ff6c7fdfb..c87654547 100644 --- a/app/javascript/mastodon/selectors/index.js +++ b/app/javascript/mastodon/selectors/index.js @@ -1,5 +1,5 @@ import { createSelector } from 'reselect'; -import { List as ImmutableList } from 'immutable'; +import { List as ImmutableList, is } from 'immutable'; import { me } from '../initial_state'; const getAccountBase = (state, id) => state.getIn(['accounts', id], null); @@ -36,12 +36,10 @@ const toServerSideType = columnType => { } }; -export const getFilters = (state, { contextType }) => state.get('filters', ImmutableList()).filter(filter => contextType && filter.get('context').includes(toServerSideType(contextType)) && (filter.get('expires_at') === null || Date.parse(filter.get('expires_at')) > (new Date()))); - const escapeRegExp = string => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string -export const regexFromFilters = filters => { +const regexFromFilters = filters => { if (filters.size === 0) { return null; } @@ -63,6 +61,27 @@ export const regexFromFilters = filters => { }).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 = () => { return createSelector( [ @@ -70,10 +89,10 @@ export const makeGetStatus = () => { (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', state.getIn(['statuses', id, 'reblog']), 'account'])]), - getFilters, + getFiltersRegex, ], - (statusBase, statusReblog, accountBase, accountReblog, filters) => { + (statusBase, statusReblog, accountBase, accountReblog, filtersRegex) => { if (!statusBase) { return null; } @@ -84,12 +103,12 @@ export const makeGetStatus = () => { statusReblog = null; } - const dropRegex = (accountReblog || accountBase).get('id') !== me && regexFromFilters(filters.filter(filter => filter.get('irreversible'))); + 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 && regexFromFilters(filters); + const regex = (accountReblog || accountBase).get('id') !== me && filtersRegex[1]; const filtered = regex && regex.test(statusBase.get('reblog') ? statusReblog.get('search_index') : statusBase.get('search_index')); return statusBase.withMutations(map => { -- cgit From 46829e009ee26603e3f3462cba4c054939aac3dd Mon Sep 17 00:00:00 2001 From: ThibG Date: Sat, 29 Jun 2019 18:32:06 +0200 Subject: [Glitch] Use ScrollToOptions for smooth scrolling if supported Port 84ff3938426da348e31651dfad376d83a9784343 to glitch-soc Signed-off-by: Thibaut Girka --- app/javascript/flavours/glitch/util/scroll.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'app') diff --git a/app/javascript/flavours/glitch/util/scroll.js b/app/javascript/flavours/glitch/util/scroll.js index 2af07e0fb..84fe58269 100644 --- a/app/javascript/flavours/glitch/util/scroll.js +++ b/app/javascript/flavours/glitch/util/scroll.js @@ -26,5 +26,7 @@ const scroll = (node, key, target) => { }; }; -export const scrollRight = (node, position) => scroll(node, 'scrollLeft', position); -export const scrollTop = (node) => scroll(node, 'scrollTop', 0); +const isScrollBehaviorSupported = 'scrollBehavior' in document.documentElement.style; + +export const scrollRight = (node, position) => isScrollBehaviorSupported ? node.scrollTo({ left: position, behavior: 'smooth' }) : scroll(node, 'scrollLeft', position); +export const scrollTop = (node) => isScrollBehaviorSupported ? node.scrollTo({ top: 0, behavior: 'smooth' }) : scroll(node, 'scrollTop', 0); -- cgit From cbb41e2dad829ff24db8b4a917a779627bf98cf2 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sun, 30 Jun 2019 00:12:38 +0200 Subject: [Glitch] Optimize makeGetStatus Port f895bf198470c1d4a0299b454433fdf1c35ee2b0 to glitch-soc Signed-off-by: Thibaut Girka --- .../flavours/glitch/actions/notifications.js | 8 ++--- app/javascript/flavours/glitch/selectors/index.js | 35 +++++++++++++++++----- 2 files changed, 31 insertions(+), 12 deletions(-) (limited to 'app') diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js index 2107503db..c057a5298 100644 --- a/app/javascript/flavours/glitch/actions/notifications.js +++ b/app/javascript/flavours/glitch/actions/notifications.js @@ -11,7 +11,7 @@ import { saveSettings } from './settings'; import { defineMessages } from 'react-intl'; import { List as ImmutableList } from 'immutable'; import { unescapeHTML } from 'flavours/glitch/util/html'; -import { getFilters, regexFromFilters } from 'flavours/glitch/selectors'; +import { getFiltersRegex } from 'flavours/glitch/selectors'; export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE'; @@ -57,13 +57,13 @@ export function updateNotifications(notification, intlMessages, intlLocale) { const showInColumn = getState().getIn(['settings', 'notifications', 'shows', notification.type], true); const showAlert = getState().getIn(['settings', 'notifications', 'alerts', notification.type], true); const playSound = getState().getIn(['settings', 'notifications', 'sounds', notification.type], true); - const filters = getFilters(getState(), { contextType: 'notifications' }); + const filters = getFiltersRegex(getState(), { contextType: 'notifications' }); let filtered = false; if (notification.type === 'mention') { - const dropRegex = regexFromFilters(filters.filter(filter => filter.get('irreversible'))); - const regex = regexFromFilters(filters); + const dropRegex = filters[0]; + const regex = filters[1]; const searchIndex = notification.status.spoiler_text + '\n' + unescapeHTML(notification.status.content); if (dropRegex && dropRegex.test(searchIndex)) { diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js index 2d4f3f7b4..9e4582532 100644 --- a/app/javascript/flavours/glitch/selectors/index.js +++ b/app/javascript/flavours/glitch/selectors/index.js @@ -1,5 +1,5 @@ import { createSelector } from 'reselect'; -import { List as ImmutableList } from 'immutable'; +import { List as ImmutableList, is } from 'immutable'; import { me } from 'flavours/glitch/util/initial_state'; const getAccountBase = (state, id) => state.getIn(['accounts', id], null); @@ -36,12 +36,10 @@ const toServerSideType = columnType => { } }; -export const getFilters = (state, { contextType }) => state.get('filters', ImmutableList()).filter(filter => contextType && filter.get('context').includes(toServerSideType(contextType)) && (filter.get('expires_at') === null || Date.parse(filter.get('expires_at')) > (new Date()))); - const escapeRegExp = string => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string -export const regexFromFilters = filters => { +const regexFromFilters = filters => { if (filters.size === 0) { return null; } @@ -63,6 +61,27 @@ export const regexFromFilters = filters => { }).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 = () => { return createSelector( [ @@ -70,21 +89,21 @@ export const makeGetStatus = () => { (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', state.getIn(['statuses', id, 'reblog']), 'account'])]), - getFilters, + getFiltersRegex, ], - (statusBase, statusReblog, accountBase, accountReblog, filters) => { + (statusBase, statusReblog, accountBase, accountReblog, filtersRegex) => { if (!statusBase) { return null; } - const dropRegex = (accountReblog || accountBase).get('id') !== me && regexFromFilters(filters.filter(filter => filter.get('irreversible'))); + 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 && regexFromFilters(filters); + const regex = (accountReblog || accountBase).get('id') !== me && filtersRegex[1]; let filtered = false; if (statusReblog) { -- cgit From b6e9b7d1cdaf762964b0920cfb0485d30cff834c Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sun, 30 Jun 2019 11:09:54 +0200 Subject: [Glitch] When sending a toot, ensure a CW is only set if the CW field is visible MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Partial port of ccc7fe3e1d04c7cabad916e4e57c7739743d5c91 to glitch-soc It doesn't ensure the field isn't changed, just that it isn't submitted if the field isn't visible. Ensuring the field isn't changed would require reworking the “always show CW field” feature. --- app/javascript/flavours/glitch/actions/compose.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app') diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js index 69cc6827f..2312bae63 100644 --- a/app/javascript/flavours/glitch/actions/compose.js +++ b/app/javascript/flavours/glitch/actions/compose.js @@ -138,7 +138,8 @@ export function submitCompose(routerHistory) { return function (dispatch, getState) { let status = getState().getIn(['compose', 'text'], ''); let media = getState().getIn(['compose', 'media_attachments']); - let spoilerText = getState().getIn(['compose', 'spoiler_text'], ''); + const spoilers = getState().getIn(['compose', 'spoiler']) || getState().getIn(['local_settings', 'always_show_spoilers_field']); + let spoilerText = spoilers ? getState().getIn(['compose', 'spoiler_text'], '') : ''; if ((!status || !status.length) && media.size === 0) { return; -- cgit From 82cd138c89730279205a0dccab4ee5c39f92b342 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 29 Jun 2019 10:43:45 +0200 Subject: Fix some React warnings --- .../flavours/glitch/components/intersection_observer_article.js | 2 +- app/javascript/flavours/glitch/components/status_action_bar.js | 8 ++++---- .../flavours/glitch/features/local_settings/page/item/index.js | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) (limited to 'app') diff --git a/app/javascript/flavours/glitch/components/intersection_observer_article.js b/app/javascript/flavours/glitch/components/intersection_observer_article.js index 900c98638..295347c29 100644 --- a/app/javascript/flavours/glitch/components/intersection_observer_article.js +++ b/app/javascript/flavours/glitch/components/intersection_observer_article.js @@ -119,7 +119,7 @@ export default class IntersectionObserverArticle extends ImmutablePureComponent data-id={id} tabIndex='0' style={style}> - {children && React.cloneElement(children, { hidden: !isIntersecting && (isHidden || cachedHeight) })} + {children && React.cloneElement(children, { hidden: !isIntersecting && (isHidden || !!cachedHeight) })} ); } diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js index 85bc4a976..c424fbde1 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar.js +++ b/app/javascript/flavours/glitch/components/status_action_bar.js @@ -284,11 +284,11 @@ export default class StatusActionBar extends ImmutablePureComponent {
{replyButton} {!directMessage && [ - , - , + , + , shareButton, - , -
+ , +
, ]} diff --git a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js index 66b937365..5a68523f6 100644 --- a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js +++ b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js @@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; export default class LocalSettingsPageItem extends React.PureComponent { static propTypes = { - children: PropTypes.element.isRequired, + children: PropTypes.node.isRequired, dependsOn: PropTypes.array, dependsOnNot: PropTypes.array, id: PropTypes.string.isRequired, @@ -63,12 +63,12 @@ export default class LocalSettingsPageItem extends React.PureComponent { disabled={!enabled} /> {opt.message} - {opt.hint && {opt.hint}} + {opt.hint && {opt.hint}} ); }); return ( -
+
{children} {optionElems} -- cgit From 0ef6a114e7f7b77ddbb279d5d73288b125e8851a Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 1 Jul 2019 13:38:00 +0200 Subject: Fix error boundary DOM --- .../flavours/glitch/components/error_boundary.js | 66 +++++++++++----------- 1 file changed, 33 insertions(+), 33 deletions(-) (limited to 'app') diff --git a/app/javascript/flavours/glitch/components/error_boundary.js b/app/javascript/flavours/glitch/components/error_boundary.js index 142a0c21a..dd21f2930 100644 --- a/app/javascript/flavours/glitch/components/error_boundary.js +++ b/app/javascript/flavours/glitch/components/error_boundary.js @@ -50,43 +50,43 @@ export default class ErrorBoundary extends React.PureComponent {

-

    -
  • - }} - /> - { debugInfo !== '' && ( -
    - -