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

@@ -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: "()=>{},"
-            }
         }
     ],
 

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;
-}

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

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

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
+    }
+}

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",