Fix some image/video scroll jumps (#8182)

* Fix some image/video scroll jumps

* Fix aspect ratio formatting

* Fix videos not being responsive to timeline width

src/components/views/messages/MImageBody.tsx

@@ -27,7 +27,7 @@ import MFileBody from './MFileBody';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
-import InlineSpinner from '../elements/InlineSpinner';
+import Spinner from '../elements/Spinner';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { Media, mediaFromContent } from "../../../customisations/Media";
 import { BLURHASH_FIELD, createThumbnail } from "../../../ContentMessages";
@@ -427,15 +427,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                     className="mx_MImageBody_thumbnail"
                     src={thumbUrl}
                     ref={this.image}
-                    // Force the image to be the full size of the container, even if the
-                    // pixel size is smaller. The problem here is that we don't know what
-                    // thumbnail size the HS is going to give us, but we have to commit to
-                    // a container size immediately and not change it when the image loads
-                    // or we'll get a scroll jump (or have to leave blank space).
-                    // This will obviously result in an upscaled image which will be a bit
-                    // blurry. The best fix would be for the HS to advertise what size thumbnails
-                    // it guarantees to produce.
-                    style={{ height: '100%' }}
                     alt={content.body}
                     onError={this.onImageError}
                     onLoad={this.onImageLoad}
@@ -456,44 +447,32 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
 
         const classes = classNames({
-            'mx_MImageBody_thumbnail': true,
-            'mx_MImageBody_thumbnail--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
+            'mx_MImageBody_placeholder': true,
+            'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
         });
 
-        // This has incredibly broken types.
-        const C = CSSTransition as any;
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
                 <SwitchTransition mode="out-in">
-                    <C
+                    <CSSTransition
                         classNames="mx_rtg--fade"
                         key={`img-${showPlaceholder}`}
                         timeout={300}
                     >
-                        { /* This weirdly looking div is necessary here, otherwise SwitchTransition fails */ }
-                        <div>
-                            { showPlaceholder && <div
-                                className={classes}
-                                style={{
-                                    // Constrain width here so that spinner appears central to the loaded thumbnail
-                                    maxWidth,
-                                    maxHeight,
-                                    aspectRatio: `${infoWidth}/${infoHeight}`,
-                                }}
-                            >
-                                { placeholder }
-                            </div> }
-                        </div>
-                    </C>
+                        { showPlaceholder ? <div className={classes}>
+                            { placeholder }
+                        </div> : <></> /* Transition always expects a child */ }
+                    </CSSTransition>
                 </SwitchTransition>
 
-                <div style={{
-                    height: '100%',
-                }}>
+                <div style={{ maxHeight, maxWidth }}>
                     { img }
                     { gifLabel }
                 </div>
 
+                { /* HACK: This div fills out space while the image loads, to prevent scroll jumps */ }
+                { !this.state.imgLoaded && <div style={{ height: maxHeight, width: maxWidth }} /> }
+
                 { this.state.hover && this.getTooltip() }
             </div>
         );
@@ -514,14 +493,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
         if (blurhash) {
             if (this.state.placeholder === Placeholder.NoImage) {
-                return <div className="mx_no-image-placeholder" style={{ width: width, height: height }} />;
+                return null;
             } else if (this.state.placeholder === Placeholder.Blurhash) {
                 return <Blurhash className="mx_Blurhash" hash={blurhash} width={width} height={height} />;
             }
         }
-        return (
-            <InlineSpinner w={32} h={32} />
-        );
+        return <Spinner w={32} h={32} />;
     }
 
     // Overidden by MStickerBody

src/components/views/messages/MVideoBody.tsx

@@ -228,6 +228,18 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         const content = this.props.mxEvent.getContent();
         const autoplay = SettingsStore.getValue("autoplayVideo");
 
+        let aspectRatio;
+        if (content.info?.w && content.info?.h) {
+            aspectRatio = `${content.info.w}/${content.info.h}`;
+        }
+        const { w: maxWidth, h: maxHeight } = suggestedVideoSize(
+            SettingsStore.getValue("Images.size") as ImageSize,
+            { w: content.info?.w, h: content.info?.h },
+        );
+
+        // HACK: This div fills out space while the video loads, to prevent scroll jumps
+        const spaceFiller = <div style={{ width: maxWidth, height: maxHeight }} />;
+
         if (this.state.error !== null) {
             return (
                 <span className="mx_MVideoBody">
@@ -241,21 +253,17 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         if (!this.props.forExport && content.file !== undefined && this.state.decryptedUrl === null && autoplay) {
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
-            // For now add an img tag with a spinner.
+            // For now show a spinner.
             return (
                 <span className="mx_MVideoBody">
-                    <div className="mx_MImageBody_thumbnail mx_MImageBody_thumbnail_spinner">
+                    <div className="mx_MVideoBody_container" style={{ maxWidth, maxHeight, aspectRatio }}>
                         <InlineSpinner />
                     </div>
+                    { spaceFiller }
                 </span>
             );
         }
 
-        const { w: maxWidth, h: maxHeight } = suggestedVideoSize(
-            SettingsStore.getValue("Images.size") as ImageSize,
-            { w: content.info?.w, h: content.info?.h },
-        );
-
         const contentUrl = this.getContentUrl();
         const thumbUrl = this.getThumbUrl();
         let poster = null;
@@ -268,19 +276,21 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         const fileBody = this.getFileBody();
         return (
             <span className="mx_MVideoBody">
-                <video
-                    className="mx_MVideoBody"
-                    ref={this.videoRef}
-                    src={contentUrl}
-                    title={content.body}
-                    controls
-                    preload={preload}
-                    muted={autoplay}
-                    autoPlay={autoplay}
-                    style={{ maxHeight, maxWidth }}
-                    poster={poster}
-                    onPlay={this.videoOnPlay}
-                />
+                <div className="mx_MVideoBody_container" style={{ maxWidth, maxHeight, aspectRatio }}>
+                    <video
+                        className="mx_MVideoBody"
+                        ref={this.videoRef}
+                        src={contentUrl}
+                        title={content.body}
+                        controls
+                        preload={preload}
+                        muted={autoplay}
+                        autoPlay={autoplay}
+                        poster={poster}
+                        onPlay={this.videoOnPlay}
+                    />
+                    { spaceFiller }
+                </div>
                 { fileBody }
             </span>
         );