From 3fb7fe14c625b0e797429843a0275b6ae3fdf5a1 Mon Sep 17 00:00:00 2001 From: Claire Date: Sun, 7 May 2023 18:22:25 +0200 Subject: [PATCH] Fix some of the Javascript linting issues, as well as bugs and unneeded divergences with upstream (#2208) * Run eslint --fix * Fix linting issues in video player and reduce divergences with upstream This includes a behavior change of not auto-looping videos anymore. I don't remember loops being ever intended, and they have been removed from upstream a while ago, but we somehow missed the change. * Fix lint issues in `app/javascript/flavours/glitch/selectors/index.js` Those were basically caused by dead code that isn't present upstream, so that brings us closer to upstream as well. * Fix linting issue and bug in streaming/index.js * Fix linting issues in config/webpack/shared.js * Fix unused import in flavours/glitch/features/ui/index.js * Fix linting issues and reduce divergences from upstream in flavours/glitch/features/ui/components/video_modal.jsx * Fix linting issues in flavours/glitch/reducers * Fix linting issues in glitch-soc onboarding modal * Fix linting issues in flavours/glitch/features/ui/components/navigation_panel.jsx * Remove dead code for unused local setting navbar_under * Fix various linting issues * Fix linting issues in flavours/glitch/components/scrollable_list.jsx and reduce divergences with upstream --- .../glitch/components/scrollable_list.jsx | 47 ++++++++++++------- .../features/compose/components/options.jsx | 4 -- .../compose/containers/options_container.js | 2 - .../features/status/components/card.jsx | 3 +- .../status/components/detailed_status.jsx | 3 +- .../containers/detailed_status_container.js | 2 - .../features/ui/components/columns_area.jsx | 3 +- .../components/deprecated_settings_modal.jsx | 2 +- .../ui/components/navigation_panel.jsx | 6 +-- .../ui/components/onboarding_modal.jsx | 14 +++--- .../features/ui/components/video_modal.jsx | 6 +-- .../flavours/glitch/features/ui/index.jsx | 19 +++----- .../flavours/glitch/features/video/index.jsx | 17 +++---- .../flavours/glitch/reducers/compose.js | 1 + .../glitch/reducers/local_settings.js | 1 - .../flavours/glitch/selectors/index.js | 3 +- .../glitch/styles/components/columns.scss | 25 ---------- config/webpack/shared.js | 7 ++- config/webpack/translationRunner.js | 2 +- streaming/index.js | 3 +- 20 files changed, 68 insertions(+), 102 deletions(-) diff --git a/app/javascript/flavours/glitch/components/scrollable_list.jsx b/app/javascript/flavours/glitch/components/scrollable_list.jsx index fc7dc989d0..c1f511b48d 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.jsx +++ b/app/javascript/flavours/glitch/components/scrollable_list.jsx @@ -90,15 +90,19 @@ class ScrollableList extends PureComponent { lastScrollWasSynthetic = false; scrollToTopOnMouseIdle = false; + _getScrollingElement = () => { + if (this.props.bindToDocument) { + return (document.scrollingElement || document.body); + } else { + return this.node; + } + }; + setScrollTop = newScrollTop => { if (this.getScrollTop() !== newScrollTop) { this.lastScrollWasSynthetic = true; - if (this.props.bindToDocument) { - document.scrollingElement.scrollTop = newScrollTop; - } else { - this.node.scrollTop = newScrollTop; - } + this._getScrollingElement().scrollTop = newScrollTop; } }; @@ -106,6 +110,7 @@ class ScrollableList extends PureComponent { if (this.mouseIdleTimer === null) { return; } + clearTimeout(this.mouseIdleTimer); this.mouseIdleTimer = null; }; @@ -113,13 +118,13 @@ class ScrollableList extends PureComponent { handleMouseMove = throttle(() => { // As long as the mouse keeps moving, clear and restart the idle timer. this.clearMouseIdleTimer(); - this.mouseIdleTimer = - setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY); + this.mouseIdleTimer = setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY); if (!this.mouseMovedRecently && this.getScrollTop() === 0) { // Only set if we just started moving and are scrolled to the top. this.scrollToTopOnMouseIdle = true; } + // Save setting this flag for last, so we can do the comparison above. this.mouseMovedRecently = true; }, MOUSE_IDLE_DELAY / 2); @@ -134,6 +139,7 @@ class ScrollableList extends PureComponent { if (this.scrollToTopOnMouseIdle && !this.props.preventScroll) { this.setScrollTop(0); } + this.mouseMovedRecently = false; this.scrollToTopOnMouseIdle = false; }; @@ -141,6 +147,7 @@ class ScrollableList extends PureComponent { componentDidMount () { this.attachScrollListener(); this.attachIntersectionObserver(); + attachFullscreenListener(this.onFullScreenChange); // Handle initial scroll position @@ -156,15 +163,15 @@ class ScrollableList extends PureComponent { }; getScrollTop = () => { - return this.props.bindToDocument ? document.scrollingElement.scrollTop : this.node.scrollTop; + return this._getScrollingElement().scrollTop; }; getScrollHeight = () => { - return this.props.bindToDocument ? document.scrollingElement.scrollHeight : this.node.scrollHeight; + return this._getScrollingElement().scrollHeight; }; getClientHeight = () => { - return this.props.bindToDocument ? document.scrollingElement.clientHeight : this.node.clientHeight; + return this._getScrollingElement().clientHeight; }; updateScrollBottom = (snapshot) => { @@ -173,11 +180,7 @@ class ScrollableList extends PureComponent { this.setScrollTop(newScrollTop); }; - cacheMediaWidth = (width) => { - if (width && this.state.cachedMediaWidth != width) this.setState({ cachedMediaWidth: width }); - }; - - getSnapshotBeforeUpdate (prevProps, prevState) { + getSnapshotBeforeUpdate (prevProps) { const someItemInserted = React.Children.count(prevProps.children) > 0 && React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); @@ -198,10 +201,17 @@ class ScrollableList extends PureComponent { } } + cacheMediaWidth = (width) => { + if (width && this.state.cachedMediaWidth !== width) { + this.setState({ cachedMediaWidth: width }); + } + }; + componentWillUnmount () { this.clearMouseIdleTimer(); this.detachScrollListener(); this.detachIntersectionObserver(); + detachFullscreenListener(this.onFullScreenChange); } @@ -210,10 +220,13 @@ class ScrollableList extends PureComponent { }; attachIntersectionObserver () { - this.intersectionObserverWrapper.connect({ + let nodeOptions = { root: this.node, rootMargin: '300% 0px', - }); + }; + + this.intersectionObserverWrapper + .connect(this.props.bindToDocument ? {} : nodeOptions); } detachIntersectionObserver () { diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx index 19ead2f217..cedb906ca0 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { defineMessages, injectIntl } from 'react-intl'; -import spring from 'react-motion/lib/spring'; import Toggle from 'react-toggle'; import { connect } from 'react-redux'; @@ -16,7 +15,6 @@ import LanguageDropdown from '../containers/language_dropdown_container'; import ImmutablePureComponent from 'react-immutable-pure-component'; // Utils. -import Motion from '../../ui/util/optional_motion'; import { pollLimits } from 'flavours/glitch/initial_state'; // Messages. @@ -125,7 +123,6 @@ class ComposerOptions extends ImmutablePureComponent { advancedOptions: ImmutablePropTypes.map, disabled: PropTypes.bool, allowMedia: PropTypes.bool, - hasMedia: PropTypes.bool, allowPoll: PropTypes.bool, hasPoll: PropTypes.bool, intl: PropTypes.object.isRequired, @@ -190,7 +187,6 @@ class ComposerOptions extends ImmutablePureComponent { contentType, disabled, allowMedia, - hasMedia, allowPoll, hasPoll, onChangeAdvancedOption, diff --git a/app/javascript/flavours/glitch/features/compose/containers/options_container.js b/app/javascript/flavours/glitch/features/compose/containers/options_container.js index 19a90ac8b6..5b7ccc06b8 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/options_container.js +++ b/app/javascript/flavours/glitch/features/compose/containers/options_container.js @@ -9,7 +9,6 @@ import { import { openModal } from 'flavours/glitch/actions/modal'; function mapStateToProps (state) { - const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']); const poll = state.getIn(['compose', 'poll']); const media = state.getIn(['compose', 'media_attachments']); const pending_media = state.getIn(['compose', 'pending_media_attachments']); @@ -18,7 +17,6 @@ function mapStateToProps (state) { resetFileKey: state.getIn(['compose', 'resetFileKey']), hasPoll: !!poll, allowMedia: !poll && (media ? media.size + pending_media < 4 && !media.some(item => ['video', 'audio'].includes(item.get('type'))) : pending_media < 4), - hasMedia: media && !!media.size, allowPoll: !(media && !!media.size), showContentTypeChoice: state.getIn(['local_settings', 'show_content_type_choice']), contentType: state.getIn(['compose', 'content_type']), diff --git a/app/javascript/flavours/glitch/features/status/components/card.jsx b/app/javascript/flavours/glitch/features/status/components/card.jsx index 7e834b2dc1..0d5f781a02 100644 --- a/app/javascript/flavours/glitch/features/status/components/card.jsx +++ b/app/javascript/flavours/glitch/features/status/components/card.jsx @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import Immutable from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { FormattedMessage } from 'react-intl'; -import punycode from 'punycode'; import classnames from 'classnames'; import { decode as decodeIDNA } from 'flavours/glitch/utils/idna'; import Icon from 'flavours/glitch/components/icon'; @@ -164,7 +163,7 @@ export default class Card extends React.PureComponent { } render () { - const { card, compact, defaultWidth } = this.props; + const { card, compact } = this.props; const { width, embedded, revealed } = this.state; if (card === null) { diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx index cfe6c965ed..3f5b119444 100644 --- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx +++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx @@ -122,9 +122,8 @@ class DetailedStatus extends ImmutablePureComponent { render () { const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status; - const { expanded, onToggleHidden, settings, pictureInPicture, intl } = this.props; const outerStyle = { boxSizing: 'border-box' }; - const { compact } = this.props; + const { compact, pictureInPicture, expanded, onToggleHidden, settings } = this.props; if (!status) { return null; diff --git a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js index e5e0659876..25517a9f78 100644 --- a/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js +++ b/app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js @@ -18,8 +18,6 @@ import { muteStatus, unmuteStatus, deleteStatus, - hideStatus, - revealStatus, } from 'flavours/glitch/actions/statuses'; import { initMuteModal } from 'flavours/glitch/actions/mutes'; import { initBlockModal } from 'flavours/glitch/actions/blocks'; diff --git a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx index 3b3b0d58f7..458f48cde0 100644 --- a/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/columns_area.jsx @@ -50,7 +50,6 @@ export default class ColumnsArea extends ImmutablePureComponent { columns: ImmutablePropTypes.list.isRequired, singleColumn: PropTypes.bool, children: PropTypes.node, - navbarUnder: PropTypes.bool, openSettings: PropTypes.func, }; @@ -136,7 +135,7 @@ export default class ColumnsArea extends ImmutablePureComponent { }; render () { - const { columns, children, singleColumn, navbarUnder, openSettings } = this.props; + const { columns, children, singleColumn, openSettings } = this.props; const { renderComposePanel } = this.state; if (singleColumn) { diff --git a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx index 5a1c1ee1b5..3face11463 100644 --- a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx @@ -64,7 +64,7 @@ class DeprecatedSettingsModal extends React.PureComponent {