last fixes

src/components/wrappers.ts

@@ -156,7 +156,7 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
   }
 }
 
-export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement {
+export function wrapDocument(doc: MTDocument, withTime = false, uploading = false): HTMLDivElement {
   if(doc.type == 'voice') {
     return wrapAudio(doc, withTime);
   }
@@ -190,11 +190,12 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
   
   docDiv.innerHTML = `
   <div class="document-ico ext-${ext}">${ext2}</div>
-  <div class="document-download"><div class="tgico-download"></div></div>
+  ${!uploading ? `<div class="document-download"><div class="tgico-download"></div></div>` : ''}
   <div class="document-name">${fileName}</div>
   <div class="document-size">${size}</div>
   `;
 
+  if(!uploading) {
     let downloadDiv = docDiv.querySelector('.document-download') as HTMLDivElement;
     let preloader: ProgressivePreloader;
     let promise: CancellablePromise<Blob>;
@@ -226,13 +227,7 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
         promise = null;
       }
     });
-  
-  /* apiFileManager.getDownloadedFile(Object.assign({}, doc, {_: 'inputDocumentFileLocation'})).then(() => {
-    downloadDiv.classList.remove('downloading');
-    downloadDiv.remove();
-  }, () => {
-    
-  }); */
+  }
   
   return docDiv;
 }

src/lib/appManagers/appImManager.ts

@@ -281,6 +281,12 @@ class ChatInput {
       this.attachMediaPopUp.mediaContainer.style.height = '';
       this.attachMediaPopUp.mediaContainer.classList.remove('is-document');
 
+      if(file.type.indexOf('video/') === 0) {
+        willAttach = 'document';
+      } else if(file.type.indexOf('image/') === -1 && willAttach == 'media') {
+        willAttach = 'document';
+      }
+
       switch(willAttach) {
         case 'media': {
           let img = new Image();
@@ -311,7 +317,7 @@ class ChatInput {
             'image/gif',
             'image/webp',
             'image/bmp'].indexOf(file.type) !== -1 ? 'photo' : 'doc'
-          } as any, false);
+          } as any, false, true);
 
           this.attachMediaPopUp.titleEl.innerText = 'Send File';
 
@@ -382,6 +388,11 @@ class ChatInput {
         height: willAttachHeight
       });
       appImManager.scroll.scrollTop = appImManager.scroll.scrollHeight;
+
+      let dialog = appMessagesManager.getDialogByPeerID(appImManager.peerID)[0];
+      if(dialog && dialog.top_message) {
+        appMessagesManager.readHistory(appImManager.peerID, dialog.top_message); // lol
+      }
     });
 
     this.btnSend.addEventListener('click', () => {
@@ -479,6 +490,11 @@ class ChatInput {
       appImManager.scroll.scrollTop = appImManager.scroll.scrollHeight;
     }
 
+    let dialog = appMessagesManager.getDialogByPeerID(appImManager.peerID)[0];
+    if(dialog && dialog.top_message) {
+      appMessagesManager.readHistory(appImManager.peerID, dialog.top_message); // lol
+    }
+    
     this.editMsgID = 0;
     this.replyToMsgID = 0;
     this.noWebPage = false;
@@ -646,7 +662,10 @@ export class AppImManager {
       } = e.detail;
 
       this.deleteMessagesByIDs(Object.keys(detail.msgs).map(s => +s));
+
+      setTimeout(() => {
         this.deleteEmptySideDivs();
+      }, 0);
     });
 
     // Calls when message successfully sent and we have an ID
