New audio styles

src/components/appSearch.ts

@@ -251,7 +251,7 @@ export default class AppSearch {
       
       const {count, history, next_rate} = res;
       
-      if(history[0].mid == this.minMsgId) {
+      if(history.length && history[0].mid == this.minMsgId) {
         history.shift();
       }
       
@@ -269,7 +269,7 @@ export default class AppSearch {
 
       searchGroup.toggle();
       
-      this.minMsgId = history[history.length - 1].mid;
+      this.minMsgId = history.length && history[history.length - 1].mid;
       this.offsetRate = next_rate;
       
       if(this.loadedCount == -1) {

src/components/audio.ts

@@ -259,16 +259,17 @@ function wrapAudio(audioEl: AudioElement) {
   let subtitle = doc.audioPerformer ? RichTextProcessor.wrapPlainText(doc.audioPerformer) : '';
 
   if(withTime) {
-    subtitle += (subtitle ? ' · ' : '') + formatDate(doc.date);
+    subtitle += (subtitle ? ' • ' : '') + formatDate(doc.date);
   } else if(!subtitle) {
     subtitle = 'Unknown Artist';
   }
 
+  subtitle = ' • ' + subtitle;
+
   const html = `
   <div class="audio-details">
     <div class="audio-title"><middle-ellipsis-element data-font-weight="${audioEl.dataset.fontWeight}">${title}</middle-ellipsis-element></div>
-    <div class="audio-subtitle">${subtitle}</div>
-    <div class="audio-time"></div>
+    <div class="audio-subtitle"><div class="audio-time"></div>${subtitle}</div>
   </div>`;
   
   audioEl.insertAdjacentHTML('beforeend', html);
@@ -282,7 +283,7 @@ function wrapAudio(audioEl: AudioElement) {
     audioEl.addAudioListener('ended', () => {
       audioEl.classList.remove('audio-show-progress');
       // Reset subtitle
-      subtitleDiv.innerHTML = subtitle;
+      subtitleDiv.lastChild.replaceWith(subtitle);
       launched = false;
     });
 
@@ -291,9 +292,8 @@ function wrapAudio(audioEl: AudioElement) {
         audioEl.classList.add('audio-show-progress');
         launched = true;
 
-        subtitleDiv.innerHTML = '';
         if(progressLine) {
-          subtitleDiv.append(progressLine.container);
+          subtitleDiv.lastChild.replaceWith(progressLine.container);
         }
       }
     };
@@ -335,9 +335,10 @@ export default class AudioElement extends HTMLElement {
     this.classList.add('audio');
 
     const doc = this.message.media.document || this.message.media.webpage.document;
+    const isVoice = doc.type == 'voice';
     const uploading = this.message.pFlags.is_outgoing;
 
-    const durationStr = String(doc.duration | 0).toHHMMSS(true);
+    const durationStr = String(doc.duration | 0).toHHMMSS();
 
     this.innerHTML = `<div class="audio-toggle audio-ico tgico-largeplay">    
                          <div class="part one" x="0" y="0" fill="#fff"></div>
@@ -346,15 +347,15 @@ export default class AudioElement extends HTMLElement {
 
     const downloadDiv = document.createElement('div');
     downloadDiv.classList.add('audio-download');
-    if(!uploading && doc.type != 'audio') {
+    if(!uploading && isVoice) {
       downloadDiv.innerHTML = '<div class="tgico-download"></div>';
     }
 
-    if(doc.type != 'audio' || uploading) {
+    if(isVoice || uploading) {
       this.append(downloadDiv);
     }
 
-    const onTypeLoad = doc.type == 'voice' ? wrapVoiceMessage(this) : wrapAudio(this);
+    const onTypeLoad = isVoice ? wrapVoiceMessage(this) : wrapAudio(this);
     
     const audioTimeDiv = this.querySelector('.audio-time') as HTMLDivElement;
     audioTimeDiv.innerHTML = durationStr;
@@ -366,8 +367,10 @@ export default class AudioElement extends HTMLElement {
       
       const toggle = this.querySelector('.audio-toggle') as HTMLDivElement;
 
+      const getTimeStr = () => String(audio.currentTime | 0).toHHMMSS() + (isVoice ? (' / ' + durationStr) : '');
+
       const onPlaying = () => {
-        audioTimeDiv.innerText = String(audio.currentTime | 0).toHHMMSS(true) + ' / ' + durationStr;
+        audioTimeDiv.innerText = getTimeStr();
         if(!audio.paused) {
           //toggle.classList.remove('tgico-largeplay');
           toggle.classList.add('tgico-largepause');
@@ -376,7 +379,6 @@ export default class AudioElement extends HTMLElement {
 
       if(!audio.paused || (audio.currentTime > 0 && audio.currentTime != audio.duration)) {
         onPlaying();
-        audioTimeDiv.innerText = String(audio.currentTime | 0).toHHMMSS(true) + ' / ' + durationStr;
       }
 
       attachClickEvent(toggle, (e) => {
@@ -392,7 +394,7 @@ export default class AudioElement extends HTMLElement {
 
       this.addAudioListener('timeupdate', () => {
         if(appMediaPlaybackController.isSafariBuffering(audio)) return;
-        audioTimeDiv.innerText = String(audio.currentTime | 0).toHHMMSS(true) + ' / ' + durationStr;
+        audioTimeDiv.innerText = getTimeStr();
       });
 
       this.addAudioListener('pause', () => {
@@ -406,7 +408,7 @@ export default class AudioElement extends HTMLElement {
     if(!uploading) {
       let preloader: ProgressivePreloader = this.preloader;
 
-      if(doc.type == 'voice') {
+      if(isVoice) {
         let download: Download;
 
         const onClick = (e: Event) => {

src/components/chat/bubbles.ts

@@ -1143,7 +1143,7 @@ export default class ChatBubbles {
     this.log('setPeer peerId:', this.peerId, historyStorage, lastMsgId, topMessage);
 
     // add last message, bc in getHistory will load < max_id
-    const additionMsgId = isJump || this.chat.type !== 'chat' ? 0 : topMessage;
+    const additionMsgId = isJump || (this.chat.type !== 'chat' && this.chat.type !== 'discussion') ? 0 : topMessage;
 
     /* this.setPeerPromise = null;
     this.preloader.detach();
@@ -2041,7 +2041,7 @@ export default class ChatBubbles {
               nameContainer = newNameContainer;
             }
 
-            const lastContainer = messageDiv.lastElementChild.querySelector('.document-size');
+            const lastContainer = messageDiv.lastElementChild.querySelector('.document-size, .audio');
             lastContainer && lastContainer.append(timeSpan.cloneNode(true));
 
             bubble.classList.remove('is-message-empty');

src/components/chat/chat.ts

@@ -138,7 +138,7 @@ export default class Chat extends EventListenerBase<{
 
     if(this.type === 'discussion' && !this.threadId) {
       this.threadId = lastMsgId;
-      lastMsgId = 0;
+      lastMsgId = undefined;
     }
 
     //console.time('appImManager setPeer');

src/components/chat/messageRender.ts

@@ -1,6 +1,7 @@
 import { getFullDate } from "../../helpers/date";
 import { formatNumber } from "../../helpers/number";
 import { MessageReplies } from "../../layer";
+import appMessagesManager from "../../lib/appManagers/appMessagesManager";
 import appPeersManager from "../../lib/appManagers/appPeersManager";
 import RichTextProcessor from "../../lib/richtextprocessor";
 import { ripple } from "../ripple";
@@ -100,7 +101,8 @@ export namespace MessageRender {
       }
 
       if(replies) {
-        if(replies.read_max_id < replies.max_id) {
+        const historyStorage = appMessagesManager.getHistoryStorage(-replies.channel_id);
+        if(replies.read_max_id < replies.max_id && (!historyStorage.readMaxId || historyStorage.readMaxId < replies.max_id)) {
           container.classList.add('is-unread');
         }
       }

src/components/popups/datePicker.ts

@@ -1,5 +1,6 @@
 import PopupElement, { PopupOptions } from ".";
 import { getFullDate, months } from "../../helpers/date";
+import mediaSizes from "../../helpers/mediaSizes";
 import InputField from "../inputField";
 
 export default class PopupDatePicker extends PopupElement {
@@ -272,7 +273,8 @@ export default class PopupDatePicker extends PopupElement {
   }
 
   public setMonth() {
-    this.monthTitle.innerText = months[this.selectedMonth.getMonth()] + ' ' + this.selectedMonth.getFullYear();
+    const monthName = months[this.selectedMonth.getMonth()];
+    this.monthTitle.innerText = (this.timeDiv && mediaSizes.isMobile ? monthName.slice(0, 3) : monthName) + ' ' + this.selectedMonth.getFullYear();
 
     if(this.month) {
       this.month.remove();

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -533,6 +533,9 @@ export default class AppSharedMediaTab implements SliderTab {
             withTime: true,
             fontWeight: 400
           });
+          if(message.media.document.type === 'audio') {
+            div.classList.add('audio-48');
+          }
           div.dataset.mid = '' + message.mid;
           elemsToAppend.push(div);
         }

src/lib/appManagers/appChatsManager.ts

@@ -212,7 +212,7 @@ export class AppChatsManager {
 
   public getChat(id: number) {
     if(id < 0) id = -id;
-    return this.chats[id] || {_: 'chatEmpty', id: id, deleted: true, access_hash: ''/* this.channelAccess[id] */};
+    return this.chats[id] || {_: 'chatEmpty', id, deleted: true, access_hash: '', pFlags: {}/* this.channelAccess[id] */};
   }
 
   public hasRights(id: number, action: ChatRights, flag?: keyof ChatBannedRights['pFlags']) {
@@ -222,7 +222,7 @@ export class AppChatsManager {
     if(chat._ == 'chatForbidden' ||
         chat._ == 'channelForbidden' ||
         chat.pFlags.kicked ||
-        chat.pFlags.left) {
+        (chat.pFlags.left && !chat.pFlags.megagroup)) {
       return false;
     }
 
@@ -387,7 +387,7 @@ export class AppChatsManager {
     const chat = this.getChat(id);
 
     const isChannel = this.isBroadcast(id);
-    const participants_count = chat.participants_count || chat.participants?.participants.length || 0;
+    const participants_count = chat.participants_count || chat.participants?.participants.length || 1;
     return numberWithCommas(participants_count) + ' ' + (isChannel ? 'followers' : 'members');
   }
 

src/lib/appManagers/appDocsManager.ts

@@ -157,7 +157,8 @@ export class AppDocsManager {
     }
 
     // for testing purposes
-    //doc.supportsStreaming = false;
+    // doc.supportsStreaming = false;
+    // doc.url = '';
     
     if(!doc.file_name) {
       doc.file_name = '';
@@ -304,7 +305,7 @@ export class AppDocsManager {
       download = originalPromise.then(async(blob) => {
         let reader = new FileReader();
   
-        await new Promise((resolve, reject) => {
+        await new Promise<void>((resolve, reject) => {
           reader.onloadend = (e) => {
             let uint8 = new Uint8Array(e.target.result as ArrayBuffer);
             //console.log('sending uint8 to decoder:', uint8);

src/lib/appManagers/appDownloadManager.ts

@@ -102,6 +102,8 @@ export class AppDownloadManager {
     };
 
     const tryDownload = (): Promise<unknown> => {
+      //return Promise.resolve();
+
       if(!apiManager.worker) {
         return this.cacheStorage.getFile(fileName).then((blob) => {
           if(blob.size < options.size) throw 'wrong size';

src/lib/appManagers/appImManager.ts

@@ -577,14 +577,13 @@ export class AppImManager {
 
     if(peerId < 0) { // not human
       const chat = appPeersManager.getPeer(peerId);
-      const isChannel = appPeersManager.isChannel(peerId) && !appPeersManager.isMegagroup(peerId);
 
       const chatInfo = await appProfileManager.getChatFull(chat.id) as any;
       this.chat.log('chatInfo res:', chatInfo);
 
-      const participants_count = chatInfo.participants_count || (chatInfo.participants && chatInfo.participants.participants && chatInfo.participants.participants.length);
-      if(participants_count) {
-        subtitle = numberWithCommas(participants_count) + ' ' + (isChannel ? 'followers' : 'members');
+      const participants_count = chatInfo.participants_count || (chatInfo.participants && chatInfo.participants.participants && chatInfo.participants.participants.length) || 1;
+      //if(participants_count) {
+        subtitle = appChatsManager.getChatMembersString(-peerId);
 
         if(participants_count < 2) return subtitle;
         const onlines = await appChatsManager.getOnlines(chat.id);
@@ -593,7 +592,7 @@ export class AppImManager {
         }
   
         return subtitle;
-      }
+      //}
     } else if(!appUsersManager.isBot(peerId)) { // user
       const user = appUsersManager.getUser(peerId);
       

src/lib/appManagers/appMessagesManager.ts

@@ -228,6 +228,7 @@ export class AppMessagesManager {
     }); */
 
     function timedChunk(items: any[], process: (...args: any[]) => any, context: any, callback: (...args: any[]) => void) {
+      if(!items.length) return callback(items);
       const todo = items.slice();
 
       const f = () => {
@@ -322,6 +323,10 @@ export class AppMessagesManager {
 
         this.saveMessages(messages);
       }
+
+      if(!state.dialogs || !Object.keys(state.dialogs).length) {
+        state.allDialogsLoaded = {};
+      }
       
       if(state.allDialogsLoaded) {
         this.dialogsStorage.allDialogsLoaded = state.allDialogsLoaded;
@@ -1315,7 +1320,7 @@ export class AppMessagesManager {
     if(peerId < 0 && (appPeersManager.isBroadcast(peerId) || appPeersManager.getPeer(peerId).admin_rights?.pFlags?.anonymous)) {
       return undefined;
     } else {
-      return appPeersManager.getOutputPeer(peerId);
+      return appPeersManager.getOutputPeer(appUsersManager.getSelf().id);
     }
   }
 
@@ -1343,8 +1348,7 @@ export class AppMessagesManager {
     }
   }
 
-  public setDialogTopMessage(message: MyMessage) {
-    const dialog = this.getDialogByPeerId(message.peerId)[0];
+  public setDialogTopMessage(message: MyMessage, dialog: MTDialog.dialog = this.getDialogByPeerId(message.peerId)[0]) {
     if(dialog) {
       dialog.top_message = message.mid;
       
@@ -1479,7 +1483,13 @@ export class AppMessagesManager {
 
   public isHistoryUnread(peerId: number, threadId?: number) {
     const historyStorage = this.getHistoryStorage(peerId, threadId);
-    return (peerId > 0 ? Math.max(historyStorage.readMaxId, historyStorage.readOutboxMaxId) : historyStorage.readMaxId) < historyStorage.maxId;
+    if(threadId) {
+      const chatHistoryStorage = this.getHistoryStorage(peerId);
+      const readMaxId = Math.max(chatHistoryStorage.readMaxId, historyStorage.readMaxId);
+      return readMaxId < historyStorage.maxId;
+    } else {
+      return (peerId > 0 ? Math.max(historyStorage.readMaxId, historyStorage.readOutboxMaxId) : historyStorage.readMaxId) < historyStorage.maxId;
+    }
   }
 
   public getTopMessages(limit: number, folderId: number): Promise<number> {
@@ -1931,7 +1941,7 @@ export class AppMessagesManager {
     isScheduled: true,
     isOutgoing: true
   }> = {}) {
-    let groups: Map<number, string>;
+    let groups: Set<string>;
     messages.forEach((message) => {
       if(message.pFlags === undefined) {
         message.pFlags = {};
@@ -2163,10 +2173,10 @@ export class AppMessagesManager {
 
       if(message.grouped_id) {
         if(!groups) {
-          groups = new Map();
+          groups = new Set();
         }
 
-        groups.set(peerId, message.grouped_id);
+        groups.add(message.grouped_id);
       } else {
         message.rReply = this.getRichReplyText(message);
       }
@@ -2181,10 +2191,10 @@ export class AppMessagesManager {
     });
 
     if(groups) {
-      for(const [peerId, groupId] of groups) {
+      for(const groupId of groups) {
         const mids = this.groupedMessagesStorage[groupId];
         for(const mid in mids) {
-          const message = (options.storage || this.getMessagesStorage(peerId))[mid];
+          const message = this.groupedMessagesStorage[groupId][mid];
           message.rReply = this.getRichReplyText(message);
         }
       }
@@ -3016,9 +3026,9 @@ export class AppMessagesManager {
 
       const message = result.messages[0] as MyMessage;
       const historyStorage = this.getHistoryStorage(message.peerId, message.mid);
-      historyStorage.maxId = this.generateMessageId(result.max_id) || 0;
-      historyStorage.readMaxId = this.generateMessageId(result.read_inbox_max_id) || 0;
-      historyStorage.readOutboxMaxId = this.generateMessageId(result.read_outbox_max_id) || 0;
+      result.max_id = historyStorage.maxId = this.generateMessageId(result.max_id) || 0;
+      result.read_inbox_max_id = historyStorage.readMaxId = this.generateMessageId(result.read_inbox_max_id) || 0;
+      result.read_outbox_max_id = historyStorage.readOutboxMaxId = this.generateMessageId(result.read_outbox_max_id) || 0;
 
       return result;
     });
@@ -3069,14 +3079,14 @@ export class AppMessagesManager {
   public deleteMessages(peerId: number, mids: number[], revoke?: true) {
     let promise: Promise<any>;
 
-    mids = mids.map(mid => this.getLocalMessageId(mid));
+    const localMessageIds = mids.map(mid => this.getLocalMessageId(mid));
 
     if(peerId < 0 && appPeersManager.isChannel(peerId)) {
       const channelId = -peerId;
       const channel = appChatsManager.getChat(channelId);
       if(!channel.pFlags.creator && !(channel.pFlags.editor && channel.pFlags.megagroup)) {
         const goodMsgIds: number[] = [];
-        if (channel.pFlags.editor || channel.pFlags.megagroup) {
+        if(channel.pFlags.editor || channel.pFlags.megagroup) {
           mids.forEach((msgId, i) => {
             const message = this.getMessageByPeer(peerId, mids[i]);
             if(message.pFlags.out) {
@@ -3094,7 +3104,7 @@ export class AppMessagesManager {
 
       promise = apiManager.invokeApi('channels.deleteMessages', {
         channel: appChatsManager.getChannelInput(channelId),
-        id: mids
+        id: localMessageIds
       }).then((affectedMessages) => {
         apiUpdatesManager.processUpdateMessage({
           _: 'updateShort',
@@ -3110,7 +3120,7 @@ export class AppMessagesManager {
     } else {
       promise = apiManager.invokeApi('messages.deleteMessages', {
         revoke,
-        id: mids
+        id: localMessageIds
       }).then((affectedMessages) => {
         apiUpdatesManager.processUpdateMessage({
           _: 'updateShort',
@@ -3128,6 +3138,7 @@ export class AppMessagesManager {
   }
 
   public readHistory(peerId: number, maxId = 0) {
+    return Promise.resolve(true);
     // console.trace('start read')
     if(!this.isHistoryUnread(peerId)) return Promise.resolve(true);
 
@@ -3233,7 +3244,7 @@ export class AppMessagesManager {
 
   public getHistoryStorage(peerId: number, threadId?: number) {
     if(threadId) {
-      threadId = this.getLocalMessageId(threadId);
+      //threadId = this.getLocalMessageId(threadId);
       if(!this.threadsStorage[peerId]) this.threadsStorage[peerId] = {};
       return this.threadsStorage[peerId][threadId] ?? (this.threadsStorage[peerId][threadId] = {count: null, history: [], pending: []});
     }
@@ -3276,7 +3287,7 @@ export class AppMessagesManager {
         const storage = this.getMessagesStorage(peerId);
         const foundDialog = this.getDialogByPeerId(peerId);
 
-        if(!foundDialog.length) {
+        if(!foundDialog.length && (peerId > 0 || !appChatsManager.getChat(-peerId).pFlags.left)) {
           this.newDialogsToHandle[peerId] = {reload: true};
           this.scheduleHandleNewDialogs();
           if(this.newUpdatesAfterReloadToHandle[peerId] === undefined) {
@@ -3286,17 +3297,16 @@ export class AppMessagesManager {
           break;
         }
 
-        if(update._ == 'updateNewChannelMessage') {
+        /* if(update._ == 'updateNewChannelMessage') {
           const chat = appChatsManager.getChat(-peerId);
           if(chat.pFlags && (chat.pFlags.left || chat.pFlags.kicked)) {
             break;
           }
-        }
+        } */
 
         this.saveMessages([message], {storage});
         // this.log.warn(dT(), 'message unread', message.mid, message.pFlags.unread)
 
-        const dialog = foundDialog[0];
         const pendingMessage = this.checkPendingMessage(message);
 
         const historyStorage = this.getHistoryStorage(peerId);
@@ -3335,11 +3345,14 @@ export class AppMessagesManager {
             this.newMessagesHandlePromise = window.setTimeout(this.handleNewMessages, 0);
           }
         }
-
-        const inboxUnread = !message.pFlags.out && message.pFlags.unread;
-        this.setDialogTopMessage(message);
-        if(inboxUnread) {
-          dialog.unread_count++;
+        
+        const dialog = foundDialog[0];
+        if(dialog) {
+          const inboxUnread = !message.pFlags.out && message.pFlags.unread;
+          this.setDialogTopMessage(message, dialog);
+          if(inboxUnread) {
+            dialog.unread_count++;
+          }
         }
 
         break;
@@ -3830,7 +3843,7 @@ export class AppMessagesManager {
           break;
         } */
 
-        const messages = update.messages; 
+        const messages = update.messages.map(id => this.generateMessageId(id)); 
 
         const storage = this.getMessagesStorage(peerId);
         const missingMessages = messages.filter(mid => !storage[mid]);
@@ -4141,10 +4154,6 @@ export class AppMessagesManager {
   }
 
   public getHistory(peerId: number, maxId = 0, limit: number, backLimit?: number, threadId?: number) {
-    if(threadId) {
-      threadId = this.getLocalMessageId(threadId);
-    }
-
     if(this.migratedFromTo[peerId]) {
       peerId = this.migratedFromTo[peerId];
     }
@@ -4343,7 +4352,7 @@ export class AppMessagesManager {
 
     const options = {
       peer: appPeersManager.getInputPeerById(peerId),
-      msg_id: threadId,
+      msg_id: this.getLocalMessageId(threadId) || 0,
       offset_id: this.getLocalMessageId(maxId) || 0,
       offset_date: offsetDate,
       add_offset: offset,

src/lib/logger.ts

@@ -13,7 +13,7 @@ function dT() {
 }
 
 export function logger(prefix: string, level = LogLevels.log | LogLevels.warn | LogLevels.error) {
-  if(process.env.NODE_ENV != 'development' || true) {
+  if(process.env.NODE_ENV != 'development'/*  || true */) {
     level = LogLevels.error;
   }
 

src/lib/storage.ts

@@ -86,7 +86,7 @@ class AppStorage {
         if(this.useCS) {
           try {
             //console.log('setItem: will set', key/* , value */);
-            await this.cacheStorage.delete(key); // * try to prevent memory leak in Chrome leading to 'Unexpected internal error.'
+            //await this.cacheStorage.delete(key); // * try to prevent memory leak in Chrome leading to 'Unexpected internal error.'
             await this.cacheStorage.save(key, new Response(value, {headers: {'Content-Type': 'application/json'}}));
             //console.log('setItem: have set', key/* , value */);
           } catch(e) {

src/scss/partials/_audio.scss

@@ -1,9 +1,9 @@
 .audio {
   position: relative;
   padding-left: 67px;
-  min-height: 58px;
-  max-width: 258px;
   overflow: visible!important;
+  height: 54px;
+  user-select: none;
 
   @include respond-to(handhelds) {
     padding-left: 45px;
@@ -341,6 +341,7 @@
 
   &-waveform {
     height: 23px;
+    margin-top: -4px;
 
     //overflow: visible!important;
 
@@ -354,57 +355,113 @@
     }
   }
 
+  //&.audio-54 {
+    &-details {
+      margin-top: 4px;
+      margin-bottom: 2px;
+    }
+  //}
+
+  &.audio-48 {
+    .audio-details {
+      margin-top: 3px;
+      margin-bottom: 0;
+    }
+
+    .audio-title {
+      margin-bottom: -2px;
+    }
+  }
+
   &-title {
     font-size: 1rem;
     color: #000;
-    user-select: none;
   }
 
   &-time, &-subtitle {
     font-size: 14px;
     color: $color-gray;
-    margin-top: 3px;
-    margin-left: -1px;
-    user-select: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
 
     @include respond-to(handhelds) {
-      margin-top: 1px;
       font-size: 12px;
     }
   }
 
+  // * for audio
+  &-subtitle {
+    align-items: center;
+
+    .audio-time {
+      flex: 0 0 auto;
+      margin-right: 4px;
+    }
+  }
+
+  // * for audio
+  &-title, &-subtitle {
+    margin-left: -1px;
+  }
+
+  // * for audio
   &-title, &:not(.audio-show-progress) &-subtitle {
     white-space: nowrap;
 		overflow: hidden;
 		max-width: 100%;
 		text-overflow: ellipsis;
   }
-
-
-  @include respond-to(handhelds) {
-    &-download {
-      //background: transparent;
-      margin-left: 6px;
-      margin-top: 6px;
+  
+  &.is-voice {
+    .audio-time {
+      line-height: 1;
+      margin-left: -1px;
+      margin-top: 2px;
     }
 
-    &.is-voice {
-      .audio-download {
-        margin: 0;
+    &.is-unread {
+      .audio-time {
+        &:after {
+          content: " ";
+          width: .5rem;
+          height: .5rem;
+          background-color: $color-blue;
+          border-radius: 50%;
+          margin-left: .375rem;
+          display: inline;
+          margin-top: 2px;
+        }
       }
     }
   }
 
-  &.is-voice.is-unread {
-    .audio-time {
-      &:after {
-        content: " ";
-        width: .5rem;
-        height: .5rem;
-        background-color: $color-blue;
-        border-radius: 50%;
-        margin-left: .375rem;
-        display: inline-block;
+  // * for audio
+  .progress-line {
+    flex: 1 1 auto;
+    margin-left: 5px;
+    margin-top: -1px;
+
+    &__filled {
+      background-color: #0089ff;
+      transform-origin: left;
+      height: 2px;
+    }
+
+    &__loaded {
+      background-color: #cacaca;
+    }
+
+    &__seek {
+      height: 2px;
+      //background-color: #e6ecf0;
+      background: rgba(193, 207, 220, 0.39);
+
+      &::-webkit-slider-thumb {
+        height: 12px;
+        width: 12px;
+        border: none;
       }
     }
   }

src/scss/partials/_chat.scss

@@ -789,6 +789,10 @@ $chat-helper-size: 39px;
 
 			@include respond-to(handhelds) {
 				padding: 0 .5rem;
+
+				&.tgico-send2 {
+					padding: 0 2px;
+				}
 			}
 
 			@media only screen and (max-width: 380px) { 

src/scss/partials/_chatBubble.scss

@@ -895,110 +895,48 @@ $bubble-margin: .25rem;
     }
   }
 
-  .audio:not(.is-voice) {
-    justify-content: unset;
-    max-width: none;
-    width: 258px;
-
+  .audio {
+    padding-right: 2px;
+    
     $parent: ".audio";
-
     #{$parent} {
-      &-time {
-        padding-bottom: 7px;
-      }
-  
-      &-time, &-subtitle {
-        color: #4fae4e;
-        line-height: 1.45;
-        margin-top: 0;
-      }
-  
       &-title {
         font-weight: 500;
-        margin-left: -1px;
-      }
-  
-      &-details {
-        margin-top: 8px;
-  
-        @include respond-to(handhelds) {
-          margin-top: -1px;
-        }
       }
-  
+
       &-ico {
         font-size: 0;
-        
-        @include respond-to(handhelds) {
-          margin-top: 1px;
-          margin-left: 2px;
-        }
       }
     }
     
     @include respond-to(handhelds) {
-      height: 59px;
+      height: 42px;
       padding-left: 47px;
-    }
-
-    // .preloader-container {
-    //   @include respond-to(handhelds) {
-    //     width: 30px;
-    //     height: 30px;
-    //     // left: 2px;
-    //   }
-    // }
-
-    .progress-line {
-      /* width: calc(100% + 50px); */
-      width: 191px;
-      margin: 9px 0 9px;
-
-      @include respond-to(handhelds) {
-         width: unset;
-      }
 
-      &__filled {
-        background-color: #47aa41;
-        transform-origin: left;
-        height: 2px;
+      .audio-details {
+        margin-top: 2px;
+        margin-bottom: 0;
       }
 
-      &__seek {
-        height: 2px;
-        overflow: visible !important;
-        background: rgba(124, 195, 107, .52);
-        
-        &::-webkit-slider-thumb {
-          height: 12px;
-          width: 12px;
-          background: #47aa41;
-          border: none;
-        }
+      .audio-subtitle {
+        margin-top: -1px;
       }
     }
   }
 
   // all for audio (not voice)
   .message.audio-message {
-    //&.audio-message {
-      min-width: 275px;
-      //max-width: 380px !important;
-      max-width: 275px !important;
-      padding-top: 8px !important;
-      padding-left: 8px !important;
-
-      /* .audio-details * {
-        overflow: visible;
-      } */
-    //}
+    min-width: 335px;
+    max-width: 335px !important;
 
-    /* @include respond-to(handhelds) {
-      .preloader-container .you-spin-me-round {
-        margin-top: 1px;
-        margin-left: 2px;
-      }
-    } */
+    @include respond-to(handhelds) {
+      min-width: 280px;
+      max-width: 300px !important;
+    }
+  }
+
+  .message.audio-message, .message.voice-message {
+    padding: 8px !important;
   }
 
   .message.contact-message {
@@ -1706,27 +1644,6 @@ $bubble-margin: .25rem;
     color: #707579 !important;
   }
 
-  .audio:not(.is-voice) {
-    .progress-line {
-      &__seek {
-        background: rgba(193, 207, 220, .39);
-      }
-
-      &__filled {
-        background-color: #0089ff;
-      }
-
-      &__loaded {
-        background-color: #cacaca;
-      }
-
-      input::-webkit-slider-thumb { 
-        background: #63a2e3; 
-        border: none;
-      }
-    }
-  }
-
   /* .poll {
     &-answer-selected {
       &:before {
@@ -1969,9 +1886,23 @@ $bubble-margin: .25rem;
     pointer-events: none;
   }
 
-  .progress-line {
-    &__loaded {
-      background-color: #90e18d !important;
+  .audio:not(.is-voice) {
+    .progress-line {
+      &__loaded {
+        background-color: #90e18d !important;
+      }
+  
+      &__filled {
+        background-color: #47aa41;
+      }
+  
+      &__seek {
+        background: rgba(124, 195, 107, .52);
+        
+        &::-webkit-slider-thumb {
+          background: #47aa41;
+        }
+      }
     }
   }
 

src/scss/partials/_ckin.scss

@@ -284,7 +284,7 @@ video::-webkit-media-controls-enclosure {
   position: relative;
   cursor: pointer;
 
-  input[type=range] {
+  &__seek {
     -webkit-appearance: none;
     -moz-appearance: none;
     background: transparent;

src/scss/partials/_document.scss

@@ -140,7 +140,6 @@
 
       @include respond-to(handhelds) {
         margin-top: -1px;
-        margin-right: -1px;
         font-size: 20px;
       }
     }

src/scss/partials/_rightSidebar.scss

@@ -460,15 +460,12 @@
         }
 
         .audio {
-          padding-bottom: 26px;
           padding-left: 61px;
           /* min-height: 58px; */
           max-width: 368px;
           justify-content: unset;
-
-          &-details {
-            height: 66px;
-          }
+          height: 48px;
+          margin-bottom: 1.5rem;
 
           &.audio-show-progress .audio-subtitle {
             overflow: visible;
@@ -478,22 +475,11 @@
             padding-bottom: 16px;
           } */
 
-          &-ico {
+          &-ico, &-download {
             width: 48px;
             height: 48px;
           }
 
-          &-download {
-            border-radius: 50%;
-            background-color: #50a2e9;
-            align-items: center;
-
-            @include respond-to(not-handhelds) {
-              width: 48px;
-              height: 48px;
-            }
-          }
-
           .part {
             height: 112px;
             width: 112px;
@@ -505,58 +491,6 @@
               height: 100px;
             }
           }
-
-          &-title {
-            font-size: 1rem;
-            color: #000;
-            line-height: 1.2;
-            padding-top: 5px;
-            margin-top: 0;
-            margin-left: -1px;
-          }
-
-          &-subtitle {
-            font-size: 14px;
-            line-height: 1.25;
-            color: #707579;
-            margin-left: -1px;
-            margin-top: 3px;
-          }
-
-          &-time {
-            margin-top: 1px;
-          }
-
-          &-title, &-subtitle {
-            overflow: hidden;
-	          text-overflow: ellipsis;
-          }
-        }
-
-        .progress-line {
-          margin: 11px 0 8px;
-
-          &__filled {
-            background-color: #0089ff;
-            transform-origin: left;
-            height: 2px;
-          }
-
-          &__loaded {
-            background-color: #cacaca;
-          }
-
-          &__seek {
-            height: 2px;
-            //background-color: #e6ecf0;
-            background: rgba(193, 207, 220, 0.39);
-
-            &::-webkit-slider-thumb {
-              height: 12px;
-              width: 12px;
-              border: none;
-            }
-          }
         }
       }
     }

src/scss/partials/popups/_datePicker.scss

@@ -119,6 +119,10 @@
     margin-bottom: 17px;
     margin-left: 0;
 
+    @include respond-to(handhelds) {
+      margin-left: 3px;
+    }
+
     .btn-icon {
       font-size: 22px;
     }
@@ -132,6 +136,12 @@
     min-width: 420px;
     width: 420px;
     padding: 4px 16px 16px 16px;
+
+    @include respond-to(handhelds) {
+      min-width: 312px;
+      width: 312px;
+      padding: 4px 14px 14px 14px;
+    }
   }
 
   .date-picker {
@@ -140,10 +150,19 @@
       margin-left: 2px;
       width: unset;
 
+      @include respond-to(handhelds) {
+        margin-left: 0;
+        margin-right: -6px;
+      }
+
       &-title {
         font-weight: 500;
         font-size: 20px;
         margin-left: -5rem;
+
+        @include respond-to(handhelds) {
+          margin-left: -2rem;
+        }
       }
 
       .btn-icon {
@@ -168,6 +187,10 @@
 
     &-months {
       margin-bottom: 14px;
+
+      @include respond-to(handhelds) {
+        margin-bottom: 13px;
+      }
     }
 
     &-time {
@@ -175,6 +198,10 @@
       justify-content: center;
       margin-bottom: 1.5rem;
 
+      @include respond-to(handhelds) {
+        margin-bottom: 22px;
+      }
+
       .input-field {
         width: 80px;
 
@@ -202,5 +229,11 @@
 
   .btn-primary {
     font-weight: normal;
+
+    @include respond-to(handhelds) {
+      height: 50px;
+      widtH: 280px;
+      margin-left: 2px;
+    }
   }
 }