diff --git a/src/mediaTweaks/index.ts b/src/mediaTweaks/index.ts index 27bfdb5..acdf6f0 100644 --- a/src/mediaTweaks/index.ts +++ b/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 = { enlargeVideoButton: { dependencies: [{ id: "react" }, { ext: "spacepack", id: "spacepack" }, { id: "discord/components/common/index" }] + }, + + imagePropsProcessor: { + dependencies: [] } }; diff --git a/src/mediaTweaks/manifest.json b/src/mediaTweaks/manifest.json index 9107e9a..c8d7dd1 100644 --- a/src/mediaTweaks/manifest.json +++ b/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 diff --git a/src/mediaTweaks/webpackModules/imagePropsProcessor.ts b/src/mediaTweaks/webpackModules/imagePropsProcessor.ts new file mode 100644 index 0000000..b5e973d --- /dev/null +++ b/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("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("mediaTweaks", "noThumbnailSize") ?? false) { + props.targetWidth = props.sourceWidth * window.devicePixelRatio; + props.targetHeight = props.sourceHeight * window.devicePixelRatio; + } +}