Handle t.me/joinchat

src/components/popups/createPoll.ts

@@ -12,7 +12,6 @@ import InputField from "../inputField";
 import RadioField from "../radioField";
 import Scrollable from "../scrollable";
 import SendContextMenu from "../chat/sendContextMenu";
-import { MessageEntity } from "../../layer";
 import I18n, { _i18n, i18n } from "../../lib/langPack";
 import findUpTag from "../../helpers/dom/findUpTag";
 import { cancelEvent } from "../../helpers/dom/cancelEvent";

src/components/popups/joinChatInvite.ts

@@ -0,0 +1,80 @@
+/*
+ * https://github.com/morethanwords/tweb
+ * Copyright (C) 2019-2021 Eduard Kuzmenko
+ * https://github.com/morethanwords/tweb/blob/master/LICENSE
+ */
+
+import PopupElement, { addCancelButton } from ".";
+import { ChatInvite, Updates } from "../../layer";
+import apiUpdatesManager from "../../lib/appManagers/apiUpdatesManager";
+import appAvatarsManager from "../../lib/appManagers/appAvatarsManager";
+import appPhotosManager from "../../lib/appManagers/appPhotosManager";
+import { i18n } from "../../lib/langPack";
+import apiManager from "../../lib/mtproto/mtprotoworker";
+import RichTextProcessor from "../../lib/richtextprocessor";
+import rootScope from "../../lib/rootScope";
+import AvatarElement from "../avatar";
+import { wrapPhoto } from "../wrappers";
+
+// const FAKE_CHAT_ID = Number.MAX_SAFE_INTEGER - 0x1000;
+
+export default class PopupJoinChatInvite extends PopupElement {
+  constructor(hash: string, chatInvite: ChatInvite.chatInvite) {
+    super('popup-join-chat-invite', addCancelButton([{
+      langKey: chatInvite.pFlags.broadcast ? 'JoinByPeekChannelTitle' : 'JoinByPeekGroupTitle',
+      callback: () => {
+        apiManager.invokeApi('messages.importChatInvite', {hash})
+        .then((updates) => {
+          apiUpdatesManager.processUpdateMessage(updates);
+          const chat = (updates as Updates.updates).chats[0];
+          const peerId = -chat.id;
+          rootScope.dispatchEvent('history_focus', {peerId});
+        });
+      }
+    }]), {closable: true, overlayClosable: true, body: true});
+
+    this.header.remove();
+
+    /* const fakeChat: Chat.channel | Chat.chat = {
+      _: chatInvite.pFlags.channel ? 'channel' : 'chat',
+      id: FAKE_CHAT_ID,
+      title: chatInvite.title,
+      photo: chatInvite.photo as any,
+      date: Date.now() / 1000 | 0,
+      version: 0,
+      participants_count: chatInvite.participants_count,
+      pFlags: chatInvite.pFlags as any
+    };
+
+    appChatsManager.saveApiChat(fakeChat); */
+    
+    const avatarElem = new AvatarElement();
+    avatarElem.setAttribute('dialog', '0');
+    avatarElem.classList.add('avatar-100');
+    if(chatInvite.photo._ === 'photo') {
+      chatInvite.photo = appPhotosManager.savePhoto(chatInvite.photo);
+      wrapPhoto({
+        container: avatarElem,
+        message: null,
+        photo: chatInvite.photo,
+        boxHeight: 100,
+        boxWidth: 100,
+        withoutPreloader: true
+      });
+      avatarElem.style.width = avatarElem.style.height = '';
+    } else {
+      appAvatarsManager.putPhoto(avatarElem, -0, false, chatInvite.title);
+    }
+
+    const title = document.createElement('div');
+    title.classList.add('chat-title');
+    title.innerHTML = RichTextProcessor.wrapEmojiText(chatInvite.title);
+    //avatarElem.setAttribute('peer', '' + -fakeChat.id);
+    
+    const isBroadcast = chatInvite.pFlags.broadcast;
+    const peopleCount = i18n(isBroadcast ? 'Subscribers' : 'Members', [chatInvite.participants_count]);
+    peopleCount.classList.add('chat-participants-count');
+
+    this.body.append(avatarElem, title, peopleCount);
+  }
+}

src/lang.ts

@@ -480,6 +480,8 @@ const lang = {
   },
   "TodayAtFormattedWithToday": "today at %1$s",
   "formatDateAtTime": "%1$s at %2$s",
+  "JoinByPeekChannelTitle": "Join Channel",
+  "JoinByPeekGroupTitle": "Join Group",
 
   // * macos
   "AccountSettings.Filters": "Chat Folders",

src/lib/appManagers/appChatsManager.ts

