Improve timeline scroll, media layout, avatars, and emoji coverage.

Remember room scroll position across switches, reserve image/video heights from Matrix dimensions, cache authenticated media blobs for avatars, restore jumbo emoji-only messages, and extend emoji font unicode-range for Unicode 15 glyphs.

src/app/components/message/content/ImageContent.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import { Badge, Box, Button, Chip, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
 import { Icon, Icons } from '../../icons';
 import classNames from 'classnames';
-import { BlurhashCanvas } from 'react-blurhash';
+import { Blurhash } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { IImageInfo, MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../../types/matrix/common';
@@ -17,6 +17,7 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
 import { validBlurHash } from '../../../utils/blurHash';
 import { getCurrentAccessToken } from '../../../utils/auth';
+import { setMediaDimensions, getMediaBlurHash, getMediaDimensions, rememberMediaBlurHash } from '../../../state/mediaDimensionCache';
 
 /**
  * Fetches media with authentication headers and returns a blob URL.
@@ -68,7 +69,7 @@ type RenderImageProps = {
   alt: string;
   title: string;
   src: string;
-  onLoad: () => void;
+  onLoad: (event?: React.SyntheticEvent<HTMLImageElement>) => void;
   onError: () => void;
   onClick: () => void;
   tabIndex: number;
@@ -105,12 +106,23 @@ export const ImageContent = as<'div', ImageContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const eventBlurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const cachedBlurHash = getMediaBlurHash(url);
+    const blurHash = eventBlurHash ?? cachedBlurHash;
+    const cachedDims = getMediaDimensions(url);
+    const blurResolutionX = 32;
+    const ratioW = info?.w || cachedDims?.w;
+    const ratioH = info?.h || cachedDims?.h;
+    const blurResolutionY =
+      ratioW && ratioH && ratioW > 0
+        ? Math.max(1, Math.round(blurResolutionX * (ratioH / ratioW)))
+        : 32;
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
+    const [showPlaceholder, setShowPlaceholder] = useState(true);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -139,6 +151,7 @@ export const ImageContent = as<'div', ImageContentProps>(
     const handleError = () => {
       setLoad(false);
       setError(true);
+      setShowPlaceholder(true);
     };
 
     const handleRetry = () => {
@@ -150,8 +163,34 @@ export const ImageContent = as<'div', ImageContentProps>(
       if (autoPlay) loadSrc();
     }, [autoPlay, loadSrc]);
 
+    // Keep blurhash under the fade, then remove it once the image is fully opaque.
+    useEffect(() => {
+      if (!load) {
+        setShowPlaceholder(true);
+        return undefined;
+      }
+      const timer = window.setTimeout(() => setShowPlaceholder(false), 540);
+      return () => window.clearTimeout(timer);
+    }, [load]);
+
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        {showPlaceholder &&
+          (typeof blurHash === 'string' ? (
+            <div className={css.BlurhashPlaceholder}>
+              <Blurhash
+                hash={blurHash}
+                width="100%"
+                height="100%"
+                resolutionX={blurResolutionX}
+                resolutionY={blurResolutionY}
+                punch={1.2}
+                style={{ display: 'block' }}
+              />
+            </div>
+          ) : (
+            <div className={css.MediaSkeleton} />
+          ))}
         {srcState.status === AsyncStatus.Success && (
           <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
             <OverlayCenter>
@@ -177,15 +216,6 @@ export const ImageContent = as<'div', ImageContentProps>(
             </OverlayCenter>
           </Overlay>
         )}
-        {typeof blurHash === 'string' && !load && (
-          <BlurhashCanvas
-            style={{ width: '100%', height: '100%' }}
-            width={32}
-            height={32}
-            hash={blurHash}
-            punch={1}
-          />
-        )}
         {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (
           <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
             <Button
@@ -201,12 +231,26 @@ export const ImageContent = as<'div', ImageContentProps>(
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
-          <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
+          <Box
+            className={classNames(
+              css.AbsoluteContainer,
+              css.MediaFadeIn,
+              load && css.MediaFadeInLoaded,
+              blurred && css.Blur
+            )}
+          >
             {renderImage({
               alt: body,
               title: body,
               src: srcState.data,
-              onLoad: handleLoad,
+              onLoad: (e?: React.SyntheticEvent<HTMLImageElement>) => {
+                const img = e?.currentTarget;
+                if (img?.naturalWidth && img?.naturalHeight) {
+                  setMediaDimensions(url, img.naturalWidth, img.naturalHeight);
+                }
+                if (img) rememberMediaBlurHash(url, img);
+                handleLoad();
+              },
               onError: handleError,
               onClick: () => setViewer(true),
               tabIndex: 0,
@@ -248,7 +292,8 @@ export const ImageContent = as<'div', ImageContentProps>(
         )}
         {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
           !load &&
-          !blurred && (
+          !blurred &&
+          typeof blurHash !== 'string' && (
             <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
               <Spinner variant="Secondary" />
             </Box>