right sidebar links & half of audiomessages

src/components/wrappers.ts

@@ -155,6 +155,10 @@ export function wrapVideo(this: any, doc: MTDocument, container: HTMLDivElement,
 }
 
 export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement {
+  if(doc.type == 'voice') {
+    return wrapAudio(doc, withTime);
+  }
+
   let docDiv = document.createElement('div');
   docDiv.classList.add('document');
   
@@ -231,6 +235,69 @@ export function wrapDocument(doc: MTDocument, withTime = false): HTMLDivElement
   return docDiv;
 }
 
+export function wrapAudio(doc: MTDocument, withTime = false): HTMLDivElement {
+  let div = document.createElement('div');
+  div.classList.add('audio');
+
+  div.innerHTML = `
+  <div class="audio-toggle audio-ico tgico-largeplay"></div>
+  <div class="audio-download"><div class="tgico-download"></div></div>
+  <div class="audio-title"></div>
+  <div class="audio-subtitle"></div>
+  <div class="audio-time"></div>
+  `;
+
+  console.log('wrapping audio', doc);
+  
+  let downloadDiv = div.querySelector('.audio-download') as HTMLDivElement;
+  let preloader: ProgressivePreloader;
+  let promise: CancellablePromise<Blob>;
+
+  let onClick = () => {
+    if(!promise) {
+      if(downloadDiv.classList.contains('downloading')) {
+        return; // means not ready yet
+      }
+      
+      if(!preloader) {
+        preloader = new ProgressivePreloader(null, true);
+      }
+      
+      let promise = appDocsManager.downloadDoc(doc.id);
+      preloader.attach(downloadDiv, true, promise);
+
+      promise.then(blob => {
+        downloadDiv.classList.remove('downloading');
+        downloadDiv.remove();
+
+        let audio = document.createElement('audio');
+        let source = document.createElement('source');
+        source.src = URL.createObjectURL(blob);
+        source.type = doc.mime_type;
+
+        div.removeEventListener('click', onClick);
+        div.querySelector('.audio-toggle').addEventListener('click', () => {
+          audio.currentTime = 0;
+          audio.play();
+        });
+
+        audio.append(source);
+      });
+
+      downloadDiv.classList.add('downloading');
+    } else {
+      downloadDiv.classList.remove('downloading');
+      promise = null;
+    }
+  };
+  
+  div.addEventListener('click', onClick);
+
+  div.click();
+  
+  return div;
+}
+
 export function wrapPhoto(this: AppImManager, photo: any, message: any, container: HTMLDivElement) {
   //container.classList.add('photo');
   

src/lib/appManagers/appDialogsManager.ts

@@ -7,6 +7,7 @@ import appMessagesManager from "./appMessagesManager";
 import appUsersManager from "./appUsersManager";
 import { RichTextProcessor } from "../richtextprocessor";
 import { ripple } from "../../components/misc";
+import appSidebarLeft from "./appSidebarLeft";
 
 type DialogDom = {
   avatarDiv: HTMLDivElement,
@@ -246,6 +247,8 @@ export class AppDialogsManager {
       lastMessage = appMessagesManager.getMessage(dialog.top_message);
     }
 
+    console.log('setlastMessage:', lastMessage);
+
     if(lastMessage._ == 'messageEmpty') return;
 
     if(!dom) {
@@ -402,6 +405,20 @@ export class AppDialogsManager {
       dom.unreadMessagesSpan.classList.remove('unread', 'unread-muted');
       dom.unreadMessagesSpan.classList.add('tgico-pinnedchat');
     }
+
+    // set archived new count
+    if(dialog.folder_id == 1) {
+      let sum = Object.keys(this.domsArchived).map(p => +p).reduce((acc: number, peerID: number) => {
+        let dialog = appMessagesManager.getDialogByPeerID(peerID)[0];
+        if(dialog) {
+          return acc + dialog.unread_count;
+        }
+
+        return acc;
+      }, 0);
+
+      appSidebarLeft.archivedCount.innerText = '' + sum;
+    }
   }
 
   public getDialogDom(peerID: number) {

src/lib/appManagers/appImManager.ts

@@ -575,6 +575,8 @@ export class AppImManager {
     cancelBtn?: HTMLButtonElement
   } = {};
 
+  private setPeerPromise: Promise<boolean> = null;
+
   constructor() {
     this.log = logger('IM');
 
@@ -818,7 +820,26 @@ export class AppImManager {
           return;
         }
 
-        appMediaViewer.openMedia(message, target as HTMLImageElement);
+        let ids = Object.keys(this.bubbles).map(k => +k).filter(id => {
+          let message = appMessagesManager.getMessage(id);
+
+          return message.media && (message.media.photo 
+            || (message.media.document && (message.media.document.type == 'video' || message.media.document.type == 'gif'))
+            || (message.media.webpage && (message.media.webpage.document || message.media.webpage.photo)));
+        }).sort();
+        let idx = ids.findIndex(i => i == messageID);
+
+        let prev = ids[idx + 1] || null;
+        let next = ids[idx - 1] || null;
+
+        let prevTarget = this.bubbles[prev] ? this.bubbles[prev].querySelector('img, video') as HTMLElement : null;
+        let nextTarget = this.bubbles[next] ? this.bubbles[next].querySelector('img, video') as HTMLElement : null;
+
+        this.log('ids', ids, idx, this.bubbles[prev], this.bubbles[next]);
+
+        appMediaViewer.openMedia(message, target, nextTarget, prevTarget);
+
+        //appMediaViewer.openMedia(message, target as HTMLImageElement);
       }
 
       //console.log('chatInner click', e);
@@ -979,7 +1000,7 @@ export class AppImManager {
     
     this.contextMenu.querySelector('.menu-reply').addEventListener('click', () => {
       let message = appMessagesManager.getMessage(this.contextMenuMsgID);
-      this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID), message.message);
+      this.chatInputC.setTopInfo(appPeersManager.getPeerTitle(message.fromID, true), message.message);
       this.chatInputC.replyToMsgID = this.contextMenuMsgID;
       this.chatInputC.editMsgID = 0;
     });
@@ -1417,7 +1438,11 @@ export class AppImManager {
 
     let samePeer = this.peerID == peerID;
 
-    appMessagesManager.readHistory(this.peerID, lastMsgID); // lol
+    if(this.setPeerPromise && samePeer) return this.setPeerPromise;
+
+    if(lastMsgID) {
+      appMessagesManager.readHistory(peerID, lastMsgID); // lol
+    }
 
     if(samePeer) {
       if(!testScroll && !lastMsgID) {
@@ -1488,7 +1513,7 @@ export class AppImManager {
       this.chatInner.classList.remove('is-chat');
     }
 
-    return Promise.all([
+    return this.setPeerPromise = Promise.all([
       this.getHistory(forwarding ? lastMsgID + 1 : lastMsgID).then(() => {
         this.log('setPeer removing preloader');
 
@@ -1528,8 +1553,19 @@ export class AppImManager {
       }) */,
 
       appSidebarRight.fillProfileElements()
-    ]).catch(err => {
+    ]).then(() => {
+      if(this.peerID == peerID) {
+        this.setPeerPromise = null;
+      }
+
+      return true;
+    }).catch(err => {
+      if(this.peerID == peerID) {
+        this.setPeerPromise = null;
+      }
+      
       this.log.error('setPeer promises error:', err);
+      return false;
     });
   }
 
@@ -1591,7 +1627,7 @@ export class AppImManager {
   }
 
   public renderMessagesByIDs(msgIDs: number[]) {
-    if(!this.bubbles[this.firstTopMsgID]) { // seems search active
+    if(!this.bubbles[this.firstTopMsgID] && Object.keys(this.bubbles).length) { // seems search active
       this.log('seems search is active, skipping render:', msgIDs);
       return;
     }

src/lib/appManagers/appMediaViewer.ts

@@ -209,11 +209,11 @@ export class AppMediaViewer {
         if(mover.firstElementChild) {
           (mover.firstElementChild as HTMLElement).style.borderRadius = borderRadius;
         }
-      }, delay / 2);
 
-      if(target.tagName == 'DIV') {
+        if(target.tagName == 'DIV') {
-        mover.classList.add('cover');
+          mover.classList.add('cover');
-      }
+        }
+      }, delay / 2);
 
       setTimeout(() => {
         mover.innerHTML = '';

src/lib/appManagers/appMessagesManager.ts

@@ -1349,7 +1349,7 @@ export class AppMessagesManager {
         let wasDialogBefore = this.getDialogByPeerID(peerID)[0];
 
         // here need to just replace, not FULL replace dialog! WARNING
-        if(wasDialogBefore.pFlags.pinned) {
+        if(wasDialogBefore && wasDialogBefore.pFlags && wasDialogBefore.pFlags.pinned) {
           if(!dialog.pFlags) dialog.pFlags = {};
           dialog.pFlags.pinned = true;
           dialog.pinnedIndex = wasDialogBefore.pinnedIndex;

src/lib/appManagers/appSidebarLeft.ts

@@ -3,7 +3,7 @@ import { putPreloader, formatPhoneNumber } from "../../components/misc";
 import Scrollable from '../../components/scrollable';
 import appMessagesManager, { AppMessagesManager } from "./appMessagesManager";
 import appDialogsManager from "./appDialogsManager";
-import { isElementInViewport, numberWithCommas } from "../utils";
+import { isElementInViewport, numberWithCommas, cancelEvent } from "../utils";
 import appMessagesIDsManager from "./appMessagesIDsManager";
 import appImManager from "./appImManager";
 import appUsersManager from "./appUsersManager";
@@ -42,12 +42,13 @@ class AppSidebarLeft {
   private sidebarEl = document.querySelector('.page-chats .chats-container') as HTMLDivElement;
   private searchInput = document.getElementById('global-search') as HTMLInputElement;
   private toolsBtn = this.sidebarEl.querySelector('.sidebar-tools-button') as HTMLButtonElement;
+  private backBtn = this.sidebarEl.querySelector('.sidebar-back-button') as HTMLButtonElement;
   private searchContainer = this.sidebarEl.querySelector('#search-container') as HTMLDivElement;
   
   private menuEl = this.toolsBtn.querySelector('.btn-menu');
   private savedBtn = this.menuEl.querySelector('.menu-saved');
   private archivedBtn = this.menuEl.querySelector('.menu-archive');
-  private archivedCount = this.archivedBtn.querySelector('.archived-count') as HTMLSpanElement;
+  public archivedCount = this.archivedBtn.querySelector('.archived-count') as HTMLSpanElement;
   
   private listsContainer: HTMLDivElement = null;
   
@@ -120,8 +121,10 @@ class AppSidebarLeft {
     
     this.archivedBtn.addEventListener('click', (e) => {
       this.chatsArchivedContainer.classList.add('active');
-      this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
+      this.toolsBtn.classList.remove('active');
-      this.toolsBtn.classList.add('tgico-back');
+      this.backBtn.classList.add('active');
+      //this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
+      //this.toolsBtn.classList.add('tgico-back');
     });
     
     /* this.listsContainer.insertBefore(this.searchMessagesList, this.listsContainer.lastElementChild);
@@ -135,10 +138,11 @@ class AppSidebarLeft {
     
     //this.searchContainer.append(this.listsContainer);
     
-    let clickTimeout = 0;
     this.searchInput.addEventListener('focus', (e) => {
-      this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
+      /* this.toolsBtn.classList.remove('tgico-menu', 'btn-menu-toggle');
-      this.toolsBtn.classList.add('tgico-back');
+      this.toolsBtn.classList.add('tgico-back'); */
+      this.toolsBtn.classList.remove('active');
+      this.backBtn.classList.add('active');
       this.searchContainer.classList.add('active');
       
       if(!this.searchInput.value) {
@@ -149,15 +153,17 @@ class AppSidebarLeft {
 
       this.searchInput.addEventListener('blur', (e) => {
         if(!this.searchInput.value) {
-          this.toolsBtn.classList.add('tgico-menu');
+          /* this.toolsBtn.classList.add('tgico-menu');
-          this.toolsBtn.classList.remove('tgico-back');
+          this.toolsBtn.classList.remove('tgico-back'); */
+          this.toolsBtn.classList.add('active');
+          this.backBtn.classList.remove('active');
           this.searchContainer.classList.remove('active');
           
 
-          setTimeout(() => {
+          /* setTimeout(() => {
             //this.toolsBtn.click();
             this.toolsBtn.classList.add('btn-menu-toggle');
-          }, 200);
+          }, 200); */
         }
         
         /* this.peerID = 0;
@@ -188,24 +194,12 @@ class AppSidebarLeft {
       this.searchPromise = null;
       this.searchMore();
     });
-    
-    this.toolsBtn.addEventListener('click', (e) => {
-      this.log('click', this.toolsBtn.classList.contains('tgico-back'));
-      if(this.toolsBtn.classList.contains('tgico-back')) {
-        this.searchInput.value = '';
-        this.toolsBtn.classList.add('tgico-menu', 'btn-menu-toggle');
-        this.toolsBtn.classList.remove('tgico-back');
-        this.searchContainer.classList.remove('active');
-        this.chatsArchivedContainer.classList.remove('active');
-        this.peerID = 0;
-        e.stopPropagation();
-        e.cancelBubble = true;
-        e.preventDefault();
-        return false;
-      }
 
-      return true;
+    this.backBtn.addEventListener('click', (e) => {
-    }, true);
+      this.chatsArchivedContainer.classList.remove('active');
+      this.toolsBtn.classList.add('active');
+      this.backBtn.classList.remove('active');
+    });
     
     window.addEventListener('resize', () => {
       this.chatsLoadCount = Math.round(document.body.scrollHeight / 70 * 1.5);
@@ -250,10 +244,10 @@ class AppSidebarLeft {
         });
       }
 
-      if(archived) {
+      /* if(archived) {
         let count = result.count;
         this.archivedCount.innerText = '' + count;
-      }
+      } */
 
       this.log('loaded ' + this.chatsLoadCount + ' dialogs by offset:', offset, result, this.scroll.hiddenElements);
       this.scroll.onScroll();

src/lib/appManagers/appSidebarRight.ts

@@ -11,7 +11,7 @@ import { logger } from "../polyfill";
 import appImManager from "./appImManager";
 import appMediaViewer from "./appMediaViewer";
 import LazyLoadQueue from "../../components/lazyLoadQueue";
-import { wrapDocument } from "../../components/wrappers";
+import { wrapDocument, wrapAudio } from "../../components/wrappers";
 
 class AppSidebarRight {
   public sidebarEl = document.querySelector('.profile-container') as HTMLDivElement;
@@ -305,7 +305,7 @@ class AppSidebarRight {
             }
             
             case 'inputMessagesFilterDocument': {
-              if(!message.media.document) {
+              if(!message.media.document || message.media.document.type == 'voice') {
                 break;
               }
 
@@ -322,9 +322,79 @@ class AppSidebarRight {
               this.sharedMedia.contentDocuments.append(div);
               break;
             }
+
+            case 'inputMessagesFilterUrl': {
+              if(!message.media.webpage || message.media.webpage._ == 'webPageEmpty') {
+                break;
+              }
+
+              let webpage = message.media.webpage;
+              let div = document.createElement('div');
+              
+              let previewDiv = document.createElement('div');
+              previewDiv.classList.add('preview');
+
+              this.log('wrapping webpage', webpage);
+
+              if(webpage.photo) {
+                let load = () => appPhotosManager.preloadPhoto(webpage.photo.id, appPhotosManager.choosePhotoSize(webpage.photo, 380, 0))
+                .then((blob) => {
+                  if($rootScope.selectedPeerID != peerID) {
+                    this.log.warn('peer changed');
+                    return;
+                  }
+        
+                  previewDiv.style.backgroundImage = 'url(' + URL.createObjectURL(blob) + ')';
+                });
+  
+                this.lazyLoadQueueSidebar.push({div: previewDiv, load});
+              } else {
+                previewDiv.innerText = (webpage.title || webpage.description || webpage.url || webpage.display_url).slice(0, 1);
+                previewDiv.classList.add('empty');
+              }
+
+              let title = webpage.rTitle || '';
+              let subtitle = webpage.rDescription || '';
+              let url = RichTextProcessor.wrapRichText(webpage.url || '');
+
+              if(!title) {
+                //title = new URL(webpage.url).hostname;
+                title = webpage.display_url.split('/', 1)[0];
+              }
+
+              div.append(previewDiv);
+              div.insertAdjacentHTML('beforeend', `
+                <div class="title">${title}</div>
+                <div class="subtitle">${subtitle}</div>
+                <div class="url">${url}</div>
+              `);
+
+              if(div.innerText.trim().length) {
+                this.sharedMedia.contentLinks.append(div);
+              }
+
+              break;
+            }
+
+            /* case 'inputMessagesFilterVoice': {
+              //this.log('wrapping audio', message.media);
+              if(!message.media || !message.media.document || message.media.document.type != 'voice') {
+                break;
+              }
+
+              let doc = message.media.document;
+
+              this.log('wrapping audio', doc);
+
+              let audioDiv = wrapAudio(doc);
+
+              this.sharedMedia.contentAudio.append(audioDiv);
+
+              break;
+            } */
             
             default:
-              //console.warn('death is my friend', message);
+              console.warn('death is my friend', message);
               break;
           }
         });

src/lib/appManagers/appUsersManager.ts

@@ -291,7 +291,7 @@ export class AppUsersManager {
 
   public getUserInput(id: number) {
     var user = this.getUser(id);
-    if(user.pFlags.self) {
+    if(user.pFlags && user.pFlags.self) {
       return {_: 'inputUserSelf'};
     }
 

src/lib/utils.js

@@ -328,7 +328,8 @@ export const langPack = {
 	"messageActionChannelCreate": "Channel created",
 	"messageActionChannelEditTitle": "Channel renamed",
 	"messageActionChannelEditPhoto": "Channel photo updated",
-	"messageActionChannelDeletePhoto": "Channel photo removed",
+  "messageActionChannelDeletePhoto": "Channel photo removed",
+  "messageActionHistoryClear": "History cleared",
 
   "messageActionPhoneCall.in_ok": "Incoming Call",
 	"messageActionPhoneCall.out_ok": "Outgoing Call",
@@ -582,7 +583,7 @@ export function calcImageInBox (imageW, imageH, boxW, boxH, noZooom) {
   if(imageW < boxW && imageH < boxH) {
     return {w: imageW, h: imageH};
   }
-  
+
   var boxedImageW = boxW
   var boxedImageH = boxH
 

src/scss/partials/_chat.scss

@@ -52,6 +52,7 @@
 		background-color: #fff;
 		box-sizing: border-box;
 		user-select: none;
+		-webkit-user-select: none;
 		display: flex;
 		align-items: center;
 		box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
@@ -171,6 +172,7 @@
 			opacity: 0;
 			transition: .2s opacity;
 			user-select: none;
+			-webkit-user-select: none;
 
 			&:before {
 				margin-left: .75px;
@@ -279,6 +281,7 @@
 				box-shadow: none;
 				line-height: 1;
 				user-select: none;
+				-webkit-user-select: none;
 				
 				.attachment {
 					padding-top: .5rem;
@@ -445,6 +448,7 @@
 						margin-bottom: 3px;
 						overflow: hidden;
 						user-select: none;
+						-webkit-user-select: none;
 						cursor: pointer;
 						position: relative;
 
@@ -1236,6 +1240,7 @@
 				border-radius: 8px;
 				cursor: pointer;
 				user-select: none;
+				-webkit-user-select: none;
 				
 				width: 44px;
 				height: 44px;
@@ -1282,6 +1287,7 @@
 				/* overflow: hidden; */
 				cursor: pointer;
 				user-select: none;
+				-webkit-user-select: none;
 				/* margin: 3.5px 0;
 				margin-right: 6.25px; */
 				padding: 1px 2.5px;

src/scss/partials/_leftSidebar.scss

@@ -38,6 +38,42 @@
     }
   }
 
+  .sidebar-header__btn-container {
+    position: relative;
+    width: 39.75px;
+    height: 39px;
+
+    > * {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      transition: .2s opacity;
+      z-index: 2;
+
+      &:before {
+        transition: .2s transform;
+        transform: rotate(180deg);
+      }
+
+      & + * {
+        margin-left: 0!important;
+      }
+
+      &.active {
+        margin-top: 1px;
+        opacity: 1;
+        visibility: visible;
+        color: #707579;
+
+        &:before {
+          transform: rotate(0deg);
+        }
+      }
+    }
+  }
+
   .sidebar-tools-button .btn-menu {
     width: 217px;
 
@@ -55,6 +91,10 @@
       position: absolute;
       right: 16px;
     }
+
+    .archived-count:empty {
+      display: none;
+    }
   }
 
   .search-group {

src/scss/partials/_mediaViewer.scss

@@ -200,6 +200,9 @@
     img, video {
       width: 100%;
       height: 100%;
+      opacity: 1;
+      transition: .2s opacity;
+      user-select: none;
     }
 
     &.cover {
@@ -209,6 +212,7 @@
         width: auto;
         height: auto;
         overflow: hidden;
+        opacity: 0;
       }
     }
 

src/scss/partials/_sidebar.scss

@@ -184,5 +184,60 @@
         text-overflow: ellipsis;
       }
     }
+
+    #content-links {
+      padding: 0 15px 15px 15px;
+
+      > div {
+        display: flex;
+        flex-direction: column;
+        margin-top: 15px;
+        padding-bottom: 10px;
+        position: relative;
+        padding-left: 60px;
+        overflow: hidden;
+        //min-height: 48px;
+        min-height: 58px;
+
+        .preview {
+          height: 48px;
+          width: 48px;
+          border-radius: $border-radius;
+          overflow: hidden;
+          position: absolute;
+          left: 0;
+          top: 0;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center center;
+
+          &.empty {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            color: #fff;
+            text-transform: uppercase;
+            background-color: $blue;
+          }
+        }
+
+        .url {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+
+    #content-audio {
+      padding: 0 15px 15px 15px;
+
+      > div {
+        margin-top: 15px;
+        padding-bottom: 10px;
+        min-height: 60px;
+      }
+    }
   }
 }

src/scss/style.scss

@@ -391,49 +391,20 @@ input {
 
 .document {
   padding-left: 4.5rem;
-  display: flex;
-  flex-direction: column;
   height: 70px;
-  justify-content: center;
-  cursor: pointer;
-  position: relative;
   
-  .document-ico, .document-download {
+  &-ico, &-download {
-    position: absolute;
-    left: 0;
-    width: 54px;
-    height: 54px;
-    color: #fff;
     font-weight: 500;
     letter-spacing: 1px;
     font-size: 1.1rem;
-    display: flex;
-    justify-content: center;
     background-size: contain;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .document-download {
+  &-download {
-    z-index: 3;
     background-color: rgb(101, 161, 227);	
     border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 24px;
-    cursor: pointer;
-    
-    .tgico-download {
-      transform: scale(1);
-      transition: .2s scale;
-    }
-
-    &.downloading {
-      .tgico-download {
-        transform: scale(0);
-      }
-    }
   }
 
   &:not(.photo) {
@@ -449,19 +420,55 @@ input {
     }
   }
   
-  .document-name {
+  &-name {
     white-space: nowrap;
     font-weight: 500;
     line-height: 1.3;
   }
   
-  .document-size {
+  &-size {
     white-space: nowrap;
     color: $darkgrey;
     font-size: 14px;
     padding-right: 32px;
     line-height: 1.3;
   }
+}
+
+.document, .audio {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+
+  &-ico, &-download {
+    position: absolute;
+    left: 0;
+    width: 54px;
+    height: 54px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+  }
+
+  &-download {
+    z-index: 3;
+    align-items: center;
+    font-size: 24px;
+    cursor: pointer;
+    
+    .tgico-download {
+      transform: scale(1);
+      transition: .2s scale;
+    }
+
+    &.downloading {
+      .tgico-download {
+        transform: scale(0);
+      }
+    }
+  }
 
   .preloader-container {
     width: 42px;
@@ -469,6 +476,24 @@ input {
   }
 }
 
+.audio {
+  position: relative;
+  padding-left: 67px;
+  min-height: 54px;
+  width: 256px;
+
+  &-toggle, &-download {
+    border-radius: 50%;
+    background-color: $blue;
+    font-size: 2.5rem;
+    align-items: center;
+  }
+
+  &-download {
+    z-index: 2;
+  }
+}
+
 .page-signUp {
   .auth-image {
     border-radius: 50%;