impoved search & media upload & scroll & preloaders

src/components/misc.ts

@@ -7,6 +7,7 @@ import appStickersManager from "../lib/appManagers/appStickersManager";
 import appDocsManager from "../lib/appManagers/appDocsManager";
 import {AppImManager} from "../lib/appManagers/appImManager";
 import {AppMediaViewer} from '../lib/appManagers/appMediaViewer';
+import { RichTextProcessor } from "../lib/richtextprocessor";
 
 export type MTDocument = {
   _: 'document',
@@ -24,7 +25,9 @@ export type MTDocument = {
   
   type?: string,
   h?: number,
-  w?: number
+  w?: number,
+  file_name?: string,
+  file?: File
 };
 
 export type MTPhotoSize = {
@@ -100,7 +103,7 @@ export function putPreloader(elem: Element) {
 }
 
 export class ProgressivePreloader {
-  private preloader: HTMLDivElement = null;
+  public preloader: HTMLDivElement = null;
   private circle: SVGCircleElement = null;
   private progress = 0;
   constructor(elem?: Element, private cancelable = true) {
@@ -108,9 +111,11 @@ export class ProgressivePreloader {
     this.preloader.classList.add('preloader-container');
     
     this.preloader.innerHTML = `
-    <svg xmlns="http://www.w3.org/2000/svg" class="preloader-circular" viewBox="25 25 50 50">
+    <div class="you-spin-me-round">
-    <circle class="preloader-path-new" cx="50" cy="50" r="23" fill="none" stroke-miterlimit="10"/>
+      <svg xmlns="http://www.w3.org/2000/svg" class="preloader-circular" viewBox="25 25 50 50">
-    </svg>`;
+        <circle class="preloader-path-new" cx="50" cy="50" r="23" fill="none" stroke-miterlimit="10"/>
+      </svg>
+    </div>`;
     
     if(cancelable) {
       this.preloader.innerHTML += `
@@ -122,15 +127,15 @@ export class ProgressivePreloader {
       this.preloader.classList.add('preloader-swing');
     }
     
-    this.circle = this.preloader.firstElementChild.firstElementChild as SVGCircleElement;
+    this.circle = this.preloader.firstElementChild.firstElementChild.firstElementChild as SVGCircleElement;
     
     if(elem) {
       this.attach(elem);
     }
   }
   
-  public attach(elem: Element) {
+  public attach(elem: Element, reset = true) {
-    if(this.cancelable) {
+    if(this.cancelable && reset) {
       this.setProgress(0);
     }
     
@@ -168,7 +173,7 @@ export class ProgressivePreloader {
     
     let totalLength = this.circle.getTotalLength();
     console.log('setProgress', (percents / 100 * totalLength));
-    this.circle.style.strokeDasharray = '' + (percents / 100 * totalLength);
+    this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * totalLength) + ', 200';
   }
 }
 
@@ -313,16 +318,17 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
   let iconDiv = document.createElement('div');
   iconDiv.classList.add('tgico-document');
   
-  let attributeFilename: {
+  let extSplitted = doc.file_name ? doc.file_name.split('.') : '';
-    _: 'documentAttributeFilename',
-    file_name: string
-  } = doc.attributes.find((a: any) => a._ == "documentAttributeFilename");
-  
-  let extSplitted = attributeFilename ? attributeFilename.file_name.split('.') : '';
   let ext = '';
   ext = extSplitted.length > 1 && Array.isArray(extSplitted) ? extSplitted.pop().toLowerCase() : 'file';
+
+  let ext2 = ext;
+  if(doc.type == 'photo') {
+    docDiv.classList.add('photo');
+    ext2 = `<img src="${URL.createObjectURL(doc.file)}">`;
+  }
   
-  let fileName = attributeFilename ? attributeFilename.file_name : 'Unknown.file';
+  let fileName = doc.file_name || 'Unknown.file';
   let size = formatBytes(doc.size);
   
   if(withTime) {
@@ -334,7 +340,7 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
   }
   
   docDiv.innerHTML = `
-  <div class="document-ico ext-${ext}">${ext}</div>
+  <div class="document-ico ext-${ext}">${ext2}</div>
   <div class="document-name">${fileName}</div>
   <div class="document-size">${size}</div>
   `;
@@ -347,18 +353,84 @@ export function scrollable(el: HTMLDivElement, x = false, y = true) {
   container.classList.add('scrollable');
   if(x) container.classList.add('scrollable-x');
   if(y) container.classList.add('scrollable-y');
+
+  let type = x ? 'width' : 'height';
+  let side = x ? 'left' : 'top';
+  let scrollType = x ? 'scrollWidth' : 'scrollHeight';
+  let scrollSide = x ? 'scrollLeft' : 'scrollTop';
   
   container.addEventListener('mouseover', () => {
-    container.classList.add('active');
+    resize();
+    /* container.classList.add('active');
     
     container.addEventListener('mouseout', () => {
       container.classList.remove('active');
-    }, {once: true});
+    }, {once: true}); */
+  });
+
+  let thumb = document.createElement('div');
+  thumb.className = 'scrollbar-thumb';
+
+  // @ts-ignore
+  thumb.style[type] = '30px';
+
+  let resize = () => {
+    // @ts-ignore
+    scrollHeight = container[scrollType];
+
+    let rect = container.getBoundingClientRect();
+
+    // @ts-ignore
+    height = rect[type];
+
+    if(!height || height == scrollHeight) {
+      thumbHeight = 0;
+
+      // @ts-ignore
+      thumb.style[type] = thumbHeight + 'px';
+      return;
+    }
+    //if(!height) return;
+
+    let divider = scrollHeight / height / 0.5;
+    thumbHeight = height / divider;
+
+    if(thumbHeight < 20) thumbHeight = 20;
+
+    // @ts-ignore
+    thumb.style[type] = thumbHeight + 'px';
+
+    // @ts-ignore
+    console.log('onresize', thumb.style[type], thumbHeight, height);
+  };
+
+  let scrollHeight = -1;
+  let height = 0;
+  let thumbHeight = 0;
+  window.addEventListener('resize', resize);
+  //container.addEventListener('DOMNodeInserted', resize);
+
+  container.addEventListener('scroll', (e) => {
+    // @ts-ignore
+    if(container[scrollType] != scrollHeight || thumbHeight == 0) {
+      resize();
+    }
+
+    // @ts-ignore
+    let value = container[scrollSide] / (scrollHeight - height) * 100;
+    let maxValue = 100 - (thumbHeight / height * 100);
+
+    console.log('onscroll', container.scrollHeight, thumbHeight, height, value, maxValue);
+
+    // @ts-ignore
+    thumb.style[side] = (value >= maxValue ? maxValue : value) + '%';
   });
   
   Array.from(el.children).forEach(c => container.append(c));
   
   el.append(container);//container.append(el);
+  container.parentElement.append(thumb);
+  resize();
   return container;
 }
 

src/components/pageIm.ts

@@ -176,9 +176,9 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
     let prevCategoryIndex = 1;
     let menu = contentEmojiDiv.nextElementSibling as HTMLUListElement;
     let emojiScroll = scrollable(contentEmojiDiv);
-    emojiScroll.onscroll = (e) => {
+    emojiScroll.addEventListener('scroll', (e) => {
       prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, emojiScroll);
-    };
+    });
 
     emoticonsMenuOnClick(menu, heights, emojiScroll);
   }
@@ -342,12 +342,12 @@ let initEmoticonsDropdown = (pageEl: HTMLDivElement,
 
     let prevCategoryIndex = 0;
     let stickersScroll = scrollable(contentStickersDiv);
-    stickersScroll.onscroll = (e) => {
+    stickersScroll.addEventListener('scroll', (e) => {
       lazyLoadQueue.check();
       lottieLoader.checkAnimations();
 
       prevCategoryIndex = emoticonsContentOnScroll(menu, heights, prevCategoryIndex, stickersScroll);
-    };
+    });
 
     emoticonsMenuOnClick(menu, heights, stickersScroll);
 
@@ -423,7 +423,7 @@ export default () => import('../lib/services').then(services => {
     }
   };
 
-  chatsScroll.onscroll = onScroll;
+  chatsScroll.addEventListener('scroll', onScroll);
   window.addEventListener('resize', () => {
     setTimeout(onScroll, 0);
   });

src/lib/appManagers/appDocsManager.ts

@@ -34,7 +34,7 @@ class AppDocsManager {
     apiDoc.attributes.forEach((attribute: any) => {
       switch(attribute._) {
         case 'documentAttributeFilename':
-          apiDoc.file_name = attribute.file_name
+          apiDoc.file_name = RichTextProcessor.wrapPlainText(attribute.file_name);
           break;
 
         case 'documentAttributeAudio':

src/lib/appManagers/appImManager.ts

@@ -15,6 +15,7 @@ import lottieLoader from "../lottieLoader";
 import appMediaViewer from "./appMediaViewer";
 import appSidebarLeft from "./appSidebarLeft";
 import appChatsManager from "./appChatsManager";
+import appMessagesIDsManager from "./appMessagesIDsManager";
 
 console.log('appImManager included!');
 
@@ -352,8 +353,16 @@ export class AppImManager {
       let max = Math.max(...readed);
       let min = Math.min(...readed);
 
+      if(this.peerID < 0) {
+        max = appMessagesIDsManager.getMessageIDInfo(max)[0];
+        min = appMessagesIDsManager.getMessageIDInfo(min)[0];
+      }
+
       //appMessagesManager.readMessages(readed);
-      appMessagesManager.readHistory(this.peerID, max, min);
+      appMessagesManager.readHistory(this.peerID, max, min).catch((err: any) => {
+        this.log.error('readHistory err:', err);
+        appMessagesManager.readHistory(this.peerID, max, min);
+      });
     }
 
     if(this.scroll.scrollHeight - (this.scroll.scrollTop + this.scroll.offsetHeight) == 0/* <= 5 */) {
@@ -422,7 +431,7 @@ export class AppImManager {
   public setScroll(scroll: HTMLDivElement) {
     this.scroll = scroll;
     this.scrollPosition = new ScrollPosition(this.chatInner);
-    this.scroll.onscroll = this.onScroll.bind(this);
+    this.scroll.addEventListener('scroll', this.onScroll.bind(this));
   }
 
   public setPeerStatus() {
@@ -759,6 +768,41 @@ export class AppImManager {
 
       let processingWebPage = false;
       switch(message.media._) {
+        case 'messageMediaPending': {
+          let pending = message.media;
+          let preloader = pending.preloader as ProgressivePreloader;
+
+          switch(pending.type) {
+            case 'photo': {
+              if(pending.size < 1e6) {
+                let img = new Image();
+                img.src = URL.createObjectURL(pending.file);
+  
+                attachmentDiv.append(img);
+                preloader.attach(attachmentDiv, false);
+
+                break;
+              }
+            }
+
+            case 'audio':
+            case 'document': {
+              let docDiv = wrapDocument(pending);
+
+              let icoDiv = docDiv.querySelector('.document-ico');
+              preloader.attach(icoDiv, false);
+
+              messageDiv.classList.remove('message-empty');
+              messageDiv.append(docDiv);
+              processingWebPage = true;
+              break;
+            }
+              
+          }
+
+          break;
+        }
+
         case 'messageMediaPhoto': {
           let photo = message.media.photo;
           this.log('messageMediaPhoto', photo);

src/lib/appManagers/appMediaViewer.ts

@@ -166,14 +166,18 @@ export class AppMediaViewer {
     appDialogsManager.loadDialogPhoto(this.author.avatarEl, message.fromID);
     
     this.overlaysDiv.classList.add('active');
-    
+
+    container.classList.add('loading');
+
     if(isVideo) {
       //this.preloader.attach(container);
       //this.preloader.setProgress(75);
 
       this.log('will wrap video');
       
-      wrapVideo.call(this, media, container, message, false, this.preloader);
+      wrapVideo.call(this, media, container, message, false, this.preloader).then(() => {
+        container.classList.remove('loading');
+      });
     } else {
       let size = appPhotosManager.setAttachmentSize(media.id, container, appPhotosManager.windowW, appPhotosManager.windowH);
       
@@ -195,6 +199,8 @@ export class AppMediaViewer {
         let image = new Image();
         image.src = URL.createObjectURL(blob);
         container.append(image);
+
+        container.classList.remove('loading');
         
         container.style.width = '';
         container.style.height = '';

src/lib/appManagers/appMessagesManager.ts

@@ -13,7 +13,7 @@ import AppStorage from '../storage';
 import AppPeersManager from "./appPeersManager";
 import ServerTimeManager from "../mtproto/serverTimeManager";
 import apiFileManager, { CancellablePromise } from "../mtproto/apiFileManager";
-import { MTDocument } from "../../components/misc";
+import { MTDocument, ProgressivePreloader } from "../../components/misc";
 import appDocsManager from "./appDocsManager";
 
 type HistoryStorage = {
@@ -438,11 +438,15 @@ export class AppMessagesManager {
       flags |= 256;
     }
 
+    let preloader = new ProgressivePreloader(null, true);
+
     var media = {
       _: 'messageMediaPending',
       type: attachType,
       file_name: fileName || apiFileName,
       size: file.size,
+      file: file,
+      preloader: preloader,
       progress: {
         percent: 1, 
         total: file.size,
@@ -451,6 +455,11 @@ export class AppMessagesManager {
       }
     };
 
+    preloader.preloader.onclick = () => {
+      console.log('cancelling upload', media);
+      media.progress.cancel();
+    };
+
     var message: any = {
       _: 'message',
       id: messageID,
@@ -592,9 +601,10 @@ export class AppMessagesManager {
           });
   
           uploadPromise.notify = (progress: {done: number, total: number}) => {
-            // console.log('upload progress', progress)
+            console.log('upload progress', progress);
             media.progress.done = progress.done;
             media.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
+            preloader.setProgress(media.progress.percent); // lol, nice
             $rootScope.$broadcast('history_update', {peerID: peerID});
           };
   
@@ -604,10 +614,13 @@ export class AppMessagesManager {
               uploadPromise.cancel();
               this.cancelPendingMessage(randomIDS);
             }
-          }
+          };
   
           // @ts-ignore
-          uploadPromise['finally'](() => deferred.resolve());
+          uploadPromise['finally'](() => {
+            deferred.resolve();
+            preloader.detach();
+          });
         });
 
         this.sendFilePromise = deferred;
@@ -626,7 +639,7 @@ export class AppMessagesManager {
   public cancelPendingMessage(randomID: string) {
     var pendingData = this.pendingByRandomID[randomID];
 
-    console.log('pending', randomID, pendingData);
+    console.log('cancelPendingMessage', randomID, pendingData);
 
     if(pendingData) {
       var peerID = pendingData[0];
@@ -656,7 +669,7 @@ export class AppMessagesManager {
   }
 
   public async getConversation(peerID: number) {
-    var foundDialog = this.getDialogByPeerID(peerID)
+    var foundDialog = this.getDialogByPeerID(peerID);
     if(foundDialog.length) {
       return foundDialog[0];
     }
@@ -675,11 +688,11 @@ export class AppMessagesManager {
 
     if(isSearch) {
       if(!limit || this.cachedResults.query !== query) {
-        this.cachedResults.query = query
+        this.cachedResults.query = query;
 
         var results: any = SearchIndexManager.search(query, this.dialogsIndex);
 
-        this.cachedResults.dialogs = []
+        this.cachedResults.dialogs = [];
         this.dialogsStorage.dialogs.forEach((dialog: any) => {
           if(results[dialog.peerID]) {
             this.cachedResults.dialogs.push(dialog);
@@ -701,11 +714,7 @@ export class AppMessagesManager {
       }
     }
 
-    if(
+    if(isSearch || this.allDialogsLoaded || curDialogStorage.dialogs.length >= offset + limit) {
-      isSearch ||
-      this.allDialogsLoaded ||
-      curDialogStorage.dialogs.length >= offset + limit
-    ) {
       return Promise.resolve({
         dialogs: curDialogStorage.dialogs.slice(offset, offset + limit)
       });
@@ -1888,7 +1897,7 @@ export class AppMessagesManager {
     this.newDialogsToHandle = {};
   }
 
-  public readHistory(peerID: number, maxID = 0, minID = 0) {
+  public readHistory(peerID: number, maxID = 0, minID = 0): Promise<boolean> {
     // console.trace('start read')
     var isChannel = AppPeersManager.isChannel(peerID);
     var historyStorage = this.historiesStorage[peerID];
@@ -1896,7 +1905,7 @@ export class AppMessagesManager {
 
     if(!foundDialog || !foundDialog.unread_count) {
       if(!historyStorage || !historyStorage.history.length) {
-        return false;
+        return Promise.resolve(false);
       }
 
       let messageID, message;
@@ -1911,12 +1920,12 @@ export class AppMessagesManager {
       }
 
       if(!foundUnread) {
-        return false;
+        return Promise.resolve(false);
       }
     }
 
     if(historyStorage.readPromise) {
-      return historyStorage.readPromise;
+      return historyStorage.readPromise as Promise<boolean>;
     }
 
     var apiPromise: any;
@@ -1958,7 +1967,11 @@ export class AppMessagesManager {
           console.warn('readPromise:', index, historyStorage.history[index != -1 ? index : 0]);
           foundDialog.read_inbox_max_id = historyStorage.history[index != -1 ? index : 0];
         }
+
+        return true;
       }
+
+      return false;
       /* if(foundDialog) {
         // console.log('done read history', peerID)
         foundDialog.unread_count = 0

src/lib/appManagers/appSidebarLeft.ts

@@ -31,7 +31,7 @@ class AppSidebarLeft {
     this.listsContainer = scrollable(this.searchContainer);
     this.searchMessagesList = document.createElement('ul');
     
-    this.listsContainer.onscroll = this.onSidebarScroll.bind(this);
+    this.listsContainer.addEventListener('scroll', this.onSidebarScroll.bind(this));
     
     this.searchContainer.append(this.listsContainer);
     

src/lib/appManagers/appSidebarRight.ts

@@ -117,7 +117,7 @@ class AppSidebarRight {
 
   public setScroll(scroll: HTMLDivElement) {
     this.sidebarScroll = scroll;
-    this.sidebarScroll.onscroll = this.onSidebarScroll.bind(this);
+    this.sidebarScroll.addEventListener('scroll', this.onSidebarScroll.bind(this));
     /* this.sidebarScroll.options({
       callbacks: {
         onScroll: this.onSidebarScroll.bind(this)

src/lib/mtproto/apiFileManager.ts

@@ -52,7 +52,7 @@ export class ApiFileManager {
     let promise = new Promise((resolve, reject) => {
       // WARNING deferred!
       downloadPull.push({cb: cb, deferred: {resolve, reject}, activeDelta: activeDelta});
-    });
+    }).catch(() => {});
 
     setTimeout(() => {
       this.downloadCheck(dcID);
@@ -83,7 +83,9 @@ export class ApiFileManager {
 
       data.deferred.resolve(result);
     }, (error: any) => {
-      this.log.error('downloadCheck error:', error);
+      if(error) {
+        this.log.error('downloadCheck error:', error);
+      }
 
       this.downloadActives[dcID] -= activeDelta;
       this.downloadCheck(dcID);

src/lib/services.ts

@@ -11,6 +11,7 @@ import AppProfileManager from './appManagers/appProfileManager';
 import AppImManager from './appManagers/appImManager';
 import AppPeersManager from './appManagers/appPeersManager';
 import AppStickersManager from './appManagers/appStickersManager';
+import AppDocsManager from './appManagers/appDocsManager';
 import AppSidebarRight from './appManagers/appSidebarRight';
 import AppSidebarLeft from './appManagers/appSidebarLeft';
 //import AppSharedMediaManager from './appManagers/appSharedMediaManager';
@@ -26,6 +27,7 @@ export const appProfileManager = AppProfileManager;
 export const appImManager = AppImManager;
 export const appPeersManager = AppPeersManager;
 export const appStickersManager = AppStickersManager;
+export const appDocsManager = AppDocsManager;
 //export const appSharedMediaManager = AppSharedMediaManager;
 export const appSidebarRight = AppSidebarRight;
 export const appSidebarLeft = AppSidebarLeft;
@@ -38,6 +40,7 @@ export const appSidebarLeft = AppSidebarLeft;
   appPeersManager,
   appProfileManager,
   appPhotosManager,
+  appDocsManager,
 
   appDialogsManager,
   appImManager,

src/scss/partials/_chat.scss

@@ -153,17 +153,13 @@
 		max-height: 100%;
 		flex: 1 1 auto; /* Lets middle column shrink/grow to available width */
 		overflow: hidden;
+		position: relative;
 
 		&:not(.scrolled-down) {
 			-webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px);
     	mask-image: linear-gradient(0deg, transparent 0, #000 20px);
 		}
 
-		/* .os-content {
-			display: flex;
-			align-items: flex-end;
-		} */
-
 		.preloader {
 			width: 100%;
 			height: 100%;
@@ -185,11 +181,6 @@
 			box-sizing: border-box;
 			min-height: 100%;
 			justify-content: flex-end;
-
-			& > * {
-				display: flex;
-				padding: 5px 0;
-			}
 		}
 
 		.service {
@@ -200,7 +191,6 @@
 			.service-msg {
 				color: #fff;
 				background-color: rgba(#000, 0.22);
-				/* font-weight: 500; */
 				padding: 0 8px;
 				line-height: 24px;
 				font-size: 15px;
@@ -210,8 +200,7 @@
 		}
 
 		.bubble {
-			/* max-width: 480px; */
+			min-width: 60px;
-			/* max-height: 50vh; */
 			max-width: 85%;
 			border-radius: 12px;
 			box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.15);
@@ -225,19 +214,8 @@
 			&.photo, &.video {
 				width: min-content;
 
-				/* .message {
-					width: min-content;
-					max-width: min-content;
-
-					/* .time {
-						max-width: min-content;
-						overflow: hidden;
-					}
-				} */
-
 				.box.web {
 					width: min-content;
-					/* max-width: min-content; */
 					max-width: 100%;
 				}
 			}
@@ -245,6 +223,7 @@
 			&.webpage {
 				.time {
 					float: none;
+					width: 0;
 				}
 			}
 
@@ -316,18 +295,9 @@
 				box-shadow: none;
 				max-width: 300px;
 				max-height: 300px;
-				/* width: 300px; // new
-				height: 300px; // new */
-
-				/* min-height: 250px; */
-
-				/* .attachment {
-					min-width: auto;
-				} */
 
 				.message.message-empty {
 					display: none;
-					/* border-radius: 12px; */
 				}
 
 				&:hover .message.message-empty {
@@ -351,6 +321,7 @@
 
 				display: flex; // lol
 				justify-content: center;
+				position: relative;
 
 				img, video {
 					width: auto;
@@ -378,11 +349,6 @@
 				}
 			}
 
-			/* * + .attachment {
-				border-top-left-radius: 0;
-				border-top-right-radius: 0;
-			} */
-
 			.box {
 				font-size: .95rem;
 				margin: .25rem;
@@ -400,15 +366,8 @@
 					margin-bottom: 5px;
 					max-width: 100%;
 					overflow: hidden;
-					/* max-width: 320px; */
-					/* width: max-content; */
-          
-					/* .quote {
-						// box-sizing: border-box;
-          } */
           
 					.preview {
-						/* height: 100px; */
 						max-height: 100%;
 						max-width: 100%;
 						border-radius: 4px;
@@ -416,11 +375,10 @@
 						overflow: hidden;
 						user-select: none;
 						cursor: pointer;
+						position: relative;
 
 						img, video {
 							max-width: 100%;
-							/* width: auto;
-							height: auto; */
 							width: 100%;
 							height: 100%;
 						}
@@ -466,7 +424,6 @@
 
 			.message {
         font-size: 1rem;
-				/* padding: .25rem .6rem; */
 				padding: 0 .6rem .2675rem .6rem;
 				padding-top: 0;
 				overflow: hidden;
@@ -483,13 +440,13 @@
 				}
 
 				&.message-empty {
-					/* display: none; */
 					position: absolute;
 					bottom: .1rem;
 					right: .1rem;
 					border-radius: 12px;
-					background-color: rgba(0, 0, 0, .3);
+					background-color: rgba(0, 0, 0, .4);
-    			padding: .0rem .3rem;
+					padding: 0 .3rem;
+					z-index: 2;
 
 					.time {
 						color: #fff;
@@ -501,10 +458,6 @@
 				}
 			}
 
-			/* &:hover .message-empty {
-				display: block;
-			} */
-
 			.time {
 				font-size: .8rem;
         user-select: none;
@@ -540,7 +493,7 @@
 				}
 			}
 
-			/* &.forwarded  */.name {
+			.name {
 				cursor: pointer;
 			}
 
@@ -570,7 +523,6 @@
 				background-repeat: no-repeat repeat;
 				content: '';
 				background-size: 11px 20px;
-				/* background-position: -2px -2px; */
 			}
 		}
 
@@ -580,7 +532,9 @@
 
 		.in,
 		.out {
+			display: flex;
 			flex-direction: column;
+			padding: 5px 0;
 		}
 
 		.in {
@@ -771,6 +725,8 @@
 				width: 1%;
 				max-height: inherit;
 				flex: 1 1 auto;
+				position: relative;
+				overflow: hidden;
 			}
 
 			.btn-icon {
@@ -801,7 +757,7 @@
 			font-size: .95rem;
 			/* height: 100%; */
 			max-height: 30rem;
-			overflow-y: auto;
+			overflow-y: none;
 			resize: none;
 			border: none;
 			outline: none;

src/scss/partials/_leftSidebar.scss

@@ -13,6 +13,7 @@
   #chats-container {
     max-height: 100%;
     overflow: hidden;
+    position: relative;
   }
 
   #search-container {

src/scss/partials/_mediaViewer.scss

@@ -90,11 +90,26 @@
       display: flex;
       align-items: center;
       justify-content: center;
+
+      &.loading {
+        img, video {
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+        }
+      }
     }
 
     img, video {
       max-height: calc(100vh - 100px);
       max-width: calc(100vw - 16px);
+    }
+
+    img {
+      object-fit: contain;
+    }
+
+    video {
       width: 100%;
       height: 100%;
       object-fit: cover;

src/scss/style.scss

@@ -285,11 +285,19 @@ input {
     color: #fff;
     font-weight: 500;
     letter-spacing: 1px;
-    text-align: center;
     font-size: 1.1rem;
-    padding-top: 1.5rem;
+    display: flex;
+    justify-content: center;
     background-size: contain;
-    background-image: url('../assets/img/doc-in.svg');
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:not(.photo) {
+    .document-ico {
+      padding-top: 1.5rem;
+      background-image: url('../assets/img/doc-in.svg');
+    }
   }
   
   .document-name {
@@ -305,6 +313,11 @@ input {
     padding-right: 32px;
     line-height: 1.3;
   }
+
+  .preloader-container {
+    width: 42px;
+    height: 42px;
+  }
 }
 
 .page-signUp {
@@ -719,11 +732,17 @@ $width: 100px;
   height: 50px;
   /* cursor: pointer; */
 
+  .you-spin-me-round {
+    width: 100%;
+    height: 100%;
+    animation: rotate 2s linear infinite;
+  }
+
   .preloader-circular {
+    animation: none;
     cursor: pointer;
-    background-color: rgba(0, 0, 0, .5);
+    background-color: rgba(0, 0, 0, .7);
     border-radius: 50%;
-    animation: rotate 2s linear infinite;
     width: 100%;
     height: 100%;
   }
@@ -731,11 +750,10 @@ $width: 100px;
   .preloader-path-new {
     stroke-dasharray: 5, 200;
     stroke-dashoffset: 0;
-    //animation: dash 1.5s ease-in-out infinite/* , color 6s ease-in-out infinite */;
+    transition: stroke-dasharray 400ms ease-in-out;
     stroke-linecap: round;
     stroke: white;
     stroke-width: 1.5;
-    /* transition: .1s all; */
   }
 
   &.preloader-swing {
@@ -1078,32 +1096,9 @@ $width: 100px;
   }
 }
 
-
+div.scrollable::-webkit-scrollbar {
-
+  width: 0;
-div.scrollable-y::-webkit-scrollbar {
+  height: 0;
-  /* width: 4px; */
-  width: 10px;
-}
-
-/* ::-webkit-scrollbar-track {
-  
-  
-} */
-
-div.scrollable-y::-webkit-scrollbar-thumb {
-  border: 2px solid rgba(0, 0, 0, 0);
-  background-clip: padding-box;
-}
-
-::-webkit-scrollbar-thumb {
-  opacity: 0;
-  transition: .2s ease-in-out;
-}
-
-div.scrollable.active::-webkit-scrollbar-thumb {
-  border-radius: $border-radius;
-  background-color: rgba(0, 0, 0, 0.4);
-  opacity: 1;
 }
 
 ::-webkit-scrollbar-button {
@@ -1121,25 +1116,45 @@ div.scrollable.active::-webkit-scrollbar-thumb {
   overflow-y: hidden;
   overflow-x: hidden;
   max-height: 100%;
+  position: relative;
 
   &.scrollable-x {
     overflow-x: auto;
-    overflow-x: overlay;
   }
 
   &.scrollable-y {
     overflow-y: auto;
-    overflow-y: overlay;
+  }
+
+  &.scrollable-x ~ .scrollbar-thumb {
+    top: auto;
+    right: auto;
+    width: auto;
+    height: 4px;
+    bottom: 0px;
   }
 }
 
-div.scrollable-x::-webkit-scrollbar {
+.scrollbar-thumb {
-  height: 4px;
+  position: absolute;
+  top: 0;
+  right: 2px;
+  width: 4px;
+  //margin-left: 2px;
+  background-color: #000;
+  cursor: grab;
+  opacity: 0;
+  transition-property: opacity,width,right;
+  transition-duration: .2s;
+  transition-timing-function: ease-in-out;
+
+  border-radius: $border-radius;
+  z-index: 2;
 }
 
-/* div.scrollable-x::-webkit-scrollbar-thumb {
+:hover > .scrollbar-thumb {
-  border: none;
+  opacity: .4;
-} */
+}
 
 .menu-horizontal {
   width: 100%;
@@ -1204,6 +1219,7 @@ div.scrollable-x::-webkit-scrollbar {
       padding: 7.5px;
       max-width: 100%;
       overflow: hidden;
+      position: relative;
     }
   }
 }
@@ -1242,10 +1258,11 @@ div.scrollable-x::-webkit-scrollbar {
     //display: none;
     width: 0%;
     /* grid-column: 3; */
+    position: relative;
 
     transition: .2s ease-in-out;
 
-    > div {
+    > .scrollable {
       min-width: 25vw;
     }
   }