From 842b86096dbe3067a02e3f16809e2368eaeddce9 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Mon, 5 Oct 2026 13:42:37 +0000
Subject: [PATCH] Use blurhash images when media is hidden (#40864)

---
 .../components/status/attachments.module.scss      | 10 ++++++++++
 .../mastodon/components/status/attachments.tsx     | 14 ++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/components/status/attachments.module.scss b/app/javascript/mastodon/components/status/attachments.module.scss
index 77cc534bb6b..9bd4034e14b 100644
--- a/app/javascript/mastodon/components/status/attachments.module.scss
+++ b/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;
diff --git a/app/javascript/mastodon/components/status/attachments.tsx b/app/javascript/mastodon/components/status/attachments.tsx
index ce8be474009..5eef8fde219 100644
--- a/app/javascript/mastodon/components/status/attachments.tsx
+++ b/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