Add support for animated emojis

README.md

@@ -4,6 +4,8 @@ This plugin adds an advanced emoji picker to Kiwi IRC's UI. It also parses incom
 
 > powered by [emoji-mart-vue-fast](https://github.com/serebrov/emoji-mart-vue)
 
+> animated emojis powered by [noto-emoji-animation](https://googlefonts.github.io/noto-emoji-animation/)
+
 ## Building from source
 
 ### Dependencies
@@ -71,7 +73,7 @@ omitted, as these defaults are used if not specified.
             }
         },
         "frequentlyUsedLength": 16,
-        // Do NOT include the following 3 options unless you intend to set them
+        // DO NOT include the following 3 options unless you intend to set them
         // doing so would change the default behaviour of the plugin
         "frequentlyUsedList": [],
         "categoryInclude": [],
@@ -86,6 +88,27 @@ omitted, as these defaults are used if not specified.
                 "imageUrl": "static/favicon.png",
             },
         ],
+        // This option will enable the included animated emojis
+        // or allow existing emojis to be replaced by customised ones on a different url
+        // using external emojis will come with a performance penalty over the default emoji sheet
+        "externalEnabled": true,
+        // This option controls how external emojis are displayed in the emoji picker
+        // valid options are: "all", "hover", "none"
+        // note: "all" will put great load on the server and users internet connect as it will
+        // attempt to download all the external emojis when the picker is opened (around 30MB for the included animated emojis)
+        "externalPicker": "none",
+        // DO NOT include externalUrl unless you intend to set it
+        // doing so would override the default automatically generated url based on plugin location
+        // If your wanting to use another server you can provide a custom url
+        // %CODEPOINT% will be replaced with the google emojis code point eg "1f44f_1f3fc"
+        // %UNIFIED% will be replaced with the emoji mart unified code eg "1F44F-1F3FC"
+        // Although included for demonstration it is not recommended to use fonts.gstatic.com url due to the emojis being 512x512
+        // where as the included ones have been resized to 64x64 to make the file sizes much smaller
+        "externalUrl": "https://fonts.gstatic.com/s/e/notoemoji/latest/%CODEPOINT%/512.gif",
+        // DO NOT include externalEmojis unless you intend to set it
+        // doing so would override the animated emojis being used
+        // this object should use emoji-marts unified codes eg "1F44F-1F3FC"
+        "externalEmojis": { "1F604": 1 }
     },
 }
 ```

build/commands/update-emojis.js

@@ -0,0 +1,87 @@
+const fs = require('fs');
+const path = require('path');
+const sharp = require('sharp');
+const fetch = require('node-fetch');
+
+const utils = require('../utils');
+
+const emojisDir = utils.pathResolve('src/res/animated_emojis/');
+
+if (!fs.existsSync(emojisDir)) {
+    fs.mkdirSync(emojisDir);
+}
+
+async function getGoogleEmojiList() {
+    const response = await fetch('https://googlefonts.github.io/noto-emoji-animation/data/api.json');
+    if (!response.ok) {
+        throw new Error(`Failed to fetch data: ${response.statusText}`);
+    }
+    const data = await response.json();
+
+    return data.icons.map((icon) => ({
+        codepoint: icon.codepoint,
+        name: icon.tags[0].slice(1, -1),
+    }));
+}
+
+async function downloadEmoji(codepoint, gifPath) {
+    const url = `https://fonts.gstatic.com/s/e/notoemoji/latest/${codepoint}/512.gif`;
+
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch emoji: ${response.statusText}`);
+    }
+
+    const gifBuffer = await response.buffer();
+
+    // Resize the GIF to 64px and save it to the emojis directory
+    await sharp(gifBuffer, { animated: true })
+        .resize(64)
+        .toFile(gifPath);
+}
+
+(async () => {
+    try {
+        const localDataPath = path.join(emojisDir, 'data.json');
+        const localOut = {};
+        const local = {};
+
+        try {
+            const localRaw = await fs.promises.readFile(localDataPath);
+            Object.assign(local, JSON.parse(localRaw));
+        } catch (error) {
+            console.error(`Could not read local data.json: ${error.message}`);
+        }
+
+        const emojis = await getGoogleEmojiList();
+
+        for (let i = 0; i < emojis.length; i++) {
+            const { codepoint, name } = emojis[i];
+            const unified = codepoint.toUpperCase().replace(/_/g, '-');
+            const gifPath = path.join(emojisDir, `${codepoint}.gif`);
+
+            if (local[unified] && fs.existsSync(gifPath)) {
+                localOut[unified] = 1;
+                continue;
+            }
+
+            if (localOut[unified]) {
+                continue;
+            }
+
+            console.log(`Downloading ${name} (${codepoint})`);
+            try {
+                // eslint-disable-next-line no-await-in-loop
+                await downloadEmoji(codepoint, gifPath);
+            } catch (error) {
+                console.error(`Could not get emoji ${name} (${codepoint}): ${error.message}`);
+            }
+
+            localOut[unified] = 1;
+        }
+
+        await fs.promises.writeFile(localDataPath, JSON.stringify(localOut));
+    } catch (error) {
+        console.error(`Failed to update emojis: ${error.message}`);
+    }
+})();

build/configs/base.js

@@ -3,6 +3,7 @@ const { merge } = require('webpack-merge');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const ESLintFormatter = require('eslint-formatter-friendly');
 const { VueLoaderPlugin } = require('vue-loader');
+const CopyPlugin = require('copy-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
 
@@ -58,6 +59,19 @@ module.exports = (env, argv, config) => {
                 formatter: ESLintFormatter,
             }),
             new VueLoaderPlugin(),
+            new CopyPlugin({
+                patterns: [
+                    {
+                        from: utils.pathResolve('src/res/animated_emojis'),
+                        to: utils.pathResolve('dist/plugin-emojis/animated'),
+                        toType: 'dir',
+                        filter: async (file) => /\.gif$/.test(file),
+                        globOptions: {
+                            ignore: ['.*'],
+                        },
+                    },
+                ],
+            }),
             new CaseSensitivePathsPlugin(),
             new FriendlyErrorsWebpackPlugin(),
         ],

package.json

@@ -4,6 +4,7 @@
     "license": "Apache-2.0",
     "private": true,
     "scripts": {
+        "update": "node build/commands/update-emojis.js",
         "dev": "node build/commands/dev.js",
         "build": "node build/commands/build.js",
         "stats": "node build/commands/build.js --stats",
@@ -12,15 +13,15 @@
         "lint:style": "stylelint --allow-empty-input \"./src/**/*.{vue,html,css,less,scss,sass}\""
     },
     "dependencies": {
-        "emoji-mart-vue-fast": "^15.0.2",
+        "emoji-mart-vue-fast": "git+https://github.com/ItsOnlyBinary/emoji-mart-vue.git#b53683dc9f3c3bdceacf18ed4dd2dd80ea9323f3",
         "grapheme-splitter": "^1.0.4",
         "platform": "^1.3.6"
     },
     "devDependencies": {
         "@babel/core": "^7.25.2",
         "@babel/eslint-parser": "^7.25.1",
-        "@babel/plugin-transform-runtime": "^7.24.7",
-        "@babel/preset-env": "^7.25.3",
+        "@babel/plugin-transform-runtime": "^7.25.4",
+        "@babel/preset-env": "^7.25.4",
         "@kiwiirc/eslint-plugin": "file:./build/plugins/eslint-rules/",
         "@soda/friendly-errors-webpack-plugin": "^1.8.1",
         "@stylistic/stylelint-plugin": "^2.1.3",
@@ -51,6 +52,7 @@
         "less-loader": "^12.2.0",
         "mini-css-extract-plugin": "^2.9.1",
         "murmurhash3js": "^3.0.1",
+        "node-fetch": "^2.7.0",
         "npm-run-all": "^4.1.5",
         "ora": "^5.4.1",
         "portfinder": "^1.0.32",
@@ -65,21 +67,23 @@
         "rimraf": "^5.0.10",
         "sass": "^1.77.8",
         "sass-loader": "^16.0.1",
+        "sharp": "^0.33.5",
         "style-loader": "^4.0.0",
         "stylelint": "^16.8.2",
-        "stylelint-config-recess-order": "^5.0.1",
+        "stylelint-config-recess-order": "^5.1.0",
         "stylelint-config-recommended": "^14.0.1",
         "stylelint-config-recommended-scss": "^14.1.0",
         "stylelint-config-recommended-vue": "^1.5.0",
         "stylelint-config-standard": "^36.0.1",
         "stylelint-config-standard-scss": "^13.1.0",
         "stylelint-order": "^6.0.4",
         "stylelint-webpack-plugin": "5.0.1",
+        "vue": "^2.7.16",
         "vue-eslint-parser": "^9.4.3",
         "vue-loader": "^15.11.1",
         "vue-style-loader": "^4.1.3",
         "vue-template-compiler": "^2.7.16",
-        "webpack": "^5.93.0",
+        "webpack": "^5.94.0",
         "webpack-bundle-analyzer": "^4.10.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4",

src/components/EmojiPicker.vue

@@ -3,6 +3,8 @@
         v-bind="pickerProps"
         :set="emojiSet"
         :data="emojiIndex"
+        :external-enabled="externalEnabled"
+        :external-picker="externalPicker"
         class="kiwi-emoji-mart"
         @select="onEmojiSelected"
     />
@@ -29,6 +31,12 @@ export default {
         emojiSet() {
             return config.setting('emojiSet');
         },
+        externalEnabled() {
+            return config.setting('externalEnabled');
+        },
+        externalPicker() {
+            return config.setting('externalPicker');
+        },
     },
     methods: {
         getBestAscii(emoji) {
@@ -56,14 +64,18 @@ export default {
             return emoji.colons;
         },
         onEmojiSelected(emoji) {
-            if (emoji.imageUrl) {
+            /* eslint-disable no-underscore-dangle */
+            if ((emoji._data.has_img_external && config.setting('externalEnabled')) || emoji.imageUrl) {
                 // custom emojis
                 this.ircinput.addImg(
                     this.getBestAscii(emoji),
-                    emoji.imageUrl,
+                    (emoji._data.has_img_external && config.setting('externalEnabled')
+                        ? emoji._data.externalUrl
+                        : emoji.imageUrl),
                 );
                 return;
             }
+            /* eslint-enable no-underscore-dangle */
 
             this.ircinput.addImg(
                 this.getBestAscii(emoji),

src/config.js

@@ -1,7 +1,9 @@
 /* global kiwi:true */
 
-let configBase = 'plugin-emojis';
-let defaultConfig = {
+export const basePath = getBasePath();
+export const configBase = 'plugin-emojis';
+
+export const defaultConfig = {
     sendNativeEmojis: true,
     parseEmoticons: true,
     parseColons: true,
@@ -27,6 +29,9 @@ let defaultConfig = {
             imageUrl: 'static/favicon.png',
         },
     ],
+    externalEnabled: true,
+    externalPicker: 'none', // 'all', 'hover', 'none'
+    externalUrl: basePath + configBase + '/animated/%CODEPOINT%.gif',
 };
 
 export function setDefaults(kiwi) {
@@ -44,3 +49,9 @@ export function getSetting(name) {
 export function setSetting(name, value) {
     return kiwi.state.setSetting(['settings', configBase, name].join('.'), value);
 }
+
+function getBasePath() {
+    const scripts = document.getElementsByTagName('script');
+    const scriptPath = scripts[scripts.length - 1].src;
+    return scriptPath.substring(0, scriptPath.lastIndexOf('/') + 1);
+}

src/libs/EmojiProvider.js

@@ -120,21 +120,26 @@ export function getEmojis(word) {
 function makeEmojiObj(emojiRaw, match, index) {
     const emojiObj = {
         ascii: match,
-        url: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
-        imgProps: {
-            style: `background-position: ${emojiRaw.getPosition()}; height: 1.2em; vertical-align: -0.3em;`,
-            className: `emoji-set-${config.setting('emojiSet')} emoji-type-image`,
-        },
         mart: emojiRaw,
         matchDetail: {
             index,
             match,
         },
     };
 
-    if (emojiRaw.imageUrl) {
-        emojiObj.url = emojiRaw.imageUrl;
+    /* eslint-disable no-underscore-dangle */
+    if ((emojiRaw._data.has_img_external && config.setting('externalEnabled')) || emojiRaw.imageUrl) {
+        emojiObj.url = emojiRaw._data.has_img_external
+            ? emojiRaw._data.externalUrl
+            : emojiRaw.imageUrl;
+
         emojiObj.imgProps = {};
+    } else {
+        emojiObj.url = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+        emojiObj.imgProps = {
+            style: `background-position: ${emojiRaw.getPosition()}; height: 1.2em; vertical-align: -0.3em;`,
+            className: `emoji-set-${config.setting('emojiSet')} emoji-type-image`,
+        };
     }
 
     return emojiObj;

src/plugin.js

@@ -3,6 +3,7 @@
 import { EmojiIndex } from 'emoji-mart-vue-fast/src';
 import 'emoji-mart-vue-fast/css/emoji-mart.css';
 import EmojiData from 'emoji-mart-vue-fast/data/all.json';
+import AnimatedEmojiData from '@/res/animated_emojis/data.json';
 import EmojiPicker from '@/components/EmojiPicker.vue';
 import * as config from '@/config.js';
 import * as EmojiProvider from '@/libs/EmojiProvider.js';
@@ -17,6 +18,8 @@ kiwi.plugin('emojis', (kiwi) => {
         custom: config.setting('customEmojis'),
         recent: config.setting('frequentlyUsedList'),
         recentLength: config.setting('frequentlyUsedLength'),
+        externalEmojis: config.setting('externalEmojis') || AnimatedEmojiData,
+        externalUrl: config.setting('externalUrl'),
     });
     kiwi['plugin-emojis'] = Object.create(null);
     kiwi['plugin-emojis'].emojiIndex = emojiIndex;
@@ -39,4 +42,20 @@ kiwi.plugin('emojis', (kiwi) => {
             });
         });
     });
+
+    kiwi.Vue.watch(
+        () => config.setting('externalEnabled'),
+        () => {
+            kiwi.state.networks.forEach((network) => {
+                // Re-render messages with user colours
+                Object.values(network.buffers).forEach((buffer) => {
+                    buffer.getMessages().forEach((msg) => {
+                        if (msg.html.indexOf('kiwi-messagelist-emoji') > -1) {
+                            msg.hasRendered = false;
+                        }
+                    });
+                });
+            });
+        }
+    );
 });