mediaTweaks: add No WebP and No Thumbnail Size

src/mediaTweaks/index.ts

@@ -1,4 +1,5 @@
 import { ExtensionWebpackModule, Patch } from "@moonlight-mod/types";
+import { createElement } from "@moonlight-mod/wp/react";
 
 export const patches: Patch[] = [
   // Image URLs
@@ -58,6 +59,15 @@ export const patches: Patch[] = [
           `${createElement}(require("mediaTweaks_enlargeVideoButton").default,${props}),`
       }
     ]
+  },
+
+  // No WebP and No Thumbnail Size
+  {
+    find: /\(.{1,2}\+="\?"\+.{1,2}\.stringify\(.{1,2}\)\)/,
+    replace: {
+      match: /if\((.)\.sourceWidth<.\.targetWidth\){/,
+      replacement: (orig, props) => `require("mediaTweaks_imagePropsProcessor").default(${props});${orig}`
+    }
   }
 ];
 
@@ -68,6 +78,10 @@ export const webpackModules: Record<string, ExtensionWebpackModule> = {
 
   enlargeVideoButton: {
     dependencies: [{ id: "react" }, { ext: "spacepack", id: "spacepack" }, { id: "discord/components/common/index" }]
+  },
+
+  imagePropsProcessor: {
+    dependencies: []
   }
 };
 

src/mediaTweaks/manifest.json

@@ -1,15 +1,22 @@
 {
   "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
   "id": "mediaTweaks",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "meta": {
     "name": "Media Tweaks",
     "tagline": "Various tweaks to images and videos. Every feature togglable.",
-    "authors": ["Cynosphere"],
-    "tags": ["qol", "chat"],
+    "authors": [
+      "Cynosphere"
+    ],
+    "tags": [
+      "qol",
+      "chat"
+    ],
     "source": "https://github.com/Cynosphere/moonlight-extensions"
   },
-  "dependencies": ["spacepack"],
+  "dependencies": [
+    "spacepack"
+  ],
   "settings": {
     "imageUrls": {
       "displayName": "Image URLs",
@@ -39,6 +46,18 @@
       "description": "Adds a button to open videos in the image preview modal",
       "type": "boolean",
       "default": true
+    },
+    "noWebp": {
+      "displayName": "No WebP",
+      "description": "Disables fetching WebP versions of images for better clarity",
+      "type": "boolean",
+      "default": true
+    },
+    "noThumbnailSize": {
+      "displayName": "No Thumbnail Size",
+      "description": "Removes size parameters from thumbnails. **This will cause your client to freeze in channels with lots of high resolution images in them**",
+      "type": "boolean",
+      "default": false
     }
   },
   "apiLevel": 2

src/mediaTweaks/webpackModules/imagePropsProcessor.ts

@@ -0,0 +1,34 @@
+const filetypeWhitelist = [".gif", ".mov", ".mp4", ".webm", ".webp"];
+
+type ImageProps = {
+  src: string;
+  sourceWidth: number;
+  sourceHeight: number;
+  targetWidth: number;
+  targetHeight: number;
+  format?: string;
+  quality?: number;
+  animated?: boolean;
+  srcIsAnimated?: boolean;
+};
+
+export default function processProps(props: ImageProps) {
+  if (moonlight.getConfigOption<boolean>("mediaTweaks", "noWebp") ?? true) {
+    let whitelisted = false;
+    for (const type of filetypeWhitelist) {
+      if (props.src.indexOf(type) > -1) {
+        whitelisted = true;
+        break;
+      }
+    }
+
+    if (props.format === "webp" && !whitelisted && !props.animated && !props.srcIsAnimated) {
+      props.format = undefined;
+    }
+  }
+
+  if (moonlight.getConfigOption<boolean>("mediaTweaks", "noThumbnailSize") ?? false) {
+    props.targetWidth = props.sourceWidth * window.devicePixelRatio;
+    props.targetHeight = props.sourceHeight * window.devicePixelRatio;
+  }
+}