2020-08-24 16:09:31 +02:00
|
|
|
|
import { putPreloader, renderImageFromUrl } from "../../components/misc";
|
2020-05-03 14:46:05 +02:00
|
|
|
|
//import Scrollable from '../../components/scrollable';
|
|
|
|
|
import Scrollable from '../../components/scrollable_new';
|
2020-08-30 23:50:25 +02:00
|
|
|
|
import { $rootScope } from "../utils";
|
2020-02-06 16:43:07 +01:00
|
|
|
|
import appMessagesManager from "./appMessagesManager";
|
|
|
|
|
import appPhotosManager from "./appPhotosManager";
|
|
|
|
|
import appPeersManager from "./appPeersManager";
|
|
|
|
|
import appUsersManager from "./appUsersManager";
|
|
|
|
|
import appProfileManager from "./appProfileManager";
|
|
|
|
|
import { RichTextProcessor } from "../richtextprocessor";
|
2020-06-21 14:25:17 +02:00
|
|
|
|
import { logger, LogLevels } from "../logger";
|
2020-02-06 16:43:07 +01:00
|
|
|
|
import appImManager from "./appImManager";
|
|
|
|
|
import appMediaViewer from "./appMediaViewer";
|
2020-02-11 16:35:57 +01:00
|
|
|
|
import LazyLoadQueue from "../../components/lazyLoadQueue";
|
2020-08-30 23:50:25 +02:00
|
|
|
|
import { wrapDocument, wrapAudio } from "../../components/wrappers";
|
2020-04-24 02:48:48 +02:00
|
|
|
|
import AppSearch, { SearchGroup } from "../../components/appSearch";
|
2020-05-13 17:26:40 +02:00
|
|
|
|
import AvatarElement from "../../components/avatar";
|
2020-05-30 08:44:54 +02:00
|
|
|
|
import appForward from "../../components/appForward";
|
2020-08-30 23:50:25 +02:00
|
|
|
|
import SidebarSlider from "../../components/slider";
|
2020-06-13 10:19:39 +02:00
|
|
|
|
import SearchInput from "../../components/searchInput";
|
2020-08-24 16:09:31 +02:00
|
|
|
|
import { horizontalMenu } from "../../components/horizontalMenu";
|
2020-08-26 13:04:37 +02:00
|
|
|
|
import AppStickersTab from "../../components/sidebarRight/stickers";
|
|
|
|
|
import AppPollResultsTab from "../../components/sidebarRight/pollResults";
|
|
|
|
|
import AppGifsTab from "../../components/sidebarRight/gifs";
|
2020-09-23 22:29:53 +02:00
|
|
|
|
import mediaSizes, { ScreenSize } from "../../helpers/mediaSizes";
|
|
|
|
|
import { isSafari } from "../../helpers/userAgent";
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
2020-02-26 18:52:59 +01:00
|
|
|
|
const testScroll = false;
|
|
|
|
|
|
2020-09-23 22:29:53 +02:00
|
|
|
|
const COLUMN_ACTIVE_CLASSNAME = 'is-right-column-shown';
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
let setText = (text: string, el: HTMLDivElement) => {
|
|
|
|
|
window.requestAnimationFrame(() => {
|
|
|
|
|
if(el.childElementCount > 1) {
|
|
|
|
|
el.firstElementChild.remove();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let p = document.createElement('p');
|
|
|
|
|
p.innerHTML = text;
|
|
|
|
|
el.prepend(p);
|
|
|
|
|
|
|
|
|
|
el.style.display = '';
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
const stickersTab = new AppStickersTab();
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const pollResultsTab = new AppPollResultsTab();
|
2020-08-26 13:04:37 +02:00
|
|
|
|
const gifsTab = new AppGifsTab();
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
type ContentType = 'contentMembers' | 'contentMedia' | 'contentDocuments' | 'contentLinks' | 'contentAudio';
|
|
|
|
|
type SharedMediaType = 'inputMessagesFilterContacts' | 'inputMessagesFilterPhotoVideo' | 'inputMessagesFilterDocument' | 'inputMessagesFilterUrl' | 'inputMessagesFilterMusic';
|
|
|
|
|
|
|
|
|
|
const contentToSharedMap: {[contentType in ContentType]: SharedMediaType} = {
|
|
|
|
|
contentMembers: 'inputMessagesFilterContacts',
|
|
|
|
|
contentMedia: 'inputMessagesFilterPhotoVideo',
|
|
|
|
|
contentDocuments: 'inputMessagesFilterDocument',
|
|
|
|
|
contentLinks: 'inputMessagesFilterUrl',
|
|
|
|
|
contentAudio: 'inputMessagesFilterMusic'
|
|
|
|
|
};
|
|
|
|
|
|
2020-08-30 23:50:25 +02:00
|
|
|
|
// TODO: отправленное сообщение с картинкой, или же новое полученное апдейтом сообщение не отобразится в медии
|
|
|
|
|
// TODO: по-хорошему, нужно просто сделать апдейты для всего сайдбара
|
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
export class AppSidebarRight extends SidebarSlider {
|
|
|
|
|
public static SLIDERITEMSIDS = {
|
|
|
|
|
search: 1,
|
|
|
|
|
forward: 2,
|
2020-06-16 22:48:08 +02:00
|
|
|
|
stickers: 3,
|
|
|
|
|
pollResults: 4,
|
2020-08-26 13:04:37 +02:00
|
|
|
|
gifs: 5,
|
2020-02-06 16:43:07 +01:00
|
|
|
|
};
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
|
|
|
|
public profileContainer: HTMLDivElement;
|
|
|
|
|
public profileContentEl: HTMLDivElement;
|
|
|
|
|
public contentContainer: HTMLDivElement;
|
|
|
|
|
public profileElements: {
|
|
|
|
|
avatar: AvatarElement,
|
|
|
|
|
name: HTMLDivElement,
|
|
|
|
|
subtitle: HTMLDivElement,
|
|
|
|
|
bio: HTMLDivElement,
|
|
|
|
|
username: HTMLDivElement,
|
|
|
|
|
phone: HTMLDivElement,
|
|
|
|
|
notificationsRow: HTMLDivElement,
|
|
|
|
|
notificationsCheckbox: HTMLInputElement,
|
|
|
|
|
notificationsStatus: HTMLParagraphElement
|
|
|
|
|
} = {} as any;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
public sharedMedia: {
|
2020-08-30 23:16:26 +02:00
|
|
|
|
[t in ContentType]: HTMLDivElement
|
|
|
|
|
} = {} as any;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-08 17:46:43 +02:00
|
|
|
|
private loadSidebarMediaPromises: {[type: string]: Promise<void>} = {};
|
|
|
|
|
private loadedAllMedia: {[type: string]: boolean} = {};
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
public sharedMediaTypes: SharedMediaType[] = [
|
2020-06-20 03:11:24 +02:00
|
|
|
|
//'members',
|
|
|
|
|
'inputMessagesFilterContacts',
|
2020-02-06 16:43:07 +01:00
|
|
|
|
'inputMessagesFilterPhotoVideo',
|
|
|
|
|
'inputMessagesFilterDocument',
|
|
|
|
|
'inputMessagesFilterUrl',
|
2020-04-25 03:17:50 +02:00
|
|
|
|
'inputMessagesFilterMusic'
|
2020-02-06 16:43:07 +01:00
|
|
|
|
];
|
2020-08-30 23:16:26 +02:00
|
|
|
|
public sharedMediaType: SharedMediaType = 'inputMessagesFilterPhotoVideo';
|
2020-02-06 16:43:07 +01:00
|
|
|
|
private sharedMediaSelected: HTMLDivElement = null;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
private lazyLoadQueue = new LazyLoadQueue();
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
public historiesStorage: {
|
2020-08-30 23:16:26 +02:00
|
|
|
|
[peerID: number]: Partial<{
|
|
|
|
|
[type in SharedMediaType]: number[]
|
|
|
|
|
}>
|
2020-04-15 22:55:08 +02:00
|
|
|
|
} = {};
|
2020-08-30 23:16:26 +02:00
|
|
|
|
public usedFromHistory: Partial<{
|
|
|
|
|
[type in SharedMediaType]: number
|
|
|
|
|
}> = {};
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
private log = logger('SR', LogLevels.error);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-08 12:58:22 +01:00
|
|
|
|
private peerID = 0;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-08 17:46:43 +02:00
|
|
|
|
public scroll: Scrollable = null;
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
2020-02-10 04:37:17 +01:00
|
|
|
|
private profileTabs: HTMLUListElement;
|
|
|
|
|
private prevTabID = -1;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-15 06:54:55 +01:00
|
|
|
|
private mediaDivsByIDs: {
|
|
|
|
|
[mid: number]: HTMLDivElement
|
|
|
|
|
} = {};
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-03-02 18:15:11 +01:00
|
|
|
|
public urlsToRevoke: string[] = [];
|
2020-04-24 02:48:48 +02:00
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
private searchContainer: HTMLDivElement;;
|
|
|
|
|
public searchCloseBtn: HTMLButtonElement;
|
|
|
|
|
private searchInput: SearchInput;
|
|
|
|
|
public privateSearch: AppSearch;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
private loadMutex: Promise<any> = Promise.resolve();
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
|
|
|
|
public stickersTab: AppStickersTab;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
public pollResultsTab: AppPollResultsTab;
|
2020-08-26 13:04:37 +02:00
|
|
|
|
public gifsTab: AppGifsTab;
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
constructor() {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
super(document.getElementById('column-right') as HTMLElement, {
|
|
|
|
|
[AppSidebarRight.SLIDERITEMSIDS.stickers]: stickersTab,
|
2020-06-16 22:48:08 +02:00
|
|
|
|
[AppSidebarRight.SLIDERITEMSIDS.pollResults]: pollResultsTab,
|
2020-08-26 13:04:37 +02:00
|
|
|
|
[AppSidebarRight.SLIDERITEMSIDS.gifs]: gifsTab
|
2020-06-13 10:19:39 +02:00
|
|
|
|
});
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
//this._selectTab(3);
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
|
|
|
|
this.stickersTab = stickersTab;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
this.pollResultsTab = pollResultsTab;
|
2020-08-26 13:04:37 +02:00
|
|
|
|
this.gifsTab = gifsTab;
|
2020-06-13 10:19:39 +02:00
|
|
|
|
|
|
|
|
|
this.profileContainer = this.sidebarEl.querySelector('.profile-container');
|
|
|
|
|
this.profileContentEl = this.sidebarEl.querySelector('.profile-content');
|
|
|
|
|
this.contentContainer = this.sidebarEl.querySelector('.content-container');
|
|
|
|
|
this.profileElements = {
|
|
|
|
|
avatar: this.profileContentEl.querySelector('.profile-avatar'),
|
|
|
|
|
name: this.profileContentEl.querySelector('.profile-name'),
|
|
|
|
|
subtitle: this.profileContentEl.querySelector('.profile-subtitle'),
|
|
|
|
|
bio: this.profileContentEl.querySelector('.profile-row-bio'),
|
|
|
|
|
username: this.profileContentEl.querySelector('.profile-row-username'),
|
|
|
|
|
phone: this.profileContentEl.querySelector('.profile-row-phone'),
|
|
|
|
|
notificationsRow: this.profileContentEl.querySelector('.profile-row-notifications'),
|
|
|
|
|
notificationsCheckbox: this.profileContentEl.querySelector('#profile-notifications'),
|
|
|
|
|
notificationsStatus: this.profileContentEl.querySelector('.profile-row-notifications > p')
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.sharedMedia = {
|
|
|
|
|
contentMembers: this.profileContentEl.querySelector('#content-members'),
|
|
|
|
|
contentMedia: this.profileContentEl.querySelector('#content-media'),
|
|
|
|
|
contentDocuments: this.profileContentEl.querySelector('#content-docs'),
|
|
|
|
|
contentLinks: this.profileContentEl.querySelector('#content-links'),
|
|
|
|
|
contentAudio: this.profileContentEl.querySelector('#content-audio'),
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.searchContainer = this.sidebarEl.querySelector('#search-private-container');
|
|
|
|
|
this.searchCloseBtn = this.searchContainer.querySelector('.sidebar-close-button');
|
|
|
|
|
this.searchInput = new SearchInput('Search');
|
|
|
|
|
this.searchCloseBtn.parentElement.append(this.searchInput.container);
|
|
|
|
|
this.privateSearch = new AppSearch(this.searchContainer.querySelector('.chats-container'), this.searchInput, {
|
|
|
|
|
messages: new SearchGroup('Private Search', 'messages')
|
|
|
|
|
});
|
|
|
|
|
|
2020-04-28 19:30:54 +02:00
|
|
|
|
let container = this.profileContentEl.querySelector('.content-container .tabs-container') as HTMLDivElement;
|
2020-06-13 10:19:39 +02:00
|
|
|
|
this.profileTabs = this.profileContentEl.querySelector('.profile-tabs');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.scroll = new Scrollable(this.profileContainer, 'SR', undefined, 400);
|
2020-04-08 17:46:43 +02:00
|
|
|
|
this.scroll.onScrolledBottom = () => {
|
2020-05-03 14:46:05 +02:00
|
|
|
|
if(this.sharedMediaSelected && this.sharedMediaSelected.childElementCount/* && false */) {
|
2020-04-15 22:55:08 +02:00
|
|
|
|
this.log('onScrolledBottom will load media');
|
2020-03-01 18:26:25 +01:00
|
|
|
|
this.loadSidebarMedia(true);
|
|
|
|
|
}
|
|
|
|
|
};
|
2020-05-23 07:31:18 +02:00
|
|
|
|
//this.scroll.attachSentinels(undefined, 400);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-10 04:37:17 +01:00
|
|
|
|
horizontalMenu(this.profileTabs, container, (id, tabContent) => {
|
2020-03-01 18:26:25 +01:00
|
|
|
|
if(this.prevTabID == id) return;
|
2020-09-23 22:29:53 +02:00
|
|
|
|
|
|
|
|
|
if(this.prevTabID != -1) {
|
|
|
|
|
this.onTransitionStart();
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.sharedMediaType = this.sharedMediaTypes[id];
|
|
|
|
|
this.sharedMediaSelected = tabContent.firstElementChild as HTMLDivElement;
|
2020-04-28 19:30:54 +02:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
if(this.prevTabID != -1 && this.profileTabs.offsetTop) {
|
2020-04-28 19:30:54 +02:00
|
|
|
|
this.scroll.scrollTop -= this.profileTabs.offsetTop;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
}
|
2020-04-28 19:30:54 +02:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
/* this.log('setVirtualContainer', id, this.sharedMediaSelected, this.sharedMediaSelected.childElementCount);
|
|
|
|
|
this.scroll.setVirtualContainer(this.sharedMediaSelected); */
|
2020-04-28 19:30:54 +02:00
|
|
|
|
|
|
|
|
|
if(this.prevTabID != -1 && !this.sharedMediaSelected.childElementCount) { // quick brown fix
|
2020-05-20 16:25:23 +02:00
|
|
|
|
//this.contentContainer.classList.remove('loaded');
|
2020-04-28 19:30:54 +02:00
|
|
|
|
this.loadSidebarMedia(true);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.prevTabID = id;
|
2020-08-30 23:16:26 +02:00
|
|
|
|
}, () => {
|
|
|
|
|
this.scroll.onScroll();
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.onTransitionEnd();
|
2020-05-06 03:03:31 +02:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let sidebarCloseBtn = this.sidebarEl.querySelector('.sidebar-close-button') as HTMLButtonElement;
|
|
|
|
|
sidebarCloseBtn.addEventListener('click', () => {
|
|
|
|
|
this.toggleSidebar(false);
|
|
|
|
|
});
|
2020-04-24 02:48:48 +02:00
|
|
|
|
|
|
|
|
|
this.searchCloseBtn.addEventListener('click', () => {
|
|
|
|
|
this.searchContainer.classList.remove('active');
|
|
|
|
|
this.privateSearch.reset();
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.sharedMedia.contentMedia.addEventListener('click', (e) => {
|
2020-09-01 14:53:46 +02:00
|
|
|
|
const target = e.target as HTMLDivElement;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-01 14:53:46 +02:00
|
|
|
|
const messageID = +target.dataset.mid;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(!messageID) {
|
|
|
|
|
this.log.warn('no messageID by click on target:', target);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-01 14:53:46 +02:00
|
|
|
|
const message = appMessagesManager.getMessage(messageID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-01 14:53:46 +02:00
|
|
|
|
const ids = Object.keys(this.mediaDivsByIDs).map(k => +k).sort((a, b) => a - b);
|
|
|
|
|
const idx = ids.findIndex(i => i == messageID);
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-09-01 14:53:46 +02:00
|
|
|
|
const targets = ids.map(id => {
|
|
|
|
|
const element = this.mediaDivsByIDs[id] as HTMLElement;
|
|
|
|
|
//element = element.querySelector('img') || element;
|
|
|
|
|
return {element, mid: id};
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-01 23:28:40 +02:00
|
|
|
|
appMediaViewer.openMedia(message, target, false, this.sidebarEl, targets.slice(idx + 1).reverse(), targets.slice(0, idx).reverse(), true);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-09 07:45:43 +01:00
|
|
|
|
this.profileElements.notificationsCheckbox.addEventListener('change', () => {
|
2020-03-01 18:26:25 +01:00
|
|
|
|
//let checked = this.profileElements.notificationsCheckbox.checked;
|
2020-05-13 17:26:40 +02:00
|
|
|
|
appImManager.mutePeer(this.peerID);
|
2020-02-09 07:45:43 +01:00
|
|
|
|
});
|
2020-09-23 22:29:53 +02:00
|
|
|
|
|
|
|
|
|
mediaSizes.addListener('changeScreen', (from, to) => {
|
|
|
|
|
if(from !== undefined && to == ScreenSize.medium) {
|
|
|
|
|
this.toggleSidebar(false);
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-04-24 02:48:48 +02:00
|
|
|
|
|
2020-09-23 22:29:53 +02:00
|
|
|
|
private onTransitionStart = () => {
|
|
|
|
|
// Jolly Cobra's // Workaround for scrollable content flickering during animation.
|
|
|
|
|
const container = this.scroll.container;
|
|
|
|
|
if(container.style.overflowY !== 'hidden') {
|
|
|
|
|
const scrollBarWidth = container.offsetWidth - container.clientWidth;
|
|
|
|
|
container.style.overflowY = 'hidden';
|
|
|
|
|
container.style.paddingRight = `${scrollBarWidth}px`;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
private onTransitionEnd = () => {
|
|
|
|
|
// Jolly Cobra's // Workaround for scrollable content flickering during animation.
|
|
|
|
|
const container = this.scroll.container;
|
|
|
|
|
container.style.overflowY = '';
|
|
|
|
|
container.style.paddingRight = '0';
|
|
|
|
|
};
|
|
|
|
|
|
2020-04-24 02:48:48 +02:00
|
|
|
|
public beginSearch() {
|
|
|
|
|
this.toggleSidebar(true);
|
|
|
|
|
this.searchContainer.classList.add('active');
|
|
|
|
|
this.privateSearch.beginSearch(this.peerID);
|
|
|
|
|
}
|
2020-05-20 16:25:23 +02:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
public toggleSidebar(enable?: boolean) {
|
2020-02-17 13:18:06 +01:00
|
|
|
|
/////this.log('sidebarEl', this.sidebarEl, enable, isElementInViewport(this.sidebarEl));
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-09-23 22:29:53 +02:00
|
|
|
|
const active = document.body.classList.contains(COLUMN_ACTIVE_CLASSNAME);
|
2020-05-20 16:25:23 +02:00
|
|
|
|
let willChange: boolean;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(enable !== undefined) {
|
2020-04-08 17:46:43 +02:00
|
|
|
|
if(enable) {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
if(!active) {
|
|
|
|
|
willChange = true;
|
|
|
|
|
}
|
|
|
|
|
} else if(active) {
|
|
|
|
|
willChange = true;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
willChange = true;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-04-24 02:48:48 +02:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
if(!willChange) return Promise.resolve();
|
|
|
|
|
|
2020-06-13 10:19:39 +02:00
|
|
|
|
//console.log('sidebar selectTab', enable, willChange);
|
2020-06-05 18:01:06 +02:00
|
|
|
|
if(mediaSizes.isMobile) {
|
|
|
|
|
appImManager.selectTab(active ? 1 : 2);
|
|
|
|
|
return Promise.resolve();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const set = () => {
|
2020-09-23 22:29:53 +02:00
|
|
|
|
document.body.classList.toggle(COLUMN_ACTIVE_CLASSNAME, enable);
|
2020-05-20 16:25:23 +02:00
|
|
|
|
};
|
|
|
|
|
|
2020-09-23 22:29:53 +02:00
|
|
|
|
set();
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
setTimeout(resolve, 200);
|
|
|
|
|
});
|
|
|
|
|
//return Promise.resolve();
|
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
return new Promise((resolve, reject) => {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
const hidden: {element: HTMLDivElement, height: number}[] = [];
|
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
|
|
|
for(const entry of entries) {
|
|
|
|
|
const bubble = entry.target as HTMLDivElement;
|
2020-05-20 16:25:23 +02:00
|
|
|
|
if(!entry.isIntersecting) {
|
|
|
|
|
hidden.push({element: bubble, height: bubble.scrollHeight});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
for(const item of hidden) {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
item.element.style.minHeight = item.height + 'px';
|
|
|
|
|
(item.element.firstElementChild as HTMLElement).style.display = 'none';
|
|
|
|
|
item.element.style.width = '1px';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//console.log('hidden', hidden);
|
|
|
|
|
observer.disconnect();
|
|
|
|
|
|
|
|
|
|
set();
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
for(const item of hidden) {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
item.element.style.minHeight = '';
|
|
|
|
|
item.element.style.width = '';
|
|
|
|
|
(item.element.firstElementChild as HTMLElement).style.display = '';
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
if(active) {
|
2020-05-30 08:44:54 +02:00
|
|
|
|
appForward.close();
|
|
|
|
|
this.searchCloseBtn.click();
|
|
|
|
|
}
|
2020-06-05 18:01:06 +02:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
resolve();
|
|
|
|
|
}, 200);
|
|
|
|
|
});
|
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
const length = Object.keys(appImManager.bubbles).length;
|
2020-05-20 16:25:23 +02:00
|
|
|
|
if(length) {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
for(const i in appImManager.bubbles) {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
observer.observe(appImManager.bubbles[i]);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
set();
|
|
|
|
|
setTimeout(resolve, 200);
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-05-06 03:03:31 +02:00
|
|
|
|
public filterMessagesByType(ids: number[], type: string) {
|
2020-04-15 22:55:08 +02:00
|
|
|
|
let messages: any[] = [];
|
|
|
|
|
for(let mid of ids) {
|
|
|
|
|
let message = appMessagesManager.getMessage(mid);
|
|
|
|
|
if(message.media) messages.push(message);
|
|
|
|
|
}
|
2020-05-06 03:03:31 +02:00
|
|
|
|
|
|
|
|
|
let filtered: any[] = [];
|
|
|
|
|
|
2020-04-15 22:55:08 +02:00
|
|
|
|
switch(type) {
|
|
|
|
|
case 'inputMessagesFilterPhotoVideo': {
|
|
|
|
|
for(let message of messages) {
|
|
|
|
|
let media = message.media.photo || message.media.document || (message.media.webpage && message.media.webpage.document);
|
|
|
|
|
if(!media) {
|
|
|
|
|
//this.log('no media!', message);
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(media._ == 'document' && media.type != 'video'/* && media.type != 'gif' */) {
|
|
|
|
|
//this.log('broken video', media);
|
|
|
|
|
continue;
|
|
|
|
|
}
|
2020-05-06 03:03:31 +02:00
|
|
|
|
|
|
|
|
|
filtered.push(message);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
case 'inputMessagesFilterDocument': {
|
|
|
|
|
for(let message of messages) {
|
|
|
|
|
if(!message.media.document || message.media.document.type == 'voice' || message.media.document.type == 'audio') {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let doc = message.media.document;
|
|
|
|
|
if(doc.attributes) {
|
|
|
|
|
if(doc.attributes.find((a: any) => a._ == "documentAttributeSticker")) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
filtered.push(message);
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
case 'inputMessagesFilterUrl': {
|
|
|
|
|
for(let message of messages) {
|
|
|
|
|
if(!message.media.webpage || message.media.webpage._ == 'webPageEmpty') {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-05-06 03:03:31 +02:00
|
|
|
|
filtered.push(message);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
case 'inputMessagesFilterMusic': {
|
|
|
|
|
for(let message of messages) {
|
|
|
|
|
if(!message.media.document || message.media.document.type != 'audio') {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
filtered.push(message);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return filtered;
|
|
|
|
|
}
|
|
|
|
|
|
2020-09-18 17:03:26 +02:00
|
|
|
|
public async performSearchResult(messages: any[], type: SharedMediaType) {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const peerID = this.peerID;
|
|
|
|
|
const elemsToAppend: HTMLElement[] = [];
|
|
|
|
|
const promises: Promise<any>[] = [];
|
2020-05-06 03:03:31 +02:00
|
|
|
|
let sharedMediaDiv: HTMLDivElement;
|
2020-08-30 23:16:26 +02:00
|
|
|
|
|
|
|
|
|
/* for(let contentType in contentToSharedMap) {
|
|
|
|
|
if(contentToSharedMap[contentType as ContentType] == type) {
|
|
|
|
|
sharedMediaDiv = this.sharedMedia[contentType as ContentType];
|
|
|
|
|
}
|
|
|
|
|
} */
|
2020-05-06 03:03:31 +02:00
|
|
|
|
|
|
|
|
|
// https://core.telegram.org/type/MessagesFilter
|
|
|
|
|
switch(type) {
|
|
|
|
|
case 'inputMessagesFilterPhotoVideo': {
|
|
|
|
|
sharedMediaDiv = this.sharedMedia.contentMedia;
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
for(const message of messages) {
|
|
|
|
|
const media = message.media.photo || message.media.document || (message.media.webpage && message.media.webpage.document);
|
2020-05-06 03:03:31 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const div = document.createElement('div');
|
2020-05-18 03:21:58 +02:00
|
|
|
|
div.classList.add('media-item');
|
2020-04-15 22:55:08 +02:00
|
|
|
|
//console.log(message, photo);
|
2020-05-21 01:02:57 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const isPhoto = media._ == 'photo';
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const photo = isPhoto ? appPhotosManager.getPhoto(media.id) : null;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
let isDownloaded: boolean;
|
|
|
|
|
if(photo) {
|
|
|
|
|
isDownloaded = photo.downloaded > 0;
|
|
|
|
|
} else {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const cachedThumb = appPhotosManager.getDocumentCachedThumb(media.id);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
isDownloaded = cachedThumb?.downloaded > 0;
|
2020-04-15 22:55:08 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//this.log('inputMessagesFilterPhotoVideo', message, media);
|
2020-05-06 03:03:31 +02:00
|
|
|
|
|
|
|
|
|
if(!isPhoto) {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const span = document.createElement('span');
|
2020-05-06 03:03:31 +02:00
|
|
|
|
span.classList.add('video-time');
|
|
|
|
|
div.append(span);
|
|
|
|
|
|
|
|
|
|
if(media.type != 'gif') {
|
|
|
|
|
span.innerText = (media.duration + '').toHHMMSS(false);
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
/* const spanPlay = document.createElement('span');
|
2020-05-06 03:03:31 +02:00
|
|
|
|
spanPlay.classList.add('video-play', 'tgico-largeplay', 'btn-circle', 'position-center');
|
|
|
|
|
div.append(spanPlay); */
|
|
|
|
|
} else {
|
|
|
|
|
span.innerText = 'GIF';
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const load = () => appPhotosManager.preloadPhoto(isPhoto ? media.id : media, appPhotosManager.choosePhotoSize(media, 200, 200))
|
2020-05-06 03:03:31 +02:00
|
|
|
|
.then(() => {
|
2020-04-15 22:55:08 +02:00
|
|
|
|
if($rootScope.selectedPeerID != peerID) {
|
|
|
|
|
this.log.warn('peer changed');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const url = (photo && photo.url) || appPhotosManager.getDocumentCachedThumb(media.id).url;
|
2020-05-06 03:03:31 +02:00
|
|
|
|
if(url) {
|
2020-06-16 22:48:08 +02:00
|
|
|
|
//if(needBlur) return;
|
|
|
|
|
|
2020-08-25 11:39:39 +02:00
|
|
|
|
const needBlurCallback = needBlur ? () => {
|
|
|
|
|
//void img.offsetLeft; // reflow
|
|
|
|
|
img.style.opacity = '';
|
2020-09-23 22:29:53 +02:00
|
|
|
|
|
|
|
|
|
if(thumb) {
|
|
|
|
|
window.setTimeout(() => {
|
|
|
|
|
thumb.remove();
|
|
|
|
|
}, 200);
|
|
|
|
|
}
|
2020-08-25 11:39:39 +02:00
|
|
|
|
} : undefined;
|
|
|
|
|
renderImageFromUrl(img, url, needBlurCallback);
|
2020-04-15 22:55:08 +02:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
let thumb: HTMLImageElement;
|
|
|
|
|
const sizes = media.sizes || media.thumbs;
|
2020-08-28 21:53:10 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const willHaveThumb = !isDownloaded && sizes && sizes[0].bytes;
|
|
|
|
|
if(willHaveThumb) {
|
|
|
|
|
thumb = new Image();
|
|
|
|
|
thumb.classList.add('media-image', 'thumbnail');
|
|
|
|
|
thumb.dataset.mid = '' + message.mid;
|
|
|
|
|
appPhotosManager.setAttachmentPreview(sizes[0].bytes, thumb, false, false);
|
|
|
|
|
div.append(thumb);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const needBlur = !isDownloaded || !willHaveThumb;
|
|
|
|
|
const img = new Image();
|
2020-05-18 03:21:58 +02:00
|
|
|
|
img.dataset.mid = '' + message.mid;
|
2020-06-16 22:48:08 +02:00
|
|
|
|
img.classList.add('media-image');
|
|
|
|
|
if(needBlur) img.style.opacity = '0';
|
|
|
|
|
div.append(img);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
if(isDownloaded || willHaveThumb) {
|
|
|
|
|
const promise = new Promise((resolve, reject) => {
|
|
|
|
|
(thumb || img).addEventListener('load', () => {
|
2020-05-18 03:21:58 +02:00
|
|
|
|
clearTimeout(timeout);
|
|
|
|
|
resolve();
|
|
|
|
|
});
|
|
|
|
|
|
2020-06-16 22:48:08 +02:00
|
|
|
|
const timeout = setTimeout(() => {
|
2020-09-23 22:29:53 +02:00
|
|
|
|
this.log('didn\'t load', thumb, media, isDownloaded, sizes);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
reject();
|
|
|
|
|
}, 1e3);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
promises.push(promise);
|
|
|
|
|
}
|
2020-08-28 21:53:10 +02:00
|
|
|
|
|
|
|
|
|
if(sizes?.length) {
|
|
|
|
|
if(isDownloaded) load();
|
|
|
|
|
else this.lazyLoadQueue.push({div, load});
|
|
|
|
|
}
|
2020-05-21 01:02:57 +02:00
|
|
|
|
|
|
|
|
|
elemsToAppend.push(div);
|
2020-04-15 22:55:08 +02:00
|
|
|
|
this.mediaDivsByIDs[message.mid] = div;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
case 'inputMessagesFilterDocument': {
|
|
|
|
|
sharedMediaDiv = this.sharedMedia.contentDocuments;
|
|
|
|
|
|
|
|
|
|
for(let message of messages) {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
let div = wrapDocument(message.media.document, true, false, message.mid);
|
2020-04-15 22:55:08 +02:00
|
|
|
|
elemsToAppend.push(div);
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
case 'inputMessagesFilterUrl': {
|
|
|
|
|
sharedMediaDiv = this.sharedMedia.contentLinks;
|
|
|
|
|
|
|
|
|
|
for(let message of messages) {
|
|
|
|
|
let webpage = message.media.webpage;
|
|
|
|
|
let div = document.createElement('div');
|
|
|
|
|
|
|
|
|
|
let previewDiv = document.createElement('div');
|
|
|
|
|
previewDiv.classList.add('preview');
|
|
|
|
|
|
|
|
|
|
//this.log('wrapping webpage', webpage);
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
previewDiv.innerText = (webpage.title || webpage.description || webpage.url || webpage.display_url).slice(0, 1);
|
|
|
|
|
previewDiv.classList.add('empty');
|
2020-04-15 22:55:08 +02:00
|
|
|
|
if(webpage.photo) {
|
2020-04-26 03:45:07 +02:00
|
|
|
|
let load = () => appPhotosManager.preloadPhoto(webpage.photo.id, appPhotosManager.choosePhotoSize(webpage.photo, 60, 60))
|
|
|
|
|
.then(() => {
|
2020-04-15 22:55:08 +02:00
|
|
|
|
if($rootScope.selectedPeerID != peerID) {
|
|
|
|
|
this.log.warn('peer changed');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
previewDiv.classList.remove('empty');
|
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
previewDiv.innerText = '';
|
2020-04-15 22:55:08 +02:00
|
|
|
|
renderImageFromUrl(previewDiv, webpage.photo.url);
|
|
|
|
|
});
|
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
this.lazyLoadQueue.push({div: previewDiv, load});
|
2020-04-15 22:55:08 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let title = webpage.rTitle || '';
|
|
|
|
|
let subtitle = webpage.rDescription || '';
|
|
|
|
|
let url = RichTextProcessor.wrapRichText(webpage.url || '');
|
|
|
|
|
|
|
|
|
|
if(!title) {
|
|
|
|
|
//title = new URL(webpage.url).hostname;
|
|
|
|
|
title = webpage.display_url.split('/', 1)[0];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
div.append(previewDiv);
|
|
|
|
|
div.insertAdjacentHTML('beforeend', `
|
2020-06-13 10:19:39 +02:00
|
|
|
|
<div class="title">${title}</button>
|
2020-04-15 22:55:08 +02:00
|
|
|
|
<div class="subtitle">${subtitle}</div>
|
|
|
|
|
<div class="url">${url}</div>
|
|
|
|
|
`);
|
|
|
|
|
|
|
|
|
|
if(div.innerText.trim().length) {
|
|
|
|
|
elemsToAppend.push(div);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
2020-04-25 03:17:50 +02:00
|
|
|
|
case 'inputMessagesFilterMusic': {
|
|
|
|
|
sharedMediaDiv = this.sharedMedia.contentAudio;
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-04-25 03:17:50 +02:00
|
|
|
|
for(let message of messages) {
|
2020-06-13 10:19:39 +02:00
|
|
|
|
let div = wrapAudio(message.media.document, true, message.mid);
|
2020-04-25 03:17:50 +02:00
|
|
|
|
elemsToAppend.push(div);
|
|
|
|
|
}
|
2020-04-15 22:55:08 +02:00
|
|
|
|
break;
|
2020-04-25 03:17:50 +02:00
|
|
|
|
}
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
|
|
|
|
default:
|
2020-05-20 16:25:23 +02:00
|
|
|
|
console.warn('death is my friend', messages);
|
|
|
|
|
break;
|
2020-04-15 22:55:08 +02:00
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
if(this.loadMutex) {
|
|
|
|
|
promises.push(this.loadMutex);
|
|
|
|
|
}
|
2020-09-01 15:12:52 +02:00
|
|
|
|
|
|
|
|
|
if(promises.length) {
|
|
|
|
|
await Promise.all(promises);
|
|
|
|
|
if(this.peerID != peerID) {
|
|
|
|
|
this.log.warn('peer changed');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
|
|
|
|
if(elemsToAppend.length) {
|
2020-05-06 03:03:31 +02:00
|
|
|
|
sharedMediaDiv.append(...elemsToAppend);
|
2020-04-15 22:55:08 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(sharedMediaDiv) {
|
2020-08-30 23:16:26 +02:00
|
|
|
|
const parent = sharedMediaDiv.parentElement;
|
|
|
|
|
Array.from(parent.children).slice(1).forEach(child => {
|
|
|
|
|
child.remove();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//this.contentContainer.classList.add('loaded');
|
|
|
|
|
|
2020-08-30 23:50:25 +02:00
|
|
|
|
if(!messages.length && !sharedMediaDiv.childElementCount) {
|
2020-08-30 23:16:26 +02:00
|
|
|
|
const div = document.createElement('div');
|
|
|
|
|
div.innerText = 'Nothing interesting here yet...';
|
|
|
|
|
div.classList.add('position-center', 'text-center', 'content-empty', 'no-select');
|
|
|
|
|
|
|
|
|
|
parent.append(div);
|
2020-04-15 22:55:08 +02:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
public loadSidebarMedia(single = false) {
|
2020-03-02 18:15:11 +01:00
|
|
|
|
if(testScroll/* || 1 == 1 */) {
|
2020-02-26 18:52:59 +01:00
|
|
|
|
return;
|
|
|
|
|
}
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-04-28 19:30:54 +02:00
|
|
|
|
this.log('loadSidebarMedia', single, this.peerID, this.loadSidebarMediaPromises);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
const peerID = this.peerID;
|
2020-02-06 16:43:07 +01:00
|
|
|
|
|
|
|
|
|
let typesToLoad = single ? [this.sharedMediaType] : this.sharedMediaTypes;
|
2020-04-08 17:46:43 +02:00
|
|
|
|
typesToLoad = typesToLoad.filter(type => !this.loadedAllMedia[type]);
|
|
|
|
|
if(!typesToLoad.length) return;
|
2020-05-06 03:03:31 +02:00
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
const loadCount = (appPhotosManager.windowH / 130 | 0) * 3; // that's good for all types
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
const historyStorage = this.historiesStorage[peerID] ?? (this.historiesStorage[peerID] = {});
|
2020-05-03 14:46:05 +02:00
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
const promises = typesToLoad.map(type => {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(this.loadSidebarMediaPromises[type]) return this.loadSidebarMediaPromises[type];
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
const history = historyStorage[type] ?? (historyStorage[type] = []);
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
|
|
|
|
// render from cache
|
2020-05-06 03:03:31 +02:00
|
|
|
|
if(history.length && this.usedFromHistory[type] < history.length) {
|
|
|
|
|
let messages: any[] = [];
|
|
|
|
|
let used = this.usedFromHistory[type];
|
|
|
|
|
|
|
|
|
|
do {
|
|
|
|
|
let ids = history.slice(used, used + loadCount);
|
|
|
|
|
this.log('loadSidebarMedia: will render from cache', used, history, ids, loadCount);
|
|
|
|
|
used += ids.length;
|
|
|
|
|
|
|
|
|
|
messages.push(...this.filterMessagesByType(ids, type));
|
|
|
|
|
} while(messages.length < loadCount && used < history.length);
|
|
|
|
|
|
|
|
|
|
// если перебор
|
|
|
|
|
if(messages.length > loadCount) {
|
|
|
|
|
let diff = messages.length - loadCount;
|
|
|
|
|
messages = messages.slice(0, messages.length - diff);
|
|
|
|
|
used -= diff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.usedFromHistory[type] = used;
|
2020-08-30 23:16:26 +02:00
|
|
|
|
//if(messages.length) {
|
2020-05-18 03:21:58 +02:00
|
|
|
|
return this.performSearchResult(messages, type);
|
2020-08-30 23:16:26 +02:00
|
|
|
|
//}
|
2020-05-06 03:03:31 +02:00
|
|
|
|
|
2020-04-28 19:30:54 +02:00
|
|
|
|
return Promise.resolve();
|
2020-04-15 22:55:08 +02:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
// заливать новую картинку сюда только после полной отправки!
|
|
|
|
|
let maxID = history[history.length - 1] || 0;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
let ids = !maxID && appMessagesManager.historiesStorage[peerID]
|
2020-03-01 18:26:25 +01:00
|
|
|
|
? appMessagesManager.historiesStorage[peerID].history.slice() : [];
|
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
maxID = !maxID && ids.length ? ids[ids.length - 1] : maxID;
|
2020-04-28 19:30:54 +02:00
|
|
|
|
this.log('loadSidebarMedia: search house of glass pre', type, ids, maxID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-15 22:55:08 +02:00
|
|
|
|
//let loadCount = history.length ? 50 : 15;
|
2020-04-08 17:46:43 +02:00
|
|
|
|
return this.loadSidebarMediaPromises[type] = appMessagesManager.getSearch(peerID, '', {_: type}, maxID, loadCount)
|
2020-02-06 16:43:07 +01:00
|
|
|
|
.then(value => {
|
|
|
|
|
ids = ids.concat(value.history);
|
|
|
|
|
history.push(...ids);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-06 03:03:31 +02:00
|
|
|
|
this.log('loadSidebarMedia: search house of glass', type, value, ids);
|
2020-04-08 17:46:43 +02:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if($rootScope.selectedPeerID != peerID) {
|
|
|
|
|
this.log.warn('peer changed');
|
|
|
|
|
return;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-04-15 22:55:08 +02:00
|
|
|
|
if(value.history.length < loadCount) {
|
|
|
|
|
this.loadedAllMedia[type] = true;
|
2020-03-01 18:26:25 +01:00
|
|
|
|
}
|
2020-05-06 03:03:31 +02:00
|
|
|
|
|
|
|
|
|
this.usedFromHistory[type] = history.length;
|
2020-04-08 17:46:43 +02:00
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
//if(ids.length) {
|
2020-05-18 03:21:58 +02:00
|
|
|
|
return this.performSearchResult(this.filterMessagesByType(ids, type), type);
|
2020-08-30 23:16:26 +02:00
|
|
|
|
//}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}, (err) => {
|
|
|
|
|
this.log.error('load error:', err);
|
2020-04-15 22:55:08 +02:00
|
|
|
|
}).then(() => {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.loadSidebarMediaPromises[type] = null;
|
|
|
|
|
});
|
|
|
|
|
});
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-03 14:46:05 +02:00
|
|
|
|
return Promise.all(promises);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
public cleanup() {
|
2020-02-08 12:58:22 +01:00
|
|
|
|
this.loadSidebarMediaPromises = {};
|
2020-04-08 17:46:43 +02:00
|
|
|
|
this.loadedAllMedia = {};
|
2020-05-18 03:21:58 +02:00
|
|
|
|
|
|
|
|
|
this.prevTabID = -1;
|
|
|
|
|
this.mediaDivsByIDs = {};
|
2020-05-20 16:25:23 +02:00
|
|
|
|
this.lazyLoadQueue.clear();
|
2020-04-28 19:30:54 +02:00
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.sharedMediaTypes.forEach(type => {
|
|
|
|
|
this.usedFromHistory[type] = 0;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.sharedMediaType = 'inputMessagesFilterPhotoVideo';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public cleanupHTML() {
|
2020-05-20 16:25:23 +02:00
|
|
|
|
//this.contentContainer.classList.remove('loaded');
|
2020-05-13 17:26:40 +02:00
|
|
|
|
|
2020-05-20 16:25:23 +02:00
|
|
|
|
//this.profileContentEl.parentElement.scrollTop = 0;
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.profileElements.bio.style.display = 'none';
|
|
|
|
|
this.profileElements.phone.style.display = 'none';
|
|
|
|
|
this.profileElements.username.style.display = 'none';
|
|
|
|
|
this.profileElements.notificationsRow.style.display = '';
|
|
|
|
|
this.profileElements.notificationsCheckbox.checked = true;
|
|
|
|
|
this.profileElements.notificationsStatus.innerText = 'Enabled';
|
|
|
|
|
|
|
|
|
|
if(this.urlsToRevoke.length) {
|
|
|
|
|
this.urlsToRevoke.forEach(url => {
|
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
|
});
|
|
|
|
|
this.urlsToRevoke.length = 0;
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
(Object.keys(this.sharedMedia) as ContentType[]).forEach(key => {
|
2020-05-18 03:21:58 +02:00
|
|
|
|
this.sharedMedia[key].innerHTML = '';
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-08-30 23:16:26 +02:00
|
|
|
|
const inputFilter = contentToSharedMap[key];
|
|
|
|
|
if(!this.historiesStorage[this.peerID] || !this.historiesStorage[this.peerID][inputFilter]) {
|
|
|
|
|
const parent = this.sharedMedia[key].parentElement;
|
2020-09-23 22:29:53 +02:00
|
|
|
|
if(!testScroll) {
|
|
|
|
|
if(!parent.querySelector('.preloader')) {
|
|
|
|
|
putPreloader(parent, true);
|
|
|
|
|
}
|
2020-04-14 17:46:31 +02:00
|
|
|
|
}
|
2020-08-30 23:16:26 +02:00
|
|
|
|
|
|
|
|
|
const empty = parent.querySelector('.content-empty');
|
|
|
|
|
if(empty) {
|
|
|
|
|
empty.remove();
|
|
|
|
|
}
|
2020-05-18 03:21:58 +02:00
|
|
|
|
}
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
2020-04-15 22:55:08 +02:00
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
if(testScroll) {
|
2020-09-23 22:29:53 +02:00
|
|
|
|
for(let i = 0; i < 1500; ++i) {
|
2020-06-05 18:01:06 +02:00
|
|
|
|
let div = document.createElement('div');
|
2020-09-23 22:29:53 +02:00
|
|
|
|
div.insertAdjacentHTML('beforeend', `<img class="media-image" src="assets/img/camomile.jpg">`);
|
2020-06-05 18:01:06 +02:00
|
|
|
|
div.classList.add('media-item');
|
|
|
|
|
div.dataset.id = '' + (i / 3 | 0);
|
2020-09-23 22:29:53 +02:00
|
|
|
|
//div.innerText = '' + (i / 3 | 0);
|
2020-06-05 18:01:06 +02:00
|
|
|
|
this.sharedMedia.contentMedia.append(div);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
(this.profileTabs.firstElementChild.children[1] as HTMLLIElement).click(); // set media
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public setLoadMutex(promise: Promise<any>) {
|
|
|
|
|
this.loadMutex = promise;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public setPeer(peerID: number) {
|
|
|
|
|
this.peerID = peerID;
|
|
|
|
|
this.cleanup();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public fillProfileElements() {
|
|
|
|
|
let peerID = this.peerID = $rootScope.selectedPeerID;
|
|
|
|
|
|
|
|
|
|
this.cleanupHTML();
|
|
|
|
|
|
|
|
|
|
this.profileElements.avatar.setAttribute('peer', '' + peerID);
|
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
// username
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(peerID != $rootScope.myID) {
|
2020-02-10 04:37:17 +01:00
|
|
|
|
let username = appPeersManager.getPeerUsername(peerID);
|
|
|
|
|
if(username) {
|
|
|
|
|
setText(appPeersManager.getPeerUsername(peerID), this.profileElements.username);
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-27 08:21:16 +02:00
|
|
|
|
let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
|
|
|
|
|
if(dialog) {
|
2020-02-26 18:52:59 +01:00
|
|
|
|
let muted = false;
|
|
|
|
|
if(dialog.notify_settings && dialog.notify_settings.mute_until) {
|
|
|
|
|
muted = new Date(dialog.notify_settings.mute_until * 1000) > new Date();
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-26 18:52:59 +01:00
|
|
|
|
appImManager.setMutedState(muted);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
2020-04-15 22:55:08 +02:00
|
|
|
|
window.requestAnimationFrame(() => {
|
|
|
|
|
this.profileElements.notificationsRow.style.display = 'none';
|
2020-05-18 03:21:58 +02:00
|
|
|
|
});
|
2020-02-26 18:52:59 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-06-20 03:11:24 +02:00
|
|
|
|
//let membersLi = this.profileTabs.firstElementChild.children[0] as HTMLLIElement;
|
2020-02-08 12:58:22 +01:00
|
|
|
|
if(peerID > 0) {
|
2020-06-20 03:11:24 +02:00
|
|
|
|
//membersLi.style.display = 'none';
|
2020-05-20 16:25:23 +02:00
|
|
|
|
|
2020-02-08 12:58:22 +01:00
|
|
|
|
let user = appUsersManager.getUser(peerID);
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(user.phone && peerID != $rootScope.myID) {
|
2020-05-13 17:26:40 +02:00
|
|
|
|
setText(user.rPhone, this.profileElements.phone);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-08 12:58:22 +01:00
|
|
|
|
appProfileManager.getProfile(peerID, true).then(userFull => {
|
|
|
|
|
if(this.peerID != peerID) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.log.warn('peer changed');
|
|
|
|
|
return;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-05-18 03:21:58 +02:00
|
|
|
|
if(userFull.rAbout && peerID != $rootScope.myID) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
setText(userFull.rAbout, this.profileElements.bio);
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-15 17:47:14 +01:00
|
|
|
|
//this.log('userFull', userFull);
|
2020-02-06 16:43:07 +01:00
|
|
|
|
});
|
|
|
|
|
} else {
|
2020-06-20 03:11:24 +02:00
|
|
|
|
//membersLi.style.display = appPeersManager.isBroadcast(peerID) ? 'none' : '';
|
2020-02-08 12:58:22 +01:00
|
|
|
|
let chat = appPeersManager.getPeer(peerID);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
appProfileManager.getChatFull(chat.id).then((chatFull: any) => {
|
2020-02-08 12:58:22 +01:00
|
|
|
|
if(this.peerID != peerID) {
|
2020-02-06 16:43:07 +01:00
|
|
|
|
this.log.warn('peer changed');
|
|
|
|
|
return;
|
|
|
|
|
}
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-15 17:47:14 +01:00
|
|
|
|
//this.log('chatInfo res 2:', chatFull);
|
2020-03-01 18:26:25 +01:00
|
|
|
|
|
2020-02-06 16:43:07 +01:00
|
|
|
|
if(chatFull.about) {
|
|
|
|
|
setText(RichTextProcessor.wrapRichText(chatFull.about), this.profileElements.bio);
|
|
|
|
|
}
|
2020-02-26 18:52:59 +01:00
|
|
|
|
});
|
2020-02-06 16:43:07 +01:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-05 18:01:06 +02:00
|
|
|
|
const appSidebarRight = new AppSidebarRight();
|
2020-06-16 22:48:08 +02:00
|
|
|
|
// @ts-ignore
|
|
|
|
|
if(process.env.NODE_ENV != 'production') {
|
|
|
|
|
(window as any).appSidebarRight = appSidebarRight;
|
|
|
|
|
}
|
2020-06-05 18:01:06 +02:00
|
|
|
|
export default appSidebarRight;
|