Show previews for documents after uploading

src/components/appMediaViewer.ts

@@ -23,7 +23,7 @@ import { renderImageFromUrl } from "./misc";
 import PopupForward from "./popups/forward";
 import ProgressivePreloader from "./preloader";
 import Scrollable from "./scrollable";
-import appSidebarRight from "./sidebarRight";
+import appSidebarRight, { AppSidebarRight } from "./sidebarRight";
 import SwipeHandler from "./swipeHandler";
 import { months, ONE_DAY } from "../helpers/date";
 
@@ -1190,7 +1190,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
       //.then(() => mediaSizes.isMobile ? appSidebarRight.sharedMediaTab.closeBtn.click() : Promise.resolve())
       .then(() => {
         if(mediaSizes.isMobile) {
-          appSidebarRight.sharedMediaTab.closeBtn.click();
+          appSidebarRight.closeTab(AppSidebarRight.SLIDERITEMSIDS.sharedMedia);
         }
 
         const message = appMessagesManager.getMessageByPeer(this.peerId, mid);

src/components/chat/bubbles.ts

@@ -176,6 +176,13 @@ export default class ChatBubbles {
         
         /////this.log('message_sent', bubble);
 
+        if(message.media?.document && !message.media.document.type) {
+          const div = bubble.querySelector(`.document-container[data-mid="${tempId}"] .document`) as AudioElement;
+          if(div) {
+            div.replaceWith(wrapDocument({message}));
+          }
+        }
+
         // set new mids to album items for mediaViewer
         if(message.grouped_id) {
           const item = (bubble.querySelector(`.grouped-item[data-mid="${tempId}"]`) as HTMLElement) || bubble; // * it can be .document-container
@@ -192,11 +199,13 @@ export default class ChatBubbles {
           }
         }
 
-        if(['audio', 'voice'].includes(message.media?.document?.type)) {
+        if(message.media?.document) {
-          const audio = bubble.querySelector(`audio-element[message-id="${tempId}"]`) as AudioElement;
+          if(['audio', 'voice'].includes(message.media.document.type)) {
-          audio.setAttribute('doc-id', message.media.document.id);
+            const audio = bubble.querySelector(`audio-element[message-id="${tempId}"]`) as AudioElement;
-          audio.setAttribute('message-id', '' + mid);
+            audio.setAttribute('doc-id', message.media.document.id);
-          audio.message = message;
+            audio.setAttribute('message-id', '' + mid);
+            audio.message = message;
+          }
         }
 
         /* bubble.classList.remove('is-sending');

src/components/chat/chat.ts

@@ -160,7 +160,7 @@ export default class Chat extends EventListenerBase<{
     // set new
     if(!samePeer) {
       if(appSidebarRight.historyTabIds[appSidebarRight.historyTabIds.length - 1] == AppSidebarRight.SLIDERITEMSIDS.search) {
-        appSidebarRight.searchTab.closeBtn?.click();
+        appSidebarRight.closeTab(AppSidebarRight.SLIDERITEMSIDS.search);
       }
 
       this.peerId = peerId;

src/components/chat/input.ts

@@ -345,13 +345,7 @@ export default class ChatInput {
     attachClickEvent(this.btnSend, this.onBtnSendClick, {listenerSetter: this.listenerSetter, touchMouseDown: true});
 
     if(this.recorder) {
-      const onCancelRecordClick = (e: Event) => {
+      attachClickEvent(this.btnCancelRecord, this.onCancelRecordClick, {listenerSetter: this.listenerSetter});
-        cancelEvent(e);
-        this.recordCanceled = true;
-        this.recorder.stop();
-        opusDecodeController.setKeepAlive(false);
-      };
-      attachClickEvent(this.btnCancelRecord, onCancelRecordClick, {listenerSetter: this.listenerSetter});
 
       this.recorder.onstop = () => {
         this.recording = false;
@@ -422,6 +416,16 @@ export default class ChatInput {
     this.rowsWrapper.classList.add('is-centered');
   }
 
+  private onCancelRecordClick = (e?: Event) => {
+    if(e) {
+      cancelEvent(e);
+    }
+    
+    this.recordCanceled = true;
+    this.recorder.stop();
+    opusDecodeController.setKeepAlive(false);
+  };
+
   private onEmoticonsOpen = () => {
     const toggleClass = isTouchSupported ? 'flip-icon' : 'active';
     this.btnToggleEmoticons.classList.toggle(toggleClass, true);
@@ -900,7 +904,7 @@ export default class ChatInput {
     if(!this.recorder || this.recording || !this.isInputEmpty() || this.forwardingMids.length || this.editMsgId) {
       if(this.recording) {
         if((Date.now() - this.recordStartTime) < RECORD_MIN_TIME) {
-          this.btnCancelRecord.click();
+          this.onCancelRecordClick();
         } else {
           this.recorder.stop();
         }

src/components/sidebarLeft/tabs/addMembers.ts

@@ -18,7 +18,7 @@ export default class AppAddMembersTab implements SliderTab {
   constructor() {
     this.nextBtn.addEventListener('click', () => {
       if(this.skippable) {
-        this.backBtn.click();
+        appSidebarLeft.closeTab(AppSidebarLeft.SLIDERITEMSIDS.addMembers);
         return;
       }
 
@@ -35,7 +35,7 @@ export default class AppAddMembersTab implements SliderTab {
         this.selector.freezed = true;
 
         appChatsManager.inviteToChannel(this.peerId, peerIds).then(() => {
-          this.backBtn.click();
+          appSidebarLeft.closeTab(AppSidebarLeft.SLIDERITEMSIDS.addMembers);
         });
       }
     });

src/components/sidebarLeft/tabs/editFolder.ts

@@ -91,7 +91,7 @@ export default class AppEditFolderTab implements SliderTab {
       this.deleteFolderBtn.setAttribute('disabled', 'true');
       appMessagesManager.filtersStorage.updateDialogFilter(this.filter, true).then(bool => {
         if(bool) {
-          this.closeBtn.click();
+          appSidebarLeft.closeTab(AppSidebarLeft.SLIDERITEMSIDS.editFolder);
         }
       }).finally(() => {
         this.deleteFolderBtn.removeAttribute('disabled');
@@ -127,7 +127,7 @@ export default class AppEditFolderTab implements SliderTab {
 
       promise.then(bool => {
         if(bool) {
-          this.closeBtn.click();
+          appSidebarLeft.closeTab(AppSidebarLeft.SLIDERITEMSIDS.editFolder);
         }
       }).catch(err => {
         if(err.type == 'DIALOG_FILTERS_TOO_MUCH') {

src/components/sidebarLeft/tabs/includedChats.ts

@@ -86,7 +86,7 @@ export default class AppIncludedChatsTab implements SliderTab {
       //this.filter.pinned_peers = this.filter.pinned_peers.filter(peerId => this.filter.include_peers.includes(peerId));
 
       appSidebarLeft.editFolderTab.setFilter(this.filter, false);
-      this.closeBtn.click();
+      appSidebarLeft.closeTab(AppSidebarLeft.SLIDERITEMSIDS.includedChats);
     });
   }
 

src/components/sidebarRight/tabs/gifs.ts

@@ -52,7 +52,7 @@ export default class AppGifsTab implements SliderTab {
     const fileId = target.dataset.docId;
     if(appImManager.chat.input.sendMessageWithDocument(fileId)) {
       if(mediaSizes.isMobile) {
-        this.backBtn.click();
+        appSidebarRight.closeTab(AppSidebarRight.SLIDERITEMSIDS.gifs);
       }
     } else {
       console.warn('got no doc by id:', fileId);

src/components/sidebarRight/tabs/pollResults.ts

@@ -71,7 +71,7 @@ export default class AppPollResultsTab implements SliderTab {
       list.classList.add('poll-results-voters');
 
       appDialogsManager.setListClickListener(list, () => {
-        this.closeBtn.click();
+        appSidebarRight.closeTab(AppSidebarRight.SLIDERITEMSIDS.pollResults);
       }, undefined, true);
 
       list.style.minHeight = Math.min(result.voters, 4) * 50 + 'px';

src/components/slider.ts

@@ -47,7 +47,7 @@ export default class SidebarSlider {
   }
 
   public closeTab = (tabId?: number) => {
-    if(tabId !== undefined && this.historyTabIds[this.historyTabIds.length - 1] != tabId) {
+    if(tabId !== undefined && this.historyTabIds[this.historyTabIds.length - 1] !== tabId) {
       return false;
     }
 
@@ -63,7 +63,7 @@ export default class SidebarSlider {
       id = id.id;
     }
 
-    if(this.historyTabIds[this.historyTabIds.length - 1] == id) {
+    if(this.historyTabIds[this.historyTabIds.length - 1] === id) {
       return false;
     }
 
@@ -86,7 +86,7 @@ export default class SidebarSlider {
   }
 
   public removeTabFromHistory(id: number) {
-    this.historyTabIds.findAndSplice(i => i == id);
+    this.historyTabIds.findAndSplice(i => i === id);
     this.onCloseTab(id);
   }
 
@@ -108,7 +108,7 @@ export default class SidebarSlider {
   public addTab(tab: SuperSliderTab) {
     let id: number;
     if(tab.container.parentElement) {
-      id = Array.from(this.sidebarEl.children).findIndex(el => el == tab.container);
+      id = Array.from(this.sidebarEl.children).findIndex(el => el === tab.container);
     } else {
       id = this.sidebarEl.childElementCount;
       this.sidebarEl.append(tab.container);

src/lib/appManagers/appImManager.ts

@@ -449,7 +449,7 @@ export class AppImManager {
       rootScope.broadcast('peer_changed', this.chat.peerId);
 
       if(appSidebarRight.historyTabIds[appSidebarRight.historyTabIds.length - 1] === AppSidebarRight.SLIDERITEMSIDS.search) {
-        appSidebarRight.searchTab.closeBtn?.click();
+        appSidebarRight.closeTab(AppSidebarRight.SLIDERITEMSIDS.search);
       }
   
       appSidebarRight.sharedMediaTab.setPeer(this.chat.peerId, this.chat.threadId);

src/scss/partials/pages/_pages.scss

@@ -40,6 +40,10 @@
       min-height: 3rem;
       /* height: 105px; */
       width: 100%;
+
+      /* @media screen and (min-height: 810px) {
+        height: 22vh;
+      } */
     }
   }