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
shrike
Claire 2023-05-07 18:22:25 +02:00 committed by GitHub
parent 9b59748679
commit 3fb7fe14c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 68 additions and 102 deletions

View File

@ -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 () {

View File

@ -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,

View File

@ -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']),

View File

@ -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) {

View File

@ -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;

View File

@ -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';

View File

@ -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) {

View File

@ -64,7 +64,7 @@ class DeprecatedSettingsModal extends React.PureComponent {
<div className='deprecated-settings-info'>
<ul>
{ settings.map((setting_name) => (
<li>
<li key={setting_name}>
<a href={preferenceLink(setting_name)}><FormattedMessage {...messages[setting_name]} /></a>
</li>
)) }

View File

@ -1,15 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { timelinePreview, showTrends } from 'flavours/glitch/initial_state';
import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
import ColumnLink from './column_link';
import DisabledAccountBanner from './disabled_account_banner';
import FollowRequestsColumnLink from './follow_requests_column_link';
import ListPanel from './list_panel';
import NotificationsCounterIcon from './notifications_counter_icon';
import SignInBanner from './sign_in_banner';
import { preferencesLink, relationshipsLink } from 'flavours/glitch/utils/backend_links';
import { preferencesLink } from 'flavours/glitch/utils/backend_links';
import NavigationPortal from 'flavours/glitch/components/navigation_portal';
const messages = defineMessages({
@ -37,6 +36,7 @@ class NavigationPanel extends React.Component {
};
static propTypes = {
intl: PropTypes.object.isRequired,
onOpenSettings: PropTypes.func,
};

View File

@ -40,7 +40,7 @@ PageOne.propTypes = {
domain: PropTypes.string.isRequired,
};
const PageTwo = ({ intl, myAccount }) => (
const PageTwo = ({ myAccount }) => (
<div className='onboarding-modal__page onboarding-modal__page-two'>
<div className='figure non-interactive'>
<div className='pseudo-drawer'>
@ -63,7 +63,7 @@ PageTwo.propTypes = {
myAccount: ImmutablePropTypes.map.isRequired,
};
const PageThree = ({ intl, myAccount }) => (
const PageThree = ({ myAccount }) => (
<div className='onboarding-modal__page onboarding-modal__page-three'>
<div className='figure non-interactive'>
<Search
@ -187,11 +187,11 @@ class OnboardingModal extends React.PureComponent {
componentWillMount() {
const { myAccount, admin, domain, intl } = this.props;
this.pages = [
<PageOne acct={myAccount.get('acct')} domain={domain} />,
<PageTwo myAccount={myAccount} intl={intl} />,
<PageThree myAccount={myAccount} intl={intl} />,
<PageFour domain={domain} intl={intl} />,
<PageSix admin={admin} domain={domain} />,
<PageOne key='1' acct={myAccount.get('acct')} domain={domain} />,
<PageTwo key='2' myAccount={myAccount} intl={intl} />,
<PageThree key='3' myAccount={myAccount} intl={intl} />,
<PageFour key='4' domain={domain} intl={intl} />,
<PageSix key='6' admin={admin} domain={domain} />,
];
}

View File

@ -13,10 +13,6 @@ const mapStateToProps = (state, { statusId }) => ({
class VideoModal extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
statusId: PropTypes.string,
@ -31,7 +27,7 @@ class VideoModal extends ImmutablePureComponent {
};
componentDidMount () {
const { media, onChangeBackgroundColor, onClose } = this.props;
const { media, onChangeBackgroundColor } = this.props;
const backgroundColor = getAverageFromBlurhash(media.get('blurhash'));

View File

@ -60,7 +60,6 @@ import { HotKeys } from 'react-hotkeys';
import initialState, { me, owner, singleUserMode, showTrends, trendsAsLanding } from '../../initial_state';
import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { Helmet } from 'react-helmet';
import Header from './components/header';
// Dummy import, to make sure that <Status /> ends up in the application bundle.
@ -76,10 +75,8 @@ const mapStateToProps = state => ({
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
canUploadMore: !state.getIn(['compose', 'media_attachments']).some(x => ['audio', 'video'].includes(x.get('type'))) && state.getIn(['compose', 'media_attachments']).size < 4,
layout: state.getIn(['meta', 'layout']),
layout_local_setting: state.getIn(['local_settings', 'layout']),
isWide: state.getIn(['local_settings', 'stretch']),
navbarUnder: state.getIn(['local_settings', 'navbar_under']),
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
unreadNotifications: state.getIn(['notifications', 'unread']),
showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']),
@ -133,7 +130,6 @@ class SwitchingColumnsArea extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
location: PropTypes.object,
navbarUnder: PropTypes.bool,
mobile: PropTypes.bool,
};
@ -165,7 +161,7 @@ class SwitchingColumnsArea extends React.PureComponent {
};
render () {
const { children, mobile, navbarUnder } = this.props;
const { children, mobile } = this.props;
const { signedIn } = this.context.identity;
let redirect;
@ -185,7 +181,7 @@ class SwitchingColumnsArea extends React.PureComponent {
}
return (
<ColumnsAreaContainer ref={this.setRef} singleColumn={mobile} navbarUnder={navbarUnder}>
<ColumnsAreaContainer ref={this.setRef} singleColumn={mobile}>
<WrappedSwitch>
{redirect}
@ -256,7 +252,6 @@ class UI extends React.Component {
layout_local_setting: PropTypes.string,
isWide: PropTypes.bool,
systemFontUi: PropTypes.bool,
navbarUnder: PropTypes.bool,
isComposing: PropTypes.bool,
hasComposingText: PropTypes.bool,
hasMediaAttachments: PropTypes.bool,
@ -268,6 +263,7 @@ class UI extends React.Component {
dropdownMenuIsOpen: PropTypes.bool,
unreadNotifications: PropTypes.number,
showFaviconBadge: PropTypes.bool,
hicolorPrivacyIcons: PropTypes.bool,
moved: PropTypes.map,
layout: PropTypes.string.isRequired,
firstLaunch: PropTypes.bool,
@ -456,8 +452,8 @@ class UI extends React.Component {
}
componentDidUpdate (prevProps) {
if (this.props.unreadNotifications != prevProps.unreadNotifications ||
this.props.showFaviconBadge != prevProps.showFaviconBadge) {
if (this.props.unreadNotifications !== prevProps.unreadNotifications ||
this.props.showFaviconBadge !== prevProps.showFaviconBadge) {
if (this.favicon) {
try {
this.favicon.badge(this.props.showFaviconBadge ? this.props.unreadNotifications : 0);
@ -606,7 +602,7 @@ class UI extends React.Component {
render () {
const { draggingOver } = this.state;
const { children, isWide, navbarUnder, location, dropdownMenuIsOpen, layout, moved } = this.props;
const { children, isWide, location, dropdownMenuIsOpen, layout, moved } = this.props;
const columnsClass = layout => {
switch (layout) {
@ -622,7 +618,6 @@ class UI extends React.Component {
const className = classNames('ui', columnsClass(layout), {
'wide': isWide,
'system-font': this.props.systemFontUi,
'navbar-under': navbarUnder,
'hicolor-privacy-icons': this.props.hicolorPrivacyIcons,
});
@ -665,7 +660,7 @@ class UI extends React.Component {
<Header />
<SwitchingColumnsArea location={location} mobile={layout === 'mobile' || layout === 'single-column'} navbarUnder={navbarUnder}>
<SwitchingColumnsArea location={location} mobile={layout === 'mobile' || layout === 'single-column'}>
{children}
</SwitchingColumnsArea>

View File

@ -29,6 +29,7 @@ export const formatTime = secondsNum => {
if (hours < 10) hours = '0' + hours;
if (minutes < 10) minutes = '0' + minutes;
if (seconds < 10) seconds = '0' + seconds;
return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`;
};
@ -107,18 +108,18 @@ class Video extends React.PureComponent {
currentTime: PropTypes.number,
onOpenVideo: PropTypes.func,
onCloseVideo: PropTypes.func,
letterbox: PropTypes.bool,
fullwidth: PropTypes.bool,
detailed: PropTypes.bool,
inline: PropTypes.bool,
editable: PropTypes.bool,
alwaysVisible: PropTypes.bool,
cacheWidth: PropTypes.func,
intl: PropTypes.object.isRequired,
visible: PropTypes.bool,
letterbox: PropTypes.bool,
fullwidth: PropTypes.bool,
preventPlayback: PropTypes.bool,
onToggleVisibility: PropTypes.func,
deployPictureInPicture: PropTypes.func,
preventPlayback: PropTypes.bool,
intl: PropTypes.object.isRequired,
blurhash: PropTypes.string,
autoPlay: PropTypes.bool,
volume: PropTypes.number,
@ -161,7 +162,7 @@ class Video extends React.PureComponent {
_setDimensions () {
const width = this.player.offsetWidth;
if (width && width != this.state.containerWidth) {
if (width && width !== this.state.containerWidth) {
if (this.props.cacheWidth) {
this.props.cacheWidth(width);
}
@ -403,7 +404,7 @@ class Video extends React.PureComponent {
}
componentDidUpdate (prevProps) {
if (this.player && this.player.offsetWidth && this.player.offsetWidth != this.state.containerWidth && !this.state.fullscreen) {
if (this.player && this.player.offsetWidth && this.player.offsetWidth !== this.state.containerWidth && !this.state.fullscreen) {
if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth);
this.setState({
containerWidth: this.player.offsetWidth,
@ -534,7 +535,7 @@ class Video extends React.PureComponent {
return this.props.frameRate.split('/').reduce((p, c) => p / c);
}
return this.props.frameRate || 25;
return this.props.frameRate;
}
render () {
@ -576,6 +577,7 @@ class Video extends React.PureComponent {
return (
<div
role='menuitem'
className={computedClass}
style={playerStyle}
ref={this.setPlayerRef}
@ -598,7 +600,6 @@ class Video extends React.PureComponent {
src={src}
poster={preview}
preload={preload}
loop
role='button'
tabIndex={0}
aria-label={alt}

View File

@ -446,6 +446,7 @@ export default function compose(state = initialState, action) {
});
case COMPOSE_REPLY_CANCEL:
state = state.setIn(['advanced_options', 'threaded_mode'], false);
// eslint-disable-next-line no-fallthrough -- fall-through to `COMPOSE_RESET` is intended
case COMPOSE_RESET:
return state.withMutations(map => {
map.set('in_reply_to', null);

View File

@ -8,7 +8,6 @@ import { LOCAL_SETTING_CHANGE, LOCAL_SETTING_DELETE } from 'flavours/glitch/acti
const initialState = ImmutableMap({
layout : 'auto',
stretch : true,
navbar_under : false,
side_arm : 'none',
side_arm_reply_mode : 'keep',
show_reply_count : false,

View File

@ -1,6 +1,5 @@
import escapeTextContentForBrowser from 'escape-html';
import { createSelector } from 'reselect';
import { List as ImmutableList, Map as ImmutableMap, is } from 'immutable';
import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
import { toServerSideType } from 'flavours/glitch/utils/filters';
import { me } from 'flavours/glitch/initial_state';

View File

@ -711,31 +711,6 @@ $ui-header-height: 55px;
}
}
// more fixes for the navbar-under mode
@mixin fix-margins-for-navbar-under {
.tabs-bar {
margin-top: 0 !important;
margin-bottom: -6px !important;
}
}
.single-column.navbar-under {
@include fix-margins-for-navbar-under;
}
.auto-columns.navbar-under {
@media screen and (max-width: $no-gap-breakpoint) {
@include fix-margins-for-navbar-under;
}
}
.auto-columns.navbar-under .react-swipeable-view-container .columns-area,
.single-column.navbar-under .react-swipeable-view-container .columns-area {
@media screen and (max-width: $no-gap-breakpoint) {
height: 100% !important;
}
}
.column-inline-form {
padding: 7px 15px;
padding-inline-end: 5px;

View File

@ -1,11 +1,10 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
const webpack = require('webpack');
const { basename, dirname, join, relative, resolve } = require('path');
const { sync } = require('glob');
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const AssetsManifestPlugin = require('webpack-assets-manifest');
const { env, settings, core, flavours, output } = require('./configuration.js');
const { env, settings, core, flavours, output } = require('./configuration');
const rules = require('./rules');
const localePacks = require('./generateLocalePacks');
@ -50,7 +49,7 @@ const entries = Object.assign(
{ locales: resolve('app', 'javascript', 'locales') },
localePacks,
reducePacks(core),
Object.values(flavours).reduce((map, data) => reducePacks(data, map), {})
Object.values(flavours).reduce((map, data) => reducePacks(data, map), {}),
);

View File

@ -95,7 +95,7 @@ const provideExtractedMessages = () => {
originalExtractedMessages.forEach(file => {
file.descriptors.forEach(descriptor => {
originalKeys.add(descriptor.id)
originalKeys.add(descriptor.id);
});
});

View File

@ -373,7 +373,6 @@ const startServer = async () => {
const channelNameFromPath = req => {
const { path, query } = req;
const onlyMedia = isTruthy(query.only_media);
const allowLocalOnly = isTruthy(query.allow_local_only);
switch (path) {
case '/api/v1/streaming/user':
@ -990,7 +989,7 @@ const startServer = async () => {
case 'public:media':
resolve({
channelIds: ['timeline:public:media'],
options: { needsFiltering: true, allowLocalOnly: isTruthy(query.allow_local_only) },
options: { needsFiltering: true, allowLocalOnly: isTruthy(params.allow_local_only) },
});
break;