@@ -457,10 +457,10 @@ export class AppChatsManager {
       broadcast: true,
       title,
       about
-    }).then((updates: any) => {
+    }).then((updates) => {
       apiUpdatesManager.processUpdateMessage(updates);
 
-      const channelId = updates.chats[0].id;
+      const channelId = (updates as any).chats[0].id;
       rootScope.dispatchEvent('history_focus', {peerId: -channelId});
 
       return channelId;

src/lib/appManagers/appImManager.ts

@@ -43,7 +43,7 @@ import appNavigationController from '../../components/appNavigationController';
 import appNotificationsManager from './appNotificationsManager';
 import AppPrivateSearchTab from '../../components/sidebarRight/tabs/search';
 import { i18n, LangPackKey } from '../langPack';
-import { SendMessageAction } from '../../layer';
+import { ChatInvite, SendMessageAction } from '../../layer';
 import { hslaStringToHex } from '../../helpers/color';
 import { copy, getObjectKeysAndSort } from '../../helpers/object';
 import { getFilesFromEvent } from '../../helpers/files';
@@ -60,6 +60,7 @@ import appEmojiManager from './appEmojiManager';
 import PopupElement from '../../components/popups';
 import singleInstance from '../mtproto/singleInstance';
 import PopupStickers from '../../components/popups/stickers';
+import PopupJoinChatInvite from '../../components/popups/joinChatInvite';
 
 //console.log('appImManager included33!');
 
@@ -224,7 +225,9 @@ export class AppImManager {
       stateStorage.setToCache('chatPositions', c || {});
     });
 
-    this.addAnchorListener('showMaskedAlert', (params, element) => {
+    this.addAnchorListener<void>({
+      name: 'showMaskedAlert', 
+      callback: (params, element) => {
         const href = element.href;
 
         const a = element.cloneNode(true) as HTMLAnchorElement;
@@ -243,9 +246,13 @@ export class AppImManager {
             },
           }]
         }).show();
-    }, false);
+      }, 
+      noParams: true
+    });
 
-    this.addAnchorListener('execBotCommand', (params) => {
+    this.addAnchorListener<{command: string, bot: string}>({
+      name: 'execBotCommand', 
+      callback: (params) => {
         const {command, bot} = params;
 
         /* const promise = bot ? this.openUsername(bot).then(() => this.chat.peerId) : Promise.resolve(this.chat.peerId);
@@ -256,34 +263,70 @@ export class AppImManager {
         appMessagesManager.sendText(this.chat.peerId, '/' + command + (bot ? '@' + bot : ''));
 
         //console.log(command, bot);
+      }
     });
 
-    this.addAnchorListener('searchByHashtag', (params) => {
+    this.addAnchorListener<{hashtag: string}>({
+      name: 'searchByHashtag', 
+      callback: (params) => {
         if(!params) {
           return;
         }
 
         const {hashtag} = params;
         this.chat.initSearch('#' + hashtag + ' ');
+      }
     });
 
-    this.addAnchorListener('addstickers', (params) => {
+    this.addAnchorListener<['addstickers', string]>({
+      name: 'addstickers', 
+      callback: (params) => {
         new PopupStickers({id: params[1]}).show();
-    }, true);
+      }, 
+      parsePathname: true
+    });
+
+    this.addAnchorListener<['joinchat', string]>({
+      name: 'joinchat', 
+      callback: (params) => {
+        apiManager.invokeApi('messages.checkChatInvite', {
+          hash: params[1]
+        }).then(chatInvite => {
+          if((chatInvite as ChatInvite.chatInvitePeek).chat) {
+            appChatsManager.saveApiChat((chatInvite as ChatInvite.chatInvitePeek).chat, true);
           }
 
-  private addAnchorListener(name: 'showMaskedAlert' | 'execBotCommand' | 'searchByHashtag' | 'addstickers', 
-    callback: (params: any, element: HTMLAnchorElement) => boolean | void, parseParams = true) {
-    (window as any)[name] = (element: HTMLAnchorElement, e: Event) => {
+          // console.log(chatInvite);
+
+          if(chatInvite._ === 'chatInviteAlready' ||
+            chatInvite._ === 'chatInvitePeek'/*  && chatInvite.expires > tsNow(true) */) {
+            this.setInnerPeer(-chatInvite.chat.id);
+            return;
+          }
+
+          new PopupJoinChatInvite(params[1], chatInvite).show();
+        });
+      },
+      parsePathname: true
+    });
+  }
+
+  private addAnchorListener<Params extends any>(options: {
+    name: 'showMaskedAlert' | 'execBotCommand' | 'searchByHashtag' | 'addstickers' | 'joinchat', 
+    callback: (params: Params, element: HTMLAnchorElement) => boolean | void, 
+    noParams?: boolean, 
+    parsePathname?: boolean
+  }) {
+    (window as any)[options.name] = (element: HTMLAnchorElement/* , e: Event */) => {
       cancelEvent(null);
 
       const href = element.href;
       let params: any;
-      if(parseParams) {
-        params = !element.href.includes('#') ? new URL(element.href).pathname.split('/').slice(1) : this.parseUriParams(href);
+      if(!options.noParams) {
+        params = options.parsePathname ? new URL(element.href).pathname.split('/').slice(1) : this.parseUriParams(href);
       }
 
-      const res = callback(params, element);
+      const res = options.callback(params, element);
       return res === undefined ? res : false;
     };
   }

src/scss/partials/_avatar.scss

@@ -81,6 +81,10 @@ avatar-element {
     line-height: inherit !important;
   }
 
+  &.media-container {
+    position: relative;
+  }
+  
   img {
     //width: 100% !important;
     //height: 100% !important;

src/scss/partials/popups/_joinChatInvite.scss

@@ -0,0 +1,20 @@
+.popup-join-chat-invite {
+  user-select: none;
+  
+  .popup-body {
+    align-items: center;
+    padding: .5rem 0 1.25rem;
+  }
+
+  .chat-title {
+    font-weight: bold;
+    margin: .75rem 0 .25rem;
+    line-height: var(--line-height);
+  }
+
+  .chat-participants-count {
+    color: var(--secondary-text-color);
+    font-size: .875rem;
+    line-height: var(--line-height);
+  }
+}

src/scss/style.scss

@@ -272,6 +272,7 @@ html.night {
 @import "partials/popups/createPoll";
 @import "partials/popups/forward"; 
 @import "partials/popups/instanceDeactivated";
+@import "partials/popups/joinChatInvite";
 
 @import "partials/pages/pages";
 @import "partials/pages/authCode";