seperate emoji/sticker settings for animation

src/webpage/emoji.ts

@@ -6,7 +6,7 @@ import {emojijson, emojiSource} from "./jsontypes.js";
 import {Localuser} from "./localuser.js";
 import {BinRead} from "./utils/binaryUtils.js";
 import {CDNParams} from "./utils/cdnParams.js";
-import {removeAni} from "./utils/utils.js";
+import {createImg, removeAni} from "./utils/utils.js";
 
 //I need to recompile the emoji format for translation
 class Emoji {
@@ -89,17 +89,20 @@ class Emoji {
 	getHTML(bigemoji: boolean = false, click = true) {
 		if (this.id) {
 			if (!this.owner) throw new Error("owner is missing for custom emoji!");
-			const emojiElem = document.createElement("img");
+			const emojiElem = createImg(
+				this.owner.info.cdn +
+					"/emojis/" +
+					this.id +
+					"." +
+					(this.animated ? "gif" : "png") +
+					new CDNParams({expectedSize: 32, animated: this.animated}),
+				undefined,
+				undefined,
+				"emoji",
+			);
 			emojiElem.classList.add("md-emoji");
 			emojiElem.classList.add(bigemoji ? "bigemoji" : "smallemoji");
 			emojiElem.crossOrigin = "anonymous";
-			emojiElem.src =
-				this.owner.info.cdn +
-				"/emojis/" +
-				this.id +
-				"." +
-				(this.animated ? "gif" : "png") +
-				new CDNParams({expectedSize: 32, animated: this.animated});
 			emojiElem.alt = this.name;
 			emojiElem.loading = "lazy";
 

src/webpage/localuser.ts

@@ -3305,6 +3305,24 @@ class Localuser {
 				AnimateTristateValues.map((_) => I18n.accessibility.gifSettings[_]()),
 				{defaultIndex: AnimateTristateValues.indexOf(prefs.animateIcons)},
 			);
+			animations.addSelect(
+				I18n.accessibility.playEmoji(),
+				async (i) => {
+					prefs.animateEmoji = AnimateTristateValues[i];
+					await setPreferences(prefs);
+				},
+				AnimateTristateValues.map((_) => I18n.accessibility.gifSettings[_]()),
+				{defaultIndex: AnimateTristateValues.indexOf(prefs.animateEmoji)},
+			);
+			animations.addSelect(
+				I18n.accessibility.playSticker(),
+				async (i) => {
+					prefs.animateSticker = AnimateTristateValues[i];
+					await setPreferences(prefs);
+				},
+				AnimateTristateValues.map((_) => I18n.accessibility.gifSettings[_]()),
+				{defaultIndex: AnimateTristateValues.indexOf(prefs.animateSticker)},
+			);
 		}
 		settings.addButton(I18n.localuser.security(), {head: true});
 		{

src/webpage/sticker.ts

@@ -36,6 +36,9 @@ class Sticker extends SnowFlake {
 	getHTML(): HTMLElement {
 		const img = createImg(
 			this.owner.info.cdn + "/stickers/" + this.id + ".webp" + new CDNParams({expectedSize: 160}),
+			undefined,
+			undefined,
+			"sticker",
 		);
 		img.classList.add("sticker");
 		const hover = new Hover(this.name);

src/webpage/utils/storage/userPreferences.ts

@@ -30,6 +30,8 @@ export class UserPreferences {
 	// render settings
 	animateIcons: AnimateTristateValue = AnimateTristateValue.OnlyOnHover;
 	animateGifs: AnimateTristateValue = AnimateTristateValue.OnlyOnHover;
+	animateEmoji: AnimateTristateValue = AnimateTristateValue.Always;
+	animateSticker: AnimateTristateValue = AnimateTristateValue.Always;
 	renderJoinAvatars: boolean = true;
 	theme: ThemeOption = ThemeOption.Dark;
 	accentColor: string = "#5865F2";

src/webpage/utils/utils.ts

@@ -662,18 +662,28 @@ export type safeImg = HTMLImageElement & {
 	setSrcs: (nsrc: string, nstaticsrc: string | void) => void;
 	isAnimated: () => Promise<boolean>;
 };
+function getSetting(type: "gif" | "icon" | "emoji" | "sticker") {
+	const prefs = getPreferences();
+	switch (type) {
+		case "gif":
+			return prefs.animateGifs;
+		case "icon":
+			return prefs.animateIcons;
+		case "emoji":
+			return prefs.animateEmoji;
+		case "sticker":
+			return prefs.animateSticker;
+		default:
+			return "hover";
+	}
+}
 export function createImg(
 	src: string | undefined,
 	staticsrc: string | void,
 	elm: HTMLElement | void,
-	type: "gif" | "icon" = "gif",
+	type: "gif" | "icon" | "emoji" | "sticker" = "gif",
 ): safeImg {
-	const prefs = getPreferences();
-	const aniOpt =
-		(type === "gif" ? prefs.animateGifs : prefs.animateIcons) ||
-		("hover" as "hover") ||
-		"always" ||
-		"never";
+	const aniOpt = getSetting(type);
 	const img = document.createElement("img");
 	img.loading = "lazy";
 	img.decoding = "async";

translations/en.json

@@ -76,6 +76,8 @@
 		"animations":"Animations",
 		"playGif": "Play GIFs:",
 		"playIcon": "Play animated icons:",
+		"playEmoji":"Play animated emoji:",
+		"playSticker":"Play animated stickers:",
 		"roleColors": "Disable role colors:",
 		"gradientColors":"Disable gradient coloring:",
 		"decorations":"Enable avatar decorations:"