Fix animated emoji in notifications tab

src/components/Emoji.vue

@@ -0,0 +1,48 @@
+<template>
+    <div style="overflow: hidden" :style="{ width: size + 'px', height: size + 'px' }">
+        <div
+            v-if="image.frames"
+            class="avatar"
+            :style="generateEmojiStyle(imageUrl, image.framesOverTime, image.frames, image.loopStyle, size)"></div>
+        <img v-else :src="imageUrl" class="avatar" :style="{ width: size + 'px', height: size + 'px' }" />
+    </div>
+</template>
+
+<script setup>
+    import { onMounted, ref, watch } from 'vue';
+
+    import { extractFileId, generateEmojiStyle } from '../shared/utils';
+    import { useGalleryStore } from '../stores';
+
+    const { getCachedEmoji } = useGalleryStore();
+    const { emojiTable } = useGalleryStore();
+
+    const props = defineProps({
+        imageUrl: { type: String, default: '' },
+        size: { type: Number, default: 100 }
+    });
+
+    const image = ref({
+        frames: null,
+        framesOverTime: null,
+        loopStyle: null,
+        versions: []
+    });
+
+    async function update() {
+        const fileId = extractFileId(props.imageUrl);
+        for (const emoji of emojiTable) {
+            if (emoji.id === fileId) {
+                image.value = emoji;
+                return;
+            }
+        }
+        image.value = await getCachedEmoji(fileId);
+    }
+
+    watch(() => props.imageUrl, update);
+
+    onMounted(() => {
+        update();
+    });
+</script>

src/components/dialogs/SendBoopDialog.vue

@@ -150,24 +150,8 @@
                         image.versions[image.versions.length - 1].file.url
                     "
                     class="x-popover-image"
-                    style="overflow: hidden; width: 100px; height: 100px; padding: 8px">
-                    <div
-                        v-if="image.frames"
-                        class="avatar"
-                        :style="
-                            generateEmojiStyle(
-                                image.versions[image.versions.length - 1].file.url,
-                                image.framesOverTime,
-                                image.frames,
-                                image.loopStyle,
-                                100
-                            )
-                        "></div>
-                    <img
-                        v-else
-                        :src="image.versions[image.versions.length - 1].file.url"
-                        class="avatar"
-                        style="width: 100px; height: 100px" />
+                    style="padding: 8px">
+                    <Emoji :imageUrl="image.versions[image.versions.length - 1].file.url" :size="100"></Emoji>
                 </div>
             </el-card>
         </div>
@@ -194,7 +178,7 @@
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { generateEmojiStyle, userImage, userStatusClass } from '../../shared/utils';
+    import { userImage, userStatusClass } from '../../shared/utils';
     import { miscRequest } from '../../api';
     import { notificationRequest } from '../../api';
     import { photonEmojis } from '../../shared/constants/photon.js';
@@ -204,6 +188,8 @@
     import { useNotificationStore } from '../../stores';
     import { useUserStore } from '../../stores/user.js';
 
+    import Emoji from '../Emoji.vue';
+
     const { t } = useI18n();
 
     const { sendBoopDialog } = storeToRefs(useUserStore());