feat(ImagePreview): MaxMediaSixe (#61)

src/equicordplugins/imagePreview/index.ts

@@ -114,6 +114,7 @@ function loadImagePreview(url: string) {
 
     if (!allowed) return;
 
+    const [maxWidth, maxHeight] = settings.store.defaultMaxSize === "0" ? [Infinity, Infinity] : settings.store.defaultMaxSize.split("x").map(Number);
     currentPreviewType = mimeType.includes("video") ? "video" : "image";
 
     const preview = document.createElement("div");
@@ -142,6 +143,22 @@ function loadImagePreview(url: string) {
         }
     };
 
+    const resizeMedia = (mediaWidth: number, mediaHeight: number) => {
+        const mediaElement = currentPreviewFile as HTMLImageElement | HTMLVideoElement | null;
+        if (!mediaElement) return;
+
+        if (mediaWidth > maxWidth || mediaHeight > maxHeight) {
+            const widthRatio = maxWidth / mediaWidth;
+            const heightRatio = maxHeight / mediaHeight;
+            const scale = Math.min(widthRatio, heightRatio);
+
+            mediaElement.style.width = `${mediaWidth * scale}px`;
+            mediaElement.style.height = `${mediaHeight * scale}px`;
+        }
+
+        updatePositionAfterLoad();
+    };
+
     fileName.textContent = url.split("/").pop()?.split("?")[0] || "";
 
     mimeTypeSpan.textContent = mimeType;
@@ -176,7 +193,7 @@ function loadImagePreview(url: string) {
             if (loadingSpinner) loadingSpinner.remove();
             video.style.display = "block";
 
-            updatePositionAfterLoad();
+            resizeMedia(video.videoWidth, video.videoHeight);
         };
 
 
@@ -204,7 +221,7 @@ function loadImagePreview(url: string) {
             if (loadingSpinner) loadingSpinner.remove();
             img.style.display = "block";
 
-            updatePositionAfterLoad();
+            resizeMedia(img.naturalWidth, img.naturalHeight);
         };
 
         preview.appendChild(img);

src/equicordplugins/imagePreview/settings.ts

@@ -6,6 +6,7 @@
 
 import { definePluginSettings } from "@api/Settings";
 import { OptionType } from "@utils/types";
+import { showToast, Toasts } from "@webpack/common";
 
 const settings = definePluginSettings({
     messageImages: {
@@ -49,6 +50,19 @@ const settings = definePluginSettings({
         default: 1.5,
         markers: [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5],
     },
+    defaultMaxSize: {
+        type: OptionType.STRING,
+        description: "Default max size for images, requires WxH format",
+        default: "0",
+        onChange: (value: string) => {
+            if (value === "0") return;
+
+            if (!/^\d+x\d+$/.test(value)) {
+                settings.store.defaultMaxSize = "0";
+                showToast("Invalid format, please use WxH format. Resetting to default.", Toasts.Type.FAILURE);
+            }
+        }
+    },
 });
 
 const mimeTypes = {