Upload video thumb

Cancel album item uploading

src/components/audio.ts

@@ -469,7 +469,7 @@ export default class AudioElement extends HTMLElement {
               this.audio.play().catch(() => {});
             }
     
-            preloader.attach(downloadDiv);
+            preloader.attach(downloadDiv, false);
             this.append(downloadDiv);
     
             new Promise<void>((resolve) => {

src/components/chat/bubbles.ts

@@ -1743,106 +1743,6 @@ export default class ChatBubbles {
       let processingWebPage = false;
       
       switch(messageMedia._) {
-        case 'messageMediaPending': {
-          let pending = messageMedia;
-          let preloader = pending.preloader as ProgressivePreloader;
-          
-          switch(pending.type) {
-            case 'album': {
-              this.log('will wrap pending album');
-
-              bubble.classList.add('hide-name', 'photo', 'is-album', 'is-grouped');
-              wrapAlbum({
-                groupId: '' + message.id, 
-                attachmentDiv,
-                uploading: true,
-                isOut: true,
-                chat: this.chat
-              });
-
-              break;
-            }
-
-            case 'photo': {
-              //if(pending.size < 5e6) {
-                const photo = this.appPhotosManager.getPhoto(message.id);
-                //if(photo._ == 'photoEmpty') break;
-                this.log('will wrap pending photo:', pending, message, photo);
-                const withTail = !isAndroid && !message.message && !withReplies;
-                if(withTail) bubble.classList.add('with-media-tail');
-                wrapPhoto({
-                  photo, message, 
-                  container: attachmentDiv, 
-                  withTail, 
-                  isOut: true, 
-                  lazyLoadQueue: this.lazyLoadQueue
-                });
-
-                bubble.classList.add('hide-name', 'photo');
-              //}
-
-              break;
-            }
-
-            case 'video': {
-              //if(pending.size < 5e6) {
-                let doc = this.appDocsManager.getDoc(message.id);
-                //if(doc._ == 'documentEmpty') break;
-                this.log('will wrap pending video:', pending, message, doc);
-                const withTail = !isAndroid && !isApple && doc.type != 'round' && !message.message && !withReplies;
-                if(withTail) bubble.classList.add('with-media-tail');
-                wrapVideo({
-                  doc, 
-                  container: attachmentDiv, 
-                  message, 
-                  boxWidth: mediaSizes.active.regular.width,
-                  boxHeight: mediaSizes.active.regular.height, 
-                  withTail, 
-                  isOut: isOut,
-                  lazyLoadQueue: this.lazyLoadQueue,
-                  middleware: null,
-                  group: CHAT_ANIMATION_GROUP
-                });
-
-                preloader.attach(attachmentDiv, false);
-                bubble.classList.add('hide-name', 'video');
-              //}
-              break;
-            }
-            
-            case 'audio':
-            case 'voice':
-            case 'document': {
-              const newNameContainer = wrapGroupedDocuments({
-                albumMustBeRenderedFull,
-                message,
-                bubble,
-                messageDiv,
-                chat: this.chat
-              });
-  
-              if(newNameContainer) {
-                nameContainer = newNameContainer;
-              }
-
-              const lastContainer = messageDiv.lastElementChild.querySelector('.document-size');
-              lastContainer && lastContainer.append(timeSpan.cloneNode(true));
-              
-              if(pending.type == 'voice') {
-                bubble.classList.add('bubble-audio');
-              }
-              
-              bubble.classList.remove('is-message-empty');
-              messageDiv.classList.add((pending.type || 'document') + '-message');
-              processingWebPage = true;
-              break;
-            }
-            
-          }
-          
-          break;
-        }
-        
         case 'messageMediaPhoto': {
           const photo = messageMedia.photo;
           ////////this.log('messageMediaPhoto', photo);

src/components/popups/newMedia.ts

@@ -8,10 +8,13 @@ import { toast } from "../toast";
 import { prepareAlbum, wrapDocument } from "../wrappers";
 import CheckboxField from "../checkbox";
 import SendContextMenu from "../chat/sendContextMenu";
+import { createPosterForVideo, createPosterFromVideo } from "../../helpers/files";
 
 type SendFileParams = Partial<{
   file: File,
   objectURL: string,
+  thumbBlob: Blob,
+  thumbURL: string,
   width: number,
   height: number,
   duration: number
@@ -238,7 +241,11 @@ export default class PopupNewMedia extends PopupElement {
               params.duration = Math.floor(video.duration);
 
               itemDiv.append(video);
+              createPosterFromVideo(video).then(blob => {
+                params.thumbBlob = blob;
+                params.thumbURL = URL.createObjectURL(blob);
                 resolve(itemDiv);
+              });
             };
 
             video.append(source);

src/components/preloader.ts

@@ -65,7 +65,7 @@ export default class ProgressivePreloader {
     const onEnd = () => {
       promise.notify = null;
 
-      if(tempId == this.tempId) {
+      if(tempId === this.tempId) {
         this.detach();
         this.promise = promise = null;
       }
@@ -80,7 +80,7 @@ export default class ProgressivePreloader {
           onEnd();
         } */
 
-        if(tempId != this.tempId) return;
+        if(tempId !== this.tempId) return;
 
         //console.log('preloader download', promise, details);
         const percents = details.done / details.total * 100;
@@ -89,7 +89,7 @@ export default class ProgressivePreloader {
     }
   }
 
-  public attach(elem: Element, reset = true, promise?: CancellablePromise<any>) {
+  public attach(elem: Element, reset = false, promise?: CancellablePromise<any>) {
     if(promise/*  && false */) {
       this.attachPromise(promise);
     }
@@ -129,7 +129,7 @@ export default class ProgressivePreloader {
       return;
     }
     
-    if(percents == 0) {
+    if(percents === 0) {
       this.circle.style.strokeDasharray = '';
       return;
     }

src/components/wrappers.ts

@@ -221,7 +221,7 @@ export function wrapVideo({doc, container, message, boxWidth, boxHeight, withTai
     let preloader: ProgressivePreloader;
     if(message?.media?.preloader) { // means upload
       preloader = message.media.preloader as ProgressivePreloader;
-      preloader.attach(container, undefined, undefined);
+      preloader.attach(container, false);
     } else if(!doc.downloaded && !doc.supportsStreaming) {
       const promise = appDocsManager.downloadDoc(doc, undefined, lazyLoadQueue?.queueId);
       preloader = new ProgressivePreloader(null, true, false, 'prepend');
@@ -557,7 +557,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
 
   let preloader: ProgressivePreloader;
   if(message?.media?.preloader) { // means upload
-    message.media.preloader.attach(container);
+    message.media.preloader.attach(container, false);
   } else if(!cacheContext.downloaded) {
     preloader = new ProgressivePreloader(null, false, false, photo._ == 'document' ? 'prepend' : 'append');
   }

src/helpers/files.ts

@@ -0,0 +1,38 @@
+import { pause } from "./schedulers";
+
+export function preloadVideo(url: string): Promise<HTMLVideoElement> {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement('video');
+    video.volume = 0;
+    video.onloadedmetadata = () => resolve(video);
+    video.onerror = reject;
+    video.src = url;
+  });
+}
+
+export function createPosterFromVideo(video: HTMLVideoElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    video.onseeked = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.min(1280, video.videoWidth);
+      canvas.height = Math.min(720, video.videoHeight);
+      const ctx = canvas.getContext('2d')!;
+      ctx.drawImage(video, 0, 0);
+      canvas.toBlob(blob => {
+        resolve(blob);
+      }, 'image/jpeg', 1);
+    };
+
+    video.onerror = reject;
+    video.currentTime = Math.min(video.duration, 1);
+  });
+}
+
+export async function createPosterForVideo(url: string): Promise<Blob | undefined> {
+  const video = await preloadVideo(url);
+
+  return Promise.race([
+    pause(2000) as Promise<undefined>,
+    createPosterFromVideo(video),
+  ]);
+}

src/lib/appManagers/appImManager.ts

@@ -36,13 +36,12 @@ appSidebarLeft; // just to include
 const LEFT_COLUMN_ACTIVE_CLASSNAME = 'is-left-column-shown';
 
 export const CHAT_ANIMATION_GROUP = 'chat';
+const FOCUS_EVENT_NAME = isTouchSupported ? 'touchstart' : 'mousemove';
 
 export class AppImManager {
   public columnEl = document.getElementById('column-center') as HTMLDivElement;
   public chatsContainer: HTMLElement;
 
-  //public chatsSelectTab: ReturnType<typeof horizontalMenu>;
-
   public offline = false;
   public updateStatusInterval = 0;
 
@@ -50,10 +49,7 @@ export class AppImManager {
 
   public setPeerPromise: Promise<void> = null;
 
-  //private mainColumns: HTMLElement;
-  //public _selectTab: ReturnType<typeof horizontalMenu>;
   public tabId = -1;
-  //private closeBtn: HTMLButtonElement;// = this.topbar.querySelector('.sidebar-close-button') as HTMLButtonElement;
   public hideRightSidebar = false;
   
   private chats: Chat[] = [];
@@ -75,8 +71,6 @@ export class AppImManager {
 
     this.log = logger('IM', LogLevels.log | LogLevels.warn | LogLevels.debug | LogLevels.error);
 
-    //this.mainColumns = this.columnEl.parentElement;
-    //this._selectTab = horizontalMenu(null, this.mainColumns);
     this.selectTab(0);
     
     window.addEventListener('blur', () => {
@@ -96,26 +90,11 @@ export class AppImManager {
       }, {once: true});
     });
 
-    /* this.closeBtn.addEventListener('click', (e) => {
+    // * Prevent setting online after reloading page
-      cancelEvent(e);
+    window.addEventListener(FOCUS_EVENT_NAME, () => {
-
-      if(mediaSizes.isMobile) {
-        //this.setPeer(0);
-        this.selectTab(0);
-      } else {
-        const isNowOpen = document.body.classList.toggle(LEFT_COLUMN_ACTIVE_CLASSNAME);
-
-        if(isNowOpen && document.body.classList.contains(RIGHT_COLUMN_ACTIVE_CLASSNAME)) {
-          appSidebarRight.toggleSidebar(false, false);
-          this.hideRightSidebar = isNowOpen;
-        } else if(this.hideRightSidebar) {
-          appSidebarRight.toggleSidebar(true);
-        }
-      }
-    }); */
-    
       this.updateStatusInterval = window.setInterval(() => this.updateStatus(), 50e3);
       this.updateStatus();
+    }, {once: true, passive: true});
 
     this.chatsContainer = document.createElement('div');
     this.chatsContainer.classList.add('chats-container', 'tabs-container');
@@ -166,8 +145,6 @@ export class AppImManager {
 
       location.hash = '';
     });
-
-    //apiUpdatesManager.attach();
   }
 
   private chatsSelectTab(tab: HTMLElement) {
@@ -198,7 +175,7 @@ export class AppImManager {
 
       const chat = this.chat;
 
-      if(e.key == 'Escape') {
+      if(e.key === 'Escape') {
         let cancel = true;
         if(this.markupTooltip?.container?.classList.contains('is-visible')) {
           this.markupTooltip.hide();
@@ -206,7 +183,7 @@ export class AppImManager {
           chat.selection.cancelSelection();
         } else if(chat.container.classList.contains('is-helper-active')) {
           chat.input.replyElements.cancelBtn.click();
-        } else if(chat.peerId != 0) { // hide current dialog
+        } else if(chat.peerId !== 0) { // hide current dialog
           this.setPeer(0);
         } else {
           cancel = false;
@@ -216,25 +193,27 @@ export class AppImManager {
         if(cancel) {
           cancelEvent(e);
         }
-      } else if(e.key == 'Meta' || e.key == 'Control') {
+      } else if(e.key === 'Meta' || e.key === 'Control') {
         return;
-      } else if(e.code == "KeyC" && (e.ctrlKey || e.metaKey) && target.tagName != 'INPUT') {
+      } else if(e.code === "KeyC" && (e.ctrlKey || e.metaKey) && target.tagName !== 'INPUT') {
         return;
-      } else if(e.code == 'ArrowUp') {
+      } else if(e.code === 'ArrowUp') {
         if(!chat.input.editMsgId) {
           const history = appMessagesManager.getHistoryStorage(chat.peerId);
           if(history.history.length) {
             let goodMid: number;
             for(const mid of history.history) {
               const message = appMessagesManager.getMessageByPeer(chat.peerId, mid);
-              const good = this.myId == chat.peerId ? message.fromId == this.myId : message.pFlags.out;
+              const good = this.myId === chat.peerId ? message.fromId === this.myId : message.pFlags.out;
 
               if(good) {
-                if(appMessagesManager.canEditMessage(this.chat.getMessage(mid), 'text')) {
+                if(appMessagesManager.canEditMessage(chat.getMessage(mid), 'text')) {
                   goodMid = mid;
+                  break;
                 }
 
-                break;
+                // * this check will allow editing only last message
+                //break;
               }
             }
   
@@ -246,7 +225,7 @@ export class AppImManager {
         }
       }
       
-      if(chat.input.messageInput && e.target != chat.input.messageInput && target.tagName != 'INPUT' && !target.hasAttribute('contenteditable')) {
+      if(chat.input.messageInput && e.target !== chat.input.messageInput && target.tagName !== 'INPUT' && !target.hasAttribute('contenteditable')) {
         chat.input.messageInput.focus();
         placeCaretAtEnd(chat.input.messageInput);
       }
@@ -426,11 +405,11 @@ export class AppImManager {
   };
 
   public selectTab(id: number) {
-    document.body.classList.toggle(LEFT_COLUMN_ACTIVE_CLASSNAME, id == 0);
+    document.body.classList.toggle(LEFT_COLUMN_ACTIVE_CLASSNAME, id === 0);
 
     const prevTabId = this.tabId;
     this.tabId = id;
-    if(mediaSizes.isMobile && prevTabId == 2 && id == 1) {
+    if(mediaSizes.isMobile && prevTabId === 2 && id === 1) {
       //appSidebarRight.toggleSidebar(false);
       document.body.classList.remove(RIGHT_COLUMN_ACTIVE_CLASSNAME);
     }
@@ -469,7 +448,7 @@ export class AppImManager {
     if(justReturn) {
       rootScope.broadcast('peer_changed', this.chat.peerId);
 
-      if(appSidebarRight.historyTabIds[appSidebarRight.historyTabIds.length - 1] == AppSidebarRight.SLIDERITEMSIDS.search) {
+      if(appSidebarRight.historyTabIds[appSidebarRight.historyTabIds.length - 1] === AppSidebarRight.SLIDERITEMSIDS.search) {
         appSidebarRight.searchTab.closeBtn?.click();
       }
   
@@ -516,7 +495,7 @@ export class AppImManager {
 
         return;
       }
-    } else if(chatIndex > 0 && chat.peerId && chat.peerId != peerId) {
+    } else if(chatIndex > 0 && chat.peerId && chat.peerId !== peerId) {
       this.spliceChats(1, false);
       return this.setPeer(peerId, lastMsgId);
     }

src/lib/appManagers/appMessagesManager.ts

@@ -2,6 +2,7 @@ import { LazyLoadQueueBase } from "../../components/lazyLoadQueue";
 import ProgressivePreloader from "../../components/preloader";
 import { CancellablePromise, deferredPromise } from "../../helpers/cancellablePromise";
 import { tsNow } from "../../helpers/date";
+import { createPosterForVideo } from "../../helpers/files";
 import { copy, defineNotNumerableProperties, getObjectKeysAndSort } from "../../helpers/object";
 import { randomLong } from "../../helpers/random";
 import { splitStringByLength, limitSymbols } from "../../helpers/string";
@@ -361,7 +362,7 @@ export class AppMessagesManager {
     });
   }
 
-  public getInputEntities(entities: any) {
+  public getInputEntities(entities: MessageEntity[]) {
     var sendEntites = copy(entities);
     sendEntites.forEach((entity: any) => {
       if(entity._ == 'messageEntityMentionName') {
@@ -615,6 +616,8 @@ export class AppMessagesManager {
     width: number,
     height: number,
     objectURL: string,
+    thumbBlob: Blob,
+    thumbURL: string,
     duration: number,
     background: true,
     silent: true,
@@ -765,8 +768,32 @@ export class AppMessagesManager {
           size: file.size,
           url: options.objectURL
         });
+      } else if(attachType === 'video') {
+        if(options.thumbURL) {
+          thumbs.push({
+            _: 'photoSize',
+            w: options.width,
+            h: options.height,
+            type: 'full',
+            location: null,
+            size: options.thumbBlob.size,
+            url: options.thumbURL
+          });
         }
 
+        const thumb = thumbs[0] as PhotoSize.photoSize;
+        const docThumb = appPhotosManager.getDocumentCachedThumb(document.id);
+        docThumb.downloaded = thumb.size;
+        docThumb.url = thumb.url;
+      }
+
+      /* if(thumbs.length) {
+        const thumb = thumbs[0] as PhotoSize.photoSize;
+        const docThumb = appPhotosManager.getDocumentCachedThumb(document.id);
+        docThumb.downloaded = thumb.size;
+        docThumb.url = thumb.url;
+      } */
+      
       appDocsManager.saveDoc(document);
     }
 
@@ -775,17 +802,11 @@ export class AppMessagesManager {
     const preloader = new ProgressivePreloader(null, true, false, 'prepend');
 
     const media = {
-      _: 'messageMediaPending',
+      _: photo ? 'messageMediaPhoto' : 'messageMediaDocument',
-      type: options.isGroupedItem && options.isMedia ? 'album' : attachType,
+      pFlags: {},
-      file_name: fileName || apiFileName,
-      size: file.size,
-      file,
       preloader,
       photo,
-      document,
+      document
-      w: options.width,
-      h: options.height,
-      url: options.objectURL
     };
 
     const message: any = {
@@ -845,9 +866,25 @@ export class AppMessagesManager {
             preloader.attachPromise(uploadPromise);
           }
 
-          uploadPromise && uploadPromise.then((inputFile) => {
+          let thumbUploadPromise: typeof uploadPromise;
+          if(attachType === 'video' && options.objectURL) {
+            thumbUploadPromise = new Promise((resolve, reject) => {
+              const blobPromise = options.thumbBlob ? Promise.resolve(options.thumbBlob) : createPosterForVideo(options.objectURL);
+              blobPromise.then(blob => {
+                if(!blob) {
+                  resolve(null);
+                } else {
+                  appDownloadManager.upload(blob).then(resolve, reject);
+                }
+              }, reject);
+            });
+          }
+  
+          uploadPromise && uploadPromise.then(async(inputFile) => {
             this.log('appMessagesManager: sendFile uploaded:', inputFile);
             
+            delete message.media.preloader;
+
             inputFile.name = apiFileName;
             uploaded = true;
             let inputMedia: InputMedia;
@@ -868,6 +905,15 @@ export class AppMessagesManager {
                 };
             }
 
+            if(thumbUploadPromise) {
+              try {
+                const inputFile = await thumbUploadPromise;
+                (inputMedia as InputMedia.inputMediaUploadedDocument).thumb = inputFile;
+              } catch(err) {
+                this.log.error('sendFile thumb upload error:', err);
+              }
+            }
+            
             sentDeferred.resolve(inputMedia);
           }, (/* error */) => {
             toggleError(true);
@@ -952,6 +998,8 @@ export class AppMessagesManager {
       width: number,
       height: number,
       objectURL: string,
+      thumbBlob: Blob,
+      thumbURL: string
     }>[],
     silent: true,
     scheduleDate: number
@@ -1045,7 +1093,7 @@ export class AppMessagesManager {
       });
     };
 
-    const promises: Promise<InputSingleMedia>[] = messages.map(message => {
+    const promises: Promise<InputSingleMedia>[] = messages.map((message, idx) => {
       return (message.send() as Promise<InputMedia>).then((inputMedia: InputMedia) => {
         return apiManager.invokeApi('messages.uploadMedia', {
           peer: inputPeer,
@@ -1078,13 +1126,18 @@ export class AppMessagesManager {
 
         return inputSingleMedia;
       }).catch((err: any) => {
+        if(err.name === 'AbortError') {
+          return null;
+        }
+
+        this.log.error('sendAlbum upload item error:', err, message);
         toggleError(message, true);
         throw err;
       });
     });
 
     Promise.all(promises).then(inputs => {
-      invoke(inputs);
+      invoke(inputs.filter(Boolean));
     });
   }
 
@@ -2251,24 +2304,26 @@ export class AppMessagesManager {
       if(message.grouped_id) {
         text = this.getAlbumText(message.grouped_id).message;
         messageText += '<i>Album' + (text ? ', ' : '') + '</i>';
-      } else switch(message.media._) {
+      } else {
+        const media = message.media;
+        switch(media._) {
           case 'messageMediaPhoto':
             messageText += '<i>Photo' + (message.message ? ', ' : '') + '</i>';
             break;
           case 'messageMediaDice':
-          messageText += RichTextProcessor.wrapEmojiText(message.media.emoticon);
+            messageText += RichTextProcessor.wrapEmojiText(media.emoticon);
             break;
           case 'messageMediaGeo':
             messageText += '<i>Geolocation</i>';
             break;
           case 'messageMediaPoll':
-          messageText += '<i>' + message.media.poll.rReply + '</i>';
+            messageText += '<i>' + media.poll.rReply + '</i>';
             break;
           case 'messageMediaContact':
             messageText += '<i>Contact</i>';
             break;
           case 'messageMediaDocument':
-          let document = message.media.document;
+            let document = media.document;
   
             if(document.type == 'video') {
               messageText = '<i>Video' + (message.message ? ', ' : '') + '</i>';
@@ -2288,11 +2343,12 @@ export class AppMessagesManager {
             break;
   
           default:
-          //messageText += message.media._;
+            //messageText += media._;
-          ///////this.log.warn('Got unknown message.media type!', message);
+            ///////this.log.warn('Got unknown media type!', message);
             break;
         }
       } 
+    }
 
     if(message.action) {
       const str = this.wrapMessageActionText(message);
@@ -2482,8 +2538,7 @@ export class AppMessagesManager {
     const goodMedias = [
       'messageMediaPhoto',
       'messageMediaDocument',
-      'messageMediaWebPage',
+      'messageMediaWebPage'
-      'messageMediaPending'
     ];
 
     if(kind == 'poll') {

src/lib/mtproto/apiFileManager.ts

@@ -110,7 +110,7 @@ export class ApiFileManager {
       data.deferred.resolve(result);
     }, (error: Error) => {
       // @ts-ignore
-      if(!error.type || (error.type !== 'DOWNLOAD_CANCELED' && error.type !== 'UPLOAD_CANCELED')) {
+      if(!error || !error.type || (error.type !== 'DOWNLOAD_CANCELED' && error.type !== 'UPLOAD_CANCELED')) {
         this.log.error('downloadCheck error:', error);
       }