From 69249d1746ccd6002f7be8dc203e6e07f7841c15 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 3 Jun 2026 01:13:18 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20media=20gallery=20thumbnails=20=E2=80=94?=
 =?UTF-8?q?=20skip=20auth=20URL,=20handle=20encrypted=20media?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use useAuthentication=false for thumbnail requests: the v1 authenticated
  URL adds allow_redirect=true which Synapse rejects with 400
- Encrypted events (content.file set) show a lock+filename placeholder
  since server can't thumbnail encrypted blobs
- Unencrypted thumbnails add onError handler to hide broken images gracefully

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/features/room/MediaGallery.tsx | 61 +++++++++++++++++++-------
 1 file changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/app/features/room/MediaGallery.tsx b/src/app/features/room/MediaGallery.tsx
index 0b5ffa055..01b1f7bb6 100644
--- a/src/app/features/room/MediaGallery.tsx
+++ b/src/app/features/room/MediaGallery.tsx
@@ -211,36 +211,65 @@ export function MediaGallery({ room, onClose }: MediaGalleryProps) {
               >
                 {events.map((mEvent) => {
                   const content = mEvent.getContent();
+                  const isEncrypted = !!content.file;
                   const mxcUrl: string | undefined = content.url ?? content.file?.url;
                   if (!mxcUrl) return null;
-                  const thumbUrl =
-                    mxcUrlToHttp(mx, mxcUrl, useAuthentication, 120, 120, 'crop') ?? '';
                   const body: string = content.body ?? '';
+                  // Use unauthenticated thumbnail URL — the v1 authenticated endpoint adds
+                  // allow_redirect=true which Synapse rejects with 400.
+                  const thumbUrl = isEncrypted
+                    ? null
+                    : (mxcUrlToHttp(mx, mxcUrl, false, 120, 120, 'crop') ?? null);
+                  const fullUrl = mxcUrlToHttp(mx, mxcUrl, useAuthentication) ?? '#';
                   return (
                     <a
                       key={mEvent.getId()}
-                      href={mxcUrlToHttp(mx, mxcUrl, useAuthentication) ?? '#'}
-                      target="_blank"
+                      href={isEncrypted ? '#' : fullUrl}
+                      target={isEncrypted ? undefined : '_blank'}
                       rel="noreferrer"
                       style={{
-                        display: 'block',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                         aspectRatio: '1',
                         overflow: 'hidden',
                         borderRadius: config.radii.R300,
-                        background: 'var(--bg-surface)',
+                        background: 'var(--bg-surface-low)',
+                        cursor: isEncrypted ? 'default' : 'pointer',
                       }}
                       title={body}
                     >
-                      <img
-                        src={thumbUrl}
-                        alt={body}
-                        style={{
-                          width: '100%',
-                          height: '100%',
-                          objectFit: 'cover',
-                          display: 'block',
-                        }}
-                      />
+                      {thumbUrl ? (
+                        <img
+                          src={thumbUrl}
+                          alt={body}
+                          onError={(e) => {
+                            (e.currentTarget as HTMLImageElement).style.display = 'none';
+                          }}
+                          style={{
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                            display: 'block',
+                          }}
+                        />
+                      ) : (
+                        <Box
+                          direction="Column"
+                          alignItems="Center"
+                          gap="100"
+                          style={{ padding: config.space.S100 }}
+                        >
+                          <Icon src={isEncrypted ? Icons.Lock : Icons.Photo} size="400" />
+                          <Text
+                            size="T200"
+                            truncate
+                            style={{ maxWidth: '100%', textAlign: 'center', opacity: 0.7 }}
+                          >
+                            {body || (isEncrypted ? 'Encrypted' : 'Image')}
+                          </Text>
+                        </Box>
+                      )}
                     </a>
                   );
                 })}