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
This commit is contained in:
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; lastScrollWasSynthetic = false;
scrollToTopOnMouseIdle = false; scrollToTopOnMouseIdle = false;
_getScrollingElement = () => {
if (this.props.bindToDocument) {
return (document.scrollingElement || document.body);
} else {
return this.node;
}
};
setScrollTop = newScrollTop => { setScrollTop = newScrollTop => {
if (this.getScrollTop() !== newScrollTop) { if (this.getScrollTop() !== newScrollTop) {
this.lastScrollWasSynthetic = true; this.lastScrollWasSynthetic = true;
if (this.props.bindToDocument) { this._getScrollingElement().scrollTop = newScrollTop;
document.scrollingElement.scrollTop = newScrollTop;
} else {
this.node.scrollTop = newScrollTop;
}
} }
}; };
@ -106,6 +110,7 @@ class ScrollableList extends PureComponent {
if (this.mouseIdleTimer === null) { if (this.mouseIdleTimer === null) {
return; return;
} }
clearTimeout(this.mouseIdleTimer); clearTimeout(this.mouseIdleTimer);
this.mouseIdleTimer = null; this.mouseIdleTimer = null;
}; };
@ -113,13 +118,13 @@ class ScrollableList extends PureComponent {
handleMouseMove = throttle(() => { handleMouseMove = throttle(() => {
// As long as the mouse keeps moving, clear and restart the idle timer. // As long as the mouse keeps moving, clear and restart the idle timer.
this.clearMouseIdleTimer(); this.clearMouseIdleTimer();
this.mouseIdleTimer = this.mouseIdleTimer = setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY);
setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY);
if (!this.mouseMovedRecently && this.getScrollTop() === 0) { if (!this.mouseMovedRecently && this.getScrollTop() === 0) {
// Only set if we just started moving and are scrolled to the top. // Only set if we just started moving and are scrolled to the top.
this.scrollToTopOnMouseIdle = true; this.scrollToTopOnMouseIdle = true;
} }
// Save setting this flag for last, so we can do the comparison above. // Save setting this flag for last, so we can do the comparison above.
this.mouseMovedRecently = true; this.mouseMovedRecently = true;
}, MOUSE_IDLE_DELAY / 2); }, MOUSE_IDLE_DELAY / 2);
@ -134,6 +139,7 @@ class ScrollableList extends PureComponent {
if (this.scrollToTopOnMouseIdle && !this.props.preventScroll) { if (this.scrollToTopOnMouseIdle && !this.props.preventScroll) {
this.setScrollTop(0); this.setScrollTop(0);
} }
this.mouseMovedRecently = false; this.mouseMovedRecently = false;
this.scrollToTopOnMouseIdle = false; this.scrollToTopOnMouseIdle = false;
}; };
@ -141,6 +147,7 @@ class ScrollableList extends PureComponent {
componentDidMount () { componentDidMount () {
this.attachScrollListener(); this.attachScrollListener();
this.attachIntersectionObserver(); this.attachIntersectionObserver();
attachFullscreenListener(this.onFullScreenChange); attachFullscreenListener(this.onFullScreenChange);
// Handle initial scroll position // Handle initial scroll position
@ -156,15 +163,15 @@ class ScrollableList extends PureComponent {
}; };
getScrollTop = () => { getScrollTop = () => {
return this.props.bindToDocument ? document.scrollingElement.scrollTop : this.node.scrollTop; return this._getScrollingElement().scrollTop;
}; };
getScrollHeight = () => { getScrollHeight = () => {
return this.props.bindToDocument ? document.scrollingElement.scrollHeight : this.node.scrollHeight; return this._getScrollingElement().scrollHeight;
}; };
getClientHeight = () => { getClientHeight = () => {
return this.props.bindToDocument ? document.scrollingElement.clientHeight : this.node.clientHeight; return this._getScrollingElement().clientHeight;
}; };
updateScrollBottom = (snapshot) => { updateScrollBottom = (snapshot) => {
@ -173,11 +180,7 @@ class ScrollableList extends PureComponent {
this.setScrollTop(newScrollTop); this.setScrollTop(newScrollTop);
}; };
cacheMediaWidth = (width) => { getSnapshotBeforeUpdate (prevProps) {
if (width && this.state.cachedMediaWidth != width) this.setState({ cachedMediaWidth: width });
};
getSnapshotBeforeUpdate (prevProps, prevState) {
const someItemInserted = React.Children.count(prevProps.children) > 0 && const someItemInserted = React.Children.count(prevProps.children) > 0 &&
React.Children.count(prevProps.children) < React.Children.count(this.props.children) && React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); 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 () { componentWillUnmount () {
this.clearMouseIdleTimer(); this.clearMouseIdleTimer();
this.detachScrollListener(); this.detachScrollListener();
this.detachIntersectionObserver(); this.detachIntersectionObserver();
detachFullscreenListener(this.onFullScreenChange); detachFullscreenListener(this.onFullScreenChange);
} }
@ -210,10 +220,13 @@ class ScrollableList extends PureComponent {
}; };
attachIntersectionObserver () { attachIntersectionObserver () {
this.intersectionObserverWrapper.connect({ let nodeOptions = {
root: this.node, root: this.node,
rootMargin: '300% 0px', rootMargin: '300% 0px',
}); };
this.intersectionObserverWrapper
.connect(this.props.bindToDocument ? {} : nodeOptions);
} }
detachIntersectionObserver () { detachIntersectionObserver () {

View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import spring from 'react-motion/lib/spring';
import Toggle from 'react-toggle'; import Toggle from 'react-toggle';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -16,7 +15,6 @@ import LanguageDropdown from '../containers/language_dropdown_container';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
// Utils. // Utils.
import Motion from '../../ui/util/optional_motion';
import { pollLimits } from 'flavours/glitch/initial_state'; import { pollLimits } from 'flavours/glitch/initial_state';
// Messages. // Messages.
@ -125,7 +123,6 @@ class ComposerOptions extends ImmutablePureComponent {
advancedOptions: ImmutablePropTypes.map, advancedOptions: ImmutablePropTypes.map,
disabled: PropTypes.bool, disabled: PropTypes.bool,
allowMedia: PropTypes.bool, allowMedia: PropTypes.bool,
hasMedia: PropTypes.bool,
allowPoll: PropTypes.bool, allowPoll: PropTypes.bool,
hasPoll: PropTypes.bool, hasPoll: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
@ -190,7 +187,6 @@ class ComposerOptions extends ImmutablePureComponent {
contentType, contentType,
disabled, disabled,
allowMedia, allowMedia,
hasMedia,
allowPoll, allowPoll,
hasPoll, hasPoll,
onChangeAdvancedOption, onChangeAdvancedOption,

View File

@ -9,7 +9,6 @@ import {
import { openModal } from 'flavours/glitch/actions/modal'; import { openModal } from 'flavours/glitch/actions/modal';
function mapStateToProps (state) { function mapStateToProps (state) {
const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']);
const poll = state.getIn(['compose', 'poll']); const poll = state.getIn(['compose', 'poll']);
const media = state.getIn(['compose', 'media_attachments']); const media = state.getIn(['compose', 'media_attachments']);
const pending_media = state.getIn(['compose', 'pending_media_attachments']); const pending_media = state.getIn(['compose', 'pending_media_attachments']);
@ -18,7 +17,6 @@ function mapStateToProps (state) {
resetFileKey: state.getIn(['compose', 'resetFileKey']), resetFileKey: state.getIn(['compose', 'resetFileKey']),
hasPoll: !!poll, hasPoll: !!poll,
allowMedia: !poll && (media ? media.size + pending_media < 4 && !media.some(item => ['video', 'audio'].includes(item.get('type'))) : pending_media < 4), 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), allowPoll: !(media && !!media.size),
showContentTypeChoice: state.getIn(['local_settings', 'show_content_type_choice']), showContentTypeChoice: state.getIn(['local_settings', 'show_content_type_choice']),
contentType: state.getIn(['compose', 'content_type']), contentType: state.getIn(['compose', 'content_type']),

View File

@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import Immutable from 'immutable'; import Immutable from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import punycode from 'punycode';
import classnames from 'classnames'; import classnames from 'classnames';
import { decode as decodeIDNA } from 'flavours/glitch/utils/idna'; import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
@ -164,7 +163,7 @@ export default class Card extends React.PureComponent {
} }
render () { render () {
const { card, compact, defaultWidth } = this.props; const { card, compact } = this.props;
const { width, embedded, revealed } = this.state; const { width, embedded, revealed } = this.state;
if (card === null) { if (card === null) {

View File

@ -122,9 +122,8 @@ class DetailedStatus extends ImmutablePureComponent {
render () { render () {
const status = (this.props.status && this.props.status.get('reblog')) ? this.props.status.get('reblog') : this.props.status; 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 outerStyle = { boxSizing: 'border-box' };
const { compact } = this.props; const { compact, pictureInPicture, expanded, onToggleHidden, settings } = this.props;
if (!status) { if (!status) {
return null; return null;

View File

@ -18,8 +18,6 @@ import {
muteStatus, muteStatus,
unmuteStatus, unmuteStatus,
deleteStatus, deleteStatus,
hideStatus,
revealStatus,
} from 'flavours/glitch/actions/statuses'; } from 'flavours/glitch/actions/statuses';
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';

View File

@ -50,7 +50,6 @@ export default class ColumnsArea extends ImmutablePureComponent {
columns: ImmutablePropTypes.list.isRequired, columns: ImmutablePropTypes.list.isRequired,
singleColumn: PropTypes.bool, singleColumn: PropTypes.bool,
children: PropTypes.node, children: PropTypes.node,
navbarUnder: PropTypes.bool,
openSettings: PropTypes.func, openSettings: PropTypes.func,
}; };
@ -136,7 +135,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
}; };
render () { render () {
const { columns, children, singleColumn, navbarUnder, openSettings } = this.props; const { columns, children, singleColumn, openSettings } = this.props;
const { renderComposePanel } = this.state; const { renderComposePanel } = this.state;
if (singleColumn) { if (singleColumn) {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -446,6 +446,7 @@ export default function compose(state = initialState, action) {
}); });
case COMPOSE_REPLY_CANCEL: case COMPOSE_REPLY_CANCEL:
state = state.setIn(['advanced_options', 'threaded_mode'], false); state = state.setIn(['advanced_options', 'threaded_mode'], false);
// eslint-disable-next-line no-fallthrough -- fall-through to `COMPOSE_RESET` is intended
case COMPOSE_RESET: case COMPOSE_RESET:
return state.withMutations(map => { return state.withMutations(map => {
map.set('in_reply_to', null); 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({ const initialState = ImmutableMap({
layout : 'auto', layout : 'auto',
stretch : true, stretch : true,
navbar_under : false,
side_arm : 'none', side_arm : 'none',
side_arm_reply_mode : 'keep', side_arm_reply_mode : 'keep',
show_reply_count : false, show_reply_count : false,

View File

@ -1,6 +1,5 @@
import escapeTextContentForBrowser from 'escape-html';
import { createSelector } from 'reselect'; 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 { toServerSideType } from 'flavours/glitch/utils/filters';
import { me } from 'flavours/glitch/initial_state'; 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 { .column-inline-form {
padding: 7px 15px; padding: 7px 15px;
padding-inline-end: 5px; padding-inline-end: 5px;

View File

@ -1,11 +1,10 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect // Note: You must restart bin/webpack-dev-server for changes to take effect
const webpack = require('webpack'); const webpack = require('webpack');
const { basename, dirname, join, relative, resolve } = require('path'); const { resolve } = require('path');
const { sync } = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const AssetsManifestPlugin = require('webpack-assets-manifest'); 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 rules = require('./rules');
const localePacks = require('./generateLocalePacks'); const localePacks = require('./generateLocalePacks');
@ -50,7 +49,7 @@ const entries = Object.assign(
{ locales: resolve('app', 'javascript', 'locales') }, { locales: resolve('app', 'javascript', 'locales') },
localePacks, localePacks,
reducePacks(core), 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 => { originalExtractedMessages.forEach(file => {
file.descriptors.forEach(descriptor => { 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 channelNameFromPath = req => {
const { path, query } = req; const { path, query } = req;
const onlyMedia = isTruthy(query.only_media); const onlyMedia = isTruthy(query.only_media);
const allowLocalOnly = isTruthy(query.allow_local_only);
switch (path) { switch (path) {
case '/api/v1/streaming/user': case '/api/v1/streaming/user':
@ -990,7 +989,7 @@ const startServer = async () => {
case 'public:media': case 'public:media':
resolve({ resolve({
channelIds: ['timeline:public:media'], channelIds: ['timeline:public:media'],
options: { needsFiltering: true, allowLocalOnly: isTruthy(query.allow_local_only) }, options: { needsFiltering: true, allowLocalOnly: isTruthy(params.allow_local_only) },
}); });
break; break;