Stickers settings

src/components/animationIntersector.ts

@@ -94,6 +94,12 @@ export class AnimationIntersector {
       group
     };
 
+    if(animation instanceof RLottiePlayer) {
+      if(!rootScope.settings.stickers.loop && animation.loop) {
+        animation.loop = rootScope.settings.stickers.loop;
+      }
+    }
+
     (this.byGroups[group] ?? (this.byGroups[group] = [])).push(player);
     this.observer.observe(player.el);
   }

src/components/chat/input.ts

@@ -301,6 +301,16 @@ export default class ChatInput {
 
     this.stickersHelper = new StickersHelper(this.rowsWrapper);
 
+    this.listenerSetter.add(rootScope, 'settings_updated', () => {
+      if(this.stickersHelper) {
+        if(!rootScope.settings.stickers.suggest) {
+          this.stickersHelper.checkEmoticon('');
+        } else {
+          this.onMessageInput();
+        }
+      }
+    });
+
     try {
       this.recorder = new Recorder({
         //encoderBitRate: 32,
@@ -802,7 +812,9 @@ export default class ChatInput {
 
     //this.chat.log('messageInput entities', richValue, value, markdownEntities);
 
-    if(this.stickersHelper && (this.chat.peerId > 0 || this.appChatsManager.hasRights(this.chat.peerId, 'send', 'send_stickers'))) {
+    if(this.stickersHelper && 
+      rootScope.settings.stickers.suggest && 
+      (this.chat.peerId > 0 || this.appChatsManager.hasRights(this.chat.peerId, 'send', 'send_stickers'))) {
       let emoticon = '';
       if(entities.length && entities[0]._ == 'messageEntityEmoji') {
         const entity = entities[0];

src/components/emoticonsDropdown/tabs/emoji.ts

@@ -170,7 +170,8 @@ export default class EmojiTab implements EmoticonsTab {
   }
 
   private getEmojiFromElement(element: HTMLElement) {
-    if(element.tagName == 'SPAN' && !element.classList.contains('emoji')) {
+    if(element.nodeType === 3) return element.nodeValue;
+    if(element.tagName === 'SPAN' && !element.classList.contains('emoji')) {
       element = element.firstElementChild as HTMLElement;
     }
     
@@ -181,12 +182,14 @@ export default class EmojiTab implements EmoticonsTab {
     let target = e.target as HTMLElement;
     //if(target.tagName != 'SPAN') return;
 
-    if(target.tagName == 'SPAN' && !target.classList.contains('emoji')) {
+    if(target.tagName === 'SPAN' && !target.classList.contains('emoji')) {
-      target = target.firstElementChild as HTMLElement;
+      target = target.firstChild as HTMLElement;
     } else if(target.tagName == 'DIV') return;
 
     //console.log('contentEmoji div', target);
-    appImManager.chat.input.messageInput.innerHTML += RichTextProcessor.emojiSupported ? target.innerHTML : target.outerHTML;
+    appImManager.chat.input.messageInput.innerHTML += RichTextProcessor.emojiSupported ? 
+      (target.nodeType === 3 ? target.nodeValue : target.innerHTML) : 
+      target.outerHTML;
 
     // Recent
     const emoji = this.getEmojiFromElement(target);

src/lib/appManagers/appImManager.ts

@@ -28,6 +28,7 @@ import appPollsManager from './appPollsManager';
 import SetTransition from '../../components/singleTransition';
 import ChatDragAndDrop from '../../components/chat/dragAndDrop';
 import { debounce } from '../../helpers/schedulers';
+import lottieLoader from '../lottieLoader';
 
 //console.log('appImManager included33!');
 
@@ -156,6 +157,9 @@ export class AppImManager {
 
       apiManager.setQueueId(this.chat.bubbles.lazyLoadQueue.queueId);
     }, rootScope.settings.animationsEnabled ? 250 : 0, false, true);
+
+    lottieLoader.setLoop(rootScope.settings.stickers.loop);
+    animationIntersector.checkAnimations(false);
   }
 
   private chatsSelectTab(tab: HTMLElement) {

src/lib/lottieLoader.ts

@@ -54,7 +54,9 @@ export class RLottiePlayer extends EventListenerBase<{
   public direction = 1;
   public speed = 1;
   public autoplay = true;
+  public _autoplay: boolean; // ! will be used to store original value for settings.stickers.loop
   public loop = true;
+  public _loop: boolean; // ! will be used to store original value for settings.stickers.loop
   public group = '';
 
   private frInterval: number;
@@ -92,6 +94,9 @@ export class RLottiePlayer extends EventListenerBase<{
       }
     }
 
+    this._loop = this.loop;
+    this._autoplay = this.autoplay;
+
     // * Skip ratio (30fps)
     let skipRatio: number;
     if(options.skipRatio !== undefined) skipRatio = options.skipRatio;
@@ -539,8 +544,8 @@ class LottieLoader {
   private log = logger('LOTTIE', LogLevels.error);
 
   public getAnimation(element: HTMLElement) {
-    for(let i in this.players) {
+    for(const i in this.players) {
-      if(this.players[i].el == element) {
+      if(this.players[i].el === element) {
         return this.players[i];
       }
     }
@@ -548,6 +553,14 @@ class LottieLoader {
     return null;
   }
 
+  public setLoop(loop: boolean) {
+    for(const i in this.players) {
+      const player = this.players[i];
+      player.loop = loop;
+      player.autoplay = player._autoplay;
+    }
+  }
+
   public loadLottieWorkers() {
     if(typeof(WebAssembly) === 'undefined') return Promise.reject();
 

src/scss/partials/_chatBubble.scss

@@ -454,13 +454,6 @@ $bubble-margin: .25rem;
     vertical-align: bottom;
   }
 
-  span.emoji {
-    height: auto;
-    width: auto;
-    overflow: visible;
-    vertical-align: unset;
-  }
-
   .thumbnail {
     position: absolute;
   }

src/scss/style.scss

@@ -301,7 +301,7 @@ a {
 }
 
 button, input, optgroup, select, textarea, html {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: "Roboto", -apple-system, apple color emoji, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
 input, textarea, button, select, a, div {