From a5cb3b4af387c4b5a27189e657c08c101fed0a8e Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Wed, 27 Oct 2021 22:57:49 +0300
Subject: [PATCH] Preload animated emoji sticker

---
 src/components/chat/stickersHelper.ts     |  1 +
 src/lib/appManagers/appStickersManager.ts | 24 +++++++++++++++++++++--
 src/lib/lottieLoader.ts                   |  5 ++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/chat/stickersHelper.ts b/src/components/chat/stickersHelper.ts
index 1818a70a..2040aca7 100644
--- a/src/components/chat/stickersHelper.ts
+++ b/src/components/chat/stickersHelper.ts
@@ -55,6 +55,7 @@ export default class StickersHelper extends AutocompleteHelper {
       this.lazyLoadQueue.clear();
     }
 
+    appStickersManager.preloadAnimatedEmojiSticker(emoticon);
     appStickersManager.getStickersByEmoticon(emoticon)
     .then((stickers) => {
       if(!middleware()) {
diff --git a/src/lib/appManagers/appStickersManager.ts b/src/lib/appManagers/appStickersManager.ts
index fe9139cc..9f19586b 100644
--- a/src/lib/appManagers/appStickersManager.ts
+++ b/src/lib/appManagers/appStickersManager.ts
@@ -13,6 +13,10 @@ import AppStorage from '../storage';
 import { MOUNT_CLASS_TO } from '../../config/debug';
 import { forEachReverse } from '../../helpers/array';
 import DATABASE_STATE from '../../config/databases/state';
+import { readBlobAsText } from '../../helpers/blob';
+import lottieLoader from '../lottieLoader';
+import mediaSizes from '../../helpers/mediaSizes';
+import { getEmojiToneIndex } from '../../vendor/emoji';
 
 const CACHE_TIME = 3600e3;
 
@@ -144,11 +148,27 @@ export class AppStickersManager {
     return pack ? appDocsManager.getDoc(pack.documents[0]) : undefined;
   }
 
-  public preloadAnimatedEmojiSticker(emoji: string) {
+  public preloadAnimatedEmojiSticker(emoji: string, width?: number, height?: number) {
     return this.getAnimatedEmojiStickerSet().then(() => {
       const doc = this.getAnimatedEmojiSticker(emoji);
       if(doc) {
-        return appDocsManager.downloadDoc(doc);
+        return appDocsManager.downloadDoc(doc)
+        .then(readBlobAsText)
+        .then(async(json) => {
+          const mediaSize = mediaSizes.active.emojiSticker;
+          const toneIndex = getEmojiToneIndex(emoji);
+          const animation = await lottieLoader.loadAnimationWorker({
+            container: undefined,
+            animationData: json,
+            width: width ?? mediaSize.width,
+            height: height ?? mediaSize.height
+          }, 'none', toneIndex);
+
+          animation.addEventListener('firstFrame', () => {
+            appDocsManager.saveLottiePreview(doc, animation.canvas, toneIndex);
+            animation.remove();
+          }, {once: true});
+        });
       }
     });
   }
diff --git a/src/lib/lottieLoader.ts b/src/lib/lottieLoader.ts
index ff4659fc..cd1e72b4 100644
--- a/src/lib/lottieLoader.ts
+++ b/src/lib/lottieLoader.ts
@@ -732,7 +732,10 @@ class LottieLoader {
     params.group = group;
 
     const player = this.initPlayer(params.container, params);
-    animationIntersector.addAnimation(player, group);
+
+    if(group !== 'none') {
+      animationIntersector.addAnimation(player, group);
+    }
 
     return player;
   }