HMC/handmade-revolt
2
0
Fork 0
forked from abner/for-legacy-web
Code Pull Requests Actions Activity

Fix attachment scaling.

Browse Source
This commit is contained in:
Paul
2021-07-10 15:21:35 +01:00
parent 92fed40e40
commit 9846262e8b
9 changed files with 164 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/common/messaging/attachments/Attachment.tsx
View File

@@ -8,9 +8,9 @@ import { useContext, useState } from "preact/hooks";
import { useIntermediate } from "../../../../context/intermediate/Intermediate";
import { AppContext } from "../../../../context/revoltjs/RevoltClient";
import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
import AttachmentActions from "./AttachmentActions";
import TextFile from "./TextFile";
import { SizedGrid } from "./Grid";
interface Props {
attachment: AttachmentRJS;
@@ -35,6 +35,44 @@ export default function Attachment({ attachment, hasContent }: Props) {
switch (metadata.type) {
case "Image": {
return (
<SizedGrid width={metadata.width} height={metadata.height}
className={classNames({ [styles.margin]: hasContent })}>
<img src={url} alt={filename}
className={styles.image}
loading="lazy"
onClick={() =>
openScreen({ id: "image_viewer", attachment })
}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
} />
</SizedGrid>
)
}
case "Video": {
return (
<div className={classNames(styles.container, { [styles.margin]: hasContent })}
style={{ '--width': metadata.width + 'px' }}>
<AttachmentActions attachment={attachment} />
<SizedGrid width={metadata.width} height={metadata.height}>
<video src={url} alt={filename}
controls
loading="lazy"
width={metadata.width}
height={metadata.height}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}
/>
</SizedGrid>
</div>
)
}
/*return (
<div
className={styles.container}
onClick={() => spoiler && setSpoiler(false)}>
@@ -51,8 +89,8 @@ export default function Attachment({ attachment, hasContent }: Props) {
width={metadata.width}
height={metadata.height}
loading="lazy"
data-spoiler={spoiler}
data-has-content={hasContent}
data-spoiler={spoiler}
className={classNames(
styles.attachment,
styles.image,
@@ -70,14 +108,14 @@ export default function Attachment({ attachment, hasContent }: Props) {
onClick={() =>
openScreen({ id: "image_viewer", attachment })
}
onLoad={() => setLoaded(true)}
onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank")
}
onLoad={() => setLoaded(true)}
/>
</div>
);
}
}*/
case "Audio": {
return (
<div
@@ -88,7 +126,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
</div>
);
}
case "Video": {
/*case "Video": {
return (
<div
className={styles.container}
@@ -129,7 +167,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
</div>
</div>
);
}
}*/
case "Text": {
return (
<div