Port attachments and embeds.

2026-03-07 09:25:27 +00:00 · 2021-06-20 22:09:18 +01:00
parent a24bcf9f86
commit d1bff98635
9 changed files with 781 additions and 2 deletions
--- a/src/components/common/messaging/attachments/Attachment.tsx
+++ b/src/components/common/messaging/attachments/Attachment.tsx
@@ -0,0 +1,152 @@
+import TextFile from "./TextFile";
+import { Text } from "preact-i18n";
+import classNames from "classnames";
+import styles from "./Attachment.module.scss";
+import AttachmentActions from "./AttachmentActions";
+import { useContext, useState } from "preact/hooks";
+import { AppContext } from "../../../../context/revoltjs/RevoltClient";
+import { Attachment as AttachmentRJS } from "revolt.js/dist/api/objects";
+import { useIntermediate } from "../../../../context/intermediate/Intermediate";
+import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea";
+
+interface Props {
+    attachment: AttachmentRJS;
+    hasContent: boolean;
+}
+
+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>
+                        </div>
+                    )}
+                    <img
+                        src={url}
+                        alt={filename}
+                        data-spoiler={spoiler}
+                        data-has-content={hasContent}
+                        className={classNames(styles.attachment, styles.image)}
+                        onClick={() =>
+                            openScreen({ id: "image_viewer", attachment })
+                        }
+                        onMouseDown={ev =>
+                            ev.button === 1 &&
+                            window.open(url, "_blank")
+                        }
+                        style={{ width, height }}
+                    />
+                </div>
+            );
+        }
+        case "Audio": {
+            return (
+                <div
+                    className={classNames(styles.attachment, styles.audio)}
+                    data-has-content={hasContent}
+                >
+                    <AttachmentActions attachment={attachment} />
+                    <audio src={url} controls />
+                </div>
+            );
+        }
+        case "Video": {
+            return (
+                <div
+                    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>
+                        </div>
+                    )}
+                    <div
+                        style={{ width }}
+                        data-spoiler={spoiler}
+                        data-has-content={hasContent}
+                        className={classNames(styles.attachment, styles.video)}
+                    >
+                        <AttachmentActions attachment={attachment} />
+                        <video
+                            src={url}
+                            controls
+                            style={{ width, height }}
+                            onMouseDown={ev =>
+                                ev.button === 1 &&
+                                window.open(url, "_blank")
+                            }
+                        />
+                    </div>
+                </div>
+            );
+        }
+        case 'Text': {
+            return (
+                <div
+                    className={classNames(styles.attachment, styles.text)}
+                    data-has-content={hasContent}
+                >
+                    <TextFile attachment={attachment} />
+                    <AttachmentActions attachment={attachment} />
+                </div>
+            );
+        }
+        default: {
+            return (
+                <div
+                    className={classNames(styles.attachment, styles.file)}
+                    data-has-content={hasContent}
+                >
+                    <AttachmentActions attachment={attachment} />
+                </div>
+            );
+        }
+    }
+}