Use blurhash images when media is hidden (#40864)

app/javascript/mastodon/components/status/attachments.module.scss

@@ -22,6 +22,10 @@
     border-radius: var(--radius-round);
     padding-inline: var(--space-2);
   }
+
+  :global(.spoiler-button) {
+    display: none;
+  }
 }
 
 .galleryContent {
@@ -39,6 +43,12 @@
   }
 }
 
+.galleryHideActions {
+  :global(.media-gallery__actions) {
+    display: none;
+  }
+}
+
 .cardMedia {
   > :global(.status-card) {
     margin-top: 0;

app/javascript/mastodon/components/status/attachments.tsx

@@ -128,6 +128,7 @@ const MediaAttachments: React.FC<{
   language,
   attachment,
   defaultPosterUrl,
+  restAttachments,
 }) => {
   const description =
     attachment.translation?.description ?? attachment.description;
@@ -222,7 +223,8 @@ const MediaAttachments: React.FC<{
 
   let aspectRatio = '3 / 2';
   if (
-    isMediaAttachmentOfType(attachment, 'image') ||
+    (isMediaAttachmentOfType(attachment, 'image') &&
+      restAttachments.length === 0) ||
     isMediaAttachmentOfType(attachment, 'video') ||
     isMediaAttachmentOfType(attachment, 'gifv')
   ) {
@@ -263,6 +265,7 @@ const MediaAttachments: React.FC<{
           deployPictureInPicture={handleDeployPictureInPicture}
           blurhash={attachment.blurhash}
           onToggleVisibility={handleToggleMediaVisibility}
+          visible={showMedia}
         />
       </MediaAttachmentWrapper>
     );
@@ -283,19 +286,21 @@ const MediaAttachments: React.FC<{
           onOpenVideo={handleOpenVideo}
           deployPictureInPicture={handleDeployPictureInPicture}
           onToggleVisibility={handleToggleMediaVisibility}
+          visible={showMedia}
         />
       </MediaAttachmentWrapper>
     );
   }
 
   return (
-    <MediaAttachmentWrapper {...wrapperProps} type='media'>
+    <MediaAttachmentWrapper {...wrapperProps} type='gallery'>
       <MediaGallery
         media={immutableAttachments}
         lang={language}
         height={110}
         onOpenMedia={handleOpenMedia}
         onToggleVisibility={handleToggleMediaVisibility}
+        visible={showMedia}
       />
     </MediaAttachmentWrapper>
   );
@@ -305,7 +310,7 @@ const MediaAttachmentWrapper: React.FC<{
   sensitive: boolean;
   visible: boolean;
   onToggle: () => void;
-  type?: 'media' | 'video' | 'audio';
+  type?: 'gallery' | 'video' | 'audio';
   children: React.ReactNode;
   aspectRatio: string;
   mediaFilters: string[];
@@ -313,7 +318,7 @@ const MediaAttachmentWrapper: React.FC<{
 }> = ({
   sensitive,
   visible,
-  type = 'media',
+  type = 'gallery',
   onToggle,
   children,
   aspectRatio,
@@ -376,6 +381,7 @@ const MediaAttachmentWrapper: React.FC<{
           classes.galleryContent,
           !visible && mainClasses.hasContentWarning,
           !visible && classes.galleryHideButtons,
+          showSpoiler && classes.galleryHideActions,
         )}
       >
         <Suspense