tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki 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
5 changed files with 143 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/javascript/mastodon/features/status/components/card.js
View File

@ -9,6 +9,7 @@ import Icon from 'mastodon/components/icon';
import classNames from 'classnames';
import { useBlurhash } from 'mastodon/initial_state';
import { decode } from 'blurhash';
import { debounce } from 'lodash';
const IDNA_PREFIX = 'xn--';
@ -92,13 +93,20 @@ export default class Card extends React.PureComponent {
}
componentDidMount () {
window.addEventListener('resize', this.handleResize, { passive: true });
if (this.props.card && this.props.card.get('blurhash')) {
this._decode();
}
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
}
componentDidUpdate (prevProps) {
const { card } = this.props;
if (card.get('blurhash') && (!prevProps.card || prevProps.card.get('blurhash') !== card.get('blurhash'))) {
this._decode();
}
@ -118,6 +126,24 @@ export default class Card extends React.PureComponent {
}
}
_setDimensions () {
const width = this.node.offsetWidth;
if (this.props.cacheWidth) {
this.props.cacheWidth(width);
}
this.setState({ width });
}
handleResize = debounce(() => {
if (this.node) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
handlePhotoClick = () => {
const { card, onOpenMedia } = this.props;
@ -150,9 +176,10 @@ export default class Card extends React.PureComponent {
}
setRef = c => {
if (c) {
if (this.props.cacheWidth) this.props.cacheWidth(c.offsetWidth);
this.setState({ width: c.offsetWidth });
this.node = c;
if (this.node) {
this._setDimensions();
}
}