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

60
app/javascript/flavours/glitch/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 'flavours/glitch/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;
}
@ -213,6 +218,8 @@ class Audio extends React.PureComponent {
}
componentDidMount () {
window.addEventListener('resize', this.handleResize, { passive: true });
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => this.handlePosterLoad(img);
@ -239,6 +246,10 @@ class Audio extends React.PureComponent {
this._draw();
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
}
togglePlay = () => {
if (this.state.paused) {
this.setState({ paused: false }, () => this.audio.play());
@ -247,6 +258,14 @@ class Audio extends React.PureComponent {
}
}
handleResize = debounce(() => {
if (this.player) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
handlePlay = () => {
this.setState({ paused: false });
@ -545,14 +564,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);
@ -571,6 +589,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})`;
}
@ -619,7 +645,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}>