From 036e9a330ad52f569f1b133245d7b4e5cb6bd79a Mon Sep 17 00:00:00 2001
From: bree <me@bree.dev>
Date: Fri, 2 Jul 2021 22:40:53 -0400
Subject: [PATCH] replace js image scaling with css for message attachments
---
.../attachments/Attachment.module.scss | 8 ++++
.../messaging/attachments/Attachment.tsx | 38 +------------------
2 files changed, 10 insertions(+), 36 deletions(-)
diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss
index 4f23a89..92c3545 100644
--- a/src/components/common/messaging/attachments/Attachment.module.scss
+++ b/src/components/common/messaging/attachments/Attachment.module.scss
@@ -2,6 +2,14 @@
border-radius: 6px;
margin: .125rem 0 .125rem;
+ width: auto;
+ height: auto;
+
+ max-height: 640px;
+ max-width: min(480px, 100%);
+
+ object-fit: contain;
+
&[data-spoiler="true"] {
filter: blur(30px);
pointer-events: none;
diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx
index eb144eb..342a598 100644
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -15,55 +15,26 @@ interface Props {
}
const MAX_ATTACHMENT_WIDTH = 480;
-const MAX_ATTACHMENT_HEIGHT = 640;
export default function Attachment({ attachment, hasContent }: Props) {
const client = useContext(AppContext);
const { openScreen } = useIntermediate();
const { filename, metadata } = attachment;
const [ spoiler, setSpoiler ] = useState(filename.startsWith("SPOILER_"));
- const maxWidth = Math.min(useContext(MessageAreaWidthContext), MAX_ATTACHMENT_WIDTH);
const url = client.generateFileURL(attachment, { width: MAX_ATTACHMENT_WIDTH * 1.5 }, true);
- let width = 0,
- height = 0;
-
- if (metadata.type === 'Image' || metadata.type === 'Video') {
- let limitingWidth = Math.min(
- maxWidth,
- metadata.width
- );
- let limitingHeight = Math.min(
- MAX_ATTACHMENT_HEIGHT,
- metadata.height
- );
-
- // Calculate smallest possible WxH.
- width = Math.min(
- limitingWidth,
- limitingHeight * (metadata.width / metadata.height)
- );
-
- height = Math.min(
- limitingHeight,
- limitingWidth * (metadata.height / metadata.width)
- );
- }
switch (metadata.type) {
case "Image": {
return (
<div
- style={{ width }}
className={styles.container}
onClick={() => spoiler && setSpoiler(false)}
>
{spoiler && (
<div className={styles.overflow}>
- <div style={{ width, height }}>
- <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
- </div>
+ <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
)}
<img
@@ -79,7 +50,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
ev.button === 1 &&
window.open(url, "_blank")
}
- style={{ width, height }}
/>
</div>
);
@@ -102,13 +72,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
onClick={() => spoiler && setSpoiler(false)}>
{spoiler && (
<div className={styles.overflow}>
- <div style={{ width, height }}>
- <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
- </div>
+ <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
</div>
)}
<div
- style={{ width }}
data-spoiler={spoiler}
data-has-content={hasContent}
className={classNames(styles.attachment, styles.video)}
@@ -117,7 +84,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
<video
src={url}
controls
- style={{ width, height }}
onMouseDown={ev =>
ev.button === 1 &&
window.open(url, "_blank")
--
GitLab