added suffix which when used mirrors emote

CHANGELOG.md

@@ -14,6 +14,7 @@
 -   Fixed an issue which squished tooltips when hovering an emote on the far right side of chat
 -   Fixed an issue which hid historical messages on Kick
 -   Increased the default value for Message Batching from 150 to 250
+-   Added a feature to horizontal flip emotes with a suffix character modifier
 
 ### Version 3.0.13
 

src/app/chat/Emote.vue

@@ -5,7 +5,7 @@
 			class="seventv-chat-emote"
 			:srcset="unload ? '' : processSrcSet(emote)"
 			:alt="emote.name"
-			:class="{ blur: hideUnlisted && emote.data?.listed === false }"
+			:class="{ blur: hideUnlisted && emote.data?.listed === false, mirror: isMirrorEmote(emote) === true }"
 			loading="lazy"
 			decoding="async"
 			@load="onImageLoad"
@@ -135,6 +135,12 @@ const { show, hide } = useTooltip(EmoteTooltip, {
 	width: baseWidth,
 	height: baseHeight,
 });
+
+const isMirrorEmote = (emote: SevenTV.ActiveEmote): boolean => {
+	const mirror: boolean = emote.name.slice(-2) === "_M";
+	if (emote.data) emote.data.mirrored = mirror;
+	return mirror;
+};
 </script>
 
 <style scoped lang="scss">
@@ -165,6 +171,10 @@ img.blur {
 	overflow: clip;
 }
 
+img.mirror {
+	transform: scaleX(-1);
+}
+
 img.zero-width-emote {
 	pointer-events: none;
 }

src/app/chat/EmoteTooltip.vue

@@ -51,6 +51,7 @@
 				<div v-if="isChannel" class="label-channel">Channel Emote</div>
 				<div v-if="isPersonal" class="label-sub-feature">Personal Emote</div>
 				<div v-if="isZeroWidth" class="label-sub-feature">Zero-Width</div>
+				<div v-if="isMirrorEmote">Mirrored</div>
 			</div>
 
 			<!-- Emoji Data -->
@@ -120,6 +121,7 @@ const isSubscriber = props.emote.scope === "SUB";
 const isChannel = props.emote.scope === "CHANNEL";
 const isPersonal = props.emote.scope === "PERSONAL";
 const isZeroWidth = (props.emote.flags || 0 & 256) !== 0;
+const isMirrorEmote = props.emote.data?.mirrored;
 
 const emojiData = ref<Emoji | null>(null);
 if (props.emote.unicode) {

src/types/app.d.ts

@@ -23,6 +23,7 @@ declare namespace SevenTV {
 		owner: User | null;
 		host: ImageHost;
 		versions?: EmoteVersion[];
+		mirrored?: boolean;
 	}
 
 	interface EmoteVersion {