Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
376 lines
12 KiB
376 lines
12 KiB
import { AppImManager } from "../lib/appManagers/appImManager"; |
|
import { AppMessagesManager } from "../lib/appManagers/appMessagesManager"; |
|
import { horizontalMenu } from "./misc"; |
|
import lottieLoader from "../lib/lottieLoader"; |
|
import Scrollable from "./scrollable"; |
|
import { findUpTag, whichChild } from "../lib/utils"; |
|
import { RichTextProcessor } from "../lib/richtextprocessor"; |
|
import appStickersManager, { MTStickerSet } from "../lib/appManagers/appStickersManager"; |
|
import apiManager from '../lib/mtproto/apiManager'; |
|
import CryptoWorker from '../lib/crypto/cryptoworker'; |
|
import LazyLoadQueue from "./lazyLoadQueue"; |
|
import { MTDocument, wrapSticker } from "./wrappers"; |
|
import appWebpManager from "../lib/appManagers/appWebpManager"; |
|
|
|
export const EMOTICONSSTICKERGROUP = 'emoticons-dropdown'; |
|
|
|
const initEmoticonsDropdown = (pageEl: HTMLDivElement, |
|
appImManager: AppImManager, appMessagesManager: AppMessagesManager, |
|
messageInput: HTMLDivElement, toggleEl: HTMLButtonElement, btnSend: HTMLButtonElement) => { |
|
let dropdown = pageEl.querySelector('.emoji-dropdown') as HTMLDivElement; |
|
dropdown.classList.add('active'); // need |
|
|
|
let lazyLoadQueue = new LazyLoadQueue(5); |
|
|
|
let container = pageEl.querySelector('.emoji-container .tabs-container') as HTMLDivElement; |
|
let tabs = pageEl.querySelector('.emoji-dropdown .emoji-tabs') as HTMLUListElement; |
|
horizontalMenu(tabs, container, (id) => { |
|
lottieLoader.checkAnimations(true, EMOTICONSSTICKERGROUP); |
|
|
|
if(id == 1 && stickersInit) { |
|
stickersInit(); |
|
} |
|
}, () => { |
|
lottieLoader.checkAnimations(false, EMOTICONSSTICKERGROUP); |
|
lazyLoadQueue.check(); // for stickers |
|
}); |
|
(tabs.children[0] as HTMLLIElement).click(); // set media |
|
|
|
let emoticonsMenuOnClick = (menu: HTMLUListElement, heights: number[], scroll: Scrollable, menuScroll?: Scrollable) => { |
|
menu.addEventListener('click', function(e) { |
|
let target = e.target as HTMLLIElement; |
|
target = findUpTag(target, 'LI'); |
|
|
|
let index = whichChild(target); |
|
let y = heights[index - 1/* 2 */] || 0; // 10 == padding .scrollable |
|
|
|
/* if(menuScroll) { |
|
menuScroll.container.scrollLeft = target.scrollWidth * index; |
|
} |
|
console.log('emoticonsMenuOnClick', menu.getBoundingClientRect(), target.getBoundingClientRect()); |
|
*/ |
|
scroll.onAddedBottom = () => { // привет, костыль, давно не виделись! |
|
scroll.container.scrollTop = y; |
|
scroll.onAddedBottom = () => {}; |
|
}; |
|
scroll.container.scrollTop = y; |
|
}); |
|
}; |
|
|
|
let emoticonsContentOnScroll = (menu: HTMLUListElement, heights: number[], prevCategoryIndex: number, scroll: HTMLDivElement, menuScroll?: Scrollable) => { |
|
let y = scroll.scrollTop; |
|
|
|
//console.log(heights, y); |
|
|
|
for(let i = 0; i < heights.length; ++i) { |
|
let height = heights[i]; |
|
if(y < height) { |
|
menu.children[prevCategoryIndex].classList.remove('active'); |
|
prevCategoryIndex = i/* + 1 */; |
|
menu.children[prevCategoryIndex].classList.add('active'); |
|
|
|
if(menuScroll) { |
|
if(i < heights.length - 4) { |
|
menuScroll.container.scrollLeft = (i - 3) * 50; |
|
} else { |
|
menuScroll.container.scrollLeft = i * 50; |
|
} |
|
} |
|
|
|
break; |
|
} |
|
} |
|
|
|
return prevCategoryIndex; |
|
}; |
|
|
|
{ |
|
let categories = ["Smileys & Emotion", "Animals & Nature", "Food & Drink", "Travel & Places", "Activities", "Objects", "Symbols", "Flags", "Skin Tones"]; |
|
let divs: { |
|
[category: string]: HTMLDivElement |
|
} = {}; |
|
|
|
let keyCategory = Config.Emoji.keyCategory; |
|
let sorted: { |
|
[category: string]: any[] |
|
} = {}; |
|
|
|
for(let unified in Config.Emoji.emoji) { |
|
// @ts-ignore |
|
let details = Config.Emoji.emoji[unified]; |
|
let category = details[keyCategory]; |
|
|
|
details.unified = unified; |
|
|
|
if(!sorted[category]) sorted[category] = []; |
|
sorted[category][details.sort_order] = details; |
|
} |
|
|
|
Object.keys(sorted).forEach(c => sorted[c].sort()); |
|
|
|
categories.pop(); |
|
delete sorted["Skin Tones"]; |
|
|
|
console.time('emojiParse'); |
|
for(let category in sorted) { |
|
let div = document.createElement('div'); |
|
div.classList.add('emoji-category'); |
|
|
|
let emojis = sorted[category]; |
|
emojis.forEach(details => { |
|
let emoji = details.unified; |
|
//let emoji = (details.unified as string).split('-') |
|
//.reduce((prev, curr) => prev + String.fromCodePoint(parseInt(curr, 16)), ''); |
|
|
|
let spanEmoji = document.createElement('span'); |
|
let kek = RichTextProcessor.wrapRichText(emoji); |
|
|
|
if(!kek.includes('emoji')) { |
|
console.log(details, emoji, kek, spanEmoji, emoji.length, new TextEncoder().encode(emoji)); |
|
return; |
|
} |
|
|
|
//console.log(kek); |
|
|
|
spanEmoji.innerHTML = kek; |
|
|
|
//spanEmoji = spanEmoji.firstElementChild as HTMLSpanElement; |
|
//spanEmoji.setAttribute('emoji', emoji); |
|
div.appendChild(spanEmoji); |
|
}); |
|
|
|
divs[category] = div; |
|
} |
|
console.timeEnd('emojiParse'); |
|
|
|
let heights: number[] = [0]; |
|
|
|
let contentEmojiDiv = document.getElementById('content-emoji') as HTMLDivElement; |
|
categories.forEach(category => { |
|
let div = divs[category]; |
|
|
|
if(!div) { |
|
console.error('no div by category:', category); |
|
} |
|
|
|
contentEmojiDiv.append(div); |
|
heights.push((heights[heights.length - 1] || 0) + div.scrollHeight); |
|
|
|
//console.log(div, div.scrollHeight); |
|
}); |
|
|
|
contentEmojiDiv.addEventListener('click', function(e) { |
|
let target = e.target as any; |
|
//if(target.tagName != 'SPAN') return; |
|
|
|
if(target.tagName == 'SPAN' && !target.classList.contains('emoji')) { |
|
target = target.firstElementChild; |
|
} else if(target.tagName == 'DIV') return; |
|
|
|
//console.log('contentEmoji div', target); |
|
|
|
/* if(!target.classList.contains('emoji')) { |
|
target = target.parentElement as HTMLSpanElement; |
|
|
|
if(!target.classList.contains('emoji')) { |
|
return; |
|
} |
|
} */ |
|
|
|
//messageInput.innerHTML += target.innerHTML; |
|
messageInput.innerHTML += target.outerHTML; |
|
|
|
btnSend.classList.add('tgico-send'); |
|
btnSend.classList.remove('tgico-microphone2'); |
|
}); |
|
|
|
let prevCategoryIndex = 1; |
|
let menu = contentEmojiDiv.nextElementSibling as HTMLUListElement; |
|
let emojiScroll = new Scrollable(contentEmojiDiv); |
|
emojiScroll.container.addEventListener('scroll', (e) => { |
|
prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, emojiScroll.container); |
|
}); |
|
//emojiScroll.setVirtualContainer(emojiScroll.container); |
|
|
|
emoticonsMenuOnClick(menu, heights, emojiScroll); |
|
} |
|
|
|
let stickersInit = () => { |
|
let contentStickersDiv = document.getElementById('content-stickers') as HTMLDivElement; |
|
//let stickersDiv = contentStickersDiv.querySelector('.os-content') as HTMLDivElement; |
|
|
|
let menuWrapper = contentStickersDiv.nextElementSibling as HTMLDivElement; |
|
let menu = menuWrapper.firstElementChild as HTMLUListElement; |
|
|
|
let menuScroll = new Scrollable(menuWrapper, true, false); |
|
|
|
let stickersDiv = document.createElement('div'); |
|
stickersDiv.classList.add('stickers-categories'); |
|
contentStickersDiv.append(stickersDiv); |
|
|
|
stickersDiv.addEventListener('mouseover', (e) => { |
|
let target = e.target as HTMLElement; |
|
|
|
if(target.tagName == 'CANVAS') { // turn on sticker |
|
let animation = lottieLoader.getAnimation(target.parentElement, EMOTICONSSTICKERGROUP); |
|
|
|
if(animation) { |
|
// @ts-ignore |
|
if(animation.currentFrame == animation.totalFrames - 1) { |
|
animation.goToAndPlay(0, true); |
|
} else { |
|
animation.play(); |
|
} |
|
} |
|
} |
|
}); |
|
|
|
stickersDiv.addEventListener('click', (e) => { |
|
let target = e.target as HTMLDivElement; |
|
target = findUpTag(target, 'DIV'); |
|
|
|
let fileID = target.getAttribute('file-id'); |
|
let document = appStickersManager.getSticker(fileID); |
|
|
|
if(document) { |
|
appMessagesManager.sendFile(appImManager.peerID, document, {isMedia: true}); |
|
appImManager.scroll.scrollTop = appImManager.scroll.scrollHeight; |
|
dropdown.classList.remove('active'); |
|
toggleEl.classList.remove('active'); |
|
} else { |
|
console.warn('got no sticker by id:', fileID); |
|
} |
|
}); |
|
|
|
let heights: number[] = []; |
|
|
|
let categoryPush = (categoryDiv: HTMLDivElement, docs: MTDocument[], prepend?: boolean) => { |
|
//if((docs.length % 5) != 0) categoryDiv.classList.add('not-full'); |
|
|
|
docs.forEach(doc => { |
|
let div = document.createElement('div'); |
|
wrapSticker(doc, div, undefined, lazyLoadQueue, EMOTICONSSTICKERGROUP, true); |
|
|
|
categoryDiv.append(div); |
|
}); |
|
|
|
/* if(prepend) { |
|
stickersDiv.prepend(categoryDiv); |
|
} else { |
|
stickersDiv.append(categoryDiv); |
|
} */ |
|
|
|
setTimeout(() => lazyLoadQueue.check(), 0); |
|
|
|
/* let scrollHeight = categoryDiv.scrollHeight; |
|
let prevHeight = heights[heights.length - 1] || 0; |
|
//console.log('scrollHeight', scrollHeight, categoryDiv, stickersDiv.childElementCount); |
|
if(prepend && heights.length) {// all stickers loaded faster than recent |
|
heights.forEach((h, i) => heights[i] += scrollHeight); |
|
|
|
return heights.unshift(scrollHeight) - 1; |
|
} */ |
|
|
|
heights.length = 0; |
|
Array.from(stickersDiv.children).forEach((div, i) => { |
|
heights[i] = (heights[i - 1] || 0) + div.scrollHeight; |
|
}); |
|
|
|
//stickersScroll.onScroll(); |
|
|
|
//return heights.push(prevHeight + scrollHeight) - 1; |
|
}; |
|
|
|
apiManager.invokeApi('messages.getRecentStickers', {flags: 0, hash: 0}).then((res) => { |
|
let stickers: { |
|
_: string, |
|
hash: number, |
|
packs: any[], |
|
stickers: MTDocument[], |
|
dates: number[] |
|
} = res as any; |
|
|
|
let categoryDiv = document.createElement('div'); |
|
categoryDiv.classList.add('sticker-category'); |
|
|
|
stickersDiv.prepend(categoryDiv); |
|
|
|
categoryPush(categoryDiv, stickers.stickers, true); |
|
}); |
|
|
|
apiManager.invokeApi('messages.getAllStickers', {hash: 0}).then((res) => { |
|
let stickers: { |
|
_: 'messages.allStickers', |
|
hash: number, |
|
sets: Array<MTStickerSet> |
|
} = res as any; |
|
|
|
stickers.sets/* .slice(0, 10) */.forEach(async(set) => { |
|
let categoryDiv = document.createElement('div'); |
|
categoryDiv.classList.add('sticker-category'); |
|
|
|
let li = document.createElement('li'); |
|
li.classList.add('btn-icon'); |
|
|
|
menu.append(li); |
|
|
|
stickersDiv.append(categoryDiv); |
|
|
|
let stickerSet = await appStickersManager.getStickerSet(set); |
|
|
|
if(stickerSet.set.thumb) { |
|
let thumb = stickerSet.set.thumb; |
|
|
|
appStickersManager.getStickerSetThumb(stickerSet.set).then(async(blob) => { |
|
if(thumb.w == 1 && thumb.h == 1) { // means animated |
|
const reader = new FileReader(); |
|
|
|
reader.addEventListener('loadend', async(e) => { |
|
// @ts-ignore |
|
const text = e.srcElement.result; |
|
let json = await CryptoWorker.gzipUncompress<string>(text, true); |
|
|
|
let animation = await lottieLoader.loadAnimation({ |
|
container: li, |
|
loop: true, |
|
autoplay: false, |
|
animationData: JSON.parse(json) |
|
}, EMOTICONSSTICKERGROUP); |
|
}); |
|
|
|
reader.readAsArrayBuffer(blob); |
|
} else { |
|
let image = new Image(); |
|
//image.src = URL.createObjectURL(blob); |
|
appWebpManager.polyfillImage(image, blob); |
|
|
|
li.append(image); |
|
} |
|
}); |
|
} else { // as thumb will be used first sticker |
|
wrapSticker(stickerSet.documents[0], li as any, undefined, undefined, EMOTICONSSTICKERGROUP); // kostil |
|
} |
|
|
|
categoryPush(categoryDiv, stickerSet.documents); |
|
}); |
|
}); |
|
|
|
let prevCategoryIndex = 0; |
|
let stickersScroll = new Scrollable(contentStickersDiv); |
|
stickersScroll.container.addEventListener('scroll', (e) => { |
|
lazyLoadQueue.check(); |
|
lottieLoader.checkAnimations(); |
|
|
|
prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll.container, menuScroll); |
|
}); |
|
stickersScroll.setVirtualContainer(stickersDiv); |
|
|
|
emoticonsMenuOnClick(menu, heights, stickersScroll, menuScroll); |
|
|
|
stickersInit = null; |
|
}; |
|
|
|
return {dropdown, lazyLoadQueue}; |
|
}; |
|
|
|
export default initEmoticonsDropdown;
|
|
|