Group type tab finished

src/components/chat/bubbles.ts

@@ -367,12 +367,6 @@ export default class ChatBubbles {
       });
     });
 
-    this.listenerSetter.add(rootScope, 'dialog_drop', (e) => {
-      if(e.peerId === this.peerId) {
-        this.chat.appImManager.setPeer(0);
-      }
-    });
-
     this.listenerSetter.add(this.bubblesContainer, 'click', this.onBubblesClick/* , {capture: true, passive: false} */);
 
     if(DEBUG) {
@@ -1427,11 +1421,11 @@ export default class ChatBubbles {
         if(isTarget) {
           this.scrollToBubble(mounted.bubble, 'center');
           this.highlightBubble(mounted.bubble);
-          this.chat.setListenerResult('setPeer', lastMsgId, false);
+          this.chat.dispatchEvent('setPeer', lastMsgId, false);
         } else if(topMessage && !isJump) {
           //this.log('will scroll down', this.scroll.scrollTop, this.scroll.scrollHeight);
           this.scroll.scrollTop = this.scroll.scrollHeight;
-          this.chat.setListenerResult('setPeer', lastMsgId, true);
+          this.chat.dispatchEvent('setPeer', lastMsgId, true);
         }
         
         return null;
@@ -1556,7 +1550,7 @@ export default class ChatBubbles {
         this.scrollable.scrollTop = this.scrollable.scrollHeight;
       }
 
-      this.chat.setListenerResult('setPeer', lastMsgId, !isJump);
+      this.chat.dispatchEvent('setPeer', lastMsgId, !isJump);
 
       // warning
       if(!lastMsgId || this.bubbles[topMessage] || lastMsgId === topMessage) {

src/components/chat/chat.ts

@@ -153,6 +153,18 @@ export default class Chat extends EventListenerBase<{
 
     this.container.classList.add('type-' + this.type);
     this.container.append(this.topbar.container, this.bubbles.bubblesContainer, this.input.chatInput);
+
+    this.bubbles.listenerSetter.add(rootScope, 'dialog_migrate', ({migrateFrom, migrateTo}) => {
+      if(this.peerId === migrateFrom) {
+        this.setPeer(migrateTo);
+      }
+    });
+
+    this.bubbles.listenerSetter.add(rootScope, 'dialog_drop', (e) => {
+      if(e.peerId === this.peerId) {
+        this.appImManager.setPeer(0);
+      }
+    });
   }
 
   public destroy() {

src/components/chat/topbar.ts

@@ -122,7 +122,7 @@ export default class ChatTopbar {
     // * fix topbar overflow section
 
     this.listenerSetter.add(window, 'resize', this.onResize);
-    mediaSizes.addListener('changeScreen', this.onChangeScreen);
+    mediaSizes.addEventListener('changeScreen', this.onChangeScreen);
 
     attachClickEvent(this.container, (e) => {
       const container: HTMLElement = findUpClassName(e.target, 'pinned-container');
@@ -311,7 +311,7 @@ export default class ChatTopbar {
     });
 
     if(this.pinnedMessage) {
-      this.chat.addListener('setPeer', (mid, isTopMessage) => {
+      this.chat.addEventListener('setPeer', (mid, isTopMessage) => {
         const middleware = this.chat.bubbles.getMiddleware();
         appStateManager.getState().then((state) => {
           if(!middleware()) return;
@@ -369,7 +369,7 @@ export default class ChatTopbar {
     //this.chat.log.error('Topbar destroying');
 
     this.listenerSetter.removeAll();
-    mediaSizes.removeListener('changeScreen', this.onChangeScreen);
+    mediaSizes.removeEventListener('changeScreen', this.onChangeScreen);
     window.clearInterval(this.setPeerStatusInterval);
     
     if(this.pinnedMessage) {

src/components/monkeys/password.ts

@@ -25,7 +25,7 @@ export default class PasswordMonkey {
     }, 'assets/img/TwoFactorSetupMonkeyPeek.tgs').then(_animation => {
       //return;
       this.animation = _animation;
-      this.animation.addListener('enterFrame', currentFrame => {
+      this.animation.addEventListener('enterFrame', currentFrame => {
         //console.log('enterFrame', currentFrame, this.needFrame);
 
         if((this.animation.direction === 1 && currentFrame >= this.needFrame) ||

src/components/monkeys/tracking.ts

@@ -110,7 +110,7 @@ export default class TrackingMonkey {
           this.animation.canvas.style.display = 'none';
         }
 
-        this.animation.addListener('enterFrame', currentFrame => {
+        this.animation.addEventListener('enterFrame', currentFrame => {
           //console.log('enterFrame', currentFrame, needFrame);
           //let currentFrame = Math.round(e.currentTime);
           

src/components/privacySection.ts

@@ -150,7 +150,7 @@ export default class PrivacySection {
         });
       }
 
-      options.tab.eventListener.addListener('destroy', () => {
+      options.tab.eventListener.addEventListener('destroy', () => {
         const rules: InputPrivacyRule[] = [];
 
         switch(this.type) {

src/components/sidebarLeft/tabs/notifications.ts

@@ -51,7 +51,7 @@ export default class AppNotificationsTab extends SliderSuperTabEventable {
         
         applySettings();
 
-        this.eventListener.addListener('destroy', () => {
+        this.eventListener.addEventListener('destroy', () => {
           const mute = !enabledRow.checkboxField.checked;
           const showPreviews = previewEnabledRow.checkboxField.checked;
 
@@ -117,7 +117,7 @@ export default class AppNotificationsTab extends SliderSuperTabEventable {
       appNotificationsManager.getContactSignUpNotification().then(enabled => {
         contactsSignUpRow.checkboxField.checked = enabled;
 
-        this.eventListener.addListener('destroy', () => {
+        this.eventListener.addEventListener('destroy', () => {
           const _enabled = contactsSignUpRow.checkboxField.checked;
           if(enabled !== _enabled) {
             appNotificationsManager.setContactSignUpNotification(!_enabled);

src/components/sidebarRight/index.ts

@@ -27,7 +27,7 @@ export class AppSidebarRight extends SidebarSlider {
 
     this.sharedMediaTab = sharedMediaTab;
 
-    mediaSizes.addListener('changeScreen', (from, to) => {
+    mediaSizes.addEventListener('changeScreen', (from, to) => {
       if(to === ScreenSize.medium && from !== ScreenSize.mobile) {
         this.toggleSidebar(false);
       }

src/components/sidebarRight/tabs/editGroup.ts

@@ -12,6 +12,7 @@ import { ChatFull } from "../../../layer";
 import PopupPeer from "../../popups/peer";
 import { addCancelButton } from "../../popups";
 import AppGroupTypeTab from "./groupType";
+import rootScope from "../../../lib/rootScope";
 
 export default class AppEditGroupTab extends SliderSuperTab {
   private groupNameInputField: InputField;
@@ -19,7 +20,11 @@ export default class AppEditGroupTab extends SliderSuperTab {
   private editPeer: EditPeer;
   public peerId: number;
 
-  protected async init() {
+  protected async _init() {
+    // * cleanup prev
+    this.listenerSetter.removeAll();
+    this.scrollable.container.innerHTML = '';
+
     this.container.classList.add('edit-peer-container', 'edit-group-container');
     this.title.innerHTML = 'Edit';
 
@@ -65,16 +70,22 @@ export default class AppEditGroupTab extends SliderSuperTab {
       if(appChatsManager.hasRights(-this.peerId, 'change_type')) {
         const groupTypeRow = new Row({
           title: 'Group Type',
-          subtitle: chat.username ? 'Public' : 'Private',
           clickable: () => {
             const tab = new AppGroupTypeTab(this.slider);
             tab.peerId = this.peerId;
             tab.chatFull = chatFull;
             tab.open();
+
+            this.listenerSetter.add(tab.eventListener, 'destroy', setGroupTypeSubtitle);
           },
           icon: 'lock'
         });
-  
+
+        const setGroupTypeSubtitle = () => {
+          groupTypeRow.subtitle.innerHTML = chat.username ? 'Public' : 'Private';
+        };
+
+        setGroupTypeSubtitle();
         section.content.append(groupTypeRow.container);
       }
 
@@ -186,5 +197,17 @@ export default class AppEditGroupTab extends SliderSuperTab {
 
       this.scrollable.append(section.container);
     }
+
+    // ! this one will fire earlier than tab's closeAfterTimeout (destroy) event and listeners will be erased, so destroy won't fire
+    this.listenerSetter.add(rootScope, 'dialog_migrate', ({migrateFrom, migrateTo}) => {
+      if(this.peerId === migrateFrom) {
+        this.peerId = migrateTo;
+        this._init();
+      }
+    });
+  }
+
+  protected init() {
+    return this._init();
   }
 }

src/components/sidebarRight/tabs/groupType.ts

@@ -10,11 +10,11 @@ import PopupConfirmAction from "../../popups/confirmAction";
 import RadioField from "../../radioField";
 import Row, { RadioFormFromRows } from "../../row";
 import { SettingSection } from "../../sidebarLeft";
-import { SliderSuperTab } from "../../slider";
 import { toast } from "../../toast";
 import { UsernameInputField } from "../../usernameInputField";
+import { SliderSuperTabEventable } from "../../sliderTab";
 
-export default class AppGroupTypeTab extends SliderSuperTab {
+export default class AppGroupTypeTab extends SliderSuperTabEventable {
   public peerId: number;
   public chatFull: ChatFull;
 
@@ -130,12 +130,12 @@ export default class AppGroupTypeTab extends SliderSuperTab {
     this.content.append(applyBtn);
 
     attachClickEvent(applyBtn, () => {
-      const unsetLoader = setButtonLoader(applyBtn);
+      /* const unsetLoader =  */setButtonLoader(applyBtn);
       const username = publicRow.radioField.checked ? linkInputField.getValue() : '';
       appChatsManager.migrateChat(-this.peerId).then(channelId => {
         return appChatsManager.updateUsername(channelId, username);
       }).then(() => {
-        unsetLoader();
+        //unsetLoader();
         this.close();
       });
     }, {listenerSetter: this.listenerSetter});

src/components/sliderTab.ts

@@ -105,7 +105,7 @@ export class SliderSuperTabEventable extends SliderSuperTab {
   }
 
   onCloseAfterTimeout() {
-    this.eventListener.setListenerResult('destroy');
+    this.eventListener.dispatchEvent('destroy');
     this.eventListener.cleanup();
     return super.onCloseAfterTimeout();
   }

src/components/wrappers.ts

@@ -955,7 +955,7 @@ export function wrapSticker({doc, div, middleware, lazyLoadQueue, group, play, o
 
         //const deferred = deferredPromise<void>();
   
-        animation.addListener('firstFrame', () => {
+        animation.addEventListener('firstFrame', () => {
           const element = div.firstElementChild;
           const needFadeIn = !element || element.tagName === 'svg';
 

src/helpers/eventListenerBase.ts

@@ -67,7 +67,7 @@ export default class EventListenerBase<Listeners extends {[name: string]: Functi
     this.listenerResults = {};
   }
 
-  public addListener(name: keyof Listeners, callback: Listeners[typeof name], once?: boolean) {
+  public addEventListener(name: keyof Listeners, callback: Listeners[typeof name], once?: boolean) {
     if(this.listenerResults.hasOwnProperty(name)) {
       callback(...this.listenerResults[name]);
       
@@ -80,7 +80,7 @@ export default class EventListenerBase<Listeners extends {[name: string]: Functi
     //e.add(this, name, {callback, once});
   }
 
-  public removeListener(name: keyof Listeners, callback: Listeners[typeof name]) {
+  public removeEventListener(name: keyof Listeners, callback: Listeners[typeof name]) {
     if(this.listeners[name]) {
       this.listeners[name].findAndSplice(l => l.callback === callback);
     }
@@ -88,7 +88,7 @@ export default class EventListenerBase<Listeners extends {[name: string]: Functi
   }
 
   // * must be protected, but who cares
-  public setListenerResult(name: keyof Listeners, ...args: ArgumentTypes<Listeners[typeof name]>) {
+  public dispatchEvent(name: keyof Listeners, ...args: ArgumentTypes<Listeners[typeof name]>) {
     if(this.reuseResults) {
       this.listenerResults[name] = args;
     }
@@ -111,7 +111,7 @@ export default class EventListenerBase<Listeners extends {[name: string]: Functi
         arr.push(listener.callback(...args));
 
         if(listener.once) {
-          this.removeListener(name, listener.callback);
+          this.removeEventListener(name, listener.callback);
         }
       });
 

src/helpers/mediaSizes.ts

@@ -111,7 +111,7 @@ class MediaSizes extends EventListenerBase<{
       //console.log('changeScreen', this.activeScreen, activeScreen);
 
       if(wasScreen !== undefined) {
-        this.setListenerResult('changeScreen', this.activeScreen, activeScreen);
+        this.dispatchEvent('changeScreen', this.activeScreen, activeScreen);
       }
     }
 

src/lib/appManagers/apiUpdatesManager.ts

@@ -618,7 +618,7 @@ export class ApiUpdatesManager {
 
       this.updatesState.syncLoading.then(() => {
         // * false for test purposes
-        /* false &&  */appStateManager.addListener('save', async() => {
+        /* false &&  */appStateManager.addEventListener('save', async() => {
           const us = this.updatesState;
           appStateManager.pushToState('updates', {
             seq: us.seq,

src/lib/appManagers/appDraftsManager.ts

@@ -22,7 +22,7 @@ export class AppDraftsManager {
     appStateManager.getState().then(state => {
       this.drafts = state.drafts;
 
-      appStateManager.addListener('save', async() => {
+      appStateManager.addEventListener('save', async() => {
         appStateManager.pushToState('drafts', this.drafts);
       });
     });

src/lib/appManagers/appImManager.ts

@@ -185,7 +185,7 @@ export class AppImManager {
     }
 
     // * fix simultaneous opened both sidebars, can happen when floating sidebar is opened with left sidebar
-    mediaSizes.addListener('changeScreen', (from, to) => {
+    mediaSizes.addEventListener('changeScreen', (from, to) => {
       if(document.body.classList.contains(LEFT_COLUMN_ACTIVE_CLASSNAME) 
         && document.body.classList.contains(RIGHT_COLUMN_ACTIVE_CLASSNAME)) {
         appSidebarRight.toggleSidebar(false);

src/lib/appManagers/appMessagesManager.ts

@@ -304,7 +304,7 @@ export class AppMessagesManager {
         });
       }
 
-      appStateManager.addListener('save', this.saveState);
+      appStateManager.addEventListener('save', this.saveState);
     });
 
     appNotificationsManager.start();
@@ -2753,14 +2753,14 @@ export class AppMessagesManager {
           this.migratedFromTo[migrateFrom] = migrateTo;
           this.migratedToFrom[migrateTo] = migrateFrom;
 
-        setTimeout(() => {
+        //setTimeout(() => {
+          rootScope.broadcast('dialog_migrate', {migrateFrom, migrateTo});
+
           const dropped = this.dialogsStorage.dropDialog(migrateFrom);
           if(dropped.length) {
             rootScope.broadcast('dialog_drop', {peerId: migrateFrom, dialog: dropped[0]});
           }
-
-          rootScope.broadcast('dialog_migrate', {migrateFrom, migrateTo});
-        }, 100);
+        //}, 100);
       }
     }
   }

src/lib/appManagers/appNotificationsManager.ts

@@ -134,7 +134,7 @@ export class AppNotificationsManager {
       this.unregisterDevice(tokenData);
     }); */
 
-    rootScope.addListener('dialogs_multiupdate', () => {
+    rootScope.addEventListener('dialogs_multiupdate', () => {
       //unregisterTopMsgs()
       this.topMessagesDeferred.resolve();
     }, true);

src/lib/appManagers/appStateManager.ts

@@ -230,7 +230,7 @@ export class AppStateManager extends EventListenerBase<{
 
     const tempId = this.tempId;
     this.savePromise = getHeavyAnimationPromise().then(() => {
-      return Promise.all(this.setListenerResult('save', this.state))
+      return Promise.all(this.dispatchEvent('save', this.state))
       .then(() => getHeavyAnimationPromise())
       .then(() => sessionStorage.set(this.state))
       .then(() => {

src/lib/appManagers/appUsersManager.ts

@@ -122,7 +122,7 @@ export class AppUsersManager {
         }
       }
 
-      appStateManager.addListener('save', async() => {
+      appStateManager.addEventListener('save', async() => {
         const contactsList = [...this.contactsList];
         for(const userId of contactsList) {
           appStateManager.setPeer(userId, this.getUser(userId));

src/lib/lottieLoader.ts

@@ -259,7 +259,7 @@ export class RLottiePlayer extends EventListenerBase<{
     }
     
     //console.log('set result enterFrame', frameNo);
-    this.setListenerResult('enterFrame', frameNo);
+    this.dispatchEvent('enterFrame', frameNo);
   }
 
   public renderFrame(frame: Uint8ClampedArray, frameNo: number) {
@@ -405,9 +405,9 @@ export class RLottiePlayer extends EventListenerBase<{
     return; */
 
     this.requestFrame(0);
-    this.setListenerResult('ready');
-    this.addListener('enterFrame', () => {
-      this.setListenerResult('firstFrame');
+    this.dispatchEvent('ready');
+    this.addEventListener('enterFrame', () => {
+      this.dispatchEvent('firstFrame');
 
       this.el.appendChild(this.canvas);
 
@@ -434,7 +434,7 @@ export class RLottiePlayer extends EventListenerBase<{
         }
       };
 
-      this.addListener('enterFrame', this.frameListener);
+      this.addEventListener('enterFrame', this.frameListener);
     }, true);
   }
 }
@@ -457,7 +457,7 @@ class QueryableWorker extends EventListenerBase<any> {
           return;
         } */
 
-        this.setListenerResult(event.data.queryMethodListener, ...event.data.queryMethodArguments);
+        this.dispatchEvent(event.data.queryMethodListener, ...event.data.queryMethodArguments);
       } else {
         this.defaultListener.call(this, event.data);
       }
@@ -578,12 +578,12 @@ class LottieLoader {
       for(let i = 0; i < this.workersLimit; ++i) {
         const worker = this.workers[i] = new QueryableWorker(new RLottieWorker());
 
-        worker.addListener('ready', () => {
+        worker.addEventListener('ready', () => {
           this.log('worker #' + i + ' ready');
 
-          worker.addListener('frame', this.onFrame);
-          worker.addListener('loaded', this.onPlayerLoaded);
-          worker.addListener('error', this.onPlayerError);
+          worker.addEventListener('frame', this.onFrame);
+          worker.addEventListener('loaded', this.onPlayerLoaded);
+          worker.addEventListener('error', this.onPlayerError);
 
           --remain;
           if(!remain) {

src/lib/mtproto/mtproto.worker.ts

@@ -63,11 +63,11 @@ const onMessage = async(e: any) => {
       
       const socketProxied = socketsProxied.get(id);
       if(socketTask.type === 'message') {
-        socketProxied.setListenerResult('message', socketTask.payload);
+        socketProxied.dispatchEvent('message', socketTask.payload);
       } else if(socketTask.type === 'open') {
-        socketProxied.setListenerResult('open');
+        socketProxied.dispatchEvent('open');
       } else if(socketTask.type === 'close') {
-        socketProxied.setListenerResult('close');
+        socketProxied.dispatchEvent('close');
         socketsProxied.delete(id);
       }
     }

src/lib/mtproto/mtprotoworker.ts

@@ -221,9 +221,9 @@ export class ApiManagerProxy extends CryptoWorkerMethods {
             }
           });
 
-          socket.removeListener('open', onOpen);
-          socket.removeListener('close', onClose);
-          socket.removeListener('message', onMessage);
+          socket.removeEventListener('open', onOpen);
+          socket.removeEventListener('close', onClose);
+          socket.removeEventListener('message', onMessage);
           this.sockets.delete(id);
         };
         const onMessage = (buffer: ArrayBuffer) => {
@@ -237,9 +237,9 @@ export class ApiManagerProxy extends CryptoWorkerMethods {
           });
         };
 
-        socket.addListener('open', onOpen);
-        socket.addListener('close', onClose);
-        socket.addListener('message', onMessage);
+        socket.addEventListener('open', onOpen);
+        socket.addEventListener('close', onClose);
+        socket.addEventListener('message', onMessage);
         this.sockets.set(id, socket);
       }
     } else if(task.hasOwnProperty('result') || task.hasOwnProperty('error')) {

src/lib/mtproto/transports/tcpObfuscated.ts

@@ -99,9 +99,9 @@ export default class TcpObfuscated implements MTTransport {
   private onClose = () => {
     this.connected = false;
 
-    this.connection.removeListener('open', this.onOpen);
-    this.connection.removeListener('close', this.onClose);
-    this.connection.removeListener('message', this.onMessage);
+    this.connection.removeEventListener('open', this.onOpen);
+    this.connection.removeEventListener('close', this.onClose);
+    this.connection.removeEventListener('message', this.onMessage);
     this.connection = undefined;
     
     const time = Date.now();
@@ -132,9 +132,9 @@ export default class TcpObfuscated implements MTTransport {
 
   private connect() {
     this.connection = new this.Connection(this.dcId, this.url, this.logSuffix);
-    this.connection.addListener('open', this.onOpen);
-    this.connection.addListener('close', this.onClose);
-    this.connection.addListener('message', this.onMessage);
+    this.connection.addEventListener('open', this.onOpen);
+    this.connection.addEventListener('close', this.onClose);
+    this.connection.addEventListener('message', this.onMessage);
   }
 
   private encodeBody(body: Uint8Array) {

src/lib/mtproto/transports/websocket.ts

@@ -64,7 +64,7 @@ export default class Socket extends EventListenerBase<{
     this.log('opened');
 
     this.debug && this.log.debug('sending init packet');
-    this.setListenerResult('open');
+    this.dispatchEvent('open');
   };
 
   private handleError = (e: Event) => {
@@ -76,13 +76,13 @@ export default class Socket extends EventListenerBase<{
     this.log('closed'/* , event, this.pending, this.ws.bufferedAmount */);
 
     this.removeListeners();
-    this.setListenerResult('close');
+    this.dispatchEvent('close');
   };
 
   private handleMessage = (event: MessageEvent) => {
     this.debug && this.log.debug('<-', 'handleMessage', /* event,  */event.data.byteLength);
 
-    this.setListenerResult('message', event.data as ArrayBuffer);
+    this.dispatchEvent('message', event.data as ArrayBuffer);
   };
 
   public send = (body: Uint8Array) => {

src/lib/rootScope.ts

@@ -142,17 +142,17 @@ class RootScope extends EventListenerBase<any> {
       }
     //} */
 
-    this.setListenerResult(name, detail);
+    this.dispatchEvent(name, detail);
   };
 
-  public on = <T extends keyof BroadcastEvents>(name: T, callback: (e: BroadcastEvents[T]) => any) => {
-    this.addListener(name, callback);
+  public on = <T extends keyof BroadcastEvents>(name: T, callback: (e: BroadcastEvents[T]) => any, once?: true) => {
+    super.addEventListener(name, callback, once);
   };
 
   public addEventListener = this.on;
 
   public off = <T extends keyof BroadcastEvents>(name: T, callback: (e: BroadcastEvents[T]) => any) => {
-    this.removeListener(name, callback);
+    super.removeEventListener(name, callback);
   };
 
   public removeEventListener = this.off;

src/scss/partials/_button.scss

@@ -76,6 +76,11 @@
     opacity: 1 !important;
     pointer-events: all !important;
   }
+
+  .preloader-circular {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
 }
 
 .btn-menu {