Stickers: only one playable group for popup

src/components/animationIntersector.ts

@@ -14,6 +14,7 @@ export class AnimationIntersector {
 
   private byGroups: {[group: string]: AnimationItem[]} = {};
   private lockedGroups: {[group: string]: true} = {};
+  private onlyOnePlayableGroup: string = '';
   
   private intersectionLockedGroups: {[group: string]: true} = {};
 
@@ -101,7 +102,7 @@ export class AnimationIntersector {
     if(group && !this.byGroups[group]) {
       //console.warn('no animation group:', group);
       this.byGroups[group] = [];
-      //return;
+      return;
     }
 
     for(const group of groups) {
@@ -126,12 +127,16 @@ export class AnimationIntersector {
         //console.warn('pause animation:', animation);
         animation.pause();
       }
-    } else if(animation.paused && this.visible.has(player) && animation.autoplay) {
+    } else if(animation.paused && this.visible.has(player) && animation.autoplay && (!this.onlyOnePlayableGroup || this.onlyOnePlayableGroup == group)) {
       //console.warn('play animation:', animation);
       animation.play();
     }
   }
 
+  public setOnlyOnePlayableGroup(group: string) {
+    this.onlyOnePlayableGroup = group;
+  }
+
   public lockGroup(group: string) {
     this.lockedGroups[group] = true;
   }

src/components/popupStickers.ts

@@ -10,6 +10,8 @@ import { findUpClassName } from "../lib/utils";
 import appImManager from "../lib/appManagers/appImManager";
 import { StickerSet } from "../layer";
 
+const ANIMATION_GROUP = 'STICKERS-POPUP';
+
 export default class PopupStickers extends PopupElement {
   private stickersFooter: HTMLElement;
   private stickersDiv: HTMLElement;
@@ -30,6 +32,7 @@ export default class PopupStickers extends PopupElement {
     this.header.append(this.h6);
 
     this.onClose = () => {
+      animationIntersector.setOnlyOnePlayableGroup('');
       animationIntersector.checkAnimations(false);
       this.stickersFooter.removeEventListener('click', this.onFooterClick);
       this.stickersDiv.removeEventListener('click', this.onStickersClick);
@@ -37,7 +40,7 @@ export default class PopupStickers extends PopupElement {
     };
 
     this.onCloseAfterTimeout = () => {
-      animationIntersector.checkAnimations(undefined, 'STICKERS-POPUP');
+      animationIntersector.checkAnimations(undefined, ANIMATION_GROUP);
     };
 
     const onOverlayClick = (e: MouseEvent) => {
@@ -104,6 +107,7 @@ export default class PopupStickers extends PopupElement {
       this.set = set.set;
 
       animationIntersector.checkAnimations(true);
+      animationIntersector.setOnlyOnePlayableGroup(ANIMATION_GROUP);
 
       this.h6.innerHTML = RichTextProcessor.wrapEmojiText(set.set.title);
       !set.set.installed_date ? this.stickersFooter.classList.add('add') : this.stickersFooter.classList.remove('add');
@@ -130,7 +134,7 @@ export default class PopupStickers extends PopupElement {
           doc, 
           div, 
           lazyLoadQueue, 
-          group: 'STICKERS-POPUP', 
+          group: ANIMATION_GROUP, 
           play: true,
           loop: true,
           width: 80,

src/lib/logger.ts

@@ -13,7 +13,7 @@ function dT() {
 }
 
 export function logger(prefix: string, level = LogLevels.log | LogLevels.warn | LogLevels.error) {
-  if(process.env.NODE_ENV == 'development'/*  || true */) {
+  if(process.env.NODE_ENV != 'development'/*  || true */) {
     level = LogLevels.error;
   }