|
|
|
@ -1,4 +1,4 @@ |
|
|
|
import { horizontalMenu, formatPhoneNumber, putPreloader } from "../../components/misc"; |
|
|
|
import { horizontalMenu, formatPhoneNumber, putPreloader, renderImageFromUrl } from "../../components/misc"; |
|
|
|
import Scrollable from '../../components/scrollable'; |
|
|
|
import Scrollable from '../../components/scrollable'; |
|
|
|
import { $rootScope } from "../utils"; |
|
|
|
import { $rootScope } from "../utils"; |
|
|
|
import appMessagesManager from "./appMessagesManager"; |
|
|
|
import appMessagesManager from "./appMessagesManager"; |
|
|
|
@ -67,6 +67,9 @@ class AppSidebarRight { |
|
|
|
[type: string]: number[] |
|
|
|
[type: string]: number[] |
|
|
|
} |
|
|
|
} |
|
|
|
} = {}; |
|
|
|
} = {}; |
|
|
|
|
|
|
|
public usedFromHistory: { |
|
|
|
|
|
|
|
[type: string]: number |
|
|
|
|
|
|
|
} = {}; |
|
|
|
|
|
|
|
|
|
|
|
private log = logger('SR'); |
|
|
|
private log = logger('SR'); |
|
|
|
|
|
|
|
|
|
|
|
@ -93,8 +96,8 @@ class AppSidebarRight { |
|
|
|
this.scroll = new Scrollable(this.sidebarEl, 'y', 1200, 'SR'); |
|
|
|
this.scroll = new Scrollable(this.sidebarEl, 'y', 1200, 'SR'); |
|
|
|
this.scroll.container.addEventListener('scroll', this.onSidebarScroll.bind(this)); |
|
|
|
this.scroll.container.addEventListener('scroll', this.onSidebarScroll.bind(this)); |
|
|
|
this.scroll.onScrolledBottom = () => { |
|
|
|
this.scroll.onScrolledBottom = () => { |
|
|
|
if(this.sharedMediaSelected && !this.scroll.hiddenElements.down.length |
|
|
|
if(this.sharedMediaSelected && !this.scroll.hiddenElements.down.length && this.sharedMediaSelected.childElementCount/* && false */) { |
|
|
|
&& this.sharedMediaSelected.childElementCount/* && false */) { |
|
|
|
this.log('onScrolledBottom will load media'); |
|
|
|
this.loadSidebarMedia(true); |
|
|
|
this.loadSidebarMedia(true); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
@ -145,8 +148,7 @@ class AppSidebarRight { |
|
|
|
|
|
|
|
|
|
|
|
let targets = ids.map(id => ({element: this.mediaDivsByIDs[id], mid: id})); |
|
|
|
let targets = ids.map(id => ({element: this.mediaDivsByIDs[id], mid: id})); |
|
|
|
|
|
|
|
|
|
|
|
appMediaViewer.openMedia(message, target, false, this.sidebarEl, |
|
|
|
appMediaViewer.openMedia(message, target, false, this.sidebarEl, targets.slice(idx + 1).reverse(), targets.slice(0, idx).reverse(), () => this.loadSidebarMedia(true)); |
|
|
|
targets.slice(idx + 1).reverse(), targets.slice(0, idx).reverse(), () => this.loadSidebarMedia(true)); |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
this.profileElements.notificationsCheckbox.addEventListener('change', () => { |
|
|
|
this.profileElements.notificationsCheckbox.addEventListener('change', () => { |
|
|
|
@ -154,12 +156,7 @@ class AppSidebarRight { |
|
|
|
appImManager.mutePeer(); |
|
|
|
appImManager.mutePeer(); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
|
window.addEventListener('resize', this.onSidebarScroll.bind(this)); |
|
|
|
setTimeout(() => { |
|
|
|
|
|
|
|
this.scroll.onScroll(); |
|
|
|
|
|
|
|
this.onSidebarScroll(); |
|
|
|
|
|
|
|
}, 0); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(testScroll) { |
|
|
|
if(testScroll) { |
|
|
|
let div = document.createElement('div'); |
|
|
|
let div = document.createElement('div'); |
|
|
|
@ -191,6 +188,7 @@ class AppSidebarRight { |
|
|
|
setTimeout(() => this.lazyLoadQueueSidebar.check(), 200); |
|
|
|
setTimeout(() => this.lazyLoadQueueSidebar.check(), 200); |
|
|
|
this.sidebarEl.classList.add('active'); |
|
|
|
this.sidebarEl.classList.add('active'); |
|
|
|
} else this.sidebarEl.classList.remove('active'); |
|
|
|
} else this.sidebarEl.classList.remove('active'); |
|
|
|
|
|
|
|
|
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -201,62 +199,9 @@ class AppSidebarRight { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
public loadSidebarMedia(single = false) { |
|
|
|
public performSearchResult(ids: number[], type: string) { |
|
|
|
if(testScroll/* || 1 == 1 */) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//this.log('loadSidebarMedia', single, this.peerID);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let peerID = this.peerID; |
|
|
|
let peerID = this.peerID; |
|
|
|
|
|
|
|
|
|
|
|
let typesToLoad = single ? [this.sharedMediaType] : this.sharedMediaTypes; |
|
|
|
|
|
|
|
typesToLoad = typesToLoad.filter(type => !this.loadedAllMedia[type]); |
|
|
|
|
|
|
|
if(!typesToLoad.length) return; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(!this.historiesStorage[peerID]) this.historiesStorage[peerID] = {}; |
|
|
|
|
|
|
|
let historyStorage = this.historiesStorage[peerID]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.scroll.lock(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let promises = typesToLoad.map(type => { |
|
|
|
|
|
|
|
if(this.loadSidebarMediaPromises[type]) return this.loadSidebarMediaPromises[type]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(!historyStorage[type]) historyStorage[type] = []; |
|
|
|
|
|
|
|
let history = historyStorage[type]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// заливать новую картинку сюда только после полной отправки!
|
|
|
|
|
|
|
|
//let maxID = this.minMediaID[type] || 0;
|
|
|
|
|
|
|
|
let maxID = history[history.length - 1] || 0; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let ids = !maxID && appMessagesManager.historiesStorage[peerID] |
|
|
|
|
|
|
|
? appMessagesManager.historiesStorage[peerID].history.slice() : []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
maxID = !maxID && ids.length ? ids[ids.length - 1] : maxID; |
|
|
|
|
|
|
|
//this.log('search house of glass pre', type, ids, maxID);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let loadCount = history.length ? 50 : 15; |
|
|
|
|
|
|
|
return this.loadSidebarMediaPromises[type] = appMessagesManager.getSearch(peerID, '', {_: type}, maxID, loadCount) |
|
|
|
|
|
|
|
.then(value => { |
|
|
|
|
|
|
|
ids = ids.concat(value.history); |
|
|
|
|
|
|
|
history.push(...ids); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.log('search house of glass', type, value, ids, this.cleared); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(value.history.length < loadCount) { |
|
|
|
|
|
|
|
this.loadedAllMedia[type] = true; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if($rootScope.selectedPeerID != peerID) { |
|
|
|
|
|
|
|
this.log.warn('peer changed'); |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(this.cleared[type]) { |
|
|
|
|
|
|
|
ids = history; |
|
|
|
|
|
|
|
delete this.cleared[type]; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let sharedMediaDiv: HTMLDivElement; |
|
|
|
let sharedMediaDiv: HTMLDivElement; |
|
|
|
let messages: any[] = []; |
|
|
|
let messages: any[] = []; |
|
|
|
for(let mid of ids) { |
|
|
|
for(let mid of ids) { |
|
|
|
@ -313,6 +258,9 @@ class AppSidebarRight { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(photo && photo.url) { |
|
|
|
|
|
|
|
renderImageFromUrl(div, photo.url); |
|
|
|
|
|
|
|
} else { |
|
|
|
let url = URL.createObjectURL(blob); |
|
|
|
let url = URL.createObjectURL(blob); |
|
|
|
this.urlsToRevoke.push(url); |
|
|
|
this.urlsToRevoke.push(url); |
|
|
|
|
|
|
|
|
|
|
|
@ -321,6 +269,7 @@ class AppSidebarRight { |
|
|
|
img.onload = () => { |
|
|
|
img.onload = () => { |
|
|
|
div.style.backgroundImage = 'url(' + url + ')'; |
|
|
|
div.style.backgroundImage = 'url(' + url + ')'; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//div.style.backgroundImage = 'url(' + url + ')';
|
|
|
|
//div.style.backgroundImage = 'url(' + url + ')';
|
|
|
|
}); |
|
|
|
}); |
|
|
|
@ -394,10 +343,12 @@ class AppSidebarRight { |
|
|
|
return; |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let url = URL.createObjectURL(blob); |
|
|
|
renderImageFromUrl(previewDiv, webpage.photo.url); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* let url = URL.createObjectURL(blob); |
|
|
|
this.urlsToRevoke.push(url); |
|
|
|
this.urlsToRevoke.push(url); |
|
|
|
|
|
|
|
|
|
|
|
previewDiv.style.backgroundImage = 'url(' + url + ')'; |
|
|
|
previewDiv.style.backgroundImage = 'url(' + url + ')'; */ |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
this.lazyLoadQueueSidebar.push({div: previewDiv, load}); |
|
|
|
this.lazyLoadQueueSidebar.push({div: previewDiv, load}); |
|
|
|
@ -471,10 +422,79 @@ class AppSidebarRight { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.onSidebarScroll(); |
|
|
|
this.onSidebarScroll(); |
|
|
|
}).then(() => { |
|
|
|
} |
|
|
|
this.loadSidebarMediaPromises[type] = null; |
|
|
|
|
|
|
|
|
|
|
|
public loadSidebarMedia(single = false) { |
|
|
|
|
|
|
|
if(testScroll/* || 1 == 1 */) { |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.log('loadSidebarMedia', single, this.peerID); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let peerID = this.peerID; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let typesToLoad = single ? [this.sharedMediaType] : this.sharedMediaTypes; |
|
|
|
|
|
|
|
typesToLoad = typesToLoad.filter(type => !this.loadedAllMedia[type]); |
|
|
|
|
|
|
|
if(!typesToLoad.length) return; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let historyStorage = this.historiesStorage[peerID] ?? (this.historiesStorage[peerID] = {}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.scroll.lock(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let promises = typesToLoad.map(type => { |
|
|
|
|
|
|
|
if(this.loadSidebarMediaPromises[type]) return this.loadSidebarMediaPromises[type]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let history = historyStorage[type] ?? (historyStorage[type] = []); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let loadCount = (appPhotosManager.windowH / 130 | 0) * 3; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// render from cache
|
|
|
|
|
|
|
|
if(history.length && this.usedFromHistory[type] < history.length && this.cleared[type]) { |
|
|
|
|
|
|
|
let ids = history.slice(this.usedFromHistory[type], this.usedFromHistory[type] + loadCount); |
|
|
|
|
|
|
|
this.log('will render from cache', this.usedFromHistory[type], history, ids, loadCount); |
|
|
|
|
|
|
|
this.usedFromHistory[type] += ids.length; |
|
|
|
|
|
|
|
this.performSearchResult(ids, type); |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// заливать новую картинку сюда только после полной отправки!
|
|
|
|
|
|
|
|
//let maxID = this.minMediaID[type] || 0;
|
|
|
|
|
|
|
|
let maxID = history[history.length - 1] || 0; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let ids = !maxID && appMessagesManager.historiesStorage[peerID] |
|
|
|
|
|
|
|
? appMessagesManager.historiesStorage[peerID].history.slice() : []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
maxID = !maxID && ids.length ? ids[ids.length - 1] : maxID; |
|
|
|
|
|
|
|
this.log('search house of glass pre', type, ids, maxID); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//let loadCount = history.length ? 50 : 15;
|
|
|
|
|
|
|
|
return this.loadSidebarMediaPromises[type] = appMessagesManager.getSearch(peerID, '', {_: type}, maxID, loadCount) |
|
|
|
|
|
|
|
.then(value => { |
|
|
|
|
|
|
|
ids = ids.concat(value.history); |
|
|
|
|
|
|
|
history.push(...ids); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.log('search house of glass', type, value, ids, this.cleared); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if($rootScope.selectedPeerID != peerID) { |
|
|
|
|
|
|
|
this.log.warn('peer changed'); |
|
|
|
|
|
|
|
return; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(value.history.length < loadCount) { |
|
|
|
|
|
|
|
this.loadedAllMedia[type] = true; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(this.cleared[type]) { |
|
|
|
|
|
|
|
//ids = history;
|
|
|
|
|
|
|
|
delete this.cleared[type]; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(ids.length) { |
|
|
|
|
|
|
|
this.performSearchResult(ids, type); |
|
|
|
|
|
|
|
} |
|
|
|
}, (err) => { |
|
|
|
}, (err) => { |
|
|
|
this.log.error('load error:', err); |
|
|
|
this.log.error('load error:', err); |
|
|
|
|
|
|
|
}).then(() => { |
|
|
|
this.loadSidebarMediaPromises[type] = null; |
|
|
|
this.loadSidebarMediaPromises[type] = null; |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
@ -515,6 +535,8 @@ class AppSidebarRight { |
|
|
|
this.scroll.setVirtualContainer(null); |
|
|
|
this.scroll.setVirtualContainer(null); |
|
|
|
(this.profileTabs.children[1] as HTMLLIElement).click(); // set media
|
|
|
|
(this.profileTabs.children[1] as HTMLLIElement).click(); // set media
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//this.scroll.getScrollTopOffset();
|
|
|
|
|
|
|
|
|
|
|
|
this.loadSidebarMedia(true); |
|
|
|
this.loadSidebarMedia(true); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
@ -530,6 +552,7 @@ class AppSidebarRight { |
|
|
|
this.sharedMediaTypes.forEach(type => { |
|
|
|
this.sharedMediaTypes.forEach(type => { |
|
|
|
//this.minMediaID[type] = 0;
|
|
|
|
//this.minMediaID[type] = 0;
|
|
|
|
this.cleared[type] = true; |
|
|
|
this.cleared[type] = true; |
|
|
|
|
|
|
|
this.usedFromHistory[type] = 0; |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
let setText = (text: string, el: HTMLDivElement) => { |
|
|
|
let setText = (text: string, el: HTMLDivElement) => { |
|
|
|
@ -543,6 +566,8 @@ class AppSidebarRight { |
|
|
|
el.prepend(p); |
|
|
|
el.prepend(p); |
|
|
|
|
|
|
|
|
|
|
|
el.style.display = ''; |
|
|
|
el.style.display = ''; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//this.scroll.getScrollTopOffset();
|
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
@ -564,7 +589,10 @@ class AppSidebarRight { |
|
|
|
appImManager.setMutedState(muted); |
|
|
|
appImManager.setMutedState(muted); |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
|
|
|
|
window.requestAnimationFrame(() => { |
|
|
|
this.profileElements.notificationsRow.style.display = 'none'; |
|
|
|
this.profileElements.notificationsRow.style.display = 'none'; |
|
|
|
|
|
|
|
//this.scroll.getScrollTopOffset();
|
|
|
|
|
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if(peerID > 0) { |
|
|
|
if(peerID > 0) { |
|
|
|
@ -590,7 +618,7 @@ class AppSidebarRight { |
|
|
|
appMessagesManager.wrapSingleMessage(userFull.pinned_msg_id); |
|
|
|
appMessagesManager.wrapSingleMessage(userFull.pinned_msg_id); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.scroll.getScrollTopOffset(); |
|
|
|
//this.scroll.getScrollTopOffset();
|
|
|
|
}); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
let chat = appPeersManager.getPeer(peerID); |
|
|
|
let chat = appPeersManager.getPeer(peerID); |
|
|
|
@ -607,11 +635,11 @@ class AppSidebarRight { |
|
|
|
setText(RichTextProcessor.wrapRichText(chatFull.about), this.profileElements.bio); |
|
|
|
setText(RichTextProcessor.wrapRichText(chatFull.about), this.profileElements.bio); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.scroll.getScrollTopOffset(); |
|
|
|
//this.scroll.getScrollTopOffset();
|
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
this.scroll.getScrollTopOffset(); |
|
|
|
//this.scroll.getScrollTopOffset();
|
|
|
|
//this.loadSidebarMedia();
|
|
|
|
//this.loadSidebarMedia();
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
morethanwords
5 years ago