From ca27fbf44dfb4211dda1b75d12d702ff56fd28da Mon Sep 17 00:00:00 2001
From: GnoxNahte <gnoxnahte.dev@gmail.com>
Date: Wed, 6 Mar 2024 15:35:40 +0800
Subject: [PATCH] Add back reddit auto resize but with conditions

Only resize if there's only 1 reddit embed. Or the user can opt to resize automatically in the settings.
---
 embeds/reddit.ts | 95 ++++++++++++++++++++++++++++--------------------
 styles.css       |  8 +++-
 2 files changed, 63 insertions(+), 40 deletions(-)

diff --git a/embeds/reddit.ts b/embeds/reddit.ts
index b3c34e4..04c3500 100644
--- a/embeds/reddit.ts
+++ b/embeds/reddit.ts
@@ -1,15 +1,14 @@
-import { PluginSettings } from "main";
 import { EmbedBase } from "./embedBase";
 
 export class RedditEmbed extends EmbedBase {
     name = "Reddit";
     regex = new RegExp(/reddit.com/);
 
-    // onload(): void {
-    //     window.addEventListener("message", this.listenForRedditResize);
-    // }
+    onload(): void {
+        window.addEventListener("message", this.listenForRedditResize);
+    }
 
-    createEmbed(url: string, settings: Readonly<PluginSettings>): HTMLElement {
+    createEmbed(url: string): HTMLElement {
         const regexMatch = url.match(this.regex);
         // Shouldn't happen since got test before. But in case
         if (regexMatch === null)
@@ -19,49 +18,67 @@ export class RedditEmbed extends EmbedBase {
 
         // Creating the iframe
         const iframe = createEl("iframe");
+        
+        iframe.classList.add(this.autoEmbedCssClass, "reddit-embed");
+        iframe.id += "reddit-" + postId[1];
 
         url = url.replace("www.reddit.com", "reddit.com"); // Remove "www"
         url = url.replace("reddit.com", "embed.reddit.com"); // Add embed subdomain
-        iframe.src = url;
+        
+        if (this.plugin.settings.darkMode)
+        {
+            url += (url.contains('?') ? "&" : "?") + "theme=dark";
+        }
 
-        iframe.classList.add(this.autoEmbedCssClass, "reddit-embed");
-        iframe.id += "reddit-" + postId[1];
+        iframe.src = url;
+        
+        // TODO: Dynamically set iframe height:
+        // Methods:
+        //      - Listen to reddit's postmessage, reddit sends out a postmessage containing:
+        //          {
+        //              type: "resize.embed"
+        //              data: [height value]
+        //          }
+        //          But it doesn't send the post id, so I'm not sure which iframe to set it to. 
+        //      - Get height from reddit api? Not sure how to do
+        //      - Get content type from reddit api? Main heights are: 
+        //          - short text: 240px 
+        //          - long text (has a show more dropdown): 316px 
+        //          - picture / video: 739px 
+
+        // iframe.style.height="unset";
 
         return iframe;
     }
 
-    // onunload() : void {
-    //     window.removeEventListener("message", this.listenForRedditResize);
-    // }
+    onunload() : void {
+        window.removeEventListener("message", this.listenForRedditResize);
+    }
 
-    // listenForRedditResize(e: MessageEvent) {
-    //     if (e.origin !== "https://embed.reddit.com")
-    //         return;
-    //     console.log("Path: " + e.composedPath());
-    //     const data = JSON.parse(e.data);
+    listenForRedditResize(e: MessageEvent) {
+        if (e.origin !== "https://embed.reddit.com")
+            return;
 
-    //     // Only continue if the method is for resizing
-    //     if (data.type !== "resize.embed")
-    //         return;
-
-    //     const iframes = document.getElementsByClassName("reddit-embed") as HTMLCollectionOf<HTMLIFrameElement>;
-    //     for (let i = 0; i < iframes.length; i++) {
-    //         const iframe = iframes[i];
-    //         // console.log("height:" + iframe.style.height);
-    //         if (iframe.style.height === "unset")
-    //         {
-    //             console.log("Set: " + iframe.id + " to " + data.data);
-    //             iframe.style.height = data.data + "px";
-    //             break;
-    //         }
-    //     }
-
-    //     // const iframe = document.getElementById("twitter-" + params["data"]["tweet_id"]) as HTMLIFrameElement;
-    //     // console.log("Tweet-id: " + params["data"]["tweet_id"]);
-    //     // if (iframe === null)
-    //     //     return;
+        const data = JSON.parse(e.data);
         
-    //     // iframe.style.height = params["height"] + "px";
-    //     // iframe.style.width = params["width"] + "px";
-    // }
+        // Only continue if the method is for resizing
+        if (data.type !== "resize.embed")
+        return;
+
+        const iframes = document.getElementsByClassName("reddit-embed") as HTMLCollectionOf<HTMLIFrameElement>;
+        if (iframes.length <= 1 || this.plugin.settings.redditAutoSize)
+        {
+            for (let i = 0; i < iframes.length; i++) {
+                const iframe = iframes[i];
+                // console.log("height:" + iframe.style.height);
+                // console.log("Set: " + iframe.id + " to " + data.data);
+                if (iframe.style.height === "")
+                {
+                    iframe.style.height = data.data + "px";
+                    break;
+                }
+                // console.log("Height: " + iframe.style.height);
+            }
+        }
+    }
 } 
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 657fc02..c80c1ee 100644
--- a/styles.css
+++ b/styles.css
@@ -60,6 +60,12 @@ iframe.largest.auto-embed {
 }
 
 .auto-embed.reddit-embed {
+    min-height: 240px;
     width: 100%;
-    height: 500px;
+    /* height: 500px; */
+}
+
+.auto-embed.codepen-embed {
+    width: 100%;
+    min-height: 300px;
 }
\ No newline at end of file