Animated emoji

Co-authored-by: Nekromateion <43814053+Nekromateion@users.noreply.github.com>

html/src/app.js

@@ -25173,6 +25173,31 @@ speechSynthesis.getVoices();
         ZZZ: 'Preview_B2-ZZZ.gif'
     };
 
+    $app.methods.generateEmojiStyle = function (
+        url,
+        fps,
+        frameCount,
+        animationStyle
+    ) {
+        let framesPerLine = 2;
+        if (frameCount > 4) framesPerLine = 4;
+        if (frameCount > 16) framesPerLine = 8;
+        const animationDurationMs = (1000 / fps) * frameCount;
+        const frameSize = 1024 / framesPerLine;
+        const scale = 100 / (frameSize / 200);
+        const animStyle =
+            animationStyle === 'pingpong' ? 'alternate' : 'infinite';
+        const style = `
+            transform: scale(${scale / 100});
+            transform-origin: top left;
+            width: ${frameSize}px;
+            height: ${frameSize}px;
+            background: url('${url}') 0 0;
+            animation: ${animationDurationMs}ms steps(1) 0s ${animStyle} normal none running animated-emoji-${frameCount};
+        `;
+        return style;
+    };
+
     // #endregion
     // #region Misc
 

html/src/index.pug

@@ -10,6 +10,7 @@ html
         link(rel="preconnect" href="https://d348imysud55la.cloudfront.net")
         link(rel="stylesheet" href="app.css")
         link(rel="stylesheet" href="flags.css")
+        link(rel="stylesheet" href="animated-emoji.css")
     body
         .x-app#x-app(style="display:none" @dragenter.prevent @dragover.prevent @drop.prevent)
             //- login
@@ -2501,8 +2502,11 @@ html
                             span {{ $t('dialog.gallery_icons.flipbook_info') }}
                         br
                         .x-friend-item(v-if="image.versions && image.versions.length > 0" v-for="image in emojiTable" :key="image.id" style="display:inline-block;margin-top:10px;width:unset;cursor:default")
-                            .vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url" style="cursor:default")
+                            .vrcplus-icon(v-if="image.versions[image.versions.length - 1].file.url" style="overflow:hidden" @click="showFullscreenImageDialog(image.versions[image.versions.length - 1].file.url)") 
-                                img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
+                                template(v-if="image.frames")
+                                    .avatar(:style="generateEmojiStyle(image.versions[image.versions.length - 1].file.url, image.framesOverTime, image.frames, image.animationStyle)")
+                                template(v-else)
+                                    img.avatar(v-lazy="image.versions[image.versions.length - 1].file.url")
                             div(style="display:inline-block;margin:5px")
                                 span(v-if="image.loopStyle === 'pingpong'") #[i.el-icon-refresh.el-icon--left]
                                 span(style="margin-right:5px") {{ image.animationStyle }}

html/webpack.config.js

@@ -22,6 +22,7 @@ module.exports = {
         'theme.pink': './src/theme.pink.scss',
         'theme.material3': './src/theme.material3.scss',
         flags: './src/flags.scss',
+        'animated-emoji': './src/animated-emoji.scss',
         vr: {
             import: ['./src/vr.js', './src/vr.scss'],
             dependOn: 'vendor'