Fix message embed image resizing (#58)

* fix: video embeds' proxy_url was not checked for null (#52)

* v2.3.1

* fix: fix reaction style inaccuracy

* fix: embed thumbnail not resizing

* refactor: remove commented code

* Update src/Content/Embed/index.tsx

---------

Co-authored-by: Tuur Martens <tuurmartens4@gmail.com>
Co-authored-by: Mason Rogers <26467584+mason-rogers@users.noreply.github.com>

Author: 3 people

src/Content/Attachment/style.ts

@@ -12,6 +12,8 @@ export const ImageAttachment = styled.withConfig({
   displayName: "image-attachment",
   componentId: commonComponentId,
 })(LazyLoadImage, {
+  maxWidth: "100%",
+  height: "auto",
   variants: {
     clickable: {
       true: {
@@ -30,6 +32,8 @@ export const LazyImagePlaceholder = styled.withConfig({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
+  maxWidth: "100%",
+  height: "auto",
 });
 
 export const VideoAttachmentContainer = styled.withConfig({

src/Content/Embed/EmbeddedImage.tsx

@@ -3,6 +3,7 @@ import type { ComponentProps } from "react";
 import React from "react";
 import { useConfig } from "../../core/ConfigContext";
 import type { APIEmbedImage } from "discord-api-types/v10";
+import useSize from "src/Content/Attachment/useSize";
 
 interface Props extends ComponentProps<typeof Styles.Image> {
   embedImage: APIEmbedImage;
@@ -14,14 +15,22 @@ interface Props extends ComponentProps<typeof Styles.Image> {
 function EmbeddedImage({ width, height, embedImage, ...rest }: Props) {
   const { embedImageOnClick } = useConfig();
 
+  const { width: widthEmbed, height: heightEmbed } = useSize(
+    width ?? 1,
+    height ?? 1
+  );
+
+  const actualWidth = widthEmbed ?? width;
+  const actualHeight = heightEmbed ?? height;
+
   return (
     <Styles.Image
       {...rest}
       src={embedImage.proxy_url ?? embedImage.url}
       clickable={embedImageOnClick !== undefined}
       onClick={() => embedImageOnClick?.(embedImage)}
-      width={width}
-      height={height}
+      width={actualWidth}
+      height={actualHeight}
     />
   );
 }

src/Content/Embed/index.tsx

@@ -5,14 +5,14 @@ import * as Styles from "./style";
 import { colorIntToRgba } from "../../utils/colorIntToCss";
 import moment from "moment";
 import { LinkMarkdown, parseEmbedTitle } from "../../markdown/render";
-import useSize from "./useSize";
 import EmbedVideo from "./EmbedVideo";
 import React, { useMemo } from "react";
 import type { APIEmbed, APIEmbedImage } from "discord-api-types/v10";
 import { EmbedType } from "discord-api-types/v10";
 import EmbeddedImage from "./EmbeddedImage";
 import ExternalLink from "../../ExternalLink";
 import { error } from "../../utils/error";
+import useSize from "src/Content/Embed/useSize";
 
 export interface EmbedProps {
   embed: APIEmbed;
@@ -38,7 +38,7 @@ function Embed({ embed, images }: EmbedProps) {
       ? colorIntToRgba(embed.color)
       : undefined;
 
-  const { width: widthImage, height: heightImage } = useSize(
+  const { width: widthImage } = useSize(
     embed.type,
     embed.image,
     "EmbedImage",
@@ -140,8 +140,11 @@ function Embed({ embed, images }: EmbedProps) {
       {(images === undefined || images?.length === 0) && embed.image && (
         <EmbeddedImage
           embedImage={embed.image}
-          width={widthImage ?? undefined}
-          height={heightImage ?? undefined}
+          withMargin
+          image={embed.image}
+          width={embed.image.width}
+          height={embed.image.height}
+          type="EmbedImage"
         />
       )}
       {images && images.length > 0 && (

src/Content/Embed/style.ts

@@ -21,7 +21,6 @@ export const Embed = styled.withConfig({
   display: "flex",
   flexDirection: "column",
   maxWidth: 520,
-
   variants: {
     thin: {
       true: {
@@ -35,9 +34,10 @@ export const ContentAndThumbnail = styled.withConfig({
   displayName: "embed-content-and-thumbnail",
   componentId: commonComponentId,
 })("div", {
-  display: "flex",
+  display: "grid",
+  gridAutoColumns: "auto",
   gap: theme.space.xxl,
-
+  maxWidth: "100%",
   variants: {
     hasLargeThumbnail: {
       true: {
@@ -54,6 +54,8 @@ export const Content = styled.withConfig({
 })("div", {
   display: "grid",
   gap: theme.space.large,
+  gridColumnStart: "1",
+  gridColumnEnd: "1",
 });
 
 export const Provider = styled.withConfig({
@@ -192,6 +194,10 @@ export const Image = styled.withConfig({
   componentId: commonComponentId,
 })("img", {
   borderRadius: 3,
+  flexShrink: 0,
+  gridColumnStart: "2",
+  maxWidth: "100%",
+  height: "auto",
 
   variants: {
     clickable: {
@@ -279,6 +285,8 @@ export const MediaEmbed = styled.withConfig({
 })("img", {
   borderRadius: 3,
   cursor: "pointer",
+  maxWidth: "100%",
+  height: "auto",
 });
 
 export const VideoIframe = styled.withConfig({

src/Message/Reactions/style.ts

@@ -39,7 +39,7 @@ export const Reaction = styled.withConfig({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
-  padding: `${theme.space.small} ${theme.space.medium}`,
+  padding: `${theme.space.xs} ${theme.space.medium}`,
   borderRadius: 8,
   cursor: "not-allowed",
   backgroundColor: theme.colors.backgroundSecondary,

src/Stitches/stitches.config.tsx

@@ -74,6 +74,7 @@ const stitches = createStitches({
       messageLeftPadding: "72px",
       threadButton: "34px",
       messageTypeIcon: "16px",
+      embedThumbnail: "80px",
     },
     borderWidths: {
       spines: "2px",