fix(web): restore known-dimension reservation in ImageEmbed without letterbox fallback
Restores the dimension reservation reverted in dae6f2d, scoped to
the embed.width && embed.height case only. No fallback aspect-ratio
when dims are null — that was the source of the dark letterbox bars
on Tenor/Klipy GIFs and OG-less images that triggered the revert.
The server-side probe in embedResolver.ts:196 already populates dims
for all image-type embeds; this change makes the client honor them.
This commit is contained in:
@@ -9,17 +9,23 @@ interface ImageEmbedProps {
|
|||||||
export function ImageEmbed({ embed }: ImageEmbedProps) {
|
export function ImageEmbed({ embed }: ImageEmbedProps) {
|
||||||
const openImagePreview = useUIStore((s) => s.openImagePreview);
|
const openImagePreview = useUIStore((s) => s.openImagePreview);
|
||||||
const imageUrl = embed.image ?? embed.url;
|
const imageUrl = embed.image ?? embed.url;
|
||||||
|
const { width, height } = embed;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mt-2 max-w-[400px]">
|
<div className="mt-2 max-w-fit">
|
||||||
|
<div
|
||||||
|
className="relative rounded-lg overflow-hidden"
|
||||||
|
style={width && height ? { aspectRatio: `${width}/${height}`, maxWidth: Math.min(width, 400), maxHeight: 300 } : undefined}
|
||||||
|
>
|
||||||
<img
|
<img
|
||||||
src={imageUrl}
|
src={imageUrl}
|
||||||
alt={embed.title ?? ''}
|
alt={embed.title ?? ''}
|
||||||
className="max-w-full max-h-[300px] rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
|
className="w-full h-full max-w-[400px] max-h-[300px] object-contain rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
referrerPolicy="no-referrer"
|
referrerPolicy="no-referrer"
|
||||||
onClick={() => openImagePreview(imageUrl)}
|
onClick={() => openImagePreview(imageUrl)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user