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:
parent
9b59748679
commit
3fb7fe14c6
|
@ -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 () {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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']),
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
)) }
|
)) }
|
||||||
|
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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} />,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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'));
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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), {}),
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Reference in New Issue