channel views & groups online & fix message images

src/components/misc.ts

@@ -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);

src/lib/appManagers/appDialogsManager.ts

@@ -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');

src/lib/appManagers/appImManager.ts

@@ -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);
-
-        if(res.pinned_msg_id) { // request pinned message
-          this.pinnedMsgID = res.pinned_msg_id;
-          appMessagesManager.wrapSingleMessage(res.pinned_msg_id);
+    
+      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;
+
+        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');
 

src/lib/appManagers/appMediaViewer.ts

@@ -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);
       });
     }
     

src/lib/appManagers/appPeersManager.ts

@@ -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) => {

src/lib/appManagers/appPhotosManager.ts

@@ -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;

src/lib/richtextprocessor.js

@@ -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,

src/lib/utils.js

@@ -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
   }

src/scss/partials/_chat.scss

@@ -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 {

src/scss/partials/_chatlist.scss

@@ -132,6 +132,12 @@
 
   .user-title {
     max-width: 80%;
+
+    .emoji {
+      vertical-align: top;
+      width: 18px;
+      height: 18px;
+    }
   }
 
   .user-last-message {

src/scss/partials/_sidebar.scss

@@ -36,6 +36,11 @@
     font-size: 23px;
     font-weight: 500;
     margin: 3px 0;
+
+    span.emoji {
+      vertical-align: inherit;
+      min-width: min-content;
+    }
   }
 
   .profile-subtitle {

src/scss/style.scss

@@ -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;