Members temp commit

src/components/appSearchSuper..ts

@@ -111,8 +111,9 @@ export default class AppSearchSuper {
   public asChatList? = false;
   public groupByMonth? = true;
   public hideEmptyTabs? = true;
+  public onChangeTab?: (mediaTab: SearchSuperMediaTab) => void;
 
-  constructor(options: Pick<AppSearchSuper, 'mediaTabs' | 'scrollable' | 'searchGroups' | 'asChatList' | 'groupByMonth' | 'hideEmptyTabs'>) {
+  constructor(options: Pick<AppSearchSuper, 'mediaTabs' | 'scrollable' | 'searchGroups' | 'asChatList' | 'groupByMonth' | 'hideEmptyTabs' | 'onChangeTab'>) {
     safeAssign(this, options);
 
     this.container = document.createElement('div');
@@ -215,6 +216,10 @@ export default class AppSearchSuper {
 
       this.mediaTab = newMediaTab;
 
+      if(this.onChangeTab) {
+        this.onChangeTab(this.mediaTab);
+      }
+      
       /* if(this.prevTabId !== -1 && nav.offsetTop) {
         this.scrollable.scrollTop -= nav.offsetTop;
       } */

src/components/sidebarLeft/tabs/addMembers.ts

@@ -14,7 +14,7 @@ export default class AppAddMembersTab extends SliderSuperTab {
   private nextBtn: HTMLButtonElement;
   private selector: AppSelectPeers;
   private peerType: 'channel' | 'chat' | 'privacy';
-  private takeOut: (peerIds: number[]) => Promise<any> | any;
+  private takeOut: (peerIds: number[]) => Promise<any> | false | void;
   private skippable: boolean;
 
   protected init() {
@@ -31,6 +31,15 @@ export default class AppAddMembersTab extends SliderSuperTab {
         const promise = this.takeOut(peerIds);
 
         if(promise instanceof Promise) {
+          this.attachToPromise(promise);
+        } else if(promise === undefined) {
+          this.close();
+        }
+      }
+    });
+  }
+
+  public attachToPromise(promise: Promise<any>) {
     this.nextBtn.classList.remove('tgico-arrow_next');
     this.nextBtn.disabled = true;
     putPreloader(this.nextBtn);
@@ -39,11 +48,6 @@ export default class AppAddMembersTab extends SliderSuperTab {
     promise.then(() => {
       this.close();
     });
-        } else {
-          this.close();
-        }
-      }
-    });
   }
 
   public open(options: {

src/components/sidebarRight/tabs/editGroup.ts

@@ -9,14 +9,11 @@ import InputField from "../../inputField";
 import EditPeer from "../../editPeer";
 import { SettingSection } from "../../sidebarLeft";
 import Row from "../../row";
-import CheckboxField from "../../checkboxField";
 import Button from "../../button";
 import appChatsManager, { ChatRights } from "../../../lib/appManagers/appChatsManager";
 import appProfileManager from "../../../lib/appManagers/appProfileManager";
 import { attachClickEvent, toggleDisability } from "../../../helpers/dom";
 import { ChatFull } from "../../../layer";
-import PopupPeer from "../../popups/peer";
-import { addCancelButton } from "../../popups";
 import AppGroupTypeTab from "./groupType";
 import rootScope from "../../../lib/rootScope";
 import AppGroupPermissionsTab from "./groupPermissions";

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -28,7 +28,7 @@ import appChatsManager, { Channel } from "../../../lib/appManagers/appChatsManag
 import { Chat, UserProfilePhoto } from "../../../layer";
 import Button from "../../button";
 import ButtonIcon from "../../buttonIcon";
-import I18n, { i18n } from "../../../lib/langPack";
+import I18n, { i18n, LangPackKey } from "../../../lib/langPack";
 import { SettingSection } from "../../sidebarLeft";
 import Row from "../../row";
 import { copyTextToClipboard } from "../../../helpers/clipboard";
@@ -40,6 +40,9 @@ import appPhotosManager from "../../../lib/appManagers/appPhotosManager";
 import renderImageFromUrl from "../../../helpers/dom/renderImageFromUrl";
 import SwipeHandler from "../../swipeHandler";
 import { MOUNT_CLASS_TO } from "../../../config/debug";
+import AppAddMembersTab from "../../sidebarLeft/tabs/addMembers";
+import PopupPickUser from "../../popups/pickUser";
+import PopupPeer from "../../popups/peer";
 
 let setText = (text: string, row: Row) => {
   fastRaf(() => {
@@ -767,14 +770,83 @@ export default class AppSharedMediaTab extends SliderSuperTab {
         name: 'SharedMusicTab2',
         type: 'music'
       }], 
-      scrollable: this.scrollable
+      scrollable: this.scrollable,
+      onChangeTab: (mediaTab) => {
+        let timeout = mediaTab.type === 'members' && rootScope.settings.animationsEnabled ? 250 : 0;
+        setTimeout(() => {
+          btnAddMembers.classList.toggle('is-hidden', mediaTab.type !== 'members');
+        }, timeout);
+      }
     });
 
     this.profile.element.append(this.searchSuper.container);
 
-    const btnAddMembers = Button('btn-corner btn-circle', {icon: 'adduser'});
+    const btnAddMembers = Button('btn-corner btn-circle', {icon: 'addmember_filled'});
     this.content.append(btnAddMembers);
 
+    btnAddMembers.addEventListener('click', () => {
+      const id = -this.peerId;
+      const isChannel = appChatsManager.isChannel(id);
+
+      const showConfirmation = (peerIds: number[], callback: () => void) => {
+        let titleLangKey: LangPackKey = 'GroupAddMembers', descriptionLangKey: LangPackKey, descriptionLangArgs: any[];
+
+        if(peerIds.length > 1) {
+          descriptionLangKey = 'PeerInfo.Confirm.AddMembers1';
+          descriptionLangArgs = [peerIds.length];
+        } else {
+          descriptionLangKey = 'PeerInfo.Confirm.AddMember';
+          descriptionLangArgs = [new PeerTitle({
+            peerId: peerIds[0],
+            onlyFirstName: true
+          }).element];
+        }
+
+        new PopupPeer('popup-add-members', {
+          peerId: -id,
+          titleLangKey,
+          descriptionLangKey,
+          descriptionLangArgs,
+          buttons: [{
+            langKey: 'Add',
+            callback: () => {
+              callback();
+            }
+          }]
+        }).show();
+      };
+      
+      if(isChannel) {
+        const tab = new AppAddMembersTab(this.slider);
+        tab.open({
+          peerId: this.peerId,
+          type: 'channel',
+          skippable: false,
+          takeOut: (peerIds) => {
+            showConfirmation(peerIds, () => {
+              tab.attachToPromise(appChatsManager.inviteToChannel(id, peerIds));
+            });
+
+            return false;
+          },
+          title: 'GroupAddMembers',
+          placeholder: 'SendMessageTo'
+        });
+      } else {
+        new PopupPickUser({
+          peerTypes: ['contacts'],
+          placeholder: 'Search',
+          onSelect: (peerId) => {
+            setTimeout(() => {
+              showConfirmation([peerId], () => {
+                appChatsManager.addChatUser(id, peerId);
+              });
+            }, 0);
+          },
+        });
+      }
+    });
+
     console.log('construct shared media time:', performance.now() - perf);
   }
 

src/lang.ts

@@ -529,6 +529,12 @@ const lang = {
   "PeerInfo.SharedMedia": "Shared Media",
   "PeerInfo.Subscribers": "Subscribers",
   "PeerInfo.DeleteContact": "Delete Contact",
+  "PeerInfo.Confirm.AddMembers1": {
+    "one_value": "Add %d user to the group?",
+    "other_value": "Add %d users to the group?"
+  },
+  "PeerInfo.Confirm.AddMember": "Add \"%@\" to the group?",
+  //"PeerInfo.Confirm.RemovePeer": "Remove %@ from the group?",
   "PeerMedia.Members": "Members",
   "PollResults.Title.Poll": "Poll Results",
   "PollResults.Title.Quiz": "Quiz Results",

src/lib/appManagers/appChatsManager.ts

@@ -582,6 +582,14 @@ export class AppChatsManager {
     }).then(this.onChatUpdated.bind(this, id));
   }
 
+  public addChatUser(id: number, userId: number, fwdLimit = 100) {
+    return apiManager.invokeApi('messages.addChatUser', {
+      chat_id: id,
+      user_id: appUsersManager.getUserInput(userId),
+      fwd_limit: fwdLimit
+    }).then(this.onChatUpdated.bind(this, id));
+  }
+
   public deleteChatUser(id: number, userId: number) {
     return apiManager.invokeApi('messages.deleteChatUser', {
       chat_id: id,

src/scss/partials/_rightSidebar.scss

@@ -126,6 +126,36 @@
       align-items: center;
     }
   }
+
+  .btn-corner {
+    &.menu-open:before {
+      content: $tgico-close;
+    }
+
+    @include respond-to(handhelds) {
+      width: 54px;
+      height: 54px;
+      bottom: 14px;
+      right: 14px;
+
+      position: fixed !important;
+      z-index: 1;
+    }
+  }
+
+  &.can-add-members {
+    @include respond-to(handhelds) {
+      .btn-corner:not(.is-hidden) {
+        transform: translateZ(0);
+      }
+    }
+
+    @include hover() {
+      .btn-corner:not(.is-hidden) {
+        transform: translateZ(0);
+      }
+    }
+  }
 }
 
 .search-super {