channel views & groups online & fix message images
This commit is contained in:
Eduard Kuzmenko
parent
b9b3fe6a76
commit
52db4564b7
@ -222,9 +222,9 @@ export class LazyLoadQueue {
|
||||
}
|
||||
|
||||
export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement, message: any, justLoader = true, preloader?: ProgressivePreloader, controls = true) {
|
||||
//if(!container.firstElementChild || container.firstElementChild.tagName != 'IMG') {
|
||||
let size = appPhotosManager.setAttachmentSize(doc, container);
|
||||
//}
|
||||
if(!container.firstElementChild || container.firstElementChild.tagName != 'IMG') {
|
||||
let size = appPhotosManager.setAttachmentSize(doc, container);
|
||||
}
|
||||
|
||||
let peerID = this.peerID ? this.peerID : this.currentMessageID;
|
||||
|
||||
@ -240,7 +240,7 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
|
||||
//return Promise.resolve();
|
||||
|
||||
if(!preloader) {
|
||||
preloader = new ProgressivePreloader(container, true);
|
||||
preloader = new ProgressivePreloader(container, false);
|
||||
}
|
||||
|
||||
let loadVideo = () => {
|
||||
@ -282,12 +282,15 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
|
||||
|
||||
video.append(source);
|
||||
container.append(video);
|
||||
|
||||
//container.style.width = '';
|
||||
//container.style.height = '';
|
||||
|
||||
preloader.detach();
|
||||
});
|
||||
};
|
||||
|
||||
if(doc.type == 'gif') {
|
||||
if(doc.type == 'gif' || true) { // extra fix
|
||||
return this.peerID ? this.loadMediaQueuePush(loadVideo) : loadVideo();
|
||||
} else { // if video
|
||||
let load = () => appPhotosManager.preloadPhoto(doc).then((blob) => {
|
||||
@ -301,7 +304,10 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
|
||||
/* image.style.height = doc.h + 'px';
|
||||
image.style.width = doc.w + 'px'; */
|
||||
|
||||
|
||||
/* if(justLoader) { // extra fix
|
||||
justLoader = false;
|
||||
controls = false;
|
||||
} */
|
||||
|
||||
if(!justLoader) {
|
||||
return loadVideo();
|
||||
@ -555,10 +561,10 @@ export function wrapPhoto(this: AppImManager, photo: any, message: any, containe
|
||||
|
||||
preloader.detach();
|
||||
|
||||
image.style.width = '';
|
||||
image.style.height = '';
|
||||
container.style.width = '';
|
||||
container.style.height = '';
|
||||
//image.style.width = '';
|
||||
//image.style.height = '';
|
||||
//container.style.width = '';
|
||||
//container.style.height = '';
|
||||
});
|
||||
|
||||
console.log('wrapPhoto', load, container, image);
|
||||
|
||||
@ -101,7 +101,7 @@ export class AppDialogsManager {
|
||||
div.classList.remove('tgico-savedmessages');
|
||||
div.style.fontSize = '';
|
||||
|
||||
let abbrSplitted = (typeof(peerID) != 'string' ? appPeersManager.getPeerTitle(peerID) : peerID).split(' ');
|
||||
let abbrSplitted = (typeof(peerID) != 'string' ? appPeersManager.getPeerTitle(peerID, true) : peerID).split(' ');
|
||||
let abbr = (abbrSplitted.length == 2 ?
|
||||
abbrSplitted[0][0] + abbrSplitted[1][0] :
|
||||
abbrSplitted[0][0]).toUpperCase();
|
||||
@ -413,7 +413,7 @@ export class AppDialogsManager {
|
||||
//console.log('trying to load photo for:', title);
|
||||
this.loadDialogPhoto(avatarDiv, dialog.peerID, true);
|
||||
|
||||
titleSpan.innerText = title;
|
||||
titleSpan.innerHTML = title;
|
||||
//p.classList.add('')
|
||||
|
||||
let span = document.createElement('span');
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import apiManager from '../mtproto/apiManager';
|
||||
import { $rootScope, isElementInViewport, numberWithCommas, findUpClassName } from "../utils";
|
||||
import { $rootScope, isElementInViewport, numberWithCommas, findUpClassName, formatNumber } from "../utils";
|
||||
import appUsersManager from "./appUsersManager";
|
||||
import appMessagesManager from "./appMessagesManager";
|
||||
import appPeersManager from "./appPeersManager";
|
||||
@ -138,8 +138,8 @@ class ChatInput {
|
||||
if(this.lastUrl != url) return;
|
||||
console.log(webpage);
|
||||
|
||||
appImManager.replyElements.titleEl.innerText = webpage.site_name || webpage.title || '';
|
||||
appImManager.replyElements.subtitleEl.innerText = webpage.description || webpage.url || '';
|
||||
appImManager.replyElements.titleEl.innerHTML = RichTextProcessor.wrapEmojiText(webpage.site_name || webpage.title || '');
|
||||
appImManager.replyElements.subtitleEl.innerHTML = RichTextProcessor.wrapEmojiText(webpage.description || webpage.url || '');
|
||||
appImManager.replyElements.container.classList.add('active');
|
||||
appImManager.replyToMsgID = 0;
|
||||
appImManager.noWebPage = false;
|
||||
@ -195,9 +195,7 @@ class ChatInput {
|
||||
// console.log('messageInput paste', text);
|
||||
let entities = RichTextProcessor.parseEntities(text);
|
||||
|
||||
text = RichTextProcessor.wrapRichText(text, {
|
||||
entities: entities.filter(e => e._ == 'messageEntityEmoji')
|
||||
});
|
||||
text = RichTextProcessor.wrapEmojiText(text);
|
||||
|
||||
// console.log('messageInput paste after', text);
|
||||
|
||||
@ -340,6 +338,7 @@ export class AppImManager {
|
||||
|
||||
public loadMediaQueue: Array<() => Promise<void>> = [];
|
||||
private loadMediaQueuePromise: Promise<void[]> = null;
|
||||
private loadingMedia = 0;
|
||||
|
||||
public scroll: HTMLDivElement = null;
|
||||
public scrollPosition: ScrollPosition = null;
|
||||
@ -445,7 +444,7 @@ export class AppImManager {
|
||||
this.log('setting pinned message', message);
|
||||
this.pinnedMessageContainer.setAttribute('data-mid', mid);
|
||||
this.pinnedMessageContainer.style.display = '';
|
||||
this.pinnedMessageContent.innerHTML = RichTextProcessor.wrapPlainText(message.message);
|
||||
this.pinnedMessageContent.innerHTML = RichTextProcessor.wrapEmojiText(message.message);
|
||||
}
|
||||
});
|
||||
|
||||
@ -482,7 +481,9 @@ export class AppImManager {
|
||||
bubble = findUpClassName(e.target, 'bubble');
|
||||
} catch(err) {}
|
||||
|
||||
if(target.tagName == 'VIDEO' && bubble && bubble.classList.contains('round')) {
|
||||
if(!bubble) return;
|
||||
|
||||
if(target.tagName == 'VIDEO' && bubble.classList.contains('round')) {
|
||||
let video = target as HTMLVideoElement;
|
||||
video.currentTime = 0;
|
||||
if(video.paused) {
|
||||
@ -506,11 +507,15 @@ export class AppImManager {
|
||||
|
||||
appMediaViewer.openMedia(message, true);
|
||||
} else if(target.tagName == 'DIV') {
|
||||
if(bubble) {
|
||||
if(bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) {
|
||||
let originalMessageID = +bubble.getAttribute('data-original-mid');
|
||||
this.setPeer(this.peerID, originalMessageID);
|
||||
}
|
||||
let isReplyClick = false;
|
||||
|
||||
try {
|
||||
isReplyClick = !!findUpClassName(e.target, 'box');
|
||||
} catch(err) {}
|
||||
|
||||
if(isReplyClick && bubble.classList.contains('is-reply')/* || bubble.classList.contains('forwarded') */) {
|
||||
let originalMessageID = +bubble.getAttribute('data-original-mid');
|
||||
this.setPeer(this.peerID, originalMessageID);
|
||||
}
|
||||
}
|
||||
|
||||
@ -614,7 +619,7 @@ export class AppImManager {
|
||||
|
||||
if(this.peerID > 0) {
|
||||
let title = appPeersManager.getPeerTitle(this.peerID);
|
||||
this.popupDeleteMessage.deleteBothBtn.innerText = 'DELETE FOR ME AND ' + title.split(' ')[0];
|
||||
this.popupDeleteMessage.deleteBothBtn.innerHTML = 'DELETE FOR ME AND ' + title;
|
||||
} else {
|
||||
this.popupDeleteMessage.deleteBothBtn.innerText = 'DELETE FOR ALL';
|
||||
}
|
||||
@ -625,9 +630,9 @@ export class AppImManager {
|
||||
|
||||
this.contextMenu.querySelector('.menu-reply').addEventListener('click', () => {
|
||||
let message = appMessagesManager.getMessage(this.contextMenuMsgID);
|
||||
let title = appPeersManager.getPeerTitle(message.fromID).split(' ')[0];
|
||||
this.replyElements.titleEl.innerText = title;
|
||||
this.replyElements.subtitleEl.innerText = message.message || '';
|
||||
let title = appPeersManager.getPeerTitle(message.fromID);
|
||||
this.replyElements.titleEl.innerHTML = title;
|
||||
this.replyElements.subtitleEl.innerHTML = message.message ? RichTextProcessor.wrapEmojiText(message.message) : '';
|
||||
this.replyElements.container.classList.add('active');
|
||||
this.replyToMsgID = this.contextMenuMsgID;
|
||||
});
|
||||
@ -701,14 +706,24 @@ export class AppImManager {
|
||||
this.loadMediaQueueProcess();
|
||||
}
|
||||
|
||||
public async loadMediaQueueProcess(): Promise<void[]> {
|
||||
if(this.loadMediaQueuePromise/* || 1 == 1 */) return this.loadMediaQueuePromise;
|
||||
public async loadMediaQueueProcessOld(): Promise<void[]> {
|
||||
if(this.loadMediaQueuePromise /* || 1 == 1 */) return this.loadMediaQueuePromise;
|
||||
|
||||
let woo = this.loadMediaQueue.splice(-5, 5).reverse().map(f => f());
|
||||
|
||||
if(woo.length) {
|
||||
this.log('Will load more media:', woo.length);
|
||||
|
||||
woo.forEach(async(promise) => {
|
||||
try {
|
||||
await promise;
|
||||
} catch(err) {
|
||||
this.log.error('loadMediaQueue error:', err);
|
||||
}
|
||||
|
||||
this.loadingMedia--;
|
||||
});
|
||||
|
||||
try {
|
||||
this.loadMediaQueuePromise = Promise.all(woo);
|
||||
await this.loadMediaQueuePromise;
|
||||
@ -723,6 +738,26 @@ export class AppImManager {
|
||||
return this.loadMediaQueuePromise;
|
||||
}
|
||||
|
||||
public async loadMediaQueueProcess(): Promise<void[]> {
|
||||
if(this.loadingMedia >= 5) return;
|
||||
|
||||
let item = this.loadMediaQueue.pop();
|
||||
if(item) {
|
||||
this.loadingMedia++;
|
||||
|
||||
let promise = item();
|
||||
try {
|
||||
await promise;
|
||||
} catch(err) {
|
||||
this.log.error('loadMediaQueue error:', err);
|
||||
}
|
||||
|
||||
this.loadingMedia--;
|
||||
}
|
||||
|
||||
if(this.loadMediaQueue.length) return this.loadMediaQueueProcess();
|
||||
}
|
||||
|
||||
public updateStatus() {
|
||||
if(!this.myID) return Promise.resolve();
|
||||
|
||||
@ -771,7 +806,7 @@ export class AppImManager {
|
||||
}
|
||||
|
||||
// load more history
|
||||
if(!this.getHistoryPromise && !this.getHistoryTimeout /* && false */) {
|
||||
if(!this.getHistoryPromise && !this.getHistoryTimeout && !testScroll) {
|
||||
this.getHistoryTimeout = setTimeout(() => { // must be
|
||||
let history = Object.keys(this.bubbles).map(id => +id).sort();
|
||||
|
||||
@ -853,18 +888,32 @@ export class AppImManager {
|
||||
let isChannel = appPeersManager.isChannel(this.peerID) && !appPeersManager.isMegagroup(this.peerID);
|
||||
|
||||
this.log('setPeerStatus', chat);
|
||||
// will redirect if wrong
|
||||
appProfileManager.getChatFull(chat.id).then((res: any) => {
|
||||
this.log('chatInfo res:', res);
|
||||
|
||||
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;
|
||||
|
||||
if(res.pinned_msg_id) { // request pinned message
|
||||
this.pinnedMsgID = res.pinned_msg_id;
|
||||
appMessagesManager.wrapSingleMessage(res.pinned_msg_id);
|
||||
let onlines = chatOnlines ? chatOnlines.onlines : 1;
|
||||
|
||||
this.log('chatInfo res:', chatInfo);
|
||||
|
||||
if(chatInfo.pinned_msg_id) { // request pinned message
|
||||
this.pinnedMsgID = chatInfo.pinned_msg_id;
|
||||
appMessagesManager.wrapSingleMessage(chatInfo.pinned_msg_id);
|
||||
}
|
||||
|
||||
let participants_count = res.participants_count || res.participants.participants.length;
|
||||
let participants_count = chatInfo.participants_count || chatInfo.participants.participants.length;
|
||||
let subtitle = numberWithCommas(participants_count) + ' ' + (isChannel ? 'subscribers' : 'members');
|
||||
|
||||
if(onlines > 1) {
|
||||
subtitle += ', ' + numberWithCommas(onlines) + ' online';
|
||||
}
|
||||
|
||||
this.subtitleEl.innerText = appSidebarRight.profileElements.subtitle.innerText = subtitle;
|
||||
});
|
||||
} else if(!appUsersManager.isBot(this.peerID)) { // user
|
||||
@ -1012,7 +1061,7 @@ export class AppImManager {
|
||||
|
||||
this.setPeerStatus();
|
||||
|
||||
this.titleEl.innerText = appSidebarRight.profileElements.name.innerText = dom.titleSpan.innerText;
|
||||
this.titleEl.innerHTML = appSidebarRight.profileElements.name.innerHTML = dom.titleSpan.innerHTML;
|
||||
|
||||
this.topbar.style.display = '';
|
||||
appSidebarRight.toggleSidebar(true);
|
||||
@ -1028,6 +1077,8 @@ export class AppImManager {
|
||||
|
||||
if(lastMsgID != dialog.top_message) {
|
||||
this.bubbles[lastMsgID].scrollIntoView();
|
||||
} else {
|
||||
this.scroll.scrollTop = this.scroll.scrollHeight;
|
||||
}
|
||||
} else if(dialog.top_message) { // add last message, bc in getHistory will load < max_id
|
||||
this.renderMessage(appMessagesManager.getMessage(dialog.top_message));
|
||||
@ -1126,25 +1177,30 @@ export class AppImManager {
|
||||
this.log('message to render:', message);
|
||||
|
||||
//messageDiv.innerText = message.message;
|
||||
|
||||
// bubble
|
||||
let bubble = document.createElement('div');
|
||||
bubble.classList.add('bubble');
|
||||
|
||||
this.bubbles[+message.mid] = bubble;
|
||||
|
||||
// time section
|
||||
|
||||
let date = new Date(message.date * 1000);
|
||||
let time = ('0' + date.getHours()).slice(-2) +
|
||||
':' + ('0' + date.getMinutes()).slice(-2);
|
||||
|
||||
if(message.views) {
|
||||
bubble.classList.add('channel-post');
|
||||
time = formatNumber(message.views, 1) + ' <i class="tgico-channelviews"></i> ' + time;
|
||||
}
|
||||
|
||||
let timeSpan = document.createElement('span');
|
||||
timeSpan.classList.add('time');
|
||||
|
||||
let timeInner = document.createElement('div');
|
||||
timeInner.classList.add('inner', 'tgico');
|
||||
timeInner.innerText = time;
|
||||
|
||||
// bubble
|
||||
let bubble = document.createElement('div');
|
||||
bubble.classList.add('bubble');
|
||||
|
||||
this.bubbles[+message.mid] = bubble;
|
||||
timeInner.innerHTML = time;
|
||||
|
||||
let richText = RichTextProcessor.wrapRichText(message.message, {
|
||||
entities: message.totalEntities
|
||||
@ -1182,6 +1238,7 @@ export class AppImManager {
|
||||
timeSpan.appendChild(timeInner);
|
||||
messageDiv.append(timeSpan);
|
||||
bubble.prepend(messageDiv);
|
||||
//bubble.prepend(timeSpan, messageDiv); // that's bad
|
||||
|
||||
if(our) {
|
||||
if(message.pFlags.unread) this.unreadOut.push(message.mid);
|
||||
@ -1287,8 +1344,10 @@ export class AppImManager {
|
||||
doc = webpage.document;
|
||||
|
||||
if(doc.type == 'gif' || doc.type == 'video') {
|
||||
bubble.classList.add('video');
|
||||
wrapVideo.call(this, doc, preview, message);
|
||||
//if(doc.size <= 20e6) {
|
||||
bubble.classList.add('video');
|
||||
wrapVideo.call(this, doc, preview, message);
|
||||
//}
|
||||
} else {
|
||||
doc = null;
|
||||
}
|
||||
@ -1307,7 +1366,7 @@ export class AppImManager {
|
||||
|
||||
nameEl.setAttribute('target', '_blank');
|
||||
nameEl.href = webpage.url || '#';
|
||||
nameEl.innerText = webpage.site_name || '';
|
||||
nameEl.innerHTML = webpage.site_name ? RichTextProcessor.wrapEmojiText(webpage.site_name) : '';
|
||||
|
||||
if(webpage.description) {
|
||||
textDiv.innerHTML = RichTextProcessor.wrapRichText(webpage.description);
|
||||
@ -1318,7 +1377,8 @@ export class AppImManager {
|
||||
quote.append(nameEl, titleDiv, textDiv);
|
||||
box.append(quote);
|
||||
|
||||
bubble.prepend(box);
|
||||
//bubble.prepend(box);
|
||||
bubble.prepend(timeSpan, box);
|
||||
|
||||
//this.log('night running', bubble.scrollHeight);
|
||||
|
||||
@ -1361,7 +1421,7 @@ export class AppImManager {
|
||||
this.loadMediaQueuePush(load);
|
||||
|
||||
break;
|
||||
} else if(doc.mime_type == 'video/mp4') {
|
||||
} else if(doc.mime_type == 'video/mp4' && doc.size <= 20e6) {
|
||||
this.log('never get free 2', doc);
|
||||
|
||||
if(doc.type == 'round') {
|
||||
@ -1414,7 +1474,7 @@ export class AppImManager {
|
||||
if(!bubble.classList.contains('sticker')) {
|
||||
let nameDiv = document.createElement('div');
|
||||
nameDiv.classList.add('name');
|
||||
nameDiv.innerText = 'Forwarded from ' + title;
|
||||
nameDiv.innerHTML = 'Forwarded from ' + title;
|
||||
bubble.append(nameDiv);
|
||||
}
|
||||
} else {
|
||||
@ -1455,7 +1515,7 @@ export class AppImManager {
|
||||
}
|
||||
}
|
||||
|
||||
nameEl.innerText = originalPeerTitle;
|
||||
nameEl.innerHTML = originalPeerTitle;
|
||||
textDiv.innerHTML = originalText;
|
||||
|
||||
quote.append(nameEl, textDiv);
|
||||
@ -1484,7 +1544,7 @@ export class AppImManager {
|
||||
if(!bubble.classList.contains('sticker') && (peerID < 0 && peerID != message.fromID)) {
|
||||
let nameDiv = document.createElement('div');
|
||||
nameDiv.classList.add('name');
|
||||
nameDiv.innerText = title;
|
||||
nameDiv.innerHTML = title;
|
||||
bubble.append(nameDiv);
|
||||
} else if(!message.reply_to_mid) {
|
||||
bubble.classList.add('hide-name');
|
||||
@ -1615,6 +1675,12 @@ export class AppImManager {
|
||||
20 :
|
||||
(this.chatInner.parentElement.parentElement.scrollHeight) / 30 * 1.25 | 0;
|
||||
|
||||
if(testScroll) {
|
||||
loadCount = 1;
|
||||
//if(Object.keys(this.bubbles).length > 0)
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
console.time('render getHistory');
|
||||
console.time('render history total');
|
||||
|
||||
|
||||
@ -133,7 +133,7 @@ export class AppMediaViewer {
|
||||
|
||||
public openMedia(message: any, reverse = false) {
|
||||
this.log('openMedia doc:', message);
|
||||
let media = message.media.photo || message.media.document || message.media.webpage.photo || message.media.webpage.document;
|
||||
let media = message.media.photo || message.media.document || message.media.webpage.document || message.media.webpage.photo;
|
||||
|
||||
let isVideo = media.mime_type == 'video/mp4';
|
||||
|
||||
@ -153,7 +153,7 @@ export class AppMediaViewer {
|
||||
this.author.date.innerText = dateStr;
|
||||
|
||||
let name = appPeersManager.getPeerTitle(message.fromID);
|
||||
this.author.nameEl.innerText = name;
|
||||
this.author.nameEl.innerHTML = name;
|
||||
|
||||
if(message.message) {
|
||||
this.content.caption.innerHTML = RichTextProcessor.wrapRichText(message.message, {
|
||||
@ -174,9 +174,17 @@ export class AppMediaViewer {
|
||||
//this.preloader.setProgress(75);
|
||||
|
||||
this.log('will wrap video');
|
||||
|
||||
|
||||
appPhotosManager.setAttachmentSize(media, container, appPhotosManager.windowW, appPhotosManager.windowH);
|
||||
wrapVideo.call(this, media, container, message, false, this.preloader).then(() => {
|
||||
if(this.currentMessageID != message.mid) {
|
||||
this.log.warn('media viewer changed video');
|
||||
return;
|
||||
}
|
||||
|
||||
container.classList.remove('loading');
|
||||
container.style.width = '';
|
||||
container.style.height = '';
|
||||
});
|
||||
} else {
|
||||
let size = appPhotosManager.setAttachmentSize(media.id, container, appPhotosManager.windowW, appPhotosManager.windowH);
|
||||
@ -206,6 +214,8 @@ export class AppMediaViewer {
|
||||
container.style.height = '';
|
||||
|
||||
this.preloader.detach();
|
||||
}).catch(err => {
|
||||
this.log.error(err);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import appUsersManager from "./appUsersManager";
|
||||
import appChatsManager from "./appChatsManager";
|
||||
import { isObject } from "../utils";
|
||||
import { RichTextProcessor } from "../richtextprocessor";
|
||||
|
||||
const AppPeersManager = {
|
||||
getPeerPhoto: (peerID: number) => {
|
||||
@ -20,7 +21,7 @@ const AppPeersManager = {
|
||||
return false;
|
||||
},
|
||||
|
||||
getPeerTitle: (peerID: number | any) => {
|
||||
getPeerTitle: (peerID: number | any, plainText = false) => {
|
||||
let peer: any = {};
|
||||
if(!isObject(peerID)) {
|
||||
peer = AppPeersManager.getPeer(peerID);
|
||||
@ -37,7 +38,7 @@ const AppPeersManager = {
|
||||
title = peer.title;
|
||||
}
|
||||
|
||||
return title;
|
||||
return plainText ? title : RichTextProcessor.wrapEmojiText(title);
|
||||
},
|
||||
|
||||
getOutputPeer: (peerID: number) => {
|
||||
|
||||
@ -159,7 +159,7 @@ export class AppPhotosManager {
|
||||
}
|
||||
}
|
||||
|
||||
public setAttachmentSize(photoID: any, div: HTMLDivElement, w = 380, h = 380, isSticker = false) {
|
||||
public setAttachmentSize(photoID: any, div: HTMLDivElement, boxWidth = 380, boxHeight = 380, isSticker = false) {
|
||||
let photo: /* MTDocument | MTPhoto */any = null;
|
||||
|
||||
if(typeof(photoID) === 'string') {
|
||||
@ -169,7 +169,7 @@ export class AppPhotosManager {
|
||||
photo = photoID;
|
||||
}
|
||||
|
||||
let photoSize = this.choosePhotoSize(photo, w, h);
|
||||
let photoSize = this.choosePhotoSize(photo, boxWidth, boxHeight);
|
||||
//console.log('setAttachmentSize', photo, photo.sizes[0].bytes, div);
|
||||
|
||||
let sizes = photo.sizes || photo.thumbs;
|
||||
@ -177,16 +177,14 @@ export class AppPhotosManager {
|
||||
this.setAttachmentPreview(sizes[0].bytes, div, isSticker);
|
||||
}
|
||||
|
||||
if(photo._ == 'document' /* && photo.type != 'video' */ && photo.type != 'gif') {
|
||||
div.style.width = (photo.w || 512) + 'px';
|
||||
div.style.height = (photo.h || 512) + 'px';
|
||||
|
||||
/* if(div.lastElementChild) {
|
||||
div.lastElementChild.width
|
||||
} */
|
||||
if(photo._ == 'document' /* && photo.type != 'video' *//* && photo.type != 'gif' */) {
|
||||
let {w, h} = calcImageInBox(photo.w || 512, photo.h || 512, boxWidth, boxHeight);
|
||||
div.style.width = w + 'px';
|
||||
div.style.height = h + 'px';
|
||||
} else {
|
||||
div.style.width = (photoSize.w || 100) + 'px';
|
||||
div.style.height = (photoSize.h || 100) + 'px';
|
||||
let {w, h} = calcImageInBox(photoSize.w || 100, photoSize.h || 100, boxWidth, boxHeight);
|
||||
div.style.width = w + 'px';
|
||||
div.style.height = h + 'px';
|
||||
}
|
||||
|
||||
return photoSize;
|
||||
|
||||
@ -8,7 +8,7 @@ var EmojiHelper = {
|
||||
|
||||
var emojiData = Config.Emoji;
|
||||
var emojiIconSize = emojiData.img_size;
|
||||
var emojiSupported = navigator.userAgent.search(/OS X|iPhone|iPad|iOS|Android/i) != -1/* && false */,
|
||||
var emojiSupported = navigator.userAgent.search(/OS X|iPhone|iPad|iOS|Android/i) != -1 /* && false */,
|
||||
emojiCode;
|
||||
//var emojiRegExp = '\\u0023\\u20E3|\\u00a9|\\u00ae|\\u203c|\\u2049|\\u2139|[\\u2194-\\u2199]|\\u21a9|\\u21aa|\\u231a|\\u231b|\\u23e9|[\\u23ea-\\u23ec]|\\u23f0|\\u24c2|\\u25aa|\\u25ab|\\u25b6|\\u2611|\\u2614|\\u26fd|\\u2705|\\u2709|[\\u2795-\\u2797]|\\u27a1|\\u27b0|\\u27bf|\\u2934|\\u2935|[\\u2b05-\\u2b07]|\\u2b1b|\\u2b1c|\\u2b50|\\u2b55|\\u3030|\\u303d|\\u3297|\\u3299|[\\uE000-\\uF8FF\\u270A-\\u2764\\u2122\\u25C0\\u25FB-\\u25FE\\u2615\\u263a\\u2648-\\u2653\\u2660-\\u2668\\u267B\\u267F\\u2693\\u261d\\u26A0-\\u26FA\\u2708\\u2702\\u2601\\u260E]|[\\u2600\\u26C4\\u26BE\\u23F3\\u2764]|\\uD83D[\\uDC00-\\uDFFF]|\\uD83C[\\uDDE8-\\uDDFA\uDDEC]\\uD83C[\\uDDEA-\\uDDFA\uDDE7]|[0-9]\\u20e3|\\uD83C[\\uDC00-\\uDFFF]';
|
||||
//var emojiRegExp = '\\u00a9|\\u00ae|[\\u2000-\\u3300]|\\ud83c[\\ud000-\\udfff]|\\ud83d[\\ud000-\\udfff]|\\ud83e[\\ud000-\\udfff]';
|
||||
@ -718,6 +718,12 @@ function wrapPlainText(text, options = {}) {
|
||||
text.push(raw);
|
||||
return text.join('');
|
||||
}
|
||||
function wrapEmojiText(text) {
|
||||
if(!text) return '';
|
||||
|
||||
let entities = parseEntities(text).filter(e => e._ == 'messageEntityEmoji');
|
||||
return wrapRichText(text, {entities});
|
||||
}
|
||||
function wrapUrl (url, unsafe) {
|
||||
if (!url.match(/^https?:\/\//i)) {
|
||||
url = 'http://' + url
|
||||
@ -773,6 +779,7 @@ let RichTextProcessor = {
|
||||
wrapPlainText: wrapPlainText,
|
||||
wrapDraftText: wrapDraftText,
|
||||
wrapUrl: wrapUrl,
|
||||
wrapEmojiText: wrapEmojiText,
|
||||
parseEntities: parseEntities,
|
||||
parseMarkdown: parseMarkdown,
|
||||
parseEmojis: parseEmojis,
|
||||
|
||||
@ -472,6 +472,18 @@ export function formatBytes(bytes, decimals = 2) {
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
export function formatNumber(bytes, decimals = 2) {
|
||||
if(bytes === 0) return '0';
|
||||
|
||||
const k = 1000;
|
||||
const dm = decimals < 0 ? 0 : decimals;
|
||||
const sizes = ['', 'K', 'M', 'B', 'T'];
|
||||
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + sizes[i];
|
||||
}
|
||||
|
||||
export function deepEqual(x, y) {
|
||||
const ok = Object.keys, tx = typeof x, ty = typeof y;
|
||||
return x && y && tx === 'object' && tx === ty ? (
|
||||
@ -551,11 +563,11 @@ export function calcImageInBox (imageW, imageH, boxW, boxH, noZooom) {
|
||||
var boxedImageW = boxW
|
||||
var boxedImageH = boxH
|
||||
|
||||
if ((imageW / imageH) > (boxW / boxH)) {
|
||||
if((imageW / imageH) > (boxW / boxH)) {
|
||||
boxedImageH = parseInt(imageH * boxW / imageW)
|
||||
}else {
|
||||
} else {
|
||||
boxedImageW = parseInt(imageW * boxH / imageH)
|
||||
if (boxedImageW > boxW) {
|
||||
if(boxedImageW > boxW) {
|
||||
boxedImageH = parseInt(boxedImageH * boxW / boxedImageW)
|
||||
boxedImageW = boxW
|
||||
}
|
||||
@ -566,7 +578,7 @@ export function calcImageInBox (imageW, imageH, boxW, boxH, noZooom) {
|
||||
// imageH = Math.floor(imageH / 2)
|
||||
// }
|
||||
|
||||
if (noZooom && boxedImageW >= imageW && boxedImageH >= imageH) {
|
||||
if(noZooom && boxedImageW >= imageW && boxedImageH >= imageH) {
|
||||
boxedImageW = imageW
|
||||
boxedImageH = imageH
|
||||
}
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
|
||||
#im-title {
|
||||
cursor: pointer;
|
||||
|
||||
span.emoji {
|
||||
vertical-align: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* .chat-background, #chat-closed {
|
||||
@ -196,6 +200,8 @@
|
||||
.attachment {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
max-width: fit-content!important;
|
||||
max-height: fit-content!important;
|
||||
|
||||
span.emoji {
|
||||
height: auto;
|
||||
@ -300,21 +306,23 @@
|
||||
}
|
||||
|
||||
img, video {
|
||||
object-fit: contain;
|
||||
/* object-fit: cover; */
|
||||
/* object-fit: contain; */
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.video {
|
||||
.attachment {
|
||||
//&.video {
|
||||
//.attachment {
|
||||
//max-height: fit-content;
|
||||
|
||||
img {
|
||||
/* width: 100%; */
|
||||
/* height: 100%; */
|
||||
}
|
||||
}
|
||||
}
|
||||
/*img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}*/
|
||||
//}
|
||||
//}
|
||||
|
||||
&.round.video {
|
||||
.attachment {
|
||||
@ -454,6 +462,13 @@
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: .75rem;
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
font-size: 1.15rem;
|
||||
margin-right: .4rem;
|
||||
margin-left: .1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -561,6 +576,10 @@
|
||||
padding: 0 .35rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble.channel-post .time {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
background-color: #ffffff;
|
||||
@ -693,101 +712,6 @@
|
||||
flex: 0 0 auto; /* Forces side columns to stay same width */
|
||||
position: relative;
|
||||
|
||||
.input-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 3.75rem);
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
|
||||
margin-right: .5rem;
|
||||
padding: 4.5px .5rem;
|
||||
/* padding: 3px .5rem 6px .5rem; */
|
||||
min-height: 3.25rem;
|
||||
max-height: 30rem;
|
||||
caret-color: $button-primary-background;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
width: 11px;
|
||||
height: 20px;
|
||||
background-repeat: no-repeat repeat;
|
||||
content: '';
|
||||
background-size: 11px 20px;
|
||||
right: -9px;
|
||||
background-image: url('../../assets/img/msg-tail-left.svg');
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
//min-height: inherit;
|
||||
}
|
||||
|
||||
.reply-wrapper {
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
transition: .2s all;
|
||||
height: 0px;
|
||||
|
||||
&.active {
|
||||
height: 39px;
|
||||
}
|
||||
|
||||
.reply {
|
||||
width: 100%;
|
||||
margin-left: .5rem;
|
||||
min-height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.new-message-wrapper {
|
||||
//padding: 4.5px 0;
|
||||
//padding-bottom: 4.5px;
|
||||
align-items: flex-end;
|
||||
|
||||
.btn-icon:before {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.input-message-container {
|
||||
width: 1%;
|
||||
max-height: inherit;
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
display: block;
|
||||
color: $placeholder-color;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
&.active {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
#input-message {
|
||||
background: none;
|
||||
border: none;
|
||||
@ -828,6 +752,101 @@
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.input-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 3.75rem);
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
|
||||
margin-right: .5rem;
|
||||
padding: 4.5px .5rem;
|
||||
/* padding: 3px .5rem 6px .5rem; */
|
||||
min-height: 3.25rem;
|
||||
max-height: 30rem;
|
||||
caret-color: $button-primary-background;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
width: 11px;
|
||||
height: 20px;
|
||||
background-repeat: no-repeat repeat;
|
||||
content: '';
|
||||
background-size: 11px 20px;
|
||||
right: -9px;
|
||||
background-image: url('../../assets/img/msg-tail-left.svg');
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
//min-height: inherit;
|
||||
}
|
||||
|
||||
.reply-wrapper {
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
transition: .2s all;
|
||||
height: 0px;
|
||||
|
||||
&.active {
|
||||
height: 39px;
|
||||
}
|
||||
|
||||
.reply {
|
||||
width: 100%;
|
||||
margin-left: .5rem;
|
||||
min-height: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.new-message-wrapper {
|
||||
//padding: 4.5px 0;
|
||||
//padding-bottom: 4.5px;
|
||||
align-items: flex-end;
|
||||
|
||||
.btn-icon:before {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.input-message-container {
|
||||
width: 1%;
|
||||
max-height: inherit;
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
display: block;
|
||||
color: $placeholder-color;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
&.active {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 24px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.pinned-message, .reply {
|
||||
cursor: pointer;
|
||||
@ -876,6 +895,13 @@
|
||||
white-space: nowrap;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 16px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
/* #chat-closed {
|
||||
|
||||
@ -132,6 +132,12 @@
|
||||
|
||||
.user-title {
|
||||
max-width: 80%;
|
||||
|
||||
.emoji {
|
||||
vertical-align: top;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-last-message {
|
||||
|
||||
@ -36,6 +36,11 @@
|
||||
font-size: 23px;
|
||||
font-weight: 500;
|
||||
margin: 3px 0;
|
||||
|
||||
span.emoji {
|
||||
vertical-align: inherit;
|
||||
min-width: min-content;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-subtitle {
|
||||
|
||||
@ -925,8 +925,10 @@ $width: 100px;
|
||||
|
||||
.emoji {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* width: 100%;
|
||||
height: 100%; */
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
vertical-align: middle;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user