Merge e48bc58a8d into eb4670ec43

src/components/common/messaging/embed/Embed.module.scss

@@ -1,6 +1,6 @@
 .embed {
     margin: 0.2em 0;
-
+    position: relative;
     iframe {
         border: none;
         border-radius: var(--border-radius);
@@ -135,3 +135,24 @@
         grid-area: open;
     }
 }
+
+.spoiler_container {
+    position: absolute;
+    height: 100%;
+    width:100%;
+    background:var(--primary-header);
+    display: flex;
+    align-items: center;
+    top:0;
+    left:0;
+    cursor:pointer;
+
+    &.hidden {
+        display: none;
+    }
+}
+
+.spoiler_title {
+    text-align: center;
+    margin-inline: auto;
+}

src/components/common/messaging/embed/Embed.tsx

@@ -10,6 +10,7 @@ import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/Me
 import Markdown from "../../../markdown/Markdown";
 import Attachment from "../attachments/Attachment";
 import EmbedMedia from "./EmbedMedia";
+import EmbedSpoiler from "./EmbedSpoiler";
 
 interface Props {
     embed: API.Embed;
@@ -104,7 +105,7 @@ export default function Embed({ embed }: Props) {
 
             return (
                 <div
-                    className={classNames(styles.embed, styles.website)}
+                    className={classNames(styles.embed, styles.website, embed.spoiler ? styles.spoiler : null)}
                     style={{
                         borderInlineStartColor:
                             embed.colour ?? "var(--tertiary-background)",
@@ -162,6 +163,10 @@ export default function Embed({ embed }: Props) {
                                 <Attachment attachment={embed.media!} />
                             ) : (
                                 <EmbedMedia embed={embed} height={height} />
+                                
+                            ))}
+                            {(embed.spoiler && (
+                                    <EmbedSpoiler/>
                             ))}
                     </div>
                     {!largeMedia && embed.type === "Website" && (
@@ -175,8 +180,12 @@ export default function Embed({ embed }: Props) {
                                 }
                                 height={height}
                             />
+                            {embed.spoiler && (
+                            <EmbedSpoiler/>
+                        )}
                         </div>
                     )}
+                    
                 </div>
             );
         }

src/components/common/messaging/embed/EmbedSpoiler.tsx

@@ -0,0 +1,16 @@
+import classNames from "classnames";
+import { useState } from "preact/hooks";
+import { API } from "revolt.js";
+import styles from "./Embed.module.scss";
+
+
+export default function EmbedSpoiler(){
+    
+    const [visible, setVisible] = useState(true);
+
+    return (
+    <div className={classNames(styles.spoiler_container, visible ? null : styles.hidden)} onClick={() => setVisible(!visible)}>
+        <h1 className={classNames(styles.spoiler_title)}>SPOILER</h1>
+    </div>
+    );
+}