Fix navigation

Fix stickers playback on page start

src/components/appNavigationController.ts

@@ -106,23 +106,23 @@ export class AppNavigationController {
     this.manual = false;
   }
 
-  public back(type?: NavigationItem['type']) {
+  public findItemByType(type: NavigationItem['type']) {
-    if(type) {
+    for(let i = this.navigations.length - 1; i >= 0; --i) {
-      let item: NavigationItem;
+      const item = this.navigations[i];
-      let i = this.navigations.length - 1;
+      if(item.type === type) {
-      for(; i >= 0; --i) {
+        return {item, index: i};
-        const _item = this.navigations[i];
+      }
-        if(_item.type === type) {
-          item = _item;
-          break;
     }
   }
 
-      if(item) {
+  public back(type?: NavigationItem['type']) {
+    if(type) {
+      const ret = this.findItemByType(type);
+      if(ret) {
         this.manual = true;
-        if(i !== (this.navigations.length - 1)) {
+        if(ret.index !== (this.navigations.length - 1)) {
-          this.navigations.splice(i, 1);
+          this.navigations.splice(ret.index, 1);
-          this.handleItem(item);
+          this.handleItem(ret.item);
           return;
         }
       }

src/components/chat/bubbleGroups.ts

@@ -1,7 +1,7 @@
 import rootScope from "../../lib/rootScope";
 //import { generatePathData } from "../../helpers/dom";
 import { MyMessage } from "../../lib/appManagers/appMessagesManager";
-import Chat from "./chat";
+import type Chat from "./chat";
 
 type Group = {bubble: HTMLElement, mid: number, timestamp: number}[];
 type BubbleGroup = {timestamp: number, fromId: number, mid: number, group: Group};
@@ -18,7 +18,8 @@ export default class BubbleGroups {
 
   removeBubble(bubble: HTMLElement) {
     const details = this.detailsMap.get(bubble);
-    if(details && details.group.length) {
+    if(details) {
+      if(details.group.length) {
         details.group.findAndSplice(d => d.bubble === bubble);
         if(!details.group.length) {
           this.groups.findAndSplice(g => g === details.group);
@@ -26,6 +27,9 @@ export default class BubbleGroups {
           this.updateGroup(details.group);
         }
       }
+      
+      this.detailsMap.delete(bubble);
+    }
   }
   
   addBubble(bubble: HTMLElement, message: MyMessage, reverse: boolean) {

src/components/chat/chat.ts

@@ -201,7 +201,7 @@ export default class Chat extends EventListenerBase<{
     // set new
     if(!samePeer) {
       if(appSidebarRight.historyTabIds[appSidebarRight.historyTabIds.length - 1] === AppSidebarRight.SLIDERITEMSIDS.search) {
-        appSidebarRight.closeTab(AppSidebarRight.SLIDERITEMSIDS.search);
+        appSidebarRight.onCloseBtnClick();
       }
 
       appSidebarRight.sharedMediaTab.setPeer(peerId, this.threadId);

src/components/chat/topbar.ts

@@ -19,6 +19,7 @@ import ListenerSetter from "../../helpers/listenerSetter";
 import appStateManager from "../../lib/appManagers/appStateManager";
 import PopupDeleteDialog from "../popups/deleteDialog";
 import appNavigationController from "../appNavigationController";
+import { LEFT_COLUMN_ACTIVE_CLASSNAME } from "../sidebarLeft";
 
 export default class ChatTopbar {
   container: HTMLDivElement;
@@ -135,17 +136,39 @@ export default class ChatTopbar {
         } else {
           this.chat.appImManager.setInnerPeer(peerId, mid);
         }
+      } else {
+        if(mediaSizes.activeScreen === ScreenSize.medium && document.body.classList.contains(LEFT_COLUMN_ACTIVE_CLASSNAME)) {
+          onBtnBackClick();
         } else {
           this.appSidebarRight.toggleSidebar(true);
         }
+      }
     }, {listenerSetter: this.listenerSetter});
 
-    attachClickEvent(this.btnBack, (e) => {
+    const onBtnBackClick = (e?: Event) => {
+      if(e) {
         cancelEvent(e);
-      /* this.chat.appImManager.setPeer(0);
+      }
-      blurActiveElement(); */
+
+      //const item = appNavigationController.findItemByType('chat');
+      // * return manually to chat by arrow, since can't get back to
+      if(mediaSizes.activeScreen === ScreenSize.medium && document.body.classList.contains(LEFT_COLUMN_ACTIVE_CLASSNAME)) {
+        this.chat.appImManager.setPeer(this.peerId);
+      } else {
+        const isFirstChat = this.chat.appImManager.chats.indexOf(this.chat) === 0;
+        appNavigationController.back(isFirstChat ? 'im' : 'chat');
+        return;
+
+        if(mediaSizes.activeScreen === ScreenSize.medium && !appNavigationController.findItemByType('chat')) {
+          this.chat.appImManager.setPeer(0);
+          blurActiveElement();
+        } else {
           appNavigationController.back('chat');
-    }, {listenerSetter: this.listenerSetter});
+        }
+      }
+    };
+
+    attachClickEvent(this.btnBack, onBtnBackClick, {listenerSetter: this.listenerSetter});
   }
 
   public constructUtils() {

src/components/sidebarLeft/index.ts

@@ -24,6 +24,8 @@ import AppContactsTab from "./tabs/contacts";
 import AppArchivedTab from "./tabs/archivedTab";
 import AppAddMembersTab from "./tabs/addMembers";
 
+export const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
+
 export class AppSidebarLeft extends SidebarSlider {
   private toolsBtn: HTMLButtonElement;
   private backBtn: HTMLButtonElement;

src/components/sidebarRight/index.ts

@@ -58,12 +58,12 @@ export class AppSidebarRight extends SidebarSlider {
     });
   }
 
-  public onCloseTab(id: number, animate: boolean) {
+  public onCloseTab(id: number, animate: boolean, isNavigation?: boolean) {
     if(!this.historyTabIds.length) {
       this.toggleSidebar(false, animate);
     }
 
-    super.onCloseTab(id, animate);
+    super.onCloseTab(id, animate, isNavigation);
   }
 
   /* public selectTab(id: number) {

src/components/sidebarRight/tabs/gifs.ts

@@ -52,7 +52,7 @@ export default class AppGifsTab implements SliderTab {
     const fileId = target.dataset.docId;
     if(appImManager.chat.input.sendMessageWithDocument(fileId)) {
       if(mediaSizes.isMobile) {
-        appSidebarRight.closeTab(AppSidebarRight.SLIDERITEMSIDS.gifs);
+        appSidebarRight.onCloseBtnClick();
       }
     } else {
       console.warn('got no doc by id:', fileId);

src/components/sidebarRight/tabs/pollResults.ts

@@ -71,7 +71,7 @@ export default class AppPollResultsTab implements SliderTab {
       list.classList.add('poll-results-voters');
 
       appDialogsManager.setListClickListener(list, () => {
-        appSidebarRight.closeTab(AppSidebarRight.SLIDERITEMSIDS.pollResults);
+        appSidebarRight.onCloseBtnClick();
       }, undefined, true);
 
       list.style.minHeight = Math.min(result.voters, 4) * 50 + 'px';

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -115,7 +115,7 @@ export default class AppSharedMediaTab implements SliderTab {
         transition(0);
         closeIcon.classList.remove('state-back');
       } else if(!this.scroll.isHeavyAnimationInProgress) {
-        appSidebarRight.closeTab();
+        appSidebarRight.onCloseBtnClick();
       }
     });
 

src/components/slider.ts

@@ -44,19 +44,19 @@ export default class SidebarSlider {
     });
   }
 
-  private onCloseBtnClick = () => {
+  public onCloseBtnClick = () => {
     appNavigationController.back(this.navigationType);
     // this.closeTab();
   };
 
-  public closeTab = (id?: number | SliderSuperTab, animate?: boolean) => {
+  public closeTab = (id?: number | SliderSuperTab, animate?: boolean, isNavigation?: boolean) => {
     if(id !== undefined && this.historyTabIds[this.historyTabIds.length - 1] !== id) {
       return false;
     }
 
     //console.log('sidebar-close-button click:', this.historyTabIDs);
     const closingId = this.historyTabIds.pop(); // pop current
-    this.onCloseTab(closingId, animate);
+    this.onCloseTab(closingId, animate, isNavigation);
 
     const tab = this.historyTabIds[this.historyTabIds.length - 1];
     this._selectTab(tab !== undefined ? (tab instanceof SliderSuperTab ? tab.container : tab) : (this.canHideFirst ? -1 : 0), animate);
@@ -89,7 +89,7 @@ export default class SidebarSlider {
       appNavigationController.pushItem({
         type: this.navigationType, 
         onPop: (canAnimate) => {
-          this.closeTab(undefined, canAnimate);
+          this.closeTab(undefined, canAnimate, true);
           return true;
         }
       });
@@ -117,7 +117,11 @@ export default class SidebarSlider {
     }
   }
 
-  public onCloseTab(id: number | SliderSuperTab, animate: boolean) {
+  protected onCloseTab(id: number | SliderSuperTab, animate: boolean, isNavigation?: boolean) {
+    if(!isNavigation) {
+      appNavigationController.removeByType(this.navigationType, true);
+    }
+
     const tab: SliderTab = id instanceof SliderSuperTab ? id : this.tabs.get(id);
     if(tab) {
       if(tab.onClose) {

src/lib/appManagers/appImManager.ts

@@ -1,6 +1,6 @@
 //import apiManager from '../mtproto/apiManager';
 import animationIntersector from '../../components/animationIntersector';
-import appSidebarLeft from "../../components/sidebarLeft";
+import appSidebarLeft, { LEFT_COLUMN_ACTIVE_CLASSNAME } from "../../components/sidebarLeft";
 import appSidebarRight, { AppSidebarRight, RIGHT_COLUMN_ACTIVE_CLASSNAME } from '../../components/sidebarRight';
 import mediaSizes, { ScreenSize } from '../../helpers/mediaSizes';
 import { logger, LogLevels } from "../logger";
@@ -41,8 +41,6 @@ import appNavigationController from '../../components/appNavigationController';
 
 appSidebarLeft; // just to include
 
-const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
-
 export const CHAT_ANIMATION_GROUP = 'chat';
 const FOCUS_EVENT_NAME = isTouchSupported ? 'touchstart' : 'mousemove';
 
@@ -59,7 +57,7 @@ export class AppImManager {
 
   public tabId = -1;
   
-  private chats: Chat[] = [];
+  public chats: Chat[] = [];
   private prevTab: HTMLElement;
   private chatsSelectTabDebounced: () => void;
   
@@ -86,7 +84,7 @@ export class AppImManager {
       this.offline = rootScope.idle.isIDLE = true;
       this.updateStatus();
       clearInterval(this.updateStatusInterval);
-      rootScope.broadcast('idle', true);
+      rootScope.broadcast('idle', rootScope.idle.isIDLE);
       
       window.addEventListener('focus', () => {
         this.offline = rootScope.idle.isIDLE = false;
@@ -96,7 +94,7 @@ export class AppImManager {
         // в обратном порядке
         animationIntersector.checkAnimations(false);
 
-        rootScope.broadcast('idle', false);
+        rootScope.broadcast('idle', rootScope.idle.isIDLE);
       }, {once: true});
     });
 
@@ -105,7 +103,8 @@ export class AppImManager {
       this.updateStatusInterval = window.setInterval(() => this.updateStatus(), 50e3);
       this.updateStatus();
 
-      rootScope.broadcast('idle', false);
+      this.offline = rootScope.idle.isIDLE = false;
+      rootScope.broadcast('idle', rootScope.idle.isIDLE);
     }, {once: true, passive: true});
 
     this.chatsContainer = document.createElement('div');
@@ -566,7 +565,8 @@ export class AppImManager {
       document.body.classList.remove(RIGHT_COLUMN_ACTIVE_CLASSNAME);
     }
 
-    if(prevTabId !== -1 && id > prevTabId && id < 2) {
+    if(prevTabId !== -1 && id > prevTabId) {
+      if(id < 2 || !appNavigationController.findItemByType('im')) {
         appNavigationController.pushItem({
           type: 'im', 
           onPop: (canAnimate) => {
@@ -575,6 +575,7 @@ export class AppImManager {
           }
         });
       }
+    }
 
     rootScope.broadcast('im_tab_change', id);
 
@@ -623,7 +624,7 @@ export class AppImManager {
       rootScope.broadcast('peer_changed', this.chat.peerId);
 
       if(appSidebarRight.historyTabIds[appSidebarRight.historyTabIds.length - 1] === AppSidebarRight.SLIDERITEMSIDS.search) {
-        appSidebarRight.closeTab(AppSidebarRight.SLIDERITEMSIDS.search);
+        appSidebarRight.onCloseBtnClick();
       }
   
       appSidebarRight.sharedMediaTab.setPeer(this.chat.peerId, this.chat.threadId);