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

rework image scaling to work better on mobile

Browse Source
This commit is contained in:
Puyodead1 2023-12-24 15:47:48 -05:00
parent a9f4aa1ba5
commit 0dbb5a7fe2
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
2 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,29 +2,45 @@ import { APIAttachment } from "@spacebarchat/spacebar-api-types/v9";
import styled from "styled-components";
import { modalController } from "../../controllers/modals";
import useLogger from "../../hooks/useLogger";
import { calculateImageRatio, calculateScaledDimensions } from "../../utils/Message";
import { getFileDetails, zoomFit } from "../../utils/Utils";
import Audio from "../media/Audio";
import File from "../media/File";
import Video from "../media/Video";
const MAX_ATTACHMENT_HEIGHT = 350;
function adjustDimensions(width: number, height: number): { adjustedWidth: number; adjustedHeight: number } {
const aspectRatio = width / height;
let adjustedWidth: number = width * aspectRatio;
let adjustedHeight: number = height * aspectRatio;
// Ensure the adjusted height does not exceed the maximum height
if (adjustedHeight > MAX_ATTACHMENT_HEIGHT) {
const scale = MAX_ATTACHMENT_HEIGHT / adjustedHeight;
adjustedWidth *= scale;
adjustedHeight = MAX_ATTACHMENT_HEIGHT;
}
return { adjustedWidth: Math.floor(adjustedWidth), adjustedHeight: Math.floor(adjustedHeight) };
}
const Attachment = styled.div<{ withPointer?: boolean }>`
cursor: ${(props) => (props.withPointer ? "pointer" : "default")};
padding: 2px 0;
width: min-content;
`;
const Image = styled.img`
border-radius: 4px;
width: 100%;
height: auto;
`;
interface AttachmentProps {
attachment: APIAttachment;
maxWidth?: number;
maxHeight?: number;
}
export default function MessageAttachment({ attachment, maxWidth, maxHeight }: AttachmentProps) {
export default function MessageAttachment({ attachment }: AttachmentProps) {
const logger = useLogger("MessageAttachment");
const url = attachment.proxy_url && attachment.proxy_url.length > 0 ? attachment.proxy_url : attachment.url;
@ -32,16 +48,17 @@ export default function MessageAttachment({ attachment, maxWidth, maxHeight }: A
const details = getFileDetails(attachment);
let finalElement: JSX.Element = <></>;
if (details.isImage && details.isEmbeddable) {
const ratio = calculateImageRatio(attachment.width!, attachment.height!, maxWidth, maxHeight);
const { scaledWidth, scaledHeight } = calculateScaledDimensions(
attachment.width!,
attachment.height!,
ratio,
maxWidth,
maxHeight,
);
const width = attachment.width!;
const height = attachment.height!;
const { adjustedWidth, adjustedHeight } = adjustDimensions(width, height);
finalElement = (
<Image src={url} alt={attachment.filename} width={scaledWidth} height={scaledHeight} loading="lazy" />
<Image
src={url}
alt={attachment.filename}
loading="lazy"
style={{ maxWidth: adjustedWidth, maxHeight: adjustedHeight }}
/>
);
} else if (details.isVideo && details.isEmbeddable) {
finalElement = <Video attachment={attachment} />;

1
src/components/messaging/MessageList.tsx
View File

@ -100,6 +100,7 @@ function MessageList({ guild, channel }: Props) {
display: "flex",
flexDirection: "column-reverse",
marginBottom: 30,
overflow: "hidden",
}} // to put endMessage and loader to the top.
hasMore={hasMore}
inverse={true}