diff --git a/src/equicordplugins/imagePreview/index.ts b/src/equicordplugins/imagePreview/index.ts index 2a5ef840..129a910e 100644 --- a/src/equicordplugins/imagePreview/index.ts +++ b/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); diff --git a/src/equicordplugins/imagePreview/settings.ts b/src/equicordplugins/imagePreview/settings.ts index 7bae6b7d..f20d6217 100644 --- a/src/equicordplugins/imagePreview/settings.ts +++ b/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 = {