From a1879586ffbda70b8ee3e6ffd3a59b0353dcae65 Mon Sep 17 00:00:00 2001 From: Tuur Martens Date: Thu, 18 Apr 2024 14:15:46 +0200 Subject: [PATCH 1/6] fix: video embeds' proxy_url was not checked for null (#52) --- src/Content/Embed/EmbedVideo.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Content/Embed/EmbedVideo.tsx b/src/Content/Embed/EmbedVideo.tsx index 071183c..f75b74e 100644 --- a/src/Content/Embed/EmbedVideo.tsx +++ b/src/Content/Embed/EmbedVideo.tsx @@ -57,11 +57,11 @@ interface EmbedVideoProps extends Required> { thumbnail?: APIEmbedThumbnail["url"]; url: APIEmbedVideo["url"] | undefined; - proxyUrl: APIEmbedVideo["proxy_url"] | undefined; + proxyUrl: APIEmbedVideo["proxy_url"] | undefined | null; } function EmbedVideo(props: EmbedVideoProps) { - if (props.proxyUrl !== undefined) + if (props.proxyUrl) return ( Date: Fri, 26 Apr 2024 18:52:46 +0200 Subject: [PATCH 2/6] v2.3.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3084e46..cf36254 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@widgetbot/message-renderer", - "version": "v2.2.0", + "version": "v2.3.1", "description": "", "module": "dist/message-renderer.mjs", "files": [ From f70147484c68f10a798c41d96569d1f052a237d5 Mon Sep 17 00:00:00 2001 From: JohnyTheCarrot Date: Wed, 15 May 2024 09:19:59 +0200 Subject: [PATCH 3/6] fix: fix reaction style inaccuracy --- src/Message/Reactions/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Message/Reactions/style.ts b/src/Message/Reactions/style.ts index d12d704..caffc4b 100644 --- a/src/Message/Reactions/style.ts +++ b/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, From b8a95fa794bfdcfaffaf87b3d624c4a18a9650ae Mon Sep 17 00:00:00 2001 From: tylergeorges Date: Fri, 4 Oct 2024 12:52:42 -0400 Subject: [PATCH 4/6] fix: embed thumbnail not resizing --- src/Content/Attachment/style.ts | 4 ++++ src/Content/Embed/EmbeddedImage.tsx | 13 +++++++++++-- src/Content/Embed/index.tsx | 12 ++++++++---- src/Content/Embed/style.ts | 17 ++++++++++++++--- src/Stitches/stitches.config.tsx | 1 + 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/src/Content/Attachment/style.ts b/src/Content/Attachment/style.ts index 56a2ebb..ec54bb3 100644 --- a/src/Content/Attachment/style.ts +++ b/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({ diff --git a/src/Content/Embed/EmbeddedImage.tsx b/src/Content/Embed/EmbeddedImage.tsx index 60434d2..54de98b 100644 --- a/src/Content/Embed/EmbeddedImage.tsx +++ b/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 { embedImage: APIEmbedImage; @@ -14,14 +15,22 @@ interface Props extends ComponentProps { 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 ( embedImageOnClick?.(embedImage)} - width={width} - height={height} + width={actualWidth} + height={actualHeight} /> ); } diff --git a/src/Content/Embed/index.tsx b/src/Content/Embed/index.tsx index 5b2d9e1..7268a2e 100644 --- a/src/Content/Embed/index.tsx +++ b/src/Content/Embed/index.tsx @@ -5,7 +5,7 @@ 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 useSize from "./useSize"; import EmbedVideo from "./EmbedVideo"; import React, { useMemo } from "react"; import type { APIEmbed, APIEmbedImage } from "discord-api-types/v10"; @@ -13,6 +13,7 @@ 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 +39,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 +141,11 @@ function Embed({ embed, images }: EmbedProps) { {(images === undefined || images?.length === 0) && embed.image && ( )} {images && images.length > 0 && ( diff --git a/src/Content/Embed/style.ts b/src/Content/Embed/style.ts index ed1d6f2..adb11ce 100644 --- a/src/Content/Embed/style.ts +++ b/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,13 @@ export const Image = styled.withConfig({ componentId: commonComponentId, })("img", { borderRadius: 3, + flexShrink: 0, + gridColumnStart: "2", + maxWidth: "100%", + height: "auto", + + // height: "auto", + // height: "auto", variants: { clickable: { @@ -279,6 +288,8 @@ export const MediaEmbed = styled.withConfig({ })("img", { borderRadius: 3, cursor: "pointer", + maxWidth: "100%", + height: "auto", }); export const VideoIframe = styled.withConfig({ diff --git a/src/Stitches/stitches.config.tsx b/src/Stitches/stitches.config.tsx index 259bbe3..b45a7e9 100644 --- a/src/Stitches/stitches.config.tsx +++ b/src/Stitches/stitches.config.tsx @@ -74,6 +74,7 @@ const stitches = createStitches({ messageLeftPadding: "72px", threadButton: "34px", messageTypeIcon: "16px", + embedThumbnail: "80px", }, borderWidths: { spines: "2px", From 1dcf77de09e4def40c8134bf4946dd13b4cd9e98 Mon Sep 17 00:00:00 2001 From: tylergeorges Date: Tue, 8 Oct 2024 14:04:30 -0400 Subject: [PATCH 5/6] refactor: remove commented code --- src/Content/Embed/style.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/Content/Embed/style.ts b/src/Content/Embed/style.ts index adb11ce..267b411 100644 --- a/src/Content/Embed/style.ts +++ b/src/Content/Embed/style.ts @@ -198,9 +198,6 @@ export const Image = styled.withConfig({ gridColumnStart: "2", maxWidth: "100%", height: "auto", - - // height: "auto", - // height: "auto", variants: { clickable: { From 9f8c31ee802e5a912e35e6641465f7e35ed6e010 Mon Sep 17 00:00:00 2001 From: Mason Rogers <26467584+mason-rogers@users.noreply.github.com> Date: Tue, 22 Oct 2024 19:12:17 +0100 Subject: [PATCH 6/6] Update src/Content/Embed/index.tsx --- src/Content/Embed/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Content/Embed/index.tsx b/src/Content/Embed/index.tsx index 7268a2e..6ac4c9d 100644 --- a/src/Content/Embed/index.tsx +++ b/src/Content/Embed/index.tsx @@ -5,7 +5,6 @@ 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";