2020-04-26 14:19:17 +02:00
|
|
|
|
//import apiManager from '../mtproto/apiManager';
|
|
|
|
|
import apiManager from '../mtproto/mtprotoworker';
|
2020-08-19 17:26:19 +02:00
|
|
|
|
import { $rootScope, numberWithCommas, findUpClassName, formatNumber, placeCaretAtEnd, findUpTag, langPack, whichChild, cancelEvent, getObjectKeysAndSort } from "../utils";
|
2020-02-06 16:43:07 +01:00
|
|
|
|
import appUsersManager from "./appUsersManager";
|
2020-05-26 17:04:06 +02:00
|
|
|
|
import appMessagesManager, { Dialog } from "./appMessagesManager";
|
2020-02-06 16:43:07 +01:00
|
|
|
|
import appPeersManager from "./appPeersManager";
|
|
|
|
|
import appProfileManager from "./appProfileManager";
|
|
|
|
|
import appDialogsManager from "./appDialogsManager";
|
|
|
|
|
import { RichTextProcessor } from "../richtextprocessor";
|
|
|
|
|
import appPhotosManager from "./appPhotosManager";
|
|
|
|
|
import appSidebarRight from './appSidebarRight';
|
|
|
|
|
|
2020-06-21 14:25:17 +02:00
|
|
|
|
import { logger, LogLevels } from "../logger";
|
2020-02-06 16:43:07 +01:00
|
|
|
|
import appMediaViewer from "./appMediaViewer";
|
|
|
|
|
import appSidebarLeft from "./appSidebarLeft";
|
2020-08-19 14:29:10 +02:00
|
|
|
|
import appChatsManager, { Channel, Chat } from "./appChatsManager";
|
2020-09-18 17:03:26 +02:00
|
|
|
|
import { wrapDocument, wrapPhoto, wrapVideo, wrapSticker, wrapReply, wrapAlbum, wrapPoll } from '../../components/wrappers';
|
2020-02-11 16:35:57 +01:00
|
|
|
|
import ProgressivePreloader from '../../components/preloader';
|
2020-09-18 17:03:26 +02:00
|
|
|
|
import { formatPhoneNumber, parseMenuButtonsTo } from '../../components/misc';
|
|
|
|
|
import { ChatInput } from '../../components/chat/input';
|
2020-05-03 14:46:05 +02:00
|
|
|
|
//import Scrollable from '../../components/scrollable';
|
|
|
|
|
import Scrollable from '../../components/scrollable_new';
|
2020-04-14 17:46:31 +02:00
|
|
|
|
import BubbleGroups from '../../components/bubbleGroups';
|
|
|
|
|
import LazyLoadQueue from '../../components/lazyLoadQueue';
|
2020-04-28 19:30:54 +02:00
|
|
|
|
import appDocsManager from './appDocsManager';
|
2020-05-06 03:03:31 +02:00
|
|
|
|
import appForward from '../../components/appForward';
|
2020-05-13 17:26:40 +02:00
|
|
|
|
import appStickersManager from './appStickersManager';
|
|
|
|
|
import AvatarElement from '../../components/avatar';
|
2020-05-18 03:21:58 +02:00
|
|
|
|
import appInlineBotsManager from './AppInlineBotsManager';
|
2020-05-26 17:04:06 +02:00
|
|
|
|
import StickyIntersector from '../../components/stickyIntersector';
|
2020-09-23 22:29:53 +02:00
|
|
|
|
import { touchSupport } from '../config';
|
2020-06-13 10:19:39 +02:00
|
|
|
|
import animationIntersector from '../../components/animationIntersector';
|
|
|
|
|
import PopupStickers from '../../components/popupStickers';
|
|
|
|
|
import PopupDatePicker from '../../components/popupDatepicker';
|
2020-06-16 22:48:08 +02:00
|
|
|
|
import appPollsManager from './appPollsManager';
|
2020-08-24 16:09:31 +02:00
|
|
|
|
import { ripple } from '../../components/ripple';
|
|
|
|
|
import { horizontalMenu } from '../../components/horizontalMenu';
|
2020-08-28 17:11:25 +02:00
|
|
|
|
import AudioElement from '../../components/audio';
|
2020-09-17 21:33:23 +02:00
|
|
|
|
import { InputNotifyPeer, InputPeerNotifySettings } from '../../layer';
|
2020-09-18 17:03:26 +02:00
|
|
|
|
import { ChatAudio } from '../../components/chat/audio';
|
|
|
|
|
import { ChatContextMenu } from '../../components/chat/contextMenu';
|
|
|
|
|
import { ChatSearch } from '../../components/chat/search';
|
2020-09-23 22:29:53 +02:00
|
|
|
|
import mediaSizes from '../../helpers/mediaSizes';
|
|
|
|
|
import { isAndroid, isApple } from '../../helpers/userAgent';
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
2020-06-21 14:25:17 +02:00
|
|
|
|
//console.log('appImManager included33!');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
2020-04-24 02:48:48 +02:00
|
|
|
|
appSidebarLeft; // just to include
|
|
|
|
|
|
2020-06-06 22:38:48 +02:00
|
|
|
|
const testScroll = false;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
2020-08-24 16:09:31 +02:00
|
|
|
|
const ANIMATIONGROUP = 'chat';
|
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
export class AppImManager {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
public columnEl = document.getElementById('column-center') as HTMLDivElement;
|
2020-08-19 14:29:10 +02:00
|
|
|
|
public btnJoin = this.columnEl.querySelector('.chat-join') as HTMLButtonElement;
|
2020-06-05 18:01:06 +02:00
|
|
|
|
public btnMute = this.columnEl.querySelector('.chat-mute-button') as HTMLButtonElement;
|
2020-05-13 17:26:40 +02:00
|
|
|
|
public avatarEl = document.getElementById('im-avatar') as AvatarElement;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
public titleEl = document.getElementById('im-title') as HTMLDivElement;
|
|
|
|
|
public subtitleEl = document.getElementById('im-subtitle') as HTMLDivElement;
|
2020-02-20 09:13:15 +01:00
|
|
|
|
public bubblesContainer = document.getElementById('bubbles') as HTMLDivElement;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
public chatInner = document.getElementById('bubbles-inner') as HTMLDivElement;
|
2020-06-05 18:01:06 +02:00
|
|
|
|
public searchBtn = this.columnEl.querySelector('.chat-search-button') as HTMLButtonElement;
|
|
|
|
|
public goDownBtn = this.columnEl.querySelector('#bubbles-go-down') as HTMLButtonElement;
|
2020-04-08 17:46:43 +02:00
|
|
|
|
private getHistoryTopPromise: Promise<boolean>;
|
|
|
|
|
private getHistoryBottomPromise: Promise<boolean>;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
public chatInputC: ChatInput;
|
|
|
|
|
public chatAudio: ChatAudio;
|
2020-06-05 18:01:06 +02:00
|
|
|
|
|
|
|
|
|
private menuButtons: {
|
|
|
|
|
search: HTMLButtonElement
|
|
|
|
|
mute: HTMLButtonElement,
|
|
|
|
|
delete: HTMLButtonElement
|
|
|
|
|
} = {} as any;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
public myID = 0;
|
|
|
|
|
public peerID = 0;
|
2020-05-27 08:21:16 +02:00
|
|
|
|
|
|
|
|
|
public bubbles: {[mid: string]: HTMLDivElement} = {};
|
2020-04-08 17:46:43 +02:00
|
|
|
|
public dateMessages: {[timestamp: number]: {
|
|
|
|
|
div: HTMLDivElement,
|
|
|
|
|
firstTimestamp: number,
|
2020-04-22 21:10:09 +02:00
|
|
|
|
container: HTMLDivElement,
|
2020-04-08 17:46:43 +02:00
|
|
|
|
timeout?: number
|
|
|
|
|
}} = {};
|
2020-05-03 14:46:05 +02:00
|
|
|
|
public unreadOut = new Set<number>();
|
2020-02-14 06:04:44 +01:00
|
|
|
|
public needUpdate: {replyMid: number, mid: number}[] = []; // if need wrapSingleMessage
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
|
|
|
|
public offline = false;
|
|
|
|
|
public updateStatusInterval = 0;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
public pinnedMsgID = 0;
|
2020-06-06 22:38:48 +02:00
|
|
|
|
private pinnedMessageContainer: HTMLDivElement = null;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
public lazyLoadQueue = new LazyLoadQueue();
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
2020-06-21 14:25:17 +02:00
|
|
|
|
public scroll: HTMLElement = null;
|
2020-02-20 09:13:15 +01:00
|
|
|
|
public scrollable: Scrollable = null;
|
2020-04-16 02:48:41 +02:00
|
|
|
|
|
2020-02-07 07:38:55 +01:00
|
|
|
|
public log: ReturnType<typeof logger>;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
private preloader: ProgressivePreloader = null;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
private typingTimeouts: {[peerID: number]: number} = {};
|
|
|
|
|
private typingUsers: {[userID: number]: number} = {} // to peerID
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
public topbar = document.getElementById('topbar') as HTMLDivElement;
|
|
|
|
|
public chatInput = document.getElementById('chat-input') as HTMLDivElement;
|
|
|
|
|
public chatInfo = this.columnEl.querySelector('.chat-info') as HTMLDivElement;
|
2020-02-09 16:18:04 +01:00
|
|
|
|
private scrolledAll: boolean;
|
2020-02-13 08:51:11 +01:00
|
|
|
|
private scrolledAllDown: boolean;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-27 08:21:16 +02:00
|
|
|
|
public contextMenu = new ChatContextMenu(this.bubblesContainer);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
|
private setPeerPromise: Promise<boolean> = null;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
|
|
public bubbleGroups = new BubbleGroups();
|
2020-04-16 02:48:41 +02:00
|
|
|
|
|
|
|
|
|
private scrolledDown = true;
|
2020-04-22 21:10:09 +02:00
|
|
|
|
private onScrollRAF = 0;
|
|
|
|
|
private isScrollingTimeout = 0;
|
|
|
|
|
|
2020-05-03 14:46:05 +02:00
|
|
|
|
private unreadedObserver: IntersectionObserver = null;
|
2020-05-26 17:04:06 +02:00
|
|
|
|
private unreaded: number[] = [];
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
|
|
|
|
private loadedTopTimes = 0;
|
|
|
|
|
private loadedBottomTimes = 0;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
private messagesQueuePromise: Promise<void> = null;
|
|
|
|
|
private messagesQueue: {message: any, bubble: HTMLDivElement, reverse: boolean, promises: Promise<void>[]}[] = [];
|
|
|
|
|
private messagesQueueOnRender: () => void = null;
|
|
|
|
|
|
|
|
|
|
private peerChanged: boolean;
|
|
|
|
|
private firstUnreadBubble: HTMLDivElement = null;
|
2020-05-30 08:44:54 +02:00
|
|
|
|
private attachedUnreadBubble: boolean;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
private stickyIntersector: StickyIntersector = null;
|
|
|
|
|
|
2020-05-30 08:44:54 +02:00
|
|
|
|
private cleanupID = 0;
|
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
public selectTab = horizontalMenu(null, document.getElementById('main-columns'));
|
|
|
|
|
private closeBtn = this.topbar.querySelector('.sidebar-close-button') as HTMLButtonElement;
|
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
constructor() {
|
2020-08-25 11:39:39 +02:00
|
|
|
|
this.log = logger('IM', LogLevels.log | LogLevels.warn | LogLevels.debug | LogLevels.error);
|
2020-02-10 08:56:15 +01:00
|
|
|
|
this.chatInputC = new ChatInput();
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.preloader = new ProgressivePreloader(null, false);
|
2020-06-05 18:01:06 +02:00
|
|
|
|
this.selectTab(0);
|
|
|
|
|
parseMenuButtonsTo(this.menuButtons, this.columnEl.querySelector('.chat-more-button').firstElementChild.children);
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
|
|
|
|
this.chatAudio = new ChatAudio();
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.chatInfo.nextElementSibling.prepend(this.chatAudio.container);
|
2020-05-30 08:44:54 +02:00
|
|
|
|
|
2020-02-08 07:03:09 +01:00
|
|
|
|
apiManager.getUserID().then((id) => {
|
2020-04-19 23:40:00 +02:00
|
|
|
|
this.myID = $rootScope.myID = id;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('user_auth', (e) => {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let userAuth = e.detail;
|
2020-04-19 23:40:00 +02:00
|
|
|
|
this.myID = $rootScope.myID = userAuth ? userAuth.id : 0;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
|
|
// will call when message is sent (only 1)
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('history_append', (e) => {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let details = e.detail;
|
2020-05-20 16:25:23 +02:00
|
|
|
|
|
|
|
|
|
if(!this.scrolledAllDown) {
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.setPeer(this.peerID, 0);
|
2020-05-20 16:25:23 +02:00
|
|
|
|
} else {
|
|
|
|
|
this.renderNewMessagesByIDs([details.messageID], true);
|
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
|
|
// will call when sent for update pos
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('history_update', (e) => {
|
2020-02-13 08:51:11 +01:00
|
|
|
|
let details = e.detail;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
|
if(details.mid && details.peerID == this.peerID) {
|
|
|
|
|
let mid = details.mid;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
|
let bubble = this.bubbles[mid];
|
|
|
|
|
if(!bubble) return;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
|
let message = appMessagesManager.getMessage(mid);
|
|
|
|
|
//this.log('history_update', this.bubbles[mid], mid, message);
|
2020-02-15 09:22:33 +01:00
|
|
|
|
|
2020-04-26 03:45:07 +02:00
|
|
|
|
let dateMessage = this.getDateContainerByMessage(message, false);
|
|
|
|
|
dateMessage.container.append(bubble);
|
|
|
|
|
|
|
|
|
|
this.bubbleGroups.addBubble(bubble, message, false);
|
|
|
|
|
|
|
|
|
|
//this.renderMessage(message, false, false, bubble);
|
2020-02-13 08:51:11 +01:00
|
|
|
|
}
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('history_multiappend', (e) => {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let msgIDsByPeer = e.detail;
|
|
|
|
|
if(!(this.peerID in msgIDsByPeer)) return;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let msgIDs = msgIDsByPeer[this.peerID];
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-16 02:48:41 +02:00
|
|
|
|
this.renderNewMessagesByIDs(msgIDs);
|
2020-02-11 16:35:57 +01:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('history_delete', (e) => {
|
|
|
|
|
let detail = e.detail;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-11 16:35:57 +01:00
|
|
|
|
this.deleteMessagesByIDs(Object.keys(detail.msgs).map(s => +s));
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-05-13 17:26:40 +02:00
|
|
|
|
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('dialog_flush', (e) => {
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let peerID: number = e.detail.peerID;
|
|
|
|
|
if(this.peerID == peerID) {
|
|
|
|
|
this.deleteMessagesByIDs(Object.keys(this.bubbles).map(m => +m));
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-08-19 14:29:10 +02:00
|
|
|
|
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('chat_update', (e) => {
|
2020-08-19 14:29:10 +02:00
|
|
|
|
const peerID: number = e.detail;
|
|
|
|
|
if(this.peerID == -peerID) {
|
|
|
|
|
const chat = appChatsManager.getChat(peerID) as Channel | Chat;
|
|
|
|
|
|
|
|
|
|
this.btnJoin.classList.toggle('hide', !chat?.pFlags?.left);
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-11 16:35:57 +01:00
|
|
|
|
// Calls when message successfully sent and we have an ID
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('message_sent', (e) => {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const {tempID, mid} = e.detail;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-01 23:28:40 +02:00
|
|
|
|
this.log('message_sent', e.detail);
|
|
|
|
|
|
|
|
|
|
// set cached url to media
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const message = appMessagesManager.getMessage(mid);
|
2020-05-01 23:28:40 +02:00
|
|
|
|
if(message.media) {
|
|
|
|
|
if(message.media.photo) {
|
2020-09-20 00:38:00 +02:00
|
|
|
|
const photo = appPhotosManager.getPhoto('' + tempID);
|
2020-09-18 17:03:26 +02:00
|
|
|
|
if(/* photo._ != 'photoEmpty' */photo) {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const newPhoto = message.media.photo;
|
2020-05-01 23:28:40 +02:00
|
|
|
|
newPhoto.downloaded = photo.downloaded;
|
|
|
|
|
newPhoto.url = photo.url;
|
2020-09-18 17:03:26 +02:00
|
|
|
|
}
|
2020-05-01 23:28:40 +02:00
|
|
|
|
} else if(message.media.document) {
|
2020-09-20 00:38:00 +02:00
|
|
|
|
const doc = appDocsManager.getDoc('' + tempID);
|
2020-09-18 17:03:26 +02:00
|
|
|
|
if(/* doc._ != 'documentEmpty' && */doc?.type && doc.type != 'sticker') {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const newDoc = message.media.document;
|
2020-05-01 23:28:40 +02:00
|
|
|
|
newDoc.downloaded = doc.downloaded;
|
|
|
|
|
newDoc.url = doc.url;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let bubble = this.bubbles[tempID];
|
|
|
|
|
if(bubble) {
|
|
|
|
|
this.bubbles[mid] = bubble;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
|
/////this.log('message_sent', bubble);
|
2020-04-26 03:45:07 +02:00
|
|
|
|
|
2020-05-01 23:28:40 +02:00
|
|
|
|
// set new mids to album items for mediaViewer
|
|
|
|
|
if(message.grouped_id) {
|
|
|
|
|
let items = bubble.querySelectorAll('.album-item');
|
2020-08-19 17:26:19 +02:00
|
|
|
|
let groupIDs = getObjectKeysAndSort(appMessagesManager.groupedMessagesStorage[message.grouped_id]);
|
2020-05-01 23:28:40 +02:00
|
|
|
|
(Array.from(items) as HTMLElement[]).forEach((item, idx) => {
|
|
|
|
|
item.dataset.mid = '' + groupIDs[idx];
|
|
|
|
|
});
|
2020-04-26 03:45:07 +02:00
|
|
|
|
}
|
2020-05-01 23:28:40 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
if(message.media?.poll) {
|
|
|
|
|
const newPoll = message.media.poll;
|
|
|
|
|
const pollElement = bubble.querySelector('poll-element');
|
|
|
|
|
if(pollElement) {
|
|
|
|
|
pollElement.setAttribute('poll-id', newPoll.id);
|
2020-09-20 00:38:00 +02:00
|
|
|
|
pollElement.setAttribute('message-id', '' + mid);
|
2020-06-16 22:48:08 +02:00
|
|
|
|
delete appPollsManager.polls[tempID];
|
|
|
|
|
delete appPollsManager.results[tempID];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-20 03:11:24 +02:00
|
|
|
|
if(['audio', 'voice'].includes(message.media?.document?.type)) {
|
|
|
|
|
const audio = bubble.querySelector('audio-element');
|
|
|
|
|
audio.setAttribute('doc-id', message.media.document.id);
|
|
|
|
|
audio.setAttribute('message-id', '' + mid);
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-11 16:35:57 +01:00
|
|
|
|
bubble.classList.remove('is-sending');
|
|
|
|
|
bubble.classList.add('is-sent');
|
2020-09-20 00:38:00 +02:00
|
|
|
|
bubble.dataset.mid = '' + mid;
|
2020-02-11 16:35:57 +01:00
|
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
|
this.bubbleGroups.removeBubble(bubble, tempID);
|
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
delete this.bubbles[tempID];
|
2020-02-11 16:35:57 +01:00
|
|
|
|
} else {
|
|
|
|
|
this.log.warn('message_sent there is no bubble', e.detail);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
|
|
|
|
if(this.unreadOut.has(tempID)) {
|
|
|
|
|
this.unreadOut.delete(tempID);
|
|
|
|
|
this.unreadOut.add(mid);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('message_edit', (e) => {
|
2020-02-13 08:51:11 +01:00
|
|
|
|
let {peerID, mid, id, justMedia} = e.detail;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
|
if(peerID != this.peerID) return;
|
2020-05-01 23:28:40 +02:00
|
|
|
|
let message = appMessagesManager.getMessage(mid);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
|
let bubble = this.bubbles[mid];
|
2020-05-01 23:28:40 +02:00
|
|
|
|
if(!bubble && message.grouped_id) {
|
|
|
|
|
let a = this.getAlbumBubble(message.grouped_id);
|
|
|
|
|
bubble = a.bubble;
|
|
|
|
|
message = a.message;
|
|
|
|
|
}
|
2020-02-13 08:51:11 +01:00
|
|
|
|
if(!bubble) return;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-08 17:46:43 +02:00
|
|
|
|
this.renderMessage(message, true, false, bubble, false);
|
2020-02-13 08:51:11 +01:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('messages_downloaded', (e) => {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
const mids: number[] = e.detail;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
const pinnedMessage = appMessagesManager.getPinnedMessage(this.peerID);
|
2020-02-14 06:04:44 +01:00
|
|
|
|
mids.forEach(mid => {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
if(pinnedMessage.mid == mid) {
|
2020-06-06 07:26:18 +02:00
|
|
|
|
(this.messagesQueuePromise || Promise.resolve()).then(() => {
|
|
|
|
|
this.setPinnedMessage(pinnedMessage);
|
|
|
|
|
});
|
2020-02-14 06:04:44 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-22 17:00:17 +01:00
|
|
|
|
this.needUpdate.forEachReverse((obj, idx) => {
|
|
|
|
|
if(obj.replyMid == mid) {
|
|
|
|
|
let {mid, replyMid} = this.needUpdate.splice(idx, 1)[0];
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-14 14:10:10 +01:00
|
|
|
|
//this.log('messages_downloaded', mid, replyMid, i, this.needUpdate, this.needUpdate.length, mids, this.bubbles[mid]);
|
|
|
|
|
let bubble = this.bubbles[mid];
|
|
|
|
|
if(!bubble) return;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-14 14:10:10 +01:00
|
|
|
|
let message = appMessagesManager.getMessage(mid);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-14 14:10:10 +01:00
|
|
|
|
let repliedMessage = appMessagesManager.getMessage(replyMid);
|
|
|
|
|
if(repliedMessage.deleted) { // чтобы не пыталось бесконечно загрузить удалённое сообщение
|
|
|
|
|
delete message.reply_to_mid; // WARNING!
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-08 17:46:43 +02:00
|
|
|
|
this.renderMessage(message, true, false, bubble, false);
|
|
|
|
|
//this.renderMessage(message, true, true, bubble, false);
|
2020-02-14 06:04:44 +01:00
|
|
|
|
}
|
2020-02-22 17:00:17 +01:00
|
|
|
|
});
|
2020-02-14 06:04:44 +01:00
|
|
|
|
});
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-20 00:38:00 +02:00
|
|
|
|
$rootScope.$on('apiUpdate', (e) => {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let update = e.detail;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
this.handleUpdate(update);
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
window.addEventListener('blur', () => {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
animationIntersector.checkAnimations(true);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-08-22 18:53:59 +02:00
|
|
|
|
this.offline = $rootScope.idle.isIDLE = true;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.updateStatus();
|
|
|
|
|
clearInterval(this.updateStatusInterval);
|
|
|
|
|
|
|
|
|
|
window.addEventListener('focus', () => {
|
2020-08-22 18:53:59 +02:00
|
|
|
|
this.offline = $rootScope.idle.isIDLE = false;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.updateStatus();
|
|
|
|
|
this.updateStatusInterval = window.setInterval(() => this.updateStatus(), 50e3);
|
2020-08-22 18:53:59 +02:00
|
|
|
|
|
|
|
|
|
// в обратном порядке
|
|
|
|
|
animationIntersector.checkAnimations(false);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}, {once: true});
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-06 22:38:48 +02:00
|
|
|
|
this.topbar.addEventListener('click', (e) => {
|
2020-08-19 16:11:25 +02:00
|
|
|
|
const pinned: HTMLElement = findUpClassName(e.target, 'pinned-container');
|
2020-06-06 22:38:48 +02:00
|
|
|
|
if(pinned) {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
cancelEvent(e);
|
2020-06-06 22:38:48 +02:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const mid = +pinned.dataset.mid;
|
|
|
|
|
const message = appMessagesManager.getMessage(mid);
|
|
|
|
|
|
|
|
|
|
this.setPeer(message.peerID, mid);
|
2020-06-06 22:38:48 +02:00
|
|
|
|
} else {
|
|
|
|
|
appSidebarRight.toggleSidebar(true);
|
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.bubblesContainer.addEventListener('click', (e) => {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let target = e.target as HTMLElement;
|
2020-08-19 16:11:25 +02:00
|
|
|
|
let bubble: HTMLElement = null;
|
2020-02-10 10:52:47 +01:00
|
|
|
|
try {
|
2020-05-10 03:23:21 +02:00
|
|
|
|
bubble = findUpClassName(target, 'bubble');
|
2020-02-10 10:52:47 +01:00
|
|
|
|
} catch(err) {}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
|
if(!bubble) return;
|
2020-05-01 23:28:40 +02:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
if(bubble.classList.contains('is-date') && findUpClassName(target, 'bubble__container')) {
|
|
|
|
|
if(bubble.classList.contains('is-sticky') && !this.chatInner.classList.contains('is-scrolling')) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for(let timestamp in this.dateMessages) {
|
|
|
|
|
let d = this.dateMessages[timestamp];
|
|
|
|
|
if(d.div == bubble) {
|
|
|
|
|
new PopupDatePicker(new Date(+timestamp), this.onDatePick).show();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-19 16:11:25 +02:00
|
|
|
|
let contactDiv: HTMLElement = findUpClassName(target, 'contact');
|
2020-05-10 03:23:21 +02:00
|
|
|
|
if(contactDiv) {
|
|
|
|
|
this.setPeer(+contactDiv.dataset.peerID);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-06 03:03:31 +02:00
|
|
|
|
//this.log('chatInner click:', target);
|
2020-09-19 13:37:19 +02:00
|
|
|
|
const isVideoComponentElement = target.tagName == 'SPAN';
|
|
|
|
|
/* if(isVideoComponentElement) {
|
|
|
|
|
const video = target.parentElement.querySelector('video') as HTMLElement;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(video) {
|
|
|
|
|
video.click(); // hot-fix for time and play button
|
2020-09-19 13:37:19 +02:00
|
|
|
|
return;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
}
|
2020-09-19 13:37:19 +02:00
|
|
|
|
} */
|
2020-05-06 03:03:31 +02:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) {
|
|
|
|
|
const messageID = +bubble.dataset.mid;
|
|
|
|
|
const message = appMessagesManager.getMessage(messageID);
|
|
|
|
|
|
|
|
|
|
const doc = message.media?.document;
|
|
|
|
|
|
|
|
|
|
if(doc?.stickerSetInput) {
|
|
|
|
|
new PopupStickers(doc.stickerSetInput).show();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-19 13:37:19 +02:00
|
|
|
|
if((target.tagName == 'IMG' && !target.classList.contains('emoji') && target.parentElement.tagName != "AVATAR-ELEMENT" && !target.classList.contains('document-thumb'))
|
2020-05-01 23:28:40 +02:00
|
|
|
|
|| target.classList.contains('album-item')
|
2020-09-19 13:37:19 +02:00
|
|
|
|
|| isVideoComponentElement
|
2020-05-01 23:28:40 +02:00
|
|
|
|
|| (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) {
|
|
|
|
|
let messageID = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid;
|
|
|
|
|
let message = appMessagesManager.getMessage(messageID);
|
|
|
|
|
if(!message) {
|
|
|
|
|
this.log.warn('no message by messageID:', messageID);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let targets: {element: HTMLElement, mid: number}[] = [];
|
|
|
|
|
let ids = Object.keys(this.bubbles).map(k => +k).filter(id => {
|
|
|
|
|
//if(!this.scrollable.visibleElements.find(e => e.element == this.bubbles[id])) return false;
|
|
|
|
|
|
|
|
|
|
let message = appMessagesManager.getMessage(id);
|
|
|
|
|
|
|
|
|
|
return message.media && (message.media.photo || (message.media.document && (message.media.document.type == 'video' || message.media.document.type == 'gif')) || (message.media.webpage && (message.media.webpage.document || message.media.webpage.photo)));
|
|
|
|
|
}).sort((a, b) => a - b);
|
|
|
|
|
|
|
|
|
|
ids.forEach(id => {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
let withTail = this.bubbles[id].classList.contains('with-media-tail');
|
|
|
|
|
let str = '.album-item img, .album-item video, .preview img, .preview video, ';
|
|
|
|
|
if(withTail) {
|
|
|
|
|
str += '.bubble__media-container';
|
|
|
|
|
} else {
|
|
|
|
|
str += '.attachment img, .attachment video';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let elements = this.bubbles[id].querySelectorAll(str) as NodeListOf<HTMLElement>;
|
2020-05-01 23:28:40 +02:00
|
|
|
|
Array.from(elements).forEach((element: HTMLElement) => {
|
|
|
|
|
let albumItem = findUpClassName(element, 'album-item');
|
|
|
|
|
targets.push({
|
|
|
|
|
element,
|
|
|
|
|
mid: +albumItem?.dataset.mid || id
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2020-09-01 21:59:49 +02:00
|
|
|
|
targets.sort((a, b) => a.mid - b.mid);
|
|
|
|
|
|
2020-05-01 23:28:40 +02:00
|
|
|
|
let idx = targets.findIndex(t => t.mid == messageID);
|
|
|
|
|
|
|
|
|
|
this.log('open mediaViewer single with ids:', ids, idx, targets);
|
|
|
|
|
|
2020-09-19 13:37:19 +02:00
|
|
|
|
if(!targets[idx]) {
|
|
|
|
|
this.log('no target for media viewer!', target);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-01 23:28:40 +02:00
|
|
|
|
appMediaViewer.openMedia(message, targets[idx].element, true,
|
|
|
|
|
this.scroll.parentElement, targets.slice(0, idx), targets.slice(idx + 1)/* , !message.grouped_id */);
|
|
|
|
|
|
|
|
|
|
//appMediaViewer.openMedia(message, target as HTMLImageElement);
|
2020-09-19 13:37:19 +02:00
|
|
|
|
return;
|
2020-05-01 23:28:40 +02:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
if(['IMG', 'DIV', "AVATAR-ELEMENT"].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
if(target.tagName == 'DIV' || target.tagName == "AVATAR-ELEMENT") {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
if(target.classList.contains('goto-original')) {
|
2020-02-13 12:59:55 +01:00
|
|
|
|
let savedFrom = bubble.dataset.savedFrom;
|
|
|
|
|
let splitted = savedFrom.split('_');
|
|
|
|
|
let peerID = +splitted[0];
|
|
|
|
|
let msgID = +splitted[1];
|
2020-02-17 13:18:06 +01:00
|
|
|
|
////this.log('savedFrom', peerID, msgID);
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.setPeer(peerID, msgID);
|
2020-02-13 12:59:55 +01:00
|
|
|
|
return;
|
2020-06-05 18:01:06 +02:00
|
|
|
|
} else if(target.classList.contains('forward')) {
|
|
|
|
|
const mid = +bubble.dataset.mid;
|
|
|
|
|
appForward.init([mid]);
|
|
|
|
|
return;
|
|
|
|
|
} else if(target.classList.contains('name')) {
|
2020-02-13 12:59:55 +01:00
|
|
|
|
let peerID = +target.dataset.peerID;
|
|
|
|
|
|
|
|
|
|
if(!isNaN(peerID)) {
|
|
|
|
|
this.setPeer(peerID);
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
return;
|
|
|
|
|
} else if(target.tagName == "AVATAR-ELEMENT") {
|
|
|
|
|
let peerID = +target.getAttribute('peer');
|
|
|
|
|
|
|
|
|
|
if(!isNaN(peerID)) {
|
|
|
|
|
this.setPeer(peerID);
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
|
let isReplyClick = false;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
|
try {
|
2020-02-15 19:08:26 +01:00
|
|
|
|
isReplyClick = !!findUpClassName(e.target, 'reply');
|
2020-02-10 15:51:24 +01:00
|
|
|
|
} catch(err) {}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
|
if(isReplyClick && bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) {
|
|
|
|
|
let originalMessageID = +bubble.getAttribute('data-original-mid');
|
|
|
|
|
this.setPeer(this.peerID, originalMessageID);
|
2020-02-10 08:56:15 +01:00
|
|
|
|
}
|
2020-05-13 17:26:40 +02:00
|
|
|
|
} else if(target.tagName == 'IMG' && target.parentElement.tagName == "AVATAR-ELEMENT") {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
let peerID = +target.parentElement.getAttribute('peer');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
|
if(!isNaN(peerID)) {
|
|
|
|
|
this.setPeer(peerID);
|
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
//console.log('chatInner click', e);
|
|
|
|
|
});
|
2020-06-05 18:01:06 +02:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
this.closeBtn.addEventListener('click', (e) => {
|
|
|
|
|
cancelEvent(e);
|
2020-06-05 18:01:06 +02:00
|
|
|
|
this.setPeer(0);
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.searchBtn.addEventListener('click', (e) => {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
cancelEvent(e);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(this.peerID) {
|
2020-04-24 02:48:48 +02:00
|
|
|
|
appSidebarRight.beginSearch();
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
|
|
|
|
});
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
|
|
|
|
this.btnMute.addEventListener('click', (e) => {
|
|
|
|
|
cancelEvent(e);
|
|
|
|
|
this.mutePeer(this.peerID);
|
|
|
|
|
});
|
2020-08-19 14:29:10 +02:00
|
|
|
|
|
|
|
|
|
this.btnJoin.addEventListener('click', (e) => {
|
|
|
|
|
cancelEvent(e);
|
|
|
|
|
|
|
|
|
|
this.btnJoin.setAttribute('disabled', 'true');
|
|
|
|
|
appChatsManager.joinChannel(-this.peerID).finally(() => {
|
|
|
|
|
this.btnJoin.removeAttribute('disabled');
|
|
|
|
|
});
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-21 14:25:17 +02:00
|
|
|
|
this.menuButtons.mute.addEventListener('click', (e) => {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
this.mutePeer(this.peerID);
|
|
|
|
|
});
|
|
|
|
|
|
2020-06-21 14:25:17 +02:00
|
|
|
|
this.menuButtons.search.addEventListener('click', (e) => {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
new ChatSearch();
|
2020-06-05 18:01:06 +02:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-11 07:22:12 +01:00
|
|
|
|
let onKeyDown = (e: KeyboardEvent) => {
|
|
|
|
|
let target = e.target as HTMLElement;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-11 07:22:12 +01:00
|
|
|
|
//if(target.tagName == 'INPUT') return;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
|
//this.log('onkeydown', e);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-11 07:22:12 +01:00
|
|
|
|
if(this.chatInputC.attachMediaPopUp.container.classList.contains('active')) {
|
|
|
|
|
if(target.tagName != 'INPUT') {
|
|
|
|
|
this.chatInputC.attachMediaPopUp.captionInput.focus();
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
if(e.key == 'Enter' && !touchSupport) {
|
2020-02-11 07:22:12 +01:00
|
|
|
|
this.chatInputC.attachMediaPopUp.sendBtn.click();
|
|
|
|
|
} else if(e.key == 'Escape') {
|
|
|
|
|
this.chatInputC.attachMediaPopUp.container.classList.remove('active');
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-11 07:22:12 +01:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-30 08:44:54 +02:00
|
|
|
|
if(e.key == 'Escape') {
|
|
|
|
|
if(appMediaViewer.wholeDiv.classList.contains('active')) {
|
|
|
|
|
appMediaViewer.buttons.close.click();
|
|
|
|
|
} else if(appForward.container.classList.contains('active')) {
|
|
|
|
|
appForward.close();
|
|
|
|
|
} else if(this.chatInputC.replyElements.container.classList.contains('active')) {
|
|
|
|
|
this.chatInputC.replyElements.cancelBtn.click();
|
|
|
|
|
} else if(this.peerID != 0) { // hide current dialog
|
|
|
|
|
this.setPeer(0);
|
|
|
|
|
}
|
2020-05-06 03:03:31 +02:00
|
|
|
|
} else if(e.key == 'Meta' || e.key == 'Control') {
|
2020-02-13 16:42:39 +01:00
|
|
|
|
return;
|
2020-06-13 10:19:39 +02:00
|
|
|
|
} else if(e.code == "KeyC" && (e.ctrlKey || e.metaKey) && target.tagName != 'INPUT') {
|
2020-02-13 16:42:39 +01:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-11 07:22:12 +01:00
|
|
|
|
if(e.target != this.chatInputC.messageInput && target.tagName != 'INPUT') {
|
|
|
|
|
this.chatInputC.messageInput.focus();
|
|
|
|
|
placeCaretAtEnd(this.chatInputC.messageInput);
|
|
|
|
|
}
|
|
|
|
|
};
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-11 07:22:12 +01:00
|
|
|
|
document.body.addEventListener('keydown', onKeyDown);
|
2020-02-13 12:59:55 +01:00
|
|
|
|
|
|
|
|
|
this.goDownBtn.addEventListener('click', () => {
|
2020-02-15 09:22:33 +01:00
|
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(this.peerID)[0];
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
|
if(dialog) {
|
2020-06-21 14:25:17 +02:00
|
|
|
|
this.setPeer(this.peerID/* , dialog.top_message */);
|
2020-02-13 12:59:55 +01:00
|
|
|
|
} else {
|
2020-03-02 18:15:11 +01:00
|
|
|
|
this.log('will scroll down 3');
|
2020-02-13 12:59:55 +01:00
|
|
|
|
this.scroll.scrollTop = this.scroll.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.updateStatusInterval = window.setInterval(() => this.updateStatus(), 50e3);
|
|
|
|
|
this.updateStatus();
|
|
|
|
|
setInterval(() => this.setPeerStatus(), 60e3);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-20 09:13:15 +01:00
|
|
|
|
this.setScroll();
|
2020-05-18 03:21:58 +02:00
|
|
|
|
//apiUpdatesManager.attach();
|
2020-04-22 21:10:09 +02:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.stickyIntersector = new StickyIntersector(this.scrollable.container, (stuck, target) => {
|
2020-04-22 21:10:09 +02:00
|
|
|
|
for(let timestamp in this.dateMessages) {
|
|
|
|
|
let dateMessage = this.dateMessages[timestamp];
|
2020-05-26 17:04:06 +02:00
|
|
|
|
if(dateMessage.container == target) {
|
|
|
|
|
dateMessage.div.classList.toggle('is-sticky', stuck);
|
2020-04-22 21:10:09 +02:00
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-05-26 17:04:06 +02:00
|
|
|
|
});
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
|
|
|
|
this.unreadedObserver = new IntersectionObserver((entries) => {
|
2020-08-19 14:29:10 +02:00
|
|
|
|
if(this.offline) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-03 14:46:05 +02:00
|
|
|
|
let readed: number[] = [];
|
|
|
|
|
|
|
|
|
|
entries.forEach(entry => {
|
|
|
|
|
if(entry.isIntersecting) {
|
|
|
|
|
let target = entry.target as HTMLElement;
|
|
|
|
|
let mid = +target.dataset.mid;
|
|
|
|
|
readed.push(mid);
|
|
|
|
|
this.unreadedObserver.unobserve(target);
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.unreaded.findAndSplice(id => id == mid);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if(readed.length) {
|
|
|
|
|
let max = Math.max(...readed);
|
2020-05-26 17:04:06 +02:00
|
|
|
|
|
|
|
|
|
let length = readed.length;
|
|
|
|
|
for(let i = this.unreaded.length - 1; i >= 0; --i) {
|
|
|
|
|
let mid = this.unreaded[i];
|
|
|
|
|
if(mid < max) {
|
|
|
|
|
length++;
|
|
|
|
|
this.unreaded.splice(i, 1);
|
|
|
|
|
}
|
2020-05-03 14:46:05 +02:00
|
|
|
|
}
|
2020-05-26 17:04:06 +02:00
|
|
|
|
|
|
|
|
|
this.log('will readHistory by ids:', max, length);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
/* if(this.peerID < 0) {
|
|
|
|
|
max = appMessagesIDsManager.getMessageIDInfo(max)[0];
|
|
|
|
|
} */
|
|
|
|
|
|
2020-05-03 14:46:05 +02:00
|
|
|
|
//appMessagesManager.readMessages(readed);
|
2020-05-27 08:21:16 +02:00
|
|
|
|
/* false && */ appMessagesManager.readHistory(this.peerID, max, length).catch((err: any) => {
|
2020-05-03 14:46:05 +02:00
|
|
|
|
this.log.error('readHistory err:', err);
|
2020-05-26 17:04:06 +02:00
|
|
|
|
appMessagesManager.readHistory(this.peerID, max, length);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-06-06 07:26:18 +02:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
onDatePick = (timestamp: number) => {
|
|
|
|
|
const peerID = this.peerID;
|
|
|
|
|
appMessagesManager.requestHistory(peerID, 0, 2, -1, timestamp).then(history => {
|
|
|
|
|
if(!history?.messages?.length) {
|
|
|
|
|
this.log.error('no history!');
|
|
|
|
|
return;
|
|
|
|
|
} else if(this.peerID != peerID) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
appImManager.setPeer(this.peerID, history.messages[0].mid);
|
|
|
|
|
//console.log('got history date:', history);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2020-06-06 07:26:18 +02:00
|
|
|
|
public setPinnedMessage(message: any) {
|
|
|
|
|
/////this.log('setting pinned message', message);
|
2020-06-06 22:38:48 +02:00
|
|
|
|
//return;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const height = 52;
|
2020-06-06 22:38:48 +02:00
|
|
|
|
const scrollTop = this.scrollable.container.scrollTop;
|
|
|
|
|
const newPinned = wrapReply('Pinned Message', message.message, message, true);
|
|
|
|
|
newPinned.dataset.mid = '' + message.mid;
|
2020-06-13 10:19:39 +02:00
|
|
|
|
newPinned.classList.add('pinned-container');
|
|
|
|
|
|
|
|
|
|
const close = document.createElement('button');
|
|
|
|
|
close.classList.add('pinned-message-close', 'btn-icon', 'tgico-close');
|
2020-06-16 22:48:08 +02:00
|
|
|
|
close.addEventListener('click', (e) => {
|
|
|
|
|
cancelEvent(e);
|
|
|
|
|
const scrollTop = this.scrollable.scrollTop;
|
|
|
|
|
newPinned.remove();
|
|
|
|
|
this.topbar.classList.remove('is-pinned-shown');
|
|
|
|
|
|
|
|
|
|
this.pinnedMessageContainer = null;
|
|
|
|
|
this.scrollable.scrollTop = scrollTop - height;
|
|
|
|
|
}, {once: true});
|
2020-06-13 10:19:39 +02:00
|
|
|
|
newPinned.append(close);
|
2020-06-06 22:38:48 +02:00
|
|
|
|
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.btnJoin.parentElement.insertBefore(newPinned, this.btnJoin);
|
2020-06-06 07:26:18 +02:00
|
|
|
|
this.topbar.classList.add('is-pinned-shown');
|
2020-06-06 22:38:48 +02:00
|
|
|
|
|
|
|
|
|
if(this.pinnedMessageContainer) {
|
|
|
|
|
this.pinnedMessageContainer.remove();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.pinnedMessageContainer = newPinned;
|
|
|
|
|
//this.pinnedMessageContent.innerHTML = message.rReply;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
this.scrollable.scrollTop = scrollTop + height;
|
2020-06-06 07:26:18 +02:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
public updateStatus() {
|
|
|
|
|
if(!this.myID) return Promise.resolve();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
appUsersManager.setUserStatus(this.myID, this.offline);
|
2020-02-22 17:00:17 +01:00
|
|
|
|
return apiManager.invokeApi('account.updateStatus', {offline: this.offline});
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-01 23:28:40 +02:00
|
|
|
|
public getAlbumBubble(groupID: string) {
|
|
|
|
|
let group = appMessagesManager.groupedMessagesStorage[groupID];
|
|
|
|
|
for(let i in group) {
|
|
|
|
|
let mid = +i;
|
|
|
|
|
if(this.bubbles[mid]) return {
|
|
|
|
|
bubble: this.bubbles[mid],
|
|
|
|
|
message: appMessagesManager.getMessage(mid)
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
public loadMoreHistory(top: boolean, justLoad = false) {
|
2020-06-06 22:38:48 +02:00
|
|
|
|
//this.log('loadMoreHistory', top);
|
2020-04-14 17:46:31 +02:00
|
|
|
|
if(!this.peerID || testScroll || this.setPeerPromise || (top && this.getHistoryTopPromise) || (!top && this.getHistoryBottomPromise)) return;
|
2020-04-08 17:46:43 +02:00
|
|
|
|
|
2020-05-23 07:31:18 +02:00
|
|
|
|
// warning, если иды только отрицательные то вниз не попадёт (хотя мб и так не попадёт)
|
|
|
|
|
let history = Object.keys(this.bubbles).map(id => +id).filter(id => id > 0).sort((a, b) => a - b);
|
2020-04-08 17:46:43 +02:00
|
|
|
|
if(!history.length) return;
|
|
|
|
|
|
|
|
|
|
if(top && !this.scrolledAll) {
|
|
|
|
|
this.log('Will load more (up) history by id:', history[0], 'maxID:', history[history.length - 1], history);
|
2020-05-23 07:31:18 +02:00
|
|
|
|
/* if(history.length == 75) {
|
|
|
|
|
this.log('load more', this.scrollable.scrollHeight, this.scrollable.scrollTop, this.scrollable);
|
|
|
|
|
return;
|
|
|
|
|
} */
|
2020-06-16 22:48:08 +02:00
|
|
|
|
/* false && */this.getHistory(history[0], true, undefined, undefined, justLoad);
|
2020-04-08 17:46:43 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(this.scrolledAllDown) return;
|
|
|
|
|
|
|
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(this.peerID)[0];
|
|
|
|
|
|
|
|
|
|
// if scroll down after search
|
|
|
|
|
if(!top && (!dialog || history.indexOf(dialog.top_message) === -1)) {
|
|
|
|
|
this.log('Will load more (down) history by maxID:', history[history.length - 1], history);
|
2020-06-16 22:48:08 +02:00
|
|
|
|
/* false && */this.getHistory(history[history.length - 1], false, true, undefined, justLoad);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-06 22:38:48 +02:00
|
|
|
|
public onScroll(e: Event) {
|
2020-04-22 21:10:09 +02:00
|
|
|
|
if(this.onScrollRAF) window.cancelAnimationFrame(this.onScrollRAF);
|
|
|
|
|
|
2020-09-21 19:34:19 +02:00
|
|
|
|
// * В таком случае, кнопка не будет моргать если чат в самом низу, и правильно отработает случай написания нового сообщения и проскролла вниз
|
|
|
|
|
if(this.scrollable.scrollLocked && this.scrolledDown) return;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-04-22 21:10:09 +02:00
|
|
|
|
this.onScrollRAF = window.requestAnimationFrame(() => {
|
2020-06-06 22:38:48 +02:00
|
|
|
|
//lottieLoader.checkAnimations(false, 'chat');
|
2020-04-22 21:10:09 +02:00
|
|
|
|
|
2020-06-06 12:53:23 +02:00
|
|
|
|
if(!touchSupport) {
|
|
|
|
|
if(this.isScrollingTimeout) {
|
|
|
|
|
clearTimeout(this.isScrollingTimeout);
|
|
|
|
|
} else if(!this.chatInner.classList.contains('is-scrolling')) {
|
|
|
|
|
this.chatInner.classList.add('is-scrolling');
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-18 17:03:26 +02:00
|
|
|
|
this.isScrollingTimeout = window.setTimeout(() => {
|
2020-06-06 12:53:23 +02:00
|
|
|
|
this.chatInner.classList.remove('is-scrolling');
|
|
|
|
|
this.isScrollingTimeout = 0;
|
2020-06-13 10:19:39 +02:00
|
|
|
|
}, 1350);
|
2020-02-07 15:17:39 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
if(this.scroll.scrollHeight - Math.round(this.scroll.scrollTop + this.scroll.offsetHeight) <= 1/* <= 5 */) {
|
2020-04-22 21:10:09 +02:00
|
|
|
|
this.scroll.parentElement.classList.add('scrolled-down');
|
|
|
|
|
this.scrolledDown = true;
|
|
|
|
|
} else if(this.scroll.parentElement.classList.contains('scrolled-down')) {
|
|
|
|
|
this.scroll.parentElement.classList.remove('scrolled-down');
|
|
|
|
|
this.scrolledDown = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.onScrollRAF = 0;
|
|
|
|
|
});
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-20 09:13:15 +01:00
|
|
|
|
public setScroll() {
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.scrollable = new Scrollable(this.bubblesContainer, 'IM', this.chatInner, 300);
|
2020-06-16 22:48:08 +02:00
|
|
|
|
|
|
|
|
|
/* const getScrollOffset = () => {
|
|
|
|
|
//return Math.round(Math.max(300, appPhotosManager.windowH / 1.5));
|
|
|
|
|
return 300;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => {
|
|
|
|
|
this.scrollable.onScrollOffset = getScrollOffset();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.scrollable = new Scrollable(this.bubblesContainer, 'y', 'IM', this.chatInner, getScrollOffset()); */
|
2020-02-20 09:13:15 +01:00
|
|
|
|
this.scroll = this.scrollable.container;
|
2020-05-20 16:25:23 +02:00
|
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
|
this.scrollable.onScrolledTop = () => this.loadMoreHistory(true);
|
|
|
|
|
this.scrollable.onScrolledBottom = () => this.loadMoreHistory(false);
|
2020-05-23 07:31:18 +02:00
|
|
|
|
//this.scrollable.attachSentinels(undefined, 300);
|
2020-04-16 02:48:41 +02:00
|
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
|
this.scroll.addEventListener('scroll', this.onScroll.bind(this));
|
2020-02-13 12:59:55 +01:00
|
|
|
|
this.scroll.parentElement.classList.add('scrolled-down');
|
2020-06-06 12:53:23 +02:00
|
|
|
|
|
|
|
|
|
if(touchSupport) {
|
|
|
|
|
this.scroll.addEventListener('touchmove', () => {
|
|
|
|
|
if(this.isScrollingTimeout) {
|
|
|
|
|
clearTimeout(this.isScrollingTimeout);
|
|
|
|
|
} else if(!this.chatInner.classList.contains('is-scrolling')) {
|
|
|
|
|
this.chatInner.classList.add('is-scrolling');
|
|
|
|
|
}
|
2020-06-16 22:48:08 +02:00
|
|
|
|
}, {passive: true});
|
2020-06-06 12:53:23 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
this.scroll.addEventListener('touchend', () => {
|
|
|
|
|
if(!this.chatInner.classList.contains('is-scrolling')) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2020-06-06 12:53:23 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
if(this.isScrollingTimeout) {
|
|
|
|
|
clearTimeout(this.isScrollingTimeout);
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-18 17:03:26 +02:00
|
|
|
|
this.isScrollingTimeout = window.setTimeout(() => {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
this.chatInner.classList.remove('is-scrolling');
|
|
|
|
|
this.isScrollingTimeout = 0;
|
|
|
|
|
}, 1350);
|
2020-06-06 12:53:23 +02:00
|
|
|
|
}, {passive: true});
|
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
public setPeerStatus(needClear = false) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(!this.myID) return;
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(this.peerID < 0) { // not human
|
|
|
|
|
let chat = appPeersManager.getPeer(this.peerID);
|
|
|
|
|
let isChannel = appPeersManager.isChannel(this.peerID) && !appPeersManager.isMegagroup(this.peerID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
this.subtitleEl.classList.remove('online');
|
|
|
|
|
appSidebarRight.profileElements.subtitle.classList.remove('online');
|
2020-02-17 13:18:06 +01:00
|
|
|
|
///////this.log('setPeerStatus', chat);
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
|
|
|
|
if(needClear) {
|
|
|
|
|
this.subtitleEl.innerText = appSidebarRight.profileElements.subtitle.innerText = '';
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-23 07:31:18 +02:00
|
|
|
|
appProfileManager.getChatFull(chat.id).then((chatInfo: any) => {
|
2020-05-09 14:02:07 +02:00
|
|
|
|
this.log('chatInfo res:', chatInfo);
|
2020-06-05 18:01:06 +02:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let participants_count = chatInfo.participants_count || (chatInfo.participants && chatInfo.participants.participants && chatInfo.participants.participants.length);
|
|
|
|
|
if(participants_count) {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
let subtitle = numberWithCommas(participants_count) + ' ' + (isChannel ? 'followers' : 'members');
|
2020-05-23 07:31:18 +02:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
this.subtitleEl.innerText = appSidebarRight.profileElements.subtitle.innerText = subtitle;
|
2020-05-23 07:31:18 +02:00
|
|
|
|
|
|
|
|
|
if(participants_count < 2) return;
|
|
|
|
|
appChatsManager.getOnlines(chat.id).then(onlines => {
|
|
|
|
|
if(onlines > 1) {
|
|
|
|
|
subtitle += ', ' + numberWithCommas(onlines) + ' online';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.subtitleEl.innerText = appSidebarRight.profileElements.subtitle.innerText = subtitle;
|
|
|
|
|
});
|
2020-02-10 15:51:24 +01:00
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
|
|
|
|
} else if(!appUsersManager.isBot(this.peerID)) { // user
|
|
|
|
|
let user = appUsersManager.getUser(this.peerID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
if(this.myID == this.peerID) {
|
|
|
|
|
this.subtitleEl.innerText = appSidebarRight.profileElements.subtitle.innerText = '';
|
|
|
|
|
} else if(user && user.status) {
|
2020-05-06 03:03:31 +02:00
|
|
|
|
let subtitle = appUsersManager.getUserStatusString(user.id);
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
2020-05-06 03:03:31 +02:00
|
|
|
|
if(subtitle == 'online') {
|
|
|
|
|
this.subtitleEl.classList.add('online');
|
|
|
|
|
appSidebarRight.profileElements.subtitle.classList.add('online');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
appSidebarRight.profileElements.subtitle.innerText = subtitle;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(this.typingUsers[this.peerID] == this.peerID) {
|
|
|
|
|
this.subtitleEl.innerText = 'typing...';
|
|
|
|
|
this.subtitleEl.classList.add('online');
|
2020-04-14 17:46:31 +02:00
|
|
|
|
} else {
|
|
|
|
|
this.subtitleEl.innerText = subtitle;
|
|
|
|
|
|
|
|
|
|
if(subtitle != 'online') {
|
|
|
|
|
this.subtitleEl.classList.remove('online');
|
|
|
|
|
appSidebarRight.profileElements.subtitle.classList.remove('online');
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-09 14:02:07 +02:00
|
|
|
|
} else {
|
|
|
|
|
this.subtitleEl.innerText = 'bot';
|
|
|
|
|
appSidebarRight.profileElements.subtitle.innerText = 'bot';
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
public cleanup(bubblesToo = false) {
|
2020-04-14 17:46:31 +02:00
|
|
|
|
////console.time('appImManager cleanup');
|
2020-02-08 12:58:22 +01:00
|
|
|
|
this.scrolledAll = false;
|
2020-02-13 08:51:11 +01:00
|
|
|
|
this.scrolledAllDown = false;
|
2020-05-27 08:21:16 +02:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.bubbles = {};
|
|
|
|
|
this.dateMessages = {};
|
2020-03-01 18:26:25 +01:00
|
|
|
|
this.bubbleGroups.cleanup();
|
2020-05-03 14:46:05 +02:00
|
|
|
|
this.unreadOut.clear();
|
2020-02-14 06:04:44 +01:00
|
|
|
|
this.needUpdate.length = 0;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
//this.lazyLoadQueue.clear();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
|
// clear input
|
|
|
|
|
this.chatInputC.messageInput.innerHTML = '';
|
2020-02-14 17:15:41 +01:00
|
|
|
|
this.chatInputC.replyElements.cancelBtn.click();
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
|
// clear messages
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(bubblesToo) {
|
|
|
|
|
this.scrollable.container.innerHTML = '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.peerChanged = false;
|
|
|
|
|
this.firstUnreadBubble = null;
|
2020-05-30 08:44:54 +02:00
|
|
|
|
this.attachedUnreadBubble = false;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
this.messagesQueue.length = 0;
|
|
|
|
|
this.messagesQueuePromise = null;
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
|
|
|
|
this.getHistoryTopPromise = this.getHistoryBottomPromise = undefined;
|
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.stickyIntersector.disconnect();
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
|
|
|
|
this.unreadedObserver.disconnect();
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.unreaded.length = 0;
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
|
|
|
|
this.loadedTopTimes = this.loadedBottomTimes = 0;
|
2020-04-22 21:10:09 +02:00
|
|
|
|
|
2020-05-30 08:44:54 +02:00
|
|
|
|
this.cleanupID++;
|
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
////console.timeEnd('appImManager cleanup');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-08-19 17:26:19 +02:00
|
|
|
|
|
|
|
|
|
private findMountedBubbleByMsgID(mid: number) {
|
|
|
|
|
return this.bubbles[getObjectKeysAndSort(this.bubbles).find(id => {
|
|
|
|
|
if(id < mid) return false;
|
|
|
|
|
return !!this.bubbles[id]?.parentElement;
|
|
|
|
|
})];
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
public setPeer(peerID: number, lastMsgID?: number) {
|
|
|
|
|
//console.time('appImManager setPeer');
|
|
|
|
|
//console.time('appImManager setPeer pre promise');
|
2020-04-14 17:46:31 +02:00
|
|
|
|
////console.time('appImManager: pre render start');
|
2020-02-08 07:03:09 +01:00
|
|
|
|
if(peerID == 0) {
|
|
|
|
|
appSidebarRight.toggleSidebar(false);
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.topbar.style.display = this.chatInput.style.display = 'none';
|
|
|
|
|
this.goDownBtn.classList.add('hide');
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.cleanup(true);
|
|
|
|
|
this.peerID = $rootScope.selectedPeerID = 0;
|
|
|
|
|
$rootScope.$broadcast('peer_changed', this.peerID);
|
2020-06-05 18:01:06 +02:00
|
|
|
|
if(mediaSizes.isMobile) {
|
|
|
|
|
this.selectTab(0);
|
|
|
|
|
}
|
2020-04-14 17:46:31 +02:00
|
|
|
|
return false;
|
2020-02-08 07:03:09 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
const samePeer = this.peerID == peerID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
|
if(this.setPeerPromise && samePeer) return this.setPeerPromise;
|
2020-05-26 17:04:06 +02:00
|
|
|
|
|
|
|
|
|
const dialog = appMessagesManager.getDialogByPeerID(peerID)[0] || null;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
let topMessage = lastMsgID <= 0 ? lastMsgID : dialog?.top_message ?? 0; // убрать + 1 после создания базы референсов
|
2020-05-27 08:21:16 +02:00
|
|
|
|
const isTarget = lastMsgID !== undefined;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
// @ts-ignore
|
|
|
|
|
/* if(topMessage && dialog && dialog.top_message == topMessage && dialog.refetchTopMessage) {
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
dialog.refetchTopMessage = false;
|
|
|
|
|
topMessage += 1;
|
|
|
|
|
} */
|
2020-05-27 08:21:16 +02:00
|
|
|
|
if(!isTarget && dialog) {
|
|
|
|
|
if(dialog.unread_count && !samePeer) {
|
2020-05-26 17:04:06 +02:00
|
|
|
|
lastMsgID = dialog.read_inbox_max_id;
|
|
|
|
|
} else {
|
|
|
|
|
lastMsgID = dialog.top_message;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
//lastMsgID = topMessage;
|
2020-05-26 17:04:06 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
|
if(samePeer) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(this.bubbles[lastMsgID]) {
|
2020-06-20 03:11:24 +02:00
|
|
|
|
if(isTarget) {
|
2020-08-19 17:26:19 +02:00
|
|
|
|
const bubble = this.findMountedBubbleByMsgID(lastMsgID);
|
|
|
|
|
this.scrollable.scrollIntoView(bubble);
|
|
|
|
|
this.highlightBubble(bubble);
|
2020-06-20 03:11:24 +02:00
|
|
|
|
} else if(dialog && lastMsgID == topMessage) {
|
|
|
|
|
this.log('will scroll down', this.scroll.scrollTop, this.scroll.scrollHeight);
|
|
|
|
|
this.scroll.scrollTop = this.scroll.scrollHeight;
|
2020-02-10 08:56:15 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
return true;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-04-24 02:48:48 +02:00
|
|
|
|
} else {
|
|
|
|
|
appSidebarRight.searchCloseBtn.click();
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-13 17:26:40 +02:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
// set new
|
|
|
|
|
this.peerID = $rootScope.selectedPeerID = peerID;
|
2020-05-13 17:26:40 +02:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.log('setPeer peerID:', this.peerID, dialog, lastMsgID, topMessage);
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
const isJump = lastMsgID != topMessage;
|
2020-04-14 17:46:31 +02:00
|
|
|
|
// add last message, bc in getHistory will load < max_id
|
2020-05-26 17:04:06 +02:00
|
|
|
|
const additionMsgID = isJump ? 0 : topMessage;
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
|
|
|
|
/* this.setPeerPromise = null;
|
|
|
|
|
this.preloader.detach();
|
|
|
|
|
return true; */
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
//////appSidebarRight.toggleSidebar(true);
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
const maxBubbleID = samePeer && Math.max(...Object.keys(this.bubbles).map(mid => +mid));
|
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
const oldChatInner = this.chatInner;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.cleanup();
|
|
|
|
|
this.chatInner = document.createElement('div');
|
|
|
|
|
this.chatInner.id = 'bubbles-inner';
|
|
|
|
|
this.scrollable.appendTo = this.chatInner;
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.chatInner.className = oldChatInner.className;
|
2020-05-20 16:25:23 +02:00
|
|
|
|
this.chatInner.classList.add('disable-hover', 'is-scrolling');
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
if(!samePeer) {
|
|
|
|
|
this.lazyLoadQueue.clear();
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
this.lazyLoadQueue.lock();
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
const {promise, cached} = this.getHistory(lastMsgID, true, isJump, additionMsgID);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
if(!samePeer) {
|
|
|
|
|
appSidebarRight.setPeer(this.peerID);
|
|
|
|
|
} else {
|
|
|
|
|
this.peerChanged = true;
|
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
// clear
|
|
|
|
|
if(!cached) {
|
|
|
|
|
this.scrollable.container.innerHTML = '';
|
2020-05-20 16:25:23 +02:00
|
|
|
|
//oldChatInner.remove();
|
2020-06-06 22:38:48 +02:00
|
|
|
|
|
|
|
|
|
if(!samePeer) {
|
|
|
|
|
this.finishPeerChange();
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.preloader.attach(this.bubblesContainer);
|
2020-06-06 12:53:23 +02:00
|
|
|
|
|
|
|
|
|
if(mediaSizes.isMobile) {
|
|
|
|
|
this.selectTab(1);
|
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
//console.timeEnd('appImManager setPeer pre promise');
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-08-24 16:09:31 +02:00
|
|
|
|
animationIntersector.lockGroup(ANIMATIONGROUP);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.setPeerPromise = Promise.all([
|
|
|
|
|
promise.then(() => {
|
2020-02-17 13:18:06 +01:00
|
|
|
|
////this.log('setPeer removing preloader');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(cached) {
|
|
|
|
|
this.scrollable.container.innerHTML = '';
|
2020-05-20 16:25:23 +02:00
|
|
|
|
//oldChatInner.remove();
|
2020-06-06 22:38:48 +02:00
|
|
|
|
|
|
|
|
|
if(!samePeer) {
|
|
|
|
|
this.finishPeerChange();
|
2020-06-06 07:26:18 +02:00
|
|
|
|
}
|
2020-06-06 12:53:23 +02:00
|
|
|
|
|
|
|
|
|
if(mediaSizes.isMobile) {
|
|
|
|
|
this.selectTab(1);
|
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
} else {
|
|
|
|
|
this.preloader.detach();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.scrollable.container.append(this.chatInner);
|
2020-08-24 16:09:31 +02:00
|
|
|
|
animationIntersector.unlockGroup(ANIMATIONGROUP);
|
|
|
|
|
animationIntersector.checkAnimations(false, ANIMATIONGROUP/* , true */);
|
2020-05-23 07:31:18 +02:00
|
|
|
|
//this.scrollable.attachSentinels();
|
2020-05-20 16:25:23 +02:00
|
|
|
|
//this.scrollable.container.insertBefore(this.chatInner, this.scrollable.container.lastElementChild);
|
|
|
|
|
|
|
|
|
|
this.lazyLoadQueue.unlock();
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-06-20 03:11:24 +02:00
|
|
|
|
//if(dialog && lastMsgID && lastMsgID != topMessage && (this.bubbles[lastMsgID] || this.firstUnreadBubble)) {
|
|
|
|
|
if(dialog && (isTarget || (lastMsgID != topMessage)) && (this.bubbles[lastMsgID] || this.firstUnreadBubble)) {
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(this.scrollable.scrollLocked) {
|
|
|
|
|
clearTimeout(this.scrollable.scrollLocked);
|
|
|
|
|
this.scrollable.scrollLocked = 0;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
const fromUp = maxBubbleID > 0 && (maxBubbleID < lastMsgID || lastMsgID < 0);
|
2020-06-20 03:11:24 +02:00
|
|
|
|
const forwardingUnread = dialog.read_inbox_max_id == lastMsgID && !isTarget;
|
2020-05-27 08:21:16 +02:00
|
|
|
|
if(!fromUp && (samePeer || forwardingUnread)) {
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.scrollable.scrollTop = this.scrollable.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-19 17:26:19 +02:00
|
|
|
|
let bubble: HTMLElement = forwardingUnread ? (this.firstUnreadBubble || this.bubbles[lastMsgID]) : this.bubbles[lastMsgID];
|
|
|
|
|
if(!bubble?.parentElement) {
|
|
|
|
|
bubble = this.findMountedBubbleByMsgID(lastMsgID);
|
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
this.scrollable.scrollIntoView(bubble, samePeer/* , fromUp */);
|
|
|
|
|
if(!forwardingUnread) {
|
|
|
|
|
this.highlightBubble(bubble);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
} else {
|
|
|
|
|
this.scrollable.scrollTop = this.scrollable.scrollHeight;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-09 14:02:07 +02:00
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
// warning
|
2020-05-26 17:04:06 +02:00
|
|
|
|
if(!lastMsgID || this.bubbles[topMessage] || lastMsgID == topMessage) {
|
2020-05-13 17:26:40 +02:00
|
|
|
|
this.scrolledAllDown = true;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
this.log('scrolledAllDown:', this.scrolledAllDown);
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
2020-05-30 08:44:54 +02:00
|
|
|
|
//if(!this.unreaded.length && dialog) { // lol
|
|
|
|
|
if(this.scrolledAllDown && dialog) { // lol
|
2020-05-27 08:21:16 +02:00
|
|
|
|
appMessagesManager.readHistory(peerID, dialog.top_message);
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
if(dialog?.pFlags?.unread_mark) {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
appMessagesManager.markDialogUnread(peerID, true);
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-27 08:21:16 +02:00
|
|
|
|
this.chatInner.classList.remove('disable-hover', 'is-scrolling'); // warning, performance!
|
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
//console.timeEnd('appImManager setPeer');
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
return true;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
}).catch(err => {
|
|
|
|
|
this.log.error('getHistory promise error:', err);
|
|
|
|
|
throw err;
|
|
|
|
|
})
|
2020-04-14 17:46:31 +02:00
|
|
|
|
]).catch(err => {
|
2020-02-08 12:58:22 +01:00
|
|
|
|
this.log.error('setPeer promises error:', err);
|
2020-03-02 18:15:11 +01:00
|
|
|
|
this.preloader.detach();
|
2020-05-20 16:25:23 +02:00
|
|
|
|
//oldChatInner.remove();
|
2020-02-15 16:20:38 +01:00
|
|
|
|
return false;
|
2020-04-14 17:46:31 +02:00
|
|
|
|
}).then(res => {
|
|
|
|
|
if(this.peerID == peerID) {
|
|
|
|
|
this.setPeerPromise = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return !!res;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
//if(this.messagesQueuePromise) {
|
|
|
|
|
//appSidebarRight.setLoadMutex(this.setPeerPromise);
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
appSidebarRight.setLoadMutex(this.setPeerPromise);
|
|
|
|
|
appSidebarRight.loadSidebarMedia(true);
|
|
|
|
|
|
|
|
|
|
return this.setPeerPromise;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public finishPeerChange() {
|
|
|
|
|
if(this.peerChanged) return;
|
|
|
|
|
|
|
|
|
|
let peerID = this.peerID;
|
|
|
|
|
this.peerChanged = true;
|
|
|
|
|
|
|
|
|
|
this.avatarEl.setAttribute('peer', '' + this.peerID);
|
2020-08-25 11:39:39 +02:00
|
|
|
|
this.avatarEl.update();
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-08-19 14:29:10 +02:00
|
|
|
|
const isAnyGroup = appPeersManager.isAnyGroup(peerID);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
const isChannel = appPeersManager.isChannel(peerID);
|
|
|
|
|
const hasRights = isChannel && appChatsManager.hasRights(-peerID, 'send');
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.chatInner.classList.toggle('has-rights', hasRights);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
this.chatInput.style.display = !isChannel || hasRights ? '' : 'none';
|
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
this.topbar.classList.remove('is-pinned-shown');
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.topbar.style.display = '';
|
|
|
|
|
|
2020-08-19 14:29:10 +02:00
|
|
|
|
this.chatInner.classList.toggle('is-chat', isAnyGroup || peerID == this.myID);
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.chatInner.classList.toggle('is-channel', isChannel);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-08-19 14:29:10 +02:00
|
|
|
|
this.btnMute.classList.toggle('hide', !appPeersManager.isBroadcast(peerID));
|
|
|
|
|
this.btnJoin.classList.toggle('hide', !appChatsManager.getChat(-this.peerID)?.pFlags?.left);
|
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
this.menuButtons.mute.style.display = this.myID == this.peerID ? 'none' : '';
|
2020-05-27 08:21:16 +02:00
|
|
|
|
|
2020-06-06 22:38:48 +02:00
|
|
|
|
const pinned = appMessagesManager.getPinnedMessage(peerID);
|
|
|
|
|
if(pinned && !pinned.deleted) {
|
|
|
|
|
this.setPinnedMessage(pinned);
|
|
|
|
|
} else if(this.pinnedMessageContainer) {
|
|
|
|
|
this.pinnedMessageContainer.remove();
|
|
|
|
|
this.pinnedMessageContainer = null;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
window.requestAnimationFrame(() => {
|
|
|
|
|
let title = '';
|
|
|
|
|
if(this.peerID == this.myID) title = 'Saved Messages';
|
|
|
|
|
else title = appPeersManager.getPeerTitle(this.peerID);
|
|
|
|
|
this.titleEl.innerHTML = appSidebarRight.profileElements.name.innerHTML = title;
|
|
|
|
|
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.goDownBtn.classList.remove('hide');
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
this.setPeerStatus(true);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
appSidebarRight.fillProfileElements();
|
|
|
|
|
|
|
|
|
|
$rootScope.$broadcast('peer_changed', this.peerID);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
public updateUnreadByDialog(dialog: Dialog) {
|
2020-02-11 16:35:57 +01:00
|
|
|
|
let maxID = this.peerID == this.myID ? dialog.read_inbox_max_id : dialog.read_outbox_max_id;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
|
///////this.log('updateUnreadByDialog', maxID, dialog, this.unreadOut);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-03 14:46:05 +02:00
|
|
|
|
for(let msgID of this.unreadOut) {
|
2020-02-11 16:35:57 +01:00
|
|
|
|
if(msgID > 0 && msgID <= maxID) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let bubble = this.bubbles[msgID];
|
2020-05-03 14:46:05 +02:00
|
|
|
|
if(bubble) {
|
|
|
|
|
bubble.classList.remove('is-sent');
|
|
|
|
|
bubble.classList.add('is-read');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.unreadOut.delete(msgID);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-03 14:46:05 +02:00
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
public deleteMessagesByIDs(msgIDs: number[]) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
msgIDs.forEach(id => {
|
|
|
|
|
if(!(id in this.bubbles)) return;
|
|
|
|
|
|
|
|
|
|
let bubble = this.bubbles[id];
|
|
|
|
|
delete this.bubbles[id];
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(this.firstUnreadBubble == bubble) {
|
|
|
|
|
this.firstUnreadBubble = null;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-06 03:03:31 +02:00
|
|
|
|
this.bubbleGroups.removeBubble(bubble, id);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
this.unreadedObserver.unobserve(bubble);
|
2020-05-26 17:04:06 +02:00
|
|
|
|
//this.unreaded.findAndSplice(mid => mid == id);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
this.scrollable.removeElement(bubble);
|
|
|
|
|
//bubble.remove();
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-08-24 16:09:31 +02:00
|
|
|
|
animationIntersector.checkAnimations(false, ANIMATIONGROUP);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
this.deleteEmptyDateGroups();
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
public renderNewMessagesByIDs(msgIDs: number[], scrolledDown = this.scrolledDown) {
|
2020-05-13 17:26:40 +02:00
|
|
|
|
if(!this.scrolledAllDown) { // seems search active or sliced
|
2020-05-20 16:25:23 +02:00
|
|
|
|
this.log('seems search is active, skipping render:', msgIDs);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
msgIDs.forEach((msgID: number) => {
|
|
|
|
|
let message = appMessagesManager.getMessage(msgID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
|
/////////this.log('got new message to append:', message);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
//this.unreaded.push(msgID);
|
|
|
|
|
this.renderMessage(message);
|
|
|
|
|
});
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
//if(scrolledDown) this.scrollable.scrollTop = this.scrollable.scrollHeight;
|
|
|
|
|
if(this.messagesQueuePromise && scrolledDown) {
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.scrollable.scrollTo(this.scrollable.scrollHeight - 1, 'top', false, true);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.messagesQueuePromise.then(() => {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
this.log('messagesQueuePromise after:', this.chatInner.childElementCount, this.scrollable.scrollHeight);
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.scrollable.scrollTo(this.scrollable.scrollHeight, 'top', true, true);
|
2020-05-20 16:25:23 +02:00
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.log('messagesQueuePromise afterafter:', this.chatInner.childElementCount, this.scrollable.scrollHeight);
|
|
|
|
|
}, 10);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-19 17:26:19 +02:00
|
|
|
|
public highlightBubble(element: HTMLElement) {
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(element.dataset.timeout) {
|
|
|
|
|
clearTimeout(+element.dataset.timeout);
|
|
|
|
|
element.classList.remove('is-selected');
|
|
|
|
|
void element.offsetWidth; // reflow
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
element.classList.add('is-selected');
|
|
|
|
|
element.dataset.timeout = '' + setTimeout(() => {
|
|
|
|
|
element.classList.remove('is-selected');
|
|
|
|
|
delete element.dataset.timeout;
|
|
|
|
|
}, 2000);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-04-22 21:10:09 +02:00
|
|
|
|
|
|
|
|
|
public getDateContainerByMessage(message: any, reverse: boolean) {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const date = new Date(message.date * 1000);
|
|
|
|
|
date.setHours(0, 0, 0);
|
|
|
|
|
const dateTimestamp = date.getTime();
|
2020-04-22 21:10:09 +02:00
|
|
|
|
if(!(dateTimestamp in this.dateMessages)) {
|
|
|
|
|
let str = '';
|
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const today = new Date();
|
|
|
|
|
today.setHours(0, 0, 0, 0);
|
2020-04-22 21:10:09 +02:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
if(today.getTime() == date.getTime()) {
|
2020-04-22 21:10:09 +02:00
|
|
|
|
str = 'Today';
|
|
|
|
|
} else {
|
|
|
|
|
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
|
|
|
|
str = months[date.getMonth()] + ' ' + date.getDate();
|
|
|
|
|
|
|
|
|
|
if(date.getFullYear() != today.getFullYear()) {
|
|
|
|
|
str += ', ' + date.getFullYear();
|
|
|
|
|
}
|
2020-04-22 21:10:09 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const div = document.createElement('div');
|
2020-04-22 21:10:09 +02:00
|
|
|
|
div.className = 'bubble service is-date';
|
|
|
|
|
div.innerHTML = `<div class="bubble__container"><div class="service-msg">${str}</div></div>`;
|
|
|
|
|
////////this.log('need to render date message', dateTimestamp, str);
|
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const container = document.createElement('div');
|
2020-04-22 21:10:09 +02:00
|
|
|
|
container.className = 'bubbles-date-group';
|
|
|
|
|
|
|
|
|
|
this.dateMessages[dateTimestamp] = {
|
|
|
|
|
div,
|
|
|
|
|
container,
|
|
|
|
|
firstTimestamp: date.getTime()
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
container.append(div);
|
|
|
|
|
|
|
|
|
|
if(reverse) {
|
2020-05-03 14:46:05 +02:00
|
|
|
|
this.scrollable.prepend(container, false);
|
2020-04-22 21:10:09 +02:00
|
|
|
|
} else {
|
2020-05-03 14:46:05 +02:00
|
|
|
|
this.scrollable.append(container, false);
|
2020-04-22 21:10:09 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.stickyIntersector.observeStickyHeaderChanges(container);
|
2020-04-22 21:10:09 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return this.dateMessages[dateTimestamp];
|
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
public renderMessagesQueue(message: any, bubble: HTMLDivElement, reverse: boolean) {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
/* let dateMessage = this.getDateContainerByMessage(message, reverse);
|
|
|
|
|
if(reverse) dateMessage.container.insertBefore(bubble, dateMessage.div.nextSibling);
|
|
|
|
|
else dateMessage.container.append(bubble);
|
|
|
|
|
return; */
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
let promises: Promise<any>[] = [];
|
2020-05-23 07:31:18 +02:00
|
|
|
|
(Array.from(bubble.querySelectorAll('img, video')) as HTMLImageElement[]).forEach(el => {
|
|
|
|
|
if(el instanceof HTMLVideoElement) {
|
2020-08-24 16:09:31 +02:00
|
|
|
|
if(!el.src) {
|
2020-06-06 22:38:48 +02:00
|
|
|
|
//this.log.warn('no source', el, source, 'src', source.src);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
return;
|
2020-05-23 07:31:18 +02:00
|
|
|
|
} else if(el.readyState >= 4) return;
|
|
|
|
|
} else if(el.complete || !el.src) return;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
let promise = new Promise((resolve, reject) => {
|
2020-05-23 07:31:18 +02:00
|
|
|
|
let r: () => boolean;
|
|
|
|
|
let onLoad = () => {
|
|
|
|
|
clearTimeout(timeout);
|
|
|
|
|
resolve();
|
2020-06-16 22:48:08 +02:00
|
|
|
|
|
|
|
|
|
// lol
|
2020-08-25 11:39:39 +02:00
|
|
|
|
el.removeEventListener(el instanceof HTMLVideoElement ? 'canplay' : 'load', onLoad);
|
2020-05-23 07:31:18 +02:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if(el instanceof HTMLVideoElement) {
|
2020-06-06 22:38:48 +02:00
|
|
|
|
el.addEventListener('canplay', onLoad);
|
|
|
|
|
r = () => el.readyState >= 1;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
} else {
|
2020-05-23 07:31:18 +02:00
|
|
|
|
el.addEventListener('load', onLoad);
|
|
|
|
|
r = () => el.complete;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-23 07:31:18 +02:00
|
|
|
|
// for safari
|
|
|
|
|
let c = () => r() ? onLoad() : window.requestAnimationFrame(c);
|
|
|
|
|
window.requestAnimationFrame(c);
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
let timeout = setTimeout(() => {
|
2020-06-06 22:38:48 +02:00
|
|
|
|
// @ts-ignore
|
2020-06-21 14:25:17 +02:00
|
|
|
|
//this.log.error('did not called', el, el.parentElement, el.complete, el.readyState, src);
|
2020-06-06 22:38:48 +02:00
|
|
|
|
resolve();
|
2020-05-23 07:31:18 +02:00
|
|
|
|
}, 1500);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
promises.push(promise);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.messagesQueue.push({message, bubble, reverse, promises});
|
|
|
|
|
|
|
|
|
|
if(!this.messagesQueuePromise) {
|
|
|
|
|
this.messagesQueuePromise = new Promise((resolve, reject) => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
let chatInner = this.chatInner;
|
|
|
|
|
let queue = this.messagesQueue.slice();
|
|
|
|
|
this.messagesQueue.length = 0;
|
|
|
|
|
|
|
|
|
|
let promises = queue.reduce((acc, {promises}) => acc.concat(promises), []);
|
2020-05-20 16:25:23 +02:00
|
|
|
|
//console.log('promises to call', promises, queue);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
Promise.all(promises).then(() => {
|
|
|
|
|
if(this.chatInner != chatInner) {
|
2020-06-21 14:25:17 +02:00
|
|
|
|
//this.log.warn('chatInner changed!', this.chatInner, chatInner);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
return reject('chatInner changed!');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(this.messagesQueueOnRender) {
|
|
|
|
|
this.messagesQueueOnRender();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
queue.forEach(({message, bubble, reverse}) => {
|
|
|
|
|
let dateMessage = this.getDateContainerByMessage(message, reverse);
|
|
|
|
|
if(reverse) {
|
|
|
|
|
dateMessage.container.insertBefore(bubble, dateMessage.div.nextSibling);
|
|
|
|
|
//this.scrollable.prepareElement(bubble, false);
|
|
|
|
|
} else {
|
|
|
|
|
dateMessage.container.append(bubble);
|
|
|
|
|
//this.scrollable.prepareElement(bubble, true);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
resolve();
|
|
|
|
|
this.messagesQueuePromise = null;
|
|
|
|
|
}, reject);
|
|
|
|
|
}, 0);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-05-30 08:44:54 +02:00
|
|
|
|
|
|
|
|
|
private getMiddleware() {
|
|
|
|
|
let cleanupID = this.cleanupID;
|
|
|
|
|
return () => {
|
|
|
|
|
return this.cleanupID == cleanupID;
|
|
|
|
|
};
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-16 02:48:41 +02:00
|
|
|
|
// reverse means top
|
|
|
|
|
public renderMessage(message: any, reverse = false, multipleRender = false, bubble: HTMLDivElement = null, updatePosition = true) {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
this.log.debug('message to render:', message);
|
2020-05-09 14:02:07 +02:00
|
|
|
|
//return;
|
2020-02-13 12:59:55 +01:00
|
|
|
|
if(message.deleted) return;
|
2020-04-29 21:35:27 +02:00
|
|
|
|
else if(message.grouped_id) { // will render only last album's message
|
|
|
|
|
let storage = appMessagesManager.groupedMessagesStorage[message.grouped_id];
|
|
|
|
|
let maxID = Math.max(...Object.keys(storage).map(i => +i));
|
|
|
|
|
if(message.mid < maxID) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let peerID = this.peerID;
|
|
|
|
|
let our = message.fromID == this.myID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let messageDiv = document.createElement('div');
|
|
|
|
|
messageDiv.classList.add('message');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
//messageDiv.innerText = message.message;
|
2020-04-16 02:48:41 +02:00
|
|
|
|
|
2020-02-26 18:52:59 +01:00
|
|
|
|
let bubbleContainer: HTMLDivElement;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
|
// bubble
|
2020-02-13 08:51:11 +01:00
|
|
|
|
if(!bubble) {
|
2020-02-26 18:52:59 +01:00
|
|
|
|
bubbleContainer = document.createElement('div');
|
|
|
|
|
bubbleContainer.classList.add('bubble__container');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
|
bubble = document.createElement('div');
|
|
|
|
|
bubble.classList.add('bubble');
|
2020-02-26 18:52:59 +01:00
|
|
|
|
bubble.appendChild(bubbleContainer);
|
2020-02-13 08:51:11 +01:00
|
|
|
|
this.bubbles[+message.mid] = bubble;
|
|
|
|
|
} else {
|
|
|
|
|
bubble.className = 'bubble';
|
2020-02-26 18:52:59 +01:00
|
|
|
|
bubbleContainer = bubble.firstElementChild as HTMLDivElement;
|
|
|
|
|
bubbleContainer.innerHTML = '';
|
2020-06-16 22:48:08 +02:00
|
|
|
|
bubbleContainer.style.marginBottom = '';
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
if(bubble == this.firstUnreadBubble) {
|
|
|
|
|
bubble.classList.add('is-first-unread');
|
|
|
|
|
}
|
2020-02-26 18:52:59 +01:00
|
|
|
|
//bubble.innerHTML = '';
|
2020-02-13 08:51:11 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
bubble.dataset.mid = message.mid;
|
|
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
|
if(message._ == 'messageService') {
|
|
|
|
|
let action = message.action;
|
2020-05-26 17:04:06 +02:00
|
|
|
|
let _ = action._;
|
2020-08-19 17:26:19 +02:00
|
|
|
|
if(langPack.hasOwnProperty(_) && !langPack[_]) {
|
2020-05-26 17:04:06 +02:00
|
|
|
|
return bubble;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
bubble.className = 'bubble service';
|
|
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
|
let title = appPeersManager.getPeerTitle(message.fromID);
|
|
|
|
|
let name = document.createElement('div');
|
|
|
|
|
name.classList.add('name');
|
|
|
|
|
name.dataset.peerID = message.fromID;
|
|
|
|
|
name.innerHTML = title;
|
2020-05-09 14:02:07 +02:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
let str = '';
|
|
|
|
|
if(action.message) {
|
|
|
|
|
str = RichTextProcessor.wrapRichText(action.message, {noLinebreaks: true});
|
|
|
|
|
} else {
|
|
|
|
|
if(_ == "messageActionPhoneCall") {
|
|
|
|
|
_ += '.' + action.type;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
let l = langPack[_];
|
|
|
|
|
if(!l) {
|
|
|
|
|
l = '[' + _ + ']';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
str = l[0].toUpperCase() == l[0] ? l : (name.innerText ? name.outerHTML + ' ' : '') + l;
|
2020-05-09 14:02:07 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
|
bubbleContainer.innerHTML = `<div class="service-msg">${str}</div>`;
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(updatePosition) {
|
|
|
|
|
this.renderMessagesQueue(message, bubble, reverse);
|
2020-04-22 21:10:09 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
return bubble;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
// time section
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let date = new Date(message.date * 1000);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
let time = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
|
|
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
|
if(message.views) {
|
|
|
|
|
bubble.classList.add('channel-post');
|
|
|
|
|
time = formatNumber(message.views, 1) + ' <i class="tgico-channelviews"></i> ' + time;
|
2020-06-05 18:01:06 +02:00
|
|
|
|
|
|
|
|
|
if(!message.savedFrom) {
|
|
|
|
|
let forward = document.createElement('div');
|
|
|
|
|
forward.classList.add('bubble-beside-button', 'forward');
|
|
|
|
|
forward.innerHTML = `
|
|
|
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
|
|
|
|
|
<defs>
|
|
|
|
|
<path d="M13.55 3.24L13.64 3.25L13.73 3.27L13.81 3.29L13.9 3.32L13.98 3.35L14.06 3.39L14.14 3.43L14.22 3.48L14.29 3.53L14.36 3.59L14.43 3.64L22.23 10.85L22.36 10.99L22.48 11.15L22.57 11.31L22.64 11.48L22.69 11.66L22.72 11.85L22.73 12.04L22.71 12.22L22.67 12.41L22.61 12.59L22.53 12.76L22.42 12.93L22.29 13.09L22.23 13.15L14.43 20.36L14.28 20.48L14.12 20.58L13.95 20.66L13.77 20.72L13.58 20.76L13.4 20.77L13.22 20.76L13.03 20.73L12.85 20.68L12.68 20.61L12.52 20.52L12.36 20.4L12.22 20.27L12.16 20.2L12.1 20.13L12.05 20.05L12.01 19.98L11.96 19.9L11.93 19.82L11.89 19.73L11.87 19.65L11.84 19.56L11.83 19.47L11.81 19.39L11.81 19.3L11.8 19.2L11.8 16.42L11 16.49L10.23 16.58L9.51 16.71L8.82 16.88L8.18 17.09L7.57 17.33L7.01 17.6L6.48 17.91L5.99 18.26L5.55 18.64L5.14 19.05L4.77 19.51L4.43 19.99L4.29 20.23L4.21 20.35L4.11 20.47L4 20.57L3.88 20.65L3.75 20.72L3.62 20.78L3.48 20.82L3.33 20.84L3.19 20.84L3.04 20.83L2.9 20.79L2.75 20.74L2.62 20.68L2.53 20.62L2.45 20.56L2.38 20.5L2.31 20.43L2.25 20.36L2.2 20.28L2.15 20.19L2.11 20.11L2.07 20.02L2.04 19.92L2.02 19.83L2.01 19.73L2 19.63L2.04 17.99L2.19 16.46L2.46 15.05L2.85 13.75L3.35 12.58L3.97 11.53L4.7 10.6L5.55 9.8L6.51 9.12L7.59 8.56L8.77 8.13L10.07 7.83L11.48 7.65L11.8 7.63L11.8 4.8L11.91 4.56L12.02 4.35L12.14 4.16L12.25 3.98L12.37 3.82L12.48 3.68L12.61 3.56L12.73 3.46L12.85 3.38L12.98 3.31L13.11 3.27L13.24 3.24L13.37 3.23L13.46 3.23L13.55 3.24Z" id="b13RmHDQtl"></path>
|
|
|
|
|
</defs>
|
|
|
|
|
<use xlink:href="#b13RmHDQtl" opacity="1" fill="#fff" fill-opacity="1"></use>
|
|
|
|
|
</svg>`;
|
|
|
|
|
bubbleContainer.append(forward);
|
2020-08-28 21:53:10 +02:00
|
|
|
|
bubble.classList.add('with-beside-button');
|
2020-06-05 18:01:06 +02:00
|
|
|
|
}
|
2020-02-10 15:51:24 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
|
if(message.edit_date) {
|
|
|
|
|
bubble.classList.add('is-edited');
|
|
|
|
|
time = '<i class="edited">edited</i> ' + time;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let timeSpan = document.createElement('span');
|
|
|
|
|
timeSpan.classList.add('time');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let timeInner = document.createElement('div');
|
|
|
|
|
timeInner.classList.add('inner', 'tgico');
|
2020-02-10 15:51:24 +01:00
|
|
|
|
timeInner.innerHTML = time;
|
2020-05-01 23:28:40 +02:00
|
|
|
|
|
|
|
|
|
let messageMessage: string, totalEntities: any[];
|
|
|
|
|
if(message.grouped_id) {
|
|
|
|
|
let group = appMessagesManager.groupedMessagesStorage[message.grouped_id];
|
|
|
|
|
let foundMessages = 0;
|
|
|
|
|
for(let i in group) {
|
|
|
|
|
let m = group[i];
|
|
|
|
|
if(m.message) {
|
|
|
|
|
if(++foundMessages > 1) break;
|
|
|
|
|
messageMessage = m.message;
|
|
|
|
|
totalEntities = m.totalEntities;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(foundMessages > 1) {
|
|
|
|
|
messageMessage = undefined;
|
|
|
|
|
totalEntities = undefined;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-01 23:28:40 +02:00
|
|
|
|
if(!messageMessage && !totalEntities) {
|
|
|
|
|
messageMessage = message.message;
|
|
|
|
|
totalEntities = message.totalEntities;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let richText = RichTextProcessor.wrapRichText(messageMessage, {
|
|
|
|
|
entities: totalEntities
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let messageMedia = message.media;
|
|
|
|
|
|
2020-08-24 16:09:31 +02:00
|
|
|
|
if(totalEntities && !messageMedia) {
|
2020-05-01 23:28:40 +02:00
|
|
|
|
let emojiEntities = totalEntities.filter((e: any) => e._ == 'messageEntityEmoji');
|
|
|
|
|
let strLength = messageMessage.length;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let emojiStrLength = emojiEntities.reduce((acc: number, curr: any) => acc + curr.length, 0);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(emojiStrLength == strLength && emojiEntities.length <= 3) {
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let sticker = appStickersManager.getAnimatedEmojiSticker(messageMessage);
|
|
|
|
|
if(emojiEntities.length == 1 && !messageMedia && sticker) {
|
|
|
|
|
messageMedia = {
|
|
|
|
|
_: 'messageMediaDocument',
|
|
|
|
|
document: sticker
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
let attachmentDiv = document.createElement('div');
|
|
|
|
|
attachmentDiv.classList.add('attachment');
|
|
|
|
|
|
|
|
|
|
attachmentDiv.innerHTML = richText;
|
|
|
|
|
|
|
|
|
|
bubble.classList.add('emoji-' + emojiEntities.length + 'x');
|
|
|
|
|
|
|
|
|
|
bubbleContainer.append(attachmentDiv);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
bubble.classList.add('is-message-empty', 'emoji-big');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
} else {
|
|
|
|
|
messageDiv.innerHTML = richText;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
/* if(strLength == emojiStrLength) {
|
|
|
|
|
messageDiv.classList.add('emoji-only');
|
|
|
|
|
messageDiv.classList.add('message-empty');
|
|
|
|
|
} */
|
|
|
|
|
} else {
|
|
|
|
|
messageDiv.innerHTML = richText;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
timeSpan.appendChild(timeInner);
|
|
|
|
|
messageDiv.append(timeSpan);
|
2020-02-26 18:52:59 +01:00
|
|
|
|
bubbleContainer.prepend(messageDiv);
|
2020-02-10 15:51:24 +01:00
|
|
|
|
//bubble.prepend(timeSpan, messageDiv); // that's bad
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
if(message.reply_markup && message.reply_markup._ == 'replyInlineMarkup' && message.reply_markup.rows && message.reply_markup.rows.length) {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const rows = message.reply_markup.rows;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const containerDiv = document.createElement('div');
|
2020-05-18 03:21:58 +02:00
|
|
|
|
containerDiv.classList.add('reply-markup');
|
|
|
|
|
rows.forEach((row: any) => {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const buttons = row.buttons;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(!buttons || !buttons.length) return;
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const rowDiv = document.createElement('div');
|
2020-05-18 03:21:58 +02:00
|
|
|
|
rowDiv.classList.add('reply-markup-row');
|
|
|
|
|
|
|
|
|
|
buttons.forEach((button: any) => {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const text = RichTextProcessor.wrapRichText(button.text, {noLinks: true, noLinebreaks: true});
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
let buttonEl: HTMLButtonElement | HTMLAnchorElement;
|
|
|
|
|
|
|
|
|
|
switch(button._) {
|
|
|
|
|
case 'keyboardButtonUrl': {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const from = appUsersManager.getUser(message.fromID);
|
|
|
|
|
const unsafe = !(from && from.pFlags && from.pFlags.verified);
|
|
|
|
|
const url = RichTextProcessor.wrapUrl(button.url, unsafe);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
buttonEl = document.createElement('a');
|
|
|
|
|
buttonEl.href = url;
|
|
|
|
|
buttonEl.rel = 'noopener noreferrer';
|
|
|
|
|
buttonEl.target = '_blank';
|
|
|
|
|
buttonEl.classList.add('is-link', 'tgico');
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
default: {
|
|
|
|
|
buttonEl = document.createElement('button');
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
buttonEl.classList.add('reply-markup-button', 'rp');
|
|
|
|
|
buttonEl.innerHTML = text;
|
|
|
|
|
|
|
|
|
|
ripple(buttonEl);
|
|
|
|
|
|
|
|
|
|
rowDiv.append(buttonEl);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
containerDiv.append(rowDiv);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
containerDiv.addEventListener('click', (e) => {
|
|
|
|
|
let target = e.target as HTMLElement;
|
|
|
|
|
|
|
|
|
|
if(!target.classList.contains('reply-markup-button')) target = findUpClassName(target, 'reply-markup-button');
|
|
|
|
|
if(!target) return;
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const column = whichChild(target);
|
|
|
|
|
const row = rows[whichChild(target.parentElement)];
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
if(!row.buttons || !row.buttons[column]) {
|
|
|
|
|
this.log.warn('no such button', row, column, message);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const button = row.buttons[column];
|
2020-05-18 03:21:58 +02:00
|
|
|
|
appInlineBotsManager.callbackButtonClick(message.mid, button);
|
|
|
|
|
});
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const offset = rows.length * 45 + 'px';
|
2020-05-18 03:21:58 +02:00
|
|
|
|
bubbleContainer.style.marginBottom = offset;
|
|
|
|
|
containerDiv.style.bottom = '-' + offset;
|
|
|
|
|
|
|
|
|
|
bubbleContainer.prepend(containerDiv);
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(our) {
|
2020-05-03 14:46:05 +02:00
|
|
|
|
if(message.pFlags.unread || message.mid < 0) this.unreadOut.add(message.mid); // message.mid < 0 added 11.02.2020
|
2020-02-11 16:35:57 +01:00
|
|
|
|
let status = '';
|
|
|
|
|
if(message.mid < 0) status = 'is-sending';
|
|
|
|
|
else status = message.pFlags.unread ? 'is-sent' : 'is-read';
|
2020-02-06 16:43:07 +01:00
|
|
|
|
bubble.classList.add(status);
|
|
|
|
|
} else {
|
2020-02-07 08:39:00 +01:00
|
|
|
|
//this.log('not our message', message, message.pFlags.unread);
|
2020-04-14 17:46:31 +02:00
|
|
|
|
if(message.pFlags.unread) {
|
2020-05-03 14:46:05 +02:00
|
|
|
|
this.unreadedObserver.observe(bubble);
|
2020-05-26 17:04:06 +02:00
|
|
|
|
if(!this.unreaded.indexOf(message.mid)) {
|
|
|
|
|
this.unreaded.push(message.mid);
|
|
|
|
|
}
|
2020-04-14 17:46:31 +02:00
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-27 08:21:16 +02:00
|
|
|
|
|
|
|
|
|
const isOut = our && (!message.fwd_from || this.peerID != this.myID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
// media
|
2020-05-13 17:26:40 +02:00
|
|
|
|
if(messageMedia/* && messageMedia._ == 'messageMediaPhoto' */) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let attachmentDiv = document.createElement('div');
|
|
|
|
|
attachmentDiv.classList.add('attachment');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-01 23:28:40 +02:00
|
|
|
|
if(!messageMessage) {
|
2020-04-08 17:46:43 +02:00
|
|
|
|
bubble.classList.add('is-message-empty');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let processingWebPage = false;
|
2020-05-01 23:28:40 +02:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
switch(messageMedia._) {
|
2020-02-07 15:17:39 +01:00
|
|
|
|
case 'messageMediaPending': {
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let pending = messageMedia;
|
2020-02-07 15:17:39 +01:00
|
|
|
|
let preloader = pending.preloader as ProgressivePreloader;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
|
switch(pending.type) {
|
2020-05-01 23:28:40 +02:00
|
|
|
|
case 'album': {
|
|
|
|
|
this.log('will wrap pending album');
|
|
|
|
|
|
|
|
|
|
bubble.classList.add('hide-name', 'photo', 'is-album');
|
|
|
|
|
wrapAlbum({
|
|
|
|
|
groupID: '' + message.id,
|
|
|
|
|
attachmentDiv,
|
|
|
|
|
uploading: true,
|
|
|
|
|
isOut: true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
|
case 'photo': {
|
2020-04-28 19:30:54 +02:00
|
|
|
|
//if(pending.size < 5e6) {
|
2020-09-17 21:33:23 +02:00
|
|
|
|
const photo = appPhotosManager.getPhoto(message.id);
|
|
|
|
|
//if(photo._ == 'photoEmpty') break;
|
|
|
|
|
this.log('will wrap pending photo:', pending, message, photo);
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const tailSupported = !isAndroid;
|
|
|
|
|
if(tailSupported) bubble.classList.add('with-media-tail');
|
2020-09-17 21:33:23 +02:00
|
|
|
|
wrapPhoto(photo, message, attachmentDiv, undefined, undefined, tailSupported, true, this.lazyLoadQueue, null);
|
2020-04-26 03:45:07 +02:00
|
|
|
|
|
2020-02-11 07:22:12 +01:00
|
|
|
|
bubble.classList.add('hide-name', 'photo');
|
2020-04-28 19:30:54 +02:00
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
case 'video': {
|
|
|
|
|
//if(pending.size < 5e6) {
|
|
|
|
|
let doc = appDocsManager.getDoc(message.id);
|
2020-09-17 21:33:23 +02:00
|
|
|
|
//if(doc._ == 'documentEmpty') break;
|
2020-04-28 19:30:54 +02:00
|
|
|
|
this.log('will wrap pending video:', pending, message, doc);
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const tailSupported = !isAndroid && !isApple && doc.type != 'round';
|
|
|
|
|
if(tailSupported) bubble.classList.add('with-media-tail');
|
2020-04-28 19:30:54 +02:00
|
|
|
|
wrapVideo({
|
|
|
|
|
doc,
|
|
|
|
|
container: attachmentDiv,
|
|
|
|
|
message,
|
2020-06-05 18:01:06 +02:00
|
|
|
|
boxWidth: mediaSizes.active.regular.width,
|
|
|
|
|
boxHeight: mediaSizes.active.regular.height,
|
2020-06-13 10:19:39 +02:00
|
|
|
|
withTail: tailSupported,
|
2020-05-27 08:21:16 +02:00
|
|
|
|
isOut: isOut,
|
2020-04-28 19:30:54 +02:00
|
|
|
|
lazyLoadQueue: this.lazyLoadQueue,
|
2020-08-24 16:09:31 +02:00
|
|
|
|
middleware: null,
|
|
|
|
|
group: ANIMATIONGROUP
|
2020-04-28 19:30:54 +02:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
preloader.attach(attachmentDiv, false);
|
|
|
|
|
bubble.classList.add('hide-name', 'video');
|
|
|
|
|
//}
|
|
|
|
|
break;
|
2020-02-07 15:17:39 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
|
case 'audio':
|
2020-06-02 00:19:35 +02:00
|
|
|
|
case 'voice':
|
2020-02-07 15:17:39 +01:00
|
|
|
|
case 'document': {
|
2020-08-28 17:11:25 +02:00
|
|
|
|
const doc = appDocsManager.getDoc(message.id);
|
2020-09-17 21:33:23 +02:00
|
|
|
|
//if(doc._ == 'documentEmpty') break;
|
2020-06-02 00:19:35 +02:00
|
|
|
|
this.log('will wrap pending doc:', doc);
|
2020-08-28 17:11:25 +02:00
|
|
|
|
const docDiv = wrapDocument(doc, false, true, message.id);
|
2020-06-20 03:11:24 +02:00
|
|
|
|
|
|
|
|
|
if(doc.type == 'audio' || doc.type == 'voice') {
|
2020-08-28 17:11:25 +02:00
|
|
|
|
(docDiv as AudioElement).preloader = preloader;
|
2020-06-20 03:11:24 +02:00
|
|
|
|
} else {
|
2020-08-28 17:11:25 +02:00
|
|
|
|
const icoDiv = docDiv.querySelector('.audio-download, .document-ico');
|
2020-06-20 03:11:24 +02:00
|
|
|
|
preloader.attach(icoDiv, false);
|
|
|
|
|
}
|
2020-06-02 00:19:35 +02:00
|
|
|
|
|
|
|
|
|
if(pending.type == 'voice') {
|
|
|
|
|
bubble.classList.add('bubble-audio');
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-08 17:46:43 +02:00
|
|
|
|
bubble.classList.remove('is-message-empty');
|
2020-05-01 23:28:40 +02:00
|
|
|
|
messageDiv.classList.add((pending.type || 'document') + '-message');
|
2020-02-07 15:17:39 +01:00
|
|
|
|
messageDiv.append(docDiv);
|
|
|
|
|
processingWebPage = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
|
break;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
case 'messageMediaPhoto': {
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let photo = messageMedia.photo;
|
2020-02-17 13:18:06 +01:00
|
|
|
|
////////this.log('messageMediaPhoto', photo);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-07 07:38:55 +01:00
|
|
|
|
bubble.classList.add('hide-name', 'photo');
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const tailSupported = !isAndroid;
|
|
|
|
|
if(tailSupported) bubble.classList.add('with-media-tail');
|
2020-08-25 11:39:39 +02:00
|
|
|
|
|
2020-04-29 21:35:27 +02:00
|
|
|
|
if(message.grouped_id) {
|
|
|
|
|
bubble.classList.add('is-album');
|
|
|
|
|
|
2020-08-25 11:39:39 +02:00
|
|
|
|
let storage = appMessagesManager.groupedMessagesStorage[message.grouped_id];
|
|
|
|
|
if(Object.keys(storage).length != 1) {
|
|
|
|
|
wrapAlbum({
|
|
|
|
|
groupID: message.grouped_id,
|
|
|
|
|
attachmentDiv,
|
|
|
|
|
middleware: this.getMiddleware(),
|
|
|
|
|
isOut: our,
|
|
|
|
|
lazyLoadQueue: this.lazyLoadQueue
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
2020-04-29 21:35:27 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-08-25 18:26:49 +02:00
|
|
|
|
wrapPhoto(photo, message, attachmentDiv, undefined, undefined, tailSupported, isOut, this.lazyLoadQueue, this.getMiddleware());
|
2020-08-25 11:39:39 +02:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
break;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
case 'messageMediaWebPage': {
|
|
|
|
|
processingWebPage = true;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let webpage = messageMedia.webpage;
|
2020-02-17 13:18:06 +01:00
|
|
|
|
////////this.log('messageMediaWebPage', webpage);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(webpage._ == 'webPageEmpty') {
|
|
|
|
|
break;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
bubble.classList.add('webpage');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let box = document.createElement('div');
|
|
|
|
|
box.classList.add('box', 'web');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let quote = document.createElement('div');
|
|
|
|
|
quote.classList.add('quote');
|
2020-05-30 21:09:44 +02:00
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
let previewResizer: HTMLDivElement, preview: HTMLDivElement;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(webpage.photo || webpage.document) {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
previewResizer = document.createElement('div');
|
|
|
|
|
previewResizer.classList.add('preview-resizer');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
preview = document.createElement('div');
|
|
|
|
|
preview.classList.add('preview');
|
2020-06-05 18:01:06 +02:00
|
|
|
|
previewResizer.append(preview);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let doc: any = null;
|
|
|
|
|
if(webpage.document) {
|
|
|
|
|
doc = webpage.document;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(doc.type == 'gif' || doc.type == 'video') {
|
2020-02-10 15:51:24 +01:00
|
|
|
|
//if(doc.size <= 20e6) {
|
2020-03-01 18:26:25 +01:00
|
|
|
|
bubble.classList.add('video');
|
2020-04-19 23:40:00 +02:00
|
|
|
|
wrapVideo({
|
|
|
|
|
doc,
|
|
|
|
|
container: preview,
|
|
|
|
|
message,
|
2020-06-05 18:01:06 +02:00
|
|
|
|
boxWidth: mediaSizes.active.webpage.width,
|
|
|
|
|
boxHeight: mediaSizes.active.webpage.height,
|
2020-04-19 23:40:00 +02:00
|
|
|
|
lazyLoadQueue: this.lazyLoadQueue,
|
2020-05-30 08:44:54 +02:00
|
|
|
|
middleware: this.getMiddleware(),
|
2020-08-24 16:09:31 +02:00
|
|
|
|
isOut,
|
|
|
|
|
group: ANIMATIONGROUP
|
2020-04-19 23:40:00 +02:00
|
|
|
|
});
|
2020-02-10 15:51:24 +01:00
|
|
|
|
//}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
} else {
|
|
|
|
|
doc = null;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
if(previewResizer) {
|
|
|
|
|
quote.append(previewResizer);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-30 21:09:44 +02:00
|
|
|
|
let quoteTextDiv = document.createElement('div');
|
|
|
|
|
quoteTextDiv.classList.add('quote-text');
|
|
|
|
|
|
|
|
|
|
if(webpage.site_name) {
|
|
|
|
|
let nameEl = document.createElement('a');
|
|
|
|
|
nameEl.classList.add('name');
|
|
|
|
|
nameEl.setAttribute('target', '_blank');
|
|
|
|
|
nameEl.href = webpage.url || '#';
|
|
|
|
|
nameEl.innerHTML = RichTextProcessor.wrapEmojiText(webpage.site_name);
|
|
|
|
|
quoteTextDiv.append(nameEl);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-30 21:09:44 +02:00
|
|
|
|
|
2020-09-23 22:29:53 +02:00
|
|
|
|
if(webpage.rTitle) {
|
2020-05-30 21:09:44 +02:00
|
|
|
|
let titleDiv = document.createElement('div');
|
|
|
|
|
titleDiv.classList.add('title');
|
2020-09-23 22:29:53 +02:00
|
|
|
|
titleDiv.innerHTML = webpage.rTitle;
|
2020-05-30 21:09:44 +02:00
|
|
|
|
quoteTextDiv.append(titleDiv);
|
2020-02-14 10:30:06 +01:00
|
|
|
|
}
|
2020-05-30 08:44:54 +02:00
|
|
|
|
|
2020-09-23 22:29:53 +02:00
|
|
|
|
if(webpage.rDescription) {
|
2020-05-30 21:09:44 +02:00
|
|
|
|
let textDiv = document.createElement('div');
|
|
|
|
|
textDiv.classList.add('text');
|
2020-09-23 22:29:53 +02:00
|
|
|
|
textDiv.innerHTML = webpage.rDescription;
|
2020-05-30 21:09:44 +02:00
|
|
|
|
quoteTextDiv.append(textDiv);
|
|
|
|
|
}
|
2020-05-30 08:44:54 +02:00
|
|
|
|
|
|
|
|
|
quote.append(quoteTextDiv);
|
2020-05-30 21:09:44 +02:00
|
|
|
|
|
|
|
|
|
if(webpage.photo && !doc) {
|
|
|
|
|
bubble.classList.add('photo');
|
|
|
|
|
|
|
|
|
|
const size = webpage.photo.sizes[webpage.photo.sizes.length - 1];
|
|
|
|
|
if(size.w == size.h && quoteTextDiv.childElementCount) {
|
|
|
|
|
bubble.classList.add('is-square-photo');
|
|
|
|
|
} else if(size.h > size.w) {
|
|
|
|
|
bubble.classList.add('is-vertical-photo');
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-30 21:30:11 +02:00
|
|
|
|
wrapPhoto(webpage.photo, message, preview, mediaSizes.active.webpage.width, mediaSizes.active.webpage.height, false, isOut, this.lazyLoadQueue, this.getMiddleware());
|
2020-05-30 21:09:44 +02:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
box.append(quote);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
|
//bubble.prepend(box);
|
2020-02-26 18:52:59 +01:00
|
|
|
|
bubbleContainer.prepend(timeSpan, box);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
//this.log('night running', bubble.scrollHeight);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
break;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
case 'messageMediaDocument': {
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let doc = messageMedia.document;
|
2020-04-16 02:48:41 +02:00
|
|
|
|
|
2020-05-06 03:03:31 +02:00
|
|
|
|
//this.log('messageMediaDocument', doc, bubble);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-18 23:55:20 +02:00
|
|
|
|
if(doc.sticker/* && doc.size <= 1e6 */) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
bubble.classList.add('sticker');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(doc.animated) {
|
|
|
|
|
bubble.classList.add('sticker-animated');
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-26 17:04:06 +02:00
|
|
|
|
let size = bubble.classList.contains('emoji-big') ? 140 : 200;
|
|
|
|
|
appPhotosManager.setAttachmentSize(doc, attachmentDiv, size, size, true);
|
2020-04-14 17:46:31 +02:00
|
|
|
|
//let preloader = new ProgressivePreloader(attachmentDiv, false);
|
2020-02-26 18:52:59 +01:00
|
|
|
|
bubbleContainer.style.height = attachmentDiv.style.height;
|
|
|
|
|
bubbleContainer.style.width = attachmentDiv.style.width;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
//appPhotosManager.setAttachmentSize(doc, bubble);
|
2020-05-26 17:04:06 +02:00
|
|
|
|
wrapSticker({
|
|
|
|
|
doc,
|
|
|
|
|
div: attachmentDiv,
|
2020-05-30 08:44:54 +02:00
|
|
|
|
middleware: this.getMiddleware(),
|
2020-05-26 17:04:06 +02:00
|
|
|
|
lazyLoadQueue: this.lazyLoadQueue,
|
2020-08-24 16:09:31 +02:00
|
|
|
|
group: ANIMATIONGROUP,
|
2020-06-13 10:19:39 +02:00
|
|
|
|
//play: !!message.pending || !multipleRender,
|
|
|
|
|
play: true,
|
|
|
|
|
loop: true,
|
|
|
|
|
emoji: bubble.classList.contains('emoji-big') ? messageMessage : undefined,
|
|
|
|
|
withThumb: true
|
2020-05-26 17:04:06 +02:00
|
|
|
|
});
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
break;
|
2020-04-28 19:30:54 +02:00
|
|
|
|
} else if(doc.type == 'video' || doc.type == 'gif' || doc.type == 'round'/* && doc.size <= 20e6 */) {
|
2020-05-06 03:03:31 +02:00
|
|
|
|
//this.log('never get free 2', doc);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
bubble.classList.add('hide-name', doc.type == 'round' ? 'round' : 'video');
|
2020-05-01 23:28:40 +02:00
|
|
|
|
if(message.grouped_id) {
|
|
|
|
|
bubble.classList.add('is-album');
|
|
|
|
|
|
|
|
|
|
wrapAlbum({
|
|
|
|
|
groupID: message.grouped_id,
|
|
|
|
|
attachmentDiv,
|
2020-05-30 08:44:54 +02:00
|
|
|
|
middleware: this.getMiddleware(),
|
2020-05-01 23:28:40 +02:00
|
|
|
|
isOut: our,
|
|
|
|
|
lazyLoadQueue: this.lazyLoadQueue
|
|
|
|
|
});
|
|
|
|
|
} else {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const tailSupported = !isAndroid && !isApple && doc.type != 'round';
|
|
|
|
|
if(tailSupported) bubble.classList.add('with-media-tail');
|
2020-05-01 23:28:40 +02:00
|
|
|
|
wrapVideo({
|
|
|
|
|
doc,
|
|
|
|
|
container: attachmentDiv,
|
|
|
|
|
message,
|
2020-06-05 18:01:06 +02:00
|
|
|
|
boxWidth: mediaSizes.active.regular.width,
|
|
|
|
|
boxHeight: mediaSizes.active.regular.height,
|
2020-06-13 10:19:39 +02:00
|
|
|
|
withTail: tailSupported,
|
2020-05-27 08:21:16 +02:00
|
|
|
|
isOut: isOut,
|
2020-05-01 23:28:40 +02:00
|
|
|
|
lazyLoadQueue: this.lazyLoadQueue,
|
2020-08-24 16:09:31 +02:00
|
|
|
|
middleware: this.getMiddleware(),
|
|
|
|
|
group: ANIMATIONGROUP
|
2020-05-01 23:28:40 +02:00
|
|
|
|
});
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
} else if(doc.mime_type == 'audio/ogg') {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
let docDiv = wrapDocument(doc, false, false, message.mid);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-08 17:46:43 +02:00
|
|
|
|
bubble.classList.remove('is-message-empty');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
|
|
bubble.classList.add('bubble-audio');
|
|
|
|
|
messageDiv.append(docDiv);
|
|
|
|
|
processingWebPage = true;
|
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
break;
|
|
|
|
|
} else {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
let docDiv = wrapDocument(doc, false, false, message.mid);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-08 17:46:43 +02:00
|
|
|
|
bubble.classList.remove('is-message-empty');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
messageDiv.append(docDiv);
|
2020-04-30 15:43:26 +02:00
|
|
|
|
messageDiv.classList.add((doc.type || 'document') + '-message');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
processingWebPage = true;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
break;
|
|
|
|
|
}
|
2020-04-30 15:43:26 +02:00
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
case 'messageMediaContact': {
|
2020-05-06 03:03:31 +02:00
|
|
|
|
//this.log('wrapping contact', message);
|
2020-04-30 15:43:26 +02:00
|
|
|
|
|
|
|
|
|
let contactDiv = document.createElement('div');
|
|
|
|
|
contactDiv.classList.add('contact');
|
2020-05-13 17:26:40 +02:00
|
|
|
|
contactDiv.dataset.peerID = '' + messageMedia.user_id;
|
2020-05-10 03:23:21 +02:00
|
|
|
|
|
2020-04-30 15:43:26 +02:00
|
|
|
|
messageDiv.classList.add('contact-message');
|
|
|
|
|
processingWebPage = true;
|
|
|
|
|
|
|
|
|
|
let texts = [];
|
|
|
|
|
if(message.media.first_name) texts.push(RichTextProcessor.wrapEmojiText(message.media.first_name));
|
|
|
|
|
if(message.media.last_name) texts.push(RichTextProcessor.wrapEmojiText(message.media.last_name));
|
|
|
|
|
|
|
|
|
|
contactDiv.innerHTML = `
|
|
|
|
|
<div class="contact-details">
|
|
|
|
|
<div class="contact-name">${texts.join(' ')}</div>
|
|
|
|
|
<div class="contact-number">${message.media.phone_number ? '+' + formatPhoneNumber(message.media.phone_number).formatted : 'Unknown phone number'}</div>
|
|
|
|
|
</div>`;
|
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let avatarElem = new AvatarElement();
|
|
|
|
|
avatarElem.setAttribute('peer', '' + message.media.user_id);
|
|
|
|
|
avatarElem.classList.add('contact-avatar');
|
|
|
|
|
|
|
|
|
|
contactDiv.prepend(avatarElem);
|
2020-05-10 03:23:21 +02:00
|
|
|
|
|
2020-04-30 15:43:26 +02:00
|
|
|
|
bubble.classList.remove('is-message-empty');
|
|
|
|
|
messageDiv.append(contactDiv);
|
|
|
|
|
|
|
|
|
|
break;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-09 14:02:07 +02:00
|
|
|
|
|
|
|
|
|
case 'messageMediaPoll': {
|
|
|
|
|
bubble.classList.remove('is-message-empty');
|
|
|
|
|
|
2020-05-10 03:23:21 +02:00
|
|
|
|
let pollElement = wrapPoll(message.media.poll.id, message.mid);
|
2020-05-09 14:02:07 +02:00
|
|
|
|
messageDiv.prepend(pollElement);
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
default:
|
2020-04-08 17:46:43 +02:00
|
|
|
|
bubble.classList.remove('is-message-empty');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
messageDiv.innerHTML = 'unrecognized media type: ' + message.media._;
|
|
|
|
|
messageDiv.append(timeSpan);
|
|
|
|
|
this.log.warn('unrecognized media type:', message.media._, message);
|
|
|
|
|
break;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(!processingWebPage) {
|
2020-02-26 18:52:59 +01:00
|
|
|
|
bubbleContainer.append(attachmentDiv);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
|
|
|
|
/* if(bubble.classList.contains('is-message-empty') && (bubble.classList.contains('photo') || bubble.classList.contains('video'))) {
|
|
|
|
|
bubble.classList.add('no-tail');
|
|
|
|
|
|
|
|
|
|
if(!bubble.classList.contains('with-media-tail')) {
|
|
|
|
|
bubble.classList.add('use-border-radius');
|
|
|
|
|
}
|
|
|
|
|
} */
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 04:37:17 +01:00
|
|
|
|
if((this.peerID < 0 && !our) || message.fwd_from || message.reply_to_mid) { // chat
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let title = appPeersManager.getPeerTitle(message.fwdFromID || message.fromID);
|
2020-08-25 18:26:49 +02:00
|
|
|
|
|
|
|
|
|
const isForwardFromChannel = !message.fromID && message.fwd_from;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 10:52:47 +01:00
|
|
|
|
let isHidden = message.fwd_from && !message.fwd_from.from_id && !message.fwd_from.channel_id;
|
2020-02-10 08:56:15 +01:00
|
|
|
|
if(isHidden) {
|
2020-02-17 13:18:06 +01:00
|
|
|
|
///////this.log('message to render hidden', message);
|
2020-05-20 16:25:23 +02:00
|
|
|
|
title = RichTextProcessor.wrapEmojiText(message.fwd_from.from_name);
|
|
|
|
|
//title = message.fwd_from.from_name;
|
2020-02-10 08:56:15 +01:00
|
|
|
|
bubble.classList.add('hidden-profile');
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
//this.log(title);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
if((message.fwdFromID || message.fwd_from)) {
|
|
|
|
|
if(this.peerID != this.myID) {
|
|
|
|
|
bubble.classList.add('forwarded');
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
|
if(message.savedFrom) {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
let goto = document.createElement('div');
|
2020-06-05 18:01:06 +02:00
|
|
|
|
goto.classList.add('bubble-beside-button', 'goto-original', 'tgico-next');
|
2020-05-20 16:25:23 +02:00
|
|
|
|
bubbleContainer.append(goto);
|
2020-02-13 12:59:55 +01:00
|
|
|
|
bubble.dataset.savedFrom = message.savedFrom;
|
2020-08-28 21:53:10 +02:00
|
|
|
|
bubble.classList.add('with-beside-button');
|
2020-02-13 12:59:55 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(!bubble.classList.contains('sticker')) {
|
|
|
|
|
let nameDiv = document.createElement('div');
|
|
|
|
|
nameDiv.classList.add('name');
|
2020-02-13 12:59:55 +01:00
|
|
|
|
nameDiv.dataset.peerID = message.fwdFromID;
|
2020-05-20 16:25:23 +02:00
|
|
|
|
|
2020-08-25 18:26:49 +02:00
|
|
|
|
if(this.peerID == this.myID || isForwardFromChannel) {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
nameDiv.style.color = appPeersManager.getPeerColorByID(message.fwdFromID, false);
|
|
|
|
|
nameDiv.innerHTML = title;
|
|
|
|
|
} else {
|
|
|
|
|
nameDiv.innerHTML = 'Forwarded from ' + title;
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-26 18:52:59 +01:00
|
|
|
|
bubbleContainer.append(nameDiv);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
if(message.reply_to_mid) {
|
|
|
|
|
let originalMessage = appMessagesManager.getMessage(message.reply_to_mid);
|
2020-08-28 23:06:28 +02:00
|
|
|
|
let originalPeerTitle = appPeersManager.getPeerTitle(originalMessage.fromID || originalMessage.fwdFromID, true) || '';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
|
/////////this.log('message to render reply', originalMessage, originalPeerTitle, bubble, message);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
|
// need to download separately
|
|
|
|
|
if(originalMessage._ == 'messageEmpty') {
|
2020-02-17 13:18:06 +01:00
|
|
|
|
//////////this.log('message to render reply empty, need download', message, message.reply_to_mid);
|
2020-02-14 14:10:10 +01:00
|
|
|
|
appMessagesManager.wrapSingleMessage(message.reply_to_mid);
|
|
|
|
|
this.needUpdate.push({replyMid: message.reply_to_mid, mid: message.mid});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
|
originalPeerTitle = 'Loading...';
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
|
if(originalMessage.mid) {
|
|
|
|
|
bubble.setAttribute('data-original-mid', originalMessage.mid);
|
2020-02-14 06:04:44 +01:00
|
|
|
|
} else {
|
|
|
|
|
bubble.setAttribute('data-original-mid', message.reply_to_mid);
|
2020-02-13 12:59:55 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-06 03:03:31 +02:00
|
|
|
|
bubbleContainer.append(wrapReply(originalPeerTitle, originalMessage.message || '', originalMessage));
|
2020-02-10 08:56:15 +01:00
|
|
|
|
bubble.classList.add('is-reply');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 10:22:15 +01:00
|
|
|
|
if(!bubble.classList.contains('sticker') && (peerID < 0 && peerID != message.fromID)) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let nameDiv = document.createElement('div');
|
|
|
|
|
nameDiv.classList.add('name');
|
2020-02-10 15:51:24 +01:00
|
|
|
|
nameDiv.innerHTML = title;
|
2020-02-11 07:22:12 +01:00
|
|
|
|
nameDiv.style.color = appPeersManager.getPeerColorByID(message.fromID, false);
|
2020-02-13 12:59:55 +01:00
|
|
|
|
nameDiv.dataset.peerID = message.fromID;
|
2020-02-26 18:52:59 +01:00
|
|
|
|
bubbleContainer.append(nameDiv);
|
2020-02-14 17:15:41 +01:00
|
|
|
|
} else /* if(!message.reply_to_mid) */ {
|
2020-02-09 10:22:15 +01:00
|
|
|
|
bubble.classList.add('hide-name');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
if((!our && this.peerID < 0 && (!appPeersManager.isChannel(this.peerID) || appPeersManager.isMegagroup(this.peerID)))
|
|
|
|
|
|| (this.peerID == this.myID && !message.reply_to_mid)) {
|
2020-05-13 17:26:40 +02:00
|
|
|
|
let avatarElem = new AvatarElement();
|
|
|
|
|
avatarElem.classList.add('user-avatar');
|
2020-05-20 16:25:23 +02:00
|
|
|
|
|
|
|
|
|
if(!message.fromID && message.fwd_from && message.fwd_from.from_name) {
|
|
|
|
|
avatarElem.setAttribute('peer-title', message.fwd_from.from_name);
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-25 18:26:49 +02:00
|
|
|
|
avatarElem.setAttribute('peer', '' + (((message.fwd_from && this.peerID == this.myID) || isForwardFromChannel ? message.fwdFromID : message.fromID) || 0));
|
2020-08-25 11:39:39 +02:00
|
|
|
|
avatarElem.update();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-08-21 13:17:16 +02:00
|
|
|
|
//this.log('exec loadDialogPhoto', message);
|
2020-05-13 17:26:40 +02:00
|
|
|
|
|
|
|
|
|
bubbleContainer.append(avatarElem);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-02-14 17:15:41 +01:00
|
|
|
|
} else {
|
|
|
|
|
bubble.classList.add('hide-name');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-27 08:21:16 +02:00
|
|
|
|
bubble.classList.add(isOut ? 'is-out' : 'is-in');
|
2020-02-14 06:04:44 +01:00
|
|
|
|
if(updatePosition) {
|
2020-04-08 17:46:43 +02:00
|
|
|
|
this.bubbleGroups.addBubble(bubble, message, reverse);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
this.renderMessagesQueue(message, bubble, reverse);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
} else {
|
|
|
|
|
this.bubbleGroups.updateGroupByMessageID(message.mid);
|
2020-02-14 06:04:44 +01:00
|
|
|
|
}
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
|
|
|
|
return bubble;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
public performHistoryResult(history: number[], reverse: boolean, isBackLimit: boolean, additionMsgID: number) {
|
2020-04-14 17:46:31 +02:00
|
|
|
|
// commented bot getProfile in getHistory!
|
|
|
|
|
if(!history/* .filter((id: number) => id > 0) */.length) {
|
|
|
|
|
if(!isBackLimit) {
|
|
|
|
|
this.scrolledAll = true;
|
|
|
|
|
} else {
|
|
|
|
|
this.scrolledAllDown = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
history = history.slice(); // need
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
if(additionMsgID) {
|
|
|
|
|
history.unshift(additionMsgID);
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
/* if(testScroll && additionMsgID) {
|
2020-05-03 14:46:05 +02:00
|
|
|
|
for(let i = 0; i < 3; ++i) {
|
|
|
|
|
let _history = history.slice();
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.performHistoryResult(_history, reverse, isBackLimit, 0, resetPromises);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
}, 0);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
} */
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(this.peerID)[0];
|
|
|
|
|
if(dialog && dialog.top_message) {
|
|
|
|
|
for(let mid of history) {
|
|
|
|
|
if(mid == dialog.top_message) {
|
|
|
|
|
this.scrolledAllDown = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
//console.time('appImManager render history');
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
|
|
|
|
return new Promise<boolean>((resolve, reject) => {
|
2020-05-03 14:46:05 +02:00
|
|
|
|
let method = (reverse ? history.shift : history.pop).bind(history);
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
let realLength = this.scrollable.length;
|
|
|
|
|
let previousScrollHeightMinusTop: number;
|
2020-05-27 08:21:16 +02:00
|
|
|
|
if(realLength > 0 && reverse) { // for safari need set when scrolling bottom too
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.messagesQueueOnRender = () => {
|
2020-05-23 07:31:18 +02:00
|
|
|
|
let scrollTop = this.scrollable.scrollTop;
|
2020-05-27 08:21:16 +02:00
|
|
|
|
|
2020-05-23 07:31:18 +02:00
|
|
|
|
previousScrollHeightMinusTop = this.scrollable.scrollHeight - scrollTop;
|
2020-06-06 22:38:48 +02:00
|
|
|
|
//this.chatInner.style.height = '100%';
|
|
|
|
|
//previousScrollHeightMinusTop = 0;
|
2020-05-27 08:21:16 +02:00
|
|
|
|
/* if(reverse) {
|
|
|
|
|
previousScrollHeightMinusTop = this.scrollable.scrollHeight - scrollTop;
|
|
|
|
|
} else {
|
|
|
|
|
previousScrollHeightMinusTop = scrollTop;
|
|
|
|
|
} */
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
this.log('performHistoryResult: messagesQueueOnRender, scrollTop:', scrollTop, previousScrollHeightMinusTop);
|
2020-05-23 07:31:18 +02:00
|
|
|
|
this.messagesQueueOnRender = undefined;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
};
|
2020-05-10 03:23:21 +02:00
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-05-23 07:31:18 +02:00
|
|
|
|
while(history.length) {
|
|
|
|
|
let message = appMessagesManager.getMessage(method());
|
|
|
|
|
this.renderMessage(message, reverse, true);
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
(this.messagesQueuePromise || Promise.resolve()).then(() => {
|
2020-05-23 07:31:18 +02:00
|
|
|
|
if(previousScrollHeightMinusTop !== undefined) {
|
2020-05-27 08:21:16 +02:00
|
|
|
|
const newScrollTop = reverse ? this.scrollable.scrollHeight - previousScrollHeightMinusTop : previousScrollHeightMinusTop;
|
|
|
|
|
this.log('performHistoryResult: will set scrollTop', this.scrollable.scrollHeight, newScrollTop, this.scrollable.container.clientHeight);
|
2020-06-06 22:38:48 +02:00
|
|
|
|
|
|
|
|
|
// touchSupport for safari iOS
|
2020-06-21 14:25:17 +02:00
|
|
|
|
touchSupport && isApple && (this.scrollable.container.style.overflow = 'hidden');
|
2020-05-27 08:21:16 +02:00
|
|
|
|
this.scrollable.scrollTop = newScrollTop;
|
2020-06-21 14:25:17 +02:00
|
|
|
|
touchSupport && isApple && (this.scrollable.container.style.overflow = '');
|
2020-05-18 03:21:58 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
resolve(true);
|
|
|
|
|
}, reject);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
}).then(() => {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
//console.timeEnd('appImManager render history');
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
|
|
|
|
return true;
|
2020-05-03 14:46:05 +02:00
|
|
|
|
});
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-06-16 22:48:08 +02:00
|
|
|
|
|
2020-09-18 17:52:21 +02:00
|
|
|
|
/**
|
|
|
|
|
* Load and render history
|
|
|
|
|
* @param maxID max message id
|
|
|
|
|
* @param reverse 'true' means up
|
|
|
|
|
* @param isBackLimit is search
|
|
|
|
|
* @param additionMsgID for the last message
|
|
|
|
|
* @param justLoad do not render
|
|
|
|
|
*/
|
2020-06-16 22:48:08 +02:00
|
|
|
|
public getHistory(maxID = 0, reverse = false, isBackLimit = false, additionMsgID = 0, justLoad = false): {cached: boolean, promise: Promise<boolean>} {
|
|
|
|
|
const peerID = this.peerID;
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
|
|
|
|
//console.time('appImManager call getHistory');
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const pageCount = appPhotosManager.windowH / 38/* * 1.25 */ | 0;
|
|
|
|
|
//const loadCount = Object.keys(this.bubbles).length > 0 ? 50 : pageCount;
|
|
|
|
|
const realLoadCount = Object.keys(this.bubbles).length > 0 ? Math.max(40, pageCount) : pageCount;//const realLoadCount = 50;
|
2020-05-03 14:46:05 +02:00
|
|
|
|
let loadCount = realLoadCount;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-28 19:30:54 +02:00
|
|
|
|
if(testScroll) {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
//loadCount = 1;
|
2020-02-20 09:13:15 +01:00
|
|
|
|
if(Object.keys(this.bubbles).length > 0)
|
2020-05-18 03:21:58 +02:00
|
|
|
|
return {cached: false, promise: Promise.resolve(true)};
|
2020-04-28 19:30:54 +02:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-14 17:46:31 +02:00
|
|
|
|
////console.time('render history total');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let backLimit = 0;
|
|
|
|
|
if(isBackLimit) {
|
|
|
|
|
backLimit = loadCount;
|
2020-05-13 17:26:40 +02:00
|
|
|
|
|
|
|
|
|
if(!reverse) { // if not jump
|
|
|
|
|
loadCount = 0;
|
|
|
|
|
maxID += 1;
|
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-04-08 17:46:43 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const result = appMessagesManager.getHistory(this.peerID, maxID, loadCount, backLimit);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
let promise: Promise<boolean>, cached: boolean;
|
2020-04-14 17:46:31 +02:00
|
|
|
|
if(result instanceof Promise) {
|
2020-05-18 03:21:58 +02:00
|
|
|
|
cached = false;
|
2020-05-03 14:46:05 +02:00
|
|
|
|
promise = result.then((result) => {
|
2020-09-01 18:11:29 +02:00
|
|
|
|
this.log('getHistory not cached result by maxID:', maxID, reverse, isBackLimit, result, peerID, justLoad);
|
2020-09-18 17:52:21 +02:00
|
|
|
|
|
2020-06-20 03:11:24 +02:00
|
|
|
|
if(justLoad) {
|
|
|
|
|
this.scrollable.onScroll(); // нужно делать из-за ранней прогрузки
|
|
|
|
|
return true;
|
|
|
|
|
}
|
2020-04-14 17:46:31 +02:00
|
|
|
|
//console.timeEnd('appImManager call getHistory');
|
|
|
|
|
|
2020-09-18 17:52:21 +02:00
|
|
|
|
if(this.peerID != peerID || (this.getHistoryTopPromise != promise && this.getHistoryBottomPromise != promise)) {
|
2020-04-14 17:46:31 +02:00
|
|
|
|
this.log.warn('peer changed');
|
|
|
|
|
////console.timeEnd('render history total');
|
|
|
|
|
return Promise.reject();
|
2020-02-13 08:51:11 +01:00
|
|
|
|
}
|
2020-04-14 17:46:31 +02:00
|
|
|
|
|
|
|
|
|
////console.timeEnd('render history total');
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
return this.performHistoryResult(result.history || [], reverse, isBackLimit, additionMsgID);
|
2020-04-14 17:46:31 +02:00
|
|
|
|
}, (err) => {
|
|
|
|
|
this.log.error('getHistory error:', err);
|
|
|
|
|
return false;
|
|
|
|
|
});
|
2020-06-16 22:48:08 +02:00
|
|
|
|
} else if(justLoad) {
|
|
|
|
|
return null;
|
2020-04-14 17:46:31 +02:00
|
|
|
|
} else {
|
2020-05-18 03:21:58 +02:00
|
|
|
|
cached = true;
|
2020-09-01 18:11:29 +02:00
|
|
|
|
this.log('getHistory cached result by maxID:', maxID, reverse, isBackLimit, result, peerID, justLoad);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
promise = this.performHistoryResult(result.history || [], reverse, isBackLimit, additionMsgID);
|
2020-04-16 02:48:41 +02:00
|
|
|
|
//return (reverse ? this.getHistoryTopPromise = promise : this.getHistoryBottomPromise = promise);
|
2020-04-15 22:55:08 +02:00
|
|
|
|
//return this.performHistoryResult(result.history || [], reverse, isBackLimit, additionMsgID, true);
|
2020-04-14 17:46:31 +02:00
|
|
|
|
}
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
(reverse ? this.getHistoryTopPromise = promise : this.getHistoryBottomPromise = promise);
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
promise.finally(() => {
|
|
|
|
|
(reverse ? this.getHistoryTopPromise = undefined : this.getHistoryBottomPromise = undefined);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if(justLoad) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-03 14:46:05 +02:00
|
|
|
|
/* false && */promise.then(() => {
|
|
|
|
|
if(reverse) {
|
|
|
|
|
this.loadedTopTimes++;
|
|
|
|
|
this.loadedBottomTimes = Math.max(0, --this.loadedBottomTimes);
|
|
|
|
|
} else {
|
|
|
|
|
this.loadedBottomTimes++;
|
|
|
|
|
this.loadedTopTimes = Math.max(0, --this.loadedTopTimes);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let ids: number[];
|
|
|
|
|
if((reverse && this.loadedTopTimes > 2) || (!reverse && this.loadedBottomTimes > 2)) {
|
2020-08-19 17:26:19 +02:00
|
|
|
|
ids = getObjectKeysAndSort(this.bubbles);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
}
|
|
|
|
|
|
2020-05-09 14:02:07 +02:00
|
|
|
|
//let removeCount = loadCount / 2;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const safeCount = realLoadCount * 2; // cause i've been runningrunningrunning all day
|
2020-05-10 03:23:21 +02:00
|
|
|
|
this.log('getHistory: slice loadedTimes:', reverse, pageCount, this.loadedTopTimes, this.loadedBottomTimes, ids && ids.length, safeCount);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
if(ids && ids.length > safeCount) {
|
|
|
|
|
if(reverse) {
|
|
|
|
|
//ids = ids.slice(-removeCount);
|
|
|
|
|
//ids = ids.slice(removeCount * 2);
|
|
|
|
|
ids = ids.slice(safeCount);
|
|
|
|
|
this.scrolledAllDown = false;
|
2020-09-18 17:52:21 +02:00
|
|
|
|
|
|
|
|
|
this.log('getHistory: slice bottom messages:', ids.length, loadCount);
|
|
|
|
|
this.getHistoryBottomPromise = undefined; // !WARNING, это нужно для обратной загрузки истории, если запрос словил флуд
|
2020-05-03 14:46:05 +02:00
|
|
|
|
} else {
|
|
|
|
|
//ids = ids.slice(0, removeCount);
|
|
|
|
|
//ids = ids.slice(0, ids.length - (removeCount * 2));
|
|
|
|
|
ids = ids.slice(0, ids.length - safeCount);
|
|
|
|
|
this.scrolledAll = false;
|
2020-09-18 17:52:21 +02:00
|
|
|
|
|
|
|
|
|
this.log('getHistory: slice up messages:', ids.length, loadCount);
|
|
|
|
|
this.getHistoryTopPromise = undefined; // !WARNING, это нужно для обратной загрузки истории, если запрос словил флуд
|
2020-05-03 14:46:05 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.log('getHistory: will slice ids:', ids, reverse);
|
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
this.deleteMessagesByIDs(ids);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
this.setUnreadDelimiter(); // не нашёл места лучше
|
2020-06-16 22:48:08 +02:00
|
|
|
|
|
|
|
|
|
// preload more
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.loadMoreHistory(true, true);
|
|
|
|
|
this.loadMoreHistory(false, true);
|
|
|
|
|
}, 0);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
});
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
return {cached, promise};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public setUnreadDelimiter() {
|
2020-05-30 08:44:54 +02:00
|
|
|
|
if(this.attachedUnreadBubble) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(this.peerID)[0];
|
|
|
|
|
if(!dialog?.unread_count) return;
|
|
|
|
|
|
|
|
|
|
let maxID = dialog.read_inbox_max_id;
|
2020-05-27 08:21:16 +02:00
|
|
|
|
maxID = Object.keys(this.bubbles).filter(mid => !this.bubbles[mid].classList.contains('is-out')).map(i => +i).sort((a, b) => a - b).find(i => i > maxID);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
if(maxID && this.bubbles[maxID]) {
|
|
|
|
|
let bubble = this.bubbles[maxID];
|
|
|
|
|
if(this.firstUnreadBubble && this.firstUnreadBubble != bubble) {
|
|
|
|
|
this.firstUnreadBubble.classList.remove('is-first-unread');
|
|
|
|
|
this.firstUnreadBubble = null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(maxID != dialog.top_message) {
|
|
|
|
|
bubble.classList.add('is-first-unread');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.firstUnreadBubble = bubble;
|
2020-05-30 08:44:54 +02:00
|
|
|
|
this.attachedUnreadBubble = true;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
}
|
2020-05-03 14:46:05 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public deleteEmptyDateGroups() {
|
|
|
|
|
for(let i in this.dateMessages) {
|
|
|
|
|
let dateMessage = this.dateMessages[i];
|
|
|
|
|
|
2020-05-27 08:21:16 +02:00
|
|
|
|
if(dateMessage.container.childElementCount == 2) { // only date div + sentinel div
|
2020-05-03 14:46:05 +02:00
|
|
|
|
dateMessage.container.remove();
|
2020-05-26 17:04:06 +02:00
|
|
|
|
this.stickyIntersector.unobserve(dateMessage.container, dateMessage.div);
|
2020-05-03 14:46:05 +02:00
|
|
|
|
delete this.dateMessages[i];
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
public setMutedState(muted = false) {
|
|
|
|
|
appSidebarRight.profileElements.notificationsCheckbox.checked = !muted;
|
|
|
|
|
appSidebarRight.profileElements.notificationsStatus.innerText = muted ? 'Disabled' : 'Enabled';
|
2020-05-27 08:21:16 +02:00
|
|
|
|
|
|
|
|
|
if(appPeersManager.isBroadcast(this.peerID)) { // not human
|
|
|
|
|
this.btnMute.classList.remove('tgico-mute', 'tgico-unmute');
|
|
|
|
|
this.btnMute.classList.add(muted ? 'tgico-unmute' : 'tgico-mute');
|
|
|
|
|
this.btnMute.style.display = '';
|
2020-02-09 07:45:43 +01:00
|
|
|
|
} else {
|
|
|
|
|
this.btnMute.style.display = 'none';
|
|
|
|
|
}
|
2020-06-05 18:01:06 +02:00
|
|
|
|
|
|
|
|
|
const menuButton = this.menuButtons.mute;
|
|
|
|
|
menuButton.classList.remove('tgico-mute', 'tgico-unmute');
|
|
|
|
|
menuButton.classList.add(muted ? 'tgico-unmute' : 'tgico-mute');
|
|
|
|
|
let rp = menuButton.firstElementChild;
|
|
|
|
|
menuButton.innerText = muted ? 'Unmute' : 'Mute';
|
|
|
|
|
rp && menuButton.appendChild(rp);
|
2020-02-09 07:45:43 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
public mutePeer(peerID: number) {
|
|
|
|
|
let inputPeer = appPeersManager.getInputPeerByID(peerID);
|
2020-09-17 21:33:23 +02:00
|
|
|
|
let inputNotifyPeer: InputNotifyPeer.inputNotifyPeer = {
|
2020-02-09 07:45:43 +01:00
|
|
|
|
_: 'inputNotifyPeer',
|
|
|
|
|
peer: inputPeer
|
|
|
|
|
};
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-17 21:33:23 +02:00
|
|
|
|
let settings: InputPeerNotifySettings = {
|
2020-02-09 07:45:43 +01:00
|
|
|
|
_: 'inputPeerNotifySettings',
|
|
|
|
|
flags: 0,
|
|
|
|
|
mute_until: 0
|
|
|
|
|
};
|
2020-05-13 17:26:40 +02:00
|
|
|
|
|
|
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
|
|
|
|
|
let muted = true;
|
|
|
|
|
if(dialog && dialog.notify_settings) {
|
|
|
|
|
muted = dialog.notify_settings.mute_until > (Date.now() / 1000 | 0);
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-13 17:26:40 +02:00
|
|
|
|
if(!muted) {
|
2020-02-14 17:15:41 +01:00
|
|
|
|
settings.flags |= 1 << 2;
|
2020-05-13 17:26:40 +02:00
|
|
|
|
settings.mute_until = 2147483647;
|
2020-02-09 07:45:43 +01:00
|
|
|
|
} else {
|
2020-02-14 17:15:41 +01:00
|
|
|
|
settings.flags |= 2;
|
2020-02-09 07:45:43 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
apiManager.invokeApi('account.updateNotifySettings', {
|
|
|
|
|
peer: inputNotifyPeer,
|
|
|
|
|
settings: settings
|
2020-05-13 17:26:40 +02:00
|
|
|
|
}).then(bool => {
|
2020-02-09 07:45:43 +01:00
|
|
|
|
this.handleUpdate({_: 'updateNotifySettings', peer: inputNotifyPeer, notify_settings: settings});
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
/* return apiManager.invokeApi('account.getNotifySettings', {
|
|
|
|
|
peer: inputNotifyPeer
|
|
|
|
|
}).then((settings: any) => {
|
|
|
|
|
settings.flags |= 2 << 1;
|
|
|
|
|
settings.mute_until = 2000000000; // 2147483646
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
return apiManager.invokeApi('account.updateNotifySettings', {
|
|
|
|
|
peer: inputNotifyPeer,
|
|
|
|
|
settings: Object.assign(settings, {
|
|
|
|
|
_: 'inputPeerNotifySettings'
|
|
|
|
|
})
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.log('mute result:', res);
|
|
|
|
|
});
|
|
|
|
|
}); */
|
|
|
|
|
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
public handleUpdate(update: any) {
|
|
|
|
|
switch(update._) {
|
|
|
|
|
case 'updateUserTyping':
|
2020-05-09 14:02:07 +02:00
|
|
|
|
case 'updateChatUserTyping': {
|
|
|
|
|
if(this.myID == update.user_id) {
|
|
|
|
|
return;
|
2020-02-09 07:45:43 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-09 14:02:07 +02:00
|
|
|
|
var peerID = update._ == 'updateUserTyping' ? update.user_id : -update.chat_id;
|
|
|
|
|
this.typingUsers[update.user_id] = peerID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-09 14:02:07 +02:00
|
|
|
|
if(!appUsersManager.hasUser(update.user_id)) {
|
|
|
|
|
if(update.chat_id && appChatsManager.hasChat(update.chat_id) && !appChatsManager.isChannel(update.chat_id)) {
|
|
|
|
|
appProfileManager.getChatFull(update.chat_id);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//return;
|
2020-02-09 07:45:43 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-09 14:02:07 +02:00
|
|
|
|
appUsersManager.forceUserOnline(update.user_id);
|
|
|
|
|
|
|
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
|
|
|
|
|
let currentPeer = this.peerID == peerID;
|
|
|
|
|
|
|
|
|
|
if(this.typingTimeouts[peerID]) clearTimeout(this.typingTimeouts[peerID]);
|
|
|
|
|
else if(dialog) {
|
|
|
|
|
appDialogsManager.setTyping(dialog, appUsersManager.getUser(update.user_id));
|
|
|
|
|
|
|
|
|
|
if(currentPeer) { // user
|
|
|
|
|
this.setPeerStatus();
|
|
|
|
|
}
|
2020-02-09 07:45:43 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-18 17:03:26 +02:00
|
|
|
|
this.typingTimeouts[peerID] = window.setTimeout(() => {
|
2020-05-09 14:02:07 +02:00
|
|
|
|
this.typingTimeouts[peerID] = 0;
|
|
|
|
|
delete this.typingUsers[update.user_id];
|
|
|
|
|
|
|
|
|
|
if(dialog) {
|
|
|
|
|
appDialogsManager.unsetTyping(dialog);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// лень просчитывать случаи
|
|
|
|
|
this.setPeerStatus();
|
|
|
|
|
}, 6000);
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
case 'updateNotifySettings': {
|
|
|
|
|
let {peer, notify_settings} = update;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
// peer was NotifyPeer
|
|
|
|
|
peer = peer.peer;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
let peerID = appPeersManager.getPeerID(peer);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
|
|
|
|
|
if(dialog) {
|
|
|
|
|
dialog.notify_settings = notify_settings;
|
2020-08-30 21:30:11 +02:00
|
|
|
|
$rootScope.$broadcast('dialog_notify_settings', peerID);
|
2020-02-09 07:45:43 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
if(peerID == this.peerID) {
|
|
|
|
|
let muted = notify_settings.mute_until ? new Date(notify_settings.mute_until * 1000) > new Date() : false;
|
|
|
|
|
this.setMutedState(muted);
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
|
/////this.log('updateNotifySettings', peerID, notify_settings);
|
2020-02-09 07:45:43 +01:00
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
|
const appImManager = new AppImManager();
|
2020-06-16 22:48:08 +02:00
|
|
|
|
// @ts-ignore
|
|
|
|
|
if(process.env.NODE_ENV != 'production') {
|
|
|
|
|
(window as any).appImManager = appImManager;
|
|
|
|
|
}
|
2020-02-10 08:56:15 +01:00
|
|
|
|
export default appImManager;
|