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 ( - {body} + {thumbUrl ? ( + {body} { + (e.currentTarget as HTMLImageElement).style.display = 'none'; + }} + style={{ + width: '100%', + height: '100%', + objectFit: 'cover', + display: 'block', + }} + /> + ) : ( + + + + {body || (isEncrypted ? 'Encrypted' : 'Image')} + + + )} ); })}