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

56
app/javascript/mastodon/features/audio/index.js
View file

@ -7,6 +7,7 @@ import classNames from 'classnames';
import { throttle } from 'lodash';
import { encode, decode } from 'blurhash';
import { getPointerPosition, fileNameFromURL } from 'mastodon/features/video';
import { debounce } from 'lodash';
const digitCharacters = [
'0',
@ -172,18 +173,22 @@ class Audio extends React.PureComponent {
setPlayerRef = c => {
this.player = c;
if (c) {
const width = c.offsetWidth;
const height = width / (16/9);
if (this.props.cacheWidth) {
this.props.cacheWidth(width);
}
this.setState({ width, height });
if (this.player) {
this._setDimensions();
}
}
_setDimensions () {
const width = this.player.offsetWidth;
const height = width / (16/9);
if (this.props.cacheWidth) {
this.props.cacheWidth(width);
}
this.setState({ width, height });
}
setSeekRef = c => {
this.seek = c;
}
@ -214,6 +219,7 @@ class Audio extends React.PureComponent {
componentDidMount () {
window.addEventListener('scroll', this.handleScroll);
window.addEventListener('resize', this.handleResize, { passive: true });
const img = new Image();
img.crossOrigin = 'anonymous';
@ -243,6 +249,7 @@ class Audio extends React.PureComponent {
componentWillUnmount () {
window.removeEventListener('scroll', this.handleScroll);
window.removeEventListener('resize', this.handleResize);
}
togglePlay = () => {
@ -253,6 +260,14 @@ class Audio extends React.PureComponent {
}
}
handleResize = debounce(() => {
if (this.player) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
handlePlay = () => {
this.setState({ paused: false });
@ -564,14 +579,13 @@ class Audio extends React.PureComponent {
}
_drawTick (x1, y1, x2, y2) {
const radius = this._getRadius();
const cx = parseInt(this.state.width / 2);
const cy = parseInt(radius + (PADDING * this._getScaleCoefficient()));
const cx = this._getCX();
const cy = this._getCY();
const dx1 = parseInt(cx + x1);
const dy1 = parseInt(cy + y1);
const dx2 = parseInt(cx + x2);
const dy2 = parseInt(cy + y2);
const dx1 = Math.ceil(cx + x1);
const dy1 = Math.ceil(cy + y1);
const dx2 = Math.ceil(cx + x2);
const dy2 = Math.ceil(cy + y2);
const gradient = this.canvasContext.createLinearGradient(dx1, dy1, dx2, dy2);
@ -590,6 +604,14 @@ class Audio extends React.PureComponent {
this.canvasContext.stroke();
}
_getCX() {
return Math.floor(this.state.width / 2);
}
_getCY() {
return Math.floor(this._getRadius() + (PADDING * this._getScaleCoefficient()));
}
_getColor () {
return `rgb(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b})`;
}
@ -638,7 +660,7 @@ class Audio extends React.PureComponent {
alt=''
width={(this._getRadius() - TICK_SIZE) * 2}
height={(this._getRadius() - TICK_SIZE) * 2}
style={{ position: 'absolute', left: parseInt(this.state.width / 2), top: parseInt(this._getRadius() + (PADDING * this._getScaleCoefficient())), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
style={{ position: 'absolute', left: this._getCX(), top: this._getCY(), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
/>
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>