From bdf5118c733109b7e3409822d5c1a308efcc87fd Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Mon, 11 Jan 2021 20:09:20 +0400
Subject: [PATCH] Fix stickers blinking again

---
 src/components/wrappers.ts              | 16 +++++----
 src/scss/partials/_emojiDropdown.scss   |  3 ++
 src/scss/partials/popups/_stickers.scss |  3 --
 src/scss/style.scss                     | 45 +++++++++++++------------
 4 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/components/wrappers.ts b/src/components/wrappers.ts
index 56dbc417..47cd6505 100644
--- a/src/components/wrappers.ts
+++ b/src/components/wrappers.ts
@@ -732,7 +732,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
       if(thumb._ === 'photoPathSize') {
         if(thumb.bytes.length) {
           const d = appPhotosManager.getPathFromPhotoPathSize(thumb);
-          div.innerHTML = `<svg class="rlottie-vector" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${doc.w || 512} ${doc.h || 512}" xml:space="preserve">
+          div.innerHTML = `<svg class="rlottie-vector media-sticker thumbnail" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${doc.w || 512} ${doc.h || 512}" xml:space="preserve">
             <path d="${d}"/>
           </svg>`;
         } else {
@@ -848,12 +848,14 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
             cb();
           } else {
             animation.canvas.classList.add('fade-in');
-
             if(element) {
-              setTimeout(() => {
-                cb();
-              }, element.tagName === 'svg' ? 50 : 200);
+              element.classList.add('fade-out');
             }
+
+            setTimeout(() => {
+              animation.canvas.classList.remove('fade-in');
+              cb();
+            }, 200);
           }
 
           appDocsManager.saveLottiePreview(doc, animation.canvas, toneIndex);
@@ -895,6 +897,9 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
   
           renderImageFromUrl(image, doc.url, () => {
             div.append(image);
+            if(thumbImage) {
+              thumbImage.classList.add('fade-out');
+            }
   
             window.requestAnimationFrame(() => {
               resolve();
@@ -903,7 +908,6 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
             if(needFadeIn) {
               setTimeout(() => {
                 image.classList.remove('fade-in');
-    
                 if(thumbImage) {
                   thumbImage.remove();
                 }
diff --git a/src/scss/partials/_emojiDropdown.scss b/src/scss/partials/_emojiDropdown.scss
index d5dbee2c..1a96df45 100644
--- a/src/scss/partials/_emojiDropdown.scss
+++ b/src/scss/partials/_emojiDropdown.scss
@@ -298,6 +298,9 @@
 				padding: 8px;
 				max-width: 100%;
 				max-height: 100%;
+			}
+
+			> canvas {
 				width: 100%;
 				height: 100%;
 			}
diff --git a/src/scss/partials/popups/_stickers.scss b/src/scss/partials/popups/_stickers.scss
index 6e5b17a9..9df29794 100644
--- a/src/scss/partials/popups/_stickers.scss
+++ b/src/scss/partials/popups/_stickers.scss
@@ -80,9 +80,6 @@
       img {
         max-width: 100%;
         max-height: 100%;
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
       }
     }
   }
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 97f19e8a..b43c2624 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -743,27 +743,6 @@ img.emoji {
   pointer-events: none;
 }
 
-.rlottie, .rlottie-vector {
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  position: absolute;
-  max-width: 100%;
-  max-height: 100%;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
-.rlottie.fade-in {
-  animation: fade-in-opacity .2s ease forwards;
-}
-
-.rlottie-vector {
-  fill: rgba(0, 0, 0, .08);
-}
-
 .super-stickers {
   width: 100%;
 	display: grid;
@@ -1177,6 +1156,26 @@ middle-ellipsis-element {
   }
 }
 
+.rlottie, .rlottie-vector {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
+}
+
+.rlottie.fade-in {
+  animation: fade-in-opacity .2s ease-in-out forwards;
+}
+
+.rlottie-vector {
+  fill: rgba(0, 0, 0, .08);
+}
+
 .media-photo, .media-video, .media-sticker {
   position: absolute;
   top: 0;
@@ -1187,6 +1186,10 @@ middle-ellipsis-element {
   &.fade-in {
     animation: fade-in-opacity .2s ease-in-out forwards;
   }
+
+  &.fade-out {
+    animation: fade-out-opacity .2s ease-in-out forwards;
+  }
 }
 
 .media-video {