@@ -1780,7 +1799,7 @@ export class AppImManager {
 
             case 'audio':
             case 'document': {
-              let docDiv = wrapDocument(pending);
+              let docDiv = wrapDocument(pending, false, true);
 
               let icoDiv = docDiv.querySelector('.document-ico');
               preloader.attach(icoDiv, false);

src/lib/appManagers/appMediaViewer.ts

@@ -6,6 +6,8 @@ import { RichTextProcessor } from "../richtextprocessor";
 import { logger } from "../polyfill";
 import ProgressivePreloader from "../../components/preloader";
 import { wrapVideo } from "../../components/wrappers";
+import { findUpClassName } from "../utils";
+import appDocsManager from "./appDocsManager";
 
 export class AppMediaViewer {
   private overlaysDiv = document.querySelector('.overlays') as HTMLDivElement;
@@ -81,13 +83,33 @@ export class AppMediaViewer {
 
     this.buttons.download.addEventListener('click', () => {
       let message = appMessagesManager.getMessage(this.currentMessageID);
+      if(message.media.photo) {
         appPhotosManager.downloadPhoto(message.media.photo.id);
+      } else {
+        let document: any = null;
+
+        if(message.media.webpage) document = message.media.webpage.document;
+        else document = message.media.document;
+
+        if(document) {
+          console.log('will save document:', document);
+          appDocsManager.saveDocFile(document.id);
+        }
+      }
     });
 
     this.onClickBinded = (e: MouseEvent) => {
       let target = e.target as HTMLElement;
 
-      if(target == this.mediaViewerDiv || target.tagName == 'IMG') {
+      let mover: HTMLDivElement = null;
+      ['media-viewer-mover', 'media-viewer-buttons', 'media-viewer-author'].find(s => {
+        try {
+          mover = findUpClassName(target, s);
+          if(mover) return true;
+        } catch(err) {return false;}
+      });
+
+      if(/* target == this.mediaViewerDiv */!mover || target.tagName == 'IMG') {
         this.buttons.close.click();
       }
     };

src/lib/appManagers/appMessagesManager.ts

@@ -501,7 +501,9 @@ export class AppMessagesManager {
       apiFileName = 'audio.' + (fileType.split('/')[1] == 'ogg' ? 'ogg' : 'mp3');
       actionName = 'sendMessageUploadAudioAction';
     } else if(fileType.substr(0, 6) == 'video/') {
-      attachType = 'video';
+      //attachType = 'video';
+      //apiFileName = 'video.mp4';
+      attachType = 'document'; // last minute fix
       apiFileName = 'video.mp4';
       actionName = 'sendMessageUploadVideoAction';
     } else {

src/scss/partials/_chat.scss

@@ -256,6 +256,7 @@
 
 				.reply-content {
 					height: auto;
+					min-height: 32px;
 				}
 			}
 			
@@ -508,7 +509,7 @@
 					width: 100%;
 				}
 
-				.text, .reply-subtitle {
+				.text/* , .reply-subtitle */ {
 					line-height: 1.2;
 				}
 				
@@ -519,6 +520,7 @@
 			}
 
 			.reply {
+				max-width: 300px;
 				margin-bottom: 6px;
 				margin-top: 0;
 				cursor: pointer;
@@ -1132,6 +1134,7 @@
 			height: 32px;
 			display: flex;
 			flex-direction: column;
+			justify-content: space-between;
 		}
 		
 		&-title {
@@ -1140,7 +1143,8 @@
 		
 		&-title, &-subtitle {
 			font-size: 14px;
-			line-height: 18px;
+			//line-height: 18px;
+			line-height: 1;
 			overflow: hidden;
 			white-space: nowrap;
 			text-overflow: ellipsis;

src/scss/partials/_sidebar.scss

@@ -162,13 +162,18 @@
     }
 
     #content-docs {
-      padding: 3px 15px;
+      padding: 7px 20px;
 
       .document {
-        padding-left: 5rem;
+        padding-left: 4rem;
         padding-right: 1rem;
         //height: 54px;
-        height: calc(54px + 1.5rem);
+        height: calc(50px + 1.5rem);
+
+        &-ico, &-download {
+          width: 48px;
+          height: 48px;
+        }
 
         /* & + .document {
           margin-top: 1.5rem;
@@ -191,8 +196,10 @@
       > div {
         display: flex;
         flex-direction: column;
-        margin-top: 15px;
-        padding-bottom: 10px;
+        margin-top: 20px;
+        margin-left: 5px;
+        padding-bottom: 2px;
+        //padding-bottom: 10px;
         position: relative;
         padding-left: 60px;
         overflow: hidden;
@@ -202,7 +209,7 @@
         .preview {
           height: 48px;
           width: 48px;
-          border-radius: $border-radius;
+          border-radius: 5px;
           overflow: hidden;
           position: absolute;
           left: 0;
@@ -228,6 +235,16 @@
           overflow: hidden;
         }
       }
+
+      .title {
+        font-size: 16px;
+        margin-top: 3px;
+      }
+
+      .subtitle {
+        font-size: 14px;
+        max-width: 300px;
+      }
     }
 
     #content-audio {

src/scss/style.scss

@@ -1382,6 +1382,7 @@ div.scrollable::-webkit-scrollbar-thumb {
     &.active {
       position: relative;
       color: $blue;
+      font-size: 16px;
       
       &:after {
         content: '';