Add spoilers back.

src/components/common/messaging/attachments/Attachment.tsx

@@ -2,7 +2,6 @@ import { Attachment as AttachmentRJS } from "revolt.js/dist/api/objects";
 
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
-import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
 import { useIntermediate } from "../../../../context/intermediate/Intermediate";
@@ -11,6 +10,7 @@ import { AppContext } from "../../../../context/revoltjs/RevoltClient";
 import AttachmentActions from "./AttachmentActions";
 import TextFile from "./TextFile";
 import { SizedGrid } from "./Grid";
+import Spoiler from "./Spoiler";
 
 interface Props {
     attachment: AttachmentRJS;
@@ -24,7 +24,6 @@ export default function Attachment({ attachment, hasContent }: Props) {
     const { openScreen } = useIntermediate();
     const { filename, metadata } = attachment;
     const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
-    const [loaded, setLoaded] = useState(false);
 
     const url = client.generateFileURL(
         attachment,
@@ -36,7 +35,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
         case "Image": {
             return (
                 <SizedGrid width={metadata.width} height={metadata.height}
-                    className={classNames({ [styles.margin]: hasContent })}>
+                    className={classNames({ [styles.margin]: hasContent, spoiler })}>
                     <img src={url} alt={filename}
                         className={styles.image}
                         loading="lazy"
@@ -46,15 +45,18 @@ export default function Attachment({ attachment, hasContent }: Props) {
                         onMouseDown={(ev) =>
                             ev.button === 1 && window.open(url, "_blank")
                         } />
+                    { spoiler && <Spoiler set={setSpoiler} /> }
                 </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}>
+                    <SizedGrid width={metadata.width} height={metadata.height}
+                        className={classNames({ spoiler })}>
                         <video src={url} alt={filename}
                             controls
                             loading="lazy"
@@ -64,58 +66,12 @@ export default function Attachment({ attachment, hasContent }: Props) {
                                 ev.button === 1 && window.open(url, "_blank")
                             }
                         />
+                        { spoiler && <Spoiler set={setSpoiler} /> }
                     </SizedGrid>
                 </div>
             )
         }
 
-
-
-
-            /*return (
-                <div
-                    className={styles.container}
-                    onClick={() => spoiler && setSpoiler(false)}>
-                    {spoiler && (
-                        <div className={styles.overflow}>
-                            <span>
-                                <Text id="app.main.channel.misc.spoiler_attachment" />
-                            </span>
-                        </div>
-                    )}
-                    <img
-                        src={url}
-                        alt={filename}
-                        width={metadata.width}
-                        height={metadata.height}
-                        loading="lazy"
-                        data-has-content={hasContent}
-                        data-spoiler={spoiler}
-                        className={classNames(
-                            styles.attachment,
-                            styles.image,
-                            loaded && styles.loaded,
-                            metadata.width > metadata.height
-                                ? styles.long
-                                : styles.tall,
-                        )}
-                        style={{
-                            "--width": metadata.width,
-                            "--height": metadata.height,
-                            "--width-px": metadata.width + "px",
-                            "--height-px": metadata.height + "px",
-                        }}
-                        onClick={() =>
-                            openScreen({ id: "image_viewer", attachment })
-                        }
-                        onMouseDown={(ev) =>
-                            ev.button === 1 && window.open(url, "_blank")
-                        }
-                        onLoad={() => setLoaded(true)}
-                    />
-                </div>
-            );
-        }*/
         case "Audio": {
             return (
                 <div
@@ -126,48 +82,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                 </div>
             );
         }
-        /*case "Video": {
+        
-            return (
-                <div
-                    className={styles.container}
-                    onClick={() => spoiler && setSpoiler(false)}>
-                    {spoiler && (
-                        <div className={styles.overflow}>
-                            <span>
-                                <Text id="app.main.channel.misc.spoiler_attachment" />
-                            </span>
-                        </div>
-                    )}
-                    <div
-                        data-spoiler={spoiler}
-                        data-has-content={hasContent}
-                        className={classNames(styles.attachment, styles.video)}>
-                        <AttachmentActions attachment={attachment} />
-                        <video
-                            src={url}
-                            width={metadata.width}
-                            height={metadata.height}
-                            loading="lazy"
-                            className={classNames(
-                                metadata.width > metadata.height
-                                    ? styles.long
-                                    : styles.tall,
-                            )}
-                            style={{
-                                "--width": metadata.width,
-                                "--height": metadata.height,
-                                "--width-px": metadata.width + "px",
-                                "--height-px": metadata.height + "px",
-                            }}
-                            controls
-                            onMouseDown={(ev) =>
-                                ev.button === 1 && window.open(url, "_blank")
-                            }
-                        />
-                    </div>
-                </div>
-            );
-        }*/
         case "Text": {
             return (
                 <div
@@ -178,6 +93,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                 </div>
             );
         }
+
         default: {
             return (
                 <div

src/components/common/messaging/attachments/Grid.tsx

@@ -3,6 +3,8 @@ import { Children } from "../../../../types/Preact";
 
 const Grid = styled.div`
     display: grid;
+    overflow: hidden;
+
     max-width: min(var(--attachment-max-width), 100%, var(--width));
     max-height: min(var(--attachment-max-height), var(--height));
     aspect-ratio: var(--aspect-ratio);
@@ -19,6 +21,14 @@ const Grid = styled.div`
 
         grid-area: 1 / 1;
     }
+
+    &.spoiler {
+        img, video {
+            filter: blur(44px);
+        }
+        
+        border-radius: var(--border-radius);
+    }
 `;
 
 export default Grid;

src/components/common/messaging/attachments/Spoiler.tsx

@@ -0,0 +1,33 @@
+import { Text } from "preact-i18n";
+import styled from "styled-components"
+
+const Base = styled.div`
+    display: grid;
+    place-items: center;
+
+    z-index: 1;
+    grid-area: 1 / 1;
+
+    cursor: pointer;
+    user-select: none;
+    text-transform: uppercase;
+
+    span {
+        padding: 8px;
+        color: var(--foreground);
+        background: var(--primary-background);
+        border-radius: calc(var(--border-radius) * 4);
+    }
+`;
+
+interface Props {
+    set: (v: boolean) => void
+}
+
+export default function Spoiler({ set }: Props) {
+    return (
+        <Base onClick={() => set(false)}>
+            <span><Text id="app.main.channel.misc.spoiler_attachment" /></span>
+        </Base>
+    )
+}