From 0af820c87457a8fafc0e572f241b71ddb1772e1a Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Wed, 23 Oct 2024 04:22:11 +0200
Subject: [PATCH] Fix ImageZoom

Also fixes the image modal being off centre when having the plugin enabled

Co-Authored-By: sadan <117494111+sadan4@users.noreply.github.com>
---
 src/plugins/imageZoom/index.tsx               | 17 +++------------
 src/plugins/imageZoom/styles.css              |  9 --------
 src/plugins/serverInfo/index.tsx              |  2 ++
 .../spotifyControls/PlayerComponent.tsx       |  6 +-----
 src/utils/discord.css                         | 21 +++++++++++++++++++
 src/utils/discord.tsx                         |  1 +
 6 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/plugins/imageZoom/index.tsx b/src/plugins/imageZoom/index.tsx
index da01f1a79..adb0ab220 100644
--- a/src/plugins/imageZoom/index.tsx
+++ b/src/plugins/imageZoom/index.tsx
@@ -156,14 +156,10 @@ export default definePlugin({
 
     patches: [
         {
-            find: "Messages.OPEN_IN_BROWSER",
+            find: ".contain,SCALE_DOWN:",
             replacement: {
-                // there are 2 image thingies. one for carosuel and one for the single image.
-                // so thats why i added global flag.
-                // also idk if this patch is good, should it be more specific?
-                // https://regex101.com/r/xfvNvV/1
-                match: /return.{1,200}\.wrapper.{1,200}src:\i,/g,
-                replace: `$&id: '${ELEMENT_ID}',`
+                match: /\.slide,\i\),/g,
+                replace: `$&id:"${ELEMENT_ID}",`
             }
         },
 
@@ -185,13 +181,6 @@ export default definePlugin({
                     replace: "$&$self.unMountMagnifier();"
                 }
             ]
-        },
-        {
-            find: ".carouselModal",
-            replacement: {
-                match: /(?<=\.carouselModal.{0,100}onClick:)\i,/,
-                replace: "()=>{},"
-            }
         }
     ],
 
diff --git a/src/plugins/imageZoom/styles.css b/src/plugins/imageZoom/styles.css
index c3776d90e..63a51e297 100644
--- a/src/plugins/imageZoom/styles.css
+++ b/src/plugins/imageZoom/styles.css
@@ -23,12 +23,3 @@
 
     /* https://googlechrome.github.io/samples/image-rendering-pixelated/index.html */
 }
-
-/* make the carousel take up less space so we can click the backdrop and exit out of it */
-[class*="modalCarouselWrapper_"] {
-    top: 0 !important;
-}
-
-[class*="carouselModal_"] {
-    height: 0 !important;
-}
diff --git a/src/plugins/serverInfo/index.tsx b/src/plugins/serverInfo/index.tsx
index be3172f01..a6dd6edf9 100644
--- a/src/plugins/serverInfo/index.tsx
+++ b/src/plugins/serverInfo/index.tsx
@@ -30,7 +30,9 @@ export default definePlugin({
     name: "ServerInfo",
     description: "Allows you to view info about a server",
     authors: [Devs.Ven, Devs.Nuckyz],
+    dependencies: ["DynamicImageModalAPI"],
     tags: ["guild", "info", "ServerProfile"],
+
     contextMenus: {
         "guild-context": Patch,
         "guild-header-popout": Patch
diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx
index 6eb901b54..41e09c160 100644
--- a/src/plugins/spotifyControls/PlayerComponent.tsx
+++ b/src/plugins/spotifyControls/PlayerComponent.tsx
@@ -229,11 +229,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
                 id="view-cover"
                 label="View Album Cover"
                 // trolley
-                action={() => openImageModal({
-                    url: track.album.image.url,
-                    height: 512,
-                    width: 512
-                })}
+                action={() => openImageModal(track.album.image)}
                 icon={ImageIcon}
             />
             <Menu.MenuControlItem
diff --git a/src/utils/discord.css b/src/utils/discord.css
index 9b03bf7b7..a7f95fbe6 100644
--- a/src/utils/discord.css
+++ b/src/utils/discord.css
@@ -1,3 +1,24 @@
 .vc-position-inherit {
     position: inherit;
 }
+
+/**
+ * copy pasted from discord css. not really webpack-findable since it's the only class in the module
+**/
+
+.vc-image-modal {
+    background: transparent!important;
+    box-shadow: none!important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0
+}
+
+@media(width <= 485px) {
+    .vc-image-modal {
+        display:relative;
+        overflow: visible;
+        overflow: initial
+    }
+}
diff --git a/src/utils/discord.tsx b/src/utils/discord.tsx
index 099a1e53e..08de22ccd 100644
--- a/src/utils/discord.tsx
+++ b/src/utils/discord.tsx
@@ -117,6 +117,7 @@ export function openImageModal(props: Omit<ImageModalItem, "type">): string {
     return openModal(modalProps => (
         <ImageModal
             {...modalProps}
+            className="vc-image-modal"
             fit="vc-position-inherit"
             items={[{
                 type: "IMAGE",