From d048b3940dec291f0d036d3474c9c514a4db7b20 Mon Sep 17 00:00:00 2001
From: Skythrew <mael.guerin@outlook.fr>
Date: Mon, 19 Sep 2022 07:45:13 +0200
Subject: [PATCH 1/5] feature: frontend link embed spoiler implementation

---
 .../common/messaging/embed/Embed.module.scss  | 19 ++++++++++++++++++-
 .../common/messaging/embed/Embed.tsx          | 11 ++++++++++-
 .../common/messaging/embed/EmbedSpoiler.tsx   | 11 +++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/components/common/messaging/embed/EmbedSpoiler.tsx

diff --git a/src/components/common/messaging/embed/Embed.module.scss b/src/components/common/messaging/embed/Embed.module.scss
index 5175f73a..b87963bb 100644
--- a/src/components/common/messaging/embed/Embed.module.scss
+++ b/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,20 @@
         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;
+}
+
+.spoiler_title{
+    text-align: center;
+    width:100%;
+}
\ No newline at end of file
diff --git a/src/components/common/messaging/embed/Embed.tsx b/src/components/common/messaging/embed/Embed.tsx
index 3d04c44f..a27ef259 100644
--- a/src/components/common/messaging/embed/Embed.tsx
+++ b/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>
             );
         }
diff --git a/src/components/common/messaging/embed/EmbedSpoiler.tsx b/src/components/common/messaging/embed/EmbedSpoiler.tsx
new file mode 100644
index 00000000..6d8464f6
--- /dev/null
+++ b/src/components/common/messaging/embed/EmbedSpoiler.tsx
@@ -0,0 +1,11 @@
+import classNames from "classnames";
+import { API } from "revolt.js";
+import styles from "./Embed.module.scss";
+
+export default function EmbedSpoiler(){
+    return (
+    <div className={classNames(styles.spoiler_container)}>
+        <h1 className={classNames(styles.spoiler_title)}>SPOILER</h1>
+    </div>
+    );
+}
\ No newline at end of file

From fc347599a5fb8636ea539f04723139725a341e90 Mon Sep 17 00:00:00 2001
From: Skythrew <mael.guerin@outlook.fr>
Date: Mon, 19 Sep 2022 07:46:49 +0200
Subject: [PATCH 2/5] fix: added spoiler type check

---
 src/components/common/messaging/embed/Embed.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/common/messaging/embed/Embed.tsx b/src/components/common/messaging/embed/Embed.tsx
index a27ef259..2b6dfa92 100644
--- a/src/components/common/messaging/embed/Embed.tsx
+++ b/src/components/common/messaging/embed/Embed.tsx
@@ -45,6 +45,8 @@ export default function Embed({ embed }: Props) {
         return { width, height };
     }
 
+    if(typeof embed.spoiler == 'undefined')
+        embed.spoiler = false;
     switch (embed.type) {
         case "Text":
         case "Website": {

From 1b3c4590605135f59195ff7086526b4d45b12aed Mon Sep 17 00:00:00 2001
From: Skythrew <76571984+Skythrew@users.noreply.github.com>
Date: Mon, 19 Sep 2022 18:18:03 +0200
Subject: [PATCH 3/5] Update Embed.tsx

---
 src/components/common/messaging/embed/Embed.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/common/messaging/embed/Embed.tsx b/src/components/common/messaging/embed/Embed.tsx
index 2b6dfa92..a27ef259 100644
--- a/src/components/common/messaging/embed/Embed.tsx
+++ b/src/components/common/messaging/embed/Embed.tsx
@@ -45,8 +45,6 @@ export default function Embed({ embed }: Props) {
         return { width, height };
     }
 
-    if(typeof embed.spoiler == 'undefined')
-        embed.spoiler = false;
     switch (embed.type) {
         case "Text":
         case "Website": {

From 7221f233b19e8bdd99084bd2cb5d6044f104565c Mon Sep 17 00:00:00 2001
From: Skythrew <76571984+Skythrew@users.noreply.github.com>
Date: Mon, 19 Sep 2022 18:18:21 +0200
Subject: [PATCH 4/5] Update Embed.module.scss

---
 .../common/messaging/embed/Embed.module.scss           | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/common/messaging/embed/Embed.module.scss b/src/components/common/messaging/embed/Embed.module.scss
index b87963bb..68c53e7a 100644
--- a/src/components/common/messaging/embed/Embed.module.scss
+++ b/src/components/common/messaging/embed/Embed.module.scss
@@ -146,9 +146,13 @@
     top:0;
     left:0;
     cursor:pointer;
+
+    &.hidden {
+        display: none;
+    }
 }
 
-.spoiler_title{
+.spoiler_title {
     text-align: center;
-    width:100%;
-}
\ No newline at end of file
+    margin-inline: auto;
+}

From e48bc58a8d7edff5d5df8b16080f099c2509848e Mon Sep 17 00:00:00 2001
From: Skythrew <76571984+Skythrew@users.noreply.github.com>
Date: Mon, 19 Sep 2022 18:18:40 +0200
Subject: [PATCH 5/5] Update EmbedSpoiler.tsx

---
 src/components/common/messaging/embed/EmbedSpoiler.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/common/messaging/embed/EmbedSpoiler.tsx b/src/components/common/messaging/embed/EmbedSpoiler.tsx
index 6d8464f6..82a71a56 100644
--- a/src/components/common/messaging/embed/EmbedSpoiler.tsx
+++ b/src/components/common/messaging/embed/EmbedSpoiler.tsx
@@ -1,11 +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)}>
+    <div className={classNames(styles.spoiler_container, visible ? null : styles.hidden)} onClick={() => setVisible(!visible)}>
         <h1 className={classNames(styles.spoiler_title)}>SPOILER</h1>
     </div>
     );
-}
\ No newline at end of file
+}