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] 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