2020-02-08 07:03:09 +01:00
|
|
|
import apiManager from '../mtproto/apiManager';
|
2020-02-20 09:13:15 +01:00
|
|
|
import { $rootScope, isElementInViewport, numberWithCommas, findUpClassName, formatNumber, placeCaretAtEnd, calcImageInBox, findUpTag, langPack } from "../utils";
|
2020-02-06 16:43:07 +01:00
|
|
|
import appUsersManager from "./appUsersManager";
|
|
|
|
import appMessagesManager from "./appMessagesManager";
|
|
|
|
import appPeersManager from "./appPeersManager";
|
|
|
|
import appProfileManager from "./appProfileManager";
|
|
|
|
import appDialogsManager from "./appDialogsManager";
|
|
|
|
import { RichTextProcessor } from "../richtextprocessor";
|
|
|
|
import appPhotosManager from "./appPhotosManager";
|
|
|
|
import appSidebarRight from './appSidebarRight';
|
|
|
|
|
|
|
|
import { logger } from "../polyfill";
|
|
|
|
import lottieLoader from "../lottieLoader";
|
|
|
|
import appMediaViewer from "./appMediaViewer";
|
|
|
|
import appSidebarLeft from "./appSidebarLeft";
|
|
|
|
import appChatsManager from "./appChatsManager";
|
2020-02-07 15:17:39 +01:00
|
|
|
import appMessagesIDsManager from "./appMessagesIDsManager";
|
2020-02-09 16:18:04 +01:00
|
|
|
import apiUpdatesManager from './apiUpdatesManager';
|
2020-02-15 19:08:26 +01:00
|
|
|
import { wrapDocument, wrapPhoto, wrapVideo, wrapSticker, wrapReply } from '../../components/wrappers';
|
2020-02-11 16:35:57 +01:00
|
|
|
import ProgressivePreloader from '../../components/preloader';
|
|
|
|
import { openBtnMenu } from '../../components/misc';
|
2020-02-20 09:13:15 +01:00
|
|
|
import { ChatInput } from '../../components/chatInput';
|
|
|
|
import Scrollable from '../../components/scrollable';
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
|
|
console.log('appImManager included!');
|
|
|
|
|
|
|
|
let testScroll = false;
|
|
|
|
|
|
|
|
class ScrollPosition {
|
2020-03-01 18:26:25 +01:00
|
|
|
previousScrollHeightMinusTop = 0;
|
|
|
|
readyFor = 'up';
|
|
|
|
container: HTMLElement;
|
|
|
|
rAF: number;
|
|
|
|
debug = true;
|
|
|
|
|
|
|
|
constructor(node: HTMLElement) {
|
2020-02-06 16:43:07 +01:00
|
|
|
this.container = node.parentElement;
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
restore() {
|
|
|
|
let setScrollTop = this.container.scrollHeight - this.previousScrollHeightMinusTop;
|
|
|
|
if(this.debug) appImManager.log('scrollPosition restore', this.readyFor, this.container.scrollHeight,
|
|
|
|
setScrollTop, this.container, this.container.parentElement.classList.contains('scrolled-down'));
|
|
|
|
|
|
|
|
if(this.readyFor === 'up'/* || this.container.parentElement.classList.contains('scrolled-down') */) {
|
|
|
|
if(this.debug) appImManager.log('scrollPosition restore 2', this.readyFor, this.container.scrollHeight,
|
|
|
|
setScrollTop, this.container);
|
|
|
|
|
|
|
|
if(this.rAF) window.cancelAnimationFrame(this.rAF);
|
|
|
|
this.rAF = window.requestAnimationFrame(() => {
|
|
|
|
this.container.scrollTop = this.container.scrollHeight - this.previousScrollHeightMinusTop;
|
|
|
|
this.rAF = 0;
|
|
|
|
});
|
|
|
|
} else if(this.container.parentElement.classList.contains('scrolled-down')) {
|
|
|
|
if(this.debug) appImManager.log('scrollPosition restore 2', this.readyFor, this.container.scrollHeight,
|
|
|
|
setScrollTop, this.container);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
this.container.scrollTop = setScrollTop;
|
2020-02-14 17:15:41 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
// 'down' doesn't need to be special cased unless the
|
|
|
|
// content was flowing upwards, which would only happen
|
|
|
|
// if the container is position: absolute, bottom: 0 for
|
|
|
|
// a Facebook messages effect
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
prepareFor(direction = 'up') {
|
|
|
|
if(this.rAF) {
|
|
|
|
window.cancelAnimationFrame(this.rAF);
|
|
|
|
this.rAF = 0;
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
this.readyFor = direction;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
if(direction == 'down') {
|
|
|
|
let scrollTop = this.container.scrollTop;
|
|
|
|
this.previousScrollHeightMinusTop = scrollTop > 0 ? this.container.scrollHeight - scrollTop : 0;
|
|
|
|
} else {
|
|
|
|
this.previousScrollHeightMinusTop = this.container.scrollHeight - this.container.scrollTop;
|
|
|
|
}
|
|
|
|
//let scrollTop = this.container.scrollTop;
|
|
|
|
//this.previousScrollHeightMinusTop = scrollTop > 0 || this.readyFor == 'up' ? this.container.scrollHeight - this.container.scrollTop : 0;
|
|
|
|
|
|
|
|
if(this.debug) appImManager.log.trace('scrollPosition prepareFor', direction, this.container.scrollHeight,
|
|
|
|
this.container.scrollTop, this.previousScrollHeightMinusTop);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class BubbleGroups {
|
|
|
|
bubblesByGroups: Array<{timestamp: number, fromID: number, mid: number, group: HTMLDivElement[]}> = []; // map to group
|
|
|
|
groups: Array<HTMLDivElement[]> = [];
|
|
|
|
updateRAFs: Map<HTMLDivElement[], number> = new Map();
|
|
|
|
newGroupDiff = 120;
|
|
|
|
|
|
|
|
removeBubble(bubble: HTMLDivElement, mid: number) {
|
|
|
|
let details = this.bubblesByGroups.findAndSplice(g => g.mid == mid);
|
|
|
|
if(details && details.group.length) {
|
|
|
|
details.group.findAndSplice(d => d == bubble);
|
|
|
|
if(!details.group.length) {
|
|
|
|
this.groups.findAndSplice(g => g == details.group);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
addBubble(bubble: HTMLDivElement, message: any, reverse: boolean) {
|
|
|
|
let timestamp = message.date;
|
|
|
|
let fromID = message.fromID;
|
|
|
|
let group: HTMLDivElement[];
|
|
|
|
|
|
|
|
// try to find added
|
|
|
|
//this.removeBubble(message.mid);
|
|
|
|
|
|
|
|
if(this.bubblesByGroups.length) {
|
|
|
|
if(reverse) {
|
|
|
|
let g = this.bubblesByGroups[0];
|
|
|
|
if(g.fromID == fromID && (g.timestamp - timestamp) < this.newGroupDiff) {
|
|
|
|
group = g.group;
|
|
|
|
group.unshift(bubble);
|
|
|
|
} else {
|
|
|
|
this.groups.unshift(group = [bubble]);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
let g = this.bubblesByGroups[this.bubblesByGroups.length - 1];
|
|
|
|
if(g.fromID == fromID && (timestamp - g.timestamp) < this.newGroupDiff) {
|
|
|
|
group = g.group;
|
|
|
|
group.push(bubble);
|
|
|
|
} else {
|
|
|
|
this.groups.push(group = [bubble]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.groups.push(group = [bubble]);
|
|
|
|
}
|
|
|
|
|
2020-03-02 18:15:11 +01:00
|
|
|
//console.log('addBubble', bubble, message.mid, fromID, reverse, group);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
this.bubblesByGroups[reverse ? 'unshift' : 'push']({timestamp, fromID, mid: message.mid, group});
|
|
|
|
this.updateGroup(group);
|
|
|
|
}
|
|
|
|
|
|
|
|
updateGroup(group: HTMLDivElement[]) {
|
|
|
|
if(this.updateRAFs.has(group)) {
|
|
|
|
window.cancelAnimationFrame(this.updateRAFs.get(group));
|
|
|
|
this.updateRAFs.delete(group);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.updateRAFs.set(group, window.requestAnimationFrame(() => {
|
|
|
|
this.updateRAFs.delete(group);
|
|
|
|
|
|
|
|
if(!group.length) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let first = group[0];
|
|
|
|
|
2020-03-02 18:15:11 +01:00
|
|
|
//console.log('updateGroup', group, first);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
if(group.length == 1) {
|
|
|
|
first.classList.add('is-group-first', 'is-group-last');
|
|
|
|
return;
|
|
|
|
} else {
|
|
|
|
first.classList.remove('is-group-last');
|
|
|
|
first.classList.add('is-group-first');
|
|
|
|
}
|
|
|
|
|
|
|
|
let length = group.length - 1;
|
|
|
|
for(let i = 1; i < length; ++i) {
|
|
|
|
let bubble = group[i];
|
|
|
|
bubble.classList.remove('is-group-last', 'is-group-first');
|
|
|
|
}
|
|
|
|
|
|
|
|
let last = group[group.length - 1];
|
|
|
|
last.classList.remove('is-group-first');
|
|
|
|
last.classList.add('is-group-last');
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
|
|
|
updateGroupByMessageID(mid: number) {
|
|
|
|
let details = this.bubblesByGroups.find(g => g.mid == mid);
|
|
|
|
if(details) {
|
|
|
|
this.updateGroup(details.group);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
cleanup() {
|
|
|
|
this.bubblesByGroups = [];
|
|
|
|
for(let value of this.updateRAFs.values()) {
|
|
|
|
window.cancelAnimationFrame(value);
|
|
|
|
}
|
|
|
|
this.updateRAFs.clear();
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class AppImManager {
|
|
|
|
public pageEl = document.querySelector('.page-chats') as HTMLDivElement;
|
|
|
|
public btnMute = this.pageEl.querySelector('.tool-mute') as HTMLButtonElement;
|
2020-02-08 07:03:09 +01:00
|
|
|
public btnMenuMute = this.pageEl.querySelector('.menu-mute') as HTMLButtonElement;
|
2020-02-06 16:43:07 +01:00
|
|
|
public avatarEl = document.getElementById('im-avatar') as HTMLDivElement;
|
|
|
|
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;
|
|
|
|
public searchBtn = this.pageEl.querySelector('.chat-search-button') as HTMLButtonElement;
|
2020-02-13 12:59:55 +01:00
|
|
|
public goDownBtn = this.pageEl.querySelector('#bubbles-go-down') as HTMLButtonElement;
|
2020-02-06 16:43:07 +01:00
|
|
|
private getHistoryPromise: Promise<boolean>;
|
|
|
|
private getHistoryTimeout = 0;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
private chatInputC: ChatInput = null;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public myID = 0;
|
|
|
|
public peerID = 0;
|
2020-02-09 07:45:43 +01:00
|
|
|
public muted = false;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public bubbles: {[mid: number]: HTMLDivElement} = {};
|
|
|
|
public dateMessages: {[timestamp: number]: { div: HTMLDivElement, firstTimestamp: number }} = {};
|
|
|
|
public unreaded: number[] = [];
|
|
|
|
public unreadOut: 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;
|
|
|
|
private pinnedMessageContainer = this.pageEl.querySelector('.pinned-message') as HTMLDivElement;
|
|
|
|
private pinnedMessageContent = this.pinnedMessageContainer.querySelector('.pinned-message-subtitle') as HTMLDivElement;
|
|
|
|
|
|
|
|
private firstTopMsgID = 0;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public loadMediaQueue: Array<() => Promise<void>> = [];
|
|
|
|
private loadMediaQueuePromise: Promise<void[]> = null;
|
2020-02-10 15:51:24 +01:00
|
|
|
private loadingMedia = 0;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
|
|
public scroll: HTMLDivElement = null;
|
2020-02-20 09:13:15 +01:00
|
|
|
public scrollable: Scrollable = null;
|
2020-02-06 16:43:07 +01:00
|
|
|
public scrollPosition: ScrollPosition = null;
|
2020-03-01 18:26:25 +01: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-02-08 07:03:09 +01:00
|
|
|
private topbar: HTMLDivElement = null;
|
|
|
|
private chatInput: HTMLDivElement = null;
|
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-02-09 16:18:04 +01:00
|
|
|
public contextMenu = document.getElementById('bubble-contextmenu') as HTMLDivElement;
|
|
|
|
private contextMenuPin = this.contextMenu.querySelector('.menu-pin') as HTMLDivElement;
|
2020-02-10 17:40:33 +01:00
|
|
|
private contextMenuEdit = this.contextMenu.querySelector('.menu-edit') as HTMLDivElement;
|
2020-02-09 16:18:04 +01:00
|
|
|
private contextMenuMsgID: number;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
private popupDeleteMessage: {
|
|
|
|
popupEl?: HTMLDivElement,
|
|
|
|
deleteBothBtn?: HTMLButtonElement,
|
|
|
|
deleteMeBtn?: HTMLButtonElement,
|
|
|
|
cancelBtn?: HTMLButtonElement
|
|
|
|
} = {};
|
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-02-06 16:43:07 +01:00
|
|
|
constructor() {
|
|
|
|
this.log = logger('IM');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
this.chatInputC = new ChatInput();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.preloader = new ProgressivePreloader(null, false);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.popupDeleteMessage.popupEl = this.pageEl.querySelector('.popup-delete-message') as HTMLDivElement;
|
|
|
|
this.popupDeleteMessage.deleteBothBtn = this.popupDeleteMessage.popupEl.querySelector('.popup-delete-both') as HTMLButtonElement;
|
|
|
|
this.popupDeleteMessage.deleteMeBtn = this.popupDeleteMessage.popupEl.querySelector('.popup-delete-me') as HTMLButtonElement;
|
|
|
|
this.popupDeleteMessage.cancelBtn = this.popupDeleteMessage.popupEl.querySelector('.popup-close') as HTMLButtonElement;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-08 07:03:09 +01:00
|
|
|
apiManager.getUserID().then((id) => {
|
2020-02-06 16:43:07 +01:00
|
|
|
this.myID = id;
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-08 07:03:09 +01:00
|
|
|
this.topbar = document.getElementById('topbar') as HTMLDivElement;
|
|
|
|
this.chatInput = document.getElementById('chat-input') as HTMLDivElement;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
$rootScope.$on('user_auth', (e: CustomEvent) => {
|
|
|
|
let userAuth = e.detail;
|
|
|
|
this.myID = userAuth ? userAuth.id : 0;
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
// will call when message is sent (only 1)
|
2020-02-06 16:43:07 +01:00
|
|
|
$rootScope.$on('history_append', (e: CustomEvent) => {
|
|
|
|
let details = e.detail;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.renderMessagesByIDs([details.messageID]);
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
// will call when sent for update pos
|
2020-02-13 08:51:11 +01:00
|
|
|
$rootScope.$on('history_update', (e: CustomEvent) => {
|
|
|
|
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-03-01 18:26:25 +01:00
|
|
|
this.renderMessage(message, false, false, bubble);
|
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
this.deleteEmptySideDivs();
|
2020-02-13 08:51:11 +01:00
|
|
|
}
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
$rootScope.$on('history_multiappend', (e: CustomEvent) => {
|
|
|
|
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-02-06 16:43:07 +01:00
|
|
|
this.renderMessagesByIDs(msgIDs);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-22 12:20:43 +01:00
|
|
|
//appDialogsManager.sortDom();
|
2020-02-11 16:35:57 +01:00
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-11 16:35:57 +01:00
|
|
|
$rootScope.$on('history_delete', (e: CustomEvent) => {
|
|
|
|
let detail: {
|
|
|
|
peerID: string,
|
|
|
|
msgs: {[x: number]: boolean}
|
|
|
|
} = 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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 20:03:27 +01:00
|
|
|
setTimeout(() => {
|
|
|
|
this.deleteEmptySideDivs();
|
|
|
|
}, 0);
|
2020-02-06 16:43:07 +01:00
|
|
|
});
|
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-02-06 16:43:07 +01:00
|
|
|
$rootScope.$on('message_sent', (e: CustomEvent) => {
|
|
|
|
let {tempID, mid} = e.detail;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
////this.log('message_sent', e.detail);
|
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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-11 16:35:57 +01:00
|
|
|
let media = bubble.querySelector('img, video');
|
|
|
|
if(media) {
|
|
|
|
media.setAttribute('message-id', mid);
|
|
|
|
}
|
|
|
|
|
|
|
|
bubble.classList.remove('is-sending');
|
|
|
|
bubble.classList.add('is-sent');
|
|
|
|
|
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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let length = this.unreadOut.length;
|
|
|
|
for(let i = 0; i < length; i++) {
|
|
|
|
if(this.unreadOut[i] == tempID) {
|
|
|
|
this.unreadOut[i] = mid;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
$rootScope.$on('message_edit', (e: CustomEvent) => {
|
|
|
|
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-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);
|
2020-02-14 06:04:44 +01:00
|
|
|
this.renderMessage(message, false, false, bubble, false);
|
2020-02-13 08:51:11 +01:00
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
$rootScope.$on('messages_downloaded', (e: CustomEvent) => {
|
2020-02-14 06:04:44 +01:00
|
|
|
let mids: number[] = e.detail;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
mids.forEach(mid => {
|
|
|
|
if(this.pinnedMsgID == mid) {
|
|
|
|
let message = appMessagesManager.getMessage(mid);
|
2020-02-17 13:18:06 +01:00
|
|
|
/////this.log('setting pinned message', message);
|
2020-02-14 06:04:44 +01:00
|
|
|
this.pinnedMessageContainer.dataset.mid = '' + mid;
|
|
|
|
this.pinnedMessageContainer.style.display = '';
|
|
|
|
this.pinnedMessageContent.innerHTML = RichTextProcessor.wrapEmojiText(message.message);
|
|
|
|
}
|
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-02-14 14:10:10 +01:00
|
|
|
this.renderMessage(message, false, false, 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-02-06 16:43:07 +01:00
|
|
|
$rootScope.$on('apiUpdate', (e: CustomEvent) => {
|
|
|
|
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', () => {
|
|
|
|
lottieLoader.checkAnimations(true);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.offline = true;
|
|
|
|
this.updateStatus();
|
|
|
|
clearInterval(this.updateStatusInterval);
|
|
|
|
|
|
|
|
window.addEventListener('focus', () => {
|
|
|
|
lottieLoader.checkAnimations(false);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.offline = false;
|
|
|
|
this.updateStatus();
|
|
|
|
this.updateStatusInterval = window.setInterval(() => this.updateStatus(), 50e3);
|
|
|
|
}, {once: true});
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
(this.pageEl.querySelector('.person') as HTMLDivElement).addEventListener('click', (e) => {
|
|
|
|
appSidebarRight.toggleSidebar(true);
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.chatInner.addEventListener('click', (e) => {
|
|
|
|
let target = e.target as HTMLElement;
|
2020-02-10 10:52:47 +01:00
|
|
|
let bubble: HTMLDivElement = null;
|
|
|
|
try {
|
|
|
|
bubble = findUpClassName(e.target, 'bubble');
|
|
|
|
} catch(err) {}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
if(!bubble) return;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
if(['IMG', 'VIDEO', 'SVG', 'DIV'].indexOf(target.tagName) === -1) target = findUpTag(target, 'DIV');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
if(target.tagName == 'DIV') {
|
2020-02-13 12:59:55 +01:00
|
|
|
if(target.classList.contains('forward')) {
|
|
|
|
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-02-13 12:59:55 +01:00
|
|
|
this.setPeer(peerID, msgID, true);
|
|
|
|
return;
|
|
|
|
} else if(target.classList.contains('user-avatar') || target.classList.contains('name')) {
|
|
|
|
let peerID = +target.dataset.peerID;
|
|
|
|
|
|
|
|
if(!isNaN(peerID)) {
|
|
|
|
this.setPeer(peerID);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
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-02-13 08:51:11 +01:00
|
|
|
} else if(bubble.classList.contains('round')) {
|
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
} else if(target.tagName == 'IMG' && target.parentElement.classList.contains('user-avatar')) {
|
|
|
|
let peerID = +target.parentElement.dataset.peerID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
if(!isNaN(peerID)) {
|
|
|
|
this.setPeer(peerID);
|
|
|
|
}
|
2020-02-13 08:51:11 +01:00
|
|
|
} else if((target.tagName == 'IMG' && !target.classList.contains('emoji')) || target.tagName == 'VIDEO') {
|
|
|
|
let messageID = +target.getAttribute('message-id');
|
|
|
|
let message = appMessagesManager.getMessage(messageID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
if(!message) {
|
|
|
|
this.log.warn('no message by messageID:', messageID);
|
|
|
|
return;
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
let ids = Object.keys(this.bubbles).map(k => +k).filter(id => {
|
|
|
|
let message = appMessagesManager.getMessage(id);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
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)));
|
2020-02-15 16:20:38 +01:00
|
|
|
}).sort();
|
|
|
|
let idx = ids.findIndex(i => i == messageID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
let prev = ids[idx + 1] || null;
|
|
|
|
let next = ids[idx - 1] || null;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
let prevTarget = this.bubbles[prev] ? this.bubbles[prev].querySelector('img, video') as HTMLElement : null;
|
|
|
|
let nextTarget = this.bubbles[next] ? this.bubbles[next].querySelector('img, video') as HTMLElement : null;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
/////this.log('ids', ids, idx, this.bubbles[prev], this.bubbles[next]);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
appMediaViewer.openMedia(message, target, nextTarget, prevTarget);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
//appMediaViewer.openMedia(message, target as HTMLImageElement);
|
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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.searchBtn.addEventListener('click', (e) => {
|
|
|
|
if(this.peerID) {
|
|
|
|
appSidebarLeft.beginSearch(this.peerID);
|
|
|
|
}
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.pinnedMessageContainer.addEventListener('click', (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
e.cancelBubble = true;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let mid = +this.pinnedMessageContainer.getAttribute('data-mid');
|
|
|
|
this.setPeer(this.peerID, mid);
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
this.btnMenuMute.addEventListener('click', () => this.mutePeer());
|
|
|
|
this.btnMute.addEventListener('click', () => this.mutePeer());
|
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-02-11 07:22:12 +01:00
|
|
|
if(e.key == 'Enter') {
|
|
|
|
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-02-13 16:42:39 +01:00
|
|
|
if(e.key == 'Meta' || e.key == 'Control') {
|
|
|
|
return;
|
|
|
|
} else if(e.key == 'c' && (e.ctrlKey || e.metaKey) && target.tagName != 'INPUT') {
|
|
|
|
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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.chatInner.addEventListener('contextmenu', e => {
|
2020-02-10 08:56:15 +01:00
|
|
|
let bubble: HTMLDivElement = null;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
try {
|
|
|
|
bubble = findUpClassName(e.target, 'bubble');
|
|
|
|
} catch(e) {}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
if(bubble) {
|
|
|
|
e.preventDefault();
|
|
|
|
e.cancelBubble = true;
|
|
|
|
|
|
|
|
let msgID = 0;
|
|
|
|
for(let id in this.bubbles) {
|
|
|
|
if(this.bubbles[id] === bubble) {
|
|
|
|
msgID = +id;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
if(!msgID) return;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
if(this.myID == this.peerID || (this.peerID < 0 && !appPeersManager.isChannel(this.peerID) && !appPeersManager.isMegagroup(this.peerID))) {
|
2020-02-09 16:18:04 +01:00
|
|
|
this.contextMenuPin.style.display = '';
|
|
|
|
} else this.contextMenuPin.style.display = 'none';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.contextMenuMsgID = msgID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
let side = bubble.parentElement.classList.contains('in') ? 'left' : 'right';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 17:40:33 +01:00
|
|
|
this.contextMenuEdit.style.display = side == 'right' ? '' : 'none';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.contextMenu.classList.remove('bottom-left', 'bottom-right');
|
|
|
|
this.contextMenu.classList.add(side == 'left' ? 'bottom-right' : 'bottom-left');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
let {clientX, clientY} = e;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.contextMenu.style.left = (side == 'right' ? clientX - this.contextMenu.scrollWidth : clientX) + 'px';
|
|
|
|
if((clientY + this.contextMenu.scrollHeight) > window.innerHeight) {
|
|
|
|
this.contextMenu.style.top = (window.innerHeight - this.contextMenu.scrollHeight) + 'px';
|
|
|
|
} else {
|
|
|
|
this.contextMenu.style.top = clientY + 'px';
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
//this.contextMenu.classList.add('active');
|
|
|
|
openBtnMenu(this.contextMenu);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
/////this.log('contextmenu', e, bubble, msgID, side);
|
2020-02-09 16:18:04 +01:00
|
|
|
}
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.contextMenu.querySelector('.menu-copy').addEventListener('click', () => {
|
|
|
|
let message = appMessagesManager.getMessage(this.contextMenuMsgID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
let str = message ? message.message : '';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
var textArea = document.createElement("textarea");
|
|
|
|
textArea.value = str;
|
|
|
|
textArea.style.position = "fixed"; //avoid scrolling to bottom
|
|
|
|
document.body.appendChild(textArea);
|
|
|
|
textArea.focus();
|
|
|
|
textArea.select();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
try {
|
|
|
|
document.execCommand('copy');
|
|
|
|
} catch (err) {
|
|
|
|
console.error('Oops, unable to copy', err);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
document.body.removeChild(textArea);
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.contextMenu.querySelector('.menu-delete').addEventListener('click', () => {
|
|
|
|
if(this.peerID == this.myID) {
|
|
|
|
this.popupDeleteMessage.deleteBothBtn.style.display = 'none';
|
|
|
|
this.popupDeleteMessage.deleteMeBtn.innerText = 'DELETE';
|
|
|
|
} else {
|
|
|
|
this.popupDeleteMessage.deleteBothBtn.style.display = '';
|
|
|
|
this.popupDeleteMessage.deleteMeBtn.innerText = 'DELETE JUST FOR ME';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
if(this.peerID > 0) {
|
|
|
|
let title = appPeersManager.getPeerTitle(this.peerID);
|
2020-02-10 15:51:24 +01:00
|
|
|
this.popupDeleteMessage.deleteBothBtn.innerHTML = 'DELETE FOR ME AND ' + title;
|
2020-02-09 16:18:04 +01:00
|
|
|
} else {
|
|
|
|
this.popupDeleteMessage.deleteBothBtn.innerText = 'DELETE FOR ALL';
|
|
|
|
}
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.popupDeleteMessage.popupEl.classList.add('active');
|
|
|
|
});
|
2020-02-10 04:37:17 +01:00
|
|
|
|
|
|
|
this.contextMenu.querySelector('.menu-reply').addEventListener('click', () => {
|
|
|
|
let message = appMessagesManager.getMessage(this.contextMenuMsgID);
|
2020-02-15 19:08:26 +01:00
|
|
|
this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID, true), message.message, undefined, message.media);
|
2020-02-14 17:15:41 +01:00
|
|
|
this.chatInputC.replyToMsgID = this.contextMenuMsgID;
|
|
|
|
this.chatInputC.editMsgID = 0;
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-14 17:15:41 +01:00
|
|
|
this.contextMenuEdit.addEventListener('click', () => {
|
|
|
|
let message = appMessagesManager.getMessage(this.contextMenuMsgID);
|
2020-02-15 19:08:26 +01:00
|
|
|
this.chatInputC.setTopInfo('Editing', message.message, message.message, message.media);
|
2020-02-14 17:15:41 +01:00
|
|
|
this.chatInputC.replyToMsgID = 0;
|
|
|
|
this.chatInputC.editMsgID = this.contextMenuMsgID;
|
2020-02-10 04:37:17 +01:00
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.contextMenuPin.addEventListener('click', () => {
|
|
|
|
apiManager.invokeApi('messages.updatePinnedMessage', {
|
|
|
|
flags: 0,
|
|
|
|
peer: appPeersManager.getInputPeerByID(this.peerID),
|
|
|
|
id: this.contextMenuMsgID
|
|
|
|
}).then(updates => {
|
2020-02-17 13:18:06 +01:00
|
|
|
/////this.log('pinned updates:', updates);
|
2020-02-09 16:18:04 +01:00
|
|
|
apiUpdatesManager.processUpdateMessage(updates);
|
|
|
|
});
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.popupDeleteMessage.deleteBothBtn.addEventListener('click', () => {
|
|
|
|
this.deleteMessages(true);
|
|
|
|
this.popupDeleteMessage.cancelBtn.click();
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.popupDeleteMessage.deleteMeBtn.addEventListener('click', () => {
|
|
|
|
this.deleteMessages(false);
|
|
|
|
this.popupDeleteMessage.cancelBtn.click();
|
|
|
|
});
|
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) {
|
|
|
|
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-02-06 16:43:07 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
public deleteMessages(revoke = false) {
|
|
|
|
let flags = revoke ? 1 : 0;
|
|
|
|
let ids = [this.contextMenuMsgID];
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
apiManager.invokeApi('messages.deleteMessages', {
|
|
|
|
flags: flags,
|
|
|
|
revoke: revoke,
|
|
|
|
id: ids
|
|
|
|
}).then((affectedMessages: any) => {
|
2020-02-17 13:18:06 +01:00
|
|
|
/////this.log('deleted messages:', affectedMessages);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
apiUpdatesManager.processUpdateMessage({
|
|
|
|
_: 'updateShort',
|
|
|
|
update: {
|
|
|
|
_: 'updatePts',
|
|
|
|
pts: affectedMessages.pts,
|
|
|
|
pts_count: affectedMessages.pts_count
|
|
|
|
}
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
apiUpdatesManager.processUpdateMessage({
|
|
|
|
_: 'updateShort',
|
|
|
|
update: {
|
|
|
|
_: 'updateDeleteMessages',
|
|
|
|
messages: ids
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
public deleteEmptySideDivs() {
|
2020-02-22 12:20:43 +01:00
|
|
|
return;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
let nodes = Array.from(this.chatInner.childNodes) as HTMLDivElement[];
|
|
|
|
nodes.filter((node) => {
|
|
|
|
let childElementCount = node.childElementCount;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
if(!childElementCount) {
|
|
|
|
node.remove();
|
|
|
|
return false;
|
|
|
|
} else if(childElementCount == 1) {
|
|
|
|
let child = node.firstElementChild;
|
|
|
|
if(child.classList.contains('service')) {
|
|
|
|
node.remove();
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
return true;
|
|
|
|
}).forEach(node => {
|
|
|
|
let nextNode = node.nextElementSibling;
|
|
|
|
if(nextNode && node.className == nextNode.className) {
|
|
|
|
(Array.from(node.childNodes) as HTMLDivElement[]).reverse().forEach(div => {
|
|
|
|
nextNode.prepend(div);
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
node.remove();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public loadMediaQueuePush(cb: () => Promise<void>) {
|
|
|
|
this.loadMediaQueue.push(cb);
|
|
|
|
this.loadMediaQueueProcess();
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
public async loadMediaQueueProcess(): Promise<void[]> {
|
2020-03-01 18:26:25 +01:00
|
|
|
if(this.loadingMedia >= 5/* || 1 == 1 */) return;
|
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
let item = this.loadMediaQueue.pop();
|
|
|
|
if(item) {
|
|
|
|
this.loadingMedia++;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-12 14:48:30 +01:00
|
|
|
let peerID = this.peerID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
let promise = item();
|
|
|
|
try {
|
|
|
|
await promise;
|
|
|
|
} catch(err) {
|
|
|
|
this.log.error('loadMediaQueue error:', err);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-12 14:48:30 +01:00
|
|
|
if(peerID == this.peerID) {
|
|
|
|
this.loadingMedia--;
|
|
|
|
}
|
2020-02-10 15:51:24 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
if(this.loadMediaQueue.length) return this.loadMediaQueueProcess();
|
|
|
|
}
|
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-03-01 18:26:25 +01:00
|
|
|
public loadMoreHistory(top: boolean) {
|
|
|
|
// load more history
|
|
|
|
// возможно нужно добавить разные таймауты для верха и низа
|
|
|
|
if(!this.getHistoryPromise && !this.getHistoryTimeout && this.peerID && !testScroll) {
|
|
|
|
this.getHistoryTimeout = setTimeout(() => { // must be
|
|
|
|
let history = Object.keys(this.bubbles).map(id => +id).sort();
|
|
|
|
|
|
|
|
/* let history = appMessagesManager.historiesStorage[this.peerID].history;
|
|
|
|
let length = history.length; */
|
|
|
|
|
|
|
|
// filter negative ids
|
|
|
|
let lastBadIndex = -1;
|
|
|
|
for(let i = 0; i < history.length; ++i) {
|
|
|
|
if(history[i] <= 0) lastBadIndex = i;
|
|
|
|
else break;
|
|
|
|
}
|
|
|
|
if(lastBadIndex != -1) {
|
|
|
|
history = history.slice(lastBadIndex + 1);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.getHistoryTimeout = 0;
|
|
|
|
|
|
|
|
if(!this.scrolledAll && top) {
|
|
|
|
this.log('Will load more (up) history by id:', history[0], 'maxID:', history[history.length - 1], history);
|
|
|
|
/* false && */!testScroll && this.getHistory(history[0], true).then(() => { // uncomment
|
|
|
|
this.onScroll();
|
|
|
|
}).catch(err => {
|
|
|
|
this.log.warn('Could not load more history, err:', err);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if(this.scrolledAllDown) return;
|
|
|
|
|
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(this.peerID)[0];
|
|
|
|
/* if(!dialog) {
|
|
|
|
this.log.warn('no dialog for load history');
|
|
|
|
return;
|
|
|
|
} */
|
|
|
|
|
|
|
|
// 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);
|
|
|
|
/* false && */!testScroll && this.getHistory(history[history.length - 1], false, true).then(() => { // uncomment
|
|
|
|
this.onScroll();
|
|
|
|
}).catch(err => {
|
|
|
|
this.log.warn('Could not load more history, err:', err);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}, 0);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public onScroll() {
|
|
|
|
let readed: number[] = [];
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-22 17:00:17 +01:00
|
|
|
this.unreaded.forEachReverse((msgID, idx) => {
|
2020-02-06 16:43:07 +01:00
|
|
|
let bubble = this.bubbles[msgID];
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(isElementInViewport(bubble)) {
|
|
|
|
readed.push(msgID);
|
2020-02-22 17:00:17 +01:00
|
|
|
this.unreaded.splice(idx, 1);
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
2020-02-22 17:00:17 +01:00
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-03-02 18:15:11 +01:00
|
|
|
lottieLoader.checkAnimations(false, 'chat');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(readed.length) {
|
|
|
|
let max = Math.max(...readed);
|
2020-02-07 03:10:08 +01:00
|
|
|
let min = Math.min(...readed);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
if(this.peerID < 0) {
|
|
|
|
max = appMessagesIDsManager.getMessageIDInfo(max)[0];
|
|
|
|
min = appMessagesIDsManager.getMessageIDInfo(min)[0];
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
//appMessagesManager.readMessages(readed);
|
2020-02-07 15:17:39 +01:00
|
|
|
appMessagesManager.readHistory(this.peerID, max, min).catch((err: any) => {
|
|
|
|
this.log.error('readHistory err:', err);
|
|
|
|
appMessagesManager.readHistory(this.peerID, max, min);
|
|
|
|
});
|
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(this.scroll.scrollHeight - (this.scroll.scrollTop + this.scroll.offsetHeight) == 0/* <= 5 */) {
|
|
|
|
this.scroll.parentElement.classList.add('scrolled-down');
|
|
|
|
} else if(this.scroll.parentElement.classList.contains('scrolled-down')) {
|
|
|
|
this.scroll.parentElement.classList.remove('scrolled-down');
|
|
|
|
}
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-20 09:13:15 +01:00
|
|
|
public setScroll() {
|
2020-03-02 18:15:11 +01:00
|
|
|
this.scrollable = new Scrollable(this.bubblesContainer, false, true, 750, 'IM', this.chatInner/* 1500 */, 450);
|
2020-02-20 09:13:15 +01:00
|
|
|
this.scroll = this.scrollable.container;
|
2020-03-02 18:15:11 +01:00
|
|
|
|
|
|
|
this.bubblesContainer.append(this.goDownBtn);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-22 12:20:43 +01:00
|
|
|
this.scrollable.setVirtualContainer(this.chatInner);
|
2020-03-01 18:26:25 +01:00
|
|
|
this.scrollable.onScrolledTop = () => this.loadMoreHistory(true);
|
|
|
|
this.scrollable.onScrolledBottom = () => this.loadMoreHistory(false);
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.scrollPosition = new ScrollPosition(this.chatInner);
|
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-02-06 16:43:07 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public setPeerStatus() {
|
|
|
|
if(!this.myID) return;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
// set subtitle
|
|
|
|
this.subtitleEl.innerText = appSidebarRight.profileElements.subtitle.innerText = '';
|
|
|
|
this.subtitleEl.classList.remove('online');
|
|
|
|
appSidebarRight.profileElements.subtitle.classList.remove('online');
|
2020-03-01 18:26:25 +01: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-02-17 13:18:06 +01:00
|
|
|
///////this.log('setPeerStatus', chat);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
Promise.all([
|
|
|
|
appPeersManager.isMegagroup(this.peerID) ? apiManager.invokeApi('messages.getOnlines', {
|
|
|
|
peer: appPeersManager.getInputPeerByID(this.peerID)
|
|
|
|
}) as Promise<any> : Promise.resolve(),
|
|
|
|
// will redirect if wrong
|
|
|
|
appProfileManager.getChatFull(chat.id)
|
|
|
|
]).then(results => {
|
|
|
|
let [chatOnlines, chatInfo] = results;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
let onlines = chatOnlines ? chatOnlines.onlines : 1;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
///////////this.log('chatInfo res:', chatInfo);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
if(chatInfo.pinned_msg_id) { // request pinned message
|
|
|
|
this.pinnedMsgID = chatInfo.pinned_msg_id;
|
|
|
|
appMessagesManager.wrapSingleMessage(chatInfo.pinned_msg_id);
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
let participants_count = chatInfo.participants_count || chatInfo.participants.participants.length;
|
2020-02-06 16:43:07 +01:00
|
|
|
let subtitle = numberWithCommas(participants_count) + ' ' + (isChannel ? 'subscribers' : 'members');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 15:51:24 +01:00
|
|
|
if(onlines > 1) {
|
|
|
|
subtitle += ', ' + numberWithCommas(onlines) + ' online';
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.subtitleEl.innerText = appSidebarRight.profileElements.subtitle.innerText = subtitle;
|
|
|
|
});
|
|
|
|
} else if(!appUsersManager.isBot(this.peerID)) { // user
|
|
|
|
let user = appUsersManager.getUser(this.peerID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
//this.subtitleEl.classList.remove('online');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(user && user.status && this.myID != this.peerID) {
|
|
|
|
let subtitle = '';
|
|
|
|
switch(user.status._) {
|
|
|
|
case 'userStatusRecently':
|
2020-03-01 18:26:25 +01:00
|
|
|
subtitle += 'last seen recently';
|
|
|
|
break;
|
2020-02-06 16:43:07 +01:00
|
|
|
case 'userStatusOffline':
|
2020-03-01 18:26:25 +01:00
|
|
|
subtitle = 'last seen ';
|
|
|
|
|
|
|
|
let date = user.status.was_online;
|
|
|
|
let now = Date.now() / 1000;
|
|
|
|
|
|
|
|
if((now - date) < 60) {
|
|
|
|
subtitle += ' just now';
|
|
|
|
} else if((now - date) < 3600) {
|
|
|
|
subtitle += ((now - date) / 60 | 0) + ' minutes ago';
|
|
|
|
} else if(now - date < 86400) {
|
|
|
|
subtitle += ((now - date) / 3600 | 0) + ' hours ago';
|
|
|
|
} else {
|
|
|
|
let d = new Date(date * 1000);
|
|
|
|
subtitle += ('0' + d.getDate()).slice(-2) + '.' + ('0' + (d.getMonth() + 1)).slice(-2) + ' at ' +
|
|
|
|
('0' + d.getHours()).slice(-2) + ':' + ('0' + d.getMinutes()).slice(-2);
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
|
|
case 'userStatusOnline':
|
2020-03-01 18:26:25 +01:00
|
|
|
this.subtitleEl.classList.add('online');
|
|
|
|
appSidebarRight.profileElements.subtitle.classList.add('online');
|
|
|
|
subtitle = 'online';
|
|
|
|
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
|
|
|
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');
|
|
|
|
} else this.subtitleEl.innerText = subtitle;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public cleanup() {
|
|
|
|
this.peerID = $rootScope.selectedPeerID = 0;
|
2020-02-08 12:58:22 +01:00
|
|
|
this.scrolledAll = false;
|
2020-02-13 08:51:11 +01:00
|
|
|
this.scrolledAllDown = false;
|
2020-02-09 07:45:43 +01:00
|
|
|
this.muted = false;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
for(let i in this.bubbles) {
|
|
|
|
let bubble = this.bubbles[i];
|
|
|
|
bubble.remove();
|
|
|
|
}
|
|
|
|
this.bubbles = {};
|
|
|
|
this.dateMessages = {};
|
2020-03-01 18:26:25 +01:00
|
|
|
this.bubbleGroups.cleanup();
|
2020-02-06 16:43:07 +01:00
|
|
|
this.unreaded = [];
|
|
|
|
this.unreadOut = [];
|
|
|
|
this.loadMediaQueue = [];
|
2020-02-12 14:48:30 +01:00
|
|
|
this.loadingMedia = 0;
|
2020-02-14 06:04:44 +01:00
|
|
|
this.needUpdate.length = 0;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
lottieLoader.checkAnimations(false, 'chat', true);
|
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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
// clear messages
|
2020-02-06 16:43:07 +01:00
|
|
|
this.chatInner.innerHTML = '';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-22 12:20:43 +01:00
|
|
|
this.scrollable.setVirtualContainer(this.chatInner);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
//appSidebarRight.minMediaID = {};
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
public setPeer(peerID: number, lastMsgID = 0, forwarding = false) {
|
2020-02-08 07:03:09 +01:00
|
|
|
if(peerID == 0) {
|
|
|
|
appSidebarRight.toggleSidebar(false);
|
2020-02-13 12:59:55 +01:00
|
|
|
this.topbar.style.display = this.chatInput.style.display = this.goDownBtn.style.display = 'none';
|
2020-02-08 07:03:09 +01:00
|
|
|
this.cleanup();
|
|
|
|
return Promise.resolve(false);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let 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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
if(lastMsgID) {
|
|
|
|
appMessagesManager.readHistory(peerID, lastMsgID); // lol
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
if(samePeer) {
|
|
|
|
if(!testScroll && !lastMsgID) {
|
|
|
|
return Promise.resolve(true);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(this.bubbles[lastMsgID]) {
|
2020-02-15 09:22:33 +01:00
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
if(dialog && lastMsgID == dialog.top_message) {
|
2020-03-02 18:15:11 +01:00
|
|
|
this.log('will scroll down', this.scroll.scrollTop, this.scroll.scrollHeight);
|
2020-02-10 08:56:15 +01:00
|
|
|
this.scroll.scrollTop = this.scroll.scrollHeight;
|
|
|
|
} else {
|
2020-03-01 18:26:25 +01:00
|
|
|
//this.bubbles[lastMsgID].scrollIntoView();
|
|
|
|
this.scrollable.scrollIntoView(this.bubbles[lastMsgID]);
|
2020-02-10 08:56:15 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
return Promise.resolve(true);
|
|
|
|
}
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
// clear
|
|
|
|
this.cleanup();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
// set new
|
|
|
|
this.peerID = $rootScope.selectedPeerID = peerID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
// no dialog
|
2020-02-11 16:35:57 +01:00
|
|
|
/* if(!appMessagesManager.getDialogByPeerID(this.peerID).length) {
|
2020-02-06 16:43:07 +01:00
|
|
|
this.log.error('No dialog by peerID:', this.peerID);
|
|
|
|
return Promise.reject();
|
2020-02-11 16:35:57 +01:00
|
|
|
} */
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.pinnedMessageContainer.style.display = 'none';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-03-02 18:15:11 +01:00
|
|
|
this.preloader.attach(this.bubblesContainer);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(this.peerID)[0] || null;
|
2020-02-17 13:18:06 +01:00
|
|
|
//////this.log('setPeer peerID:', this.peerID, dialog, lastMsgID);
|
2020-02-11 16:35:57 +01:00
|
|
|
appDialogsManager.loadDialogPhoto(this.avatarEl, this.peerID);
|
|
|
|
appDialogsManager.loadDialogPhoto(appSidebarRight.profileElements.avatar, this.peerID);
|
2020-02-14 06:04:44 +01:00
|
|
|
if(!samePeer && appDialogsManager.lastActiveListElement) {
|
2020-02-13 12:59:55 +01:00
|
|
|
appDialogsManager.lastActiveListElement.classList.remove('active');
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-11 16:35:57 +01:00
|
|
|
this.firstTopMsgID = dialog ? dialog.top_message : 0;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-11 16:35:57 +01:00
|
|
|
/* let dom = appDialogsManager.getDialogDom(this.peerID);
|
2020-02-06 16:43:07 +01:00
|
|
|
if(!dom) {
|
|
|
|
this.log.warn('No rendered dialog by peerID:', this.peerID);
|
|
|
|
appDialogsManager.addDialog(dialog);
|
|
|
|
dom = appDialogsManager.getDialogDom(this.peerID);
|
|
|
|
}
|
|
|
|
// warning need check
|
2020-02-11 16:35:57 +01:00
|
|
|
dom.listEl.classList.add('active'); */
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.setPeerStatus();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-20 09:13:15 +01:00
|
|
|
let title = '';
|
|
|
|
if(this.peerID == this.myID) {
|
|
|
|
title = 'Saved Messages';
|
|
|
|
} else {
|
|
|
|
title = appPeersManager.getPeerTitle(this.peerID);
|
|
|
|
}
|
2020-02-11 16:35:57 +01:00
|
|
|
//this.titleEl.innerHTML = appSidebarRight.profileElements.name.innerHTML = dom.titleSpan.innerHTML;
|
2020-02-20 09:13:15 +01:00
|
|
|
this.titleEl.innerHTML = appSidebarRight.profileElements.name.innerHTML = title;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
this.topbar.style.display = this.goDownBtn.style.display = '';
|
2020-03-02 18:15:11 +01:00
|
|
|
//appSidebarRight.toggleSidebar(true);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 10:22:15 +01:00
|
|
|
this.chatInput.style.display = appPeersManager.isChannel(peerID) && !appPeersManager.isMegagroup(peerID) ? 'none' : '';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-11 16:35:57 +01:00
|
|
|
if(appPeersManager.isAnyGroup(peerID)) {
|
|
|
|
this.chatInner.classList.add('is-chat');
|
|
|
|
} else {
|
|
|
|
this.chatInner.classList.remove('is-chat');
|
|
|
|
}
|
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
//this.scroll.scrollTop = this.scroll.scrollHeight;
|
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
return this.setPeerPromise = Promise.all([
|
2020-02-13 12:59:55 +01:00
|
|
|
this.getHistory(forwarding ? lastMsgID + 1 : lastMsgID).then(() => {
|
2020-02-17 13:18:06 +01:00
|
|
|
////this.log('setPeer removing preloader');
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
|
|
if(lastMsgID) {
|
2020-02-13 12:59:55 +01:00
|
|
|
if(!forwarding) {
|
|
|
|
let message = appMessagesManager.getMessage(lastMsgID);
|
2020-02-17 13:18:06 +01:00
|
|
|
//////this.log('setPeer render last message:', message, lastMsgID);
|
2020-02-13 12:59:55 +01:00
|
|
|
this.renderMessage(message);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 08:51:11 +01:00
|
|
|
if(!dialog || lastMsgID != dialog.top_message) {
|
2020-02-13 12:59:55 +01:00
|
|
|
let bubble = this.bubbles[lastMsgID];
|
|
|
|
|
|
|
|
if(bubble) this.bubbles[lastMsgID].scrollIntoView();
|
|
|
|
else this.log.warn('no bubble by lastMsgID:', lastMsgID);
|
2020-02-10 15:51:24 +01:00
|
|
|
} else {
|
2020-03-02 18:15:11 +01:00
|
|
|
this.log('will scroll down 2');
|
2020-02-10 15:51:24 +01:00
|
|
|
this.scroll.scrollTop = this.scroll.scrollHeight;
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
2020-02-11 16:35:57 +01:00
|
|
|
} else if(dialog && dialog.top_message) { // add last message, bc in getHistory will load < max_id
|
2020-03-01 18:26:25 +01:00
|
|
|
this.renderMessage(appMessagesManager.getMessage(dialog.top_message), false, true);
|
|
|
|
//this.scroll.scrollTop = this.scroll.scrollHeight;
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
this.onScroll();
|
|
|
|
this.scrollable.onScroll();
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
|
|
this.preloader.detach();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-11 16:35:57 +01:00
|
|
|
//setTimeout(() => {
|
2020-03-01 18:26:25 +01:00
|
|
|
//appSidebarRight.fillProfileElements();
|
|
|
|
appSidebarRight.loadSidebarMedia(true);
|
2020-02-11 16:35:57 +01:00
|
|
|
//}, 500);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
|
|
return true;
|
|
|
|
})/* .catch(err => {
|
|
|
|
this.log.error(err);
|
|
|
|
}) */,
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
appSidebarRight.fillProfileElements()
|
2020-02-15 16:20:38 +01:00
|
|
|
]).then(() => {
|
|
|
|
if(this.peerID == peerID) {
|
|
|
|
this.setPeerPromise = null;
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 16:20:38 +01:00
|
|
|
return true;
|
|
|
|
}).catch(err => {
|
|
|
|
if(this.peerID == peerID) {
|
|
|
|
this.setPeerPromise = null;
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
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-02-15 16:20:38 +01:00
|
|
|
return false;
|
2020-02-06 16:43:07 +01:00
|
|
|
});
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-08 07:03:09 +01:00
|
|
|
public setTyping(action: any): Promise<boolean> {
|
|
|
|
if(!this.peerID) return Promise.resolve(false);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-08 07:03:09 +01:00
|
|
|
if(typeof(action) == 'string') {
|
|
|
|
action = {_: action};
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-08 07:03:09 +01:00
|
|
|
let input = appPeersManager.getInputPeerByID(this.peerID);
|
|
|
|
return apiManager.invokeApi('messages.setTyping', {
|
|
|
|
peer: input,
|
|
|
|
action: action
|
|
|
|
}) as Promise<boolean>;
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public updateUnreadByDialog(dialog: any) {
|
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-02-22 17:00:17 +01:00
|
|
|
this.unreadOut.forEachReverse((msgID, idx) => {
|
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-02-11 16:35:57 +01:00
|
|
|
bubble.classList.remove('is-sent');
|
|
|
|
bubble.classList.add('is-read');
|
2020-02-22 17:00:17 +01:00
|
|
|
this.unreadOut.splice(idx, 1);
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
2020-02-22 17:00:17 +01:00
|
|
|
});
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public deleteMessagesByIDs(msgIDs: number[]) {
|
|
|
|
msgIDs.forEach(id => {
|
2020-02-15 09:22:33 +01:00
|
|
|
if(this.firstTopMsgID == id) {
|
|
|
|
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-02-17 13:18:06 +01:00
|
|
|
///////this.log('setting firstTopMsgID after delete:', id, dialog.top_message, dialog);
|
2020-02-15 09:22:33 +01:00
|
|
|
this.firstTopMsgID = dialog.top_message;
|
|
|
|
}
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(!(id in this.bubbles)) return;
|
|
|
|
|
|
|
|
let bubble = this.bubbles[id];
|
|
|
|
delete this.bubbles[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-02-06 16:43:07 +01:00
|
|
|
lottieLoader.checkAnimations();
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
public renderMessagesByIDs(msgIDs: number[]) {
|
2020-02-15 16:20:38 +01:00
|
|
|
if(!this.bubbles[this.firstTopMsgID] && Object.keys(this.bubbles).length) { // seems search active
|
2020-02-17 13:18:06 +01: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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
public renderMessage(message: any, reverse = false, multipleRender?: boolean, bubble: HTMLDivElement = null, updatePosition = true) {
|
2020-02-17 13:18:06 +01:00
|
|
|
/////this.log('message to render:', message);
|
2020-02-13 12:59:55 +01:00
|
|
|
if(message.deleted) 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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-14 14:10:10 +01:00
|
|
|
if(!multipleRender) {
|
|
|
|
this.scrollPosition.prepareFor(reverse ? 'up' : 'down'); // лагает из-за этого
|
|
|
|
}
|
2020-03-01 18:26:25 +01: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 = '';
|
|
|
|
//bubble.innerHTML = '';
|
2020-02-13 08:51:11 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
if(message._ == 'messageService') {
|
|
|
|
bubble.className = 'bubble service';
|
|
|
|
|
|
|
|
let action = message.action;
|
|
|
|
|
|
|
|
let title = appPeersManager.getPeerTitle(message.fromID);
|
|
|
|
let name = document.createElement('div');
|
|
|
|
name.classList.add('name');
|
|
|
|
name.dataset.peerID = message.fromID;
|
|
|
|
name.innerHTML = title;
|
|
|
|
|
|
|
|
let _ = action._;
|
|
|
|
if(_ == "messageActionPhoneCall") {
|
|
|
|
_ += '.' + action.type;
|
|
|
|
}
|
|
|
|
// @ts-ignore
|
|
|
|
let str = (name.innerText ? name.outerHTML + ' ' : '') + langPack[_];
|
|
|
|
bubbleContainer.innerHTML = `<div class="service-msg">${str}</div>`;
|
|
|
|
|
|
|
|
if(!multipleRender) {
|
|
|
|
this.scrollPosition.restore(); // лагает из-за этого
|
|
|
|
}
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
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-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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let richText = RichTextProcessor.wrapRichText(message.message, {
|
|
|
|
entities: message.totalEntities
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(message.totalEntities) {
|
|
|
|
let emojiEntities = message.totalEntities.filter((e: any) => e._ == 'messageEntityEmoji');
|
|
|
|
let strLength = message.message.length;
|
|
|
|
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) {
|
|
|
|
let attachmentDiv = document.createElement('div');
|
|
|
|
attachmentDiv.classList.add('attachment');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
attachmentDiv.innerHTML = richText;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
messageDiv.classList.add('message-empty');
|
|
|
|
bubble.classList.add('emoji-' + emojiEntities.length + 'x', 'emoji-big');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-26 18:52:59 +01:00
|
|
|
bubbleContainer.append(attachmentDiv);
|
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
|
|
|
//messageDiv.innerHTML = 'samsung samsung samsung';
|
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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(our) {
|
2020-02-11 16:35:57 +01:00
|
|
|
if(message.pFlags.unread || message.mid < 0) this.unreadOut.push(message.mid); // message.mid < 0 added 11.02.2020
|
|
|
|
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-02-06 16:43:07 +01:00
|
|
|
if(message.pFlags.unread) this.unreaded.push(message.mid);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
// media
|
|
|
|
if(message.media) {
|
|
|
|
let attachmentDiv = document.createElement('div');
|
|
|
|
attachmentDiv.classList.add('attachment');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(!message.message) {
|
|
|
|
messageDiv.classList.add('message-empty');
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let processingWebPage = false;
|
|
|
|
switch(message.media._) {
|
2020-02-07 15:17:39 +01:00
|
|
|
case 'messageMediaPending': {
|
|
|
|
let pending = message.media;
|
|
|
|
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) {
|
|
|
|
case 'photo': {
|
2020-02-11 16:35:57 +01:00
|
|
|
if(pending.size < 5e6) {
|
2020-02-07 15:17:39 +01:00
|
|
|
let img = new Image();
|
|
|
|
img.src = URL.createObjectURL(pending.file);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-11 07:22:12 +01:00
|
|
|
let {w, h} = calcImageInBox(pending.w, pending.h, 380, 380);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-11 07:22:12 +01:00
|
|
|
attachmentDiv.style.width = w + 'px';
|
|
|
|
attachmentDiv.style.height = h + 'px';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
attachmentDiv.append(img);
|
|
|
|
preloader.attach(attachmentDiv, false);
|
2020-02-11 07:22:12 +01:00
|
|
|
bubble.classList.add('hide-name', 'photo');
|
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-07 15:17:39 +01:00
|
|
|
case 'audio':
|
|
|
|
case 'document': {
|
2020-02-15 20:03:27 +01:00
|
|
|
let docDiv = wrapDocument(pending, false, true);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
let icoDiv = docDiv.querySelector('.document-ico');
|
|
|
|
preloader.attach(icoDiv, false);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-07 15:17:39 +01:00
|
|
|
messageDiv.classList.remove('message-empty');
|
|
|
|
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': {
|
|
|
|
let photo = message.media.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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-07 07:38:55 +01:00
|
|
|
wrapPhoto.call(this, photo, message, attachmentDiv);
|
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-02-06 16:43:07 +01:00
|
|
|
let webpage = message.media.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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let nameEl = document.createElement('a');
|
|
|
|
nameEl.classList.add('name');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let titleDiv = document.createElement('div');
|
|
|
|
titleDiv.classList.add('title');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let textDiv = document.createElement('div');
|
|
|
|
textDiv.classList.add('text');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let preview: HTMLDivElement = null;
|
|
|
|
if(webpage.photo || webpage.document) {
|
|
|
|
preview = document.createElement('div');
|
|
|
|
preview.classList.add('preview');
|
|
|
|
}
|
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');
|
|
|
|
wrapVideo.call(this, doc, preview, message);
|
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-02-06 16:43:07 +01:00
|
|
|
if(webpage.photo && !doc) {
|
|
|
|
bubble.classList.add('photo');
|
2020-02-13 08:51:11 +01:00
|
|
|
//appPhotosManager.savePhoto(webpage.photo); // hot-fix because no webpage manager
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-03-02 18:15:11 +01:00
|
|
|
wrapPhoto.call(this, webpage.photo, message, preview, 380, 300);
|
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(preview) {
|
|
|
|
quote.append(preview);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
nameEl.setAttribute('target', '_blank');
|
|
|
|
nameEl.href = webpage.url || '#';
|
2020-02-10 15:51:24 +01:00
|
|
|
nameEl.innerHTML = webpage.site_name ? RichTextProcessor.wrapEmojiText(webpage.site_name) : '';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(webpage.description) {
|
|
|
|
textDiv.innerHTML = RichTextProcessor.wrapRichText(webpage.description);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-14 10:30:06 +01:00
|
|
|
if(webpage.title) {
|
|
|
|
titleDiv.innerHTML = RichTextProcessor.wrapRichText(webpage.title);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
quote.append(nameEl, titleDiv, textDiv);
|
|
|
|
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': {
|
|
|
|
let doc = message.media.document;
|
|
|
|
/* if(document.size > 1e6) { // 1mb
|
|
|
|
break;
|
|
|
|
} */
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
////////this.log('messageMediaDocument', doc);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(doc.sticker && doc.size <= 1e6) {
|
|
|
|
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-02-10 10:52:47 +01:00
|
|
|
appPhotosManager.setAttachmentSize(doc, attachmentDiv, undefined, undefined, true);
|
|
|
|
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);
|
|
|
|
let load = () => wrapSticker(doc, attachmentDiv, () => {
|
|
|
|
if(this.peerID != peerID) {
|
|
|
|
this.log.warn('peer changed, canceling sticker attach');
|
|
|
|
return false;
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
return true;
|
2020-02-10 10:52:47 +01:00
|
|
|
}, null, 'chat', false, !!message.pending || !multipleRender).then(() => {
|
|
|
|
preloader.detach();
|
|
|
|
/* attachmentDiv.style.width = '';
|
|
|
|
attachmentDiv.style.height = ''; */
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.loadMediaQueuePush(load);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
break;
|
2020-02-10 15:51:24 +01:00
|
|
|
} else if(doc.mime_type == 'video/mp4' && doc.size <= 20e6) {
|
2020-03-01 18:26:25 +01:00
|
|
|
this.log('never get free 2', doc);
|
|
|
|
|
2020-02-10 10:52:47 +01:00
|
|
|
if(doc.type == 'round') {
|
|
|
|
bubble.classList.add('round');
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
bubble.classList.add('video');
|
2020-02-13 12:59:55 +01:00
|
|
|
wrapVideo.call(this, doc, attachmentDiv, message, true, null, false, doc.type == 'round');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
break;
|
|
|
|
} else if(doc.mime_type == 'audio/ogg') {
|
|
|
|
let docDiv = wrapDocument(doc);
|
|
|
|
|
|
|
|
messageDiv.classList.remove('message-empty');
|
|
|
|
|
|
|
|
bubble.classList.add('bubble-audio');
|
|
|
|
messageDiv.append(docDiv);
|
|
|
|
processingWebPage = true;
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
break;
|
|
|
|
} else {
|
|
|
|
let docDiv = wrapDocument(doc);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
messageDiv.classList.remove('message-empty');
|
|
|
|
messageDiv.append(docDiv);
|
|
|
|
processingWebPage = true;
|
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
|
|
|
default:
|
2020-03-01 18:26:25 +01:00
|
|
|
messageDiv.classList.remove('message-empty');
|
|
|
|
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-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-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-02-10 08:56:15 +01:00
|
|
|
title = message.fwd_from.from_name;
|
|
|
|
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-02-10 08:56:15 +01:00
|
|
|
if(message.fwdFromID || message.fwd_from) {
|
2020-02-06 16:43:07 +01:00
|
|
|
bubble.classList.add('forwarded');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
if(message.savedFrom) {
|
|
|
|
let fwd = document.createElement('div');
|
|
|
|
fwd.classList.add('forward'/* , 'tgico-forward' */);
|
2020-03-01 18:26:25 +01:00
|
|
|
fwd.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>`;
|
2020-02-26 18:52:59 +01:00
|
|
|
bubbleContainer.append(fwd);
|
2020-02-13 12:59:55 +01:00
|
|
|
bubble.dataset.savedFrom = message.savedFrom;
|
|
|
|
}
|
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-10 15:51:24 +01:00
|
|
|
nameDiv.innerHTML = 'Forwarded from ' + title;
|
2020-02-13 12:59:55 +01:00
|
|
|
nameDiv.dataset.peerID = message.fwdFromID;
|
2020-02-11 16:35:57 +01:00
|
|
|
//nameDiv.style.color = appPeersManager.getPeerColorByID(message.fromID, false);
|
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-02-15 19:08:26 +01:00
|
|
|
let originalPeerTitle = appPeersManager.getPeerTitle(originalMessage.fromID, 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-02-26 18:52:59 +01:00
|
|
|
bubbleContainer.append(wrapReply(originalPeerTitle, originalMessage.message || '', originalMessage.media));
|
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
|
|
|
|
|
|
|
if(!our && this.peerID < 0 && (!appPeersManager.isChannel(this.peerID) || appPeersManager.isMegagroup(this.peerID))) {
|
2020-02-07 07:38:55 +01:00
|
|
|
let avatarDiv = document.createElement('div');
|
|
|
|
avatarDiv.classList.add('user-avatar');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
/////////this.log('exec loadDialogPhoto', message);
|
2020-02-07 07:38:55 +01:00
|
|
|
if(message.fromID) { // if no - user hidden
|
|
|
|
appDialogsManager.loadDialogPhoto(avatarDiv, message.fromID);
|
|
|
|
} else if(!title && message.fwd_from && message.fwd_from.from_name) {
|
|
|
|
title = message.fwd_from.from_name;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-03-02 18:15:11 +01:00
|
|
|
appDialogsManager.loadDialogPhoto(avatarDiv, 0, false, title);
|
2020-02-07 07:38:55 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-13 12:59:55 +01:00
|
|
|
avatarDiv.dataset.peerID = message.fromID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-26 18:52:59 +01:00
|
|
|
bubbleContainer.append(avatarDiv);
|
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-02-26 18:52:59 +01:00
|
|
|
bubble.classList.add(our ? 'is-out' : 'is-in');
|
2020-02-14 06:04:44 +01:00
|
|
|
if(updatePosition) {
|
2020-02-22 12:20:43 +01:00
|
|
|
if(reverse) {
|
|
|
|
this.scrollable.prepend(bubble);
|
|
|
|
} else {
|
|
|
|
this.scrollable.append(bubble);
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
|
|
|
|
2020-03-01 18:26:25 +01:00
|
|
|
this.bubbleGroups.addBubble(bubble, message, reverse);
|
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
let justDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
|
|
let dateTimestamp = justDate.getTime();
|
|
|
|
if(!(dateTimestamp in this.dateMessages)) {
|
|
|
|
let str = '';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
let today = new Date();
|
|
|
|
today.setHours(0);
|
|
|
|
today.setMinutes(0);
|
|
|
|
today.setSeconds(0);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
if(today < date) {
|
|
|
|
str = 'Today';
|
|
|
|
} else {
|
2020-03-01 18:26:25 +01:00
|
|
|
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
2020-02-14 06:04:44 +01:00
|
|
|
str = justDate.getFullYear() == new Date().getFullYear() ?
|
2020-03-01 18:26:25 +01:00
|
|
|
months[justDate.getMonth()] + ' ' + justDate.getDate() :
|
|
|
|
justDate.toISOString().split('T')[0].split('-').reverse().join('.');
|
2020-02-14 06:04:44 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
let div = document.createElement('div');
|
2020-02-26 18:52:59 +01:00
|
|
|
div.className = 'bubble service';
|
2020-02-14 06:04:44 +01:00
|
|
|
div.innerHTML = `<div class="service-msg">${str}</div>`;
|
2020-02-17 13:18:06 +01:00
|
|
|
////////this.log('need to render date message', dateTimestamp, str);
|
2020-02-14 06:04:44 +01:00
|
|
|
|
|
|
|
this.dateMessages[dateTimestamp] = {
|
|
|
|
div,
|
|
|
|
firstTimestamp: date.getTime()
|
|
|
|
};
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-22 17:00:17 +01:00
|
|
|
this.scrollable.insertBefore(div, bubble);
|
2020-02-10 04:37:17 +01:00
|
|
|
} else {
|
2020-02-14 06:04:44 +01:00
|
|
|
let dateMessage = this.dateMessages[dateTimestamp];
|
|
|
|
if(dateMessage.firstTimestamp > date.getTime()) {
|
2020-02-22 17:00:17 +01:00
|
|
|
this.scrollable.insertBefore(dateMessage.div, bubble);
|
2020-02-14 06:04:44 +01:00
|
|
|
}
|
2020-02-10 04:37:17 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
} else {
|
|
|
|
this.bubbleGroups.updateGroupByMessageID(message.mid);
|
2020-02-14 06:04:44 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
/* if(bubble.classList.contains('webpage')) {
|
|
|
|
this.log('night running', bubble, bubble.scrollHeight);
|
|
|
|
} */
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-14 06:04:44 +01:00
|
|
|
//return //this.scrollPosition.restore();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(!multipleRender) {
|
|
|
|
this.scrollPosition.restore(); // лагает из-за этого
|
|
|
|
}
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
// reverse means scroll up
|
|
|
|
public getHistory(maxID = 0, reverse = false, isBackLimit = false) {
|
|
|
|
let peerID = this.peerID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-15 09:22:33 +01:00
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
|
|
|
|
if(!maxID && dialog && dialog.top_message) {
|
|
|
|
maxID = dialog.top_message/* + 1 */;
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
let loadCount = Object.keys(this.bubbles).length > 0 ? 20 : this.scrollable.container.parentElement.scrollHeight / 30 * 1.25 | 0;
|
|
|
|
|
2020-02-20 09:13:15 +01:00
|
|
|
/* if(testScroll) {
|
2020-02-10 15:51:24 +01:00
|
|
|
loadCount = 1;
|
2020-02-20 09:13:15 +01:00
|
|
|
if(Object.keys(this.bubbles).length > 0)
|
2020-02-10 15:51:24 +01:00
|
|
|
return Promise.resolve(true);
|
2020-02-20 09:13:15 +01:00
|
|
|
} */
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
//console.time('render getHistory');
|
|
|
|
//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;
|
|
|
|
loadCount = 0;
|
|
|
|
maxID += 1;
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
return this.getHistoryPromise = appMessagesManager.getHistory(this.peerID, maxID, loadCount, backLimit)
|
|
|
|
.then((result: any) => {
|
2020-02-27 12:25:55 +01:00
|
|
|
this.log('getHistory result by maxID:', maxID, reverse, isBackLimit, result);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
//console.timeEnd('render getHistory');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(this.peerID != peerID) {
|
|
|
|
this.log.warn('peer changed');
|
2020-02-17 13:18:06 +01:00
|
|
|
//console.timeEnd('render history total');
|
2020-02-06 16:43:07 +01:00
|
|
|
return Promise.reject();
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(!result || !result.history) {
|
2020-02-17 13:18:06 +01:00
|
|
|
//console.timeEnd('render history total');
|
2020-02-06 16:43:07 +01:00
|
|
|
return true;
|
2020-02-08 12:58:22 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-08 12:58:22 +01:00
|
|
|
// commented bot getProfile in getHistory!
|
2020-02-13 08:51:11 +01:00
|
|
|
if(!result.history/* .filter((id: number) => id > 0) */.length) {
|
|
|
|
if(!isBackLimit) {
|
|
|
|
this.scrolledAll = true;
|
|
|
|
} else {
|
|
|
|
this.scrolledAllDown = true;
|
|
|
|
}
|
2020-02-08 12:58:22 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
//this.chatInner.innerHTML = '';
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
let history = result.history.slice();
|
|
|
|
|
|
|
|
if(reverse) history.reverse();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
//console.time('render history');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(!isBackLimit) {
|
|
|
|
this.scrollPosition.prepareFor(reverse ? 'up' : 'down');
|
|
|
|
}
|
2020-03-02 18:15:11 +01:00
|
|
|
|
|
|
|
if(testScroll) {
|
|
|
|
for(let i = 0; i < 25; ++i) history.forEachReverse((msgID: number) => {
|
|
|
|
let message = appMessagesManager.getMessage(msgID);
|
|
|
|
|
|
|
|
this.renderMessage(message, reverse, true);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
history.forEachReverse((msgID: number) => {
|
|
|
|
let message = appMessagesManager.getMessage(msgID);
|
|
|
|
|
|
|
|
this.renderMessage(message, reverse, true);
|
|
|
|
});
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
if(!isBackLimit) {
|
|
|
|
this.scrollPosition.restore();
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
//console.timeEnd('render history');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
this.getHistoryPromise = undefined;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
//console.timeEnd('render history total');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
return true;
|
|
|
|
});
|
|
|
|
}
|
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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
let peerID = this.peerID;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
this.muted = muted;
|
|
|
|
if(peerID < 0) { // not human
|
|
|
|
let isChannel = appPeersManager.isChannel(peerID) && !appPeersManager.isMegagroup(peerID);
|
|
|
|
if(isChannel) {
|
|
|
|
this.btnMute.classList.remove('tgico-mute', 'tgico-unmute');
|
|
|
|
this.btnMute.classList.add(muted ? 'tgico-unmute' : 'tgico-mute');
|
|
|
|
this.btnMute.style.display = '';
|
|
|
|
} else {
|
|
|
|
this.btnMute.style.display = 'none';
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.btnMute.style.display = 'none';
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
this.btnMenuMute.classList.remove('tgico-mute', 'tgico-unmute');
|
|
|
|
this.btnMenuMute.classList.add(muted ? 'tgico-unmute' : 'tgico-mute');
|
|
|
|
let rp = this.btnMenuMute.firstElementChild;
|
|
|
|
this.btnMenuMute.innerText = muted ? 'Unmute' : 'Mute';
|
|
|
|
this.btnMenuMute.appendChild(rp);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
public mutePeer() {
|
|
|
|
let inputPeer = appPeersManager.getInputPeerByID(this.peerID);
|
|
|
|
let inputNotifyPeer = {
|
|
|
|
_: 'inputNotifyPeer',
|
|
|
|
peer: inputPeer
|
|
|
|
};
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
let settings = {
|
2020-02-09 07:45:43 +01:00
|
|
|
_: 'inputPeerNotifySettings',
|
|
|
|
flags: 0,
|
|
|
|
mute_until: 0
|
|
|
|
};
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
if(!this.muted) {
|
2020-02-14 17:15:41 +01:00
|
|
|
settings.flags |= 1 << 2;
|
2020-02-09 07:45:43 +01:00
|
|
|
settings.mute_until = 2147483646;
|
|
|
|
} 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
|
|
|
|
}).then(res => {
|
|
|
|
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':
|
|
|
|
case 'updateChatUserTyping':
|
2020-03-01 18:26:25 +01:00
|
|
|
if(this.myID == update.user_id) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var peerID = update._ == 'updateUserTyping' ? update.user_id : -update.chat_id;
|
|
|
|
this.typingUsers[update.user_id] = peerID;
|
|
|
|
|
|
|
|
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);
|
2020-02-09 07:45:43 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
//return;
|
|
|
|
}
|
|
|
|
|
|
|
|
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
|
|
|
}
|
|
|
|
|
|
|
|
this.typingTimeouts[peerID] = setTimeout(() => {
|
|
|
|
this.typingTimeouts[peerID] = 0;
|
|
|
|
delete this.typingUsers[update.user_id];
|
|
|
|
|
|
|
|
if(dialog) {
|
|
|
|
appDialogsManager.unsetTyping(dialog);
|
2020-02-09 07:45:43 +01:00
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
|
|
// лень просчитывать случаи
|
|
|
|
this.setPeerStatus();
|
|
|
|
}, 6000);
|
|
|
|
break;
|
|
|
|
|
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-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-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
case 'updateChatPinnedMessage':
|
|
|
|
case 'updateUserPinnedMessage': {
|
|
|
|
let {id} = update;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-17 13:18:06 +01:00
|
|
|
/////this.log('updateUserPinnedMessage', update);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
this.pinnedMsgID = id;
|
|
|
|
// hz nado li tut appMessagesIDsManager.getFullMessageID(update.max_id, channelID);
|
|
|
|
let peerID = update.user_id || -update.chat_id || -update.channel_id;
|
|
|
|
if(peerID == this.peerID) {
|
|
|
|
appMessagesManager.wrapSingleMessage(id);
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
2020-02-09 16:18:04 +01:00
|
|
|
break;
|
|
|
|
}
|
2020-02-09 07:45:43 +01:00
|
|
|
}
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
}
|
|
|
|
|
2020-02-10 08:56:15 +01:00
|
|
|
const appImManager = new AppImManager();
|
|
|
|
export default appImManager;
|