Change media elements to use aspect-ratio rather than compute height themselves (#24686)

app/javascript/mastodon/components/media_gallery.jsx

@@ -313,7 +313,7 @@ class MediaGallery extends React.PureComponent {
   }
 
   render () {
-    const { media, lang, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props;
+    const { media, lang, intl, sensitive, defaultWidth, standalone, autoplay } = this.props;
     const { visible } = this.state;
     const width = this.state.width || defaultWidth;
 
@@ -322,13 +322,9 @@ class MediaGallery extends React.PureComponent {
     const style = {};
 
     if (this.isFullSizeEligible() && (standalone || !cropImages)) {
-      if (width) {
-        style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
-      }
-    } else if (width) {
-      style.height = width / (16/9);
+      style.aspectRatio = `${this.props.media.getIn([0, 'meta', 'small', 'aspect'])}`;
     } else {
-      style.height = height;
+      style.aspectRatio = '16 / 9';
     }
 
     const size     = media.take(4).size;

app/javascript/mastodon/components/picture_in_picture_placeholder.jsx

@@ -3,62 +3,22 @@ import PropTypes from 'prop-types';
 import Icon from 'mastodon/components/icon';
 import { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
 import { connect } from 'react-redux';
-import { debounce } from 'lodash';
 import { FormattedMessage } from 'react-intl';
 
 class PictureInPicturePlaceholder extends React.PureComponent {
 
   static propTypes = {
-    width: PropTypes.number,
     dispatch: PropTypes.func.isRequired,
   };
 
-  state = {
-    width: this.props.width,
-    height: this.props.width && (this.props.width / (16/9)),
-  };
-
   handleClick = () => {
     const { dispatch } = this.props;
     dispatch(removePictureInPicture());
   };
 
-  setRef = c => {
-    this.node = c;
-
-    if (this.node) {
-      this._setDimensions();
-    }
-  };
-
-  _setDimensions () {
-    const width  = this.node.offsetWidth;
-    const height = width / (16/9);
-
-    this.setState({ width, height });
-  }
-
-  componentDidMount () {
-    window.addEventListener('resize', this.handleResize, { passive: true });
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('resize', this.handleResize);
-  }
-
-  handleResize = debounce(() => {
-    if (this.node) {
-      this._setDimensions();
-    }
-  }, 250, {
-    trailing: true,
-  });
-
   render () {
-    const { height } = this.state;
-
     return (
-      <div ref={this.setRef} className='picture-in-picture-placeholder' style={{ height }} role='button' tabIndex={0} onClick={this.handleClick}>
+      <div className='picture-in-picture-placeholder' role='button' tabIndex={0} onClick={this.handleClick}>
         <Icon id='window-restore' />
         <FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' />
       </div>

app/javascript/mastodon/components/status.jsx

@@ -411,7 +411,7 @@ class Status extends ImmutablePureComponent {
     }
 
     if (pictureInPicture.get('inUse')) {
-      media = <PictureInPicturePlaceholder width={this.props.cachedMediaWidth} />;
+      media = <PictureInPicturePlaceholder />;
     } else if (status.get('media_attachments').size > 0) {
       if (this.props.muted) {
         media = (
@@ -460,12 +460,9 @@ class Status extends ImmutablePureComponent {
                 src={attachment.get('url')}
                 alt={attachment.get('description')}
                 lang={status.get('language')}
-                width={this.props.cachedMediaWidth}
-                height={110}
                 inline
                 sensitive={status.get('sensitive')}
                 onOpenVideo={this.handleOpenVideo}
-                cacheWidth={this.props.cacheMediaWidth}
                 deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
                 visible={this.state.showMedia}
                 onToggleVisibility={this.handleToggleMediaVisibility}
@@ -498,8 +495,6 @@ class Status extends ImmutablePureComponent {
           onOpenMedia={this.handleOpenMedia}
           card={status.get('card')}
           compact
-          cacheWidth={this.props.cacheMediaWidth}
-          defaultWidth={this.props.cachedMediaWidth}
           sensitive={status.get('sensitive')}
         />
       );