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

Port bb9ca8a587ee5a3ec8778e72828aca0ba8871327 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>

1 files changed, 41 insertions, 15 deletions

diff --git a/app/javascript/flavours/glitch/features/audio/index.js b/app/javascript/flavours/glitch/features/audio/index.js
index 995586a24..9d81fbff7 100644
--- a/app/javascript/flavours/glitch/features/audio/index.js
+++ b/app/javascript/flavours/glitch/features/audio/index.js
@@ -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,16 +173,20 @@ class Audio extends React.PureComponent {
   setPlayerRef = c => {
     this.player = c;
 
-    if (c) {
-      const width  = c.offsetWidth;
-      const height = width / (16/9);
+    if (this.player) {
+      this._setDimensions();
+    }
+  }
 
-      if (this.props.cacheWidth) {
-        this.props.cacheWidth(width);
-      }
+  _setDimensions () {
+    const width  = this.player.offsetWidth;
+    const height = width / (16/9);
 
-      this.setState({ width, height });
+    if (this.props.cacheWidth) {
+      this.props.cacheWidth(width);
     }
+
+    this.setState({ width, height });
   }
 
   setSeekRef = 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}>