Fix broken documents on sending & forwarding

src/components/chat/bubbles.ts

@@ -288,7 +288,7 @@ export default class ChatBubbles {
     });
 
     // Calls when message successfully sent and we have an id
-    this.listenerSetter.add(rootScope)('message_sent', (e) => {
+    this.listenerSetter.add(rootScope)('message_sent', async(e) => {
       const {storage, tempId, tempMessage, mid} = e;
 
       // ! can't use peerId to validate here, because id can be the same in 'scheduled' and 'chat' types
@@ -298,6 +298,8 @@ export default class ChatBubbles {
       
       //this.log('message_sent', e);
 
+      await getHeavyAnimationPromise();
+
       const mounted = this.getMountedBubble(tempId, tempMessage) || this.getMountedBubble(mid);
       if(mounted) {
         const message = this.chat.getMessage(mid);
@@ -327,7 +329,10 @@ export default class ChatBubbles {
             const container = findUpClassName(div, 'document-container');
 
             if(!tempMessage.media?.document?.thumbs?.length && message.media.document.thumbs?.length) {
-              div.replaceWith(wrapDocument({message}));
+              const timeSpan = div.querySelector('.time');
+              const newDiv = wrapDocument({message});
+              div.replaceWith(newDiv);
+              newDiv.querySelector('.document-size').append(timeSpan);
             }
 
             if(container) {
@@ -3358,7 +3363,7 @@ export default class ChatBubbles {
               //}
             } else {
               const docDiv = wrapDocument({
-                message,
+                message: message as Message.message,
                 autoDownloadSize: this.chat.autoDownload.file,
                 lazyLoadQueue: this.lazyLoadQueue,
                 loadPromises

src/components/popups/newMedia.ts

@@ -350,7 +350,7 @@ export default class PopupNewMedia extends PopupElement {
 
     const isPhoto = file.type.startsWith('image/');
     const isAudio = file.type.startsWith('audio/');
-    if(isPhoto || isAudio) {
+    if(isPhoto || isAudio || file.size < 20e6) {
       params.objectURL = URL.createObjectURL(file);
     }
 
@@ -363,9 +363,11 @@ export default class PopupNewMedia extends PopupElement {
       type: isPhoto ? 'photo' : 'doc'
     } as MyDocument;
 
-    const cacheContext = appDownloadManager.getCacheContext(doc);
+    if(params.objectURL) {
-    cacheContext.url = params.objectURL;
+      const cacheContext = appDownloadManager.getCacheContext(doc);
-    cacheContext.downloaded = file.size;
+      cacheContext.url = params.objectURL;
+      cacheContext.downloaded = file.size;
+    }
 
     const docDiv = wrapDocument({
       message: {

src/components/wrappers.ts

@@ -10,7 +10,7 @@ import { deferredPromise } from '../helpers/cancellablePromise';
 import { formatFullSentTime } from '../helpers/date';
 import mediaSizes, { ScreenSize } from '../helpers/mediaSizes';
 import { IS_SAFARI } from '../environment/userAgent';
-import { Message, PhotoSize, StickerSet } from '../layer';
+import { Message, MessageMedia, PhotoSize, StickerSet, WebPage } from '../layer';
 import appDocsManager, { MyDocument } from "../lib/appManagers/appDocsManager";
 import appMessagesManager from '../lib/appManagers/appMessagesManager';
 import appPhotosManager, { MyPhoto } from '../lib/appManagers/appPhotosManager';
@@ -571,7 +571,7 @@ rootScope.addEventListener('download_start', (docId) => {
 });
 
 export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showSender, searchContext, loadPromises, autoDownloadSize, lazyLoadQueue}: {
-  message: any, 
+  message: Message.message, 
   withTime?: boolean,
   fontWeight?: number,
   voiceAsMusic?: boolean,
@@ -584,8 +584,8 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
   if(!fontWeight) fontWeight = 500;
   const noAutoDownload = autoDownloadSize === 0;
 
-  const doc = (message.media.document || message.media.webpage.document) as MyDocument;
+  const doc = ((message.media as MessageMedia.messageMediaDocument).document || ((message.media as MessageMedia.messageMediaWebPage).webpage as WebPage.webPage).document) as MyDocument;
-  const uploading = message.pFlags.is_outgoing && message.media?.preloader;
+  const uploading = message.pFlags.is_outgoing && (message.media as any)?.preloader;
   if(doc.type === 'audio' || doc.type === 'voice' || doc.type === 'round') {
     const audioElement = new AudioElement();
     audioElement.withTime = withTime;
@@ -597,7 +597,7 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
     if(voiceAsMusic) audioElement.voiceAsMusic = voiceAsMusic;
     if(searchContext) audioElement.searchContext = searchContext;
     if(showSender) audioElement.showSender = showSender;
-    if(uploading) audioElement.preloader = message.media.preloader;
+    if(uploading) audioElement.preloader = (message.media as any).preloader;
 
     audioElement.dataset.fontWeight = '' + fontWeight;
     audioElement.render();
@@ -622,7 +622,8 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
     docDiv.classList.add('document-with-thumb');
 
     let imgs: HTMLImageElement[] = [];
-    if(message.pFlags.is_outgoing) {
+    // ! WARNING, use thumbs for check when thumb will be generated for media
+    if(message.pFlags.is_outgoing && ['photo', 'video'].includes(doc.type)) {
       icoDiv.innerHTML = `<img src="${cacheContext.url}">`;
       imgs.push(icoDiv.firstElementChild as HTMLImageElement);
     } else {
@@ -662,7 +663,7 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
   }
 
   docDiv.innerHTML = `
-  ${cacheContext.downloaded && !uploading ? '' : `<div class="document-download"></div>`}
+  ${(cacheContext.downloaded && !uploading) || !message.mid ? '' : `<div class="document-download"></div>`}
   <div class="document-name"></div>
   <div class="document-size"></div>
   `;
@@ -683,7 +684,7 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
 
   docDiv.prepend(icoDiv);
 
-  if(!uploading && message.pFlags.is_outgoing) {
+  if(!uploading && message.pFlags.is_outgoing && !message.mid) {
     return docDiv;
   }
 
@@ -741,7 +742,7 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
     preloader.attach(downloadDiv, false, appDocsManager.downloading.get(doc.id));
   } else if(!cacheContext.downloaded || uploading) {
     downloadDiv = docDiv.querySelector('.document-download');
-    preloader = message.media.preloader as ProgressivePreloader;
+    preloader = (message.media as any).preloader as ProgressivePreloader;
 
     if(!preloader) {
       preloader = new ProgressivePreloader();
@@ -756,7 +757,7 @@ export function wrapDocument({message, withTime, fontWeight, voiceAsMusic, showS
       }
     } else {
       preloader.attach(downloadDiv);
-      message.media.promise.then(onLoad);
+      (message.media as any).promise.then(onLoad);
     }
   }
 

src/lib/appManagers/appMessagesManager.ts

@@ -824,9 +824,11 @@ export class AppMessagesManager {
         size: file.size
       } as any;
 
-      const cacheContext = appDownloadManager.getCacheContext(document);
+      if(options.objectURL) {
-      cacheContext.downloaded = file.size;
+        const cacheContext = appDownloadManager.getCacheContext(document);
-      cacheContext.url = options.objectURL || '';
+        cacheContext.downloaded = file.size;
+        cacheContext.url = options.objectURL;
+      }
 
       let thumb: PhotoSize.photoSize;
       if(isPhoto) {
@@ -5425,11 +5427,17 @@ export class AppMessagesManager {
           appDownloadManager.fakeDownload(fileName, oldCacheContext.url);
         }
       } else if(newDoc) {
-        const doc = appDocsManager.getDoc('' + tempId);
+        const oldDoc = appDocsManager.getDoc('' + tempId);
-        if(doc) {
+        if(oldDoc) {
-          if(/* doc._ !== 'documentEmpty' &&  */doc.type && doc.type !== 'sticker' && doc.mime_type !== 'image/gif') {
+          const oldCacheContext = appDownloadManager.getCacheContext(oldDoc);
+          if(
+            /* doc._ !== 'documentEmpty' &&  */
+            oldDoc.type && 
+            oldDoc.type !== 'sticker' && 
+            oldDoc.mime_type !== 'image/gif' && 
+            oldCacheContext.url
+          ) {
             const cacheContext = appDownloadManager.getCacheContext(newDoc);
-            const oldCacheContext = appDownloadManager.getCacheContext(doc);
             Object.assign(cacheContext, oldCacheContext);
 
             const fileName = appDocsManager.getInputFileName(newDoc);

src/scss/partials/_leftSidebar.scss

@@ -1077,21 +1077,18 @@
     padding-top: 1rem;
     padding-bottom: .9375rem;
 
-    &-title-row {
-      align-items: flex-end;
-    }
-
     &-title:first-child {
       font-weight: 500;
     }
 
     &-title-right {
-      font-size: .75rem;
+      font-size: var(--font-size-12);
       color: var(--secondary-text-color);
-      line-height: 1.5;
+      line-height: var(--line-height-12);
     }
 
-    &-midtitle, &-subtitle {
+    &-midtitle, 
+    &-subtitle {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;

src/scss/style.scss

@@ -84,8 +84,10 @@ $chat-input-inner-padding-handhelds: .25rem;
   --line-height: 1.3125;
   --line-height-16: 21px;
   --line-height-14: 18px;
+  --line-height-12: 16px;
   --font-size-16: 16px;
   --font-size-14: 14px;
+  --font-size-12: 12px;
   --esg-sticker-size: 80px;
   --disabled-opacity: .3;
   --round-video-size: 280px;