Merge remote-tracking branch 'upstream/dev' into dev

src/plugins/fixImagesQuality/index.tsx

@@ -7,6 +7,7 @@
 import { definePluginSettings } from "@api/Settings";
 import { Card } from "@components/Card";
 import { Flex } from "@components/Flex";
+import { Margins } from "@components/margins";
 import { Paragraph } from "@components/Paragraph";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
@@ -15,7 +16,7 @@ import definePlugin, { OptionType } from "@utils/types";
 const settings = definePluginSettings({
     originalImagesInChat: {
         type: OptionType.BOOLEAN,
-        description: "Also load the original image in Chat",
+        description: "Also load the original image in Chat. WARNING: Read the caveats above",
         default: false,
     }
 });
@@ -31,7 +32,7 @@ export default definePlugin({
             find: ".handleImageLoad)",
             replacement: {
                 match: /getSrc\(\i\)\{/,
-                replace: "$&var _vcSrc=$self.getSrc(this.props);if(_vcSrc)return _vcSrc;"
+                replace: "$&var _vcSrc=$self.getSrc(this.props,arguments[1]);if(_vcSrc)return _vcSrc;"
             }
         }
     ],
@@ -47,36 +48,48 @@ export default definePlugin({
                             <li>&mdash; In the image modal, the original image will be loaded.</li>
                         </ul>
                     </Paragraph>
+                    <Paragraph size="md" weight="semibold" className={Margins.top8}>You can also enable original image in chat, but beware of the following caveats:</Paragraph>
                     <Paragraph>
-                        You can also enable original image in chat, but this may cause performance issues!
+                        <ul>
+                            <li>&mdash; Animated images (GIF, WebP, etc.) in chat will always animate, regardless of if the App is focused.</li>
+                            <li>&mdash; May cause lag.</li>
+                        </ul>
                     </Paragraph>
                 </Flex>
             </Card>
         );
     },
 
-    getSrc(props: { src: string; mediaLayoutType: string; width: number; height: number; }) {
-        if (!props) return;
+    getSrc(props: { src: string; mediaLayoutType: string; width: number; height: number; contentType: string; }, freeze?: boolean) {
+        if (!props?.src) return;
 
         try {
-            if (!settings.store.originalImagesInChat && props.mediaLayoutType === "MOSAIC") {
+            const { contentType, height, mediaLayoutType, src, width } = props;
+            if (!contentType?.startsWith("image/") || src.startsWith("data:")) return;
+
+            const url = new URL(src);
+            url.searchParams.set("animated", String(!freeze));
+
+            if (!settings.store.originalImagesInChat && mediaLayoutType === "MOSAIC") {
                 // make sure the image is not too large
-                const pixels = props.width * props.height;
+                const pixels = width * height;
                 const limit = 2000 * 1200;
 
-                if (pixels <= limit) return props.src;
+                if (pixels <= limit)
+                    return url.toString();
 
                 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());
+
+                url.searchParams.set("width", Math.round(width / scale).toString());
+                url.searchParams.set("height", Math.round(height / scale).toString());
                 return url.toString();
             }
 
-            return props.src?.replace("https://media.discordapp.net/attachments/", "https://cdn.discordapp.com/attachments/");
+            url.hostname = "cdn.discordapp.com";
+            return url.toString();
         } catch (e) {
             new Logger("FixImagesQuality").error("Failed to make image src", e);
-            return props.src;
+            return;
         }
     }
 });

src/plugins/imageZoom/components/Magnifier.tsx

@@ -162,6 +162,9 @@ export const Magnifier = ErrorBoundary.wrap<MagnifierProps>(({ instance, size: i
     const imageSrc = useMemo(() => {
         try {
             const imageUrl = new URL(instance.props.src);
+            if (imageUrl.pathname.startsWith("/attachments/"))
+                imageUrl.hostname = "cdn.discordapp.com";
+
             imageUrl.searchParams.set("animated", "true");
             return imageUrl.toString();
         } catch {

src/plugins/memberCount/index.tsx

@@ -72,7 +72,7 @@ export default definePlugin({
             replacement: [
                 {
                     match: /(?<=var\{className:(\i),.+?children):\[(\i\.useMemo[^}]+"aria-multiselectable")/,
-                    replace: ":[$1?.startsWith('members')?$self.render():null,$2",
+                    replace: ":[$1?.includes('members')?$self.render():null,$2",
                 },
             ],
             predicate: () => settings.store.memberList