mirror of
https://github.com/revoltchat/revite.git
synced 2025-01-12 15:31:26 -05:00
replace js image scaling with css for message attachments
This commit is contained in:
parent
ee5e558e9f
commit
036e9a330a
2 changed files with 10 additions and 36 deletions
|
@ -2,6 +2,14 @@
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
margin: .125rem 0 .125rem;
|
margin: .125rem 0 .125rem;
|
||||||
|
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
max-height: 640px;
|
||||||
|
max-width: min(480px, 100%);
|
||||||
|
|
||||||
|
object-fit: contain;
|
||||||
|
|
||||||
&[data-spoiler="true"] {
|
&[data-spoiler="true"] {
|
||||||
filter: blur(30px);
|
filter: blur(30px);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
|
@ -15,55 +15,26 @@ interface Props {
|
||||||
}
|
}
|
||||||
|
|
||||||
const MAX_ATTACHMENT_WIDTH = 480;
|
const MAX_ATTACHMENT_WIDTH = 480;
|
||||||
const MAX_ATTACHMENT_HEIGHT = 640;
|
|
||||||
|
|
||||||
export default function Attachment({ attachment, hasContent }: Props) {
|
export default function Attachment({ attachment, hasContent }: Props) {
|
||||||
const client = useContext(AppContext);
|
const client = useContext(AppContext);
|
||||||
const { openScreen } = useIntermediate();
|
const { openScreen } = useIntermediate();
|
||||||
const { filename, metadata } = attachment;
|
const { filename, metadata } = attachment;
|
||||||
const [ spoiler, setSpoiler ] = useState(filename.startsWith("SPOILER_"));
|
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);
|
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) {
|
switch (metadata.type) {
|
||||||
case "Image": {
|
case "Image": {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{ width }}
|
|
||||||
className={styles.container}
|
className={styles.container}
|
||||||
onClick={() => spoiler && setSpoiler(false)}
|
onClick={() => spoiler && setSpoiler(false)}
|
||||||
>
|
>
|
||||||
{spoiler && (
|
{spoiler && (
|
||||||
<div className={styles.overflow}>
|
<div className={styles.overflow}>
|
||||||
<div style={{ width, height }}>
|
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
|
||||||
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<img
|
<img
|
||||||
|
@ -79,7 +50,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
|
||||||
ev.button === 1 &&
|
ev.button === 1 &&
|
||||||
window.open(url, "_blank")
|
window.open(url, "_blank")
|
||||||
}
|
}
|
||||||
style={{ width, height }}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -102,13 +72,10 @@ export default function Attachment({ attachment, hasContent }: Props) {
|
||||||
onClick={() => spoiler && setSpoiler(false)}>
|
onClick={() => spoiler && setSpoiler(false)}>
|
||||||
{spoiler && (
|
{spoiler && (
|
||||||
<div className={styles.overflow}>
|
<div className={styles.overflow}>
|
||||||
<div style={{ width, height }}>
|
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
|
||||||
<span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
style={{ width }}
|
|
||||||
data-spoiler={spoiler}
|
data-spoiler={spoiler}
|
||||||
data-has-content={hasContent}
|
data-has-content={hasContent}
|
||||||
className={classNames(styles.attachment, styles.video)}
|
className={classNames(styles.attachment, styles.video)}
|
||||||
|
@ -117,7 +84,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
|
||||||
<video
|
<video
|
||||||
src={url}
|
src={url}
|
||||||
controls
|
controls
|
||||||
style={{ width, height }}
|
|
||||||
onMouseDown={ev =>
|
onMouseDown={ev =>
|
||||||
ev.button === 1 &&
|
ev.button === 1 &&
|
||||||
window.open(url, "_blank")
|
window.open(url, "_blank")
|
||||||
|
|
Loading…
Reference in a new issue