Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 02:12:38 +01:00
Code Issues Releases Activity

image loading stuff

Browse Source
This commit is contained in:
Puyodead1 2023-09-24 13:12:05 -04:00
parent 58b8bd38d1
commit df7ec32d89
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
5 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Avatar.tsx
View File

@ -31,6 +31,7 @@ function Avatar(props: Props) {
src={props.user?.avatarUrl ?? app.account?.avatarUrl}
width={props.size ?? 32}
height={props.size ?? 32}
loading="eager"
/>
</Wrapper>
);

1
src/components/GuildItem.tsx
View File

@ -123,6 +123,7 @@ function GuildItem({ guild, active }: Props) {
src={REST.makeCDNUrl(CDNRoutes.guildIcon(guild.id, guild?.icon, ImageFormat.PNG))}
width={48}
height={48}
loading="lazy"
/>
) : (
<span

2
src/components/SidebarAction.tsx
View File

@ -69,7 +69,7 @@ function SidebarAction(props: Props) {
active={props.active}
useGreenColorScheme={props.useGreenColorScheme}
>
{props.image && <img {...props.image} />}
{props.image && <img {...props.image} loading="lazy" />}
{props.icon && (
<Icon
{...props.icon}

4
src/components/messaging/MessageAttachment.tsx
View File

@ -47,7 +47,9 @@ export default function MessageAttachment({ attachment, contextMenuItems, maxWid
maxWidth,
maxHeight,
);
finalElement = <Image src={url} alt={attachment.filename} width={scaledWidth} height={scaledHeight} />;
finalElement = (
<Image src={url} alt={attachment.filename} width={scaledWidth} height={scaledHeight} loading="lazy" />
);
} else if (details.isVideo && details.isEmbeddable) {
finalElement = <Video attachment={attachment} />;
} else if (details.isAudio && details.isEmbeddable) {

17
src/components/modals/AttachmentPreviewModal.tsx
View File

@ -1,10 +1,7 @@
import { APIAttachment } from "@spacebarchat/spacebar-api-types/v9";
import { calculateImageRatio, calculateScaledDimensions } from "../../utils/Message";
import { Modal } from "./ModalComponents";
import { AnimatedModalProps } from "./ModalRenderer";
const SCALE_FACTOR = 3.5;
interface Props extends AnimatedModalProps {
attachment: APIAttachment;
}
@ -12,11 +9,6 @@ interface Props extends AnimatedModalProps {
function AttachmentPreviewModal(props: Props) {
const width = props.attachment.width ?? 0;
const height = props.attachment.height ?? 0;
const maxWidth = 400 * SCALE_FACTOR;
const maxHeight = 300 * SCALE_FACTOR;
const ratio = calculateImageRatio(width, height, maxWidth, maxHeight);
const { scaledWidth, scaledHeight } = calculateScaledDimensions(width, height, ratio, maxWidth, maxHeight);
return (
<Modal
@ -28,7 +20,14 @@ function AttachmentPreviewModal(props: Props) {
}}
{...props}
>
<img src={props.attachment.url} width={scaledWidth} height={scaledHeight} />
<div
style={{
maxWidth: "100vw",
maxHeight: "100vh",
}}
>
<img src={props.attachment.url} width={width} height={height} loading="eager" />
</div>
</Modal>
);
}