Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Fix audio/video/images/cards not reacting to window resizes in web UI (#14130)

Browse source 
* Fix audio/video/images/cards not reacting to window resizes in web UI

* Update app/javascript/mastodon/features/audio/index.js

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
This commit is contained in:
Eugen Rochko 2020-06-24 10:25:32 +02:00 • committed by GitHub
parent d469247083
commit bb9ca8a587
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 143 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

44
app/javascript/mastodon/components/media_gallery.js
View file

@ -8,10 +8,10 @@ import { isIOS } from '../is_mobile';
import classNames from 'classnames';
import { autoPlayGif, cropImages, displayMedia, useBlurhash } from '../initial_state';
import { decode } from 'blurhash';
import { debounce } from 'lodash';
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible',
defaultMessage: 'Hide {number, plural, one {image} other {images}}' },
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Hide {number, plural, one {image} other {images}}' },
});
class Item extends React.PureComponent {
@ -267,6 +267,14 @@ class MediaGallery extends React.PureComponent {
width: this.props.defaultWidth,
};
componentDidMount () {
window.addEventListener('resize', this.handleResize, { passive: true });
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
}
componentWillReceiveProps (nextProps) {
if (!is(nextProps.media, this.props.media) && nextProps.visible === undefined) {
this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
@ -275,6 +283,14 @@ class MediaGallery extends React.PureComponent {
}
}
handleResize = debounce(() => {
if (this.node) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
handleOpen = () => {
if (this.props.onToggleVisibility) {
this.props.onToggleVisibility();
@ -287,17 +303,27 @@ class MediaGallery extends React.PureComponent {
this.props.onOpenMedia(this.props.media, index);
}
handleRef = (node) => {
if (node) {
// offsetWidth triggers a layout, so only calculate when we need to
if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth);
handleRef = c => {
this.node = c;
this.setState({
width: node.offsetWidth,
});
if (this.node) {
this._setDimensions();
}
}
_setDimensions () {
const width = this.node.offsetWidth;
// offsetWidth triggers a layout, so only calculate when we need to
if (this.props.cacheWidth) {
this.props.cacheWidth(width);
}
this.setState({
width: width,
});
}
isFullSizeEligible() {
const { media } = this.props;
return media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);