tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix audio/video/images/cards not reacting to window resizes in web UI

Browse Source 
Port bb9ca8a587 to glitch-soc

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

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko
2020-06-24 10:25:32 +02:00
committed by ThibG
parent 1c58420831
commit 06309129be
5 changed files with 146 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/javascript/flavours/glitch/components/media_gallery.js
View File

@ -8,6 +8,7 @@ import { isIOS } from 'flavours/glitch/util/is_mobile';
import classNames from 'classnames';
import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/util/initial_state';
import { decode } from 'blurhash';
import { debounce } from 'lodash';
const messages = defineMessages({
hidden: {
@ -289,6 +290,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' });
@ -305,6 +314,14 @@ class MediaGallery extends React.PureComponent {
}
}
handleResize = debounce(() => {
if (this.node) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
handleOpen = () => {
if (this.props.onToggleVisibility) {
this.props.onToggleVisibility();
@ -319,11 +336,23 @@ class MediaGallery extends React.PureComponent {
handleRef = (node) => {
this.node = node;
if (node && node.offsetWidth && node.offsetWidth != this.state.width) {
if (this.props.cacheWidth) this.props.cacheWidth(node.offsetWidth);
if (this.node) {
this._setDimensions();
}
}
_setDimensions () {
const width = this.node.offsetWidth;
if (width && width != this.state.width) {
// offsetWidth triggers a layout, so only calculate when we need to
if (this.props.cacheWidth) {
this.props.cacheWidth(width);
}
this.setState({
width: node.offsetWidth,
width: width,
});
}
}