diff --git a/src/components/Flex.tsx b/src/components/Flex.tsx index 9dcaa803..e2b9a71b 100644 --- a/src/components/Flex.tsx +++ b/src/components/Flex.tsx @@ -27,15 +27,15 @@ export interface FlexProps extends HTMLAttributes { } export function Flex({ flexDirection, gap = "1em", justifyContent, alignItems, flexWrap, children, style, ...restProps }: FlexProps) { - style ??= {}; - Object.assign(style, { + style = { display: "flex", flexDirection, gap, justifyContent, alignItems, - flexWrap - }); + flexWrap, + ...style + }; return (
diff --git a/src/plugins/fixImagesQuality/README.md b/src/plugins/fixImagesQuality/README.md index 290ccf91..7efe57ef 100644 --- a/src/plugins/fixImagesQuality/README.md +++ b/src/plugins/fixImagesQuality/README.md @@ -1,5 +1,12 @@ # Fix Images Quality -Improves quality of images by forcing the original source to be used. +Improves quality of images by loading them at their original resolution + +### The default behaviour is the following + +- In chat, optimised but full resolution images will be loaded. +- In the image modal, the original image will be loaded. + +You can also enable original image in chat via the plugin settings, but this may cause performance issues! This plugin does not change how others see your images! diff --git a/src/plugins/fixImagesQuality/index.ts b/src/plugins/fixImagesQuality/index.ts deleted file mode 100644 index 1c0c10cd..00000000 --- a/src/plugins/fixImagesQuality/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -/* - * Vencord, a Discord client mod - * Copyright (c) 2024 Vendicated and contributors - * SPDX-License-Identifier: GPL-3.0-or-later - */ - -import { Devs } from "@utils/constants"; -import definePlugin from "@utils/types"; - -export default definePlugin({ - name: "FixImagesQuality", - description: "Improves quality of images by forcing the original source to be used.", - authors: [Devs.Nuckyz], - patches: [ - { - find: ".handleImageLoad)", - replacement: { - match: /getSrc\(\i\)\{/, - replace: "$& return this.props.src;" - } - } - ] -}); diff --git a/src/plugins/fixImagesQuality/index.tsx b/src/plugins/fixImagesQuality/index.tsx new file mode 100644 index 00000000..4c3e6eeb --- /dev/null +++ b/src/plugins/fixImagesQuality/index.tsx @@ -0,0 +1,82 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import { definePluginSettings } from "@api/Settings"; +import { Card } from "@components/Card"; +import { Flex } from "@components/Flex"; +import { Paragraph } from "@components/Paragraph"; +import { Devs } from "@utils/constants"; +import { Logger } from "@utils/Logger"; +import definePlugin, { OptionType } from "@utils/types"; + +const settings = definePluginSettings({ + originalImagesInChat: { + type: OptionType.BOOLEAN, + description: "Also load the original image in Chat", + default: false, + } +}); + +export default definePlugin({ + name: "FixImagesQuality", + description: "Improves quality of images by loading them at their original resolution", + authors: [Devs.Nuckyz, Devs.Ven], + settings, + + patches: [ + { + find: ".handleImageLoad)", + replacement: { + match: /getSrc\(\i\)\{/, + replace: "$&var _vcSrc=$self.getSrc(this.props);if(_vcSrc)return _vcSrc;" + } + } + ], + + settingsAboutComponent() { + return ( + + + The default behaviour is the following: + +
    +
  • — In chat, optimised but full resolution images will be loaded.
  • +
  • — In the image modal, the original image will be loaded.
  • +
+
+ + You can also enable original image in chat, but this may cause performance issues! + +
+
+ ); + }, + + getSrc(props: { src: string; mediaLayoutType: string; width: number; height: number; }) { + if (!props) return; + + try { + if (!settings.store.originalImagesInChat && props.mediaLayoutType === "MOSAIC") { + // make sure the image is not too large + const pixels = props.width * props.height; + const limit = 2000 * 1200; + + if (pixels <= limit) return props.src; + + const scale = Math.sqrt(pixels / limit); + const url = new URL(props.src); + url.searchParams.set("width", Math.round(props.width / scale).toString()); + url.searchParams.set("height", Math.round(props.height / scale).toString()); + return url.toString(); + } + + return props.src?.replace("https://media.discordapp.net/attachments/", "https://cdn.discordapp.com/attachments/"); + } catch (e) { + new Logger("FixImagesQuality").error("Failed to make image src", e); + return props.src; + } + } +});